Developing a skill for Alice and a website with authorization

In this tutorial, you will develop a skill for Alice and deploy a web app for creating, reading, and editing to-do lists using Alice, as well as for sharing such lists with other users on the website.

To deploy a project:

1. Set up your environment.
2. Create resources.
3. Set the project variables.
4. Deploy the project.
5. Register Alice’s skill.
6. Test the skill.

Set up your environmentSet up your environment

1. Download the archive with project files or clone the examples repository with Git.
2. Create a folder if you do not have any. For convenience, you can use a separate folder named alice-skill.
3. Install and initialize the following programs:
   • Yandex Cloud CLI.
   • YDB CLI.
   • Bash command interpreter.
   • AWS CLI.
   • jq.
   • Node.js.
   • Terraform.
4. To finalize the project, you will additionally need:
   • Go programming language
   • go-swagger
   • api-spec-converter

Create resourcesCreate resources

1. Create a bucket with restricted access in Yandex Object Storage.

2. Create an API gateway named gate-1. Save the ID and Default domain field values to use them in the configuration.

3. Create a database in serverless mode. Save the Endpoint field value from the Connection section. You will need it to set up your project.

4. Create an app in Yandex OAuth:

   1. Go to the service website and log in.

   2. Click Create new client.

   3. Specify the appropriate app name and upload an icon.

   4. Under Platforms, select Web services. Specify two Callback URIs:

      • https://social.yandex.net/broker/redirect.
      • https://<API_gateway_service_domain>/receive-token.

      Please note that the specified receive-token URL may be unavailable until the current specification is uploaded to the API gateway. The specification will be uploaded during project deployment.

   5. Under Permissions, expand the Yandex ID API (login) and select Access to user avatar (login:avatar).

   For more information about the Yandex OAuth features, see this article.

Set the project variablesSet the project variables

Configure the project using the values you got when creating your resources.

Create a fileCreate a variables.json file

The variables.json file contains the project deployment configuration. To create a file from the variables-template.json template, navigate to the project folder and run this command:

cp variables-template.json variables.json

In the variables.json file, set the project properties:

• folder-id: ID of the cloud folder.
• domain: API gateway service domain.
• oauth-client-id: ID of the app registered in Yandex OAuth.
• database-endpoint: Endpoint, the first part of the previously saved Endpoint field value (preceding /?database=), e.g., grpcs://ydb.serverless.yandexcloud.net:2135.
• database: Database location, the second part of the previously saved Endpoint field value (following /?database=), e.g., /ru-central1/r1gra875baom********/g5n22e7ejfr1********.
• yc-profile: Yandex Cloud CLI profile name.
• secure-config-path: Path to the secret file.
• storage-bucket: Name of the bucket you created for storing static data.
• gateway-id: API gateway ID.

Create a fileCreate a secure-config.json file

The secure-config.json file contains secrets. You can create it from the secure-config-template.json template. To do this, run the following command:

cp secure-config-template.json secure-config.json

Use the values from the variables:

• oauth_secret: Password of the app registered in Yandex OAuth.
• hash: Base64-encoded random 64-byte string (e.g., qrJagO5NVwOj0FeTmgYSwUN+XXkiQJMWifvrklF53wT55q80Xk8vmEB3kxhtpDnA1WDC893Z9Bh6QcqK********). You can generate a random value in the terminal using openssl rand -base64 64 | tr -d '\n'.
• block: Base64-encoded random 32-byte string (e.g., uwk0duFgn2nYyfu2VzJe+MnWKWQrfKaiZijI********). You can generate a random value in the terminal using openssl rand -base64 32 | tr -d '\n'.

Make sure the variables.json file contains the correct path to secure-config.json.

Deploy the projectDeploy the project

Transfer the project files to Yandex Cloud and update the configuration.

Apply a data schemaApply a data schema

To create tables in the database, run this command:

./upload_ydb_schema.sh

Upload the backend code to Cloud FunctionsUpload the backend code to Cloud Functions

Use Terraform to automate your operations. Before you start, initialize it.

To do this, in the folder with the app.tf configuration file, run the following command:

terraform init

Once Terraform is initialized, run the command by delivering the OAuth token value for Yandex Cloud authorization:

terraform apply -var-file ./variables.json -var yc-token=<OAuth_token>

As a result, Terraform will automatically create or update the required resources.

Upload the frontend code to Object StorageUpload the frontend code to Object Storage

To deploy the frontend web app, compile the static files and upload them to Object Storage.

1. Before doing that, however, make sure you have Node.js and the npm package manager installed.

2. Navigate to the frontend subfolder and perform the compilation:

   npm run build
   

   Result:

   npm run build
   
   > todolist@0.1.0 build
   > react-scripts build
   
   Creating an optimized production build...
   Compiled successfully.
   
   File sizes after gzip:
   
     75.93 KB  build/static/js/2.84be0fca.chunk.js
     23.26 KB  build/static/css/2.ef9168ec.chunk.css
     2.63 KB   build/static/js/main.d9e069c9.chunk.js
     776 B     build/static/js/runtime-main.676997b0.js
     402 B     build/static/css/main.e5cbab88.chunk.css
   
   The project was built assuming it is hosted at /.
   You can control this with the homepage field in your package.json.
   
   The build folder is ready to be deployed.
   You may serve it with a static server:
   
     npm install -g serve
     serve -s build
   

3. To upload the files to Object Storage, run this command:

   ./upload_static.sh
   

   Result:

   ./upload_static.sh
   upload: frontend/build/robots.txt to s3://frontent-statics/robots.txt
   upload: frontend/build/manifest.json to s3://frontent-statics/manifest.json
   upload: frontend/build/static/css/main.e5cbab88.chunk.css.map to s3://frontent-statics/static/css/main.e5cbab88.chunk.css.map
   upload: frontend/build/index.html to s3://frontent-statics/index.html
   upload: frontend/build/asset-manifest.json to s3://frontent-statics/asset-manifest.json
   upload: frontend/build/static/js/2.84be0fca.chunk.js.LICENSE.txt to s3://frontent-statics/static/js/2.84be0fca.chunk.js.LICENSE.txt
   upload: frontend/build/static/css/main.e5cbab88.chunk.css to s3://frontent-statics/static/css/main.e5cbab88.chunk.css
   upload: frontend/build/static/js/main.d9e069c9.chunk.js to s3://frontent-statics/static/js/main.d9e069c9.chunk.js
   upload: frontend/build/static/js/2.84be0fca.chunk.js to s3://frontent-statics/static/js/2.84be0fca.chunk.js
   upload: frontend/build/static/js/runtime-main.676997b0.js to s3://frontent-statics/static/js/runtime-main.676997b0.js
   upload: frontend/build/static/js/runtime-main.676997b0.js.map to s3://frontent-statics/static/js/runtime-main.676997b0.js.map
   upload: frontend/build/static/js/main.d9e069c9.chunk.js.map to s3://frontent-statics/static/js/main.d9e069c9.chunk.js.map
   upload: frontend/build/static/css/2.ef9168ec.chunk.css to s3://frontent-statics/static/css/2.ef9168ec.chunk.css
   upload: frontend/build/static/css/2.ef9168ec.chunk.css.map to s3://frontent-statics/static/css/2.ef9168ec.chunk.css.map
   upload: frontend/build/static/js/2.84be0fca.chunk.js.map to s3://frontent-statics/static/js/2.84be0fca.chunk.js.map
   

Update the API gateway configurationUpdate the API gateway configuration

To upload the current specification to API Gateway, run this command:

./update_gateway.sh

Result:

done (2s)
id: d5dc6k34opm********
folder_id: b1guj13dic14********
created_at: "2021-06-03T11:18:00.379Z"
name: gate-1
status: ACTIVE
domain: d5dm1lba80md********.i9******.apigw.yandexcloud.net
log_group_id: ckg57bweoekk********

Register Alice's skillRegister Alice's skill

Create a dialogCreate a dialog

1. Go to the Yandex Dialogs website and log in to the console.
2. Click Create dialog and select the Alice skill dialog type.
3. In the Skill name field, set To-do lists.
4. Under Backend, select Yandex Cloud function. From the list, select the todo-list-alice function you previously created in Cloud Functions.
5. Enable Use data storage in the skill.

Configure the other settings as you wish. For example, you can specify various word forms to activate the skill and select a voice or skill access type.

Learn more in this Yandex Dialogs article.

Configure authorization on the Alice pageConfigure authorization on the Alice page

1. Navigate to the Main settings tab and find the Account linking section.
2. In the Authorization line, click Create.
3. Enter the following:
   • ID and Application secret: ID and password you obtained when registering your app with Yandex OAuth.
   • Authorization URL: https://oauth.yandex.com/authorize.
   • Get token URL: https://oauth.yandex.com/token.
   • Refresh token URL: https://oauth.yandex.com/token.

To learn more about OAuth 2.0, see RFC 6749.

Add intentsAdd intents

1. Navigate to the Intents tab and click Create.
2. Add intents for each action possible in the dialog. The available intents are in the project's intents subfolder.
3. Enter the following:
   • Name: Any name that you want displayed in the interface.
   • ID: Intent ID identical to the filename in the intents folder.
   • Grammar: Grammar text identical to the contents of the file in the intents folder.

To learn more about intents, see this article on Alice's skills.

To complete the dialog creation, click Publish on the right.

Test the skillTest the skill

To debug the skill, use the Testing tab in the Yandex Dialogs console or one of the surfaces you selected when designing the skill.

In the consoleIn the console

Navigate to the Testing tab. You will see a chat with Alice on the left and an interaction protocol in JSON format on the right.

Below is a sample dialog:

Let me help you with your lists!

	Hi Alice. Create a Groceries list.

Done, I created a Groceries list.

	Add milk to Groceries.

Done, I added "milk" to Groceries.

	Add bread.

What list should I add "bread" to?

	Groceries

Done, I added "bread" to Groceries.

	Add eggs.

What list should I add "eggs" to?

	Groceries

Done, I added "eggs" to Groceries.

	Alice, tell me what's on the Groceries list.

Groceries:
1. milk
2. bread
3. eggs

Using a surfaceUsing a surface

To start a dialog, use any device or service supported by Alice.

On a websiteOn a website

In your browser, follow the URL specified in the Default domain field of your API gateway and log in. The My lists page will open. In any of the lists, you can add or remove items and grant other users access to the list.