arrow_back

Google Assistant: Build a Youtube Entertainment App

Join Sign in

Google Assistant: Build a Youtube Entertainment App

1 hour 15 minutes 5 Credits

GSP487

Google Cloud selp-paced labs logo

Overview

Google Assistant is a personal voice assistant that offers a host of actions and integrations. From sending texts and setting reminders, to ordering coffee and playing music, the 1 million+ actions available suit a wide range of voice command needs.

Cloud Functions is a lightweight compute solution for developers to create single-purpose, stand-alone functions that respond to Cloud events without the need to manage a server or runtime environment.

The Youtube Data API allows you to access millions of YouTube videos and their associated metadata through HTTP requests.

By utilizing Cloud Functions and the YouTube Data API, you will build an Assistant application that takes in a user's favorite music artist and generates their top ranking songs with links and thumbnails.

What you will learn

In this lab, you will learn how to:

  • Build an Assistant application pipeline that consists of an Actions project, a Dialogflow agent with custom intents and entities, a webhook, and a Cloud Function to handle fulfillment.
  • Generate the proper authentication credentials and install necessary dependencies to use the Youtube Data API.
  • Add fulfillment logic to the Cloud Function to handle YouTube Data API calls.
  • Deploy your application and test it with the Actions Simulator.

Prerequisites

This is an advanced level lab. This assumes familiarity with Dialogflow and Cloud Functions. Basic knowledge of APIs is recommended. Experience with JavaScript and the Node.js runtime is recommended, but not required. If you need to brush up on these skills, please take one of the following labs before attempting this one:

Once you're ready, scroll down and follow the steps below to get your lab environment set up.

Setup

Cloud Console

How to start your lab and sign in to the Google Cloud Console

  1. Click the Start Lab button. If you need to pay for the lab, a pop-up opens for you to select your payment method. On the left is the Lab Details panel with the following:

    • The Open Google Console button
    • Time remaining
    • The temporary credentials that you must use for this lab
    • Other information, if needed, to step through this lab
  2. Click Open Google Console. The lab spins up resources, and then opens another tab that shows the Sign in page.

    Tip: Arrange the tabs in separate windows, side-by-side.

    Note: If you see the Choose an account dialog, click Use Another Account.
  3. If necessary, copy the Username from the Lab Details panel and paste it into the Sign in dialog. Click Next.

  4. Copy the Password from the Lab Details panel and paste it into the Welcome dialog. Click Next.

    Important: You must use the credentials from the left panel. Do not use your Google Cloud Skills Boost credentials. Note: Using your own Google Cloud account for this lab may incur extra charges.
  5. Click through the subsequent pages:

    • Accept the terms and conditions.
    • Do not add recovery options or two-factor authentication (because this is a temporary account).
    • Do not sign up for free trials.

After a few moments, the Cloud Console opens in this tab.

Note: You can view the menu with a list of Google Cloud Products and Services by clicking the Navigation menu at the top-left. Navigation menu icon

Task 1. Create an Actions project

In order to build any Assistant application, you will first have to make an Actions project.

  1. Open a new tab in your browser and go to the Actions on Google Developer Console.

  2. Then sign in with your Qwiklabs credentials if prompted.

  3. Once you're signed in, click New project.

  4. Agree to Actions on Google's terms of service when prompted.

  5. Then click into the project field and select your Qwiklabs Google Cloud project ID.

  6. Then click Import Project.

Soon after you will be presented with a welcome page.

Task 2. Build an Action

  1. In the left-hand corner, click the Actions Console logo and the select your newly created project (title has your Project ID as the name).

  2. Then click the Build your Action dropdown and then select Add Action(s).

  3. Then click Get Started > Custom Intent > BUILD.

This will take you to the Dialogflow console.

  1. Select your Qwiklabs account and click Allow when Dialogflow prompts you for permission to access your Google Account.

  2. When you land on the Dialogflow page, check the box next to Yes, I have read and accept the agreement and click Accept.

  3. Now on Dialogflow agent creation page, click CREATE.

Test completed task

Click Check my progress to verify your performed task.

Create a Dialogflow Agent traverse from Action Project

You will now enable webhook fulfillment in Dialogflow so that your Cloud Function can be passed the necessary arguments to create this application.

  1. Click Fulfillment from the left-hand menu.

  2. Move the Disabled slider for Webhook to the right to Enabled.

  3. Enter the dummy URL https://google.com in for the URL field.

You will update this URL when you build and deploy your fulfillment.

  1. Scroll down and click Save in the bottom right corner.

  2. Then click Intents from the left-hand menu and select Default Welcome Intent.

You will now take a high level look at the user experience you're trying to build.

Task 3. Conversational design

Before you begin creating an Assistant application, it's always a good idea to map out a conversation by writing sample dialog(s). These dialogs give you a good reference point when you eventually start building your app. Here is a sample dialog for the application you're building:

  • App: Hello there and welcome to YouTube Entertainment! What artist are you searching for?
  • User: Kanye West
  • App: Fetching your request... Okay, the top video from Kanye West is "I Love It" featuring Lil Pump. Here is a link to the video. See you next time!
