Hey Google! — Codelab 1

Hello everyone,

There are three codelabs available for the user experience about Google Assistant in the official site. Alright, what is codelab? Codelab is an online program to learn and apply computer programming. I’m also aiming to share my experience with Google Asisstant. In this article, I would like to talk about Codelab 1, which is the first level. So let’s start! 😊

Actions on Google | Google Developers

In this codelab, we’ll build a simple conversational Action. In fact, our goals here are:

• Understand how Actions work,
• How to create a project in the Actions Console,
• How to create a Dialogflow agent,
• How to test our Action in the Actions Console Simulator,
• How to use Dialogflow slot-filling and system entities.

From my previous article (link below), we can access the ‘setup for a project with dialogflow’ steps and start the project by applying those steps. Since we’ve enabled the necessary permissions to test actions before we begin the steps there, we make sure in three steps:

1. Go to the ‘Activity Controls’ page (https://myaccount.google.com/activitycontrols).
2. Sign in with our Google account, if we have not already done so.
3. Ensure that the following permissions are enabled: Web & App Activity/ Device Information/ Voice & Audio Activity.

Hey Google, Here We Go!

1. Controls were made.
2. Then the steps in the first post were made and we were able to create Action Project and Dialogflow Agent!
3. So now it’s the ‘starting a conversation’ section. 😊

Create a Welcome Intent

Every Actions project must have a welcome intent that acts as an entry point for users to start conversations. By default, Dialogflow creates a welcome intent for us. For this codelab, our welcome intent is “Hey Google, talk to my test app”.

To modify the welcome intent:

1. In the Intents page of the Dialogflow Console, click on Default Welcome Intent.

2. Delete all of the other text responses by clicking the trash icon next to each one.

3. Under the Responses section, click Enter a text response and type “Welcome! What is your favorite color?”

4. Click Save. We should see a “Intent saved” notification briefly pop up.

So our welcome intent is “Welcome! What is your favorite color?” , we have changed.

Test the Welcome Intent

The Actions Console provides a web interface for testing called the simulator.

1. In the Dialogflow Console left navigation, click on Integrations. Then, click on Google Assistant > Integration Settings.
2. Click Test to update our Actions project and load it into the Actions Console simulator. (If we see a ‘Check auto-preview setting’ dialog, we can leave the ‘Auto-preview changes’ option enabled, then click Continue.)
3. To test our Action in the simulator, type “Talk to my test app” into the Input field and hit enter.

Create a Dialogflow Intent

1. In the Dialogflow Console, close the Google Assistant integration settings page if we have it opened. In the left navigation, click on Intents then click on Create Intent.
2. In the ‘Intent Name’ field at the top, type in “favorite color” as the name of our new intent. Click Save.
3. Under Training Phrases, add the following user expressions by typing in the phrases below then clicking Enter on the keyboard:

• “purple is my favorite”
• “black is my favorite color”
• “i love yellow”
• “Pink”
• “my favorite color is green”

4. Under Action and parameters, create the prompt text to ask the user for their favorite color. We should see a line with “color” in the Parameter Name field. This parameter entry is automatically created by Dialogflow because it is able to auto-annotate words and phrases it recognizes as entities in the training phrases. On that line:

• Check the Required box.
• Click Define prompts.
• Enter “What’s your favorite color?” as a prompt.
• Click Close.

5. Under the Fulfillment section in this page (not the left navigation), click Enable Fulfillment. We may need to expand the section by clicking on the down pointing arrow.

6. Turn on Enable webhook call for this intent.

7. Click Save.

After you’ve completed these steps, Dialogflow will automatically extract parameters it recognizes from user speech which triggers this intent; in this case, the color parameter.

Build Our Webhook

The Dialogflow webhook contains the logic for dynamically constructing response messages to send to the user.

1. In the left navigation, click on Fulfillment.
2. Toggle Inline Editor to enabled.

3. Replace the contents of index.js with the following code:

'use strict';

// Import the Dialogflow module from the Actions on Google client library.
const {dialogflow} = require('actions-on-google');

// Import the firebase-functions package for deployment.
const functions = require('firebase-functions');

// Instantiate the Dialogflow client.
const app = dialogflow({debug: true});

// Handle the Dialogflow intent named 'favorite color'.
// The intent collects a parameter named 'color'.
app.intent('favorite color', (conv, {color}) => {
    const luckyNumber = color.length;
// Respond with the user's lucky number and end the conversation.
    conv.close('Your lucky number is ' + luckyNumber);
});

// Set the DialogflowApp object to handle the HTTPS POST request.
exports.dialogflowFirebaseFulfillment = functions.https.onRequest(app);

4. Click Deploy. We’ll need to wait on this page a couple minutes for Dialogflow to provision and deploy your webhook code. When the code is successfully deployed, we’ll see an updated “Last deployed” timestamp next to the Deploy button.

Test Our Action

1. Open the Actions Console and select our Actions project for this codelab.
2. Click on Simulator in the left navigation. Click on the X button at the top of the output window. This exits you from any conversation you might have started earlier in the simulator.
3. Type “Talk to my test app” into the Input field and hit enter.

For example, try testing with the following phrases:

• “Red”
• “I love green.”
• “My favorite is pink.”

We developed a simple action. So, we created an assistant who can tell us our chosen colors we love as our lucky number. It counts the number of letter in our favorite color and return the number as an our lucky number. See you in our other actions. 😊

Thanks for reading !

Also, I have GitHub repository for my Google Assistant series. I will share codes, links, and posts there. 👇

mervebasak/HeyGoogle