เริ่มพัฒนา Telegram Mini Apps ด้วยเคสแอปสั่งอาหารจริง

บทความนี้จะแนะนำกระบวนการพัฒนาตั้งแต่เริ่มต้นจนสำเร็จ โดยอ้างอิงจาก กรณีศึกษาแอปสั่งอาหารที่สมจริง (คล้ายกับ Durer King) ไม่ว่าคุณจะเป็นนักพัฒนา Front-end หรือผู้จัดการผลิตภัณฑ์ที่ต้องการสำรวจระบบนิเวศของ Telegram บทความนี้จะช่วยให้คุณเริ่มต้นได้อย่างรวดเร็ว

---

ทำไมต้องเลือก Telegram Mini Apps?

Telegram ไม่ได้เป็นเพียงแอปพลิเคชันส่งข้อความ แต่ระบบนิเวศที่เปิดกว้างของแอปพลิเคชันยังมอบพื้นที่อันกว้างใหญ่สำหรับการสร้างสรรค์ของนักพัฒนา:

• การผสานรวมการชำระเงินแบบเนทีฟ: ไม่จำเป็นต้องเชื่อมต่อกับบุคคลที่สาม ใช้ Telegram Payments เพื่อดำเนินการธุรกรรมให้เสร็จสมบูรณ์
• ต้นทุนการเข้าถึงผู้ใช้ต่ำ: ผู้ใช้ไม่จำเป็นต้องดาวน์โหลดแอปเพิ่มเติม เพียงเปิดใช้งานในหน้าต่างแชท
• ประสบการณ์การใช้งานข้ามแพลตฟอร์มที่สอดคล้องกัน: ไม่ว่าจะเป็นเวอร์ชันเว็บ มือถือ หรือเดสก์ท็อป ประสบการณ์ผู้ใช้จะเหมือนกันอย่างมาก

ในกรณีศึกษาของบทความนี้ เราจะสร้างระบบสั่งอาหารที่สมบูรณ์ซึ่งประกอบด้วย Web App + Telegram Bot + ฟังก์ชันการชำระเงิน เราจะใช้ React.js สำหรับ Front-end และ Node.js สำหรับ Back-end พร้อมทั้งผสานรวมความสามารถในการชำระเงินอย่างเป็นทางการของ Telegram

---

การเลือกเทคโนโลยีและการเตรียมการพัฒนา

ก่อนที่เราจะเริ่มอย่างเป็นทางการ เราจำเป็นต้องกำหนดแนวทางเทคโนโลยี:

• เฟรมเวิร์ก Front-end: React.js + TypeScript (Type-safe เหมาะสำหรับโปรเจกต์ขนาดกลางถึงใหญ่)
• บริการ Back-end: Node.js (เชื่อมต่อกับ Telegram API ได้อย่างราบรื่น)
• เครื่องมือพัฒนา: Telegram Mini App SDK (แนะนำอย่างเป็นทางการ ฟีเจอร์พร้อม)
• ข้อกำหนดด้านสภาพแวดล้อม: โปรโตคอล HTTPS (Telegram กำหนดให้ต้องมี)

เป็นที่น่าสังเกตว่า Telegram Mini Apps บังคับใช้ โปรโตคอล HTTPS ซึ่งหมายความว่าในระหว่างการพัฒนาในเครื่อง เราจำเป็นต้องกำหนดค่าใบรับรอง SSL ด้วย เราจะอธิบายวิธีแก้ปัญหานี้โดยละเอียดในภายหลัง

---

ขั้นตอนที่ 1: สร้าง Telegram Bot

Telegram Mini Apps ทั้งหมดจำเป็นต้องเปิดใช้งานผ่าน Bot ก่อนอื่น เราจะสร้างบอทผ่าน BotFather:

1. ค้นหา @BotFather ใน Telegram แล้วเปิดการสนทนา
2. ส่งคำสั่ง /newbot
3. ทำตามคำแนะนำเพื่อป้อนชื่อและชื่อผู้ใช้ของบอท
4. เมื่อสร้างสำเร็จ คุณจะได้รับ API Token (โปรดเก็บไว้อย่างปลอดภัย จะได้ใช้ในภายหลัง)

โทเค็นนี้เปรียบเสมือนกุญแจที่ใช้เชื่อมต่อแอปพลิเคชันของคุณกับเซิร์ฟเวอร์ Telegram

---

ขั้นตอนที่ 2: การเริ่มต้นโปรเจกต์และการติดตั้ง SDK

ต่อไป เราจะใช้ 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

---

ขั้นตอนที่ 3: การกำหนดค่าสภาพแวดล้อม HTTPS

นักพัฒนาหลายคนติดขัดในขั้นตอนนี้: จะใช้ HTTPS ระหว่างการพัฒนาในเครื่องได้อย่างไร? มีสองวิธีแก้ปัญหา:

วิธีที่ 1: ใช้ใบรับรอง SSL ในเครื่อง

แก้ไขสคริปต์การเริ่มต้นใน package.json:

"scripts": {
  "start": "HTTPS=true react-scripts start"
}

วิธีนี้จะทำให้โปรเจกต์ใช้ใบรับรองที่ลงนามด้วยตัวเองโดยอัตโนมัติ และทำงานที่ https://localhost:3000

วิธีที่ 2: ใช้ ngrok (แนะนำ)

