arrow_back

Google Assistant: Build a Restaurant Locator with the Places API

Join Sign in

Google Assistant: Build a Restaurant Locator with the Places API

1 hour 5 Credits

GSP486

Google Cloud self-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 Places API is a service that returns information about points of interest by using HTTP requests. More specifically, you will take advantage of the Place Details and Place Photos services to receive detailed information and photos of establishments.

By utilizing Cloud Functions and the Places API, you will build an Assistant application that takes in a user's current location and restaurant preferences to generate the ideal restaurant for them to visit, complete with names, addresses, and photos.

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 Places API.
  • Add fulfillment logic to the Cloud Function to handle Places 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. Then sign in with your Qwiklabs credentials if prompted. Once you're signed in, you should be looking at a clean Actions console that resembles the following:

Welcome to Actions on Google console

  1. Click New Project and agree to Actions on Google's terms of service when prompted. Then click into the project field and select your Qwiklabs Google Cloud project ID. Then click Import project.

  2. Refresh your page. Your console should now resemble the following:

New project console with actions tiles such as Smart Home, Custom and Story telling

  1. Then click on "Actions Console" in the top left corner and select your Project (title has your Qwiklabs Project ID as the name.)

Task 2. Build an Action

  1. From the center Console, select Build your action > Add Action(s) > Get Started. Then select Custom Intent > BUILD:

Custom intent tab with Build button highlighted

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. If prompted, click the "Sign-in with Google" button.

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

  4. If you are brought to the following Dialogflow agent creation page, click CREATE:

Dialogflow agent creation page

  1. If you are brought to this page instead:

Welcome to Dialogflow page

Close the Dialogflow agent creation tab. You will return to the Actions Console.

  1. Click Get Started > Custom Intent > BUILD.

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

  3. Now click CREATE:

Dialogflow agent creation page

Note: If you are not getting the Dialogflow agent creation page, click on Create Agent, give the name as your project ID. Select the Google project and 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. Enter https://google.com for the URL field. You will update this URL when you build and deploy your fulfillment:

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

Fulfillment tab

  1. Scroll down and click Save in the bottom right corner. Then click Intents from the left-hand menu and select Default Welcome Intent:

Intents tab with Default Welcome Intent option highlighted

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 we're building:

  • App: Hello there and welcome to Restaurant Locator! What is your location?
  • User: 345 Spear Street, San Francisco
  • App: Okay. How far are you willing to travel?
  • User: About a half mile.
  • App: What type of food or cuisine are you looking for?
  • User: Thai food.
  • App: Fetching your request... Okay, the restaurant name is "X" and the address is "Y". The following photo from a Google Places user might whet your appetite!
Note: This example shows only a couple of the dialogs that you could write for your own apps. Learn more about conversational design 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. Scroll down to the Responses section and click the trash icon to scrap all of the default text responses:

Responses section displaying a list of default responses

  1. Now click on ADD RESPONSES > Text response, and type in the following: Hello there and welcome to Restaurant Locator! What is your location?

Text Response pane displaying the typed in greeting and location prompt

  1. 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 the 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 Places API.

  1. From the left-hand menu, click on the + icon by the Intents menu item. For the Intent name field, enter get_restaurant.

  2. In the Training phrases field click Add Training Phrases. Then in the Add user expression field enter in 345 Spear Street and hit Enter.

  3. Highlight the address and then assign it the @sys.location entity. Your console should now resemble the following:

In the Training phrases section, the parameter name is location, the entity is @sys.location, and the resolved value is 345 Spear street

By assigning this portion of the User says to be an entity, Dialogflow can extract parameters from the user input, validate the parameter and provide it to your fulfillment as a variable.

  1. You will now add some more user expressions in the Training phrases section. Add the following training phrases by entering them in the user expression field:

  • 1600 Amphitheatre Parkway, Mountain View

  • 20 W 34th St, New York, NY 10001

  1. Highlight the addresses and then assign them the @sys.location entity. Your Training phrases section should now resemble the following—note the highlighted addresses, which align with the @sys.location entity:

Training phrases section with addresses highlighted

  1. If one of these values weren't assigned the @sys.location entity, click on the address and manually assign it so that it resembles the above screenshot.

  2. Now that your training phrases have been added, scroll down and under the Action and parameters section, click Manage Parameters and Action.

  3. Now check the REQUIRED checkbox for the @sys.location entity. This tells Dialogflow not to trigger the intent until the parameter is properly provided by the user.

  4. Now click on Define prompts for location (right-hand side) and provide a re-prompt phrase. Enter in What is your address? in the prompt field and then click Close:

Prompts for "location" page displaying prompt for address

This phrase will be spoken to the user repeatedly until Dialogflow detects an address in the user input.

  1. Still in the Action and parameters section, click + New Parameter and add the following information:

  • Required - Select the checkbox

  • Parameter name - proximity

  • Entity - @sys.unit-length

  • Value - $proximity

  • Prompts - How far are you willing to travel?

  1. Once again, click + New Parameter and add the following information:

  • Required - Select the checkbox
  • Parameter name - cuisine
  • Entity - @sys.any
  • Value - $cuisine
  • Prompts - What type of food or cuisine are you looking for?

Your actions and parameters section should now resemble the following:

Actions and parameters section

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

  2. Now scroll down to the Fulfillment section. Click the dropdown arrow and click Enable fulfillment. Then click the Enable webhook call for this intent slider:

Fullment section with Enable webhook call for this intent toggle enabled

  1. In the Responses section above fulfillment, click on + icon and select the Google Assistant tab.

  2. 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.

Google Assistant tab with Set this intent as end of conversation toggle enable

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

Test completed task

Click Check my progress to verify your performed task.

Build the Custom Intent (name: get_restaurant)

Task 6. Enable APIs and retrieve an API key

  1. Return to the Cloud Console for this step. Open the Navigation menu and select APIs & Services > Library.

  2. Search for the "Places API" and click Enable. Now if you check that page again, you should see a green check mark in the place of where "Disabled" was:

API Library screen

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

  2. Search for the "Maps JavaScript API" and click Enable. Now if you check that page again, you should see a green check mark in the place of where "Disabled" was:

API Library screen with API enabled

  1. Finally, open the Navigation menu and select APIs & Services > Library.

  2. Search for the "Geocoding API" and click Enable. Now if you check that page again, you should see a green check mark in the place of where "Disabled" was:

API Library screen with API enabled

  1. Now open the Navigation menu and select APIs & Services > Credentials.

  2. Then from the top-hand menu click + CREATE CREDENTIALS > API Key. You will be presented with a similar panel:

API key created screen

  1. Copy the API key and save it (in a notepad, for example)—you will use it in the following step.

Task 7. Initialize a Cloud Function

You will now build a Cloud Function to handle your fulfillment logic through the various APIs discussed earlier.

  1. Open the Navigation menu and select Cloud Functions, which is located under the serverless header. Then click Create function.
Note: If prompted Enable required APIs, click ENABLE.

This will open a template to create a new Cloud Function. Your page will resemble the following:

Step 1 of the Create a new Cloud Function template

  1. For the Cloud Function name field, enter restaurant_locator.

  2. Then scroll down to the authentication section and check the box next to "Allow unauthenticated invocations" and click Save.

Authentication section highlighted

