что такое приложение сбер салют
— Салют, Сбер! Переведи деньги
— Салют, Сбер!
Переведи деньги
Переведи деньги» src=»https://www.sberbank.ru/static/images/prod_product/2021_11/1635848520000_9521_teaser_teaserImageUrl.jpg?_=1635848538615″>
— Салют, Сбер!
Переведи деньги
Переведи деньги» src=»https://www.sberbank.ru/static/images/prod_product/2021_11/1635848520000_9521_teaser_teaserImageUrl.jpg?_=1635848538615″>
— Салют, Сбер!
Переведи деньги
Переведи деньги» src=»https://www.sberbank.ru/static/images/prod_product/2021_11/1635848520000_9521_teaser_teaserImageUrl.jpg?_=1635848538615″>
Лучше перевести голосом, когда.
Сказать пару слов проще, чем делать пять кликов
Как перевести деньги голосом
Шаг 1. Откройте приложение СберБанк Онлайн и нажмите на иконку Салюта.
Шаг 2. Скажите, какую сумму и кому перевести.
Шаг 3. Подтвердите перевод.
Примеры команд
Виртуальные ассистенты Салют.
С кем общаться?
Ассистенты Салют — это сразу три неповторимых характера. Интеллигентный Сбер, жизнерадостная Джой или педантичная Афина — кого выберете вы?
Что ещё умеют виртуальные ассистенты Салют
Выполнять другие банковские операции
Помогать в ежедневных делах
Рассказывать новости и факты
Контактная информация
Россия, Москва, 117997, ул. Вавилова, 19
© 1997—2021 ПАО Сбербанк.
СберБанк защищает персональные данные пользователей и обрабатывает Cookies только для персонализации сервисов. Запретить обработку Cookies можно в настройках Вашего браузера. Пожалуйста, ознакомьтесь с Условиями обработки персональных данных и Cookies.
Моё знакомство с виртуальными ассистентами Салют, а также с платформой SmartMarket и SmartApp
Предыстория
В сентябре 2020 года Сбер анонсировал семейство виртуальных ассистентов:
Сбер — мужской голос. Общается официально, к пользователю обращается на «Вы»;
Афина — женский голос. Общается официально, к пользователю обращается на «Вы»;
Джой — женский голос. Общается неофициально, к пользователю обращается на «Ты»;
SmartApp (смартап или в простонародии навык) — это приложение, которое расширяет возможности виртуального ассистента и может дать пользователю не только красивый интерфейс, но и множество способов взаимодействия с ним: голосом, касанием, текстовым вводом, пультом и даже виртуальным геймпадом.
В SmartApp Studio собраны инструменты для создания смартапа:
Graph — это визуальный конструктор для создания смартапов. Полезен тем разработчикам у которых нет опыта в программировании;
Code — среда разработки на языках SmartApp DSL и JavaScript. Для тех кто уже имеет опыт в программировании;
API — возможность вынести свой навык за пределы платформы;
24 сентября для сторонних разработчиков Сбером была запущена группа в ТГ @smartmarket_community. 3-го октября я сам присоединился к этой группе.
Прочитав, к тому моменту, совсем скудную документацию всё же решил попробовать развернуть свой Chat App на SmartApp API.
Хоть я по профессии не программист, но у меня уже были свои навыки на другой платформе и API обеих платформ имеет сходство.
Мои навыки работают как раз по API, так как он даёт большую гибкость, ведь всё в твоих руках.
Что сразу понравилось
Не стану описывать процесс портирования навыка, так как это уже даже в документации есть (плюс можете посмотреть вот этот пример), а лишь опишу некоторые вещи, которые я тогда для себя отметил:
Голос выбирает ПОЛЬЗОВАТЕЛЬ, а не разработчик. Моё мнение как раз такое же, что выбор должен быть за пользователем. Ведь это он взаимодействует с ассистентом и навыком и ему лучше знать какой голос ему комфортнее слушать. Более того, голос ассистента можно сменить налету (даже внутри смартапа) просто позвав нужного вам ассистента. Для этого нужно сказать «позови » и всё. Узнать какой голос используется пользователем можно из объекта character.
У каждого ассистента не только свой голос, но и своя цветовая гамма.
Отдельные типы сообщений при входе (RUN_APP) и при выходе (CLOSE_APP) пользователя из смартапа, а также сообщить платформе об ошибке (ERROR).
Возможность разбивать текст на экране на несколько блоков (bubble) для улучшения визуализации информации.
Для тестирования смартапов можно использовать приложение Сбер Салют (App Store, Google Play) на смартфоне или тестировать смартапы прямо на устройствах SberBox и SberPortal.
Даже если смартап ещё не прошел модерацию, то всегда есть возможность запустить его на том устройстве где вход выполнен под тем же Сбер ID, который использовался при создании навыка в SmartApp Studio. Также относительно недавно появилась возможность давать доступ к неопубликованному смартапу и другим людям. Для этого нужно просто скинуть им сгенерированную ссылку.
Chat App
Выбор chat app был обусловлен тем, что на момент запуска платформы сanvas app ещё не был доступен для сторонних разработчиков.
Как сейчас пока ещё недоступен Native App (но уже скоро должен и он быть в доступе).
Не мало времени пришлось потратить на фразы смартапа, которые озвучивает ассистент. Ведь голос ассистента, а значит его пол, выбирается пользователем, а не разработчиком. Плюс к этом обращения на «Вы/Ты» тоже заняло некоторое время, но вот уже 12.10.2020 мой первый 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:
Благодаря assistant.createSmartappDebugger мы и получаем возможность использовать эту страницу локально и тестировать используя реального ассистента.
Открываем своим браузером URL (где расположена страница) и указываем параметр devel. Например: https://example.ru/frontend.html?devel=true
И если Вы всё сделали правильно, то открывшись страница запустит «мост» с платформой и Ваш смартап.
Ваш 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 элемента кнопки:
Если пользователь нажмёт на такую кнопку, то согласно коду выше в webhook придет сообщение с типом SERVER_ACTION:
И таким образом можно обработать это сообщение на webhook согласно логике смартапа и webhook отправит на frontend свой ответ на эту команду.
В canvas app ограничений практически нет (на сегодняшний день известно лишь об ограничениях на использование localstorage, а также камеры и микрофона устройства).
Для одного из своих canvas app я даже применил websocket и это работает. Проблем с созданием многопользовательских сетевых canvas app у Вас не должно возникать.
Поле для вашего творчества практически безгранично.
Исходный код примера, который описан мной выше, можно скачать на github.
Отмечу, что благодаря существованию github pages Ваш frontend может быть размещён на github.
Так я создал canvas версию для своего chat app и при этом webhook у них один и тот же.
canvas app
Очевидно, что canvas app уже совсем другой уровень взаимодействия с пользователем и делает смартап более реалистичным.
Помните, что смартапы типа canvas app должны корректно отображаться на разных устройствах (SberBox, SberPortal и другие). Для этого необходимо проверять смартап на следующих разрешениях: 559×568, 768×400, 959×400, 1920×1080.
Настроить и протестировать эти разрешения можно в Chrome на вкладке Devices.
Планы
Мои дальнейшие планы это не только создать ещё несколько canvas app, но попробовать монетизировать смартап. SmartMarket предоставляет возможность встроить в смартап приём платежей от пользователей посредством API.
Заключение
В заключении хочу сказать несколько вещей:
при отладке canvas app не забывайте посматривать в консоль браузера (F12);
клиенты (устройства) кешируют страницу и поэтому рекомендую всегда выводить на экран номер версии;
на данный момент canvas app нельзя запустить только в приложении СберБанк Онлайн, но вскоре эта возможность появится и там;
стали появляться первые видео уроки от Сбера;
есть система тикетов где Вы можете заявить о проблеме или сделать запрос на новый функционал;
есть Community roadmap где можно посмотреть статусы тикетов;
Хочу сказать спасибо команде SberDevices за открытость (особенно за общие встречи с сообществом в zoom) и конечно за то, что прислушиваетесь к мнению сообщества. Это безусловно ваше преимущество перед другими.
Также хочу поблагодарить пользователей моего смартапа, благодаря которым я смог выиграть в первом этапе конкурса. Спасибо, что оценили мои старания.