สำหรับนักพัฒนาที่ต้องการเข้าสู่ระบบนิเวศของ Telegram, Telegram Mini Apps ถือเป็นจุดเริ่มต้นที่ยอดเยี่ยม ไม่เพียงแต่จะเข้าถึงผู้ใช้จำนวนมหาศาลเท่านั้น แต่ยังสามารถผสานรวมกับฟีเจอร์ต่างๆ เช่น การชำระเงินและบอทได้อย่างลึกซึ้ง อย่างไรก็ตาม หลายคนติดขัดตั้งแต่เริ่มต้น: ควรใช้เทคโนโลยีสแต็คแบบใด? จะตั้งค่าสภาพแวดล้อมการพัฒนาอย่างไร? และจะทำให้โปรเจกต์ในเครื่องทำงานบน Telegram ได้จริงได้อย่างไร?
บทความนี้จะแนะนำกระบวนการพัฒนาตั้งแต่เริ่มต้นจนสำเร็จ โดยอ้างอิงจาก กรณีศึกษาแอปสั่งอาหารที่สมจริง (คล้ายกับ Durer King) ไม่ว่าคุณจะเป็นนักพัฒนา Front-end หรือผู้จัดการผลิตภัณฑ์ที่ต้องการสำรวจระบบนิเวศของ Telegram บทความนี้จะช่วยให้คุณเริ่มต้นได้อย่างรวดเร็ว
Telegram ไม่ได้เป็นเพียงแอปพลิเคชันส่งข้อความ แต่ระบบนิเวศที่เปิดกว้างของแอปพลิเคชันยังมอบพื้นที่อันกว้างใหญ่สำหรับการสร้างสรรค์ของนักพัฒนา:
ในกรณีศึกษาของบทความนี้ เราจะสร้างระบบสั่งอาหารที่สมบูรณ์ซึ่งประกอบด้วย Web App + Telegram Bot + ฟังก์ชันการชำระเงิน เราจะใช้ React.js สำหรับ Front-end และ Node.js สำหรับ Back-end พร้อมทั้งผสานรวมความสามารถในการชำระเงินอย่างเป็นทางการของ Telegram
ก่อนที่เราจะเริ่มอย่างเป็นทางการ เราจำเป็นต้องกำหนดแนวทางเทคโนโลยี:
เป็นที่น่าสังเกตว่า Telegram Mini Apps บังคับใช้ โปรโตคอล HTTPS ซึ่งหมายความว่าในระหว่างการพัฒนาในเครื่อง เราจำเป็นต้องกำหนดค่าใบรับรอง SSL ด้วย เราจะอธิบายวิธีแก้ปัญหานี้โดยละเอียดในภายหลัง
Telegram Mini Apps ทั้งหมดจำเป็นต้องเปิดใช้งานผ่าน Bot ก่อนอื่น เราจะสร้างบอทผ่าน BotFather:
@BotFather ใน Telegram แล้วเปิดการสนทนา/newbotโทเค็นนี้เปรียบเสมือนกุญแจที่ใช้เชื่อมต่อแอปพลิเคชันของคุณกับเซิร์ฟเวอร์ Telegram
ต่อไป เราจะใช้ Telegram Mini App SDK อย่างเป็นทางการเพื่อสร้างโปรเจกต์อย่างรวดเร็ว:
# สร้างโปรเจกต์ React + TypeScript
npx create-react-app my-telegram-app --template typescript
cd my-telegram-app
# ติดตั้ง Telegram SDK
npm install @twa-dev/sdk
SDK มี API ที่หลากหลาย เช่น การรับข้อมูลผู้ใช้ การเรียกใช้อินเทอร์เฟซการชำระเงิน การส่งข้อความ ฯลฯ เมื่อติดตั้งเสร็จแล้ว ให้เปิด VS Code เพื่อเริ่มโปรเจกต์:
npm start
ตอนนี้คุณจะเห็นโปรเจกต์ทำงานที่ http://localhost:3000 แต่นั่นยังไม่เพียงพอ - Telegram กำหนดให้ Mini Apps ทุกตัวต้องเข้าถึงได้ผ่าน HTTPS
นักพัฒนาหลายคนติดขัดในขั้นตอนนี้: จะใช้ HTTPS ระหว่างการพัฒนาในเครื่องได้อย่างไร? มีสองวิธีแก้ปัญหา:
แก้ไขสคริปต์การเริ่มต้นใน package.json:
"scripts": {
"start": "HTTPS=true react-scripts start"
}
วิธีนี้จะทำให้โปรเจกต์ใช้ใบรับรองที่ลงนามด้วยตัวเองโดยอัตโนมัติ และทำงานที่ https://localhost:3000
หากคุณต้องการทดสอบจากระยะไกล (เช่น บนโทรศัพท์มือถือ) คุณสามารถใช้ ngrok เพื่อแมปบริการในเครื่องของคุณไปยังเครือข่ายสาธารณะ:
ngrok http 3000
ngrok จะสร้างที่อยู่ HTTPS สาธารณะ คัดลอกที่อยู่นั้นแล้วคุณสามารถใช้ใน Telegram ได้
ตอนนี้เราจะบอก Telegram ว่าจุดเริ่มต้นของ Mini App ของบอทอยู่ที่ไหน กลับไปที่ BotFather:
/mybots แล้วเลือกบอทที่คุณเพิ่งสร้างBot Settings → Menu Buttonhttps://your-ngrok-url.io)เมื่อเสร็จแล้ว ให้เปิดบอทของคุณ คลิกปุ่ม Menu ที่ด้านล่าง แล้ว Mini App จะเปิดขึ้นภายใน Telegram!
ลบโค้ดเริ่มต้นของ React ออก คงไว้แต่โครงสร้างหลัก:
import { useEffect } from 'react';
import './App.css';
function App() {
useEffect(() => {
// เริ่มต้น Telegram SDK
const tg = (window as any).Telegram.WebApp;
tg.ready();
console.log('Telegram WebApp ได้โหลดแล้ว');
}, []);
return (
<div className="App">
<h1>Hello Telegram!</h1>
</div>
);
}
export default App;
บันทึกและรีเฟรชใน Telegram คุณควรจะเห็นหน้า "Hello Telegram!" พร้อมกับบันทึกที่แสดงว่า SDK เริ่มต้นสำเร็จในคอนโซล
เพื่อให้แน่ใจว่าการแสดงผลจะเหมือนกันในอุปกรณ์ต่างๆ ขอแนะนำให้ใช้ Normalize.css และกำหนดสไตล์ทั่วโลก:
/* App.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: var(--tg-theme-bg-color);
color: var(--tg-theme-text-color);
}
Telegram มีชุด ตัวแปรธีม การใช้ตัวแปรเหล่านี้จะทำให้แอปของคุณปรับให้เข้ากับโหมดมืด/สว่างของผู้ใช้โดยอัตโนมัติ
เมื่อทำตามขั้นตอนข้างต้นแล้ว คุณก็จะมีเฟรมเวิร์ก Telegram Mini App ที่สามารถใช้งานได้ ในขั้นต่อไป คุณสามารถ:
หากคุณต้องการ เบราว์เซอร์ป้องกันการเชื่อมโยง ในสถานการณ์ต่างๆ เช่น การจัดการหลายบัญชี การทดสอบอัตโนมัติ คุณสามารถพิจารณาใช้ MasLogin ซึ่งจะช่วยให้คุณจำลองสภาพแวดล้อมที่แตกต่างกันในระหว่างการพัฒนาและทดสอบ เพื่อหลีกเลี่ยงความเสี่ยงของบัญชี
หากคุณใช้ ngrok เวอร์ชันฟรี ที่อยู่จะเปลี่ยนแปลงทุกครั้งที่รีสตาร์ท แนะนำให้:
API ที่ใช้บ่อย ได้แก่:
window.Telegram.WebApp.ready() - เริ่มต้นwindow.Telegram.WebApp.MainButton - ควบคุมปุ่มหลักwindow.Telegram.WebApp.initData - รับข้อมูลผู้ใช้window.Telegram.WebApp.close() - ปิด Mini Appดูเอกสารฉบับสมบูรณ์ได้ที่ Telegram WebApp API
Telegram มีสภาพแวดล้อม Sandbox ให้คุณดีบักโดยใช้ข้อมูลประจำตัวการชำระเงินทดสอบ ดูรายละเอียดขั้นตอนได้ที่ เอกสารการชำระเงินอย่างเป็นทางการ
จากบทความนี้ คุณได้เรียนรู้เกี่ยวกับกระบวนการพัฒนาหลักของ Telegram Mini Apps โปรดจำไว้ว่า: สร้างเวอร์ชันที่ใช้งานได้น้อยที่สุดก่อน จากนั้นจึงค่อยๆ ปรับปรุง ตอนนี้ลงมือทำเลย และสร้างแอปพลิเคชันระบบนิเวศ Telegram ของคุณเอง!
โครงร่าง
