Over the last few years, chatbots have exploded in popularity. It makes sense that businesses and customers alike would want the easiest way to perform tasks without human intervention. But, building your own chatbot can be a daunting task without a third party service.

This is where AWS Amplify’s interactions API shines. It leverages the same deep learning power that Amazon Alexa uses. With it, you can build out chatbots quickly and efficiently. So, let’s jump right into setting one up.

Video Tutorial

Video Tutorial

AWS Amplify CLI Setup

If you don’t already have an account, head over to AWS, and create one. Then open your terminal and run this command:

npm i -g @aws-amplify/cli

Vue App Creation

To create the Vue app, open your terminal, cd into the directory of your choosing and run this command:

npx vue create aws-amplify-chatbot

Then just choose the default settings for the app:

1. Please pick a preset: default (babel, eslint)

Amplify Setup

Amplify Account

Now open the newly created Vue Project in the code editor of your choice (I’m using VS Code). Then, open a new terminal in the root of your project (In VS code, Terminal -> New Terminal). If you’ve never used Amplify, run the following command:

amplify configure

This will walk you through the steps of setting up a new IAM account in AWS. This account will programmatically generate everything we tell Amplify via the CLI.

Initializing Amplify In Vue Project

Then, we’ll need to initialize Amplify in our project. To do so, run the following command in the terminal:

amplify init

Choose the following:

1. Enter a name for the project:
2. hit enter to choose the default
3. Enter a name for the environment:
4. dev
5. Choose your default editor:
6. Visual Studio Code
7. Choose the type of app that you’re building:
8. javascript
9. What javascript framework are you using:
10. vue
11. Source Directory Path:
12. hit enter to choose the default (src)
13. Distribution Directory Path:
14. hit enter to choose the default (dist)
15. Build Command:
16. hit enter to choose the default (npm.cmd run-script build)
17. Start Command:
18. hit enter to choose the default (npm.cmd run-script serve)
19. Do you want to use an AWS profile?:
20. Y
21. Choose the account you set up in the last step

#programming #javascript #aws #software-development #vuejs #vue