This application is a flight booking app specifically designed for the Telegram Mini App platform. With this app, users can easily search for cities or airports and select various flight parameters such as departure location, arrival location, departure date, return date, number of travelers, cabin class, and more. Once the search criteria are set, the user can initiate the search and the app will display the available flights based on their preferences.
The user is presented with a list of flight options and can choose any desired flight. Upon selecting a flight, the app will navigate to the invoice screen, where the user can review the booking details and proceed to confirm the booking by clicking on the "Book Now" button.
The invoice screen provides a summary of the selected flight, including the flight details, passenger information, and pricing details. This screen allows users to review their booking before finalizing it. Once the booking is confirmed, the necessary payment and confirmation processes will be initiated.
-
Search for flights based on departure location, arrival location, departure date, return date, number of travelers, and cabin class
-
View available flights based on search criteria
-
Select a flight and proceed to the invoice screen
When the application launches, the user is presented with the loading screen. This screen is displayed while the application is initializing and validating data received via the Mini App by sending the WebApp.InitData to the server. Telegram Mini App Init Data validation .
Once the loading process is complete, the user is presented with the home screen with the themeparams that is received using the telegram js interface.
The app will watch any changes to the theme params and update the theme accordingly. By listening to the themeChanged event, the same for colorScheme.
The user can then search for flights by entering the departure location, arrival location, departure date, return date, number of travelers, and cabin class. Once the search criteria are set, the user can initiate the search and the app will display the available flights based on their preferences. The app will send the search params to the server and the server will send the search results back to the client.
When sending any request to the server the client adds the user's telegram webApp InitData to the request header, this is used to validate the request on the server side.
The user is presented with a list of flight options and can choose any desired flight. Upon selecting a flight, the app will navigate to the invoice screen, where the user can review the booking details and proceed to confirm the booking by clicking on the "Book Now" button.
The server will create a invoice link and send it to the client, the client then displays the invoice link using openInvoice method.
Node.js and npm are required to run this application. If you do not have them installed, you can download them from here.
- Clone the repository
- Install NPM packages
For Client
cd client
npm install or yarn install
cp .env.example .env
// add Server API URL to .env file
VITE_SERVER_API=For Server
cd server
npm install or yarn install
cp .env.example .env
// add your API keys and Telegram to .env file
AMADEUS_CLIENT_ID=
AMADEUS_CLIENT_SECRET=
TELEGRAM_BOT_TOKEN=To get AMADEUS credentials, you need to create an account on Amadeus. Once you have created an account, you can create a new application and get the API key and secret.
To get TELEGRAM_BOT_TOKEN, you need to create a bot on Telegram. Once you have created a bot, you can get the bot token.
- Run the application
For Client
cd client
npm run dev --host or yarn dev --hostThe --host flag is required to run the application on a local server with https. This is necessary for the Telegram Mini App platform to be able to access the application.
For Server
cd server
node index.js or nodemon index.jsNote: nodemon is a dev dependency, so you will need to install it if you do not already have it installed.
- Open the Telegram app
- Search for the @flygram_bot bot and start a chat with it
- Click on the "Start" button to start the bot
- Click on the "Book Flight" button to start the booking process
- The application will launch and you will be presented with the loading screen where the application will initialize and validate the data received via the Mini App
- Once the loading process is complete, you will be presented with the home screen
- Enter the departure location, arrival location. You can can also select the arrival location from popular destination list at the bottom
- Select the departure date and return date
- Select the number of travelers and cabin class
- Click on the "Search" button to initiate the search
- The application will display the available flights based on your search criteria
- Select a flight
- Review the booking details and click on the "Book Now" button to confirm the booking
The navigation is done using The Backbutton and Main button
The client used the cloudStorage to store recent locations
The client used the openInvoice method to display the invoice link
The client used the themeChanged event to update the theme
The client used the colorScheme event to update the theme
The client used the WebApp.InitData to validate the request on the server side
The client used the WebApp.InitData to validate the request on the server side
MIT