---
title: "अपना पहला Telegram Mini App कैसे बनाएँ: चरण-दर-चरण गाइड"
description: "Telegram Mini App बनाना सीखें: BotFather से बॉट बनाएँ, प्रोजेक्ट सेट करें और HTML व JavaScript के उदाहरणों से पहला ऐप तैयार करें।"
image: https://image.adsgram.ai/site/how-to-build-your-first-telegram-mini-app-a-step-by-step-guide.webp
---
# अपना पहला Telegram Mini App कैसे बनाएँ: चरण-दर-चरण गाइड
Telegram Mini App बनाना सीखें: BotFather से बॉट बनाएँ, प्रोजेक्ट सेट करें और HTML व JavaScript के उदाहरणों से पहला ऐप तैयार करें।
प्रकाशित 11 फ़र॰ 20265 मिनट पढ़ने में
## Telegram और WeChat: सुपर ऐप का मॉडल
WeChat ने 2011 में मैसेजिंग, सोशल मीडिया, भुगतान और खरीदारी जैसी सुविधाओं को जोड़कर चीन में अपनी जगह बनाई। 2013 में शुरू हुआ Telegram भी बॉट और Mini Apps के ज़रिए मैसेजिंग से आगे की सेवाएँ देता है। Telegram Mini App बनाने के लिए आप HTML, CSS और JavaScript जैसी परिचित वेब तकनीकों से शुरुआत कर सकते हैं। इस गाइड में एक साधारण काउंटर ऐप के लिए बॉट, फ़ाइलों का ढाँचा और शुरुआती कोड तैयार करेंगे।
## Telegram और WeChat के मुख्य अंतर
**फ़ीचर**
**WeChat**
**Telegram**
लॉन्च का साल
2011
2013
मुख्य बाज़ार
चीन (दुनिया भर में सीमित मौजूदगी)
दुनिया भर में
निजता
अपनी गोपनीयता नीति और लागू चीनी कानूनों के अधीन
Secret Chats में एंड-टू-एंड एन्क्रिप्शन; सामान्य क्लाउड चैट और Mini Apps को वही सुरक्षा नहीं मिलती
सुपर ऐप की सुविधाएं
विकसित इकोसिस्टम: पेमेंट, शॉपिंग और सेवाएं
Mini Apps और क्रिप्टो वॉलेट के साथ तेज़ी से विस्तार
उपयोगकर्ता आधार
हर महीने लगभग 1.3 अरब सक्रिय उपयोगकर्ता (ऐतिहासिक आँकड़ा; वर्तमान अनुमान नहीं)
हर महीने 80 करोड़ से अधिक सक्रिय उपयोगकर्ता (ऐतिहासिक आँकड़ा; वर्तमान अनुमान नहीं)
WeChat का प्रमुख बाज़ार चीन है, जबकि Telegram का उपयोग कई देशों में होता है। दोनों के इकोसिस्टम और नियम अलग हैं।
[Telegram Mini Apps (TMA)](https://adsgram.ai/hi)
से डेवलपर Telegram के भीतर खुलने वाले वेब ऐप बना सकते हैं। भारत के लिए ऐसा ऐप बनाते समय हिंदी या संबंधित क्षेत्रीय भाषा में साफ़ इंटरफ़ेस और आसानी से पढ़े जाने वाले बटन उपयोगी होंगे।
अब जानते हैं कि Telegram Mini App कैसे बनाया जाए और Telegram की क्षमता का लाभ उठाने वाले डेवलपरों की बढ़ती जमात में कैसे शामिल हों।
## Telegram Mini Apps क्या हैं और इतने लोकप्रिय क्यों हैं?
[Telegram Mini Apps (TMA)](https://adsgram.ai/hi)
Telegram के भीतर चलने वाले वेब ऐप हैं। इंटरफ़ेस HTML, CSS और JavaScript से बनता है; Telegram का JavaScript ब्रिज ऐप को थीम और अन्य समर्थित सुविधाओं से जोड़ता है। आम तौर पर आप BotFather से बॉट बनाते हैं, उसका यूज़रनेम चुनते हैं और उसे अपने HTTPS ऐप से जोड़ते हैं। फिर समर्थित लिंक और बटन से ऐप खोला जा सकता है। भुगतान और पहचान सत्यापन अलग से लागू करने होते हैं; केवल SDK जोड़ना पर्याप्त नहीं है।
### डेवलपर Mini Apps क्यों चुनते हैं
**फ़ीचर**
**फ़ायदा**
स्टोर पर अलग ऐप प्रकाशित करना ज़रूरी नहीं
Telegram के भीतर वेब ऐप चलाएँ; Telegram के नियम और लागू स्टोर व भुगतान नीतियाँ फिर भी माननी होंगी।
इंस्टॉल करने की ज़रूरत नहीं
यूज़र सीधे Telegram में आपका ऐप इस्तेमाल कर सकते हैं।
अपनी पसंद की टेक्नोलॉजी चुनें
React, Vue या सीधे JavaScript में बनाएं—जो आपके लिए सही हो।
बड़ा संभावित दर्शक वर्ग
Telegram के वैश्विक इकोसिस्टम में ऐप उपलब्ध कराएँ; इससे अपने-आप उपयोगकर्ता मिलने की गारंटी नहीं होती।
## Telegram Mini Apps के उदाहरण
आइए, कुछ असली उदाहरण देखें और जानें कि क्या-क्या मुमकिन है:
- Wallet – Telegram से इस्तेमाल की जा सकने वाली वॉलेट सेवाओं का उदाहरण। सुविधाएँ वॉलेट और क्षेत्र के अनुसार बदलती हैं।
- Hamster Kombat – टैप करने वाला गेम, जिसने बड़ी संख्या में यूज़र्स को जोड़ा।
- DurgerKing – Telegram का नमूना Mini App, जिसमें खाना ऑर्डर करने और भुगतान की प्रक्रिया आज़मा सकते हैं।
AdsGram
## 3 चरणों में कमाई शुरू करें
1. 01जोड़ें
2. 02विज्ञापन डालें
3. 03भुगतान प्राप्त करें
[अब monetize करें](https://partner.adsgram.ai/registration?utm_source=blog&utm_medium=cta&utm_campaign=organic_blog)
## Telegram Mini Apps के साथ शुरुआत कैसे करें
### शुरू करने के लिए क्या चाहिए
- कोड एडिटर (VS Code या WebStorm बढ़िया रहेंगे)।
- HTML, CSS और JavaScript की बुनियादी जानकारी।
- आपके फ़ोन और कंप्यूटर पर Telegram इंस्टॉल होना चाहिए।
- कुछ नया जानने की उत्सुकता।
### चरण 1: एक हेल्पर बॉट बनाएँ
शुरुआत एक Telegram बॉट बनाने से करें। यही बॉट आपके ऐप तक पहुँचने का रास्ता होगा। इसे बनाने का तरीका यहाँ दिया गया है:
1. Telegram में @BotFather खोजें।
2. /newbot कमांड भेजें।
3. अपने बॉट के लिए एक नाम चुनें।
4. BotFather से मिला टोकन सर्वर पर सुरक्षित रखें। Bot API के लिए इसकी ज़रूरत होगी। इसे ब्राउज़र के कोड या सार्वजनिक रिपॉज़िटरी में कभी न डालें।
नीचे Node.js कोड दिया गया है, जो सर्वर पर चलेगा। पहले node-telegram-bot-api इंस्टॉल करें, सर्वर के एनवायरनमेंट वैरिएबल से token की वैल्यू लें और https://your-domain.com/app की जगह अपने प्रकाशित ऐप का HTTPS URL डालें। यह inline web\_app बटन बॉट के साथ निजी चैट में इस्तेमाल होता है:
`javascript`
`const TelegramBot = require('node-telegram-bot-api');`
`const bot = new TelegramBot(token, { polling: true });`
`bot.onText(/\/start/, (msg) => {`
`const chatId = msg.chat.id;`
`bot.sendMessage(chatId, 'Welcome! Click the button below to open the app.', {`
`reply_markup: {`
`inline_keyboard: [[`
`{`
`text: 'Open App',`
`web_app: { url: 'https://your-domain.com/app' }`
`}`
`]]`
`}`
`});`
`});`
### चरण 2: प्रोजेक्ट का ढाँचा तैयार करें
Telegram Mini App बनाने के लिए प्रोजेक्ट का बुनियादी ढाँचा तैयार करें और टेस्टिंग एनवायरनमेंट सेट अप करें:
प्रोजेक्ट की फ़ाइलों और फ़ोल्डरों का ढाँचा नीचे है; index.html का कोड चरण 3 में दिया गया है:
`text`
`my-tma/`
`├── index.html`
`├── styles/`
`│ └── main.css`
`├── scripts/`
`│ └── app.js`
`└── assets/`
`└── images/`
### चरण 3: अपना ऐप बनाएँ
इस HTML को index.html में सेव करें। यह Telegram WebApp ब्रिज और scripts/app.js लोड करता है। यह इंटरफ़ेस का उदाहरण है, उपयोगकर्ता की पहचान सत्यापित करने का पूरा समाधान नहीं। पहचान पर भरोसा करने से पहले बैकएंड पर Telegram के initData की जाँच करें:
`html`
``
``
``
``
``
`My First TMA`
``
``
``
``
`
`
`
Hello, Telegram!
`
`
`
``
``
``
### अपने ऐप की स्टाइलिंग
नीचे दिया JavaScript कोड scripts/app.js में सेव करें। setupTheme, Telegram की थीम के रंग लगाता है; styles/main.css अलग स्टाइलशीट है, जिसमें आप अपने नियम लिख सकते हैं। Android और iOS पर परीक्षण करें। ज़रूरी बात: sendData केवल reply-keyboard के web\_app बटन से खुले Mini App में काम करता है, चरण 1 के inline बटन में नहीं। उस तरीके से खुले ऐप का डेटा सेव करने के लिए बैकएंड एंडपॉइंट और initData सत्यापन जोड़ना होगा। इस नमूने में स्थायी स्टोरेज या web\_app\_data प्राप्त करने वाला हैंडलर नहीं है:
`javascript`
`const app = {`
`data: { count: 0 },`
`init() {`
`this.setupTheme();`
`this.setupCounter();`
`this.setupMainButton();`
`},`
`setupTheme() {`
`const theme = window.Telegram.WebApp.themeParams;`
`document.body.style.backgroundColor = theme.bg_color;`
`document.body.style.color = theme.text_color;`
`},`
`setupCounter() {`
`const counter = document.createElement('div');`
`` counter.innerHTML = ` ``
`
Counter: 0
`
``
``
`` `; ``
`document.querySelector('#app').appendChild(counter);`
`document.querySelector('#increment').onclick = () => this.updateCount(1);`
`document.querySelector('#decrement').onclick = () => this.updateCount(-1);`
`},`
`setupMainButton() {`
`const MainButton = window.Telegram.WebApp.MainButton;`
`MainButton.setText('Save');`
`MainButton.onClick(() => this.saveData());`
`MainButton.show();`
`},`
`updateCount(delta) {`
`this.data.count += delta;`
`document.querySelector('#count').textContent = this.data.count;`
`},`
`saveData() {`
`window.Telegram.WebApp.sendData(JSON.stringify(this.data));`
`}`
`};`
`window.Telegram.WebApp.ready();`
`app.init();`
## ऐप में और सुविधाएँ जोड़ें
बुनियादी ऐप तैयार हो जाए, तो एडवांस्ड फ़ीचर्स जोड़कर अपने Mini App को बेहतर बना सकते हैं:
- ज़रूरत हो तो TON से जुड़ी Web3 सुविधाएँ जोड़ें। Telegram के भीतर डिजिटल वस्तुओं और सेवाओं की बिक्री के लिए TON के बजाय Telegram Stars इस्तेमाल करना ज़रूरी है।
- डिजिटल वस्तुओं और सेवाओं के लिए Telegram Stars भुगतान जोड़ें और भुगतान की पुष्टि तथा रिफ़ंड की व्यवस्था करें।
- initData सत्यापित करने और भेजी गई वैल्यू जाँचने के बाद ही उपयोगकर्ता का डेटा सर्वर पर सेव करें।
- एनिमेशन और एडवांस्ड लॉजिक जोड़ें।
- ज़रूरी अनुमति लेकर बॉट से सूचनाएँ भेजें; Mini App मनमाने उपयोगकर्ताओं को संदेश नहीं भेज सकता।
- नेविगेशन के लिए मेन्यू बटन जोड़ें।
## आगे क्या करें?
1. अपने ऐप को HTTPS सर्वर पर डिप्लॉय करें।
2. @BotFather के ज़रिए अपने ऐप को Telegram से जोड़ें।
3. वास्तविक इस्तेमाल जैसी स्थितियों में परीक्षण करें। भारत के लिए धीमे मोबाइल नेटवर्क, छोटे Android फ़ोन और हिंदी या चुनी गई क्षेत्रीय भाषा में टेक्स्ट भी जाँचें।
4. अपना Telegram Mini App लॉन्च करें और शुरुआती फ़ीडबैक जुटाएँ।
5. समुदाय से सुझाव पाने के लिए कोड GitHub पर साझा करें; बॉट टोकन, अन्य गोपनीय जानकारी और निजी डेटा शामिल न करें।
6. यूज़र्स से फ़ीडबैक लें और उसके आधार पर ऐप को बेहतर बनाते रहें।
इन चरणों से Telegram Mini App का शुरुआती ढाँचा तैयार हो जाएगा। सार्वजनिक लॉन्च से पहले डेटा सेव करने, पहचान सत्यापित करने और त्रुटियाँ सँभालने की व्यवस्था पूरी करें, फिर उपयोगकर्ताओं के सुझावों से ऐप बेहतर बनाएँ।
Elizaveta Bydanova
टीम लीड बिजनेस डेवलपमेंट, AdsGram
## आगे पढ़ें
उद्योग की ताज़ा खबरें, इंटरव्यू, तकनीकें और संसाधन
[सभी पोस्ट देखें](/hi/blog)
### प्रभावी विज्ञापन के लिए ऑल-इन-वन स्वचालित प्लेटफ़ॉर्म
आज ही हमारे साथ अपने विज्ञापन यात्रा की शुरुआत करें।
[विज्ञापनदाता के रूप में लॉगिन करें](https://traffic.adsgram.ai/registration?code=NewDirectUser)
[प्रकाशक के रूप में लॉगिन करें](https://partner.adsgram.ai/registration?code=NewDirectUser)