Building a Chatbot with Vue.js and AWS Amplify

hey what is going on everybody it is rob aka the diligent dev and in this video we're going to be looking at how you can build a chat bot with aws amplify and vue.js with minimal lines of code on your end now just because it has minimal lines of code doesn't mean it's not going to be powerful it's actually going to be harnessing the exact same technology that powers the amazon alexa so let's go ahead and jump over the computer and get right into it okay so here we are over the computer and the first thing you're going to need to do is head over to aws.amazon.com and go ahead and sign up for an account if you don't already have one next we're going to install the aws amplify cli so i've gone ahead and opened up a new terminal and we're going to run the following command npm i dash g for global at aws dash amplify slash cli now if you're on a mac you'll probably have to put sudo in front of this and type in your password since we're installing something globally but on a windows machine you should just be able to go ahead and install this i already have installed so i'm not going to do that go ahead and pause the video here install the cli and then come back when you're finished and once you have the cli installed let's go ahead and create our view app so i'm going to run npx view creates aws dash amplify dash chat bots and then i'm just going to go ahead and pick the default and once this is done creating our project i will be right back and now that the project's been created i've gone ahead and opened it in visual studio code you can use whatever code editor you'd like but if you want to follow along i'd recommend you download and install visual studio code now the first thing we're going to do is open up a new terminal so go to terminal new terminal and we're going to run the following command amplify configure and what this is going to do is set up a account on aws that will allow us to interface with their services and allow the amplify cli to create those services for us so it's said that it wants us to sign in to our administrator account and i've already signed into aws so it has a cached and it will go ahead and open up this window for you and it's saying that once you're signed in go ahead and come back here and hit enter to continue we're going to choose a region i'm just going to choose us east1 specify a username i'm just going to say diligent dev chatbots user and you can do whatever you want here it's going to go ahead and open up the im console i'm just going to go ahead and pin this window here because we're going to be using it a lot and now that that's open it's saying to complete the user creation so what you want to do when you're in here is just make sure that this programmatic access checkbox is checked it should be by default go to next for permissions make sure that administrator access is checked and it should be by default we're not going to add any tags and we're just going to go ahead and create the user now that the user has been created i'm going to make this a little bit bigger it's going to give us this access key id and a secret access key so i'm going to do is copy this head back over to our terminal and hit enter it's going to access ask us for the access key and we're just going to go ahead and paste it in there and hit enter and then it's going to ask us for the secret access i'm going to hit show going to copy it come back over here and paste it in and hit enter it's asking us if we want to update slash create the aws profile in our local machine and you're going to set a profile name and i'll just set diligent dev chat chatbots for that as well and it successfully set up the new user so now we're done with that the next thing we need to do is run amplifyinit and i'm going to clear out the terminal and just run amplify init it's asking us to enter a name for the project i'm just going to hit enter for default asking us for the environment i'm going to hit enter for dev what is the default editor we're in visual studio code or if you're in another one you can choose that it's asking us what type of project is javascript which framework we're using we're using view and all these you can just hit enter for the default because these are the view defaults it's asking us if we want to use an aws profile i'm going to hit yes and we're going to go down and choose that diligent dev chat bot profile we chose earlier and once this is done initializing in the cloud i will be right back okay now that amplifi has initialized our project in the cloud let's go ahead and start adding resources to it so we're going to come back down here into the terminal and we're going to run the following command amplify add interactions we're just going to hit enter for the default for the resource we're going to start with a sample we'll do order flowers and it's going to ask us if we're going to be targeting children with this bot we're just going to hit end for no and it's going to say that it was successfully added to our resources the next thing we're going to do is run another command called amplify push and this is going to go ahead and set up our bot inside of our amplify project in aws so i'll just hit enter there and next is going to give us a little summary of what it's going to set up in the cloud so i'm just going to hit y for yes and then once this is all set up i will be right back okay so now our bot has been provisioned on aws so what we're gonna do is come back down to the terminal and we're gonna run the following command amplify console and what this is gonna do is open a new web page and it's gonna display our amplify console now you'll see that it shows us some little information about uh the bot we just deployed but unfortunately we can't get to our actual bot from this page so what we need to do is come to the services tab and type in lex into the search bar we're going to click on that and then we'll see that we have our bot right here so i'm going to go ahead and click on it and now let's walk through exactly what is going on here so this is going to use the same natural language processing that an alexa would use to try to figure out exactly what our users are saying so we have some sample utterances here and the user does not have to say this exactly as long as they say something like this the bot will recognize exactly what they want so if someone was to come to our bot and say i would like to pick up flowers or i would like to order some flowers or something along those lines then it's going to kick off our chat bot process when the bot is initialized you can fire off a lambda function but we're not going to do that for the purposes of this demo next we have slots down here and this is the sequence of questions that our bot is going to ask our end user in a conversational style you'll see that the first one is they're going to ask what type of flowers the second they're going to ask for a pickup date and the third they're going to ask for a pickup time now you'll see our flower type here is going to be displayed on the pickup date and also in the pickup time now we have these different slots and think of the name as your variable well let's go through this first we have the priority over here and this is the sequence in which the questions are going to be answered you can move them up and down with these little arrows then we have required and it's going to be whether or not this is a required field next is name and think of these as like the variable types that are going to be passed back to you when a user is done interacting with the bot next we have the slot types and you'll see that we have this flower types which is a custom type that that amplify has gone ahead and set up for us and we see we have it over here so if we click on it you'll see that we have uh expanded values and there's three different options that a user could choose from and you'd want to put your options in here so let's go back that's a custom slot and then you'll see we have pickup date and pickup time and these are provided by amazon and you'll see they have a ton of them in here you could go ahead and check these out but an amazon.date would be the date and the time would be the pickup time that the user would want and these are the prompts that are going to be asked when they when we want to capture this data next down here we have our confirmation prompt and it'll say something like okay your flower type which they have picked up here will be ready for pickup by this pickup time that they specified here uh the pickup date that they specified here does this sound okay and the usual will say something like yes no sure something along those lines to let the bot know that they can confirm the order that is being placed if they say no then this is the response that's going to come back now once the confirmation prompt has been answered there's a couple different things we could do here we can use a lambda function to process the order or we can just return the parameters to the client which i'm going to do and then we have a response that we can put in here so let's go ahead and add a message and we'll say something like thank you thank you your order has been placed successfully and we're just going to hit enter and once it's all said and done that is the last thing that the user will see i'm going to go ahead and save this we're going to build the bot and it does take a second to build and once it's done building i will be right back so as we can see here on the screen the bot was built successfully i'm just going to go ahead and close this and before you even leave this page you can just go ahead and test your bot so we're going to test it over here and i'm just going to say i would like to order some flowers it's going to ask us what type of flowers i'm going to say roses which is in our custom flower type slot it's going to say what day do you want the roses to be picked up we'll just say tomorrow at what time do you want the roses to be picked up and as we're filling these out you'll see that these slots are being filled in we'll just say 9 a.m it's gonna say okay your roses will be ready by nine on that on tomorrow's date does it sound okay we'll just hit yes and it'll say thank you your order has been placed successfully and it gives us a summary of what we've chosen but what we're interested in is actually getting this bot into our view project so let's go ahead and minimize this and in the terminal we're going to run the following command npm i aws amplify aws amplify dash view and hit enter and once this is done installing these dependencies i will be right back okay so our package is installed successfully and what we're going to do is set up view to go ahead and use those packages we just installed so let's head to src main.js and up here at the top we're going to say import amplify comma star as amplify modules from aws amplify under that we're going to say imports give some curly brackets amplify plug-in from aws amplify view and then we're going to import aws config from dot forward slash aws exports right below that we're going to say amplify configure and pass in aws config and then we're going to say view dot use amplify plug-in comma amplify modules and we're going to go ahead and save that next we're going to head over to app.view and inside of this app div we're going to go ahead and remove everything i'll remove the hello world inputs and remove the components property now fortunately for us amplify gives us a view component called amplify chatbot that we can just plug and play inside of our application so we're going to say amplify dash chat bot and we'll go ahead and close that now this chat bot is going to take a config it's going to be v binded to it so we'll say chat bots config and we'll set that equal to chat bots config down here in export default we will add a data property and inside of it we will do our chatbot config and inside of that we're going to give it a bot property and set it equal to our bot in the aws console so let's go ahead and head back there and see what our bot name is if we go back and reload go find lex again we can see that the name of our bot is order flowers underscore dev so i'm just going to go ahead and copy that and head back to our project and paste it in there now instead of the bot closing on the completion of an order we don't want it to do that we want to display that message saying thank you for your order so we'll do clear completes property and set that equal to false now in order to see the actual values of the bot has captured we need to import a package from aws amplify here at the top of the script tag so we'll say import curly brackets interactions from aws amplify then below our data property we will make a methods property and we will call this handle complete we will pass in an error if there is any and confirmation inside of here we'll say if there is an error we'll just alert the error and return if there's no error we'll just alert the confirmation we'll do json.stringify confirmation we'll go ahead and save that and then we're going to need to register our interaction so right above the method we'll do a mounted this is a life cycle hook provided to us by view when the component is mounted to the screen and all we're going to do is say interactions dot complete or on complete and we're going to pass it the name of our bot which is this order flowers dev and then we'll bind that to our handle complete function so we'll say this dot handle completes so let's go ahead and save everything we'll go down to the console and we'll run npm run serve to get a development server up and running now it's up and running we'll just go ahead and click on the local host i will pull it over and we see we have our chat bot here in the screen so it says to type a message so we'll go through the workflow of our chat bot i would or let's do something a little bit different i'd like to order flowers what type of flowers do we want to order we'll say roses again when do we want them to be picked up we'll say today what time do we want them we'll just say like 8 p.m and it'll say okay your roses will be ready for pickup this is eight o'clock in military time for today does this sound okay and we'll just say yes and then it's gonna give us exactly what our inputs were we see we have our flower type of roses the pickup date of today and the pickup time pickup time's a little bit cut off but it is 20. we'll hit ok and you'll see that we have our message of thank you your order has been placed successfully so that's going to go ahead and wrap up this tutorial as you can see it's super easy to implement a chat bot with aws amplify if you got any value out of this video please smash that like and subscribe button it really helps out my channel and encourages me to make more videos like this if you have any comments questions or concerns go ahead and leave them in the comment section below and until next time happy coding [Music]

Channel: Diligent Dev

Views: 2,220

Keywords: aws, aws amplify, aws amplify vue, chatbot tutorial, chatbot ai, chatbot app, vue js, vue js tutorial, aws amplify vue js, vuejs amplify, vuejs chatbot ui, vue js chatbot, aws amplify chatbot, vue tutorial, amazon web services tutorial for beginners, amazon web services, amazon web services tutorial, amazon web services explained

Id: nMyhBh-E2eQ

Length: 18min 6sec (1086 seconds)

Published: Thu Jul 30 2020