Note: This example shows only a couple of the dialogs that you could write for your own apps. Learn more about dialogs from the Designing Actions on Google documentation.

Task 4. Build the Default Welcome Intent

  1. Make sure that you are in the Default Welcome Intent.

  2. Scroll down to the Responses section and click the trash icon to scrap all of the default text responses.

  3. Now click on ADD RESPONSES > Text response, and type in the following: Hello there and welcome to YouTube Entertainment! What artist are you searching for?

  4. Now scroll up and click Save in the top-right corner.

Now, when users invoke your app, they know that they're entering your app's experience and what to say next.

Test completed task

Click Check my progress to verify your performed task.

Configure the Default Welcome Intent

In general, the app's responses should guide users on what to say next and to stay within your conversations' grammar, which will be further defined in the following section.

Task 5. Build a custom intent

Dialogflow intents define your conversation's grammar and what tasks to carry out when users speak specific phrases. You will now create an intent that parses user input for fields that are required by the YouTube Data API.

  1. From the left-hand menu, click on the + icon by the Intents menu item.

  2. For the Intent name field, enter youtube.

  3. In the Training phrases field click Add Training Phrases.

  4. Then in the Add user expression field enter in Kanye West and hit Enter.

  5. Select Kanye West and assign it the @sys.any entity:

Training phrases consisting one user expression with parameter name set to any and resolved value set to Kanye West

Note: If you are getting prompts which says Try to avoid using @sys.any, click OK.

You will now add some more user expressions in the Training phrases section, and assign any of those phrases the @sys.any entity.

  1. Add the following training phrases by entering them in the user expression field:

  • Dua Lipa
  • Lil Baby

Your Training phrases section should now resemble the following—note the highlighted fields, which have been assigned the @sys.any entity:

Training phrases consisting of three user expressions with parameter name set to any

  1. Now that your training phrases have been added, scroll down and expand the Action and parameters > MANAGE PARAMETERS AND ACTION section.

  2. Now check the REQUIRED checkbox for the any parameter.

This tells Dialogflow to not trigger the intent until the parameter is properly provided by the user.

  1. Now click on Define prompts for the number parameter (right-hand side) and provide a re-prompt phrase.

  2. Enter in Who do you want to look up? in the prompt field and then click Close.

  3. Now scroll to the top of the page and click Save.

  4. Now scroll down to the Fullfilment section.

  5. Click the dropdown arrow and click Enable fulfillment.

  6. Then click the Enable webhook call for this intent slider.

This tells Dialogflow to call your fulfillment to generate a response to the user instead of using Dialogflow's response feature.

  1. In the Responses section right above fulfillment, click on the Google Assistant tab.

  2. If you are unable to see Google Assistant tab then click on the add (+) button and select Google Assistant.

  3. Move the toggle for Set this intent as end of conversation.

This tells Dialogflow to relinquish control back to the Google Assistant after your fulfillment returns a response to the user.

  1. Then scroll to the top of the intent and click SAVE once more to save the entire intent.

You have now successfully declared your conversation's grammar with Dialogflow intents. You have also used Dialogflow's built-in response feature to return a static response to the user when they invoke your app. You also created an intent that uses fulfillment to return a response, which you will build with Cloud Functions.

Test completed task

Click Check my progress to verify your performed task.

Build the Custom Intent (name: youtube)

Task 6. Enable the API

Note: Return to the Cloud Console for this step.

To make YouTube Data API requests from your Cloud Function, you will need to enable the YouTube Data API in your Google Cloud Project.

  1. Open the Navigation menu and select APIs & Services > Library.

  2. Then in the search bar, enter YouTube Data API v3 and select it from the results page.

  3. Then click Enable.

Task 7. Get an API key

To make YouTube Data API requests from your Cloud Function, you will need an API key to properly authenticate calls.

  1. Return to the Cloud Console and open the Navigation menu.

  2. From there, select APIs & Services > Credentials.

  3. Then click on the Create credentials dropdown and select API Key.

  4. Copy the API key and save it somewhere for later use, like a text editor or notepad.

  5. Then click Close.

Task 8. Initialize and configure a cloud function

You will now build a Cloud Function to handle your fulfillment logic.

  1. Open the Navigation menu and select Cloud Functions, which is located under the serverless header.

  2. Then click Create function.

  3. For the Cloud Function's Function name field, enter in youtube.

  4. Then scroll down to the authentication section and select Allow unauthenticated invocations.

Note: Forgetting to do the above will cause your simulation test to fail at the end!
  1. Now click on the Save button and then click on Next to find the inline editor for index.js and package.json.

  2. Make sure that the index.js tab is open.

  3. This file defines your fulfillment logic and is used to create and deploy a Cloud Function.

  4. Remove the boilerplate code from the file.

  5. Then copy and paste the following code into index.js:

