Как подключить сбер салют

Обновлено: 25.04.2024

В сентябре 2020 года Сбер представил совершенно новую технологию «Салют». Это многофункциональный сервис с огромным спектром возможностей.

Что такое «Салют»: преимущества использования

Виртуальная система «Салют» представляет собой трех помощников, которые помогают экономить время. Человеку достаточно просто обратиться к нему с просьбой и она будет выполнена. К примеру, необходимо перевести деньги на счет или же пополнить мобильную связь: достаточно просто активировать помощника словом «Салют» и попросить сделать необходимое.

Компания создала три интеллектуальных разума: Сбер, Афина и Джой. У каждого свой голос и даже характер. Сбер (голос Даниила Щербакова)— обладает неплохим чувством юмора, а также может похвастаться широким кругозором. Афина (голос Татьяны Ермиловой) — собранная и настроена на помощь своему пользователю. Что же касается Джой (голос Насти Чернобровиной), то это веселый и очень эмоциональный помощник, который отлично справляется с бытовыми проблемами.

Сервис «Салют» может быть синхронизирован не только с телефоном, а так же с:

  • телевизором, поддерживающим функцию Smart;
  • ТВ-приставкой (к примеру, SmartBox, представленный также Сбером).

С помощью «Салюта» можно:

  • узнавать что-то новое;
  • научится разбираться в финансовых терминах;
  • узнавать погоду;
  • решать математические задачи и примеры;
  • записываться в салон или к доктору;
  • заказать продукты или авиабилеты и др.

В «Салют» можно добавлять все сервисы Сбера. Приложение бесплатное, а вот предложения, представленные экосистемой Сбера, стоят согласно тарифному плану.

Как активировать «Салют»

Если у пользователя уже есть аккаунт в СберОнлайн (важно знать личный логин и пароль), то и подключение займет несколько минут.

Чтобы активировать «Салют» понадобится:

После этого пользователь может самостоятельно настроить и синхронизировать приложение с другими устройствами.

Первое, что видит перед собой каждый — это главная страница. Внизу есть большая зеленая кнопка, с помощью которой можно сменить персонажа. Нажав на «Устройства» можно увидеть доступные для добавления устройства. На данный момент там есть:

  • SberPortal (это смарт-дисплей, представленный Сбером, с аккустикой и голосовым ассистентом);
  • SberBox (приставка для телевизора с пультом для управления и голосовым ассистентом);
  • Умная лампа (включает/выключает свет и меняет яркость);
  • Умная розетка Sber (все электроприборы будут включены или выключены по команде пользователя).

Также внизу есть пульт и вкладка «Профиль».

«Салют» для SberBox

SberBox — это телеприставка, которая подключается к телевизору, а управлять ей удобно с помощью сервиса «Салют». Девайс подойдет только для тех телевизоров, которые поддерживают HDMI (функция направлена на распознавание голосовых команд, позволяет смотреть видео, слушать музыку и играть в игры). Соответственно, нужен будет свободный доступ к Wi-Fi, чтобы использовать возможности девайса и сервиса максимально.

Подключается девайс очень просто, надо просто вставить кабель в разъем HDMI. После этого необходимо зайти в приложение на телефоне и в разделе «Устройства» подключить SberBox (сопряжение происходит по логину и паролю).

После подключения у пользователя в доступе появится более 145 каналов (20 из них будут бесплатными на постоянной основе). Остальные сервисы надо будет подключить (оплатив их тарифную стоимость), а если это было сделано ранее, то выполнив вход, например, в Okko, то кинотеатр будет доступен без дополнительных вложений.

Примечание! Цена на SberBox фиксированная и составляет 3550 рублей.

Так как «Салют» запустили не так давно (в сентябре 2020 года), то в нем еще есть над чем работать. Например, расширять возможности функционала. В любом случае новинка уже получила положительные отзывы и нашла своих клиентов.

ОНЛАЙН ЗАЙМЫ Быстро. Легко. Одобоение займа сразу - 24/7. Деньги у Вас через 10 минут. Получите одобрение кредита Онлайн - отправьте заявку

Почему не приходит СМС с паролем Сбербанк Онлайн и что делать

