Build A Voice Recognition Ecommerce App With Alan AI

voice communication is the future of the web and in this video i'm going to show you how you can easily integrate voice communication into your own application using allen ai let's get started now [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now in this video we're going to be building out this application you can see over here which is a simple e-commerce app but the important feature is that we actually have voice enabled activation where you can click on this button and tell it to do things and it'll do it so for example if i click this button and i just say here whoops and i say add red item to cart how many would you like to add then i say three added three of the red item to your cart and if we look over here you can see that it's added three to the card and right now it's picking up everything i say i just click this to turn that off and you can see we have three items in our cart and i could also come in here and say closed card closing card and there you go you saw that i closed the card and there's a few additional things that it's able to do and we're going to program that all inside of this application and to do this we're using something called allen ai and alan ai is a great tool it just makes doing this incredibly easy and they're actually sponsoring this video which is amazing of them so you can actually use a special discount code which is going to be linked down in the description below which gives you a ton of additional free tier benefits that you can use in order to get more interactions in your website and start integrating voice into your own website and i want to show you what we're going to start with because instead of coding all of this and all the styles from scratch that would take well over an hour to build i'm actually starting with a shell of this application which you can see over here and it has all of the normal functionality we could click details could bump this up so that we want to get four of these click add to cart now we have four of them we can come over here to the yellow we could say we want to add two of those you can see we have two we can remove one we can check out and it's going to allow us to check out so all of the base functionality of our application is here all we're going to be doing in this video is i'm going to show you how you can take lnai integrate it into your app so you can have voice commands inside your app so you can easily start recording voice and doing voice commands which allow you to take your app to the next level especially for people that are visually impaired accessibility or just for making your website easier to use for day-to-day people so to get started we have this code on the left and this is the basic code that you see over here that does all of the basic interaction for our shopping cart application it has our shopping cart the details all that fun stuff and it's not super important to understand how this code works i'm just going to go through the main important aspects and as you can see we have this items.json file here this just is the details for each one of our items we have our description we have the color the price the category the name and id for each one of our items as we can see here then we have our cart this contains just styles for our cart each one of our cart items store store items pretty self-explanatory and then the modal that pops up when we click details that's really not super important the components are pretty much already built out the main thing to worry about is this context this cart context contains all the information for where we store our cart related information and the important values from this is our cart which is just the information for the details of our cart we have some booleans here for showing things we have some for setting whether or not we want to show our cart as well as if our card is empty if we want to add something to the cart remove something from the cart and check out so all the functionality we need is essentially inside of this context which is going to be really nice because it'll make it easy to integrate with allen so before we start writing some code what we need to do is first create an alan account and get started on allen so let me just come over here expand this and go over just allen.app just type in allen.app or allen ai or just use the link in the description that'll bring you right to here then what you want to do is you want to click on sign in or get started either one will bring you to the same place and you can see here that we can either sign up or we can sign in so what you're going to want to do is sign up with an account here i'm going to be signing in because i already have an account so i'll just do the sign in real quick and i just finished signing in as you can see i already have the code for this e-commerce app done but of course we're going to be writing this out from scratch and like i said i have a discount code that you can use so if you come over to here and you just click on this subscription or billing section right up here it's going to see you can have your pay as you go you can have your balance and if you click add funds right here you should be able to come down here and apply a promo code type in the promo code in the description below that's going to give you additional balance to your free tier so you can really play around with allen so click that click apply and then you'll have a bunch of additional credits that you can use so now if we go back here we're going to click this plus button to create a brand new project we're just going to create an empty project we don't need all the extra examples here but if you want to really dive into how alan works they have a lot of great examples in our case we're just going to start with an empty project we're going to call it shopping book shopping cart there we go and we'll click on create here so now we're going to be brought up with this project and as you can see we have a text editor area we can write code we have a section on the left for our scripts we're just going to minimize this and then we have this section on the bottom here which contains information for if you have syntax errors i'm just going to expand this out minimize this and on the right we can actually test things if we want to and what we can do inside of here is write out all of the different code for how we interact with our application so in this example it says we can say hello world and then they're going to respond by saying hello or hi there and like i said we can actually test this on the right over here so i just expand this a little more and we click on this button and i say hello world hello world hi there you can see that it responded with the text of hi there or it can respond with the text of hello that's what this kind of interesting syntax means it'll respond with either one and it'll switch between the two so that's really useful that we can actually create essentially an intent something that we say and then we can play back text based on saying that and the great thing about this is it kind of uses ai to determine exactly how to get the text that we want so even if we don't say hello world exactly it'll infer which one it's closest to also we can send commands down to our actual code application telling our code to do something which is what we're going to do for the bulk of this application which is great so the very first command that i want to create which is probably the easiest one is a command that lets us open and close our cart so if we have items for example three blue we can come over here click this to open our cart and we can click to close it so i want to first create an intent which allows us to open the cart so if we come over here let's just get rid of this sample intent and what we want to do when we want to create a command that someone can say is we'll just say intent and then we want to actually put the text for this intent which in our case we want to open cart so we can say here open the cart but we also want to be able to say something like view the cart instead so if you want to have multiple words that you can say if you wrap them inside of parentheses and use the pipe symbol to separate them this means either open or view followed by a cart and also you may say just open cart or view cart instead of openvel cart so to make a word optional just wrap it in parentheses again and add a pipe symbol here with nothing afterwards this just means either the word the or nothing so you could have an optional duh so i could say open cart open the cart view cart or view the cart and this will work and also even if i get rid of this section and i say open the cart it'll probably still work because it uses that ai behind the scenes in order to actually figure out what i'm trying to say so now that we have the intent essentially the command we're going to tell alan to do now we need to write the code that we want to execute and here we just have this p object this allows us to send commands as well as play text so to start let's just play some text we say p dot play that'll allow us to play some text and let's just say opening the cart okay and if we just save this control s come down here and i say open cart open card opening the cart as you can see it spoke back to us and said opening the cart so we know that this is working now the next step is going to be actually implementing this into our application because it's really not that useful if it's just on its own like this so let's bring this into our application to see how that's going to work and to do that we need to hook up the api and luckily they give us api keys so if we want to integrate this just click integrations as you can see we have web here and we also have a dev key a testing key and a production key which is really useful so that we can do all that and we can come down here and you know customize our button if we want to change the default styles microphone timeouts different things like the text-to-speech panel the show allen button we can really customize this however we want which is really useful and then if we just come down here click on react since we're building a react application it tells us exactly how to install allen so i'm just going to make this about 50 50 screen size what we want to do is run this command to install the allen sdk so we can just create a new terminal window paste in that command and that's going to install allen in the background then we want to import the button and essentially this is going to be based on class components but they have function component versions where we're just going to do this instead of a use effect to create our allen button so to do that i'm going to actually create a custom hook because i think it'll be really useful to have all the allen codes separated in its own hook that way we don't have to mess with it other places in our application such as the app component so i'm just going to create a new file called use allen.js this is going to be our new hook and i'm just going to type rfc this stands for react functional component and i'll create a boilerplate functional component for us if you want to figure out how i do that i have an extension called here es7 react redux graphql rack native snippets super useful i highly recommend you download it so let's just get rid of this div because we're not going to be having a div that we're going to return for now we'll just return null and inside of this allen what we want to do is to create this allen button so first let's import our button just like this and what we need to do is to set up a use effect so i'm just going to minimize this a little bit and we want to import use effect then what we can do just come inside of here we can say use effect and inside of this use effect we only want it to run on mount because this is a component did mount so we're just going to put an empty bracket in here so it only runs once and then we can just say allen button run this as a function and in here we want to pass our key and we want to pass on command which essentially is what happens when we run a command so in here we're going to get our command data and we're going to run some code let's just console.log our command data for now and then our key we can just copy this from over here so let me expand my screen and we'll copy this key this is just temporary we're going to put this in an environment variable in a little bit but just to see if we can get this working let's paste this in save this and then what we want to do is we can just come into our app and we can import that use allen hook so let's just import use allen from dot slash hooks slash use allen then we can come in here and just say use alan and this should hook alan up into our application if we come over here and just refresh our page you won't be able to see this but there's a microphone button in the bottom right of the screen that's the default placement since my camera is down there though i want to move that to the top left so we can just say top 15 pixels and left 15 pixels and now if i save this you can see that the button has now popped up to the top left corner of the screen which is great but something that you can't see if i move my camera is you'll see there's still a bottom a button in the bottom right hand side of the screen the reason for that is the way that the hot module reloading works inside of react what happens when i save my file is it's refreshing the entire page and it's running this use effect again this is not an issue you would run into in production but it is something you will run into in development so a great way to get around this is to just store the return of this allen button inside of state because as you can see if we come over here it does return an instance of allen so what we can do is just say use state come down here we're going to have our allen whoops allen instance and our set now an instance just like this set it to use state and then all we want to do is just set our allen instance equal to the return of this allen button so now essentially what's happening is we're taking this allen button whatever it's returning and setting it to state and then we just need to come in here and check that if we already have an allen instance so if it's not equal to null then we just want to return essentially we don't want to create a new button if we already have one so now if i save and i just refresh my page it'll get rid of the bottom right button as you can see if i move my camera and it's going to keep the one in the top left up here and no matter what i do with my hot module reloading if i make some changes and save it's only ever going to have that one button which is really useful so it's an issue you may run into with hot modular reloading but other than that you shouldn't have to worry about this too much so like i said the first thing that we want to do with this is this open cart functionality if we just come over here and we go back to our code you can see we have this open slash view the cart and it'll say opening the cart something really cool is if we come into our app and just say that it'll talk back to us so first i need to allow the microphone and i say open cart opening the cart and you can see it spoke back to us so what we wrote here inside of allen and setup it actually knows what that is based on because of this key that we put inside of our react code here but i don't really like storing the key directly inside of my react files i prefer to keep this inside of an environment variable because we have development testing and a production version so i would like to have the testing key used for testing dev for dev and production for production so a really easy way to do that in react is with environment variables we can create a dot env and a dot env dot development and the env dot development will be used in development the normal.env will be used in production and so on so what we can do is just come down to our use allen hook let me just make this wider so it's easier to work with we can copy this entire key there we go and now what i want to do in my env for the development is just say react app because inside of react you must start all of your keys with react app and we'll just say allen key and we'll paste it in there and i'm going to copy this into the dot env and you'll notice the only thing different between the keys if i come over here and i look at integrations when i swap keys the only difference is at the end it says slash prod instead of slash stage so i'll change that to slash prod for production so that way we have our production key working for our application and the dev key will be used inside of development so now what i can do i just save both these files inside of here instead of hard coding it we can just say process dot env dot react app allen key now if i save that we should have this working over here if i just refresh you'll notice the button doesn't appear and the reason for that is you need to restart your application when you mess with environment variables so just cancel and restart your application give it a second to run real quick it's going to say i already have something running on port 3000 which is fine it'll set us up on port 3001 and now if i refresh over here we should have the button appear inside of the top left let me just give that another refresh and you'll notice it's not working if i come over here looks like i just didn't capitalize my final y so now if i save we should see if we refresh we now have the button in the top left corner and if i talk to it open cart opening the cart it speaks back to me it says opening the cart but obviously we don't want it to you know talk back to us we want it to actually send a command which will actually open the card for us so if you want to send a command instead of speaking text you still call p.play but instead now here you can just pass a javascript object and you can put whatever you want inside of this object and this object is going to be sent back inside of this on command section so i could for example put in here a command called open cart just like that you can put anything you want in here name anything you want doesn't matter completely custom i'm just going to call this command and open cart just like this now if i just save this file come over here we see we're logging out our command data so if i come over here and say open cart open cart you'll notice it doesn't actually speak back to me but if we come and inspect our page go to the console you can see we have this object that got printed and it has that command of open cart so we're able to communicate from this you know back end here where we're setting up our intents to our front end in order to do different things inside of our code so what i want to do is i want to take this command of opencart and actually open the cart so since we're going to have a lot of commands i want to store these inside of a constant variable to make sure we don't misspell anything so we're going to say commands it's going to be equal to an object and the first command is for opening our cart and it's equal to the text open cart that's this text right here then that's the only command we're going to set up for now then i'm going to create a function for this so we're going to say function open cart and all we want to do inside of this open cart is use the allen instance to speak to us so we can just say play text and we can type in some text for example opening cart now if i come down here and i just say if command data dot command is equal to commands dot open cart then i want to run the code inside of here which is just open cart let's see if this works if i come over to my app we should hear it say opening cart back to us open cart and of course it didn't actually say anything so let's see what the error is if there is one if we inspect our page go to the console you'll notice it's still trying to print out our object now the reason for this may seem a bit confusing at first but it's because of the way the hot module reloading is working what's happening is that since we already have an allen instance it's not re-running our set allen instance here which means that we're never re-running this on command section so if we just do a hard refresh of our page we now should have this new code being run so now if i click this open cart of course i get another error so let's see what this error is it says cannot read property play text of undefined now this again may be another really confusing type of error but the reasoning for this is that we are not setting our allen instance while we're setting our own instance but we're creating our button before we're actually setting our instance so instead of on command when we call this opencart function it doesn't know what alan instance is so this may be tricky to try to get around but a really easy way to get around this is by using custom events inside of just react so we can do inside of here is instead of doing our command and checking all of our command stuff in here if we just create a custom event so we can say window.dispatch event we're going to dispatch a new custom event and this event is going to take our command and our command data we know if we just destructure this we have our command inside of here let me just expand this to make it easier to see we can just send a custom event with that command and now we just get rid of all of this code we're now sending a command essentially a new custom event every time we get a command in and then we can create another use effect and this use effect will actually refresh itself every time that we change alan so we'll put allen instance inside of our dependencies and we can just say window.addeventlistener for that opencart so we can say what is it commands dot open cart we just want to run the function open cart and then we want to just make sure that we get rid of that open cart function essentially whenever our allen changes we want to remove our event listeners that are old so we can say window dot remove event listener commands dot open cart and we want to remove that open cart function and also our use effect is depending on open cart so we need to put that in our dependencies so we need to make sure that we wrap this inside of a callback a use callback and if you're interested in why we need to wrap this in a used callback make sure to check out my used callback video i'll link in the description and cards but we can just create a variable called opencart and open cart here just going to be equal to use callback and here we go this used callback is depending on just the allen instance just like that and we actually don't need to depend on the iowan instance down here since we're depending on it up here and if we just import use callback and save this everything now should be working so if i just click over here actually we'll just make sure we do a hard refresh open cart opening cart there you go you heard it speak back to me saying that it was opening the cart so now we know that this is all working which is great and i want to reiterate a bit how this code is working because we're going to be using this pattern throughout the rest of this application so the very first thing that happens is we create an intent which is sending down a command with this pe.play and it has a command argument which is just the text of the command we're sending back that gets read in here where we have our island button and as you can see we're just dispatching a new event with the name of our command then we're listening for an event that has that command name of opencart and running this opencart function which is just plain that text for us and the reason for all these extra use effects is that we only ever want to instantiate one allen button if we instantiate multiple allen buttons we're going to have tons of buttons all over our page which are going to be all talking with each other it's terrible we definitely don't want that so we have this if check here to make sure we only ever instantiate one allen button but that means that we need to make sure we separate out our events because this code inside of here is only ever going to be ran once and we want to make sure we have an instance of our allen button after we run this code so that's why up here we're setting these event listeners which are kind of separate from this alan instance down here so this code doesn't need to change but we're able to send out these different events and listen to these events and these events are going to have access to this allen instance and then time that iowan instance changes we're making sure we reset all of our different functions and reset this use effect down here to make sure to take advantage of those changes so now let's actually make it so that we open up our cart so right now all we're doing is plain text but i want to actually open up the cart so if we go over to our cart which is inside of context our cart context you can see inside of here that we have a bunch of different you know methods that we work on but the main one that we can pull up is this show cart items and set show card items this will allow us to show the items in our cart just like when we click here so if we just set show cart items to true it'll open up our cart so what we want to do in allen is we want to use that cart context and i have a really nice handy function called use cart which will allow us to pull in all the information that's being returned down here so instead of use allen let's import use cart we want to import that from dot dot slash context slash cart context and then i can just say cars const we want to set what is it called here oops set show cart items so we want to pull that out from our context which is use cart just like this so now we come in here and just say set show cart items to true and that should show the items for us so let's test that out open cart opening cart and as you can see it opened up the card for us which is great but what happens if we have no items in our cart obviously we don't want to show our cart because there is no cart to show with no items inside of it so we need to check for that instance so inside of our cart contacts we have the is cart empty this will be true if there's no items in our cart which is our current case so if is cart empty and we want to make sure we get that here from our cart context then we just want to say allen instance dot play text and we can say something like you have no items in your cart otherwise if we do have items in our cart we want to actually show them to us and now since we depend on is card empty instead of our callback let's add that to our dependencies same thing with shed set show card items we depend on all of those so now let's save this and if i try to say open cart open cart you have no items in your cart you can see it's telling me that we have no items inside of our cart and if we click on details add in this to our cart open cart opening cart you can see that it's opening the cart for us just like this and we can close out of this and everything is going to be working just fine so now that we have opening the cart done the next thing i want to work on is closing the cart which is very similar to opening the cart let's just expand this copy this over paste it down and instead of open i want this to say close we don't even need to worry about view because there's we're never going to save you just close the cart and this will say close cart and we can even test this inside of here if we want we can just say close the cart and as you can see it's telling us that we're sending this data down to our app that has the variable command and it has the value of open cart but this should say closed card so let's just make sure that we save this so that it'll have open cart and let's test it again close the cart and now you can see it's properly doing closed cart so i just had to make sure i saved our file so now we should be able to run that and get that command sent down to us and it'll dispatch an event so now we just need to add close cart which has the text of close cart and then we need to set up an event listener for close cart which we'll call a function called a closed cart which we're going to create and then we need to make sure we remove an event listener which is for closed cart which calls the function closed cart and we depend on this close cart function so we have our entire use effect set up now let's create that closed cart function which is honestly going to be very similar to opencart so we have closed cart here if our cart's empty again we can't do anything so we're just going to tell them they have no items otherwise we're going to say closing cart and we want to set show cart items to false so almost exactly the same code let's go back into our application here just make sure we refresh everything is working we'll say we add an item to our cart so now here we're just going to tell it open cart opening cart close cart closing cart and as you can see it did exactly what we told it to it opened the cart and then it closed the cart and if we have no items in our cart close cart you have no items in your cart you can see that it properly tells us we have no items in our cart so we're able to open our cart we're able to close our cart now we want to be able to add items to our cart that's going to be really important and it's going to be where this gets a bit more confusing because there's actually quite a bit that goes into adding an item to your cart we first need to tell it what items we want to add and we also need to tell it how many items we want to add so we kind of have a two-part command and this is where allen gets really powerful in my opinion so back inside of our studio we're going to create an intent for adding an item to our cart we want to know what item we're adding for example we want to say add the red item add the yellow item orange blue and so on we need to be able to pick that information out from our command which alan has a really easy way to do so let's just create our intent and inside of our tent we want to say something like add the item name to the cart something like that and we could even say like item here this item name is essentially a variable we're going to wrap this in parentheses so it's kind of easy to see so we want to say like add the red item to the cart we could also say like add red to the cart so this is the we probably want to make optional we also want to make the item optional so let's throw in an optional item and we're also probably going to make this the optional as well so if we do all of that i make sure that this is a pipe here you can see that now this is all optional we need to figure out how we actually make this a variable so an allen in order to create a variable inside of your intent all you need to do is put a dollar sign and then inside of parentheses we need to put the name of our variable common case to put this in all caps we'll say item name and then we need to pass it the options that we can use for this so for example let's just do red and yellow as good places to start our testing let's just expand this out we're going to get our p variable and what we can do is actually get the information from item name by just saying play i'm sorry p dot play and we're going to play p dot item name dot value this is going to give us whatever item name is set to so if we say red this will be red if we say yellow this will be yellow let's just save this real quick expand it a little further so we can test and if i say add the red item to the cart red you can see that it's picked up red as the item name and it spoke back to us red and i could do the same thing for yellow and it'll work just fine we need to make sure we have all of our colors inside of here so instead of just writing out all of our colors in line like this that would take a while i'm going to create a separate variable for that so we're going to just say item name slot and this item name slot is just going to be here a string which looks just like what we have here so we have item name and then we're going to type in all the colors so we have red we have yellow we have blue we have orange green purple light gray and dark gray so these are all the different items we have and now we just do a little string interpolation i can insert that right here and make sure we end off our string properly so now we have add the and then whatever our item name is item to the cart and it'll play back to us the name of this item that we are getting but we want to be able to add more than one item so once we add an item we want to ask them how many they want to add so we can just say here p dot play we can say how many items would you like to add instead of saying items here let's just say how many would you like to add this is going to ask them this question and then what we want to do is essentially enter a new section where we only listen to certain responses because right now they could just say close the cart and we don't want them to close the cart while we're asking them how many they'd like to add so we want to enter what's called a context so we can say p dot then this will allow us to go to a context we need to pass it a context here we don't know what that is yet then we need to pass our state we need to pass in what our item name is so we can pass a state that has a name and this name is just p dot item name dot value just like this so we're just being able to pass this information over to our new context so let's create that context we're just going to call it quantity context and this is just going to be equal to a context and a context is essentially just a function that wraps in a bunch of different commands and the commands that we want are called follow commands because they're following up on this original intent and this question that we asked so we can just say follow and this is going to be taking in another variable and this variable is a number so we can just say we want a variable called quantity quantity and the nice thing about allen is they have built-in formats for things such as numbers so we could just say number here this is going to return any number so if we said something like the it's not going to work but if we said 3 this will pick up that the number 3 is being added then we have that p variable again and now what we could do down here is just say something like p dot play and we could play our quantity so we could say p dot quantity dot number and number is going to return us the actual integer value number that we want to use so let's just see how this works if we save this and we come over here we say add the red item to the cart how many would you like to add there are some errors in the script technical support is working on it okay and of course we got an error just because i forgot to replace this with our context so let's say quantity context here and now if i say that we should hopefully have no errors and of course we do still have some errors and that's just because these should be parentheses not brackets once i fix that we should hopefully have no errors as you can see it says syntax okay so let's try that again add the red item to the cart how many would you like to add three there are some errors in the script technical support folks are already working on it okay and as you can see i picked up three as the quantity but we still have some errors so let's take a look at what those could be my guess is that this wants a string instead of an actual value but it really doesn't matter because instead of playing some kind of thing here we're just going to be running a command so i just want to test that command so our command here is add item because we want to add an item and for our command we actually need to pass data down and to do this i just like to use a generic object like payload which is going to contain all of our information like for example our quantity we're going to pass down and we're going to also pass down our name which if you remember comes from our state so we can say p dot state dot name that's this state that we passed in here so now we have that information being passed in and if we save this of course we're getting errors the reason we're getting this error if i just bring this down here is because we're missing a bracket at the end here and now if i save we should hopefully get rid of all those errors just like that and we can test this out again add the yellow item to the cart how many would you like to add four as you can see here we have our command of add item with payload which has a name of yellow and a quantity of four so that's exactly what we want now the only other thing i want to do is make sure i force people inside of this context because you can actually break out of this context by default but if we supply a fallback here something like please state how many items you want to add now if i don't specify a number and i say something else like open the cart it'll play out this fallback saying please specify how many items you want to add and if we want to leave our context we can just say p.resolve and that's going to exit us out of this context so once we properly specify the number we're going to send our command to add those number and we're going to resolve out of this context that way it'll actually make sure we break out of here and don't get stuck in this fallback forever so to make sure that this works let's just test this real quick add the red item to the cart how many would you like to add the please state how many items you want to add three and there we go as you can see since i didn't actually say a number it didn't know what to do so just said please state how many items you want to add once i set a number then it allowed us to continue on and broke out of that loop and it sent out our command so next up let's come back into the code for our application and start programming this in very first thing we need to do is to create a command this is just going to be called add item and add item then we want to make sure here we set up our event listeners or add item just copy this down here and we're going to have a function called add item again copy this down here and add it to our dependencies so now let's create a function called add item and before we even do that we already know this is going to need to be with a callback so we'll just say use callback just like this now if you remember we have that payload that we're passing down and our payload is coming in here with our command so we can say payload and we want to send that payload with our event so we can just say that we need to send detail when you send something inside of the detail object inside of an event that allows you to pass custom data so we could say our detail is going to just be our payload just like this we're sending down our payload inside of the detail then inside of add item we can destructure that up here so we have detail we want to destructure out the payload which consists of a name and a quantity so now we have that name and quantity information available inside this add item function now in order to get the item that we actually want to add we first need to access it from this json file by the name so to do that really easily we can import our json file up here so we can import store items from dot dot slash items dot json this is going to be a list of all of our items and then we can use this name here to get the actual item that we want from that name so we can say store items dot find and we want to find the item which we'll just call i that has the same name we want to make sure we convert this to lowercase just so that we don't have to worry about any case differences between our names so if that equals our lowercase version of our name then we know that we have a match for our item so we found an actual item so we can say if item equals null then we want to have a fallback case otherwise we want to add the item so if we can't find the item for some reason this shouldn't happen but if it does happen we'll just play the text out here that says i cannot find the actually i want to put the name here so we'll do string interpolation the name item so this would say like i cannot find the red item or i cannot find the blurple item which is one that doesn't exist otherwise we want to add this item to our cart and in our cart context oops our cart context we already have an add to cart function and all this add to cart function does is take an id and a quantity so inside of here we can just pull in that add to cart to function add to cart and we just want to call add to cart with our item.id and our quantity so we can add that item to our cart and we can just place some text from alan so we could say play text we'll do some string interpolation again we can say added quantity of the again we can here have the name of our item item to we'll say your cart so let's just say like add three of the yellow item to your cart there we go let's save that and see if all of this works let's expand this over come over to our app just refresh again to make sure everything's cleared out add the yellow item to the cart how many would you like to add five add five of the yellow item to your cart there we go and this should probably say added instead of add but as you can see we have five of the yellow adam that were added to our cart so this is working as we would expect now the next thing that we want to be able to do is remove items from our cart seems pretty self-explanatory and it's going to actually be very similar to this intent here so i'm just going to copy this entire intent and i'm going to paste it down here and you can see instead of add we want to whoops remove the and we want to use the same filter for our item name item from the cart so remove the item from the cart and we just want to say we don't even care about how many so we don't want to play anything here we don't have to worry about this then at all we just want to immediately send out a command to remove that item and our command is remove item and we're going to again have that payload and the payload is going to have our name which is p dot item name dot value oops value there we go if i just put a few enters down here so we can see that you can see they were sending the payload with that correct name now if i save this and i make sure we test that just to make sure it works the yellow item from the cart and you can see it's picking up that command of remove item and the payload has the name of yellow so that is working as we would expect now the next thing that we need to do is of course implement it so just like before we'll add a new command we'll call this one remove item remove item and we'll come down here set up our event listeners or remove item and we'll just copy that down here same exact thing same exact thing just like that and the thing that we need to do is add remove item as part of our use effect to make sure it refreshes itself and then i'm actually going to copy this entire ad item because remove item is actually going to be very similar we're just not going to have this quantity section because there is no quantity when we remove an item and this function is called remove item also you'll notice up here i forgot to add the dependencies for our add item and our dependencies here are going to be if we look through our allen instance and we're going to have add to oops add to cart these are the two things that this function depends on in order to work store items is not needed because store items is a constant up here it doesn't actually change so we don't need to worry about adding that to our use callback down here we're going to have a similar instance we're going to have allen instance here and instead of having add to cart we actually want to do remove from cart because if we look at our cart context scroll down we have a remove from a cart function so let's make sure we use that inside of here remove from cart and up here we're going to import remove from cart just like that now we need to do is actually implement the code inside of this section and we want to get out our item and in order to get the item from our cart we need to look at our cart context again and you can see we have this cart section and this card section if we scroll up just a little bit is essentially an object which contains our item and it contains this entry but essentially the thing we care about is the item on that entry so back over here into a use allen if we bring in the entirety of our cart just like that scroll down a little ways here to where we have our removal of our item we make sure we depend on cart we can say we want to use cart dot find or an entry where the entry dot item dot name is equal to the name we send in that will give us access to an entry and if our entry is null all we want to come in here is we want to play the text saying essentially that we cannot find that in the cart i cannot find the red item in your cart there we go otherwise what we want to do is we want to remove that item from our cart by saying entry dot item dot id actually we can even just do item id like this this will allow us to remove the entry from the cart and then we just want to say removed the red item from your cart just like that so now let's test to see if this actually works come over here expand this all the way and we have a yellow item in our cart currently remove the yellow item from the cart remove the yellow item from your cart and as you can see it properly removed that item from our cart and that is working perfectly the only thing that we have left to do is make sure that our checkout process works when we click on checkout it just alerts us and says thank you for your purchase we click ok and it'll remove everything from our cart pretty self-explanatory and we have a really handy function down here in our cart context called checkout that does all the behind the scenes for us for clearing our cart and displaying the message so let's just make sure we get check out here from our cart context say check out and what i want to do is create a new intent saying that i want to check out or purchase all my items or something along those lines so let's just come down and create an intent and this intent is going to either say the text of check out or it's going to say purchase items because those are about the two things you would say to actually check out and then we just want to send a command so we can just say p.play a command which is going to say purchase items there we go let's make sure we save this and again just you know why not let's test it here check out and as you can see it sent the command with the text of purchase items exactly like we wanted to let's go back into our code and add in our purchase items and this is just going to say purchase items and we come all the way down here just like we always have been whoops we're going to set up our event listeners here there we go this one's going to say purchase items and purchase item and let's just copy that up here and make sure that we include this inside of our tendencies here for our use effect save that so now we have that set up there and let's create our function so we could say const purchase items equals use callback this is just going to be a simple use callback that doesn't have any methods or variables being passed to it which makes it easy to work with and all we need to do is call that checkout method in here so first i just want to check is our cart empty if our cart is empty for some reason we'll just say allen.play ellen instance dot play text and we just want to say your cart is empty otherwise we want to call that checkout function which is going to check all of our code out for us which is really handy and we want our instance just to come in here and play some text which will say for example checking out there we go that should work and let's add in our dependencies here we have our allen instance as a dependency is cart empty and of course that checkout function that we're using now if we save this this should all hopefully be working we just expand this over refresh for good major let's actually let's test it without adding anything purchase items your card is empty as you can see told me my cart is empty let's add something to the cart purchase items as you can see it says thank you for your purchase click okay and said checking out and it's also deleted everything in our cart which is exactly what we wanted and that's all it takes to set up alan ai and it's incredibly powerful if you're interested i highly recommend you checking it out using the link down in the description below also if you enjoyed this video make sure to check out some of my other project based videos linked over here and subscribe to the channel for more videos just like this thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 40,322

Keywords: webdevsimplified, alan ai, alan ai react, alan ai tutorial, alan ai voice, alan ai react tutorial, alan ai voice assistant, react ecommerce, react shopping cart, react alan ai, alan ai software, alan ai react native, alan ai tutorial react, react voice recognition, voice interaction app, voice interaction react, voice interaction alan, alan, ai, js, react, react voice, react voice tutorial, react voice guide, react js alan ai, reactjs alan ai, react js voice, reactjs voice

Id: 4xwruFAvEHA

Length: 47min 13sec (2833 seconds)

Published: Tue Nov 24 2020