'use strict'; const { dialogflow, Image, Suggestions } = require('actions-on-google'); const functions = require('firebase-functions'); const app = dialogflow({debug: true}); const API_KEY = '<YOUR_API_KEY_HERE>'; app.intent('youtube', (conv, {any}) => { var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=" + encodeURIComponent(any)+ "&type=video&order=viewCount&videoCategoryId=10&key=" + API_KEY; const axios = require('axios'); return axios.get(url) .then(response => { var output = JSON.stringify(response.data); var song_fields = response.data.items[1]; return song_fields; }).then(output => { var song_title = output.snippet.title; song_title = song_title.replace(/&amp;/g, '&'); song_title = song_title.replace(/&quot;/g, '\"'); var song_link = JSON.stringify(output.id.videoId); var song_thumbnail = output.snippet.thumbnails.high.url; conv.ask(`Fetching your request...`) conv.ask(new Image({ url: song_thumbnail, alt: 'Song thumbnail' })) conv.close(`The most popular song is: ` + song_title + `. The link to this song is: https://www.youtube.com/watch?v=` + song_link.slice(1, -1) + `. See you next time.`); }) }); exports.youtube = functions.https.onRequest(app);
  1. Replace <YOUR_API_KEY_HERE> (line 9) with the API key you generated in the previous step.

  2. Now open the package.json tab.

This file declares package dependencies for your fulfillment, including the Actions client library.

  1. Replace the contents of the file with the following:

{ "name": "youtube", "description": "Get restaurant reviews.", "version": "0.0.1", "author": "Google Inc.", "engines": { "node": "8" }, "dependencies": { "actions-on-google": "^2.0.0", "firebase-admin": "^4.2.1", "firebase-functions": "1.0.0", "axios": "0.16.2" } }
  1. Once you have those files configured, find the Entry point field.

  2. Enter in youtube for the value.

  3. Set the Runtime version Node.js 10

  4. Now click the DEPLOY button below.

It will take about a minute for your function to be built.

  1. Now click on the youtube function to get more details about it's configuration.

  2. Then click on the trigger tab.

  3. Copy the function URL.

You will use it as the URL for the Dialogflow webhook, which is configured in the next section.

Test completed task

Click Check my progress to verify your performed task.

Initialize and Configure a Cloud Function

Task 9. Configure the webhook

  1. Return to the Dialogflow console and click on the Fulfillment menu item from the left hand navigation menu.

  2. In the URL field, replace https://google.com with the function URL you generated in the previous step.

  3. Scroll down to the bottom of the page and click Save in the lower right corner.

Task 10. Test your Assistant application with the Actions simulator

Now that your Cloud Function has been deployed and your webhook has been properly set up, you can preview the app in the Actions simulator.

Check your Google permission settings

In order to test the silly name maker that you built over the course of this lab, you need to enable the necessary permissions.

  1. Open a new tab in your browser and visit the Activity Controls page.

  2. Sign in with your Qwiklabs credentials if prompted.

  3. Ensure that the following permissions are enabled by sliding the toggles and selecting TURN ON for the following cards (confirm by clicking on Turn on > Got it):

  • Web & App Activity

  1. Now close the Activity Controls page.

Test the application with the simulator

  1. Return to the Dialogflow console.

  2. Then from the left-hand menu, select Integrations.

  3. Then click on integration link inside the Try Actions Builder section.

  4. When you land on the following page, click TEST:

Google Assistant Actions simulator

The Actions simulator allows you to test your applications without any hardware like a Google Home.

  1. Enter Talk to my test app in the Input area and hit Enter.

  2. Now enter a music artist (for example, Kanye West.)

You should receive a similar output in the right-hand panel, which includes the song name, link, and thumbnail:

My test app response, which includes the song name, link, and thumbnail

  1. Try talking with your test app with new artists!

Congratulations!

In this lab you built a robust Google Assistant application with Dialogflow and Cloud Function. After creating an Actions project and Action, you configured and built two intents. From there you learned how to initialize Cloud Function and you added your own fulfillment logic and packages to the Cloud Function to handle YouTube Data API requests.

After deploying the Cloud Function, you updated your webhook URL and tested your Assistant application with the Actions simulator. You are now ready to take more advanced Google Assistant development labs.

Finish your quest

Continue your quest with OK Google: Build Interactive Apps with Google Assistant.A quest is a series of related labs that form a learning path. Completing this quest earns you a badge to recognize your achievement. You can make your badge or badges public and link to them in your online resume or social media account. Enroll in this quest and get immediate completion credit. See the Google Cloud Skills Boost catalog to see all available quests.

Next steps / learn more

Be sure to check out the following lab to receive more hands-on practice with Dialogflow:

Google Cloud training and certification

...helps you make the most of Google Cloud technologies. Our classes include technical skills and best practices to help you get up to speed quickly and continue your learning journey. We offer fundamental to advanced level training, with on-demand, live, and virtual options to suit your busy schedule. Certifications help you validate and prove your skill and expertise in Google Cloud technologies.

Manual Last Updated July 21, 2022

Lab Last Tested January 11, 2022

Copyright 2022 Google LLC All rights reserved. Google and the Google logo are trademarks of Google LLC. All other company and product names may be trademarks of the respective companies with which they are associated.