Большинство операций, совершаемых клиентами через десктопную версию сервиса Сбербанк Онлайн, требуют подтверждения. Оно представляет

Оценка недвижимости для ипотеки в Сбербанке: обязательно ли ее делать, как выбрать оценочную компанию и сколько стоит услуга

Экспертная оценка объекта недвижимости – неотъемлемый этап оформления ипотечного кредитного договора. Кроме того, необходимость

Карта Мастеркард Сбербанк: условия оформления и пользования, процентные ставки

Реалии современной действительности таковы, что без банковских карт человеку сложно чувствовать себя комфортно. Сбербанк

С помощью приложения Салют можно управлять SberPortal: отдавать голосовые команды, менять громкость, перемещаться по экрану, запускать фильмы, музыку и приложения. Для этого:


На экране нажмите . Приложение начнет поиск доступных устройств — дождитесь, когда поиск закончится, и выберите SberPortal из списка.

Управляйте SberPortal: перемещайте курсор по экрану, и нажимайте, чтобы запустить нужный сервис. С помощью кнопок сверху и снизу экрана можно отдавать голосовые команды, включать и выключать устройство, менять его громкость, возвращаться на предыдущий или домашний экран и переключаться на геймпад.

Тачпад. Водите пальцем в центральной области пульта, чтобы перемещаться по экрану телевизора или смарт-дисплея, и нажимайте, чтобы выбрать элемент на экране.


Играть с помощью геймпада

На SberPortal можно запускать игры: как из каталога приложений, так и из сервиса облачного гейминга SberPlay. Для управления к устройству можно подключить Bluetooth-геймпад или клавиатуру, но можно обойтись и без них — и воспользоваться встроенным в приложение Салют геймпадом.

Чтобы играть с помощью геймпада:


Чтобы играть в игру из каталога SmartMarket, перейдите на экран и выберите карточку нужной игры.


Если вы хотите играть в облачные игры из SberPlay, откройте экран , на нём выберите карточку игры или откройте магазин игр и запустите игру в нём.

В приложении Салют переключитесь на виртуальный геймпад: нажмите значок на экране пульта. Чтобы потом выйти из режима геймпада, нажмите вверху экрана геймпада и выберите .

В геймпад также встроены виртуальная клавиатура и мышь — они пригодятся, вы запускаете игру через SberPlay и вам нужно авторизоваться. Клавиатура и мышь автоматически становятся доступными, когда вы попадаете на форму авторизации. Чтобы открыть их, нажмите вверху экрана геймпада и выберите или .

Салют — это виртуальные ассистенты Сбер, Джой и Афина. Они живут в мобильных приложениях и на умных устройствах Сбера. У них разные голоса и характер, а значит вы легко найдёте ассистента, который подходит именно вам


Познакомьтесь с ассистентами Салют

В приложениях и на умных устройствах Сбера



Эмоции ассистентов

Ассистенты умеют радоваться, печалиться, смущаться, проявлять симпатию и беспокойство: лавашар меняет форму, цвет и характер движения, отражая настроение персонажей


Как позвать ассистента


Скажите «Салют»

Ассистенты доступны на любом устройстве Сбера, а также в приложениях СберБанк Онлайн и Салют.

Просто скажите «Салют», назовите имя ассистента и попросите его помочь. Ассистент может переключить музыку, перевести деньги с карты, рассказать о погоде и просто поговорить


Что могут ассистенты


Переведи 3000
рублей репетитору


Как у тебя дела?


Какая погода
на выходных?


Какой курс доллара?


Найди видео про
котиков в Интернете


Сколько будет корень
из 144?


Сколько рублей в 1500
фунтах?



Сколько времени
во Владивостоке?


Какой у меня баланс?


Какая самая длинная река в мире?


Установи таймер
на 5 минут


Что такое фьючерс?


Найди комедию для
всей семьи


Поставь будильник на 7


Где ближайший
банкомат?


Включи Первый канал


Запиши на стрижку


Поставь музыку для вечеринки

Каталог приложений — доступ к аудитории Сбера

Ваше приложение увидят миллионы пользователей. Оно появится там, где доступны виртуальные ассистенты Сбера


