ym88659208ym87991671
Создание дизайна в коде | Документация SmartMarket
Skip to main content

Создание дизайна в коде

Чтобы создать визуальный интерфейс для 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;

Тестирование интерфейса

  1. Создайте в SmartMarket Studio проект Code.
  2. В разделе Настройки проекта импортируйте созданный сценарий смартапа и включите Отправлять команду /start на запуск голосом.
  3. Создайте проект SmartApp типа Canvas App и свяжите его с проектом Code.
  4. Укажите в поле Хостинг фронтенда ссылку:
https://aml-canvas-app.prom.app.sberdevices.ru
  1. Протестируйте смартап.

Вы также можете посмотреть пример интерфейса, созданного с помощью Code — для этого скачайте готовый сценарий и запустите его по инструкции выше.

Обновлено 15 июля 2022

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней