This is a workshop for implementing a chatbot uysing Vue, Nuxt and Dialogflow for JsDay Canarias 2019 done by Pedro Ramos. You can follow me on twitter too ๐.
The workshop is divided into several branchs. Lets try to follow the regarding steps for getting the final result
Try to install the tools before to start the workshop
The different tools that we need:
- Ngrok download from this link
- Node
- For Windows. Download from this link
- For Mac:
- First install home brew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- Instal via Brew:
brew install node
- First install home brew:
- For Linux:
- Install curl:
sudo apt-get install curl
- Download via curl NodeJs LTS version:
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
- Install Nodejs Ubuntu:
sudo apt-get install nodejs
- Install curl:
- A Gmail Account
- Google CLI:
You have 2 options for this step. Only clone the repository or fork the repository and later clone from your profile.
Fork the repository clicking on the Fork button on the top right.
Clone this repository in your locale machine using this command:
git clone https://github.com/[YOUR-USERNAME]/ImplementingVuenChatBot
git clone https://github.com/PedroRamosRguez/ImplementingVuenChatBot
In the project folder install the dependencies using the next command:
npm install
The next step will be to run the server using the next command:
npm run dev
If everything is ok, we can continue in the next steps
After run a server, the next step will be to delete the component created by NUXT CLI. We will need to delete everything inside of /components/Logo.vue
, rename the component to Chatbot.vue, and write only a h1 tag.
Then we need to change in pages/index.vue
the Logo.vue import and change it by Chatbot.vue. Finally we need to change the component name in test/Logo.spec.js
.
The final result have to be like the starting_app branch
git checkout starting_app
This step is too long for doing in the workshop beacuse is add so much style to the component. Lets change to creating_chatbot_component branch
git checkout creating_chatbot_component
This step will be showed in live explaining the branch content.
This is another too long step. In this step we need to create all the component needed functions to link client side with DialogFlow Agent. The result of this step is showed in the creating_client_functions branch
git checkout creating_client_functions
This step will be showed in live explaining each created functions.
we need to add the endpoints to link DialogFlow agent to our app.
First at all, lets create a chatbot folder with a routes.js file with the next content
const { Router } = require('express')
const router = Router()
// Status Endpoint
router.get('/chatbot/status', (req, res) => {
res.send('OK')
})
// Chatbot Endpoint
router.post('/chatbot', (req, res) => {
const data = req.body
console.log(data)
const response = {
fulfillmentText: 'Your webhook works fine !'
}
res.json(response)
})
module.exports = router
Then import the routes in server/index.js
file above app.use(nuxt.render)
const chatbot = require('../chatbot/routes')
app.use(chatbor)
With this configuration, we will can to access the server endpoints.
- Go to Dialogflow web. Sign in with a google account.
- Press the button go to console on the top-right side.
- Create an agent. Put spanish language please.
- After that, press tool button and go into Export and Import section, select restore from zip and upload the zip file that you will find in the creating_client_functions branch.
- Open ngrok console.
- Type ngrok http 3000.
- Copy https link.
- Go into fulfillment options in Dialogflow
- Toogle webhook option to enable
- Paste the ngrok https link into url options with /chatbot
After configurate Dialogflow, lets create some intents and lets add some training phrases. Then, put an action name and finally in the fulfillment option, lets toogle in the enable web hook call for this intent.
- Go to Google Cloud Console
- Select in the top side the dialogflow app
- Go to toolbar on the left side
- Go in API AND SERVICES
- Go in CREDENTIALS
- Press in select create credentials button
- Select service account key
- Select Dialogflow API
- Select JSON option
- Create Button and save the json file
Then open the Google Cloud SDK Shell downloaded from Google CLI and put the next commands
gcloud auth activate-service-account --key-file="PATH to the json file created before"
gcloud auth print-access-token
With theese commands we have created a token to link our client app to the *Dialogflow agent
Create an env folder with a env.js file and add theese lines:
const FULFILLMENT = 'ngrok https link'
const DIALOG_FLOW_TOKEN = 'token created with the gcloud auth print-access-token command '
const DIALOG_FLOW_API_ROOT_URL = 'https://dialogflow.googleapis.com/v2'
const PROJECT_ID = 'project_id from json file created'
module.exports = { FULFILLMENT, DIALOG_FLOW_TOKEN, DIALOG_FLOW_API_ROOT_URL, PROJECT_ID }
Before to test our chatbot, lets create some responses in our server. Finally, if everything is ok, we will have our Vue chatbot component created and linked with our Dialogflow agent
I hope you liked this workshop โจ learned a lot, and hope to see you in the next one ๐.