В сентябре 2020 г. Сбербанк переименовал себя просто в Сбер (т.н. ребрендинг), и на радостях запустил собственную платформу голосовых ассистентов под названием Салют. Особенностью Салюта является наличие сразу трёх голосовых ассистентов на выбор пользователей: Сбер — мужчина, стиль обращения на «вы», Афина — женщина, обращается также на «вы», и Джой — девушка с дружеским «ты».

Сбер (банк, не его тёзка — голосовой ассистент) открыл эту платформу для сторонних разработчиков, пригласив их делать для неё приложения, т.н. смартапы — аналог навыков голосовой помощницы Алисы, и учредив для них конкурс с весьма щедрым призовым фондом. В этом туториале мы рассмотрим как сделать смартап на Node.js, разместить его код в Яндекс.Облаке (используя функции), и, наконец, создать проект в Салюте, пройти там модерацию, и опубликовать наш смартап, чтобы он стал общедоступным.

А делать мы будем смартап под кодовым названием «Умные Мысли». Моя любимая тема, поскольку это уже третья статья. До этого были: Алиса приобретает навык (про «Умные Мысли» для Алисы), и Строим Telegram-бот в Яндекс.Облаке (про создание @SmartThoughtsBot — бота с таким же мирским именем). Итак, вот план на сегодня:

  1. Сначала мы склонируем репозиторий с кодом нашего смартапа, и установим необходимые зависимости. Вы также сможете получить дополнительную полезную информацию прямо в комментариях кода.
  2. Затем разместим наш код в Яндекс.Облаке, используя функции — т.н. технологии serverless.
  3. Потом мы создадим проект в SmartApp Studio — веб-интерфейсе для создания приложений для Салюта, отправим наш смартап на модерацию, и дождавшись положительного ответа — опубликуем его.
  4. И наконец, посмотрим как наш смартап работает — т.е. протестируем его.
  5. Но после конца, будет ещё и заключение. Здесь я поделюсь своим мнением и впечатлением о новой платформе. Но это легко можно будет пропустить, просто не дочитав пару абзацев в конце статьи.

1. Код смартапа

Cклонируйте GitHub-репозиторий, перейдите в корневой каталог проекта, и установите зависимости, как показано ниже:

Подразумевается, что на вашей рабочей машине (т.н. компьютере) должны быть установлены Node.js (версии не ниже 10), npm (по умолчанию устанавливается вместе с Node.js) и Git. Если чего-то не хватает — сначала установите, а потом продолжайте. Кроме того, потребуется редактор для работы с кодом. У меня это Visual Studio Code.

Код этого смартапа написан с использованием открытого SmartApp API и спецификации Yandex Cloud Functions, с которыми, я уверен, вы захотите познакомиться. После развёртывания, примерно вот так этот проект будет выглядеть у вас.

Код смартапа

Обратите внимание, что код испещрён комментариями, словно шумерские таблички клинописью. Думаю, что читать различные пояснения удобнее в контексте кода, чем поочерёдно глядеть то в код, то в текст статьи. Внесите в проект какие-нибудь изменения, например, в файл /src/lexicon-formal — где собраны фразы смартапа с обращением на «вы» для Сбера и Афины, или в файл /src/lexicon-unformal — где фразы с обращением на «ты» для Джой. После этого сделайте ZIP-архив, в который включите: файл index.js, каталог с файлами src, и каталог с файлами node_modules. Этот архив мы скоро «зальём» в Яндекс.Облако.

2. Яндекс.Облако

Перейдите в Яндекс.Облако. Если вы с ним ещё незнакомы — следуйте там инструкциям для создания своего платежного аккаунта и прочих первоначальных настроек. В своей статье Алиса в стране Битрикс я уже подробно касался всего этого, поэтому, чтобы здесь не повторяться — отсылаю читателей, которым надо больше информации на эту тему, к этой своей статье. Итак, в Яндекс.Облаке выбираем слева в меню Cloud functions, и нажимаем кнопку Создать функцию. Откроется страница создания функции.

Заполняем поля Имя и Описание и нажимаем на кнопку Создать. Теперь запустится мастер создания функции.

