最近 Telegram 正式向開發者開放了 Mini App（小程序） 能力，這意味著你可以在 Telegram 內打造原生應用級的互動體驗。而今天，我們要帶你一步一步建構一款簡單但完整的 Web3 小遊戲，用戶只需輸入電子郵件即可創建錢包、玩剪刀石頭布遊戲並領取代幣獎勵——全程無需用戶支付 Gas 費用。
這篇教學不僅會教你如何創建並部署一個 Telegram Mini App，還會展示如何用 thirdweb SDK 的免費功能，實現帳戶抽象 (Account Abstraction)、錢包創建、Token 空投等 Web3 核心能力。
Telegram 擁有超過 8 億月活躍用戶，支援全球開發者免費部署應用。對於 Web3 專案來說，Telegram Mini App 的優勢在於：
結合 帳戶抽象技術，你可以讓用戶無需下載錢包外掛程式，僅用電子郵件即可擁有鏈上錢包——這對降低 Web3 專案的用戶門檻至關重要。
這款遊戲的核心流程是：
整個過程不需要用戶支付任何 Gas 費，也不會彈出複雜的簽名確認框——這就是 帳戶抽象 + 贊助 Gas 帶來的真實 Web3 無感體驗。
在 Telegram 搜尋框輸入 @BotFather，找到官方機器人並點擊「開始」。
輸入指令創建新 Bot：
/newbot
依照提示輸入名稱和用戶名稱（必須以 bot 結尾），例如：
名稱: thirdweb YouTube Demo
用戶名稱: thirdwebYouTubeBot
創建成功後，BotFather 會返回一個 Token——請妥善保存，這是你管理 Bot 的憑證。
繼續在 BotFather 輸入：
/newapp
選擇你剛才創建的 Bot，然後依序填寫：
thirdweb Rock Paper Scissors DemoWeb3 Rock Paper Scissors Mini Game此時，Telegram 會提示你提供 Mini App 的存取連結。現在我們就先開發應用，再填這個欄位。
打開終端，執行：
bun create vite
選擇：
thirdweb-telegram-miniappReactTypeScript + SWC進入專案目錄：
cd thirdweb-telegram-miniapp
安裝 Telegram Web App 適配庫：
bun add @vov/react-telegram-web-app
安裝 thirdweb SDK：
bun add thirdweb
打開 index.html，在 <head> 標籤內新增：
<script src="https://telegram.org/js/telegram-web-app.js"></script>
這段程式碼會告訴 Telegram，你的網頁需要在 Mini App 環境中運行。
npm run dev
預設會在 http://localhost:5174 啟動服務。
因為 Telegram 需要一個公網 URL 才能存取你的 Mini App，我們使用 ngrok 工具暫時將本地服務暴露到外網。
執行：
ngrok http 5174
ngrok 會返回一個公網位址，例如：
https://abc123.ngrok.io
複製這個連結，回到 BotFather，貼上到 Web App URL 欄位。
現在點擊 Telegram 裡的 Mini App 連結，應該就能看到你的 Vite 預設頁面了！
前往 thirdweb Dashboard，在 Settings > API Keys 創建一個新的 Client ID。
將 Client ID 複製到專案根目錄的 .env.local 檔案：
VITE_CLIENT_ID=your_client_id_here
在 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>
);
使用 thirdweb 提供的 ConnectButton 組件：
import { ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
<ConnectButton
client={client}
wallets={[
inAppWallet({
auth: {
options: ["email"],
},
}),
]}
/>
用戶輸入電子郵件 → 收到驗證碼 → 驗證成功後自動生成錢包 → 完成！
在 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";
};
用戶點擊按鈕 → 隨機生成電腦選擇 → 判斷勝負 → 顯示結果。
回到 thirdweb Dashboard，點擊 Contracts > Deploy，選擇 Token Drop。
設定：
Rock Paper Scissors TokenRPSBase Sepolia部署成功後，在 Claim Conditions 設定為「公開領取，無限制」。
複製合約位址，在程式碼中新增：
import { getContract } from "thirdweb";
import { baseSepolia } from "thirdweb/chains";
const contract = getContract({
client,
chain: baseSepolia,
address: "0xYourContractAddress",
});
在 ConnectButton 中新增：
<ConnectButton
client={client}
wallets={[inAppWallet({ auth: { options: ["email"] } })]}
accountAbstraction={{
chain: baseSepolia,
sponsorGas: true,
}}
/>
這樣用戶生成的錢包就是 智能合約錢包 (Smart Account)，我們可以代付 Gas 費。
import { TransactionButton } from "thirdweb/react";
import { claimTo } from "thirdweb/extensions/erc20";
<TransactionButton
transaction={() =>
claimTo({
contract,
to: account.address,
quantity: "10",
})
}
onTransactionConfirmed={() => alert("代幣已領取!")}
>
領取 10 RPS
</TransactionButton>
用戶點擊按鈕 → thirdweb 自動處理交易 → 代幣到帳 → 無需用戶支付任何費用！
import { useReadContract } from "thirdweb/react";
import { getBalance } from "thirdweb/extensions/erc20";
const { data: tokenBalance } = useReadContract(getBalance, {
contract,
address: account.address,
});
<div>餘額: {tokenBalance?.displayValue} RPS</div>
import { useDisconnect, useActiveWallet } from "thirdweb/react";
const wallet = useActiveWallet();
const { disconnect } = useDisconnect();
<button onClick={() => disconnect(wallet)}>退出登入</button>
在手機上打開 Telegram，搜尋你的 Bot，點擊 Mini App 連結：
本教學使用的所有 thirdweb 功能都在免費方案內，包括錢包創建、合約互動、帳戶抽象等。如果你需要用 Telegram 帳號直接登入（無需電子郵件驗證），則需要升級到付費方案。
你可以在智能合約中新增邏輯限制每個地址的領取次數，或使用 thirdweb 的 Claim Conditions 功能設定白名單、時間窗口等規則。
完全可以。只需在 getContract 和 accountAbstraction 設定中替換為你想要的鏈（如 Polygon、Arbitrum 等）。thirdweb 支援超過 900 條 EVM 相容鏈。
將程式碼部署到 Vercel、Netlify 等平台，取得正式網域名稱後替換 BotFather 中的 Web App URL 即可。
thirdweb 的免費方案每月提供一定額度的贊助 Gas，對於小型專案或測試完全足夠。如果流量大，可以根據實際需求升級。
透過這篇教學，你已經掌握了如何在 Telegram 內建構一個完整的 Web3 應用——從錢包創建、遊戲邏輯到代幣發放，全部無縫整合。這套技術棧不僅適用於小遊戲，還可以擴展到 DeFi、NFT、社群應用等更多場景。
大綱
