Build your own Voice Assistant with React Native, Node.js and Watson (pt.1)

Anderson Anjos
5 min readJun 11, 2019

--

Take advantage from React Native powerful applications integrated on IBM Watson Assistant (former Conversation)

Nowadays, entertainment, medical, financial and many other services are common places for assistants to live. Maybe you do not know yet, but behind the scenes, there’s actually some kind of AI that makes these services really smart.

Surfing this wave, why not build our custom voice chatbot?
Let’s do that!!

Read this before!
Here the idea is not focusing in how to Watson Assistant, React Native or Node.js works “under the hood”. More details about these can be found at:

Node.js Getting Started:
https://nodejs.org/en/docs/guides/getting-started-guide/

React Native Getting started :
https://facebook.github.io/react-native/docs/getting-started.html

Watson Assistant Getting Started Tutorial : https://cloud.ibm.com/docs/services/assistant/getting-started.html

The Project

Basically, we will create an application that suggests beer type and style based on weather condition informed by user. A very important detail is that the audience of this application is formed by Brazilian clients. Thus, the language used by AI must be Portuguese.

Design of Solution

React Native (channel)
Interface where the user are be able to do questions and presented information provided by Watson.

Node.js (Orchestrator)
Controls all data traffic between channel and AI. In a more complex solution, to concerns about how integrating external api’s, databases and other information sources as well as data flow control, is a role for the orchestrator.

Watson Assistant (Artificial Intelligence)
Responsible to translate user’s intentions, extract related entities, and answer questions through Artificial Intelligence.

Node assumes the orchestrator role, providing inputs to Watson and information that React will speak

Then let’s start to work…

We will starting by Watson configuration.
Here I supposed you already created an IBM Cloud account, if you didn’t visit https://cloud.ibm.com/registration to do it.

After logged in, we can access IBM Cloud Dashboard, a kind of portal where are located created services.

Click on Create resource and select AI > Watson Assistant

Choose the service name, select Lite plan (free and no credit card needed) and create.

If all steps have been successfully performed, the Watson Assistant credentials (url and api key) has been generated and will be used to access the service later.

Launch the Watson Assistant and let’s start to build our skill.
On Skills tab, select Create Skill

We have to give a name and select the language. Remember that our app audience are from Brazil. Thus, since Watson Assistant processes the dialog based on the language, we must choose the Portuguese here.

Skill config must seems like this

Now we must teaches Watson how to handle user inputs, and to do it he must be able to know their intent.

We perform this task creating intents and providing examples associated with each related intent created. The more examples, more accurately the conversation will be processed. Put at least five examples by intent.

Inside Intent tab, click on Create Intent.
Then, create a intent named lets_drink, adding 10 examples that express the intentions idea.

Return to previous page and let’s create the dialog.

Now on the Entity tab, we’ll create the entities we want to extract from the conversation. Entities will capture the keywords we need to decide which type and style of beer to suggest to the user.

Add entity called weather and give examples meaning possibly values that entity can assumes.

Entity must have examples reflecting their possibly values

And finally, inside Dialog tab, click on Create Dialog.
Here we have to try reproduce a real conversational flow. Two nodes are automatically created for us when dialog structure are built.
First, we going change Welcome node adding more greetings examples.

Do the same on anything_else node. We need to drive the user to let us know about weather conditions.

So, beneath the welcome node, add a new node called beer_selection that will contain all the logic responsible for controlling dialog flow.

We’ll not explain how to build dialogue in the details of the Watson Assistant. For more information about building the dialog box, the flow handler, and the pre-built dialog structures, follow the link https://cloud.ibm.com/docs/services/assistant?topic=assistant-dialog-overview

Click on beer_selection to edit node and inside them do that config:
- Click on customize an enable multiple responses
- The response fields will be displayed and you will fill as shown below

Basically, we must define conditions and values applied when satisfied.
eg:
condition: @weather:calor && now().split(‘ ‘).get(1).before(‘18:00’)
response: Nesse calorão uma Pilsen leve e refrescante é a pedida.

In other words, if are hot and before 18:00h, do something (answer as defined in “respond with”).

Done!
We can validate the work on Try it Out option.

The intention here was to create a very simple conversation that will be needed later, to perform the “intelligence role” of our backend.

--

--