Forgetting to do the above will cause your simulation test to fail at the end!

  1. Click Runtime, build, connections and security settings and set the maximum number of instances upto 5.

  2. Click Next.

  3. Find the inline editor for index.js and package.json. Make sure that the index.js tab is open. This file defines your fulfillment logic and is used to create and deploy a Cloud Function.

  4. Remove the boilerplate code from the file. 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}); function getMeters(i) { return i*1609.344; } app.intent('get_restaurant', (conv, {location, proximity, cuisine}) => { const axios = require('axios'); var api_key = "<YOUR_API_KEY_HERE>"; var user_location = JSON.stringify(location["street-address"]); var user_proximity; if (proximity.unit == "mi") { user_proximity = JSON.stringify(getMeters(proximity.amount)); } else { user_proximity = JSON.stringify(proximity.amount * 1000); } var geo_code = "https://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(user_location) + "&region=<YOUR_REGION>&key=" + api_key; return axios.get(geo_code) .then(response => { var places_information = response.data.results[0].geometry.location; var place_latitude = JSON.stringify(places_information.lat); var place_longitude = JSON.stringify(places_information.lng); var coordinates = [place_latitude, place_longitude]; return coordinates; }).then(coordinates => { var lat = coordinates[0]; var long = coordinates[1]; var place_search = "https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=" + encodeURIComponent(cuisine) +"&inputtype=textquery&fields=photos,formatted_address,name,opening_hours,rating&locationbias=circle:" + user_proximity + "@" + lat + "," + long + "&key=" + api_key; return axios.get(place_search) .then(response => { var photo_reference = response.data.candidates[0].photos[0].photo_reference; var address = JSON.stringify(response.data.candidates[0].formatted_address); var name = JSON.stringify(response.data.candidates[0].name); var photo_request = 'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=' + photo_reference + '&key=' + api_key; conv.ask(`Fetching your request...`); conv.ask(new Image({ url: photo_request, alt: 'Restaurant photo', })) conv.close(`Okay, the restaurant name is ` + name + ` and the address is ` + address + `. The following photo uploaded from a Google Places user might whet your appetite!`); }) }) }); exports.get_restaurant = functions.https.onRequest(app);
  1. Replace <YOUR_API_KEY_HERE> (line 14) with the API key you generated in the previous step.

  2. Replace <YOUR_REGION> (line 22) with your ccTLD (country code top-level domain). The List of Internet top-level domains Wikipedia page, lists all ccTLDs. This table will help you with conversions:

Country

ccTLD

<YOUR_REGION>

United States

.us

us

India

.in

in

Spain

.es

es

  1. Once your API key and region fields are properly filled out, click on package.json. This file declares package dependencies for your fulfillment, including the Actions client library. Replace the contents of the file with the following:

{ "name": "get_reviews", "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. Set the Runtime version as Node.js 14

  2. Once you have those files configured, find the Entry point field above. Enter in get_restaurant for the value.

  3. Now click the Deploy button below. It will take about a minute for your function to be built.

  4. When the creation completes, your overview page will resemble the following:

Overview page

  1. Now click on the restaurant_locator function to get more details about it's configuration. Then click on the trigger tab. You will see a function URL that resembles the following:

Restaurant locator, Trigger tab

  1. 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 8. Configure the webhook

  1. Return to the Dialogflow console and click on the Fulfillment menu item from the left hand navigation menu. In the URL field, replace https://google.com with the function URL you generated in the previous step. Your webhook should now resemble the following:

Webhook page

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

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.

Task 9. Change your Google permission settings

In order to test the application 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. Sign in with your Qwiklabs credentials if prompted.

Ensure that the following permissions are enabled by sliding the toggles and selecting TURN ON for the following cards:

  • Web & App Activity

  1. Now close the Activity Controls page.

Task 10. Test the application with the Actions simulator

  1. Return to the Dialogflow console. Then from the left-hand menu, select Integrations. Then click PREVIEW MIGRATION.

Integrations tabbed page of the Dialogflow console

  1. Once you land on the following page, click TEST:

Highlighted Test tab on the Actions console

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. You should receive a similar response:

Actions simulator with welcome message and location request

  1. Now enter a valid address (for example, "345 Spear Street San Francisco".) You should then receive the following output:

Actions simulator output: How far are you willing to travel?

  1. Now enter in a distance (for example, 0.5 miles away.) You should receive a similar output:

Actions simulator output: What type of food or cuisine are you looking for?

  1. Enter in a cuisine like "Italian" or "Thai food". Soon after you will receive a similar response fitted with a picture in the right hand panel:

Actions simulator displaying image of a restuarant

Response message with restuarant address

  1. Try talking with your test app with new addresses, proximites, and cuisines/types of food!

Actions simulator displaying image of sushi

Response message with restuarant address

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 Places 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 19, 2022

Lab Last Tested April 21, 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.