Выбор языка

Заполнение полей функции

На этом шаге мастера выберите опции и заполните поля, показанные на скриншоте, следующим образом:

Создана новая функция

Здесь надо включить переключатель Публичная функция на ON, т.е. сделать так, чтобы Салют мог её без проблем вызывать. Ссылку для вызова и Идентификатор функции держите в тайне, поскольку публичную функцию может вызвать любой, а платить будете вы. Запишите себе на манжете Ссылку для вызова — она нам очень скоро потребуется.

3. Создание проекта для Салюта

Вошли. В моём аккаунте мы видим уже созданный и пока единственный смартап, кодом и способом создания которого я с вами здесь и сегодня делюсь. Кнопочка Изучить документацию вам, вероятно, понадобится в первую очередь, но для целей нашей статьи, мы всё же нажмём сейчас на Создать смартап.

Список смартапов

На изображении видно, что под названием смартапа имеются надписи Webhook и Запущено. Первая надпись говорит о том, что наше приложение работает на стороннем сервисе (у нас это Яндекс.Облако), а вторая — что приложение опубликовано (я бы так и написал вместо «Запущено»). Перейдём же к созданию своего смартапа. Вводим название (дублировать нельзя, поэтому выберите своё, например, «Мудрые фразы»). Затем выберите Chat App (да, там есть ещё тип Canvas App и в планах, по-видимому, Native App, но сегодня мы будем делать именно с Chat App, как более простым в изготовлении, а об остальных типах — почитайте в документации).

Выбор типа смартапа

Затем в разделе страницы Выбор инструмента, выберите Есть готовое приложение (и это абсолютная правда), а в поле Webhook вставьте Ссылку для вызова нашей функции в Яндекс.Облаке, которую вы совсем недавно записали на своём манжете.

Ввод вебхука

Ну и наконец, нажмите на кнопку Создать смартап, после чего сгенерируется новый проект, а на странице Параметры вы должны увидеть нечто похожее на изображенное ниже. Добавьте описание, заполните другие поля, и смело отправляйте свой новый смартап на модерацию. Но знайте: если не примут по причине однотипности с уже имеющимся приложением — какую-либо ответственность за это я нести отказываюсь. Однако, в любом случае — примут или не примут, подали вы смартап на модерацию или нет — в вашем аккаунте ваш собственный смартап с этого момента уже будет работать! Но об этом чуть ниже.

Модерация

Обратите также внимание, что вверху на вкладке Каталог присутствует бейджик скоро. Если вы попытаетесь разместить иконку и скриншоты смартапа — ничего не выйдет. Когда я подавал свой смартап на модерацию в первой половине ноября 2020 г., после его принятия, сотрудник (возможно это также и модератор в одном лице) просил прислать иконку по почте, а за скриншоты вообще ничего не говорил. Но зато говорил, что скоро такое положение дел изменится, и всё заработает полноценно. Будем надеятся.

Каталог смартапов

4. Тестирование

Пришло время проверить наш смартап в деле. Установите мобильное приложение СБЕР Салют для Android или СБЕР Салют для iOS. Это приложение главным образом предназначено для управления телевизионной приставкой SberBox, но даже без приставки в нём можно полноценно общаться с голосовыми ассистентами, и запускать смартапы сторонних разработчиков. Для этого откройте на своём смартфоне приложение СБЕР Салют, войдите под своим Сбер ID — именно тем ID, под которым вы залогинены в SmartApp Studio! Нажмите внизу на круглую иконку, символизирующую голосового ассистента, и прослушайте его приветствие (ассистентом по умолчанию там выбран Сбер). Затем скажите: «Включи. » или «Запусти. » и произнесите название, которое вы дали своему смартапу. Повторяю: вы можете тестировать свои неопубликованные смартапы, если Сбер ID, с которым вы вошли в мобильное приложение СБЕР Салют тот же самый, что и Сбер ID, с которым вы входили в SmartApp Studio, когда создавали свой смартап. Если вы ещё ничего своего не создали, но уже хотите посмотреть, что в реальности производит программный код, который вам здесь предлагают, скажите ассистенту: «Включи Умные Мысли». Запустится простой смартап, который позволит вам немного с ним пообщаться. Обратите внимание, что в Салюте не обязательно говорить слова «смартап» или «навык», как это необходимо при общении с Алисой, например: «Включи смартап Умные Мысли», или «Запусти навык Умные Мысли». Эти слова здесь можно опускать, что делает общение с голосовым ассистентом более естественным, а значит приятным.

