MasLogin · 博客

手把手教你用 Telegram Mini App 打造零Gas費 Web3 小遊戲

日期 2025-12-10MasLogin預計閱讀 7 分鐘

最近 Telegram 正式向開發者開放了 Mini App（小程序） 能力，這意味著你可以在 Telegram 內打造原生應用級的互動體驗。而今天，我們要帶你一步一步建構一款簡單但完整的 Web3 小遊戲，用戶只需輸入電子郵件即可創建錢包、玩剪刀石頭布遊戲並領取代幣獎勵——全程無需用戶支付 Gas 費用。

本文目錄

MasLogin

專業指紋瀏覽器，適合規模化多帳號營運

獨立瀏覽器環境
RPA 自動化
團隊協作

免費下載

這篇教學不僅會教你如何創建並部署一個 Telegram Mini App，還會展示如何用 thirdweb SDK 的免費功能，實現帳戶抽象 (Account Abstraction)、錢包創建、Token 空投等 Web3 核心能力。

為什麼選擇 Telegram Mini App 做 Web3 專案？

天然的社群流量 + 零門檻體驗

Telegram 擁有超過 8 億月活躍用戶，支援全球開發者免費部署應用。對於 Web3 專案來說，Telegram Mini App 的優勢在於：

無需下載安裝：用戶直接在 Telegram 內使用
社群裂變快：分享連結即可拉新
技術棧統一：基於 Web 技術，支援 React/Vue 等主流框架
適配行動端：天然適配手機與桌面客戶端

結合 帳戶抽象技術，你可以讓用戶無需下載錢包外掛程式，僅用電子郵件即可擁有鏈上錢包——這對降低 Web3 專案的用戶門檻至關重要。

我們要建構什麼？一個完整的 Web3 剪刀石頭布遊戲

這款遊戲的核心流程是：

用戶在 Telegram 內打開 Mini App
用電子郵件登入，自動生成智能合約錢包 (Smart Account)
玩剪刀石頭布遊戲
贏了之後點擊「領取獎勵」，免費獲得代幣到錢包
餘額即時顯示，可以繼續玩或退出

整個過程不需要用戶支付任何 Gas 費，也不會彈出複雜的簽名確認框——這就是 帳戶抽象 + 贊助 Gas 帶來的真實 Web3 無感體驗。

核心技術選型與工具

前端框架

Vite + React：快速搭建頁面
TypeScript：提升程式碼的健壯性

Web3 能力整合

thirdweb SDK：提供錢包連接、帳戶抽象、合約互動
vov/react-telegram-web-app：Telegram 官方適配庫

區塊鏈網路

Base Sepolia Testnet（測試網）：免費、快速，適合開發演示

開發輔助

ngrok：讓本地開發環境可透過公網存取，方便除錯

第一步：創建 Telegram Mini App

1. 新增 BotFather 並創建 Bot

在 Telegram 搜尋框輸入 @BotFather，找到官方機器人並點擊「開始」。

輸入指令創建新 Bot：

/newbot

依照提示輸入名稱和用戶名稱（必須以 bot 結尾），例如：

名稱: thirdweb YouTube Demo
用戶名稱: thirdwebYouTubeBot

創建成功後，BotFather 會返回一個 Token——請妥善保存，這是你管理 Bot 的憑證。

2. 創建 Mini App

繼續在 BotFather 輸入：

/newapp

選擇你剛才創建的 Bot，然後依序填寫：

標題：thirdweb Rock Paper Scissors Demo
簡介：Web3 Rock Paper Scissors Mini Game
圖片：上傳一張封面圖（尺寸建議 640×360）
Web App URL：暫時留空，我們稍後填寫

此時，Telegram 會提示你提供 Mini App 的存取連結。現在我們就先開發應用，再填這個欄位。

第二步：搭建本地開發環境

初始化專案

打開終端，執行：

bun create vite

選擇：

專案名稱：thirdweb-telegram-miniapp
框架：React
變體：TypeScript + SWC

進入專案目錄：

cd thirdweb-telegram-miniapp

安裝依賴

安裝 Telegram Web App 適配庫：

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

安裝 thirdweb SDK：

bun add thirdweb

設定 Telegram 腳本

打開 index.html，在 <head> 標籤內新增：

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

這段程式碼會告訴 Telegram，你的網頁需要在 Mini App 環境中運行。

啟動開發伺服器

npm run dev

預設會在 http://localhost:5174 啟動服務。

第三步：用 ngrok 暴露本地連結

因為 Telegram 需要一個公網 URL 才能存取你的 Mini App，我們使用 ngrok 工具暫時將本地服務暴露到外網。

執行：

ngrok http 5174

ngrok 會返回一個公網位址，例如：

https://abc123.ngrok.io

複製這個連結，回到 BotFather，貼上到 Web App URL 欄位。

現在點擊 Telegram 裡的 Mini App 連結，應該就能看到你的 Vite 預設頁面了！

第四步：整合 thirdweb SDK 與錢包連接

創建 Client ID

前往 thirdweb Dashboard，在 Settings > API Keys 創建一個新的 Client ID。

將 Client ID 複製到專案根目錄的 .env.local 檔案：

VITE_CLIENT_ID=your_client_id_here

設定 thirdweb Provider

在 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";
};

用戶點擊按鈕 → 隨機生成電腦選擇 → 判斷勝負 → 顯示結果。

第六步：部署 ERC-20 代幣合約

回到 thirdweb Dashboard，點擊 Contracts > Deploy，選擇 Token Drop。

設定：

名稱：Rock Paper Scissors Token
符號：RPS
網路：Base Sepolia

部署成功後，在 Claim Conditions 設定為「公開領取，無限制」。

複製合約位址，在程式碼中新增：

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

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

第七步：實現帳戶抽象 + 免 Gas 領取代幣

啟用帳戶抽象

在 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 連結：

輸入電子郵件 → 驗證 → 錢包生成
玩遊戲 → 贏了之後點擊「領取獎勵」
代幣到帳，餘額更新
無需任何外掛程式或簽名操作！

FAQ

這個方案免費嗎？

本教學使用的所有 thirdweb 功能都在免費方案內，包括錢包創建、合約互動、帳戶抽象等。如果你需要用 Telegram 帳號直接登入（無需電子郵件驗證），則需要升級到付費方案。

如何避免用戶重複領取代幣？

你可以在智能合約中新增邏輯限制每個地址的領取次數，或使用 thirdweb 的 Claim Conditions 功能設定白名單、時間窗口等規則。

能否換成其他區塊鏈？

完全可以。只需在 getContract 和 accountAbstraction 設定中替換為你想要的鏈（如 Polygon、Arbitrum 等）。thirdweb 支援超過 900 條 EVM 相容鏈。

如何部署到生產環境？

將程式碼部署到 Vercel、Netlify 等平台，取得正式網域名稱後替換 BotFather 中的 Web App URL 即可。

贊助 Gas 費用會不會很貴？

thirdweb 的免費方案每月提供一定額度的贊助 Gas，對於小型專案或測試完全足夠。如果流量大，可以根據實際需求升級。

總結

透過這篇教學，你已經掌握了如何在 Telegram 內建構一個完整的 Web3 應用——從錢包創建、遊戲邏輯到代幣發放，全部無縫整合。這套技術棧不僅適用於小遊戲，還可以擴展到 DeFi、NFT、社群應用等更多場景。