Bot Template Framework. Графические компоненты.

В прошлой части мы освоили основы работы с Bot Template Framework.

Начиная с этой части будем делать реальный чатбот для студии по разработке чатботов, шаг за шагом изучая фреймворк более глубоко.

Menu блок

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

Что получилось:

При работе с menu важно отметить что вид кнопочного меню очень зависит от месседжера на котором проектируется бот. Например, для Telegram кнопки можно выравнивать горизонтально и вертикально, использовать inline или quick состояние. Поэтому, наше меню с использованием поля mode=»quick» в блоке будет выглядеть:

В этой статье сделаем активной только кнопку About, добавив компонент image (пример использования которого мы уже рассмотрели в предыдущей части), подписан на ключевое слово «about» с несколькими кнопками и кратким описанием (включая кнопку вызова списка статей).

Carousel и List блоки в Bot Template Framework

Теперь попробуем описать несколько ссылок на статьи из блога используя карусель. Кстати, в Telegram нет карусели как графического компонента, но используя Bot Template Framework мы все равно можем его имитировать. Спросите как? Очень просто — Bot Template Framework генерирует кнопки для карусели и переключает ссылки на рисунки по нажатию на соответствующую кнопку, а Telegram подгружает превью рисунка прямо в чат. Крутотенюшка, не так ли?

И так наша карусель:

Вот как карусель выглядит в Telegram:

Telegram карусель. Bot Template Framework

Теперь попробуем сделать визуальный компонент — лист. Для этого заменим тип «Articles Block» на «list» и получаем:

Telegram лист. Bot Template Framework

Заключение

Используя Bot Template Framework можно легко проектировать мультиплатформенные визуальные компоненты, не вникая в детали работы API будь то Telegram, Facebook или Viber.

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

Полный сценарий чатбота на конец второй части:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *