MasLogin · Blog

Hướng dẫn tạo trò chơi Web3 không phí gas trên Telegram Mini App

Ngày 2025-12-10MasLoginĐọc trong 9 phút

Gần đây, Telegram đã chính thức mở quyền truy cập Mini App (Ứng dụng nhỏ) cho các nhà phát triển, cho phép bạn tạo ra trải nghiệm tương tác giống như ứng dụng gốc bên trong Telegram. Hôm nay, chúng tôi sẽ hướng dẫn bạn từng bước xây dựng một Trò chơi Web3 đơn giản nhưng hoàn chỉnh, nơi người dùng chỉ cần nhập email để tạo ví, chơi trò oẳn tù tì và nhận phần thưởng token — hoàn toàn không yêu cầu người dùng thanh toán phí Gas.

Trong bài viết này

MasLogin

Trình duyệt chống phát hiện cho vận hành nhiều tài khoản

Hồ sơ trình duyệt độc lập
Tự động hóa RPA
Cộng tác nhóm

Tải miễn phí

Hướng dẫn này không chỉ dạy bạn cách tạo và triển khai một Telegram Mini App, mà còn cho thấy cách sử dụng các tính năng miễn phí của thirdweb SDK để triển khai các khả năng cốt lõi của Web3 như Account Abstraction, tạo ví và airdrop token.

Tại sao chọn Telegram Mini App cho dự án Web3?

Lưu lượng truy cập xã hội tự nhiên + trải nghiệm không rào cản

Telegram có hơn 800 triệu người dùng hoạt động hàng tháng và cho phép các nhà phát triển trên toàn thế giới triển khai ứng dụng miễn phí. Đối với các dự án Web3, lợi thế của Telegram Mini App nằm ở:

Không cần tải xuống và cài đặt: Người dùng sử dụng trực tiếp bên trong Telegram.
Lan truyền nhanh qua mạng xã hội: Chia sẻ liên kết để thu hút người dùng mới.
Bộ công nghệ thống nhất: Dựa trên công nghệ Web, hỗ trợ các framework phổ biến như React/Vue.
Tương thích với thiết bị di động: Tự động tương thích với ứng dụng di động và máy tính để bàn.

Kết hợp với công nghệ Account Abstraction, bạn có thể cho phép người dùng sở hữu ví trên chuỗi chỉ bằng địa chỉ email, mà không cần tải xuống plugin ví — điều này rất quan trọng để giảm rào cản gia nhập cho các dự án Web3.

Chúng ta sẽ xây dựng cái gì? Một trò chơi Oẳn tù tì Web3 hoàn chỉnh

Quy trình cốt lõi của trò chơi này là:

Người dùng mở Mini App trong Telegram.
Đăng nhập bằng email, tự động tạo ví hợp đồng thông minh (Smart Account).
Chơi trò oẳn tù tì.
Sau khi thắng, nhấp vào "Nhận phần thưởng" để nhận token miễn phí vào ví.
Số dư hiển thị theo thời gian thực, có thể tiếp tục chơi hoặc thoát.

Toàn bộ quá trình không yêu cầu người dùng thanh toán bất kỳ khoản phí Gas nào, cũng không hiển thị các lời nhắc ký xác nhận phức tạp — đây là trải nghiệm Web3 liền mạch nhờ Account Abstraction + Gas Sponsorship.

Lựa chọn công nghệ cốt lõi và công cụ

Framework Frontend

Vite + React: Xây dựng giao diện người dùng nhanh chóng.
TypeScript: Tăng cường độ mạnh mẽ của mã nguồn.

Tích hợp khả năng Web3

thirdweb SDK: Cung cấp kết nối ví, Account Abstraction, tương tác hợp đồng.
vov/react-telegram-web-app: Thư viện tương thích chính thức của Telegram.

Mạng Blockchain

Base Sepolia Testnet (mạng thử nghiệm): Miễn phí, nhanh chóng, phù hợp để phát triển và demo.

Hỗ trợ phát triển

ngrok: Cho phép môi trường phát triển cục bộ có thể truy cập qua mạng công cộng, thuận tiện cho việc gỡ lỗi.

Bước 1: Tạo Telegram Mini App

1. Thêm BotFather và tạo Bot

Trong thanh tìm kiếm của Telegram, nhập @BotFather, tìm bot chính thức và nhấp vào "Start".

Nhập lệnh để tạo Bot mới:

/newbot

Làm theo hướng dẫn để nhập tên và tên người dùng (phải kết thúc bằng bot), ví dụ:

Tên: thirdweb YouTube Demo
Tên người dùng: thirdwebYouTubeBot

Sau khi tạo thành công, BotFather sẽ trả về một Token — hãy giữ nó cẩn thận, đây là phương tiện để bạn quản lý Bot của mình.

2. Tạo Mini App

Tiếp tục nhập vào BotFather:

/newapp

Chọn Bot bạn vừa tạo, sau đó điền lần lượt:

Tiêu đề: thirdweb Rock Paper Scissors Demo
Mô tả: Web3 Rock Paper Scissors Mini Game
Ảnh: Tải lên một ảnh bìa (kích thước khuyến nghị 640x360)
URL Web App: Để trống tạm thời, chúng ta sẽ điền sau.

Lúc này, Telegram sẽ yêu cầu bạn cung cấp liên kết truy cập Mini App. Bây giờ chúng ta hãy phát triển ứng dụng trước, sau đó điền trường này.

Bước 2: Thiết lập môi trường phát triển cục bộ

Khởi tạo dự án

Mở terminal và chạy:

bun create vite

Chọn:

Tên dự án: thirdweb-telegram-miniapp
Framework: React
Variant: TypeScript + SWC

Di chuyển vào thư mục dự án:

cd thirdweb-telegram-miniapp

Cài đặt Dependency

Cài đặt thư viện tương thích Telegram Web App:

bun add @vov/react-telegram-web-app

Cài đặt thirdweb SDK:

bun add thirdweb

Cấu hình script Telegram

Mở index.html, thêm vào thẻ <head>:

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

Đoạn mã này cho Telegram biết rằng trang web của bạn sẽ chạy trong môi trường Mini App.

Khởi động máy chủ phát triển

npm run dev

Theo mặc định, nó sẽ khởi động dịch vụ tại http://localhost:5174.

Bước 3: Sử dụng ngrok để lộ liên kết cục bộ

Vì Telegram cần một URL công khai để truy cập Mini App của bạn, chúng ta sẽ sử dụng công cụ ngrok để tạm thời lộ dịch vụ cục bộ ra mạng bên ngoài.

Chạy:

ngrok http 5174

ngrok sẽ trả về một địa chỉ công khai, ví dụ:

https://abc123.ngrok.io

Sao chép liên kết này, quay lại BotFather, dán vào trường Web App URL.

Bây giờ, nhấp vào liên kết Mini App trong Telegram, bạn sẽ thấy trang mặc định của Vite!

Bước 4: Tích hợp thirdweb SDK và kết nối ví

Tạo Client ID

Truy cập thirdweb Dashboard, tạo một Client ID mới trong Settings > API Keys.

Sao chép Client ID vào tệp .env.local ở thư mục gốc của dự án:

VITE_CLIENT_ID=your_client_id_here

Cấu hình thirdweb Provider

Bao bọc ứng dụng trong src/main.tsx:

import { ThirdwebProvider } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";

const client = createThirdwebClient({
  clientId: import.meta.env.VITE_CLIENT_ID,
});

root.render(
  <ThirdwebProvider>
    <App />
  </ThirdwebProvider>
);

Thêm chức năng đăng nhập bằng email

Sử dụng thành phần ConnectButton do thirdweb cung cấp:

import { ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";

<ConnectButton
  client={client}
  wallets={[
    inAppWallet({
      auth: {
        options: ["email"],
      },
    }),
  ]}
/>

Người dùng nhập email → nhận mã xác minh → sau khi xác minh thành công, ví sẽ tự động được tạo → Hoàn tất!

Bước 5: Xây dựng logic trò chơi Oẳn tù tì

Triển khai logic cốt lõi trong src/components/RockPaperScissors.tsx:

type Choice = "rock" | "paper" | "scissors";
type Result = "win" | "lose" | "tie";

const choices: Choice[] = ["rock", "paper", "scissors"];

const getComputerChoice = (): Choice => {
  return choices[Math.floor(Math.random() * 3)];
};

const determineWinner = (player: Choice, computer: Choice): Result => {
  if (player === computer) return "tie";
  if (
    (player === "rock" && computer === "scissors") ||
    (player === "paper" && computer === "rock") ||
    (player === "scissors" && computer === "paper")
  ) {
    return "win";
  }
  return "lose";
};

Người dùng nhấp vào nút → Chọn ngẫu nhiên của máy tính → Xác định thắng/thua → Hiển thị kết quả.

Bước 6: Triển khai hợp đồng token ERC-20

Quay lại thirdweb Dashboard, nhấp vào Contracts > Deploy, chọn Token Drop.

Cấu hình:

Tên: Rock Paper Scissors Token
Ký hiệu: RPS
Mạng: Base Sepolia

Sau khi triển khai thành công, thiết lập Claim Conditions thành "Nhận công khai, không giới hạn".

Sao chép địa chỉ hợp đồng, thêm vào mã:

import { getContract } from "thirdweb";
import { baseSepolia } from "thirdweb/chains";

const contract = getContract({
  client,
  chain: baseSepolia,
  address: "0xYourContractAddress",
});

Bước 7: Triển khai Account Abstraction + Nhận Token Miễn Phí Gas

Bật Account Abstraction

Thêm vào ConnectButton:

<ConnectButton
  client={client}
  wallets={[inAppWallet({ auth: { options: ["email"] } })]}
  accountAbstraction={{
    chain: baseSepolia,
    sponsorGas: true,
  }}
/>

Như vậy, ví được tạo cho người dùng sẽ là Smart Contract Wallet (Ví hợp đồng thông minh), và chúng ta có thể trả phí Gas thay cho họ.

Nút nhận Token

import { TransactionButton } from "thirdweb/react";
import { claimTo } from "thirdweb/extensions/erc20";

<TransactionButton
  transaction={() =>
    claimTo({
      contract,
      to: account.address,
      quantity: "10",
    })
  }
  onTransactionConfirmed={() => alert("Token đã được nhận!")}
>
  Nhận 10 RPS
</TransactionButton>

Người dùng nhấp vào nút → thirdweb tự động xử lý giao dịch → Token được chuyển đến ví → Người dùng không phải trả bất kỳ chi phí nào!

Bước 8: Hiển thị số dư và chức năng đăng xuất

Đọc số dư Token

import { useReadContract } from "thirdweb/react";
import { getBalance } from "thirdweb/extensions/erc20";

const { data: tokenBalance } = useReadContract(getBalance, {
  contract,
  address: account.address,
});

<div>Số dư: {tokenBalance?.displayValue} RPS</div>

Thêm nút thoát

import { useDisconnect, useActiveWallet } from "thirdweb/react";

const wallet = useActiveWallet();
const { disconnect } = useDisconnect();

<button onClick={() => disconnect(wallet)}>Đăng xuất</button>

Kiểm tra quy trình hoàn chỉnh trên thiết bị di động

Trên điện thoại, mở Telegram, tìm Bot của bạn, nhấp vào liên kết Mini App:

Nhập email → Xác minh → Tạo ví.
Chơi trò chơi → Sau khi thắng, nhấp vào "Nhận phần thưởng".
Token đã được nhận, số dư cập nhật.
Không cần bất kỳ plugin hay thao tác ký xác nhận nào!

Câu hỏi thường gặp

Giải pháp này có miễn phí không?

Tất cả các tính năng thirdweb được sử dụng trong hướng dẫn này đều nằm trong gói miễn phí, bao gồm tạo ví, tương tác hợp đồng, Account Abstraction, v.v. Nếu bạn muốn đăng nhập trực tiếp bằng tài khoản Telegram (không cần xác minh email), bạn cần nâng cấp lên gói trả phí.

Làm thế nào để ngăn người dùng nhận token nhiều lần?

Bạn có thể thêm logic vào hợp đồng thông minh để giới hạn số lần nhận token cho mỗi địa chỉ, hoặc sử dụng tính năng Claim Conditions của thirdweb để thiết lập quy tắc như danh sách trắng, cửa sổ thời gian, v.v.

Có thể thay đổi sang blockchain khác không?

Hoàn toàn có thể. Chỉ cần thay thế chuỗi bạn muốn (ví dụ: Polygon, Arbitrum, v.v.) trong cấu hình getContract và accountAbstraction. thirdweb hỗ trợ hơn 900 chuỗi tương thích EVM.

Làm thế nào để triển khai lên môi trường production?

Triển khai mã nguồn lên các nền tảng như Vercel, Netlify, v.v., sau khi có tên miền chính thức, hãy thay thế URL Web App trong BotFather.

Chi phí tài trợ Gas có đắt không?

Gói miễn phí của thirdweb cung cấp một lượng tài trợ Gas nhất định mỗi tháng, đủ cho các dự án nhỏ hoặc thử nghiệm. Nếu lượng truy cập lớn, bạn có thể nâng cấp theo nhu cầu thực tế.

Tổng kết

Thông qua hướng dẫn này, bạn đã nắm vững cách xây dựng một ứng dụng Web3 hoàn chỉnh trong Telegram — từ tạo ví, logic trò chơi đến phân phối token, tất cả đều được tích hợp liền mạch. Bộ công nghệ này không chỉ phù hợp cho các trò chơi nhỏ, mà còn có thể mở rộng cho các trường hợp sử dụng khác như DeFi, NFT, ứng dụng xã hội, v.v.