Telegram Mini App Kaise Banaye: AI Aur Firebase Se Earning Bot Banane Ka Complete Guide

Aaj kal Telegram ecosystem ka craze bohot tezi se badh raha hai. Hamster Kombat, Tapswap, aur Dogs jaise viral projects ke baad, har koi apna khud ka tap-to-earn ya ad-watching reward system launch karna chahta hai. Agar aap bhi bina kisi heavy coding language ko seekhe apna asani se monetize hone wala bot launch karna chahta hai, toh aap bilkul sahi jagah par hain. Is detailed article mein hum seekhenge ki Telegram Mini App kaise banaye aur use Monetag ads network aur Firebase database se connect karke kaise ek full-scale automated income generator banaya jaye.

Bohot se logo ko lagta hai ki ek feature-rich application banane ke liye costly servers aur heavy backend development ki zaroorati padti hai. Is blog guide mein hum ek smart aur simple alternative lekar aaye hain. Hum poori tarah se AI-driven development approach ka use karenge. Google AI Studio (Gemini) aur Firebase compat SDK ka use karke hum ek single HTML file ke andar poora mini app frontend, user navigation (single-page routing), referral tracking, spin-wheel, daily check-in aur dynamic wallet system integrate karenge. Iske sath hi hum ek exclusive Admin Panel bhi banayenge takki aap real-time users ka status manage kar sakein aur payout requests ko process kar sakein.

Apna khud ka platform launch karne ke liye hamesha step-by-step approach follow karni chahiye. Is guide ko follow karke aap na sirf ek fully-functional mini application develop karna seekhenge, balki use safely deploy aur configure karna bhi jaan payenge. Chaliye is pure development workflow ko deeply step-by-step samjhte hain.

Video Mein Use Kiye Gaye Important Links aur Tools


Step-by-Step Complete Guide

Step 1: Monetag Par Ad Network Account Setup Aur API Integration

Apne mini app ko monetize karne ke liye hum Monetag ad network ka use karenge. Monetag par asani se registration ho jata hai. Account create karne ke baad aapko 'Telegram Mini Apps' tab par jana hoga. Yahan par aapko apne bot ka username aur general parameters submit karne honge. Setup complete karne ke baad, Monetag aapko ek custom SDK Script provide karega jise hum apne HTML <head> mein integrate karenge. Iske sath hi rewarded interstitial, banners aur popunder ad formats ke zone IDs ko generate karke alag notepad file mein save kar lein.

Step 2: BotFather Se Telegram Bot Aur WebApp Handler Create Karna

Ab aapko Telegram application open karna hai aur BotFather search karna hai. Sabse pehle /newbot command send karein aur apne bot ka ek unique name aur username select karein. Bot verify hone ke baad aapko ek HTTP API Token milega, jise safe jagah par save kar lein. Iske baad, mini app attach karne ke liye /newapp command send karein. BotFather aapse aapke app ka title, description aur main webapp URL poochega. Webapp URL ke liye hum Blogger par host hone wali unique site link provide karenge jo hum aage ke steps mein develop karenge.

Step 3: Firebase Realtime Database Aur Authentication Config Karna

Database hamare user ka wallet balance aur account history secure rakhne ke liye zaroori hai. Google Firebase console par naya project create karein. Project settings mein jaakar, Web App select karein aur Firebase config variables (apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId, appId) ko copy karein. Database section mein jaakar 'Realtime Database' create karein aur rules tab mein jaakar default rules ko modify karein takki read/write permissions dynamic user validation ke sath handle ho sakein. 'Authentication' section mein jaakar Email/Password aur Anonymous sign-in provider ko enable kar dein.

Step 4: Google AI Studio Se Mini App Ka Single-File HTML Code Likhna

Ab hum real coding par aate hain. Google AI Studio par jayein aur user prompt section ke andar system guidelines paste karein. Is prompt ke according, AI humein ek beautiful, dark-themed responsive single-page application (SPA) ka source code generate karke dega. Niche code block mein is application ki design layout aur logic sequence ka implementation diya gaya hai:

< You are an expert web developer. Build a complete Telegram Mini App (WebApp) as a SINGLE HTML file. All CSS and JS must be inline. Do NOT use any external frameworks except Firebase SDK and Telegram WebApp API.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔥 FIREBASE CONFIGURATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Use Firebase v9 compat CDN (NOT modular import):



Initialize Firebase using standard placeholder configuration keys (apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId, appId).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
💰 MONETAG AD INTEGRATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Insert this Monetag script inside the :


Trigger the rewarded video ad using the function 'show_8349271()' when the user clicks the "Watch Ad" button. If the Monetag script fails to load, implement an 8-second simulation fallback so the user experience is preserved.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📱 TELEGRAM WEBAPP INTEGRATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- On load, execute: const tg = window.Telegram.WebApp; tg.ready(); tg.expand();
- Retrieve user data: const user = tg.initDataUnsafe?.user;
- Extract: userId, first_name (fallback to "Guest"), and username. If testing in a browser, use "test123" as a fallback.
- Provide haptic feedback on every button click: tg.HapticFeedback.impactOccurred('light').
- Check for a URL referral parameter ?start=REFCODE or tg.initDataUnsafe.start_param automatically on load to process invitations.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 DESIGN & UI REQUIREMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Background: #0D1117 (dark black)
- Primary accent: #00FF88 (neon green)
- Gold color: #FFD700 for coins/balance
- Card background: #161B22
- Border color: #30363D
- Text primary: #FFFFFF, Text secondary: #8B949E
- Font: system-ui or sans-serif
- Mobile first design: max-width 480px, centered horizontally
- Smooth transitions: 0.3s ease
- Bottom navigation bar: Fixed position with 4 icons (Home, Earn, Refer, Withdraw). Highlighting active states in neon green.
- No global body scrollbar (overflow hidden on body, internal views can scroll).
- Show a loading spinner overlay on start until Firebase data finishes retrieving.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📄 APP PAGES (Single Page App Routing with showPage() function)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PAGE 1 — HOME (#home):
- Top Bar: App logo "💰 Prompt Minds Earn" + Settings icon (opens informative guidelines modal).
- Main Balance: Animated counter displaying the user's current coin balance (from users/{userId}/balance).
- Stats Display: Total earned coins, ads watched today (out of 10 limit), active referrals, and user rank based on lifetime earnings.
- Daily Check-in Card: Checks if users/{userId}/lastCheckIn equals today. If unchecked, display "Claim ₹5 Daily Bonus" in neon green. On click, add 5 to balance, update checkIn date, increase streak (resets if yesterday is missed), and show a custom confetti animation. If checked, show a disabled grey button "Come back tomorrow ✓".

PAGE 2 — EARN (#earn):
- Watch Ad Card: Displays a watch ad button. Checks the 5-minute cooldown (lastAdTime) and daily limit (max 10 ads today). Shows real-time countdown timer if on cooldown. Add 2 coins to balance and totalEarned, then increment adsWatchedToday in Firebase on success.
- Daily Spin Wheel: Allows 1 spin per day (saves lastSpin date). Render a visual canvas-based wheel with 6 slices: [1, 2, 5, 10, 0, 3] coins. Spin button triggers CSS/JS spin animation for 3 seconds. Adds won coins to Firebase and shows a success toast notification.
- Premium Tasks: 
  - Task 1: "Join our Telegram Channel" (+5 coins) -> opens t.me/PromptMinds20.
  - Task 2: "Follow on YouTube" (+3 coins).
  - Task 3: "Share App with 1 Friend" (+2 coins).
  Each task must have a simulated 4-second verification state. Once completed, disable the button, show a checkmark, and update tasks node in Firebase.

PAGE 3 — REFER (#refer):
- Code Card: Displays users/{userId}/referCode (generate automatically: "PM" + last 6 digits of userId).
- Action Buttons: "Share Link" triggers Telegram share link: t.me/PromptMindsBot?start=PM{userId_last6} along with promotional text. "Copy" copies the link to the user's clipboard.
- Stats Panel: Displays total referral count and referral earnings.
- History List: Queries Firebase to display the last 5 users who joined using this referral code.

PAGE 4 — WITHDRAW (#withdraw):
- Balance Panel: Large display of user's current coin balance. Shows minimum payout notice (100 coins = ₹10).
- Withdrawal Form:
  - Input field for UPI ID (validates that it contains '@').
  - Input field for Amount in coins (validates min 100, and max <= user's balance).
  - Real-time conversion display (e.g., "100 coins = ₹10.00").
  - Submit button: Deducts coins from balance and pushes request to withdrawals/ node with status: "pending" and timestamp.
- Withdrawal History: Queries the withdrawals/ node to display the user's last 5 withdrawal records with status badges (pending, paid, rejected).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🗄️ FIREBASE SCHEMA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- users/{userId}:
  - name, username, balance (default 0), totalEarned (default 0), referCode, referredBy, referralCount (default 0), referralEarnings (default 0), joinDate, lastCheckIn, streak (default 0), lastSpin, lastAdTime, adsWatchedToday, lastAdDate, tasks (channelJoined, youtubeFollowed, shareCompleted)
- withdrawals/{pushId}:
  - userId, userName, upiId, coins, amount, status ("pending" | "paid" | "rejected"), requestDate
- settings:
  - adReward (2), referReward (10), dailyBonus (5), minWithdraw (100)

Provide a fully responsive, clean, robust single HTML file output with detailed inline styling and custom JavaScript fallbacks.






You are an expert web developer. Build a complete Admin Panel for managing a Telegram Mini App earning platform as a SINGLE HTML file. All CSS and JS must be inline. Use Bootstrap 5 CDN for styling, layout, and responsiveness. Use Firebase compat SDK (NOT modular) to manage database entries.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔥 FIREBASE CONFIGURATION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Include Firebase v9 compat scripts:



Initialize Firebase using standard placeholder configuration keys (apiKey, authDomain, databaseURL, projectId, storageBucket, messagingSenderId, appId).

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔐 LOGIN PROTECTION SYSTEM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Display a full-page modal/overlay login screen first.
- Create static secure credentials (such as username "admin" and password "promptminds123").
- On successful validation, store credentials in sessionStorage, close the overlay, and render the dashboard.
- On failure, show a red error notification.
- Include a "Logout" button in the header that clears sessionStorage and forces a page reload.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎨 DESIGN & THEME
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Dark modern developer theme: Background `#0D1117`, Sidebar `#161B22`, Cards `#21262D`, neon green highlights (`#00FF88`).
- Responsive layouts: A collapsible left-side navigation panel for desktop/mobile views.
- Top Header bar: Title "⚙️ Prompt Minds Admin", Auto-Refresh toggle switch, and Logout button.
- Clean typography and clear table interfaces.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📊 SYSTEM SECTIONS (Single Page App Structure with section toggles)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SECTION 1 — DASHBOARD STATS:
- Stats Cards (Live updates):
  1. Total Users (Count of all entries in users/ node).
  2. Total Distributed Coins (Sum of all users' totalEarned).
  3. Pending Withdrawals (Status == "pending").
  4. Paid Withdrawals (Status == "paid").
  5. Today's New Users (joinDate == today).
  6. Today's Ads Watched (Sum of adsWatchedToday across all users).
- Activity feed: Table showing the last 10 withdrawal requests (newest first).
- Implement an option to auto-refresh data every 60 seconds (linked to the header toggle).

SECTION 2 — USER MANAGEMENT:
- Load all users from the users/ node in a paginated table (20 users per page).
- Live search bar to filter users by Name or Username instantly.
- Sorting dropdown: Sort by Balance (descending), Total Earned (descending), or Join Date (newest).
- Display a status badge: Active (Green) or Banned (Red) based on the user's banned status field.
- Action Buttons per row:
  1. View Modal: Displays full user profile. Allows editing their balance, adding coins manually with a reason dropdown (Bonus, Correction, Reward), or deducting coins. Updating user balance should also adjust totalEarned if adding.
  2. Ban/Unban: Toggles the users/{userId}/banned field.
  3. Delete: Triggers a confirmation dialog before deleting the user node from Firebase.

SECTION 3 — WITHDRAWALS:
- Display table: User Name, UPI ID, Coins, Amount (₹), Request Date, Status.
- Filter tabs: [All] [Pending] [Paid] [Rejected].
- Action Buttons:
  1. Approve: Changes status to "paid" and saves paidDate timestamp.
  2. Reject: Prompts for rejection reason, updates status to "rejected", saves reason, and refunds the deducted coins back to the user's balance.
- Include an "Export CSV" button that generates a downloadable CSV of all withdrawal requests currently filtered on screen.

SECTION 4 — BROADCASTS:
- Interface containing a text area to write a system broadcast message.
- "Send Broadcast" button: Saves message to broadcasts/{timestamp} node along with date and sentBy metadata.
- Display a history list of the last 5 broadcasts with delete options.

SECTION 5 — APP SETTINGS:
- Form to read and modify values in settings/ node.
- Input fields for:
  - Ad Reward (coins)
  - Referral Reward (coins)
  - Sign-up Bonus (coins)
  - Daily Check-In Reward (coins)
  - Minimum Withdrawal threshold (coins)
  - Max Ads per day (number)
  - Ad Cooldown (minutes)
- "Save Settings" button: Updates variables globally in Firebase to apply changes to the user app instantly.

SECTION 6 — ANALYTICS:
- Simple card reporting: Total coins in circulation, total redeemed payout, ranking table of top 10 earners, and top 10 referrers.

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠️ ADDITIONAL RULES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
- Implement comprehensive error handling (try/catch blocks) with browser alerts or toasts on failures.
- Show a central loading spinner when performing fetch tasks.
- Convert all timestamps and dates into Indian format (DD/MM/YYYY HH:MM).
- Format money values to display the Indian Rupee symbol (₹).

Provide a highly functional, responsive, and completely inline single HTML file.

Step 5: Blogger Par Hosted WebApp Ko Deploy Karna

Bina kisi web server ke free web hosting setup karne ke liye hum Google Blogger ka use karenge. Sabse pehle apne Blogger dashboard par jaakar 'New Blog' create karein. Iske baad, Themes section mein jayein aur drop-down menu se 'Classic Theme' select karein. Is classic theme ko switch karein 'without backup' option ke sath, takki aapko ek blank page mil sake. Settings mein jaakar 'Change Navbar' option ko OFF kar dein. Ab HTML editor mein jaakar default code ko completely clear karein aur upar Google AI Studio dwara generated app script ko paste kar ke save kar dein.

Step 6: Admin Panel Single-HTML App Create Aur Setup Karna

Aapka complete system tabhi complete hota hai jab aapke paas ek powerful control room ho. Gemini AI se ek custom bootstrap-based single HTML Admin panel generate karein. Is file mein aapse secure auth credentials pooche jayenge jise fill karne ke baad aap dashboard explore kar payenge. Admin Panel database nodes ko read karke metrics analyze karta hai jaise total coins distributed, active users aur pending payout details. Modal integration se aap Kisi bhi specific user ka data edit kar sakte hain aur unhe direct ban ya delete kar sakte hain.

Step 7: Telegram Mini App Ko Launch Aur Test Karna

Setup done hone ke baad, hum dynamic parameters test karenge. BotFather par jaakar /newapp configuration complete karein aur website link ke andar apni Blogger hosted URL submit karein. Jab koi naya user aapse connect karega toh dynamic referral validation check hogi. Agar links broken honge, toh browser inspect console check karein. Firebase realtime rules hamesha database key structures ko modify karne par handle hone chahiye. Ek baar rules confirm ho jayein, toh aapka fully secure earning platform automated ads payouts ke liye fully ready hai.

Pro Tips aur Expert Advice


Common Mistakes Jo Avoid Karni Chahiye


FAQ — Aksar Puchhe Jaane Wale Sawal

Q1. Kya is method se Telegram Mini App banane ke liye server cost deni hogi?

Nahi, is tutorial mein humne deployment ke liye free Blogger hosting aur database data secure rakhne ke liye Firebase free-tier real-time database ka use kiya hai. Is wajah se is model mein zero server maintain cost aati hai.

Q2. Firebase rules error (Permission Denied) ko kaise fix karein?

Yeh issue rules ke restricted parameters ki wajah se aata. Firebase console mein realtime database ke rules tab par jaakar, custom parameters replace karein takki database structure public requests accept kar sake.

Q3. Monetag ads se payouts kab aur kaise milti hain?

Monetag custom revenue thresholds complete hone par monthly basis par automatic payouts release karta hai. Isme aap WebMoney, Wire Transfer, Payoneer, ya PayPal jaise standard gateways easily use kar sakte hain.

Q4. Kya main custom referral tracking structure check kar sakta hoon?

Haan, Telegram WebApp integration automatically user dynamic details check karti hai. Referral parameter save hone par primary referrer account details database node par updated milti hain.

Q5. Gemini AI generator HTML templates generate karte time hang ho jaye toh kya karein?

Kuch files ka code length bohot lamba hota hai. AI code editor mein use generate karte time 'continue generating' option provide karein takki dynamic scripts smoothly compile ho payein.

Q6. Kya yeh app secure local storage support karti hai?

Haan, user access details, app view status, aur navigation history locally manage karne ke liye session variables update kiye jate hain jisse fast navigation possible ho sake.

Conclusion aur Agle Steps

Ab aapko achhi tarah samajh aa gaya hoga ki AI tools aur easy integrations ki madad se Telegram Mini App kaise banaye aur use database aur ads networks ke sath configure karke kaise deploy karein. Is platform ko launch karne ke baad, main workflow traffic drive karne par hona chahiye. Sahi target audience ko use refer karne ke rewards de kar aap is organic channel se real profits generate karna start kar sakte hain.

Apne bot development workflow ko next-level par le jaane ke liye customization parameters apply karein, unique design update karein aur custom rules manage karein. Naye tutorials ke liye hamare blog par visit karein aur code blocks access karne ke liye Free Tools page explore karein. Channel ko subscribe karein, aur naye monetization trends update karne ke liye video ko like aur share zaroor karein!