[AATT]Build Wordle in Airtable with Aron Korenblit
April 27, 2022 1:00 PM
Can you hear me now? Oh, man. I feel like it's only appropriate that we start the stream with sometimes technical issues here. Thank you. Colleen.
We are back. So, yeah, welcome to my new background. Welcome to, I guess Att version two. Really excited to do this again. So I know it's been three months since I've streamed, so maybe just spend a few minutes telling you about why.
So I just moved to New York. It was much harder than I expected, was much more complicated. But I'm here. I'm really excited to be back. Huge thanks to Colleen and Stephen and a bunch of other folks who kind of helped me come back.
So, yeah, really excited.
It's a new place. It's a new stream, but it's going to be as it's always been. So welcome. Grilled cheese dude. If you're new here, automate all the things is a weekly stream where I teach you how to use no code tools.
Usually I have a guest where that person is teaching us something, whether it's a new tool, a new workflow, something like that. But yeah, it's been three months since I haven't streamed, I guess. But yeah, really excited to be back. And on today's stream, we're going to be rebuilding World. I have absolutely no credit when it comes to this bill.
This was built by Nathan, a colleague of mine at Airtable, who on Monday morning decided, hey, it'd be cool to play World in Airtable. And I think that's the kind of attitude I can only agree with. So I'm also very excited to build Lurtl in using him his base as a guidance. So, yeah, I'm going to share the base throughout. We're going to try to get as close as we can building out the whole thing today.
But I think we're not probably going to have time in the next 50 minutes to like, build Nathan's version. So I might skip a few of the little edge cases of Wordl. But yeah, we're going to spend the next 45 minutes building Wordl together. And I have a bunch of streams lined up. So I think the next two months of streams are scheduled.
So, yeah, really excited to be back. Really excited to have you. Hey, Cole, aka grilled cheese dude. Hey, Trip. Welcome.
Glad to have you. So, yeah. So let me know in the chat at any moment if you have any questions or things you want me to spend more time on your coming live. So that's the value that you get. I do have a new roommate.
I guess my girlfriend's Cat might be in the area. I'd love to have him say Hi on the stream today. So cute little furry buddy, that's why. But yeah, let's kick it off. Really excited to jump in.
So our agenda for today. First, we're going to play a game of Wurdle. So it seems like two people come here just for Air table. We're going to learn about what wordl is, how it works. And then we're going to do a script outline.
So we're going to be doing a lot of scripting today. So I'll just give you the steps that we need to create in order to rebuild Wordle in Air Table. And then we'll kind of kick it off. Right? So you guess a word.
We're going to do those validations. I should be cycling through here. So we're at step three, and then we're going to check whether it's the right word, whether they have the right letters. We're going to return that response. And then we'll probably wrap up with a few of the edge cases, making sure that the base works properly.
And I will give you the link to the base itself that has the whole script. It'll be in the description. So you can start off with an actual version of Word. All that you can play with your colleagues, put in automations, really upgrade from there something we'd love doing at Air Table. So, yeah, let's kick it off.
Go back here. Okay. So let me jump into my base here.
Actually, no, we wanted to play a game of Wordl first. So I have not played Wordl today and we are going to play with the stream. So can you guys see Wordal? You should be able to see Wordl. Okay, so how wordl works?
How wordl works? Hey, Russell, welcome. Is that you try to guess what the word of the day is. It's always five letters. I like to start with Irate, and I will totally be cheating.
So if you have the word sorry, if you know today's word, don't say it in the chat. But if you have a good guess based on what I'm inputting, please do guess. So you input a word.
Okay. And this means that none of these Gray means that I-R-A-T-E are not in the word. So I'm looking for something with an op.
I thought this was going to be so much easier. Bonus feels like a good word, right? It uses a lot of those. It's got like B-O-N-U-S. This just became a Wordal stream.
This is no longer an Air Table stream. Let's see if bonus works. Okay, so we have S-O-N and the yellow for folks who are not Wordleprose. This means that the letter is there, but it's not in the right position. So this means that the S is either here.
It's in the first four letters. So we can do snout. Snout. No, Snoot. It's new to word, right?
Oh, man, Russell, that's rough. Snoot.
Okay, so we have Soso. And then I have the letters. So S-O-P.
We're already wasting time here, so shoot. No, I already did shoot stout. No, we already lost the T. We lost the T. Sloo needs an N.
You're right. I do need an N. Sloan, is that a word? Okay, now we know where the words go.
This is why I don't spout.
Come on, man. That was bad spoon. Okay, well, no. Okay. It was shown.
There was a zero chance that we got that one. Okay. Well, hopefully that was like a good intro into Snore. Now we had no e shown. Okay.
There was literally zero chance I would ever get that. And so what's cool about Word is you have this little share, right. So if I drop that in the chat, it should work. Actually, if I drop it into Twitter and that's something we want to recreate as well. Right.
So if I go to Twitter, I can copy paste and it'll say World that I didn't get it. And I'll give you, like, your score.
Now we understand kind of how World works. Let's go ahead and start recreating that in Airtable. So Luckily, Nathan kind of gave me his base structure. Let me just walk through the base and how the base is structured and then we'll talk about the script. Right.
So essentially, you input yourself as a player and then you can click Play, which will execute the script and have you play. And then Nathan, being the amazing person that he is, created a leaderboard. Right. So for every day, every player has a date where they get their Whirl score. Yesterday, I cheated and I got it.
Right. And then there are two kind of bases in the back or tables in the back end which pick a word. Right? So now I have like, Brave is going to be today's word. And that's what we're going to be working with.
And so there's a Today view which filters to today and has today's word. Right. And this is the list of all possible words. So you either have to come in the morning or pick a word or use an automation to pick that word. So what we want to do is as a player, I press Play.
The script is going to go ahead and fetch the word of the day. And it's going to ask guesses of the user and say, okay, what is your word guess? And then return these little things right here. So Gray if the letter is not in the word at all, Orange if it is, but not in the right place, and then green if it is and is in the right place. And it should let you guess six times.
And based on your guesses, should output something that looks like this at the end and throughout. That is the kind of what we're going to do. So let me actually take what I just said and put it into the script. So we're going to start here. Press play.
Let's go add a new scripting app. Now, I see a bunch of folks have just joined. So let me know if you are Wordal experts, Wordal. Noobs. And if everything that we're doing is making sense.
All right. Okay, let's go ahead. So we're adding that scripting app.
I'm going to assume there are no word all experts in here because we were bad at that word off that we ran two minutes. Cool. Okay, so let's kind of think through the script first. So first I need to input kind of information from air table, which is I need the word of the day. Right.
I need the player, things like that. But for now, I think it actually be easier if we just put those hard coded. Right. So I will do that after. But instead of going to fetch it and air Table, actually let me know if you would you prefer are folks more interested in the mechanics of the world or of like scripting itself?
So let me know in the chat if you're new to error table scripting, if you're like medium to knowledgeable or if you're like super advanced. And if folks are mainly new, I'll actually go through and go from air table and fetch the word. But if you are more advanced and know what you're doing, let me know in the chat that'll kind of adjust what I'm doing. So call intermediate. So I imagine you know how to pull information from air Table.
Okay. So then let me know in the chat and I'll come back to this. But first we want to pull information, right? And then we're going to kind of ask the user the player their guess. This is like input, right.
And everything here, we want to ask everyone's intermediate. So I guess I will not fetch. So follow up question. This is my bet. Do you know how to fetch information from error table?
And so here we're going to loop until we've played six times, so failed six times or that the user guessed the word. Right. Everything within here, we're going to have to loop six times or until the users get the right word. We're going to ask the player their guess and then we're going to check, is it a real word? Because I can't put in fake words.
Second, is it five characters? You can't put in words that are not five characters. Then we're going to say maybe we'll do this. Does it have special characters? Like we only want English, sorry, not English.
We don't want Ampersand or things like this, right. So those are the validation from there. Once you kind of pass all of those tests, we're going to say go letter by letter and then say is the letter in the right, is this the right spot?
And then we're going to say is the letter in the word?
And finally, what is that score for that round? Now, I think high level. That makes sense. And then we're going to say, okay, you've played once, we're going to come back here. If you don't yet have the word as the guess, check.
If it's a real word. It doesn't have five characters. Does it have special characters check letter by letter, return score for that round, increment the round, and increment the score for the whole world game. Okay. Yeah, that feels right.
Let me know if anyone's kind of missing anything or feels like I'm missing something here.
I think that that makes sense.
Okay. I think that makes sense. So let me just put word. So let word equal. And then what do we have today's?
Word is brave, checking on time. So that's what we're striving towards.
And then we're going to say, okay, so let word equal break. So first thing is I want to know which, like, should this player keep playing? Right. So they can only play six times. So I need a way of incrementing the number of times they've played.
And I need to kind of put a variable that says can you still play on? So I'm going to call this let play on equals one, and we're going to change this to zero if the user gets the right word. If the player gets the right word or has six guesses, I'm also going to say let number of guesses. I am terrible at naming variables. I'm really sorry.
And we're calling the word brave for now. But eventually we'll want to pull this from air table. We're going to have like a score.
Oh, no, my keyboard is acting up.
And then I'm just going to let this equal slash N, which will just be back space. That way we'll always space between what is being said. Oh, yeah, we did. Sorry. Let me move.
Thank you, Colleen. We're now in validations. Nice, actually done. Thanks for that catch. Okay.
And let's also give them like a score final. This is their final home. This right here. And this is what we're going to keep. Incrementing.
So word old number. You have an X here that says if you guessed it or not, and then you're going to have, like, your little increment at the beginning. That might be a little tricky. I don't know how we're going to do that, but let's get to it. Okay.
Like, that so far making sense. Let me know in the chat how we're feeling. Okay, so we're going to first while. I'm just going to say while PlayOn one. Right.
So it's just saying do this. We're going to do all of this.
And if they get the right word, we are going to switch play on to zero or that their number of guesses is six.
So I'm going to say word. Yes, maybe I should call this. I'll call this something else. I should call this.
No, let's call this word. And then word guess is equal to input. Await input. Dot, text async. And here we're going to say type your guest.
Or today's Wordle.
Yeah, I guess that makes sense.
And we're going to call this. Yeah, I think that makes sense. Why is it giving me an error?
How are we feeling? How's the speed here so far? I want to make sure that I'm not going too quickly. Okay. So type your guest for Today's World and then let's just do wordguesequal word to lowercase.
And then I think I need this. This is going to put it in lowercase, but it's not checking whether it's five characters or anything like that. That'll be our first kind of step.
Okay. And then let me just console log word guess. Always word guess. Always a good practice. Okay.
So far we should just ask us what is your name? Oh, I forgot to remove this. Whoops. This is just the default.
Okay, run that again. Type your guest for Today's World. Let's say Lovel. I don't know. Okay.
And then it just keeps going. So that's good. So the first thing we're going to check is it five characters. I think that's probably the best thing to do first. And then we're going to say if.
And our condition here, word guest dot length equal equal five dot length. What can I do with a string? Check if. Oh, it's not a comma. I needed a comma.
There word guess dot. Then do I have length? I do have length equal equal five. That is like you should continue. We're saying, okay, if the word is five.
Actually, I'd rather do if it's not five is not equal to five. In that case, this is going to be the true. So we're saying if that is not five, we're going to say output dot text.
This word does not have five letters. Please guess again.
Ok. We don't need to do anything else. I might just do here. S console log. This word has five letters.
Let's continue. How are we feeling on the speed so far? Going too quickly, too slowly? Let me know. Cool.
So let's run this. I'm always worried about going too slowly, but then I feel like people feel like I go too quick. So, yeah, you will come live. So you can actually tell me if the speed is right for you. And then everyone watching later be damned.
Cool. So that's our first thing. Let's test both cases. Let's go. I can't even think of a five letter word.
Irate. Irate. So this should be good. Let's continue. And then if I say I rated this word does not have five letters, please guess again.
But it's not counting as one of your guesses, so it won't count as one of your guesses. So that was the first validation. The second one is going to be is it a real work as if you go into Wordle and just because how you could cheat was just put like the letters you think are there in a Jamble. Like you put all the vowels first and a bunch of consonants. That makes sense.
So we want to avoid that and force you to use a right word. Now, air table, obviously like built in, doesn't have a library. But there's this very convenient API right here which freedictionary Dev. Let me drop that in the chat. So trip.
Yeah, absolutely. I will absolutely jump publish the script in the Air table community. I also have the link to the base. If you do exclamation point base, you get a link to the base. And I'll ask Nathan how comfortable he feels me publishing in the universe or whatever.
Like that. Cool. Okay. So the second step here is going to be pinging the API to see if it's a real word. Right.
And so I have this API right here. The free dictionary API just dropped the link. It's a very simple API, no API key. You literally just go to here and then put the word in there. So if I do the word hello, it says hello, is it work?
And if I do the word, blah, blah, blah, it's going to say no definitions found. So what we want to do is call this API. Now remember, any URL is a get call. That means that we could do a get call to you, this API. So I'm going to go this word is not five letters.
Let's check if it's a real word we're going to do let real word equal awaits remote fetch, a sync. And then we want the URL. Right? If I'm not mistaken, actually look at fetch. Always easier to just do it like this browser fetch right here.
So it's copy paste.
I am not cheating a little bit, but real word equal awaits remote fetch, sync.
They are going to put in our URL right here. Boom. And we're going to have to change this word for the word. Guess so. Our method is going to be post.
We don't need a body format this a little better comma. We have a headers application, JSON, something up here. Like one too many of these bad boys or one too few. Where did I mess up here? One goes with that one.
Oh, there's missing a little method is going to be a get. So if it works in the URL, if it works in the browser, it's a good question from Colleen. So if I am able to make it run in the URL, I know that it's a get because when you call an API from the browser, it's a get call. Right? So it gets the HTML in this case where it's returning JSON.
But yeah, get the URL part again. Absolutely. So maybe I went a little quickly there. Happy to spend some time here. So if I go to this, the free dictionary API, spend some time here.
This is saying the URL that you need to call is this one right here. Right? So it says API dictionaryapi devaptwoentriesenglish and then the word that you are looking for. So this is the variable part of the URL. So if you want to see if it's a real word, you need to replace that word right here with the word that you're looking for.
And it's just a simple get call. There's no way to post post would be like I want to add words to the dictionary, which we're definitely not going to do. So it's going to be a get call to this URL simply by replacing this right here with the word that we are kind of asking it for to check. So let's come back here real word. And just to test this, let's just put the word hello.
So I'm not actually passing the word that is being asked of us. I'm just passing in the word hello. And what we're hoping for is that we get the same thing that we see right here, like a JSON with all of this information that we're frankly just going to check if it exists. Right? Okay, so let's run my word is I rate during the API call, and if it all went well, right, it returns an object with the word hello.
Okay, great. So that means that the API worked and there's a bunch of information. But what we want is really just the fact that does this return a non error. So next step here is actually to change this URL.
Give yourself a little more space. How's the sizing on this? Is this better? At worst, let me know. We want the yes, the word guess go right here.
Now if I just do this, it's just going to go and ask the API for the actual like string word guess. So what I want to do is I want to input the variable word guess. To do that in a string, you first have to put back ticks and then you have to do question Mark and then word guess like that. Right. So here now it's going to actually go in and take what's in word guess and put it in the string.
Now let's do this again and then let's do two things. Let's actually input a word that doesn't exist. That's five letters. So something like this.
So it's a dollar sign, so it's back ticks, and then dollar sign, and then the open brackets or parentheses, whatever you call it, like sideways mustache, essentially. And then the name of the variable itself. So let's run this. So we see title, no definitions. Found that's one way we could say, okay, if the real word returns this, then we need to tell the person that hey, what you put in was not the right word and then that's part of our validation.
So let's go ahead and do that in this else we want to see. We're going to say else if now, that's probably not the best way of doing it for any developers watching this. I'm deeply sorry, but it's an efficient way. I guess it's the way that kind of makes sense.
I'm going to put this into a variable so I can go and check it all. Let real word check equal await. Json if real word checks dot title. What I'm doing here is I'm just going to title right here. So I'm saying if the title is no definitions found.
Actually let's do not is not no definitions found. Equal? Equal? No, not equal. I think not equal is.
Okay. Yeah, not equal. If that's true.
And this will be play on check whether the word is today's word and then else we go into output text.
This word does not exist again.
Does that make sense? Let's read that back. I'm realizing this took way more time, so we're going to have to not speed through. Maybe I'll do a part two, part two of Build and World, but we'll get through the essentials, I think in the next 20 minutes. So first we check whether it's five characters.
That's all good. Second, we do an API call check whether the word and then we say if the real world is not equal to no definitions found, which means that it did fine. We're going to do just a quick console log here that says this is a real word, let's check it. And then if that's not true, we're going to go ahead and make the user play again, not increment his tries, their tries, I should say or anything like that and bring them back to the top.
Okay, I'm going to skip the special characters just because in the essence of time, but it should be relatively easy. And then we're going to bring this into here. But in the script that I'll share with the base will have everything. Cool.
Okay, so let's try that out. We have two use cases here. If it is a real word, our expectation says this is a real world. Let's check it.
It's not a real word. E the pirate way of writing the word I rate does not exist. Try again. Amazing. Okay, cool.
So that is the validation piece. Now there is a kind of validation check. You should also do some regex to check whether there are any special characters. But I'll leave that to the script because now we're getting into the fun part. The fun part is checking word by word or sorry, letter by letter by letter.
The word is correct.
Isn't it easier.
Let's do the whole check. And I think a good way of saying is if you have five green squares, you've won, right? So we don't need to do that check at the front. So if you've answered the right word, you'll have five green squares. We can do that check at the end to see if you've won.
Right. And then if you haven't won, we can kind of bring you back to the top. So I think we can start going letter by letter. I think that makes sense. So let's do this letter by letter.
Am I making sense here? I feel like I'm again, too quick, too slow. Let me know. Always curious. Okay.
Or I'm going to call this bar I equals zero.
Is this returning the guess we've checked. Let me just pull this up. So right now we've checked whether it's the right length. We've checked whether it's a real word now. Oh, you're talking about the agenda.
There you go. Okay.
Yeah. We are at step four here. Return guests. Ash, it's an honor to have you here even late. You've come at the right part.
We've done the boring what I think is the boring part, which was just checking whether it's a real word. We just did check what the length of the word is. Now we're actually getting into the meat of it, which is checking letter by letter whether we have the right world up until. So this is going to do five loops, right? We want to do five loops.
We're going to say or I equals zero. Every time we're going to loop this and say I is less than word. Yes. Length. This is five essentially.
So what I mean by that is if I started my word with B, I'm going to check if the B is right here. And if that's the case for that round, I'm just going to output a little green square. Okay. So here we're going to say, okay, let's just do a few things here. So let yes.
Oh, my mouse. My word is acting up here. Yes.
This is the problems with moving. Okay. So let word guess. I like that. This is the letter that we just guessed.
Where am I? Here lost myself a little.
Okay. So guest letter is equal. So if we just console log guest letter, that should just give us the same output as here.
My keyboard is really acting up. Okay. It gives us the same output. So the first thing I'm going to check is if the first letter so if guest letter is equal to word, I misspelled that.
Why is it giving me a guest letter is an error?
Because I'm not in here increment. This what this is telling us, this is saying if the first letter of our guests is equal to the first, not the first letter. So any letter. So if I got a letter right, then I want to let's call this round Score. And I should initialize this to Round Score equal like what I had before.
Oh, man, my keyboard is just super annoying today.
All right, there we go. Round Score Plus. Let's just give it that little square. Let me copy paste that green square from somewhere else. Okay.
And then let me initialize round Score at the beginning.
Let Round Score equal this. And I wonder where I should put that. So I don't want to initialize it every time the person they enter this right here. I want to reset that to before that makes sense.
Whereas if you're looking for something more back end, it's often like Node. Js, which again, is not what we're doing. So did you kind of recommend the Learner Table scripting? And that's how I learned. And that's why I'm kind of not the best at this, to be Frank.
Yeah. Let's jump into Round score. So I need to initialize round Score somewhere, and I need to initialize it after every time the person comes back. Right. I think it's here.
I think I need to initialize it right before the person guesses. But let's initialize here.
I think that makes sense. Okay, let's try it. So I think what we want to do here is, if it's right, what our expectation? So else for now, I'm just going to say Round Score equal Round Score Plus. Let's just do black Round Score.
So if we get a letter in the right place, that's going to give us. So let's run this. Let's find a word that has five letters. Let's call Bravo. We should get four and then one black.
Oh, I forgot to console log. It's consolog console log.
Actually, let's do it when we get out of this loop here. So it's console log here.
Okay, let's do that again. Stop this run. Bravo is the word we got. Okay. That actually makes sense.
So we got four out of five.
Okay, so that works. I think the other thing we want to do is check if it's not in the right place, it's the right letter, but the word contains the letter but is not in the right place. So that's going to be step two. So we actually first want to check. Okay.
Is it the right letter? So here I'm going to do another if, then if, and then we can do an else if right here.
We want to put this else.
Let me undo that.
If let's remove this one.
Okay. So I'm saying if next is else if my keyboard. My God, I just changed the batteries on this.
Now we're going to check here. Does word contains. So there's this thing called is it find includes. Includes, I think is what I want. So includes and what we want.
What we want to do here check does the word is Wordal.
Include our wordgues?
I if that's true, we're going to say round score.
So it didn't find it, but it does include it. So it's going to go here.
And then I think our last one is else round score equal round score plus and then the black one.
Now I need your help. I need to figure out a word that has some letters with brave, but not all letters. Right.
Yeah, this all seems good. Okay, so let's try that.
I could do raves with an S.
I think that should return four yellow and one black.
Oops, I forgot to console lock. Of course I did. I just like to put in some suspense.
I got to keep everyone on their toes, including myself. Okay, let's run rate. You okay? Wow. I was surprised.
Go us. Okay, so I know they only have five minutes here. So let's do the loop and just put the conditions for when Brava. Is that a word? Is Brava a word?
Let's try it. Let's try. It does not exist. It's been refused. Colleen, I'm sorry.
So then every time we do that loop, we want to score, right? Okay. Yeah. Let's put the conditions for getting out of lay on really quickly. And then that will be all for today.
So here we're going to do wind conditions.
I think we still want to be in this else. No, we still want to be in this one right here. So we're saying we're continuing once we get out of this loop.
This is all related to the word we just guessed.
Okay. Right here. So here, once you've done this, we want to increment a few things. The number of guesses goes plus one.
Number of guesses equal. I think it's plus plus. You can just put plus number of guesses plus one.
Then we want to increment score. Right. That's our score. Score equals score plus round score with a line break which is backslash n if you guess multiple times.
I think that's it.
This is the letter in the word.
And now we just want the win conditions. So if word equal equal the word. Yes.
I wonder if you could just do if round score.
Okay, I only have two minutes here. So we'll end here for today and I will shoot you guys the template because I do want to go over an hour. So I'll just send everyone the template. But what you would need to do is just create play on the change to zero. When you either have the word word right here, you say once you come out of here.
So when conditions.
I'm going to Chuck this keyboard out the window. Once it streams the win conditions are or the lose conditions, like the stop condition. So play or guesses word more than six guesses and that's pretty much it. So at that point you just change play on to zero and then you output the result. So let's say console dot log number of guesses you have guest plus times and then onsell log this round score plus or round score.
Okay. So I think that should be enough for playing with the game. Let's run. So someone should ask opera.
Right. So we got three letters like that and you have guessed two times because we've incremented it before. We should actually put this and then let's try Brave.
It says three times, use this round score is blah, blah, blah. And that's when you can do. So I will show you guys the script, which is actually like maybe 23 here just a little bit longer in that it actually gets the right word of today. It's not hard coded and then creates a record at the end and they just have victory conditions as victory defeat and then continue playing if you are under conditions. So shout out to Nathan for building this.
Hopefully this was like enough to get everyone started with scripting. I'm going to drop a link in the description with kind of a link to the whole base and the whole script so you can really play around with it. And yeah, it was really kind of good to be back. I wish we could have gotten to the end, but I do want to kind of be conscious of everyone's time. So I'll be back next week with another stream so let me check what's on the agenda tomorrow or next week I should say upcoming live streams.
I'm doing a stream with Finn suite on managing your clients getting off of web flow billing the week after we're building custom maps in any stream I should be streaming with fence suite tomorrow. You're totally right, Colleen we're going to do some stuff with Jason in a couple of weeks talking about Koda so lots of really cool streams. Upcoming huge thanks to you all for joining. Really appreciate it and yeah really excited to be back streaming and building some cool stuff including Werdel in Airtable so with that huge thanks. I'll see everyone back next week by Colleen by ash thanks for joining, Sean.
It was good to see you. Really appreciate all of you kind of coming out and I will be back next week. All right. Bye. That's it for me by all have a great day.