Trong quá trình phát triển hệ sinh thái Telegram, nhiều nhà phát triển gặp phải một vấn đề chung: Làm thế nào để quản lý đồng thời hai bộ mã nguồn cho Bot và Mini App? Cách làm truyền thống là triển khai riêng biệt hai dự án, làm tăng chi phí bảo trì và dễ gặp sự cố trong đồng bộ dữ liệu và quy trình thanh toán.
Bài viết này sẽ giới thiệu một hướng tiếp cận phát triển hoàn toàn mới: sử dụng một dự án Next.js duy nhất để triển khai đồng thời cả Telegram Bot và Mini App, thực sự đạt được một bộ mã nguồn, một lần triển khai, tích hợp liền mạch. Bạn sẽ học cách xây dựng một hệ thống trò chơi ghi điểm hoàn chỉnh, bao gồm phần thưởng điểm danh hàng ngày, thanh toán bằng Telegram Stars thật và chức năng thông báo theo thời gian thực.
Ở mô hình truyền thống, nhà phát triển cần:
Với giải pháp tích hợp của Next.js, bạn có thể:
Cách tiếp cận này đặc biệt phù hợp để nhanh chóng kiểm tra ý tưởng, phát triển sản phẩm MVP hoặc để các nhà phát triển độc lập nhanh chóng ra mắt dự án.
Chúng ta sẽ xây dựng một hệ thống trò chơi ghi điểm, với các chức năng sau:
/start, /help, khởi chạy Mini App chỉ bằng một cú nhấp chuột.Toàn bộ hệ thống chạy trong một ứng dụng Next.js, tương tác giữa Bot và Mini App hoàn toàn liền mạch.
Trước khi bắt đầu phát triển, bạn cần chuẩn bị các công cụ sau:
ngrok config add-authtoken <mã token của bạn> để liên kết tài khoản.ngrok http 3000 bất cứ lúc nào trong thư mục đó.Bạn có thể lấy mã nguồn đầy đủ và tài liệu chi tiết từ các kênh Telegram liên quan (liên kết cụ thể có thể tìm thấy trong mô tả video gốc).
git clone <Địa chỉ kho mã nguồn dự án>
cd <Thư mục dự án>
npm install
Tạo tệp .env.local trong thư mục gốc của dự án để lưu trữ thông tin nhạy cảm:
TELEGRAM_BOT_TOKEN=Mã token Bot của bạn
NEXT_PUBLIC_APP_URL=Địa chỉ Ngrok của bạn
Lưu ý quan trọng: Đảm bảo .env.local đã được thêm vào .gitignore để tránh lộ thông tin Token Bot.
/newbot để tạo Bot mới.bot)..env.local.# Terminal 1: Khởi chạy Ngrok
ngrok http 3000
# Terminal 2: Khởi chạy máy chủ phát triển Next.js
npm run dev
# Terminal 3: Thiết lập Webhook
npm run webhook:setup
Nếu mọi thứ diễn ra suôn sẻ, bạn sẽ thấy thông báo "Webhook set successfully".
/mybots và chọn Bot của bạn.Bây giờ, khi người dùng mở Bot của bạn, họ sẽ thấy một nút để khởi chạy trò chơi, nhấp vào đó sẽ mở giao diện Mini App!
Tất cả các cập nhật được gửi từ Telegram (lệnh người dùng, phản hồi thanh toán, v.v.) sẽ được chuyển đến lộ trình /api/telegram/webhook thông qua Webhook.
Các loại tin nhắn chính được xử lý bao gồm:
/start, /help, v.v.Khi người dùng gửi lệnh /start lần đầu, Bot sẽ ngay lập tức gửi một nút "Khởi chạy trò chơi", không cần hướng dẫn thêm.
Chức năng thanh toán cốt lõi nằm ở lộ trình /api/buy-points:
createInvoiceLink).Cấu hình quan trọng:
provider_token để trống (chế độ Telegram Stars).currency đặt thành XTR.prices là số lượng sao (không phải xu).Lợi ích cho nhà phát triển: Mỗi lần mua sẽ trả về ID biên nhận, bạn có thể ngay lập tức sử dụng lệnh /refund <ID biên nhận> để kiểm tra hoàn tiền mà không cần chờ phê duyệt hoặc xử lý thủ công. Điều này cực kỳ hiệu quả để kiểm tra quy trình thanh toán thực tế.
Trong lộ trình /api/claim-daily, chúng ta đã triển khai cơ chế khuyến khích dựa trên thời gian:
Giao diện người dùng sử dụng thành phần đếm ngược thời gian thực, cập nhật thời gian còn lại mỗi giây, giúp người dùng biết rõ khi nào có thể nhận thưởng lại. Mô hình này có thể mở rộng cho bất kỳ lối chơi nào yêu cầu giới hạn thời gian (như hồi năng lượng, làm mới lượt quay, v.v.).
Mặc dù bài viết này sử dụng bộ nhớ để lưu trữ cho mục đích demo, nhưng bạn phải thực hiện các thay đổi sau trước khi triển khai dự án thực tế:
Nền tảng triển khai được đề xuất:
Khi triển khai, đừng quên cập nhật URL Webhook và liên kết menu Mini App với tên miền sản xuất của bạn.
Webhook và Mini App của Telegram đều yêu cầu sử dụng giao thức HTTPS, localhost không thể đáp ứng yêu cầu này. Ngrok có thể tạo một đường hầm HTTPS có thể truy cập từ mạng công cộng, chuyển tiếp yêu cầu đến máy chủ phát triển cục bộ của bạn.
Trong giai đoạn phát triển, bạn có thể mua một lượng nhỏ Telegram Stars (tối thiểu vài xu) và sau đó sử dụng lệnh /refund để hoàn tiền ngay lập tức. Điều này cho phép bạn kiểm tra quy trình thanh toán, phản hồi Webhook và logic hoàn tiền bằng quy trình thực tế mà không cần nạp tiền nhiều lần.
Tuyệt đối không. Lưu trữ trong bộ nhớ sẽ làm mất tất cả dữ liệu sau khi máy chủ khởi động lại. Bạn phải sử dụng cơ sở dữ liệu bền vững (như PostgreSQL) và chuẩn bị kế hoạch sao lưu và di chuyển dữ liệu.
Lợi ích lớn nhất là tăng hiệu quả phát triển và giảm chi phí bảo trì. Bạn không cần:
Tất cả logic nằm trong một dự án, tỷ lệ tái sử dụng mã cao, định vị lỗi nhanh hơn.
Đối với sản phẩm MVP và các ứng dụng vừa và nhỏ, hoàn toàn đủ. Nếu số lượng người dùng hoạt động hàng ngày đạt hàng triệu, nên cân nhắc tách backend Bot và frontend Mini App, sử dụng kiến trúc microservices và hàng đợi tin nhắn chuyên dụng để xử lý lưu lượng truy cập cao.
Thông qua buổi thực hành trong bài viết này, bạn đã nắm vững các kỹ năng cốt lõi để xây dựng ứng dụng tích hợp Telegram Bot và Mini App bằng Next.js. Mô hình phát triển này có thể giúp bạn nhanh chóng kiểm tra ý tưởng, giảm chi phí phát triển và tạo nền tảng vững chắc cho việc mở rộng sau này. Hãy bắt tay vào thử nghiệm ngay để tạo ra trò chơi Telegram của riêng bạn trong thời gian ngắn nhất!
Tổng quan
