พัฒนา Telegram Bot และ Mini App ด้วย Next.js โปรเจกต์เดียว

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

บทความนี้จะนำเสนอ แนวคิดการพัฒนาใหม่ ที่ใช้โปรเจกต์ Next.js เพียงโปรเจกต์เดียวเพื่อสร้างทั้ง Telegram Bot และ Mini App อย่างแท้จริง ทำให้ โค้ดชุดเดียว, การปรับใช้ครั้งเดียว, และการผสานรวมที่ไร้รอยต่อ คุณจะได้เรียนรู้วิธีสร้างระบบเกมสะสมแต้มที่สมบูรณ์แบบ รวมถึงรางวัลการเช็คอินรายวัน, การชำระเงินจริงด้วย Telegram Stars, และฟังก์ชันการแจ้งเตือนแบบเรียลไทม์

ทำไมต้องเลือก Next.js ในการพัฒนา Bot และ Mini App แบบครบวงจร?

ในรูปแบบดั้งเดิม นักพัฒนาจำเป็นต้อง:

• ปรับใช้บริการแบ็กเอนด์ของ Bot แยกต่างหาก
• ปรับใช้แอปพลิเคชันฟรอนต์เอนด์ของ Mini App แยกต่างหาก
• ดำเนินการเชื่อมต่อข้อมูลระหว่างสองโปรเจกต์
• บำรุงรักษาตัวแปรสภาพแวดล้อมและการกำหนดค่าสองชุด

แต่ด้วย โซลูชันแบบครบวงจรของ Next.js คุณจะสามารถ:

• ที่เก็บโค้ดเดียว จัดการฟังก์ชันทั้งหมด
• เส้นทาง API ที่ใช้ร่วมกัน จัดการคำสั่ง Bot, คำขอ Mini App, และตรรกะการชำระเงิน
• ปรับใช้แบบรวมศูนย์ บนแพลตฟอร์มเช่น Vercel เพื่อลดต้นทุนการดำเนินงาน
• ข้อมูลเชื่อมต่อกันโดยธรรมชาติ โดยไม่ต้องมีกลไกซิงโครไนซ์เพิ่มเติม

วิธีนี้เหมาะอย่างยิ่งสำหรับการทดสอบแนวคิดอย่างรวดเร็ว, การพัฒนาผลิตภัณฑ์ MVP, หรือให้นักพัฒนาอิสระสามารถเปิดตัวโปรเจกต์ได้อย่างรวดเร็ว

---

การสาธิตฟังก์ชันหลัก: โปรเจกต์นี้ทำอะไรได้บ้าง?

เราจะสร้าง ระบบเกมสะสมแต้ม ที่มาพร้อมกับฟังก์ชันดังต่อไปนี้:

• รางวัลการเช็คอินรายวัน ผู้ใช้สามารถรับ 100 แต้มทุกๆ 24 ชั่วโมง พร้อมการแสดงเวลานับถอยหลังแบบเรียลไทม์
• การชำระเงินด้วย Telegram Stars ผู้ใช้ซื้อแต้มด้วยเงินจริง รองรับการทดสอบการคืนเงินทันที
• การจัดการคำสั่ง Bot รองรับคำสั่งทั่วไปเช่น /start, /help เพื่อเปิด Mini App ในคลิกเดียว
• การแจ้งเตือนแบบพุชเรียลไทม์ การดำเนินการต่างๆ เช่น การชำระเงินสำเร็จ, การคืนเงินเสร็จสมบูรณ์ จะถูกส่งเป็นการแจ้งเตือนผ่าน Bot

ทั้งระบบทำงานอยู่บน แอปพลิเคชัน Next.js เดียว การโต้ตอบระหว่าง Bot และ Mini App เป็นไปอย่างราบรื่น

---

สิ่งที่ต้องเตรียมก่อนเริ่ม

ก่อนเริ่มการพัฒนาอย่างเป็นทางการ คุณต้องเตรียมเครื่องมือดังต่อไปนี้:

1. บัญชี Telegram ใช้สำหรับสร้าง Bot และทดสอบ Mini App
2. Node.js 18+ หากยังไม่ได้ติดตั้ง ให้ไปที่ nodejs.org เพื่อดาวน์โหลด
3. Ngrok ใช้สำหรับสร้างอุโมงค์ HTTPS ระหว่างการพัฒนาในเครื่อง เนื่องจาก Telegram กำหนดให้ Webhook และ Mini App ต้องใช้ HTTPS

วิธีรับ Ngrok

• เข้าไปที่ ngrok.com เพื่อสมัครบัญชีฟรี
• ดาวน์โหลดเวอร์ชันที่ตรงกับระบบปฏิบัติการของคุณ
• แตกไฟล์ไปยังโฟลเดอร์เฉพาะ
• รัน ngrok config add-authtoken <โทเค็นของคุณ> เพื่อเชื่อมโยงบัญชี
• หลังจากเสร็จสิ้น คุณสามารถรัน ngrok http 3000 ได้ตลอดเวลาในโฟลเดอร์นี้

---

การตั้งค่าโปรเจกต์อย่างรวดเร็ว (เริ่มต้นภายใน 5 นาที)

1. ดึงโค้ดโปรเจกต์และติดตั้ง dependencies

คุณสามารถรับซอร์สโค้ดฉบับเต็มและเอกสารอย่างละเอียดได้จากช่อง Telegram ที่เกี่ยวข้อง (ลิงก์เฉพาะสามารถค้นหาได้ในคำอธิบายวิดีโอต้นฉบับ)

git clone <ที่อยู่คลังโค้ดโปรเจกต์>
cd <ไดเรกทอรีโปรเจกต์>
npm install

2. การกำหนดค่าตัวแปรสภาพแวดล้อม

สร้างไฟล์ .env.local ในไดเรกทอรีรากของโปรเจกต์ เพื่อจัดเก็บข้อมูลที่ละเอียดอ่อน:

TELEGRAM_BOT_TOKEN=โทเค็น Bot ของคุณ
NEXT_PUBLIC_APP_URL=ที่อยู่ Ngrok ของคุณ

หมายเหตุสำคัญ: ตรวจสอบให้แน่ใจว่า .env.local ได้ถูกเพิ่มใน .gitignore เพื่อหลีกเลี่ยงการเปิดเผย Bot Token

3. สร้าง Telegram Bot

• เปิด Telegram ค้นหา BotFather
• ส่ง /newbot เพื่อสร้าง Bot ใหม่
• ตั้งชื่อ Bot และชื่อผู้ใช้ (ต้องลงท้ายด้วย bot)
• คัดลอก Bot Token ที่สร้างขึ้นและเก็บไว้ใน .env.local

4. เริ่ม Ngrok และเซิร์ฟเวอร์พัฒนา

# Terminal 1: เริ่ม Ngrok
ngrok http 3000

# Terminal 2: เริ่มเซิร์ฟเวอร์พัฒนา Next.js
npm run dev

# Terminal 3: ตั้งค่า Webhook
npm run webhook:setup

หากทุกอย่างเป็นไปด้วยดี คุณจะเห็นข้อความ "Webhook set successfully"

5. ตั้งค่าปุ่มเมนู Mini App

• กลับไปที่ BotFather ส่ง /mybots เลือก Bot ของคุณ
• คลิก Bot Settings → Menu Button
• กรอก URL (ใช้ที่อยู่ HTTPS ที่ Ngrok จัดหาให้) และข้อความบนปุ่ม (เช่น "Play Game")

ตอนนี้ เมื่อผู้ใช้เปิด Bot ของคุณ พวกเขาจะเห็นปุ่มสำหรับเริ่มเกม คลิกเพื่อเข้าสู่หน้าจอ Mini App!

---

การวิเคราะห์โค้ดหลัก: Bot และ Mini App ทำงานร่วมกันได้อย่างไร?

Endpoint ของ Webhook: ศูนย์กลางข้อความของ Bot

การอัปเดตทั้งหมดที่ส่งโดย Telegram (คำสั่งของผู้ใช้, การเรียกกลับการชำระเงิน ฯลฯ) จะถูกส่งผ่าน Webhook ไปยังเส้นทาง /api/telegram/webhook

ประเภทข้อความหลักที่ประมวลผล ได้แก่:

• คำสั่งของผู้ใช้: /start, /help ฯลฯ
• การยืนยันก่อนการชำระเงิน: การตรวจสอบเบื้องต้นหลังจากผู้ใช้คลิกปุ่มชำระเงิน
• การเรียกกลับการชำระเงินสำเร็จ: ยืนยันการทำธุรกรรมเสร็จสมบูรณ์และมอบแต้ม
• คำขอคืนเงิน: การทดสอบกระบวนการคืนเงินได้อย่างรวดเร็วในระหว่างการพัฒนา

เมื่อผู้ใช้ส่ง /start เป็นครั้งแรก Bot จะส่งปุ่ม "เริ่มเกม" ทันที โดยไม่ต้องมีการนำทางเพิ่มเติม

กระบวนการชำระเงินด้วย Telegram Stars

หัวใจหลักของฟังก์ชันการชำระเงินคือเส้นทาง /api/buy-points:

1. ผู้ใช้คลิก "ซื้อแต้ม" ใน Mini App
2. เรียกใช้ Telegram Bot API เพื่อสร้างใบแจ้งหนี้ (createInvoiceLink)
3. ใบแจ้งหนี้จะแสดงในหน้าชำระเงินดั้งเดิมของ Telegram
4. หลังจากผู้ใช้ชำระเงินเสร็จสมบูรณ์ Webhook จะรับการแจ้งเตือน
5. ระบบจะอัปเดตแต้มของผู้ใช้และส่งข้อความใบเสร็จ

การกำหนดค่าที่สำคัญ:

• provider_token ปล่อยว่างไว้ (โหมด Telegram Stars)
• currency ตั้งเป็น XTR
• prices มีหน่วยเป็นจำนวนดาว (ไม่ใช่เซนต์)

สิทธิประโยชน์สำหรับนักพัฒนา: หลังจากการซื้อแต่ละครั้ง ระบบจะส่งคืน ID ใบเสร็จ ซึ่งคุณสามารถใช้คำสั่ง /refund <ID ใบเสร็จ> เพื่อทดสอบการคืนเงินได้ทันที โดยไม่ต้องรอการอนุมัติหรือการจัดการด้วยตนเอง สิ่งนี้มีประสิทธิภาพอย่างยิ่งสำหรับการทดสอบกระบวนการชำระเงินจริง

ระบบรางวัลการเช็คอินรายวัน

ในเส้นทาง /api/claim-daily เราได้นำกลไกการให้สิ่งจูงใจตามเวลามาใช้:

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

ส่วนหน้า (Frontend) ใช้ คอมโพเนนต์การนับถอยหลังแบบเรียลไทม์ ซึ่งจะอัปเดตเวลาที่เหลือทุกวินาที ให้ผู้ใช้ทราบได้อย่างชัดเจนว่าจะสามารถรับรางวัลได้อีกครั้งเมื่อใด รูปแบบนี้สามารถขยายไปยังรูปแบบการเล่นเกมอื่นๆ ที่ต้องจำกัดเวลาได้ (เช่น การฟื้นฟูพลังงาน, การรอคูลดาวน์ในการหมุนวงล้อ)

---

ข้อควรพิจารณาในการปรับใช้ในสภาพแวดล้อมจริง

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

• ฐานข้อมูล: ใช้ PostgreSQL หรือ MongoDB แทนการจัดเก็บในหน่วยความจำ
• การยืนยันตัวตนผู้ใช้: ตรวจสอบลายเซ็นข้อมูลของ Telegram Web App เพื่อป้องกันคำขอปลอมแปลง
• การป้องกันการจำกัดอัตรา: ป้องกันการขอแต้มหรือใช้ API การชำระเงินอย่างไม่เหมาะสม
• การเฝ้าระวังบันทึก: เชื่อมต่อบริการติดตามข้อผิดพลาด (เช่น Sentry)
• ความปลอดภัยของ Webhook: ตรวจสอบว่าแหล่งที่มาของคำขอมาจากเซิร์ฟเวอร์ Telegram จริง

แพลตฟอร์มที่แนะนำสำหรับการปรับใช้:

• Vercel: ปรับใช้โดยไม่ต้องกำหนดค่า, HTTPS อัตโนมัติ
• Heroku / Railway: เหมาะสำหรับสถานการณ์ที่ต้องการการเชื่อมต่อระยะยาว
• Cloudflare Workers: โซลูชัน Edge Computing, เร่งความเร็วทั่วโลก

เมื่อปรับใช้ อย่าลืมอัปเดต Webhook URL และ ลิงก์เมนู Mini App เป็นชื่อโดเมนของสภาพแวดล้อมจริง

---

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

ทำไมต้องใช้ Ngrok? ใช้ localhost ไม่ได้เหรอ?

ทั้ง Webhook ของ Telegram และ Mini App ต้องการ โปรโตคอล HTTPS localhost ไม่สามารถตอบสนองความต้องการนี้ได้ Ngrok สามารถสร้างอุโมงค์ HTTPS ที่เข้าถึงได้จากเครือข่ายสาธารณะ ซึ่งจะส่งต่อคำขอไปยังเซิร์ฟเวอร์พัฒนาในเครื่องของคุณ

จะทดสอบการชำระเงินจริงโดยไม่ต้องเสียเงินได้อย่างไร?

ในระหว่างขั้นตอนการพัฒนา คุณสามารถซื้อ Telegram Stars จำนวนเล็กน้อย (ขั้นต่ำไม่กี่เซนต์) จากนั้นใช้คำสั่ง /refund เพื่อคืนเงินทันที วิธีนี้ช่วยให้คุณทดสอบกระบวนการชำระเงิน, การเรียกกลับ Webhook, และตรรกะการคืนเงินตามขั้นตอนจริงได้ โดยไม่ต้องเติมเงินซ้ำๆ

สามารถใช้การจัดเก็บในหน่วยความจำต่อไปในสภาพแวดล้อมจริงได้หรือไม่?

แน่นอนไม่ได้ การจัดเก็บในหน่วยความจำจะสูญเสียข้อมูลทั้งหมดเมื่อเซิร์ฟเวอร์รีสตาร์ท คุณต้องใช้ฐานข้อมูลถาวร (เช่น PostgreSQL) และมีแผนสำรองและการย้ายข้อมูล

ประโยชน์หลักของโซลูชันแบบครบวงจรของ Next.js คืออะไร?

ข้อได้เปรียบที่ใหญ่ที่สุดคือ ประสิทธิภาพในการพัฒนาและต้นทุนการบำรุงรักษาที่ลดลง คุณไม่ต้อง:

• จัดการคลังโค้ดสองชุด
• กังวลเรื่องข้อมูลที่ไม่สอดคล้องกันระหว่างแบ็กเอนด์และฟรอนต์เอนด์
• กำหนดค่า CORS และการเชื่อมต่อ API ที่ซับซ้อน
• ปรับใช้และตรวจสอบสองบริการแยกต่างหาก

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

สถาปัตยกรรมนี้เหมาะสำหรับการใช้งานขนาดใหญ่หรือไม่?

สำหรับผลิตภัณฑ์ MVP และแอปพลิเคชันขนาดกลางถึงขนาดย่อมนั้นเพียงพอแล้ว หากจำนวนผู้ใช้งานรายวันถึงระดับล้าน ควรพิจารณาแยกแบ็กเอนด์ของ Bot และฟรอนต์เอนด์ของ Mini App ออกจากกัน โดยใช้สถาปัตยกรรมไมโครเซอร์วิสและคิวข้อความเฉพาะเพื่อจัดการกับปริมาณงานที่สูง

---

สรุป

ผ่านการสาธิตภาคปฏิบัติในบทความนี้ คุณได้เรียนรู้ทักษะหลักในการสร้างแอปพลิเคชันแบบครบวงจรสำหรับ Telegram Bot + Mini App ด้วย Next.js รูปแบบการพัฒนานี้ช่วยให้คุณสามารถทดสอบแนวคิดได้อย่างรวดเร็ว, ลดต้นทุนการพัฒนา, และวางรากฐานที่แข็งแกร่งสำหรับการขยายในอนาคต ลองลงมือทำทันทีและสร้างเกม Telegram ขนาดเล็กของคุณเองโดยใช้เวลาสั้นที่สุด!