Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Приложение в чат-боте Т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» — перейти в отдельное приложение:

01

/ 02

Далее вам следует выбрать, что вы хотите сделать с багажом: «SEND» или «TRANSPORT». Так как гипотетически вы не прочь передать посылку в Париж, вам нужно кликнуть кнопку «TRANSPORT», заполнить данные (логин Telegram, точка отправки и прибытия, тип посылки и дата отправления) и нажать кнопку «SUBMIT»:

Banner

Таким образом, вы фактически создали заявку, которая отправляется в базу данных и хранится до тех пор, пока на неё не откликнется человек, нуждающийся в передаче посылки в Париж.

Вы отправитель

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

Когда вы заполните и отправите форму заявки, бот начнёт искать в базе всех пассажиров рейса «Дубай — Париж» 15 октября, и в конце предложит никнеймы потенциальных курьеров. На этом задача бота заканчивается. Далее вы можете кликнуть на логин пользователя и продолжить с ним общение в чате Тelegram:

Banner

Встроенный чат с оператором

В чат-боте есть постоянная кнопка, с помощью которой вы в любой момент можете вызвать ещё один чат-бот и пообщаться с оператором:

Banner

Со стороны сервера бот представляет собой зашифрованную прослойку, которая позволяет анонимизировать контакт с нашим заказчиком. Таким образом любое обращение из чат-бота прилетает в виде заявки в 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 для чат-бота в Телеграм можно назвать полноценной заменой функционального сайта или мобильного приложения, который собирает данные, подбирает информацию и привлекает потенциальных клиентов.

Активно используете Telegram и хотите автоматизировать бизнес-процессы с помощью чат-ботов?

Webnauts повысит эффективность компании и разработает многофункциональный Telegram-бот с учётом ваших бизнес-процессов и задач. Мы готовы взяться за разработку как обычного чат-бота, так и приложения для Telegram-бота.

Над проектом работали