Building a Shop Assistant ChatBot with Diaglogflow and Vapor

During the last Hackaweek organised at myToys, I decided to build a chatbot that could be used by the myToys web and mobile apps.

After doing some research, I found out about Diaglogflow, which provides voice and text-based conversational interfaces that you can integrate into your product.

This framework provided all the functionality needed to start building a basic chatbot concept, which could serve as the foundation for building a fully functional chatbot.

To know more about how to use Diaglogflow I recommend you to follow its great documentation.

The idea of the project was to create a gift finder. The user would go through a set of interconnected questions that would end up providing a suggestion in the format of a URL to the Products Overview Page of myToys website and native apps. In this page is where the user can see all the products suggested based on the answers provided by the user to the questions the chatbot asked.

To avoid writing tons of static sentences/words that can be recognised by DialogFlow, I though of improving the functionality by making the answers work dynamically. For this reason, a backend service was needed to be connected with Dialogflow.

This gave me the perfect opportunity to use Swift for, not only the client-side app, but for the server-side as well.
For this I used one of the most popular server-side frameworks at the moment, Vapor.

It turned out that it was very straight forward to create a Hello World example just by following their Getting started guide, as within minutes I had a working server thanks to it’s templates.

The next step was to deploy it somewhere in the cloud so it was accessible by Dialogflow. Since Vapor provides a toolbox with Heroku integration, it made Heroku a perfect fit allowing me to have my backend service up and running in the cloud quickly.

The last step was to connect the chatbot to the Server. You only need to add your backend service URL in the fulfillments section of Dialogflow and configure the desired intent to send a request with the defined parameters to the backend service.

See more about fulfillments here and about intents here

An example of a conversation between the bot and the user could be the following:

– Hi
+ Hello! how can I help you today?
– I am looking for a present.
+ Great. Is it for a boy or a girl?
– A boy.
+ For which age?
– 10
+ Ok. This are my recommendations: https://www.mytoys.de/maennlich/120-155-months/suche/geschenke/

Another example would be:
– I am looking for Legos
+ Great! You can see all the available at https://www.mytoys.de/suche/lego

In the case of this last example that I described, Diaglogflow would send a POST request with the parameter key, toy, and value, lego.

The final piece missing in the puzzle was to parse this request in the backend service, process it and build the response as expected by Diaglogflow, which you can find well defined here

You can refer to the project on Github

I also created a small iOS client that you could use to try it all. You can also refer to the project on Github

Final thoughts

This project has been really fun to work on as in the end I had a working chatbot that was able to understand me and replying back! I would encourage you to try it out and see what awesome chatbots you can come out with.

Another colleague worked on creating a chat app, and we decided to integrate both projects. Here you can see the result in a video.

I encourage you to read the article she has written talking about her project.

P.S: Diaglogflow also provides a really easy to configure integration with lots of messaging apps. I connected our bot with our slack account, and I can say that it was great to talk to the bot as if it was any other user in the workspace.

Share

Schreibe einen Kommentar