Build a Custom IVR Using Twilio (with Nathaniel Okenwa) — Learn With Jason

hello everybody and welcome to another episode of learn with jason today on the show we're bringing back nathaniel aquino the original chatterbox coder how are you doing man i am good you said the original now you're watching like another flavor of childbirth's code like often imitated never duplicated i love it how you did man i'm doing great i'm super excited to have you back on the show i'm i uh it's always a blast when you're around so i'm also really excited today because we're doing something that i think is both very exciting and also such a good opportunity for trolling um oh ximena thank you for the sub thank you so much ximena just hit a year of sub 12 months of subscriptions holy crap i still can't believe i've even been doing the show for a year it's been like dang you've been you're you've come in like i don't want to say your legacy because that has some like legacy is not always a good thing but you you're aging like a fine wine why i think i should have said aging i meant like the stream is like bread but the the stream it's it's going great it's you know it's like a nice sherry cask bourbon um you've got shouting out my owner in the corner yes go meow now uh yes yes yes um but yeah so i i feel like what we're doing today is something that uh that we all deal with when we call somewhere right you you call in and then you get told like you know press one for for account information press two for customer service uh uh para espanol primo you know like you know you get like the whole the whole experience um and that is called an ivr which i just learned today is short for interactive voice response you know what's crazy is the number and i'm just gonna tell people i forgot and had to google it a couple of seconds ago like do you ever have those things where you know what the acronym is you just forget what it stands for that's like my whole life there's so many things that i'm just like i just like spout off acronyms and jargon and i'm like please don't ask me to define that i've literally forgotten um nikki uh okay yeah so so i'm i'm really excited about this one but but before we talk about that let's talk about you so um you've been on the show before but for for folks who are meeting you for the first time you want to give us a little bit of a background cool my name's nathalia kenwa aka chatterbox coder because i love to talk and i write code uh so i'm a developer evangelist at twilio which we'll be talking about later and my job is to pretty much go to wherever developers are so before the panoramic i'm calling the panoramic deliberately uh it was in person at conferences at events now it's been online on twitch and other sort of um online places i'm looking forward to going back to meeting people in person as well but i've been having a lot of fun i've started streaming i've joined the streamers club um so i stream usually on fridays around the midday bst um and i build cool stuff and eat donuts so if you like doughnuts cool stuff and someone acting silly then you can come watch and come join us we do all sorts of javascript projects this is it it's such a good idea it's one that i i'm absolutely very tempted to steal uh so so tell me how the how the donuts work because i love this format so at the start of every stream i basically write milestones so i'll be like okay i want to build like right last week i built a thing where you phone if you're talking on the phone you can talk to someone and it translates but i'll be speaking in english but they'll be hearing like spanish and if they speak spanish it comes back to me in english right so at the start i kind of break the problem down into like the steps that i think i need to do and i try to work through those and then if i get through enough of them by the end of the stream i ask the audience and there's always someone who says yes like which is good like luckily people in the chat they love me so i get to have a doughnut a special doughnut each week it's changes every week i'm usually very excited have you have you ever not gotten your doughnut like does somebody ever say like nah no donut for you you got to throw it in the trash you know what i'll say there's a diamond boy i'm not sure if he's around but diamond boy is always always trying to stop me from getting my doughnut so but i've been able to find people in the chat who will just always support me and and worst case scenario and i've said this before worst case scenario we all know that i can just turn the stream off and eat it by myself but at that point it's more of like a shame donut like you gotta eat it in the dark by yourself um no that's that's great and also thank you everybody for the bits thank you eco eco is at 18 months of subscription holy bucket uh i am thank you eco i can't i mean i can't believe that you all have been hanging out with me for that long it is absolutely wonderful it warms my heart um so nathaniel today we're gonna work on an ivr which uh which we just learned both of us that it stands for interactive voice response and when we talk about an interactive voice response uh i feel like there there are a few varieties right there's the classic one you you press one to go to a different department and and it kind of it becomes it turns phones into a choose your own adventure game um but that's not the only way you can do it right like you can also there's the one that you have to talk to and there's the ones that like look stuff up and you know like i know when i call uh like my credit card company it uses my phone number to figure out if it recognizes my account and then it kind of gives me some basic details and if i put in my pin or whatever it'll let me check my so it like kind of jumps through some hoops and stuff this is all stuff you can build with twilio right yeah so twilio what what's video started with it started and then lots of times when i talked to people and i go have you heard of twitter oh yeah that sms company i'm like yes but we do so much more it's basically we had all these building blocks that allowed you to sort of interact with phone calls and do stuff but then people began to build really really complex sort of applications that got hard to build and then we focused not just on building those building blocks but also building tools that help people make those complex applications and abstracts all of the the same-ness hard things that you have to deal with when you're playing ivrs yeah i mean it's it's and it's kind of a daunting problem to think about because you're you're dealing with like so phones are cool because phones are are it's like technology that's pretty old um but we do things that it's not really meant to do like the thing that i always found interesting about it is that what you're doing when you do like the press one for for whatever is you're not like it's not like you're pushing the button and the other end is is like receiving that button press you're pushing one and it's making a tone a tone and the other end is like basically listening for the right pitch and making a choice based on the pitch it hears which is wild that's why you can't use rotary phones anymore right they don't make uh they don't make touch tones like the the tone isn't there um so it's it's fascinating and and so what what you're doing with twilio is abstracting that part away because there's no like you know on the web you've got click events you've got kind of universal things but you don't have a push one event on a phone you gotta like identify the pitch of the one button and then make a decision based off of that exactly right so it takes all of the information and the thing about like phones is even though like we're in the age of the internet everyone's got smartphones and stuff still like smartphones are not as widespread as phones and phones are everywhere and for sort of telecoms like technology is so widespread so like for example any company makes sense to be able to build your sort of customer experiences in ways that have this massive like users amount of users on it and then being able to still port that over to smart fancy stuff maybe with ai with with all sorts of things and being able to just like create cool stuff i asked that's where i go to it yeah it's really fun it's it's really good stuff so today what uh what did you have in mind for today like how how far do we want to push this so how are we going to earn our donuts how are we going to earn our donuts i mean see now you've got me going down the donut train so there's a couple of things so we when we usually call these like um these phone lines there's a goal there's something we're trying to get to and then you have to kind of jump all of these hoops give it the right information so that you can get to wherever your goal is i feel like the goal should be a type of donut right maybe we create an avr that takes you down a phone tree and figures out the right donut for you because there's so many different flavors so many different things but imagine like you could phone this number and it will tell you what the right donut for you is absolutely i already know this let's take this to the vcs i feel like this is we can get investment for this i take my money absolutely donutmatch.com like oh yeah playing playing sound effects from the stream based on uh uh that would be okay so that's a fun follow-up i think because i don't know how we would do that just yet but once once nathaniel teaches me how ivr works then i could extend that and make it so that you could call a number and like affect the stream which would be really cool oh i've taken phone calls on my streams i've connected my phone to twitch so like sometimes i'll let people call in and talk it's it's it's fun i love it dinder tinder for donuts that's what we're pitching everybody i love it i absolutely i love it okay so uh so this is that yeah i'm i'm so on board let's build dinner uh okay so first and foremost let's uh let's take a second let's get over to pair programming view and uh make sure that you go and check out the home page of learnwithjason.dev where you have uh live captioning going on right now we've got jordan with us today writing down everything we say which is bad for jordan great for you you are awesome i'm sorry that i talk so fast and talk too much yes uh and that is made possible by our sponsors we've got netlify fauna auth0 and hasura all kicking in to make the show more accessible to more people thank you very much uh and so make sure you go check that out uh and while you're doing that checking things out clicking things on the internet make sure that you go ahead and head over to twitter and follow nathaniel if i can do this right on the first try i can spell go follow nathaniel it is a uh it's a twitter stream full of of information and pictures of donuts it's a it's really wonderful um wait can we is my last picture of if you go to like media i'm trying to remember what my last donut picture was let's see what's where's the donut uh every game cable management one more show oh there we go there's a donut there's a donut i think if you scroll down under like thread i think i may have posted it i'm not sure if i did cookie doughnut yes it was a cookie cookie dough no cookie dough doughnut so it was doughnut to add cookie dough in it if you click on that maisie's like what flavor question i think i posted a link to like for part two oh yeah and and there's a there's a song called the donut day everybody celebrate yeah this is hilarious i love it i love this okay we're just gonna drop this here you go chat go go play with that um [Laughter] uh while you're while you're watching that video we're gonna get ourselves set up to run here so i have um twilio let's head over to the twilio homepage how about that so let's take a look uh twilio itself does a bunch of things you as you said i think a lot of people think about twilio as a company that specializes in sms um but it does so much more than that i just realized i don't have sound routed into the right direction so i'm going to change that make sure that we can all hear things um so this is like twilio is a company that does phones but it does a ton um so we won't get through everything but you want to give us some highlights some of the few things that that y'all do well honestly it's just like communication so sms and and that means a lot of things so that could be just like a notification like your deliveries on the way but it could also be two-factor authentication we have to authenticate our app with authy we have video chats we have uh sort of whatsapp api that's getting pretty popular as well and then there's a lot of stuff that goes in the background to help those things so we have like sync which helps you manage stakes you need to do that for chats um we have like sort of now now it's like everything's jumping out of head we have task router which is like a fancy way of being able to take tasks and assign them to the right people because you do that in contact centers so there's like all sorts of cool technology layered on top of each other yeah and and there we've done a couple episodes on this um see if i can find you this is this is how good my site search is is i have to just do a find and replace like i'm sorry everybody no worries i will fix this someday um but so yeah so check this out so we've got like video uh video streaming and we've got a uh this was a polling game or not even a game it was just polling that i swear to god one of these days i'm gonna finish and actually work into the stream so that we can do live polls um but you know there's this just goes into some of the things we get into like twilio serverless functions their video chat functionality we look at the the sync service that you just talked about we we use that um so if you want to see more of what twilio can do make sure you go watch these episodes they are a lot of fun today though we're going to be working with the the og twilio use case which is telephony yep yep yep back to basics back to basic so so this is where like one of the first things we always say that's really it's like you buy your phone and you kind of that can do whatever you want with it and this is kind of where we're going down so there's a couple of things we want to do we want to first of all be able to gather information from a person so our personal phones are obviously going to be able to take a phone call we want to be able to sort of uh gather information about them and take them down a certain path and then we can give them something at the end maybe we want to connect them somewhere else um we could do all sorts of things yeah so let's let's do this i'm going to start writing down notes here and we will uh let's let's plan uh which will be a first maybe for learn with jason to actually start with a plan um so what we want to do here is we're gonna build tinder uh remind me who came up with that idea i wanna make sure you get credit cause it's so good uh deep i think i'm pronouncing that correctly maybe completely wrong excellent okay so what we want to do here is uh first and foremost we need to be able to um like we need a phone number yeah and then you said we need to to get information so what what are we looking for in terms of information do you think so we're probably gonna like ask them some questions about maybe the flavors or things that they like so for example which is better like jam or custard custard ah jam yes kind of thing so maybe we can sort of take them down that route and find out what their favorite filling is and what their favorite topping is so maybe we can ask for their favorite filling and their favorite topping and then we create this magical donut for them i'm like just going like on krispy kreme and checking if they have an api because that would be fun to deal with i thought that would just be perfect if krispy kreme has an api ah donuts api wait there's the donuts api yes yes it returns donuts donut types it scrapes krispy kremes website to get donut info yes yes i love it i love it okay so the following donut the following apis are available after you run npm run build um okay so this is really fun let's let's see what happens if i get this i'm gonna so i'm gonna grab oh my gosh this is my stream uh how do i not see i'm gonna put this just gonna make a new directory i have this uh this habit that i picked up from uh from chris biscardi where i uh i create a github like structure on my computer that matches the actual github paths and then that lets me do this this shortcut here where i'm able to uh make a direct link out of my terminal so i can go straight to the repo if i need to cool uh so what do i do to start i need the npm run build so let's um it's got a package.json so let's npm install and then okay so while we let that happen let's keep thinking about what we're going to do so we'll we'll be able to use this donut api as our uh as our service here um and then we're also going to be able to uh so we'll ask about flavors we'll ask about toppings and then at the end theoretically speaking we should be able to like narrow these down yep to show what's left this might be a little more clever than we want it to be so we we could also do a little more guided and at the end recommended donut cool okay that that seems like it would work should we do something like text them the recommendation yep we can do that because i won't be surprised because krispy kreme has a website so i won't surprise if there's there may be urls um to the flavor of the donut that would be amazing okay so now we're gonna npm run build this is probably going to take a while since it's scraping i would assume um yeah that makes sense i also just realized i'm like executing completely un unvetted code on my local machine like oh here we go krispy kreme donuts one of 48. oh wait that's 148 of oh so this will take a minute um yeah that's okay wait did we get the tm fascinating how they get that in the url i guess you can use non-uh non-letter characters in there let's see is there like a conversation to be had as to what constitutes a donut all right jacob all right i don't know if you actually have seen me talking about the cube rule or feed we actually addressed this on our last stream literally on the last stream oh fridays according to the cube rule of food it depends is it a ring donut or is it a um a doughnut with a filling in it because if it's a doughnut with a filling in it i'm just scrolling down it is a cow zone all right because it starts with a filling inside if it's a doughnut as a ring then it is a sushi it is a ring with something what about a donut hole a doughnut hole ah see it's a toast it's a toast it's a turkey there's nothing in it it's just one piece of starch toast i love it see i would argue that all of them are sandwiches because calzones and sushi are just variations on sandwiches yeah i get that i i get that that is an argument i will allow i i subscribe to the uh to what i would consider the the lunch special philosophy of sandwiches everything is either a soup salad or sandwich that's that's really how it goes salad or sandwich that is small that makes sense that makes sense keeping it simple uh see that would make most blue star donuts into cakes uh yeah you're probably not wrong that's a blue star doughnut so blue star is a uh it's a donut shop in portland oregon that they specialize in like very hipster donuts so like the their their classic is a an orcharda glazed donut um and then they do you know like fancy stuff like that pizza is an open-faced sandwich absolutely uh but uh but yeah the there's that and then there's also voodoo donuts in portland which which specializes in uh weird donuts so here's the thing it's genuinely on my map voodoo is a good it's a good donut shop but really what's cool about voodoo is the novelty of it because they do donuts that are not safe for work they do donuts that are like a voodoo doll that's uh that's full of red jams so that when you and it like they stab it with a pretzel stick so that it looks like it's you know a voodoo doll that's bleeding um so that part's all really fun the donuts themselves though they're they're okay like they're good oh oh because the cocades and he's just said in the chat actually said i should go to portland donuts let's go to portland so i can have v do donuts so whenever i will road into portland at some point just to get the doughnuts like flying grab a doughnut fly out cool i won't take that personally at all all right so we've got our we've got our donuts so let me run this and this should give us a a donut api at localhost 3000. so this is in the wrong browser so let me open it over here and now we get api donuts look at all these donuts okay and we do get back a url so we'll be able to text a url of the of the donut okay so that's really fun so and we and it's high school right so you've got you just want like very asmr you're like hello let's talk a little bit about my math today my best because i've literally turned and started speaking into my bed i thought i thought you were just getting really serious like it's time to you know late late night donuts are a very serious thing important so the cool thing is it actually tells you the types as well so you can see it's like the first one you got filled got all sorts of interesting stuff here yeah so let's grab one of these by id how are we doing that uh somewhere in here there's going to be an id there's a description there's do we not have an id it definitely said there was an id id documentation got it so let's grab one of these all right so we get a single donut back and this gives us uh yeah all sorts of things so we've got the the type and there's categories here so we'll be able to kind of pull those in um does it give us did it give us like generics types yes so here are available types of donuts so we can even we could even start by saying like if we did i think it was donuts uh types and then i could do like filled and i think it filters was that right i think that was the format type equals ice field so i did that wrong it should be type so this would give us a subset or we could do like iced and okay i love it okay so we we can we can actually like filter down and and uh that'll that'll be really fun actually um because the other oh you know what we could do is we could you could start by choosing from all of the available types and then we could get a subset of what's left after you've chosen your types and filter down until you've chosen everything and then it could give you like i don't know the first the top three uh and then you can choose yeah okay so that that could work cool all right so i'm i think i'm ready i think i'm ready to to get started on this uh the setup here so okay so to write that down uh first choose one of the available types filter results for remaining types repeat until no types left uh choose from top three donuts match okay and then we'll text url of selection all right so that that i think is a this seems doable like we can earn this doughnut absolutely absolutely oh you know i'm so disappointed that i didn't go because i won't pass the krispy kreme we should have planned it i i totally would have gotten a donut um yes some of the donuts do have multiple types so what we'll be doing is is we'll basically be keeping track of which types have been selected and then finding them that match all of the thing because like you can get a you can get a like a boston cream would be a custard filled donut with chocolate icing um or or things like that so we'll be able to you know or like a filled donut with chocolate icing and sprinkles would be filled iced and topped um so hopefully by making these selections we'll end up with a subset of donuts that that uh well we'll have to be because we'll be filtering the results to see what what types are left um and once we run out of like additional subsets we'll just choose the top three cool cool so i'm i'm ready then to do this which means i now have no idea how to start with a like a twilio telephony app so there's so we're going to first of all do a basic thing and then go and show talk about how complex it can get and then skip to the tool that takes away that complexity great cool so but number one we need to buy a phone number okay um so we should be able to just head over to the console yeah and get logged in here get this off the screen no it's not going to let me do that let me do it over here there's my twilio am i in i'm in okay so i'm in uh i need a phone number and my phone number is this one here looks like a number that's how i knew do you want to try the beta console that was built on a really really cool platform oh yeah i do up which makes everything look different it actually makes things easier to find as well i am i am very excited about this um so looking looking for where's our our root request here this one console.twilio look at this y'all twilio is deployed on netlify now i'm so excited this is really yeah i'm i'm super pumped and like how cool is it that you can deploy something this complicated on on like the jam stack on netlify uh nice it's very very very cool but yeah that's not what we're talking about today today what we're talking about is uh we want a phone number so i have a couple things that we've got here we've got this uh this polling app so we could theoretically use that one but let's let's not let's get a new one we've got some github actions as well i do i set one up with uh i think brian douglas uh he and i set one up to like text when somebody pushed to a repo which was which was pretty fun uh that makes sense let's see match to the first part of the number what about a portland number or wait what's uh what's the the original the 503 and we want voice right yep any 503s we get a 503. uh yeah one of these is one of these will work how about this one cool okay so i'm getting my phone number it's got voice fax sms mms so that's everything that that a phone number can do right yeah these are all the different so different phone numbers especially in different countries in the us and the uk it's not necessarily like so hard but in in some countries there's not necessarily it's not easy to find a number that like does voice and sms and facts or does one or the other so there's different ones also you may not need sms so if there's no need to buy a number that has it if you just need schools nice okay so i'm here i'm ready i've got it i've got a i've got a sid um so now what we want to do is we want to configure if you scroll down a little bit further you're going to see what we can do we can say that it should accept incoming phone calls and then when a call comes in uh it will make a it'll create a post request to a url with that [Music] okay so now we can quickly spin up like a node server that will give it some swim it's what we call twiml okay so let's i mean we can just do this with uh with nullify functions right um yeah so let's go uh incoming.js let's go incomingcall.js and i'm gonna have to deploy this so that it can hit it right yes you can either deploy it or you can use a tool called engrock i use egg rock when i'm developing locally all the time um built by a twillion um basically to solve this very thing but it's useful for everything else right so if you're working locally and for some reason you need to expose that local host onto the web using ngrok you create a tunnel from a url to your localhost and it's temporary so it's not something you would ever do in production but it's really useful when you're developing locally i like to use it sometimes if i'm working like when i'm doing some like stuff to build something for a friend or a little person outside of work um i send them an angry thing so they can just see what some other clothes and i don't have to go about deploying their changes every time when it's just like a tiny change gotcha okay so let's go to github learn with jason twilio ivr uh and then i think what i can do is nullify dev live which i think will use ngrok let's find out oh see that's very similar to live site oh i need to i need to actually initialize this first so let's uh let's do this i'm going to get add everything um and we'll get commit as a work in progress uh twilio ibr okay and then i'm gonna github repo create learn with jason twilio ivr i love this github cli so much it is so cool i'm gonna create that yes we are got it created get push upstream origin master main got it and then i can notify init with the netlify cli and this will create and configure a new site i'm going to put it on my team we'll call this twilio ivr uh i don't have a build command yet i don't have a directory to deploy it auto detected netlify function so i'm going to run that deploy keyspeed you know what it's i even though i've used the netlife cli before like seeing someone who uses it sort of every day it's i guess it's probably the way people maybe feel when they see me using the twitter you see a lot it's just like it looks so beautiful just how easily you could do things and get stuff done okay so theoretically speaking i should be able to nullify functions incoming call and it responds okay yes we have a running local server that we can use as part of our development flow so i'm going to drop this in here now this isn't going to work because it doesn't return any any uh twiml that's how you pronounce it yeah so it's twilio markup language kind of like html but got it okay so now that i have that uh what would be an easy way to test this like is there a hello world kind of default yes so if you just change the status type that's right the yeah the type the content type to xml okay so you want to return some xml i'll go content type is what is application xml i believe so no text xml i'm sure i think it's text slashes cool yeah i believe it um and the body we want to do if you just do say it needs uh the opening tag response so open and close tag response and then inside that it needs to have like this yeah lowercase like that uh no capital for the r and then let's put a say in there so say welcome to your phone number or something like that okay so i'm going to save this says it successfully reloaded all right so now if i call my phone number theoretically speaking i need to get my phone hooked into uh into here so that we can actually hear it but i'll put it on speaker so that we can try it so i'm going to call my phone number uh so 503.386.0093 call that put it on speaker and it should welcome to your phone number holy crap that was so much easier than i thought it would be um that is outstanding i'm not kid like wow that is wild like we just ran we just ran a phone number okay i just i'm just say this out loud because it sounds bonkers in my head we so we've been doing this now after we stopped screwing around for about 10 minutes um we have purchased a phone number we set up a new website we set up a serverless function and we got it set up in such a way that twilio is when i call my new phone number that i just bought it is hitting a serverless function and then responding in language that i wrote with this just basic xml here wow precisely dang that is cool that is uh that is really really cool so right now we've kind of written the xml as a string but what you can eventually do is we'll and we'll do this in a second is when you use the node helper library to do it you can then become more dynamic and add a lot more complexity to that still very very sort of in a very straightforward manner yeah i mean this is yeah i'm like i'm very very happy about this like the whole the whole thing it feels like a superpower right like when you can do something like this this quickly you just go it's like it makes me want to just be like i am the smartest developer alive please don't clip that chat you're they're already doing it um coming soon to a sound effect near you oh man please take that so i can turn it into a gif and i can use that anytime i'm feeling really good about something i've built good okay i'm guessing what's next is now if we go back to our readme what did what did we have us on the next part of the task so we've got a number to call we've got a number to call so now we need to ask questions um ask questions right so we can get our list of available types which i'm actually wondering if maybe we can this runs ts node which means i'm gonna have to well i guess it can it can work locally since the this is local and i'll figure out how to deploy it later because i don't know how to deploy a node server super easily um i wonder if i could like scrape it and just put it into a json file or think it is a json file i think when you run npm run build it just makes json file it just creates uh yeah let's let's open this and i think i saw that in the in the in the in uh yeah if there's a donut.json file in your project folder which should hold everything beautiful okay so the part that i don't have is this server is what's doing the the filtering on the the data yeah um so for now let's we'll just try to run it locally let's let's make sure we can do that i will run this as run serve and then let's get one donut and say its name so we've got where is our donut we've got one donut here we'll get this uh the original filled do i have to put the the tm in there i do you have to put the tm in there that's wild fortunately i know how to do that okay so then i have a a title so if we take this then what i should be able to do in here is um we can do like let's get batch equals require node fetch and then um we'll get the donuts will equal await fetch i love how this car joins in it's like where are the donuts like i wonder if you knew what we were building or if you just saw me on the stream and was like there's doughnuts somewhere i really want to know because that would be hilarious um so this is it i didn't bring any doughnuts today unfortunately please that's cool so now we've got the title and now we can have you already got it back ticks yet perfect so now you can say yeah the title right so that that should theoretically work so i need to come over here i'm going to stop this uh npm install node fetch so that we've got that available and then let's run this again we're gonna have to change up our uh our live port because i i just stopped and restarted the server so take this one and we're going to drop this in here okay save that and assuming this works i can call this number again uh so we'll go to my recents call it original filled original cream oh my goodness y'all i can't even get my head around how i was really expecting this to be so hard i'm not lying like i was like oh we're going to get 10 of the way through this behold my bucket indeed behold my busket uh we uh we're in great shape this is so exciting i'm i'm so happy right now okay so we have uh we have where is our code here's our code so we're able to get our donuts right and so now i guess this is the part where where right now all we're doing is we're returning information we're not doing any kind of interactivity right so if i want to uh so we can get our donuts so we can get a list of the available types which um i could do something like if we do types right that was the was that the yeah i think it was types no it was types that'll give us an array there we go okay so then once we've got our our array of types um we can do like we uh we could let's see text would equal like well these characters from okay what do you think should i do something different that is that is where i was kind of going but the thing is rather than sort of writing out the whole string i was going to suggest um like if we use the the helper library what we can do is we can just iterate over that so we can say please choose from one of the following options and then just iterate over the options and use that to add the next line of what to say let's let's do that because i feel like otherwise i'm going to burn a bunch of time and i want to make sure that we get through this so uh let's let's do what's the helper library uh twilio oh that's easy okay so we're gonna install twilio and then i'll be able to get twilio choir twilio and what am i using out of here if if you go so if you go twilio and then if you come down one more and you create a messaging response so const messaging response i'd like to put in with capital letters yep um and then it's equals twilio dot twiml dot messaging response yeah okay any arguments now what we can do no not yet so what we do now is if you go down to inside your actual um inside your function if we just do const like twiml which is basically what we need to generate right okay um equals a new messaging response cool and then now what we can do is we can go twiml dot say and then that's uh say it takes an argument which is a string and then we just say please choose from one of the following options and then what we can do is because we have an array right types is an array we can just go like type stop for each type swimwear.say oh that yeah donut type two and then we can just in there go twiml.say um the name of the donut but then we want to say press index plus one because you can't go press zero um so that case index plus one four and then didn't donate the type okay all right and now they can say what type they want and then what we want to do is instead of that we just go to a more dot to string beautiful so that just makes it easier when you're generating now i can see we've got um why is trimble got a squiggly line under it unknown word oh this is my that's just my uh i have a spell checker oh okay fair enough no do i make it uh ignore word go away i just told you to stop what's my what's my mistake there we go there we go cool all right okay so then this should work right okay let's get our uh our endpoint updated in the in the panel i'm also just completely blown away by the fact that we're running this live i'm not gonna lie this is actually the first time i've ever used uh netlify dev live uh and like usually i just don't need the local server to be available live so this is uh this feels like a little bit of a game changer here okay so now if i run this i'm gonna call the number again we're sorry an application error went wrong goodbye drumroll okay so can you go to that url in your browser because what should happen is that should generate the same xml that that we're kind of expecting oh okay what have we done wrong error twiml dot say is not a function see how i said messaging response it's a voice response you know it's like crazy hard to remember that order messaging should we replace a voice response yeah that was such a silly mistake it's okay it's okay we all forgive you um let's see is that successfully reloaded but it's not do i need to like stop and restart here i'm gonna stop and restart let's let's stop and restart and then oh i think i know what i was doing wrong i think i'm on an old version um so let's thank you vinnie hey there we go okay so that's doing what we want so let's get this in here oh wait i need this one okay gonna save let's try again please choose from one of the following options press one for filled press two for ice press three port chocolate press four for glazed i love it there was like some feeling press three for chocolate like he's trying to sell that oh so you know you can actually change the voices on on um the gathering when you use the other amazon pody voices the podi is it part of your pody poly voices they actually sound sometimes they sound like ridiculous one thing that i love is you could put accents on them so i love just like going and putting on australian accent it's hilarious all right so now that we've kind of been able to sort of give these people the options the next thing we want to do is we want to actually collect some information and and the way we do that is with a gather so what you do is you just write twin dot gather okay um and that's going to take a couple of options so it actually takes in an object as you could actually just do it like that but it will take and let's put an object um and it's gonna have an action um although you might be able to leave the action it should be an action this action yeah action and that's going to be a url so what's gonna happen is when it gathers the information it's going to make a call to the url of action which asks like here's the information what do i want to do with it and then that url needs to create twiml now what i like to usually do yeah and even if you leave it blank it just goes back to the url sort of the the um the route as the americans let's say or the route that you're already on um so i usually like to just go back to the route but then add parameters into an order like things that you gather will be included in that request okay so then now i can be like has the person already made an option if they have let's not just repeat the whole first step and then does it forever and use that does it post um yes okay and so the body would be like is it gonna send as as json like that like if i do it or how does it come in that's that's that is how it comes in so it should be a json and then you should be able to go so let's console.log that body first and then we should be able to go if certain things are in there if we already know a little bit about them if we want it to loop then we can just leave this empty yes okay so let's do that and we will have it gather and i think it's still running it is so let's just try that again please choose from one of the following options press one or filled press two four things press three for chocolate press four for glazed press five for toppings press six for other varieties press seven for fruit press eight for cake three for chocolate and then it should have logged something it did please choose from one of the following options press one for filled at least i think it that looks like it did what it wanted right that did i just dox myself i did oh wait can you scroll down yep there's no yeah there is the second one right at the bottom gather end um did you press an option i did and the option that i pressed was at least i thought i did it should be on input so if there's an input oops no no no worries no worries uh hmm well didn't mean to do that let's go here one thing that we should do as well is we should kind of move our says so right now we have our save first then our gather so if a person like presses digits before like let's say the first one was what they wanted it's still they've got to wait till the whole thing plays but if you move together like a little bit further up and if you change it so that if you go const and gather const uh gather equals to gather and then change order the second two two more dot says together dot say so now it's saying that these says live inside our gather so if the purpose oh okay like press is a button yeah it should be that's totally fine all right let's see if that process ended when i closed that looks like it did okay so let me uh grab this throw this in here save and then let's try again and let's see if we get please choose from one of the following options press one for filled press two for ice press three for chocolate press four really okay so that time it did gather and we should see an input please choose from one of the following options so it hits three oh if you see digits oh i can see i can see it move up left up up there we go digits three okay so now i should be able to so this isn't uh it's not a string it's uh query parameters so i can um here do qs equals require query string and then i can uh qsparse okay and then what i want is the digit and what else the should i get like the message or anything um or digits digits do we i'm trying to think is there anything else that we're missing i can't think of anything see because we could go on well we'll need um additional like some kind of state to let us know what phase we're in won't we yes we would so i'm trying to remember so this is where we start to get really complex so what a lot of people do is they add extra parameters onto onto the request so that twitio can sort of keep keep track so that you can keep track of how far the person's gone and you get really complex and you end up building a state machine um and so now this is where i go right after now we're going down the bridge of like diminishing returns okay press three and it's it's just gonna lead back okay so it's doing it's doing what we expect um but we don't currently so like here because we only have one step right now we have uh like this is we can manage this um but with two steps we wouldn't know if we were at step one or step two so yeah like you said this is where i would you know left left unattended what did i just open hello uh back here no anyone how did i do this what have i done i don't wanna no help anyone who knows how vs code work want to help me wait have you got like your uncommitted changes that's why you're looking at the tree um i think if you in the get blame what have i done yeah you're right i pushed this button um i'd have never seen that button before that's okay um yeah yep yep so yeah no worries so now this is where to to basically track state the normal way to well the developer way to do if we wanted to only write code is we basically track cookies so we would send um we would create a sort of a session for this and then just keep updating every time they create an option and we'd slowly be able to fill out that piece of information so we can say this is the question we asked and this was their answer and use that information later however that gets really really tedious and also what we've had is we've had like hundreds of customers build state machines and we're just like you know why don't we just do it for people so if you go over to the twilio console uh it's video console we're kind of getting away from a bit of code okay just a little bit and if you go into there should be an option called studio so on the left if you explore products and add studio done oh no beta there we go there we go if you scroll down you should find studio uh solutions cloud security developer tool studio voila so studio basically is a drag and drop solution that basically allows you to create your tree so okay you create so we call them flows um because that's kind of what's going on you're flowing from one to the other okay we can start from scratch or we could use something built in uh let's let's start from scratch that sounds like fun so we're gonna go next perfect and get rid of that incoming call so we're going to use incoming calls so if you go on the right you see you've got this widget library and this is basically all the things that we can do we want to gather input on call just drag that over if you drag it down underneath and then connect that red dot there you go and voila so if we if you go into that gather input on core options so yeah we can then conf add some configuration that's really interesting how your thing is squashed up i think it's i have a smaller screen so i'm like zooming away so if you go to the config first on the left config there we go uh so you can do a couple of things you can either say a message or play a message so for that say is where we'd want to give it all of those different sort of options what i think we should do for now just to save time because we've already done it is if we go um what we want to do is actually fill that out with our questions and the way you can actually do that is we can do it in a couple of ways we can actually write the question out we could record it but what i am thinking is we want to be able to go over to our the code that we're writing and just get it get all of that twiml written out already because we've done it so we're going to add a different um a different widget so if you hit the small arrow the small back arrow that one and this time scroll down you should see one that says twiml right towards the button and make http requests actually here yep oh sorry add twiml redirect is what i meant add to memory direct okay and is it so what we can do like am i connecting this one instead connecting that and then what you're going to do is you're going to configure that so that points to the url that we've done so far got it okay so that's here here and then we're going to go to netlife functions incoming call post timeout all makes sense okay if we so now what that's going to do is if you get rid of that one hit publish right at the top so after saving you have to publish and then we need to just quickly go and change our phone number so maybe you want to open that in another tab if we go back to our phone number and now point our phone number to this url if that makes sense so if you go to phone numbers here yep uh manage and we've got oh manage uh that's numbers okay just click number and i need this number oh you don't no you don't if you go back to it back to here yep and scroll down to where we change the url change that for when a call comes in good studio for though oh slick okay and then now hit save okay so now your phone's going to go through that state machine and what we can do is we can let that state machine handle states and we can just go this is the first question to ask this is the second question to ask okay and this is how we go through it and do i do that in transitions uh so yeah so we can add more things right so right now you're it's already going to work and recreate what we've done before okay let's we can validate drumroll and find out if i'm right if i've made any mistakes please choose from one of the following options press one for filled press two for ice press three for chocolate chocolate okay and so that that did what we expected and it did what we expected okay so that's that's better all right we're we're already like we're here it's working it's doing what we expect so then we're so we're getting that first response where i'm i'm pressing two or whatever number and we're getting the number back so once we have that we now need to respond again and we're going to do that through what so the last thing we need to do is we need to go back to our the code that we have written and the last thing we need to do is we need to hand so basically the tumor redirects the reason why it was created is so that you can sort of do whatever you want in code so we could have written together manually but what i'm thinking would be really smart is if we have the api just go okay here's the options i already know let's go through them so what we want to do is right at the end we want to do a redirect so we want to basically say hand like sort of power back to the um hold on i need to pause and like think in my head are we doing this in the best way because i'm thinking we're about to go into like a loop and about to dox ourselves if we're constantly hitting gather sending gather back to the same spot so i i i i feel like i'm sorry i am apologizing but i feel like we're gonna have to slightly change our approach and the way we're going to do that is we are going to so we've gone through all of the things that we gather there we gather their um sort of answer and then if we do have the answer what we want to do is return that back to twiml studio if we go back to twitter studio and if we change if we hit if we change this netbefore function and add instead if we if we add a new um a new sort of uh widget that's what i mean a new widget let's add um splits based on if we put it underneath when we get the return perfect so now what we can do is maybe we can say we can test the variable digits and we can see what they said and we can do something based on on that okay um if that makes sense type select choice so what we need to do if you just give me one second i'm just trying to remember how to get digits if you want so if you go to network function can you type in 95 function the netlife function um that should have outputs give me one second do i need to like specify those or anything no um because what happens is when it comes back um when you when you come back you should have it just in in there okay just give me one second i'm just gonna quickly look in the docks because i don't remember everything but what we want to do is basically we're going to go through the state machine and slowly add things on and on but you know what let's actually just do this a different way let's go back and create a new widget and the widget we're going to use as a gather i'm going to stop over complicating it in my head and then what we're going to do is we're going to say in the same message on the right and then we're going to basically write out those um options so we're gonna say press please press one for iced and we need to go through the donut api to just make sure we have all the options okay so we we uh we won't be able to use the donut api dead to do it or to we i can't think in my head right now of an efficient way to do it would it quickly would it work to so one of the things that we could do is we could also just create multiple functions so yeah we could create multiple functions and just return those because if we can drop those into the gather as like the action um because then we'd be able we wouldn't have to keep state we would just kind of yeah that's actually a really good way to do it okay let's let's do that so we can do um like step one or i guess we'll call this one step two dot js and then that would be uh we can get all of this and we'll get the digits and so we'd be able to drop the digits out of here uh but what we'll be able to do on this one is um we'll have a digits and then we'll have our types and so we can do a selected type equals um i would index digits minus one okay and then uh if we'll like console.error so that we can figure out what we did wrong and then uh if we'll just assume that's going to work because it should uh so then we've got our our types and once we know what our selected type is then we can make a donuts would be a weight fetch and that'll be uh http localhost 3000 donuts type equals selected type cool and then we will get the response do rest.json on that and then down here we can get the um remaining types which this honestly this might end up backfiring on us because what what might end up happening is we can do like a donuts dot what am i looking for if i want to get a unique oh god i'm gonna have to like reduce this aren't i if you want to get a if i want to get a unique set of remaining types i'm probably gonna need to [Music] uh filter so let's do let's do it like this we're going to do a new set i think and then we can do like donuts dot for each donut and then here we can do uh donut dot for each or no donut dot type other than type do we have any other what other information did we have we don't get a lot let me let me use the network here because this will give us an easier so for each of these we get a banner url description id image nutritional facts reese's and types so i think types are the only thing that we're really getting that are going to help us but what we should be able to do is donut types for each and then what we can do is uh call it d type and then we can say remaining types are actually it'll be if d type does not equal selected type because we want to drop that from the options yeah then we can do remaining types dot set d type and this should that make sense theoretically speaking give us a list down here of uh let's i guess just what happens if like somebody wants like a doughnut that's earned only one type well so this is the part that we'd have to figure out right is if uh if if we only get one type i don't know i i don't think this is going to be the best like we're probably not going to get your idea we could always do zero it's like if you're fine with all these options press zero oh yeah we could do that actually so if we if we get to remaining types um what this should do is it should give us a list of what our remaining donut types are and then maybe what we can do down here is um that sounds delicious do you want to further refine your donut match uh and then we can say if yes press like the number for the type you want if no press zero yeah so the last one would be gather dot say if you're happy with your donut type press zero cool okay so theoretically speaking this will work maybe yeah let's go update our phone number and find out okay so well we need to we need to update this one to send to our second action type yeah uh to do that i need to you can just give it a um what's the word a relative slash a relative that's the word i was looking for a relative url uh step two okay so theoretically speaking then uh did i stop and restart this i did not but oh but we have a new function so i'm gonna do it again okay so we've got this one we're in our console i'm gonna set up our phone is going to go to a web hook again nutlify functions incoming call let's see save that and let's try this again this is very exciting please choose from one of the following options press one for filled press two for iced press three for chocolate press four for glaze okay do we have any dogs in your let's find out and remaining types dot set oh wait i just screwed up my i screwed up my my code i bet somebody told me that in the chat and i didn't read it so what i wanted for a set is i wanted to add not set what did you oh okay okay so in here i want to add okay i think that will do that should do the business it says it reloaded let's try again drumroll come on phone it's just calling okay let's try that again please choose from one of the following options tell me it sounds delicious come on that sounds want to further delicious your donut match press sized one priced press filled one for filled press glazed one for glazed toppings cake one for cake that's always one for all of them i did something wrong press cake one for cake that's i mean yeah cake one for cake is really what i'm after uh what have i done wrong here remaining types for each okay do we have an index i think i need to just turn it back into an array is all oh okay um so this should that should work so let's uh so let's see if we can get the next step going here so we're gathering um and then our our next next step would be to take this to like uh uh step three step three okay so let's take our step three and with this one maybe what we can do is we can we can do a query for the the two types and then um just return our top donut and then because we're at about 10 minutes here so that'll give us uh that'll give us enough i think so let's duplicate this one is there just a duplicate button i thought there was there's not okay fine wait but you did do a duplicate oh it just renamed it yeah okay so i have my step two in here and then in my step two needs to point to step three the there we go okay so that's pointing to step three and now in here we're gonna get digits again we'll have what our digit was uh and this time we are going to we're going to get our types ooh but we lost our original selected crap is there a way to just like pass that through with here like can we oh i go on i'm wondering if i can like include it in the query string yes you could ah that's what that's what we should have just done from the beginning we yeah because we can basically have a query string with like all of the like inputs that we've ever collected and kind of we used that we definitely could have oh wow what have we what have we learned today um it was selected type yeah okay so let's do that and then we'll also get a query string param um so it'll be a selected type for now what was it type equals event dot query string parameters i think it is yeah okay um and then here we're not going to do a query for types anymore instead we're going to do a query for donuts that have a type of type yeah type of uh type and uh then the other oh crap we do need the the types again because i gotta well what we could do if you go back to step two right in that url we we put the selected type right what we could do is over in step three okay so in step three um we hold on because i need to pull the type out that we need here okay so let me let me just undo all of what i just did because we're going to have to look this up again so we've got our types but i do have my parameters and so then my selected type is going to be digits so we'll do like first type equals types type minus one hold on no we're just passing in the actual actual value there so that one can stay and then so let's rename this one to first type rename this one to second type and then we're going to do first type second type and we are we're introducing a problem which is that if you were to press zero this wouldn't work um but we are out of time so we're gonna try to get we're gonna try to get a donut back is really what i'm after here so then once we look up donuts i want to get let's just get the first donut and we can text that back to the number seems like the right thing to do so this way we can get the donuts.0 um and then with my donut i want to like my text message should be something like uh be like your dream donut is a donut.title and then we would like donut.url i think let's look at the console log here and make sure that that's the correct thing url so this will take us to the donut okay so theoretically speaking this would be our message so instead of sending back more twiml here we would actually want to um do you want to say the message as well should we just oh yeah let's text it yes uh so let's do twiml is a voice response and so we are going to say all of this out of here and we'll say twiml.say and then we also want to add we will text you this information for austerity mostly because i want to hear what the robovoice does with the word prosperity um okay and so then in here we want to send a text message so to send a text message we're gonna need to authenticate our twitter client okay so you're gonna need your account student off token in um environment variables so i guess you're going to go to a secret page soon yes if you go back so here's to so here's here's what i'll do on this side i can use a a dot n and so we'll do twilio sid underscore account sid if you do twilio underscore account underscore sid and then you do to the unscore off underscore token um the node helper library will like detect them automatically oh sick okay so then my my account sid is gonna be up here uh yes okay and your auth token is also there it's down there so i'm gonna take this one and then this one i can copy i'm gonna pull this off screen before i click any buttons and i'm also gonna pull this off screen so let me click my auth token that is copied i love that by jacob boulder your choice was super all right super caddy fragilistic i can't even get through it it's validatious is where is that from i feel like i've heard that so what is that from um it's from uh the sound of music mary poppins one of those two yes okay so we've got our um our end is set up with the the auth token uh so then it it should pick those up automatically you said yep okay so now what you gotta do is const client equals twilio because we've already twitter and then just put brackets next to it there you go and now oh and it'll pick those up okay um and then if you go client.messages.create okay and it takes an object it takes in a two a from and a body okay so two is going to be we need to pull out the number from if you've like this right yeah okay and then the cell oh wait the i promise is what i sent right yeah so if you you're from well you don't even need to no no you don't even need to do that you can just do from and to um but we're we're inverting them right yes yeah that makes sense here so this way when we get when we invert it it'll actually be it'll make sense down here so we're going to go to number from will be from number uh and then message what is it body body i think i think and body will just be message do i need anything else nope okay let's try this moment of truth here um we i have to stop and restart to get those uh those tokens to show up so because i added a dot env um netlife smart enough to pick those up for us so i can grab this and then i can go into my twilio account phone numbers manage active numbers and i'm going to grab my ivr i can't wait for you to like do this with the cli you're gonna find updated numbers so awesome with the cli okay so here we're gonna save it all right now moment of truth what should happen assuming that we didn't typo anything which is a ten thousand foot if uh i should be able to choose two types please choose from one of the following options press one for filled press two for ice press three port chocolate that sounds delicious do you want to further refine your donut match press one pressed press two for filled present oh yeah we put the url in that message oh but look at the chat i got my text message got your text oh it's beautiful okay so this is wonderful so we screwed up a couple things one one is that we uh ah behold my bucket so what we need to do with this one is take off the url and we'll instead put that down here so now we're now we're including the message in the donut url but we won't say that in the um out loud because that doesn't make any sense but so this i mean this is sick like i i'm not gonna lie we got further than i thought we would uh given given how um just this is pretty like aggressive stuff right so i'm going to make sure that i remember to ignore this.n file um i'm gonna have to do a lot in here to make sure that we we're all set up to not like commit anything that we shouldn't be but uh we're out of time so let's do a quick round of shout outs first of all we've had jordan with us all day from white coat captioning doing live captioning thank you so much jordan for hanging out with us that is made possible by our sponsors netlify fauna zero and hasura all of whom have been here uh making the show more accessible for more people it helps me out a lot it makes makes this possible and you know there's no way i'd be able to afford it on my own so that is uh that is very very much appreciated uh we've also got some really good stuff coming up we've got shandai coming up later this week to teach us functional react with styled components uh next week we've got ben hong doing a takeover ben hong is going to be the host of learn with jason for all of next week while i go on vacation uh which i'm really excited about so make sure you come back we've got matt hojo coming and uh hung soon are both going to be here doing uh some really interesting stuff we're gonna learn kotlin we've got uh more things that i haven't had time to put on the schedule yet but i'm really excited about it lots and lots and lots of good stuff coming up so make sure you uh you do that nathaniel where should somebody go if they want to learn more about you and if they want to learn more about twilio want to learn more about me find me on online on twitter chatterbot's coder also on twitch at chatterbotscode.com follow me and watch me stream if you want to find out more about twitter head over to twitch at twitter we also put on videos on youtube but also you can just go to twilio.com and check out awesome stuff we have there all right y'all uh on that note and with the stampede to send us off we're gonna call this episode a success nathaniel thank you so so much for hanging out chad stay tuned we're gonna go find somebody to raid we will see you next time you

Channel: Jason Lengstorf

Views: 683

Rating: 5 out of 5

Keywords: IVR, Learn With Jason, Nathaniel Okenwa, Twilio

Id: RLx88bCHYpE

Length: 89min 39sec (5379 seconds)

Published: Wed Apr 21 2021