Skip to content

WEBAPP_DEPLOY.md

Latest commit

 

History

History
158 lines (121 loc) · 3.73 KB

WEBAPP_DEPLOY.md

File metadata and controls

158 lines (121 loc) · 3.73 KB
Raw

Telegram Web App Deployment Guide

Overview

The Web App provides a rich in-app interface for scanning URLs directly within Telegram.

Quick Start

Option 1: GitHub Pages (Recommended - Free)

  1. Push to GitHub:

    git add webapp/scanner.html
git commit -m "Add Telegram Web App"
git push origin main

  2. Enable GitHub Pages:

  3. Get URL:

    • Your Web App will be at: https://masterofowls.github.io/API_Bot/webapp/scanner.html
    • Wait 2-3 minutes for deployment

  4. Update Bot:

    • Edit bot.py line 67
    • Change webapp_url to: https://masterofowls.github.io/API_Bot/webapp/scanner.html
    • Commit and push

Option 2: Netlify (Alternative - Free)

  1. Sign up: https://netlify.com

  2. Deploy:

    • New site from Git
    • Connect GitHub
    • Select API_Bot repo
    • Build command: (leave empty)
    • Publish directory: webapp
    • Deploy

  3. Get URL:

    • Copy the Netlify URL (e.g., https://api-bot-scanner.netlify.app/scanner.html)

  4. Update bot.py:

    • Change webapp_url to your Netlify URL

Option 3: Vercel (Alternative - Free)

  1. Install Vercel CLI:

    npm install -g vercel

  2. Deploy:

    cd webapp
vercel --prod

  3. Use the provided URL

Features

✅ Single Scan - Scan one URL with full analysis ✅ Batch Scan - Scan up to 10 URLs simultaneously
✅ Deep Scan - Crawl and scan linked pages ✅ Telegram Theme - Automatically matches user's Telegram theme ✅ Haptic Feedback - Native feel with vibration feedback ✅ Progress Tracking - Real-time scan progress ✅ Responsive Design - Works on all devices

Testing Locally

  1. Serve locally:

    cd webapp
python -m http.server 8000

  2. Use ngrok for testing:

    ngrok http 8000

  3. Update bot.py with ngrok URL (temporary)

Telegram WebApp Features Used

  • WebApp.expand() - Full screen
  • WebApp.sendData() - Send scan requests to bot
  • WebApp.themeParams - Auto theme matching
  • WebApp.HapticFeedback - Vibration feedback
  • WebApp.enableClosingConfirmation() - Prevent accidental close

Troubleshooting

Web App button not appearing?

  • Make sure you pushed changes to bot.py
  • Check Render deployed the latest code
  • Restart bot if needed

Web App not loading?

  • Verify URL is accessible (open in browser)
  • Check HTTPS is enabled
  • GitHub Pages may take 5-10 minutes to activate

Theme not applying?

  • Web App automatically uses Telegram theme
  • Works on Telegram mobile and desktop

Scans not working?

  • Check bot receives data (check Render logs)
  • Verify WebApp handler is registered
  • Test with /start command first

Architecture

User clicks "🌐 Open Web Scanner"
    ↓
Telegram opens Web App (scanner.html)
    ↓
User fills form and clicks "Start Scan"
    ↓
Web App sends data to bot via WebApp.sendData()
    ↓
Bot receives in handle_webapp_data()
    ↓
Bot processes scan and sends results back

Security

  • ✅ WebApp data is validated by Telegram
  • ✅ All URLs are sanitized before scanning
  • ✅ Rate limiting applies to WebApp requests
  • ✅ HTTPS required for production

Next Steps

  1. Deploy Web App to GitHub Pages
  2. Update webapp_url in bot.py
  3. Push changes and wait for Render deployment
  4. Test with /start command
  5. Click "🌐 Open Web Scanner" button

Customization

Edit webapp/scanner.html to:

  • Change colors and styling
  • Add more scan options
  • Customize progress animations
  • Add result visualization

Remember to redeploy after changes!