หากคุณต้องการทดสอบจากระยะไกล (เช่น บนโทรศัพท์มือถือ) คุณสามารถใช้ ngrok เพื่อแมปบริการในเครื่องของคุณไปยังเครือข่ายสาธารณะ:

ngrok http 3000

ngrok จะสร้างที่อยู่ HTTPS สาธารณะ คัดลอกที่อยู่นั้นแล้วคุณสามารถใช้ใน Telegram ได้

---

ขั้นตอนที่ 4: การแนบ Web App เข้ากับ Bot

ตอนนี้เราจะบอก Telegram ว่าจุดเริ่มต้นของ Mini App ของบอทอยู่ที่ไหน กลับไปที่ BotFather:

1. ส่ง /mybots แล้วเลือกบอทที่คุณเพิ่งสร้าง
2. คลิก Bot Settings → Menu Button
3. ป้อนที่อยู่ HTTPS ที่คุณได้รับ (เช่น https://your-ngrok-url.io)

เมื่อเสร็จแล้ว ให้เปิดบอทของคุณ คลิกปุ่ม Menu ที่ด้านล่าง แล้ว Mini App จะเปิดขึ้นภายใน Telegram!

---

ขั้นตอนที่ 5: การเริ่มต้นโค้ดและการทดสอบ

ลบโค้ดเริ่มต้นของ 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 เริ่มต้นสำเร็จในคอนโซล

---

ขั้นตอนที่ 6: แนวทางมาตรฐานสไตล์และการกำหนดค่าทั่วโลก

เพื่อให้แน่ใจว่าการแสดงผลจะเหมือนกันในอุปกรณ์ต่างๆ ขอแนะนำให้ใช้ 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 ที่สามารถใช้งานได้ ในขั้นต่อไป คุณสามารถ:

• เพิ่มการกำหนดเส้นทางหน้าเว็บ: ใช้ React Router เพื่อนำทางไปยังหน้าต่างๆ
• ผสานรวม API Back-end: สร้างอินเทอร์เฟซสำหรับการจัดการคำสั่ง รายการสินค้า ฯลฯ โดยใช้ Node.js
• ผสานรวมฟังก์ชันการชำระเงิน: เรียกใช้ Telegram Payments API เพื่อทำธุรกรรมให้เสร็จสมบูรณ์
• ปรับปรุงประสบการณ์ผู้ใช้: เพิ่มแอนิเมชันโหลด ข้อความแสดงข้อผิดพลาด ตรรกะตะกร้าสินค้า ฯลฯ

หากคุณต้องการ เบราว์เซอร์ป้องกันการเชื่อมโยง ในสถานการณ์ต่างๆ เช่น การจัดการหลายบัญชี การทดสอบอัตโนมัติ คุณสามารถพิจารณาใช้ MasLogin ซึ่งจะช่วยให้คุณจำลองสภาพแวดล้อมที่แตกต่างกันในระหว่างการพัฒนาและทดสอบ เพื่อหลีกเลี่ยงความเสี่ยงของบัญชี

---

คำถามที่พบบ่อย (FAQ)

ทำไม Mini App ของฉันจึงไม่เปิดใน Telegram?

• ตรวจสอบว่าคุณใช้ โปรโตคอล HTTPS หรือไม่ (HTTP จะถูกบล็อก)
• ยืนยันว่าที่อยู่ Menu Button ของบอทถูกตั้งค่าอย่างถูกต้อง
• ตรวจสอบคอนโซลเบราว์เซอร์ว่ามีข้อความแสดงข้อผิดพลาดหรือไม่

ฉันต้องกำหนดค่า ngrok ใหม่ทุกครั้งที่แก้ไขระหว่างการพัฒนาในเครื่องหรือไม่?

หากคุณใช้ ngrok เวอร์ชันฟรี ที่อยู่จะเปลี่ยนแปลงทุกครั้งที่รีสตาร์ท แนะนำให้:

• อัปเกรดเป็น ngrok เวอร์ชันเสียเงิน (สามารถกำหนดโดเมนให้คงที่ได้)
• หรือใช้โซลูชันทางเลือกอื่น เช่น Cloudflare Tunnel

Telegram SDK รองรับฟังก์ชันใดบ้าง?

API ที่ใช้บ่อย ได้แก่:

• window.Telegram.WebApp.ready() - เริ่มต้น
• window.Telegram.WebApp.MainButton - ควบคุมปุ่มหลัก
• window.Telegram.WebApp.initData - รับข้อมูลผู้ใช้
• window.Telegram.WebApp.close() - ปิด Mini App

ดูเอกสารฉบับสมบูรณ์ได้ที่ Telegram WebApp API

ฉันจะทดสอบฟังก์ชันการชำระเงินใน Telegram ได้อย่างไร?

Telegram มีสภาพแวดล้อม Sandbox ให้คุณดีบักโดยใช้ข้อมูลประจำตัวการชำระเงินทดสอบ ดูรายละเอียดขั้นตอนได้ที่ เอกสารการชำระเงินอย่างเป็นทางการ

---

สรุป

จากบทความนี้ คุณได้เรียนรู้เกี่ยวกับกระบวนการพัฒนาหลักของ Telegram Mini Apps โปรดจำไว้ว่า: สร้างเวอร์ชันที่ใช้งานได้น้อยที่สุดก่อน จากนั้นจึงค่อยๆ ปรับปรุง ตอนนี้ลงมือทำเลย และสร้างแอปพลิเคชันระบบนิเวศ Telegram ของคุณเอง!