Building a Google Assistant with Interactive Canvas and ReactJS
In the previous part, I covered a few things like the basic set-up of the tools you’ll require and the Actions on Google project through the console.
If you’ve missed it, here it is:
In this part, we are going to cover how to set-up our ReactJS, Firebase Hosting and pulling our Actions on Google locally so that we can link all these together and make full use of Interactive Canvas!
Setting up your Create-React-App and Firebase
To begin, move into the folder where you’d like your project to live in. For example, mine would be Documents/Google Actions Projects so I’ll cd into that folder.
When you’re in that folder, create your react app the way you would do every time. To make life easier, I’ll just make use of create-react-app.
npx create-react-app new-york-times-bestsellerThen, cd into your project folder:
cd new-york-times-bestsellerAnd initialise your firebase:
firebase init
Choose “Hosting” and “Functions” for your Firebase feature.
Make sure that under ‘Select a default Firebase project for this directory’, you choose the Actions on Google project that you’ve created in the previous part!
Then continue following the next few questions like in the images above.
Once that’s done, open up your React app in any IDE you’d like.
Open up the public folder and open up index.html.
Add this line in your <head> tags:
<!-- Load Interactive Canvas JavaScript -->
<script src="https://www.gstatic.com/assistant/conversational/df-asdk/interactivecanvas/api/interactive_canvas.min.js"></script>This is needed to load the Interactive Canvas JavaScript library, which enables communication between your web app and your conversational Action.
Now before we touch the React app, let’s make sure that we can build and deploy the website!
In your terminal, make sure you’re in the root of your project folder, run:
yarn build && firebase deployYou’ll want to run firebase deploy to deploy both your functions and hosting.
Note: yarn build might be different for you — make sure you know how to run your build if what you’re doing is different from mine!
If everything is successful, you should see Hosting URL at the bottom. Open that up and you should see something like this:
And that would indicate that you’ve successfully deployed your website!
Connecting your deployed website to Actions on Google
Now that you have your deployed website and your AoG set-up, we need to turn on Interactive Canvas in your AoG.
Simply go back to your console and go to the “Develop” tab. Open up “Interactive Canvas” on the left side.
Click “Yes” for “Does your Action use Interactive Canvas?”
Make sure to add your Hosting URL to the “Set your default web app URL” section.
After this, open up “Main invocation” under the “Invocation” tab on the left side.
Make sure that under “Send prompts”, you have canvas and the url which should match your Hosting URL.
Next, we need to link up our webhooks to our front-end.
Linking Up Webhooks to ReactJS App
Synchronise Actions on Google Builder with your project folder
Remember all the YAML that you could see in AoG’s console? Yes, they’re all YAML files on their own.
And you can technically get all these files, view the code, and rewrite/add more logic and push it back to the console.
To do that, let’s first synchronise what you’ve done on your console to your local project folder.
In your terminal, make sure you’re at the root folder.
Make a new directory called sdk. Then move into that folder.
mkdir sdk
cd sdkHere, we want to initialise gactions in this part of the folder. We do this by doing:
gactions pull --project-id ${your project id}To get your project id, simply go to your console, click on the stacked three dots in the top right corner and click on “Project settings” and copy your Project ID.
For example, mine would look like:
To know that you’ve done it, your sdk folder should be filled with folders like actions, custom,settings and most importantly webhooks.
We’ll need this to connect our Interactive Canvas with our ReactJS application.
Connecting the Webhooks
In order for our AoG console to know which scene to trigger, we connect it through webhooks.
To do so, open up your codes and open up sdk > webhooks > ActionsOnGoogleFulfillment > index.js
Feel free to copy and paste the codes below into your index.js.
There are 3 key points in this index.js to take note:
- Whenever you want to call your webhook, you’ll need to do
app.handle("${webhook name}"... - As we’re using Interactive Canvas, we need to call:
conv.add(
new Canvas({
data: {
scene: "CATEGORY_BESTSELLERS",
},
})
);3. Whenever we want to pass data from our bot to our front-end, we pass it through the data object. You could even add params alongside scene and anything else you need.
Once you’re done setting up your webhook handlers, make sure to push the changes to your console by doing:
cd sdk
gactions pushNow, let’s begin building the ReactJS side of things because there’s still a critical part of starting up the Interactive Canvas on your front-end that we’re still missing.
Developing the ReactJS Components
In your src folder, feel free to structure it however you’re comfortable with. But our main focus will be connecting your front-end to your bot.
The key to note is that you’ll need to initialise InteractiveCanvas in the front-end.
Remember the <script> you added in public > index.html? Now we need to initialise it in our components.
(Feel free to do this in App.js or Canvas.js as I did. I decided to pull it out for simplicity)
In order to set-up and start the Interactive Canvas, we need to create a Canvas.js file. This file is pretty much the file that links all the states, pages and data from your Actions to your ReactJS pages.
Feel free to copy and paste this code into your Canvas.js.
A 3 key things you need to note here would be:
- Make sure that at the start of your codes, you call:
this.interactiveCanvas = window.interactiveCanvas; - Then as the component is mounting, we do 2 things:
(1) Set a margin top by getting it fromthis.interactiveCanvas.getHeaderHeightPx().then...(2) CallingsetCallbacks setCallbacksbasically ensures that:
(1) Our scenes and params are passed through fromActionsOnGoogleFulfillment>index.jsin the previously discussed section
(2) We register the callbacks by doingthis.interactiveCanvas.ready(callbacks);
Basically following the Interactive Canvas API here.
We’ll be skipping building the rest of the ReactJS components and pages. You can get my repository and pull it for yourself.
When you’re done building the rest of the components and changing the pages based on the if statement, remember to deploy your build files by running:
yarn build && firebase deploy --only hostingAnd that’s it for part 2! You should be able to link everything together successfully. And your bot should be able to change pages and views according to the webhook that is triggered.
In the third and final part, we will be exploring intricacies to the application such as:
- Adding mock data
- Passing params and making use of sessions throughout the page to keep track of what the user is doing
- Triggering onClicks through the Nest Hub
See you in the next and final part!
Extra Notes:
Note: Make sure that whenever you’re done developing your React app, to run
yarn build && firebase deploy --only hosting.And if let’s say you touched anything inside the
sdkfolder, you need tocdinto thesdkfolder and rungactions pushto keep your AoG console updated to your local changes. (You don’t need to run yarn build and firebase deploy here!)
Here’s the repository for the second part:
