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.
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.
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 ở:
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.
Quy trình cốt lõi của trò chơi này là:
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.
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.
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:
thirdweb Rock Paper Scissors DemoWeb3 Rock Paper Scissors Mini GameLú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.
Mở terminal và chạy:
bun create vite
Chọn:
thirdweb-telegram-miniappReactTypeScript + SWCDi chuyển vào thư mục dự án:
cd thirdweb-telegram-miniapp
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
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.
npm run dev
Theo mặc định, nó sẽ khởi động dịch vụ tại http://localhost:5174.
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!
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
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>
);
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!
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ả.
Quay lại thirdweb Dashboard, nhấp vào Contracts > Deploy, chọn Token Drop.
Cấu hình:
Rock Paper Scissors TokenRPSBase SepoliaSau 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",
});
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ọ.
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!
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>
import { useDisconnect, useActiveWallet } from "thirdweb/react";
const wallet = useActiveWallet();
const { disconnect } = useDisconnect();
<button onClick={() => disconnect(wallet)}>Đăng xuất</button>
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:
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í.
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.
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.
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.
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ế.
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.
Tổng quan