Умные мысли запущены

Когда немного пообщаетесь со Сбером (ассистентом), скажите: «Позови Афину». А затем: «Позови Джой». Убедитесь, что каждый из них имеет разный стиль общения: кто-то — на «вы», а кто-то — на «ты». Это значит, что ваш смартап (или Умные Мысли) эту «фичу» Салюта корректно обрабатывет.

5. Заключение

Очевидно (по крайней мере мне), что платформа Салют, находится ещё в детском или, в лучшем случае, отроческом возрасте. Если сравнить те же Умные Мысли — здесь и у Алисы — у Алисы будет «покруче» — там ещё и музыка, и картинки. В Салюте всё это недоступно. Говорят, что пока. И это похоже на правду — уж с очень большой энергией и напором там взялись за голосовых помощников! Кроме того, в Салюте организована необычайно активная и оперативная поддержка для независимых разработчиков — часто просто в реальном времени в Telegram-канале SmartApp Studio Community & Support. Подозреваю, что Сбер (банк) задался целью в самое ближайшее время стать в России номером один в рыночной нише голосовых ассистентов. Поэтому, если вы понимаете что такое т.н. «окна возможностей» и немного авантюристичны по своей природе — можете подключаться к процессу. Работать на Салют ещё трудно, но уже реально.

На сегодня это всё. Другие материалы следуют. Кому подобное читать интересно — подписывайтесь на уведомления о новых публикациях. Подписаться можно на этом сайте (кнопка Подписаться внизу), или на Telegram-канал IT Туториал Захар, или на одноимённое сообщество в VK, или Twitter @mikezaharov.


В сентябре 2020 года Сбер анонсировал семейство виртуальных ассистентов:

Сбер — мужской голос. Общается официально, к пользователю обращается на "Вы";

Афина — женский голос. Общается официально, к пользователю обращается на "Вы";

Джой — женский голос. Общается неофициально, к пользователю обращается на "Ты";

Тогда же запущен инструментарий разработчика SmartApp Studio - интерфейс для размещения собственного SmartApp в платформе SmartMarket.

SmartApp (смартап или в простонародии навык) — это приложение, которое расширяет возможности виртуального ассистента и может дать пользователю не только красивый интерфейс, но и множество способов взаимодействия с ним: голосом, касанием, текстовым вводом, пультом и даже виртуальным геймпадом.

В SmartApp Studio собраны инструменты для создания смартапа:

Graph — это визуальный конструктор для создания смартапов. Полезен тем разработчикам у которых нет опыта в программировании;

Code — среда разработки на языках SmartApp DSL и JavaScript. Для тех кто уже имеет опыт в программировании;

API — возможность вынести свой навык за пределы платформы;

24 сентября для сторонних разработчиков Сбером была запущена группа в ТГ @smartmarket_community. 3-го октября я сам присоединился к этой группе.

Chat App - самый обычный и привычный сейчас тип. Текстовый чат между навыком и пользователем;

Canvas App - графический интерфейс. Пользователь взаимодействует с веб-интерфейсом;

Native App - Android-приложение;

Provider App - для нативного подключения контента и услуг;

Прочитав, к тому моменту, совсем скудную документацию всё же решил попробовать развернуть свой Chat App на SmartApp API.
Хоть я по профессии не программист, но у меня уже были свои навыки на другой платформе и API обеих платформ имеет сходство.
Мои навыки работают как раз по API, так как он даёт большую гибкость, ведь всё в твоих руках.

Что сразу понравилось

Не стану описывать процесс портирования навыка, так как это уже даже в документации есть (плюс можете посмотреть вот этот пример), а лишь опишу некоторые вещи, которые я тогда для себя отметил:

