Jan KönigIn this step, we're learning more about the flow of voice apps. How does a person get to a specific intent, how do we route them through the app logic?
We're first creating a new Jovo project, then building the app logic for the first interaction (BlueDoorIntent and RedDoorIntent). Afterward, we're testing the voice app online.
- Create a Jovo Project
- Building the Voice App Logic
- Preparing for Local Testing
- Testing on Amazon Alexa
- Testing on Dialogflow and Google Assistant
- Next Steps
Create a Jovo Project
If you're new to the Jovo Framework, you can learn more about the command line tools and the creation of a new project in in the previous course: Project 1 Step 5: Create a Jovo Project.
Let's create a new project named AdventureGame:
This will create a new folder and clone the Jovo Sample Voice App into it:
In the next steps we're going to modify the app.js of our app and create a logic that reflects how the flow of our adventure game should be. The app file generally consists of two parts: the App Initialization and the App Logic.
In this step of the tutorial, we will only care about the second (bottom) part.
Building the Voice App Logic
Before we're building out the app's logic and talk about routing through intents, let's take a look at how it is usually structured.
Refresher
Here is what the off-the-shelf logic for a "Hello World" voice app looks like, when you're using the Jovo CLI to create a new project:
The LAUNCH intent is opened when a user initially launches the app without deep invocation (if the user says "open adventure game"). In the Hello World example, this uses toIntent to redirect to the HelloWorldIntent, which returns a simple speech output statement by using the tell-method.
Add BlueDoorIntent and RedDoorIntent
Let's get rid of HelloWorldIntent and create intents for both doors:
In comparison to Hello World, this is now different: We have some form of interactivity, where the the app asks the user for additional input, and then routes to the resulting intent.
So, how do we now set up the code so we can ask users for additional input? As the wording already suggests, it's called ask-method.
Use the Ask-Method
For speech output, you can use two common methods with the Jovo Framework:
- tell: Returns speech output and ends the session
- ask: Returns a speech prompt and waits for user input, reprompts if user stays quiet
So, for a basic interaction, we would use ask in our LAUNCH intent to prompt users to either say "blue door" or "red door". If this happens, we will first just return a simple statement like "You chose to go through the blue door" for testing the model.
Let's build this into our code:
As you can see above, the ask method needs both initial speech output and a reprompt if the user misses to answer for the first time. If the user answers with either BlueDoorIntent or RedDoorIntent, the output will be a simple sentence produced with the tell method, which closes the session.
Let's test this on either the Alexa or Dialogflow platform.
Preparing for Local Testing
We will use a local webhook and the tunneling service ngrok for the testing of our code. You can find a more detailed introduction in Project 1 Step 6: Hello World!
Run the Local Server
In your command line, go to your project's folder and start the development server with the following command:
Remember that it's necessary to restart the server with ctrl + c and $ jovo run whenever you make changes to the code.
This will start the server and create a link for you to use as an endpoint. Now we can test it on Amazon Alexa and/or Dialogflow:
Testing on Amazon Alexa
Paste your webhook link to your Skill project's Endpoint on the Amazon Developer Portal and select the second option for the SSL Certificate, because Jovo provides a subdomain:
On the Test tab enable testing and type in an utterance to see if this worked:
If you have an Alexa enabled device, you can test it there as well. Just make sure you have the same email address connected to your device, as you're using on the Amazon Developer Portal.
Testing on Dialogflow and Google Assistant
If you want to test the interaction with Google Assistant, you need to do the following steps:
- Add endpoint to Dialogflow Fulfillment
- Add webhook fulfillment to Dialogflow intents
- Add Google Assistant integration to Dialogflow agent
We've done these steps in more detail in Project 1 Step 6: Hello World! > Testing Your Voice App > Google Assistant.
Open your agent in the Dialogflow Console, go to the Fulfillment section and paste the webhook you created above into the URL field:
The next step is important: Go to each of your intents, scroll down and select webhook fulfillment ("Enable webhook call for this intent"):
This way the agent knows to pass the request to your code.
This should already be enough to test your voice app inside the Dialogflow console. Just go to the right panel and type in a phrase like "go through the blue door":
This should be enough for simple testing if an intent's response comes through as expected.
If you want to test the whole flow, it's better to use the Actions on Google Simulator. To access this, go to the Integrations tab and choose the Google Assistant integration (the first one). Keep the information as is and click on "Test":
After that "Continue" to open the simulator:
By typing in "Talk to my test app" (or what's suggested by the simulator), you can launch your app and work through the flow:
Great, this worked! You can also test this on any Assistant enabled device that uses the same email address you have associated to the Actions on Google Console account.