Developing a skill for Alice and a website with authorization
In this scenario, you will develop a skill for Alice and deploy a web app for creating, reading and editing to-do lists with Alice's help, as well as for sharing the lists with other users on the website.
To deploy a project:
- Prepare the environment.
- Create resources.
- Set the project variables.
- Deploy the project.
- Register Alice's skill.
- Test the skill.
Prepare the environment
- Download the archive
with project files or clone the examples repository using Git. - Create a folder if you do not have any. For convenience, you can use a separate folder named
alice-skill
. - Install and initialize the following programs:
- To finalize the project, you will additionally need:
- The Go programming language
. - The go-swagger
utility. - The api-spec-converter
utility.
- The Go programming language
Create resources
-
Create a bucket with restricted access in Yandex Object Storage.
-
Create an API gateway named
gate-1
. Save the ID and Default domain field values from the General information section to use them in the configuration. -
Create a database in Serverless mode. Save the value of the Endpoint field from the Connection section. You will need it when setting up your project.
-
Create an app
in Yandex OAuth:-
Go to the service website
and log in. -
Click Create new client.
-
Select the desired name for the client app and upload an icon.
-
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 the project's deployment. -
Under Permissions, expand Yandex ID API (login) and select Access to user avatar (login:avatar).
For more information about the Yandex OAuth features, see the documentation
. -
Set the project variables
Configure the project using the values you got when creating your resources.
Create a variables.json file
The variables.json
file contains the project deployment configuration. To create a file from the variables-template.json
template, go to the project folder and run the command:
cp variables-template.json variables.json
Set the project parameters in the variables.json
file:
folder-id
: ID of the cloud folder.domain
: API gateway service domain.oauth-client-id
: ID of the client app registered in Yandex OAuth .database-endpoint
: 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
: ID of the API gateway.
Create 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
Substitute the values from the variables:
oauth_secret
: Password of the client app registered in Yandex OAuth .hash
: Base64-encoded random 64-byte string, e.g.,qrJagO5NVwOj0FeTmgYSwUN+XXkiQJMWifvrklF53wT55q80Xk8vmEB3kxhtpDnA1WDC893Z9Bh6QcqK********
.block
: Base64-encoded random 32-byte string, e.g.,uwk0duFgn2nYyfu2VzJe+MnWKWQrfKaiZijI********
.
You can generate random values at generate.plus
Make sure the variables.json
file contains the correct path to secure-config.json
.
Deploy the project
Transfer the project files to Yandex Cloud and update the configuration.
Apply a data schema
To create tables in the database, run the command:
./upload_ydb_schema.sh
Upload the backend code to Cloud Functions
Use Terraform to automate your operations. Before you start, initialize it.
To do this, go to the folder with the app.tf
config file and run the command:
terraform init
Once Terraform is initialized, run the command by delivering the OAuth token value for authorization in Yandex Cloud:
terraform apply -var-file ./variables.json -var yc-token=<OAuth_token>
As a result, Terraform automatically creates or updates the required resources.
Upload the frontend code to Object Storage
To deploy the frontend web app, compile static files and upload them to Object Storage.
-
Before doing that, make sure you have Node.js and the npm package manager installed.
-
Go 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
-
To upload the files to Object Storage, run the 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 configuration
To upload the current specification to API Gateway, run the 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: d5dc6k87opms********.apigw.yandexcloud.net
log_group_id: ckg57bweoekk********
Register Alice's skill
Create a dialog
- Go to the Yandex Dialogs
website and log in to the console. - Click Create dialog and select the Alice skill dialog type.
- In the Skill name field, set To-do lists.
- Under Backend, select Yandex Cloud function and choose the
todo-list-alice
function that you previously created in Cloud Functions from the list. - Enable Use data storage in the skill.
Set the other parameters as you wish. For example, you can specify different word forms to activate the skill and choose a voice or skill access type.
Learn more in the Yandex Dialogs documentation
Configure authorization on the Alice page
- Go to the Main settings tab and find the Account linking section.
- In the Authorization line, click Create.
- 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
.
- ID and Application secret: ID and password you obtained when registering your app with Yandex OAuth
For more information about OAuth 2.0, see RFC 6749
Add intents
- Go to the Intents tab and click Create.
- Add intents for each action that is possible in the dialog. The available intents are in the project's
intents
subfolder. - Enter the following:
- Name: Any name that you want to be displayed in the interface.
- ID: Intent ID that is the same as the filename in the
intents
folder. - Grammar: Grammar text that is the same as the contents of the file in the
intents
folder.
For more information about intents, see the documentation for Alice's skills
To complete the dialog creation, click Publish on the right of the page.
Test the skill
To debug the skill, use the Testing tab in the Yandex Dialogs
In the console
Go 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 Grocery list
Done, I've created the "grocery" list
Add milk to the Grocery
Done, I've added "milk" to the "grocery"
Add bread
What list should I add "bread" to?
Grocery
Done, I've added "bread" to the "grocery"
Add eggs
What list should I add "eggs" to?
Grocery
Done, I've added "eggs" to the "grocery"
Alice, tell me what's on the Grocery list
grocery:
1. milk
2. bread
3. eggs
Using a surface
To start a dialog, use any device or service supported by Alice
On the website
In your browser, follow the URL specified in the Default domain field of your API gateway and log in. The My lists page opens. In any of the lists, you can add or remove items and grant other users access to the list.