Hi Guys!! Hope everything is going fine,Today I am going to discuss how to create chatBot using DialogFlow and React Redux,
So, to start our discussion we should know the following things:
- What is ChatBot ?
- What is DialogFlow ?
- What is React Redux ?
- How to create an intent in DialogFlow ?
1.What is ChatBot ?
A Chatbot is an artificial intelligence (AI) software that can simulate a conversation (or a chat) with a user in natural language through messaging applications, websites, mobile apps or through the telephone. A chatbot is often described as one of the most advanced and promising expressions of interaction between humans and machines.
2. What is DialogFlow ?
Dialogflow (Previously known as API.AI) is where the magic happens. It works on natural language processing and backed by Machine Learning . At Dialogflow the whole ‘conversation’ take place. Dialogflow is backed by Google and runs on Google infrastructure, which means you can scale to millions of users.
3. What is React Redux?
4. How to create an intent in DialogFlow?
To start with DialogFlow first we have to google DialogFlow and open the first link then the DialogFlow page opens.
After that click on SignUp for free after that click on Signin with google.Signin with your google account:
After that you will see the Homepage ,on the left corner click on create new agent. Give a name to the new agent after that click on create.The following screen appears:
After that click on Intents ,Now you can teach the chatbot at what question what will be the answer of the chatbot, you have to specify the question in training phase input field .For setting the answer of the corresponding question we have click on add response button after that select text response and finally have to type the answer in text response input field.When you are complete with all the question and answer setting give a name to the intent at top and click on save .
So,let’s together start creating our first chatbot using Dialogflow and React Redux
in the terminal ,Now,As all the dependencies required is installed ,Let’s start coding so our first file will be index.js:
In Index.js we require React,ReactDOM,App from App.js ,Provider from react-redux ,store from chat.js and milligram . Provider from react-redux allows the states, which are stored in store to be accessible by all other components present in the root component of the application(App.js),and milligram is used for styling our application.Now let’ focus on chat.js:
So Now if we see that sendMessage function is an action dispatcher means a action must have to be performed for calling the dispatcher ,so to create a action we have to create a input field where on type text on that field the sendMessage function will be called , So let’s see the App.js file :
So in App.js file we imported connect from react-redux to connect react with redux and sendMessage function from chat.js. As App.js is wrapped by Context Provider ,App component can access the state present inside the store. MapStateToProps takes the state and store it as a props with name feed,now inside render method we are destructuring feed and sendMessage from props .Finally we are mapping through feed and rendering text in the unordered list tag. Below the unordered list there will be input field onKeyDown of which sendMessage will be called with (e.target.value) as the text parameter of the function, after that text parameter will go to middleware. Middleware will take the text and will send it to the client which will communicate with the dialogFlow to get the corresponding answer of that text and will return a response to the middleware.Then middleware will again call the sendMessage function and will send the response as the text parameter and bot as sender parameter of the function to the reducer.Finally it will be received by reducer and updated.Thus Hurry our chatbot is ready to communicate with us:
So our chatBot is ready , I am leaving my github link down below as a reference of codebase
It's a implementation of ChatBot using React and Dialog Flow. GitHub is home to over 50 million developers working…
these are really cool stuff .I always encourage you people to try new things out using React and DialogFlow .