Хитрости разработки смартапов для SmartMarket

Начиная с сентября 2020 года подразделение Сбера SberDevices развивает собственную платформу для разработки приложений, основанных на семействе виртуальных ассистентов (Сбер, Афина и Джой) или смартапов. Кроме того SberDevices предоставляет набор инструментов для разработки таких приложений - SmartApp Studio, SmartApp Code и другие, а также маркетплейс для загрузки и продажи приложений - SmartMarket.

Смартапы бывают двух видов: Chat App и Canvas App. В данной статье мы будем рассматривать второй тип. Canvas App - это обычное веб приложение, которое можно установить на одно из устройств SberDevices (Sber Portal, Sber Box, Sber Watch) и возможности которого расширены благодаря использованию виртуальных ассистентов. SmartApp можно сравнить с навыком в Алисе, но SmartApp предоставляет более широкий набор возможностей по взаимодействию: голосом, касанием, текстовым вводом и даже виртуальным геймпадом.

Есть хорошая статья, в которой подробно описана процедура локального тестирования смартапа. В этой статье я расскажу о локальном тестировании смартапа без необходимости приобретения устройства от Сбера.

Установка библиотек

Для локального тестирования смартапа в SberDevices была разработана библиотека assistant-client. assistant-client позволяет обмениваться сообщениями между смартап бекендом (webhook) и фронтендом.

Для начала установим библиотеку assistant-client на компьютере

$ npm i @sberdevices/assistant-client

Также установим React

npm install --save react react-dom react-scripts

Теперь нужно создать отдельный проект в SmartMarket Code и SmartMarket Studio. Здесь я не буду описывать процесс создания проекта - он довольно простой.

Для начала нам нужно связать проект в SmartMarket Studio и SmartMarket Code. Для этого нам потребуется вебхук смартапа в SmartMarket Code. Его можно получить в разделе Публикации в левом панели проекта в Code

Затем нужно открыть настройки проекта в Studio и вставить вебхук в поле Внешняя ссылка под заголовком Webhook смартапа. Также нужно выбрать тип проекта SmartApp API.

После каждой публикации версии смартапа при внесении изменений нужно обновить вебхук бекенда в Studio.

Кроме того в Studio нужно указать активационную фразу для смартапа. В поле Активационные имена в настройках проекта введем слово для активации (может быть имя проекта), которое будет использоваться для старта смартапа с помощью голосовой команды "Запусти <Активационное имя>".

В качестве активационного имени рекомендуется указывать слово на русском языке. Можно использовать целую фразу.

Для тестирования с помощью Assistant Client нам понадобится токен. Его можно найти в Studio. Переходим в настройки профиля, выбираем в левой панели Эмулятор и копируем токен.

Токен действителен в течении суток. После этого его необходимо обновить нажатием кнопки Обновить ключ.

Создание клиента

Сейчас создадим простое приложение на React

npx create-react-app test_app

Откроем файл App.tsx и добавим строки импорта необходимых модулей

import React, { FC, memo, useReducer, useState, useRef, useEffect } from 'react';
import { createSmartappDebugger, createAssistant, AssistantAppState } from '@sberdevices/assistant-client';

Нам нужно проинициализировать Assistant Client

const initializeAssistant = (getState: any) => {
  if (process.env.NODE_ENV === 'development') {
      return createSmartappDebugger({
           token: "<токен>",
          initPhrase: `Запусти <активационное имя>`,
          getState,
          nativePanel: {
              defaultText: 'Покажи что-нибудь',
              screenshotMode: false,
              tabIndex: -1,
          },
      });
  }

  return createAssistant({ getState });
};

Осталось только добавить такой код React:

export const App: FC = memo(() => {
    const assistantStateRef = useRef<AssistantAppState>();
    const assistantRef = useRef<ReturnType<typeof createAssistant>>();

    useEffect(() => {
      assistantRef.current = initializeAssistant(() => assistantStateRef.current);

      assistantRef.current.on('data', ({ action }: any) => { 
      });
    }, []);

    return (
      <div className="App">
        <header className="App-header">
          <h1>Title</h1>
        </header>
      </div>
    );
});

Теперь запустим фронтенд:

npm start

У нас откроется такой экран

Наше приложение активируется при старте. Мы можем нажать на зеленый лавашар и произнести голосом команду или нажать одну из кнопок. Разработку сценария на бекенде смартапа можно посмотреть в серии обучающих видео.

PS: Для лучшего понимания работы смартапов советую посмотреть видео команды СберДевайсы (видео, серия обучающих видео).

В заключение хотел бы сказать, что при возникновении проблемы при разработке смартапов можно обратиться в чат команды СберДевайсы в Телеграме. В этом сообществе можно быстро получить ответ на любые вопросы или предложить идеи по улучшению платформы. Всем удачи в разработке виртуальных ассистентов для SmartMarket!