Додаток у чат-боті Т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», ви зможете продовжити роботу в звичному Телеgram-чаті, а обравши «OK» — перейти до окремого додатка:
Далі вам слід обрати, що ви хочете зробити з багажем: «SEND» або «TRANSPORT». Так як гіпотетично ви не проти передати посилку в Париж, вам потрібно натиснути кнопку «TRANSPORT», заповнити дані (логін Telegram, точка відправлення та прибуття, тип посилки та дата відправлення) і натиснути кнопку «SUBMIT»:
У такий спосіб, ви фактично створили заявку, яка відправляється в базу даних і зберігається доти, доки на неї не відгукнеться людина, яка потребує передачі посилки в Париж.
Ви відправник
Тепер приміряємо роль відправника. Уявимо, що вам потрібно передати документи з Дубаї до Парижа 15 жовтня. Пошук виконавця за допомогою чат-бота відбувається подібним чином, тільки при виборі дій з багажем необхідно обрати варіант «SEND».
Коли ви заповните та відправите форму заявки, бот почне шукати в базі всіх пасажирів рейсу «Дубай — Париж» 15 жовтня, і наприкінці запропонує нікнейми потенційних кур’єрів. На цьому завдання бота закінчується. Далі ви можете натиснути на логін користувача і продовжити з ним спілкування в чаті Тelegram:
Вбудований чат з оператором
У чат-боті є постійна кнопка, за допомогою якої ви в будь-який момент можете викликати ще один чат-бот і поспілкуватися з оператором:
З боку сервера бот є зашифрованим прошарок, який дозволяє анонімізувати контакт з нашим замовником. Таким чином, будь-яке звернення з чат-бота прилітає у вигляді заявки в CRM «Бітрікс24», всередині якого створений сайт клієнта.
Технічна реалізація
Для створення web app для чат-бота в Telegram ми використали декілька технологій. Інтерфейс виконаний за допомогою 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 для чат-бота в Телеграм можна назвати повноцінною заміною функціонального сайту чи мобільного додатка, який збирає дані, підбирає інформацію та залучає потенційних клієнтів.
