Bot Template Framework. Графические компоненты.
В прошлой части мы освоили основы работы с Bot Template Framework.
Начиная с этой части будем делать реальный чатбот для студии по разработке чатботов, шаг за шагом изучая фреймворк более глубоко.
Menu блок
Наверное одно из самых востребованых графических элементов это кнопочное меню, так как часто с помощью него можно легко показать список доступных дествий для пользователя. Поэтому сделаем так же и для нашего бота. На запрос hi, будем оправлять кнопочное меню с перечнем дествий:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ "name": "Menu Block", "type": "menu", "template": "hi;/start", "content": { "text": "Hello there! Welcome to Beedevs chatbot development studio!", "buttons": [ {"feedback": "Tell us what you think"}, {"quote": "Request a quote"}, {"about": "About"} ] } } |
Что получилось:
При работе с menu важно отметить что вид кнопочного меню очень зависит от месседжера на котором проектируется бот. Например, для Telegram кнопки можно выравнивать горизонтально и вертикально, использовать inline или quick состояние. Поэтому, наше меню с использованием поля mode=»quick» в блоке будет выглядеть:
В этой статье сделаем активной только кнопку About, добавив компонент image (пример использования которого мы уже рассмотрели в предыдущей части), подписан на ключевое слово «about» с несколькими кнопками и кратким описанием (включая кнопку вызова списка статей).
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "name": "About Block", "template": "about" "type": "image", "content": { "text": "We are chatbots development studio. Our mission is to shape and deliver modern and easy way of communication between business and its customers by means of messengers and social networks.", "url": "https://beedevs.com/images/ms-icon-310x310.png", "buttons": { "https://beedevs.com": "Website", "articles": "Blog Articles" } } |
Carousel и List блоки в Bot Template Framework
Теперь попробуем описать несколько ссылок на статьи из блога используя карусель. Кстати, в Telegram нет карусели как графического компонента, но используя Bot Template Framework мы все равно можем его имитировать. Спросите как? Очень просто — Bot Template Framework генерирует кнопки для карусели и переключает ссылки на рисунки по нажатию на соответствующую кнопку, а Telegram подгружает превью рисунка прямо в чат. Крутотенюшка, не так ли?
И так наша карусель:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "name": "Articles Block", "type": "carousel", "template": "articles", "content": [ { "title": "Bot Template Framework. First Look.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/10/BTF-1-768x384.jpg", "description": "Make your first steps with Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-1": "Read Part 1" } }, { "title": "Bot Template Framework. Graphical UI.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/11/BTF-768x384.png", "description": "Dive into graphical components of Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-2": "Read Part 2" } } ] } |
Вот как карусель выглядит в Telegram:
Теперь попробуем сделать визуальный компонент — лист. Для этого заменим тип «Articles Block» на «list» и получаем:
Заключение
Используя Bot Template Framework можно легко проектировать мультиплатформенные визуальные компоненты, не вникая в детали работы API будь то Telegram, Facebook или Viber.
В следующей статье мы попробуем добавить продолжение сценария для кнопки обратной связи.
Полный сценарий чатбота на конец второй части:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
{ "name": "My Hello World Bot", "blocks": [ { "name": "Menu Block", "type": "menu", "template": "hi;/start", "content": { "text": "Hello there! Welcome to Beedevs chatbot development studio!", "buttons": [ {"feedback": "Tell us what you think"}, {"quote": "Request a quote"}, {"about": "About"} ] } }, { "name": "About Block", "template": "about", "type": "image", "content": { "text": "We are chatbots development studio. Our mission is to shape and deliver modern and easy way of communication between business and its customers by means of messengers and social networks.", "url": "https://beedevs.com/images/ms-icon-310x310.png", "buttons": { "https://beedevs.com": "Website", "articles": "Blog Articles" } } }, { "name": "Articles Block", "type": "carousel", "template": "articles", "content": [ { "title": "Bot Template Framework. First Look.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/10/BTF-1-768x384.jpg", "description": "Make your first steps with Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-1": "Read Part 1" } }, { "title": "Bot Template Framework. Graphical UI.", "url": "https://blog.beedevs.com/wp-content/uploads/2018/11/BTF-768x384.png", "description": "Dive into graphical components of Bot Template Framework", "buttons": { "https://blog.beedevs.com/en/bot-template-framework-part-2": "Read Part 2" } } ] } ], "drivers": [ { "name": "telegram", "token": "635222000:AAGulXNIfCfG3KYZpSq3LUvnn0000000000" } ] } |