Голос выбирает ПОЛЬЗОВАТЕЛЬ, а не разработчик. Моё мнение как раз такое же, что выбор должен быть за пользователем. Ведь это он взаимодействует с ассистентом и навыком и ему лучше знать какой голос ему комфортнее слушать. Более того, голос ассистента можно сменить налету (даже внутри смартапа) просто позвав нужного вам ассистента. Для этого нужно сказать "позови " и всё. Узнать какой голос используется пользователем можно из объекта character.

У каждого ассистента не только свой голос, но и своя цветовая гамма.

auto_listening - возможность попросить ассистента включать или не включать микрофон после того как он озвучит ответ. Очень полезная штука.

emotion - возможность анимировать иконку ассистента. На текущий момент уже доступно 22 эмоции.

Возможность разбивать текст на экране на несколько блоков (bubble) для улучшения визуализации информации.

Для тестирования смартапов можно использовать приложение Сбер Салют (App Store, Google Play) на смартфоне или тестировать смартапы прямо на устройствах SberBox и SberPortal.
Даже если смартап ещё не прошел модерацию, то всегда есть возможность запустить его на том устройстве где вход выполнен под тем же Сбер ID, который использовался при создании навыка в SmartApp Studio. Также относительно недавно появилась возможность давать доступ к неопубликованному смартапу и другим людям. Для этого нужно просто скинуть им сгенерированную ссылку.

Совсем недавно была добавлена ещё одна классная фишка, которая тоже стала отличительной особенностью платформы - asr_hints.
Возможность подсказывать системе ASR (Automatic Speech Recognition) чего смартап ожидает от пользователя и исходить из этого при построении гипотез:

С подсказками система распознавания работает значительно лучше. Проверено - работает!

Chat App

Выбор chat app был обусловлен тем, что на момент запуска платформы сanvas app ещё не был доступен для сторонних разработчиков.
Как сейчас пока ещё недоступен Native App (но уже скоро должен и он быть в доступе).

Не мало времени пришлось потратить на фразы смартапа, которые озвучивает ассистент. Ведь голос ассистента, а значит его пол, выбирается пользователем, а не разработчиком. Плюс к этом обращения на "Вы/Ты" тоже заняло некоторое время, но вот уже 12.10.2020 мой первый chat app прошёл модерацию, а затем был добавлен в каталог приложений.

chat app

chat app

Но, на тот момент у chat app не было возможности проигрывать звуки или показывать картинки. Поэтому я очень ждал запуска и возможности использовать canvas app, так как там такой проблемы не существовало. И вот уже в конце октября canvas app стал доступен для сторонних разработчиков.

Что такое Canvas App?

Canvas App – это web-приложение (среда исполнения браузер), управление которым реализуется через assistant-client.
Canvas App открывается внутри WebView (Android, iOS). HTML, CSS и JS (это frontend) загружается непосредственно в WebView на клиенте (SberBox, SberPortal, мобильное приложение Сбер Салют).

Чтобы не рисовать и не дублировать картинку-схему я взял её из этой статьи:


Простыми словами как это работает:

пользователь запускает смартап;

его запрос через платформу прилетает в webhook смартапа (который был указан в настройках SmartApp Studio) в виде текста;

параллельно этому устройство пользователя загружает страницу (которая также была указан в настройках SmartApp Studio — Frontend Endpoint);

webhook и frontend между собой «общаются» посредством assistant-client;

frontend, реагируя на команды от webhook, меняет что-то на экране пользователя, а также сам может передать что-то на webhook, если пользователь совершит некое действие на странице;

Вот так выглядит создание canvas app (с использованием API) в SmartApp Studio:


Что внутри у canvas app?

Webhook может передать данные в frontend с помощью объекта command:

Данные, которые указаны значении ключа smart_app_data, будут переданы на frontend. Порекомендую обмениваться именно объектами, а не строками.

версия для ReactJS (пример использования можно увидеть тут)

версия для подключения на странице через script (пример можно увидеть тут)

Если ReactJS Вам не знаком, то самый быстрый способ подключить и попробовать assistant-client на frontend это использовать script:

Такой способ подключения тоже был добавлен позднее запуска canvas app и Вы можете о нём не знать, но теперь он есть.
В этом примере подключение ReactJS нужно для работы самого assistant-client.

Как было сказано ранее assistant-client это "мост" между webhook и frontend и он не только обеспечивает работу canvas app, но и даёт нам возможность локального тестирования своих canvas app прямо в браузере на своём компьютере без использования SberBox, SberPortal или приложения Сбер Салют.Assistant-client как бы эмулирует конечное устройство пользователя в вашем браузере.

Добавим на страницу в body:

И если Вы всё сделали правильно, то открывшись страница запустит "мост" с платформой и Ваш смартап.

Ваш webhook получив запрос отправит smart_app_data и Вы увидите его содержимое на своём экране в div с id "command":


Вместо "покажи что-нибудь" можно ввести любой текст и он отправится на webhook точно так же если бы мы сказали это голосом.

ac.on('start'. ) используется только на старте смартапа. Там мы получаем начальные данные. Например, какой ассистент используется пользователем и smart_app_data от нашего webhook.

Далее всё будет приходить в ac.on('data'. ).

ВАЖНО:

Помните, что assistant.createSmartappDebugger используется ТОЛЬКО для тестирования. Во всех остальных случаях должен использоваться assistant.createAssistant.

Так наша страница стала реагировать на данные, которые получены от webhook в ac.on('data'. ) и в функции processData вы можете их обрабатывать и менять что-то на странице в зависимости от пришедших данных. Например проиграть звук (с помощью Audio()) или отобразить картинку/видео.

Теперь нужно сделать обратную связь от frontend к webhook. Нужно это для того, чтобы мы смогли обработать какое-то действие пользователя на этой странице.
Например нажатие на кнопку. В приложении Сбер Салют и на Sberportal пользователь может нажать на кнопку пальцем (touch), а на SberBox пультом.

Добавляем кнопку в body страницы:

В script делаем обработчик по нажатию этой кнопки с отправкой на webhook команды (для примера) в виде названия id элемента кнопки:

В canvas app ограничений практически нет (на сегодняшний день известно лишь об ограничениях на использование localstorage, а также камеры и микрофона устройства).
Для одного из своих canvas app я даже применил websocket и это работает. Проблем с созданием многопользовательских сетевых canvas app у Вас не должно возникать.
Поле для вашего творчества практически безгранично.

Исходный код примера, который описан мной выше, можно скачать на github.
Отмечу, что благодаря существованию github pages Ваш frontend может быть размещён на github.

Так я создал canvas версию для своего chat app и при этом webhook у них один и тот же.

canvas app

canvas app

Очевидно, что canvas app уже совсем другой уровень взаимодействия с пользователем и делает смартап более реалистичным.

Помните, что смартапы типа canvas app должны корректно отображаться на разных устройствах (SberBox, SberPortal и другие). Для этого необходимо проверять смартап на следующих разрешениях: 559x568, 768x400, 959x400, 1920x1080.
Настроить и протестировать эти разрешения можно в Chrome на вкладке Devices.

Планы

Мои дальнейшие планы это не только создать ещё несколько canvas app, но попробовать монетизировать смартап. SmartMarket предоставляет возможность встроить в смартап приём платежей от пользователей посредством API.

Заключение

В заключении хочу сказать несколько вещей:

при отладке canvas app не забывайте посматривать в консоль браузера (F12);

клиенты (устройства) кешируют страницу и поэтому рекомендую всегда выводить на экран номер версии;

на данный момент canvas app нельзя запустить только в приложении СберБанк Онлайн, но вскоре эта возможность появится и там;

стали появляться первые видео уроки от Сбера;

есть система тикетов где Вы можете заявить о проблеме или сделать запрос на новый функционал;

есть Community roadmap где можно посмотреть статусы тикетов;

напомню про само сообщество - @smartapp_studio;

Хочу сказать спасибо команде SberDevices за открытость (особенно за общие встречи с сообществом в zoom) и конечно за то, что прислушиваетесь к мнению сообщества. Это безусловно ваше преимущество перед другими.

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

Автор статьи

Куприянов Денис Юрьевич

Куприянов Денис Юрьевич

Юрист частного права

Страница автора

Читайте также: