Приложение в чат-боте Тelegram для доставки посылок
О pet-проекте
Наш клиент представляет агентство недвижимости в Дубае. Ранее мы уже сотрудничали над веб-проектом Profi Make и, к нашему удовольствию, нас выбрали снова, только в этот раз — для разработки приложения для бота в Telegram (web app), задача которого — помогать людям находить пассажиров для передачи посылок из Дубая или в Дубай.
Казалось бы, зачем, если существует множество сервисов доставки. Но на самом деле это актуальный вопрос, ведь услуги международных курьерских служб недешёвы, а многим людям во время поездки не стоит труда передать небольшую посылку (да ещё и заработать на этом). Обычно в поисках таких путешественников помогают тематические чаты и форумы в интернете. Но чтобы среди тысяч сообщений найти нужное, вбивая в поиск ключевые слова, можно потратить уйму времени и сил. Не говоря уже о заключении сделки, ведь с участником форума не так легко связаться, когда в твоём распоряжении разве что загадочный никнейм.
Зная об этой проблеме, наш клиент задумал автоматизировать данный процесс и посмотреть, что из этого выйдет.
Web app для ботов — новая технология Telegram
Весной 2022 года Тelegram представил боты нового поколения. Если раньше эти маленькие помощники умели обрабатывать платежи, преобразовывать файлы и рассылать уведомления, то теперь их возможности вышли на принципиально новый уровень. Благодаря одному из самых популярных языков программирования JavaScript разработчики могут создавать полноценные веб-приложения прямо внутри чата. Как вы догадались, мы не преминули воспользоваться новой технологией: оснастили Telegram-бот гибким интерфейсом и наделили функциями, нисколько не уступающими любому веб-сайту.
Принцип работы чат-бота
DP_4h_bot — это программа для поиска путешественника, следующего из Дубая или в Дубай, который имеет возможность и желание доставить небольшую посылку.
Покажем на примере, как работает продукт со стороны исполнителя и отправителя.
Вы исполнитель
Допустим, вы живёте в Дубае, и 15 октября планируете лететь в Париж на уик-энд. Ваш багаж позволяет взять с собой посылку до 5 кг и немного на этом заработать. Вы открываете Telegram и запускаете чат-бот DP_4h_bot, который встречает вас приветственным сообщением и призывом нажать кнопку «Start»:
При нажатии кнопки «Open Application» бот предложит вам перейти в веб-приложение, предупредив о получении доступа к IP-адресу и базовой информации об устройстве. Нажав «Cancel», вы сможете продолжить работу в привычном Тelegram-чате, а выбрав «OK» — перейти в отдельное приложение:
Далее вам следует выбрать, что вы хотите сделать с багажом: «SEND» или «TRANSPORT». Так как гипотетически вы не прочь передать посылку в Париж, вам нужно кликнуть кнопку «TRANSPORT», заполнить данные (логин Telegram, точка отправки и прибытия, тип посылки и дата отправления) и нажать кнопку «SUBMIT»:
Таким образом, вы фактически создали заявку, которая отправляется в базу данных и хранится до тех пор, пока на неё не откликнется человек, нуждающийся в передаче посылки в Париж.
Вы отправитель
Теперь примерим роль отправителя. Представим, что вам нужно передать документы из Дубая в Париж 15 октября. Поиск исполнителя с помощью чат-бота происходит подобным образом, только при выборе действий с багажом необходимо выбрать вариант «SEND».
Когда вы заполните и отправите форму заявки, бот начнёт искать в базе всех пассажиров рейса «Дубай — Париж» 15 октября, и в конце предложит никнеймы потенциальных курьеров. На этом задача бота заканчивается. Далее вы можете кликнуть на логин пользователя и продолжить с ним общение в чате Тelegram:
Встроенный чат с оператором
В чат-боте есть постоянная кнопка, с помощью которой вы в любой момент можете вызвать ещё один чат-бот и пообщаться с оператором:
Со стороны сервера бот представляет собой зашифрованную прослойку, которая позволяет анонимизировать контакт с нашим заказчиком. Таким образом любое обращение из чат-бота прилетает в виде заявки в CRM «Битрикс24», внутри которого создан сайт клиента.
Техническая реализация
Для создания web app для чат-бота в Тelegram мы использовали несколько технологий. Интерфейс выполнен с помощью JavaScript-фреймворка Vue.js, а программно-административная часть — с помощью PHP-фреймворка Laravel.
Представим процесс разработки по порядку:
- Сначала мы создали чат-бот с помощью внутреннего бота @BotFather. Это технология, которая упрощает регистрацию, настройку и управление другими ботами в Тelegram.
- При помощи Vue.js спроектировали интерфейс веб-приложения (форму для клиента и форму для перевозчика) и соединили его с API Telegram.
- Применили компоненты выбора даты поездки (datepicker), множественный выбор (multiselect) типа багажа и обычный выбор (select) для пункта назначения и размера багажа.
- С помощью Laravel создали базу данных, а для обращения к данным (записям, чтению и возвращению отфильтрованной информации о поездках) применили методы API.
- Настроили и проверили методы обращения к базе данных, используя Axios — клиентскую JavaScript-библиотеку для выполнения HTTP-запросов.
- Разместили клиентскую (front-end) и серверную (back-end) часть программы на хостинге.
- Настроили чат-бот, добавив кнопку вызова встроенного приложения.
Результат
Простой в использовании и оформлении Telegram-бот, где интересы пользователей — на первом месте. Именно так выглядит плод трудов разработчика Webnauts. Но несмотря на свою простоту и относительную доступность разработки, web app для чат-бота в Телеграм можно назвать полноценной заменой функционального сайта или мобильного приложения, который собирает данные, подбирает информацию и привлекает потенциальных клиентов.
Comments are closed.
Комментарии