Application in the Telegram Chat Bot for Parcel Delivery
About the pet project
Our client represents a real estate agency in Dubai. We have previously collaborated on the Profi Make web project and we were happy to be chosen again, only this time to develop a Telegram bot application (web app), the task of which is to help people find passengers to transfer packages from Dubai or to Dubai.
Why, it would seem, if there are many delivery services. But in fact, this is a topical issue, because international courier services are not cheap, and for many people it is not hard work to transfer a small package during a trip (and even make money on it). Usually, thematic chats and forums on the Internet help in finding such travelers. But in order to find the right one among thousands of messages, driving keywords into the search, you can spend a lot of time and effort. Not to mention making a deal, because it’s not easy to contact a forum member when you only have a mysterious nickname at your disposal.
Knowing about this problem, our client decided to automate this process and see what happens.
Web app for bots — a new Telegram technology
In the spring of 2022, Telegram introduced a new generation of bots. If earlier these little helpers were able to process payments, convert files and send notifications, now their capabilities have reached a fundamentally new level. Thanks to one of the most popular programming languages, JavaScript, developers can create full-fledged web applications right inside the chat. As you guessed, we did not fail to take advantage of the new technology: we equipped the Telegram bot with a flexible interface and with functions that are in no way worse than any website.
How a chatbot works
DP_4h_bot is a program for finding a traveler from or to Dubai who is able and willing to deliver a small package.
Let’s use an example to show how the product works from the side of the performer and the sender.
You are a performer
Let’s say you live in Dubai, and on October 15th you plan to fly to Paris for the weekend. Your baggage allows you to take a parcel up to 5 kg with you and earn some money on it. You open Telegram and launch the DP_4h_bot chatbot, which greets you with a welcome message and an invitation to press the «Start» button:
When you click the «Open Application» button, the bot will prompt you to go to the web application, warning you about getting access to the IP address and basic information about the device. By clicking «Cancel», you can continue working in the usual Telegram chat, and by selecting «OK» you can switch to a separate application:
Next, you should choose what you want to do with the luggage: «SEND» or «TRANSPORT». Since, hypothetically, you would like to send the package to Paris, you need to click on the «TRANSPORT» button, fill in the data (Telegram login, point of departure and arrival, type of package and date of departure) and click on the «SUBMIT» button:
Thus, you have actually created an application that is sent to the database and stored until a person who needs to send a package to Paris responds to it.
You are a sender
Now let’s take on the role of the sender. Let’s imagine that you need to transfer documents from Dubai to Paris on October 15th. The search for a perfomer using a chatbot works in a similar way, only when choosing actions with baggage, you must select the «SEND» option.
When you fill out and submit the application form, the bot will start searching the database for all passengers on the Dubai-Paris flight on October 15, and at the end will suggest nicknames of potential couriers. This completes the task of the bot. Next, you can click on the user’s login and continue chatting with him in the Telegram chat:
Built-in chat with the operator
The chat bot has a permanent button with which you can open another chat bot at any time and chat with the operator:
On the server side, the bot is an encrypted layer that allows you to anonymize contact with our customer. Thus, any appeal from the chatbot arrives in the form of an application to Bitrix24 CRM, within which the client’s website is created.
Technical realization
To create a web app in Telegram, we used several technologies. The interface is made using the Vue.js JavaScript framework, and the program-administrative part is made using the Laravel PHP framework.
Let’s look at the development process in order:
- We first created a chatbot using the @BotFather internal bot. This is a technology that makes it easy to register, configure and manage other Telegram bots.
- Using Vue.js, we designed a web application interface (a form for a client and a form for a performer) and connected it to the Telegram API.
- Applied components for selecting the date of the trip (datepicker), multiple selection (multiselect) for the type of baggage and the usual selection (select) for the destination and size of the baggage.
- With the help of Laravel, we created a database, and API methods were used to access data (write, read, and return filtered information about trips).
- We set up and tested methods for accessing the database using Axios, a client-side JavaScript library for making HTTP requests.
- We placed the client (front-end) and server (back-end) parts of the program on the hosting.
- We set up the chatbot by adding a button to call the built-in application.
Summary
An easy-to-use Telegram bot with simple design, where the interests of users come first. This is what the result of the work of the Webnauts developer looks like. But despite its simplicity and relative affordability of development, the web-app chatbot for Telegram can be called a full-fledged replacement for a functional website or mobile application that collects data, selects information and attracts potential customers.
