Чтобы создать визуальный интерфейс для Canvas App, вам необязательно создавать веб-приложение, вы можете сделать это с помощью AML-разметки в том инструменте, которым вы пользуетесь для проектирования смартапа: Code, SaluteJS Framework или SmartApp Framework.
Интерфейс сгенерируется с помощью дизайн-системы Plasma UI.
Проектирование c помощью AML
Чтобы создать визуальный интерфейс для определенного состояния смартапа, напишите код с помощью AML-разметки.
Затем сформируйте команду типа smart_app_data и укажите созданный код в массиве smart_app_data.
Пример параметров для создания поля, которое реагирует на ввод текста:
{
"type":"aml_render_page",
"payload":{
"content":[
{
"component":"TextField",
"props":{
"id":"myInputId",
"amlHandleEvents":[
"onChange"
],
"placeholder":"Мое поле ввода",
"defaultValue":""
}
}
]
}
}
Получение информации из смартапа
Когда пользователь вводит в поле текст, смартап отправляет в сценарий действие типа server_action.
Идентификатор действия содержится в параметре action_id в формате <имя обработчика из amlHandleEvents>_<идентификатор компонента из id>. Текст, введенный пользователем, содержится в параметре value. Например:
{
"name":"SERVER_ACTION",
"action":{
"action_id":"onChange_myInputId",
"parameters":{
"value":123456
}
}
}
Обработка действия
Обработайте действие в соответствии с инструментом, на котором вы разрабатываете смартап.
Пример для Code:
state: InputChangeHandler
event!: onChange_myInputId
script:
$session.myInputValue = $request.data.eventData.value;
Тестирование интерфейса
- Создайте в Studio проект Code.
- В разделе Настройки проекта импортируйте созданный сценарий смартапа и включите Отправлять команду /start на запуск голосом.
- Создайте проект SmartApp типа Canvas App и свяжите его с проектом Code.
- Укажите в поле Хостинг фронтенда ссылку:
https://aml-canvas-app.prom.app.sberdevices.ru
- Протестируйте смартап.
Вы также можете посмотреть пример интерфейса, созданного с помощью Code — для этого скачайте готовый сценарий и запустите его по инструкции выше.