หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Telegram Web Apps สำหรับตัวอย่างบอท

ตัวอย่าง html-file ที่มีการโต้ตอบแบบธรรมดากับ Telegram Web Apps API การสาธิตสด: แนบบอท

ลิงค์

  • เอกสารอย่างเป็นทางการ: https://core.telegram.org/bots/webapps
  • Live Demo Bot: แนบบอท
  • Telegram โปรโมชั่นบอท: Durger King

การตั้งค่าอย่างรวดเร็ว

0. โฮสต์เว็บแอปในหน้า GitHub

เว็บแอปจะต้องโฮสต์ที่ไหนสักแห่ง การโฮสต์บนพื้นที่เก็บข้อมูล GitHub เป็นวิธีที่รวดเร็วและฟรีในการทำ:

  1. สร้างที่เก็บ (หรือแยกอันนี้)
  2. บนที่เก็บ: การตั้งค่า> หน้า:
    • ที่มา: ปรับใช้จากสาขา
    • สาขา: Master, / (root), บันทึก
  3. รอสองสามนาทีเพื่อให้เว็บถูกปรับใช้ มันจะสามารถใช้ได้ที่: https://{github-username}.github.io/{repository-name}/{location-inside-repository} ในกรณีนี้: https://revenkroz.github.io/telegram-web-app-bot-example/index.html

1. แสดงปุ่มผู้ใช้เพื่อเปิดเว็บแอป มีสองวิธี:

  1. แสดงปุ่มเมนูพิเศษของผู้ใช้ (ใกล้กับฟิลด์อินพุตข้อความ):

    1. ไปหาบอทพ่อ
    2. เลือกบอทของคุณ
    3. Bot Settings - Menu Button - Specify.. / Edit menu button URL
    4. ส่ง URL ไปยังเว็บแอปของคุณ (ในกรณีนี้ https://revenkroz.github.io/telegram-web-app-bot-example/index.html )

  2. วิธีที่สองคือการส่งปุ่มพร้อมข้อมูลที่มี field web_app พร้อม URL ไปยังเว็บแอป: 

    {
    "text" : " Test web_app " ,
    "web_app" : {
        "url" : " https://revenkroz.github.io/telegram-web-app-bot-example/index.html "
    }
}

2. เพิ่มสคริปต์ลงในเว็บแอปของคุณ

ในการเชื่อมต่อเว็บแอปเข้ากับไคลเอนต์โทรเลขวางสคริปต์ telegram-web-app.js ในแท็ก <head> ก่อนที่สคริปต์อื่น ๆ โดยใช้รหัสนี้ (ข้อมูลเพิ่มเติม): 

 < script src =" https://telegram.org/js/telegram-web-app.js " > </ script >

เมื่อเชื่อมต่อสคริปต์วัตถุ window.Telegram.WebApp จะพร้อมใช้งาน

3. ทำสิ่งนั้น

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด