A chatbot simulates conversation experience with human users over the Internet in the form of voice or text messages. In this guide, we are going to build a weather chatbot in React & Facebook messenger platform using the Dialogflow conversation platform to process Natural language. The NodeRED flow will connect the React and facebook messenger platform to online Dialogflow AI services to process the user message and respond back to user.
you need the following in order to follow this guide,
- Facebook Developer account
- React front-end application will send the user message to node-red Websocket in node
- Websocket listener receive user message and send to dialogflow node
- Node-Red dialogflow node will call the Dialogflow AI
- Dialogflow AI will detect the intent of the conversation
- If the intent of the user is to get the weather for city, Node-red flow will call the Open Weather API to get weather for city.
- Node-red flow will send the response to user through websocket out node
Facebook Messenger Platform
- Facebook messenger will send the user input to facebook server
- Facebook server then sends webhooks to node-red server where messenger app is hosted.
- Node-Red http in node(Facebook Messenger Listener) will receive the message & facebook event to send the message to dialogflow node
- Node-Red dialogflow node will send the user input to Dialogflow AI
- Dialogflow AI will detect the intent of the conversation
- If the intent of the user is to get the weather for city, Node-red flow will use the httprequest node to call the Open Weather API.
- Node-red flow will send the response through Send API to facebook server
- Facebook server will send the response back to user messenger
Sneak peak of the app
Node-RED is a browser based visual tool editor to create the APIs and online services in easy and interesting ways. Using Node-Red, Developers can easily create flows to process the data by wire up input/output and processing nodes. You can import the below json node-red flow in your local instance to follow the guide.
Node-Red websocket in/out node are used to listen the message from react app and publish the AI response back to user. Configure the Websocket in node type to “Listen on” with the path “/receive”. It will create the websocket listener to receive the message from client application. Websocket out node to configure type to “Listen on” with the path “/publish”.The message arriving to the websocket in node will be processed by Dialogflow AI and the response message will be sent back to the client through Websocket out node.
React application creates the websocket connections to publish/listen the message from node-red. The publishSocket will connect to node-red Websocket in node to publish the user message to server. The listenSocket will connect to node-red Websocket out node to receive response from server. The source code of the react application can be found on Github. Change the websocket url to your local node-red instance before use the application.
this.listenSocket = new WebSocket("wss://learn-react-bot-node-flow.herokuapp.com/publish");this.publishSocket = new WebSocket("wss://learn-react-bot-node-flow.herokuapp.com/receive");
Visit the Dialogflow website to signup for free account. Click on the Create Agent button. Give your agent name and other fields details like below, then hit the CREATE button. It will redirect to the main page of the agent after creation.
Go to agent settings and click on the service account name shown under the Google Project. It will open Google Cloud Platform service account page.
Google Cloud Platform service account page will list the Dialogflow Integration service account. Create key for service account and download the json file to your computer.
Install the node-red-contrib-dialogflowv2-api to add Dialogflow.com node in node-red. Copy and paste the downloaded json file in Private Key field in the Dialogflow.com node in Node-RED.
Dialogflow provides a feature to handle simple conversations with users without writing any code. Click Small Talk on the sidebar and toggle it on.
An intent is the action to extract end users intention for a conversation. As our bot to find the weather for any city, it should handle to extract the city name from the user message to get the weather for the city and send it back to the user.
Give your intent name as weather and click create intent. In Training phrases add an expressions as displayed below.
Under Action and parameters make
geo-city a required parameter as shown below and save the changes.
Visit the OpenWeatherMap website to signup to create the api key and activate. Node-Red http request node will call the open weather api to get the weather for any city. Configure the open weather api url and api key in http request node.
Login to facebook developer page and create a new app for the weather chatbot. In the new app click the messenger product setup.
New facebook page is needed to get response from bot in messenger. Create a new facebook page for either business or community.
Select the created page and Generate a Page access token and give permissions and allow access.
Copy the generated token and paste in node-red facebook messenger node.
The app should enable webhook to receive messages sent by Messenger users. In the Callback URL give your node-red instance url and give an extension of http in node URL ‘/learnchatbot’ and verify token give the name as given in node-red webhook flow subscribe node.
Facebook webhooks will accept only https callback. If the node-red instance run in local with http then use the ngrok to start the https tunnel for our local Node-RED instance.
ngrok http 127.0.0.1:1880
In Webhook add subscription to messages and messaging_postback to send and receive messages.
Now open the messenger and search for the page and start chatting with Weather ChatBot.
Sample React Application: https://learn-react-bot.herokuapp.com/
Source Code: https://github.com/learnreactchatbot/learn-react-bot
I hope this article was useful. Please share and clap if you like this post.