איך להתחיל לפתח Miniapp לבוט בטלגרם

12/07/2024

אחת היכולות המלהיבות של בוטים בטלגרם היא האפשרות "לברוח" מהבוט לדף ווב, כאשר דף הווב מקבל המון מידע מטלגרם כדי לייצר מראה אחיד בין הבוט לאפליקציה. פירוט מלא על מיניאפס אפשר למצוא בדף התיעוד של טלגרם כאן: https://core.telegram.org/bots/webapps.

ואם כבר יש לכם בוט אלה השלבים בקצרה:

  1. יוצרים תיקייה על המחשב עבור הבוט. אפשר לבנות ווב אפ מתוחכם או בשביל הדוגמה קובץ html פשוט. המינימום שצריך זה קובץ index.html וקובץ manifest.json.

קובץ ה manifest.json נראה ככה:

{
  "name": "My Telegram Mini App",
  "short_name": "Mini App",
  "description": "A brief description of what your Mini App does",
  "version": "1.0.0",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0088cc",
  "icons": [
    {
      "src": "/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

והקובץ index.html נראה ככה:

<!DOCTYPE html>
<html>
<head>
    <link rel="manifest" href="/manifest.json">
</head>
<body>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
    const webapp = window.Telegram.WebApp;
    webapp.ready();
</script>
</body>
</html>
  1. מתקינים https://telebit.cloud או ngrok או כלי דומה כדי לקבל URL ציבורי לסרביס שרץ אצלכם על המחשב.

  2. מפעילים מקומית שרת ווב בתיקייה שיצרנו, או אם יצרתם ווב אפ מתוחכם אפשר להפעיל את סקריפט הפיתוח שלו.

  3. מפעילים את טלביט לפורט של השרת שיצרתם. בדוגמה שלי אני מפעיל:

python -m http.server

כדי לקבל שרת ווב סטטי לקבצים על פורט 8000 ולכן אני מפעיל:

~/telebit http 8000

כדי לחבר את הפייתון ל URL הציבורי שקיבלתי מטלביט.

  1. שולחים הודעה ל Botfather עם הפקודה /newapp.

  2. עונים על המון שאלות. השאלה היחידה שחשובה שם היא ה URL של ה Web App. מכניסים שם את ה URL שקיבלנו מטלביט (זה שמחובר לשרת ווב שרץ אצלנו על המחשב).

  3. מקבלים מ botfather קישור. לחיצה על הקישור פותחת את ה miniapp שיצרתם בתוך טלגרם. עכשיו אפשר לעדכן את הקוד ולראות את השינויים בטלגרם.

  4. אחרי שמסיימים לפתח תוכלו להעלות את דף הווב לשרת אמיתי ולעדכן את הכתובת באמצעות שליחת הודעת /editapp ל botfather.