Перейти к содержанию

Frontend

SmartApp frontend представляет из себя SPA-приложение, выполняемое во встроенном WebView/iFrame клиента "eXpress".

Разработка

Выбор технологического стека для разработки не ограничен. Например, можно использовать известные библиотеки/фреймворки React, Angular или Vue. В состав библиотек при сборке следует включить SmartApp SDK для обмена данными с клиентом "eXpress".

Отладка на веб-клиенте

Web 3.0

Самый удобный клиент для разработки и отладки — веб-клиент "eXpress". SmartApp frontend запускается в браузере внутри веб-клиента, а выводимые SmartApp сообщения отображаются в консоли браузера.

Для запуска отладки выполните следующие действия:

  1. Запустите SmartApp frontend локально. К примеру, он доступен по адресу http://localhost:3000 .
  2. Опубликуйте чат-бот на CTS.

  3. В настройках чат-бота скопируйте ID:

    Рисунок_1

  4. В веб-клиенте "eXpress" выберите пиктограма → О программе и нажмите несколько раз на аватар, чтобы открыть инженерное меню.

  5. В разделе "SmartApps" передвиньте переключатель "Включить режим отладки SmartApps" вправо и введите:

    • ID чат-бота в поля Bot Huid и SmartApp ID;

    • в поле SmartApp Url ввести адрес из п.1 и добавьте к нему ?platform=web:

    Рисунок_2

  6. Нажмите Установить параметры отладки.

  7. В списке чатов выберите опубликованный чат-бот из п.2.

    Откроется локально запущенный SmartApp.

Логи SmartApp

В консоль браузера выводится весь обмен данными между клиентом "eXpress" и SmartApp.

Для этого в веб-клиенте "eXpress":

  1. Выберите пиктограма → О программе и нажмите несколько раз на аватар, чтобы открыть инженерное меню.

  2. На вкладке Общее передвиньте переключатель "Собирать логи SmartApp" вправо, нажав на него:

    Рисунок_3

  3. Нажмите на пиктограма в основном меню.

  4. В открывшемся окне выберите SmartApp.

  5. Нажмите пиктограма в правом верхнем углу и выберите Логи :

    Рисунок_4

Отладка на iOS

iOS 3.7

На iOS 16.4 и выше есть возможность отладки запущенного SmartApp.

Примечание

Отладить можно только SmartApp frontend опубликованный на CTS. Нельзя отладить SmartApp запущенный локально на http://localhost.

Для отладки SmartApp выполните следующие действия:

  1. На устройстве с платформой iOS включите опцию "Веб-инспектор".
  2. Подключите устройство к компьютеру, на котором установлена ОС "macOS" и браузер "Safari", используя кабель USB или удаленное подключение по Wi-Fi. Или запустите симулятор из XCode.
  3. На устройстве с платформой iOS откройте "eXpress" версии 3.6 и выше.

  4. Нажмите пиктограма → Инженерное меню и включите опцию "Удаленная отладка SmartApp":

    Рисунок_5

  5. Откройте SmartApp в "eXpress".

  6. Откройте браузер "Safari".

  7. Перейдите в Разработка → iPhone (имя вашего девайса) → Выбрать нужную страницу.

    Если в строке меню нет пункта Разработка, выберите Safari → Настройки → Дополнения → Показывать меню "Разработка в строке меню".

Примечание

При блокировке устройства подключение разрывается. Восстановите соединение и повторите действия п.6.

Отладка на Android

Android 3.7

На Android версии 7.0 и выше есть возможность отладки запущенного SmartApp.

Примечание

Отладить можно только SmartApp frontend опубликованный на CTS. Нельзя отладить SmartApp, запущенный локально на http://localhost.

Для отладки SmartApp выполните следующие действия:

  1. На устройстве с платформой Android получите права разработчика.

  2. Включите отладку по USB. Если система запросит разрешение, согласитесь с условиями использования.

  3. На устройстве с платформой Android откройте "eXpress".

  4. Нажмите пиктограма → О программе. Нажмите несколько раз на логотип "eXpress", чтобы открыть инженерное меню.

  5. Перейдите в раздел "Features" и включите опцию "SmartApp remote debug":

    Рисунок_6

  6. Подключите устройство к ПК при помощи USB кабеля.

  7. Откройте браузер "Google Chrome" и перейдите по адресу chrome://inspect.

  8. В открывшемся окне поставьте отметку Discover USB devices.

    Если система запросит разрешение, согласитесь с условиями использования.

    Примечание

    Если статус подключения устройства все еще "Offline", или устройство не отображается в списке подключенных, то, не отключая устройства от ПК, выключите и снова включите опцию "Отладка по USB" (см. пп. 1-3).

    В списке устройств вы должны увидеть название модели своего девайса:

    Рисунок_7

  9. В "eXpress" откройте SmartApp.

    От момента запуска SmartApp до отображения его в окне браузера может пройти некоторое время.

  10. После того, как блок WebView отобразится в браузере, нажмите inspect, чтобы открыть окно отладки SmartApp:

    Рисунок_8