Developing for the Google Assistant using Typescript and Amazon Web Services

Markus Riegel
7 min readJan 2, 2018

--

A comprehensive guide on how to create an app for the Google Assistant using Dialogflow, AWS Lambda and TypeScript.

Google Home Mini in my living room

[Edit: This article was written for the Actions on Google NodeJS SDK v1. The Integration with v2 doesn’t require the use of express anymore. I suggest following the official guide. You can also take a look at SplatTim which has been migrated to v2 since. (Thanks Corey Cole for pointing that out)]

By building apps for the Google Assistant you can extend its functionality with your own conversation and provide information from your API. This guide directs you through the process of creating a simple app with Dialogflow and AWS Lambda and setting up all services and accounts you might need along the way.

The setup for this stack is more complicated then using Firebase Cloud Functions. There could be many reasons to prefer AWS Lambda though. If you’re located in Europe, for example, Google discourages you from using their Cloud Platform services for hobby projects [Edit: Since January 19th you can now use Google Cloud as a private person in Germany]. And with this guide, the additional setup should be done quickly!

Dialogflow

Dialogflow is a service by Google that allows you to setup an AI based conversational interface in a simple way. You provide Dialogflow with some examples for the text or speech input and it’ll do the rest for you. I’ll give you the short version on how to get started. But you can find an in-depth guide on how to plan and setup a conversational app on the Actions on Google website.

Setting up your Dialogflow agent

Go to the Actions on Google console and create a new project. On the following screen, choose Dialogflow to build your app: Click the Build button and then Create Actions on Dialogflow.

Click create to save your agent.

On the left, click on the + icon next to Intents. Add Do something with the number 23 under User says and confirm with enter. 23 should automatically be detected as a parameter named number.

Enter demo_action as the action name. Check required for the parameter number. Click save.

That’s it for now. Let’s continue with the rest of the setup before connecting the fulfillment app to Dialogflow.

Creating a user on AWS

Sign up for Amazon Web Services or use your existing account to log in. Amazon will ask for your credit card. You will only be billed on usage and Amazon has a free tier for new users which should be more than enough to start your project.

Go to the Identity and Access Management service and add a new user for this project. Select Users from the side bar and click the button Add User.

Check Programmatic access and AWS management console access, enter a password and uncheck Require password reset.

In the next step add the following permission under Attach existing policies directly:

  • AWSLambdaFullAccess
  • AmazonAPIGatewayAdministrator
  • IAMFullAccess

Serverless also requires permissions in addition to that. Click Create policy and select CloudFormation as services. Add the following actions:

  • DescribeStackEvents
  • DescribeStackResource
  • CreateStack
  • UpdateStack
  • ValidateTemplate

AWS advises you to restrict access to a specific ARN (an AWS resource). To keep things simple use the following ARN, you can add e.g. more environments later on.

  • us-east-1 as Region. (If you choose another you will have to adjust the Serverless settings too)
  • Account: Enter your account ID. If you don’t have it at hand, click on your user name in the top navigation bar, then click My Account and you’ll find it.
  • Stack name: For now this should be your project name followed by -dev, e.g.: my-project-dev
  • Id: Check Any

Click Review policy, name and create the policy.

Now, go back to the browser tab where you’ve been creating the user, search for the policy name that you just entered and add that policy. And click Next: Review, review and create the user.

Important: Note or download the credentials after creating the user. You will need the Access key ID as well as the Secret Access key later on.

Serverless and TypeScript

Serverless is a tool that makes deploying and managing apps build on AWS Lambda very convenient. It takes away a lot of cumbersome steps you’d otherwise had to do yourself.

Typescript is a superset of JavaScript. The language adds optional types to Javascript that allow for things like interfaces, static type checking or refactoring. Having these additional conveniences is especially valuable when writing server-side code.

Serverless Setup

First install Serverless and TypeScript via npm.

$ npm install -g serverless
$ npm install -g typescript

In your project directory create a new npm project and a serverless app with the aws.nodejs template.

$ npm init
$ serverless create --template aws-nodejs

Now configure Serverless to use the AWS access key that was generated when creating the AWS user.

$ serverless config credentials --provider aws --key YOUR_ACCESS_KEY_ID --secret YOUR_SECRET_KEY

The following two Serverless plugins compile TypeScript to JavaScript automatically and allow you to test your app offline.

$ npm install serverless-offline --save-dev
$ npm install serverless-plugin-typescript --save-dev

Open serverless.yml and change service to the name of your project, e.g. my-project. Then add the plugins to serverless.yml.

Add custom exclude/include rules to the serverless.yml. Note that node_modules is not excluded. Serverless will take care of removing development dependencies when packaging the app.

Modify the function in the serverless.yml. Note that the method is post.

Next initialize TypeScript and install types for aws-lambda.

$ tsc --init
$ npm install @types/aws-lambda --save-dev

Configure the tsconfig.json. You want to change the target to es6 because it’s supported by Lambda and to exclude node_modules. Everything else is up to you. But you can not change rootDir or outDir options when using serverless-plugin-typescript. Here is an example of a basic tsconfig.json.

Creating the DialogflowApp with the Actions on Google SDK

The DialogflowApp from the Actions on Google SDK expects an express-like Request and Response object on initialization. This is not compatible with the parameters of an AWS Lambda function. Fortunately, serverless-http provides the necessary middleware for this case. Let’s install all the dependencies that we’re going to need.

$ npm install serverless-http --save
$ npm install express --save
$ npm install body-parser --save
$ npm install actions-on-google --save
$ npm install @types/actions-on-google --save-dev

Rename handler.js to handler.ts and replace its content with the following code. This file will contain the wrapper for our app. There will be errors because the app itself is added in the next step.

Now create the subfolder src and the file app.ts within. This file will initialize the DialogflowApp and add Actions later on.

Create the Action

The Intent created earlier in Dialogflow triggers the Action demo_action with the argument number. We’ll now create the counterpart in our fulfillment app which will take care of modifying the user input.

Create a new folder src/actions and the file DemoAction.ts within. This file has to export two things: a constant name that holds the identifier and a function handler which can handle the Action.

app.tell() is the simplest way to respond. Take a look at the DialogflowApp documentation for creating carousels, lists and more.

Next, add the Action to the app.ts file created earlier.

That’s it! Deploy your fulfillment app.

Warning: This counts as an request made on your AWS account and may incur a charge.

$ serverless deploy

After deploying Serverless will output the url of the function. Note that down because we’ll need it for the next step.

Connect Dialogflow with the fulfillment app

Go back to the Dialogflow console. On the left, select Fulfillment and enable Webhook. Enter the url from the previous step. Scroll down and click Save.

Navigate to your Intent and click on Fulfillment at the bottom of the page. Check use webhoock.

That’s it. Your done. If you enter “Do something with the number 8” on the top right (Try it now) you should get your response from the fulfillment app.

Have fun building your Google Assistant App!
Got a question? Drop it below!

--

--