Dialogflow Restaurant Chatbot Tutorial | 5
Part 5: Validation
OBJECTIVES
This part gets a bit more complicated, as we will get into validating the reservation (guests number and date&time) using fulfillment. Some coding is also necessary to do that, but don’t worry, it is not something very advanced and scary, but rather logical and upfront.
By the end of this part, your can rest assured that your bot will only create valid reservations. A reservation is valid when the number of guests is positive, but not too high (you can also implement that), and the date&time are in a realistic time frame.
CONVERSATIONAL FLOW DIAGRAM
The diagram now illustrates when the back-end is called and what are the possible responses depending on the validation.
The red boxes are the possible errors and the green one is sent only when all the parameters are valid.
Top 3 Bot Tutorials
FULFILLMENT
Each Intent can have fulfillment enabled which enables to pass information into a web service and get a result from it. When the Intent is triggered by a user’s input, if the fulfillment is enabled, then a function will also trigger in the backend. Each Intent can have parameters for extracting information from user inputs, this are the entities used in the training phrases so far.
Parameters can also be populated directly from the webhook or from other Intents using contexts and don’t necessarily have to be part of the training phrases. But the first option applies in our case.
HOW TO VALIDATE
So far, our bot knows how to ask for the required information, but it also needs to validate it.
Step 1: Enable Fulfillment
We are almost ready to code, but first we have to specify that this Intent’s information will be sent to a web service.
Go to the bottom of the page and press on ENABLE FULFILLMENT.
Now press on Enable webhook call for this intent.
We don’t have to toggle the second one as well, because we are only doing the validation after all the required data was gathered.
The fulfillment will only trigger when all the data we need was gathered (guests, date and time). There’s also the option to validate each parameter at a time when the user enters it, but that would require to Enable webhook call for during slot filling. By enabling both, you can also do other cool things, like having quick replies for parameter prompts instead of text, but let’s keep it simple for now. if you do however want to try this, I have sketched a quick diagram for it (it doesn’t have the back-end in it, but you should understand how it’s supposed to work).
Step 2: Save
Don’t forget to always Save before you test the Intent or if you leave the page. Otherwise the changes won’t take effect.
Step 3: Enable the Inline Editor
Go to the Fulfillment tab and enable the Inline Editor.
This is a neat feature which Google offers us. This simplifies the process of developing a bot by not having to create a server and host it. But of course, it is not recommended to use it in production. For us, right now, this is perfect tho.
I would love to explain what every line of code from the Inline Editor does, but this is not the scope of this tutorial. So we will only focus on what’s important to understand, for now.
Step 4: Add a function
A function is a set of statements that performs a task. In our case, inside the functions we will tell the bot what to do when a specific Intent is triggered.
First, let’s test if everything works so far. Add this code after the fallback function. The name of the function doesn’t matter for Dialogflow, you can use anything you want, but for your sake, a good practice is to understand what a function does just by looking at its name. Long function names are not that good either, so try to keep the name simple. The naming convention in JavaScript is camelCase, meaning that each word starts with a capital letter, excluding the first.
function createBooking(agent) {
agent.add('It works');
}Use the numbers to help you locate the position where the code should be.
This is just a test. The method agent.add(‘MESSAGE’) takes a string(text) and returns it to the user as a response from the bot.
Step 7: Map the function
Now that the function is created, it has to be mapped to the booking Intent using the Intent’s name (restaurant.booking.create) .
Scroll down the Inline Editor and add the following code bellow the fallback mapping.
intentMap.set('restaurant.booking.create', createBooking);
Mapping is important in order for Dialogflow to know which function to execute when an action is triggered. This implementation also allows to use a function for different actions, which reduces code duplication thus is more efficient.
Step 8: First deploy and test
Press on Deploy to save our changes in the cloud.
First deploy usually takes the most, so go grab yourself a tea or something and don’t worry, it’s normal.
When the deployment is done, try to book a table. If you get “It works!” as the confirmation response, then everything is working properly.
Note: You have to go through the whole process of booking.
Step 9: Add validation
It’s finally the time to validate the user’s input. This is the code that has to be attached to the chatbot for the validation to work as we want. If you don’t have any coding experience, don’t worry as I will explain what is happening.
As you may guess, the variables guests, time and date are the parameters we get from the user through Dialogflow. It is easier to compare a date when you have both, the date and the time in one place, but since our parameters are separate, we have to somehow connect them into one. That’s what happens with bookingDate. The variable now represents exactly this exact point in time, depending on your settings.
if (guests < 1){
sendResponse('You need to reserve a table for at least one person. Please try again!');
}We then check the number of guests. It has to be more than 0 to be valid. If for some reason, the number of guests is less than the minimum accepted value which is 1, then we tell the user that the input is wrong and to try again.
else if (bookingDate < now) {
agent.add(`You can't make a reservation in the past. Please try again!`);
} else if (bookingDate.getFullYear() > now.getFullYear()) { agent.add(`You can't make a reservation for ${bookingDate.getFullYear()} yet. Please choose a date in ${now.getFullYear()}.`);
}The next if statements checks if the dates are valid. It says else if because we only want to check these if the number of guests is valid. We check if our booking date was before this point in time, then we check if the year of the booking is bigger than the current year, thus not allowing to make bookings in advance with a year.
The only problem with this approach is when trying to make reservations at the end of the year (ex: if you try to make a reservation for January (2019) in December (2018)).
I will leave it like this in the tutorial, but in a real case scenario I would recommend to either remove this check or verify the months if the business case requires it. This will allow you to restrict the the reservation period however you want.
bookingDate.getMonth() > now.getMonth() + {number of months}The last else represents the confirmation sent to the user. If none of the above conditions was true it means that the information is correct and the booking can be made. When we create the bookingDate object, the date is automatically converted to UTC. The difference has to be added back when we display the confirmation message, that’s what timezone is for. We then send 3 messages to the user to confirm the booking.
else {
let timezone = parseInt(agent.parameters.time.toString().slice(19,22));
bookingDate.setHours(bookingDate.getHours() + timezone);
agent.add(`You have successfully booked a table for ${guests} guests on ${bookingDate.toString().slice(0,21)}`);
agent.add('See you at the restaurant!');
agent.add('Have a wonderful day!');
}Now that you have an understanding of how it works, add it into the Inline Editor.
Because we send the confirmation from the webhook, you can also change the response in the booking Intent to something like “Something went wrong, please try again!”. The user will only get this response if the webhook is not working.
Step 10: Deploy
Press on Deploy to save the changes in the cloud.
TRY OUT
The bot should now be able to validate the user’s input. Try booking a table in the past or for a negative number of people to see the error messages. And also try making a valid booking to test if the confirmation still appears.
CONCLUSION
In this part we got our hands a bit dirty with some code, but we accomplished validating the user’s input. Hopefully you learned how fulfillment works and how to use it to make a basic validation.
I hope that I was clear enough explaining how to handle validation, but as always feel free to ask any questions you may have and give some claps if you find this tutorial useful.
