Пользовательский опыт, контент и алгоритм работы ботов

Как «написать» бота, если вы привыкли делать сайт?

Автор:

Дмитрий

Время чтения:

8 мин.

Обновлено:

04/2023

Содержание

Что такое бот, как его понять изнутри
Пишем бота – схема взаимодействия и ТЗ
Что такое контроллеры или как боту реагировать
Собственный бот в визуальном конструкторе

У вас выключен Javascript или работает блокировщик контента, поэтому некоторые функции сайта могут не работать или работать неправильно. Пожалуйста, измените ваши настройки, чтобы увидеть весь контент.

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

Что такое бот, как его понять изнутри

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

Для простоты удобнее всего представлять наборы текстов, картинок и других вариантов линейного взаимодействия (когда информация выдается последовательно без необходимости ответов от пользователя) в виде экрана – страницы сайта.

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

Рассмотрим в первом приближении бот, как аналог нашего сайта 4study.pro. В адресной строке вы видите несколько вариантов директорий:

/my – личный кабинет со страницами, помогающими создавать и управлять ботами,
/blog – блог с материалами по эффективному ботостроению,
/landing – публичные материалы о созданных в нашем редакторе ботах,
/help – система тикетов и общения с командой проекта,
/market – каталог ботов и услуг под ключ от наших пользователей.

Эти директории, как вы видите, представляют собой группу страниц определенной тематики. Более того, они специально записаны, начиная с разделителя «/», который обозначает отправку команды боту в Телеграмм. Если взять страницу из личного кабинета, например, https://4study.pro/my/cmdwrk.php и разложить ее, то вы увидите, что:

https://4study.pro представляет собой бота,
/my – команду показать возможности из директории «личный кабинет»,
cmdwrk – показать информацию из непосредственной страницы «задача на разработку»

Так и бота можно разложить на составляющие, словно вы создаете сайт. Единственное отличие будет в том, что мы будем запускать экран (набор сообщений, представляющих страницу) одной командой, а выбирать конкретные действия с помощью кнопок. Именем директории является команда, а страница с именем показывается по кнопке. Например, первая же страница любого бота это /start (начало) - совпадает с именем команды, удивительно, да?

Пишем бота – схема взаимодействия и ТЗ

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

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

Или более простой вариант – набор сообщений в виде экрана с кнопками в конце.

Стрелками вы укажете, при нажатии кнопки, на какой экран будет отправлен пользователь.

По сути, именно так вы создавали бы ТЗ для разработчиков. Постарайтесь сгруппировать экраны на одну тему на одном листке – тогда его вы сможете провести параллель с директорией сайта (поставьте имя у группы). Когда вы будете переносить эту схему в бота, ориентируйтесь на стрелки (переходы), чтобы не потерять пользователя.

Что такое контроллеры или как боту реагировать

Cхема готова. Что делать дальше? Для начала проверить, что она соответствует минимальным требованиям.

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

Те имена, которые вы подписали над экраном, называются экшены, в переводе с английского «действия». А те имена, которыми озаглавили директорию (группу) - это контроллеры, в переводе с английского «управление». Соответственно, для удобства переходов совместите контроллер и экшен, чтобы получить уникальные названия для экранов. Их вы и будете указывать в названиях кнопок.

Например, для страниц с подсказками help в группе blog и zapisnakurs вы укажете следующие уникальные стартовые слова для экранов /blog_help и /zapisnakurs_help. Эти же слова вы и будете указывать для кнопки в поле «действие».

Собственный бот в визуальном конструкторе

Предлагаем на практике создать бота с самой простейшей навигацией. Для начала вам необходимо зарегистрировать его у @BotFather и получить API ключ. После выберите в редакторе пункт меню «ключи связи», «добавить новый телеграм» и введите полученные данные. Не забудьте сохранить.

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

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

Теперь создайте новый экран с помощью кнопки «добавить экран». Заполните его текстом, как мы делали ранее. Заполните так несколько экранов.

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

Впишите условие для запуска в поле Hook (запуск по команду), например, «/blog_help» и нажмите на «сохранить».

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

Ура. Контент вашего первого бота готов и вы можете начать его использовать...

Но, чтобы бот взаимодействовал с людьми, не забудьте прикрепить ключ связи к этому боту. Выберите «настройки бота», раздел «ключи связи», выберите канал и не забудьте сохранить. Загрузите данные в работу с помощью кнопки меню «текущий бот» - «загрузить информацию в бот». Во всплывающем окне вы увидите список подключенных каналов, который, правда сейчас состоит только из телеграмм и веб-версии.

Создавайте интересных ботов и решайте свои задачи с помощью нашего конструктора.