A chatbot simulates dialog expertise with human customers over the Web within the type of voice or textual content messages. On this information, we’re going to construct a climate chatbot in React & Fb messenger platform utilizing the Dialogflow dialog platform to course of Pure language. The NodeRED move will join the React and fb messenger platform to on-line Dialogflow AI providers to course of the person message and reply again to person.
you want the next as a way to comply with this information,
- Fb 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-Pink websocket in/out node are used to hear the message from react app and publish the AI response again to person. Configure the Websocket in node sort to “Hear on” with the trail “/obtain”. It’ll create the websocket listener to obtain the message from consumer software. Websocket out node to configure sort to “Hear on” with the trail “/publish”.The message arriving to the websocket in node will probably be processed by Dialogflow AI and the response message will probably be despatched again to the consumer by way of Websocket out node.
React software creates the websocket connections to publish/hear the message from node-red. The publishSocket will hook up with node-red Websocket in node to publish the person message to server. The listenSocket will hook up with node-red Websocket out node to obtain response from server. The supply code of the react software may be discovered on Github. Change the websocket url to your native node-red occasion earlier than use the appliance.
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/obtain");
Go to the Dialogflow website to signup without spending a dime account. Click on on the Create Agent button. Give your agent identify and different fields particulars like under, then hit the CREATE button. It’ll redirect to the principle web page of the agent after creation.
Go to agent settings and click on on the service account identify proven underneath the Google Challenge. It’ll open Google Cloud Platform service account web page.
Google Cloud Platform service account web page will listing the Dialogflow Integration service account. Create key for service account and obtain the json file to your pc.
Set up the node-red-contrib-dialogflowv2-api so as to add Dialogflow.com node in node-red. Copy and paste the downloaded json file in Personal Key area within the Dialogflow.com node in Node-RED.
Dialogflow gives a characteristic to deal with easy conversations with customers with out writing any code. Click on Small Discuss on the sidebar and toggle it on.
An intent is the motion to extract finish customers intention for a dialog. As our bot to seek out the climate for any metropolis, it ought to deal with to extract town identify from the person message to get the climate for town and ship it again to the person.
Give your intent identify as climate and click on create intent. In Coaching phrases add an expressions as displayed under.
Underneath Motion and parameters make
geo-city a required parameter as proven under and save the modifications.
Go to the OpenWeatherMap web site to signup to create the api key and activate. Node-Pink http request node will name the open climate api to get the climate for any metropolis. Configure the open climate api url and api key in http request node.
Login to fb developer web page and create a brand new app for the climate chatbot. Within the new app click on the messenger product setup.
New fb web page is required to get response from bot in messenger. Create a brand new fb web page for both enterprise or neighborhood.
Choose the created web page and Generate a Web page entry token and provides permissions and permit entry.
Copy the generated token and paste in node-red fb messenger node.
The app ought to allow webhook to obtain messages despatched by Messenger customers. Within the Callback URL give your node-red occasion url and provides an extension of http in node URL ‘/learnchatbot’ and confirm token give the identify as given in node-red webhook move subscribe node.
Fb webhooks will settle for solely https callback. If the node-red occasion run in native with http then use the ngrok to start out the https tunnel for our native Node-RED occasion.
ngrok http 127.zero.zero.1:1880
In Webhook add subscription to messages and messaging_postback to ship and obtain messages.
Now open the messenger and seek for the web page and begin chatting with Climate ChatBot.
Pattern React Software: https://learn-react-bot.herokuapp.com/
Supply Code: https://github.com/learnreactchatbot/learn-react-bot
I hope this text was helpful. Please share and clap in the event you like this publish.