ล่าสุด Telegram ได้เปิดให้ใช้งานฟีเจอร์ Mini App (แอปขนาดเล็ก) อย่างเป็นทางการสำหรับนักพัฒนา ซึ่งหมายความว่าคุณสามารถสร้างประสบการณ์การใช้งานที่เหมือนแอปพลิเคชันเนทีฟภายใน Telegram ได้ และวันนี้ เราจะพาคุณไปทีละขั้นตอนในการสร้าง เกม Web3 ขนาดเล็ก ที่สมบูรณ์ แม้จะดูเรียบง่าย แต่ผู้ใช้เพียงแค่กรอกอีเมลก็สามารถสร้างกระเป๋าเงิน เล่นเป่ายิ้งฉุบ และรับรางวัลเป็นโทเค็นได้ — โดยที่ผู้ใช้ไม่ต้องเสียค่า Gas ตลอดกระบวนการ
บทช่วยสอนนี้ไม่เพียงแต่จะสอนวิธีสร้างและติดตั้งใช้งาน Telegram Mini App เท่านั้น แต่ยังจะแสดงให้เห็นถึงวิธีการใช้ฟีเจอร์ฟรีของ thirdweb SDK เพื่อจัดการกับฟังก์ชันหลักของ Web3 เช่น Account Abstraction, การสร้างกระเป๋าเงิน และการแจก Token Airdrop
Telegram มีผู้ใช้งานรายเดือนมากกว่า 800 ล้านคน และรองรับนักพัฒนาทั่วโลกให้ใช้งานแอปพลิเคชันได้ฟรี สำหรับโปรเจกต์ Web3 แล้ว ข้อดีของ Telegram Mini App คือ:
เมื่อรวมกับ เทคโนโลยี Account Abstraction คุณสามารถทำให้ผู้ใช้มีกระเป๋าเงินบนเชนที่สามารถเข้าถึงได้ด้วยอีเมลเท่านั้น โดยไม่ต้องดาวน์โหลดปลั๊กอินกระเป๋าเงิน — ซึ่งมีความสำคัญอย่างยิ่งต่อการลดอุปสรรคในการเข้าถึงโปรเจกต์ Web3 ของผู้ใช้
ขั้นตอนหลักของเกมนี้คือ:
ตลอดกระบวนการนี้ ผู้ใช้ไม่ต้องจ่ายค่า Gas ใดๆ และไม่ต้องเจอหน้าต่างยืนยันการลงนามที่ซับซ้อน — นี่คือประสบการณ์ Web3 ที่ไร้รอยต่อที่เกิดจาก Account Abstraction + การสนับสนุน Gas
ในช่องค้นหาของ Telegram พิมพ์ @BotFather ค้นหาบอทอย่างเป็นทางการแล้วคลิก "Start"
ป้อนคำสั่งเพื่อสร้าง 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 ตอนนี้ มาพัฒนาแอปก่อน แล้วค่อยกรอกฟิลด์นี้
เปิด Terminal แล้วรัน:
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 ตอนนี้ หากคุณคลิกลิงก์ Mini App ใน Telegram คุณควรจะเห็นหน้าเริ่มต้นของ 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>
);
ใช้คอมโพเนนต์ ConnectButton ที่ thirdweb จัดเตรียมให้:
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 Contract Wallet (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 ทั้งหมดที่ใช้ในบทช่วยสอนนี้อยู่ภายใต้ แผนบริการฟรี ซึ่งรวมถึงการสร้างกระเป๋าเงิน, การโต้ตอบกับสัญญา, Account Abstraction เป็นต้น หากคุณต้องการเข้าสู่ระบบโดยตรงด้วยบัญชี Telegram (ไม่ต้องยืนยันอีเมล) คุณจะต้องอัปเกรดเป็นแผนบริการแบบชำระเงิน
คุณสามารถเพิ่มตรรกะในสัญญาอัจฉริยะเพื่อจำกัดจำนวนครั้งที่แต่ละที่อยู่สามารถรับได้ หรือใช้ฟังก์ชัน Claim Conditions ของ thirdweb เพื่อตั้งกฎ เช่น รายการที่อนุญาต, หน้าต่างเวลา เป็นต้น
ได้แน่นอน เพียงแค่แทนที่เชนที่คุณต้องการ (เช่น Polygon, Arbitrum เป็นต้น) ในการกำหนดค่า getContract และ accountAbstraction thirdweb รองรับเชนที่เข้ากันได้กับ EVM มากกว่า 900 เชน
นำโค้ดไปติดตั้งใช้งานบนแพลตฟอร์ม เช่น Vercel, Netlify จากนั้นรับโดเมนอย่างเป็นทางการ แล้วแทนที่ Web App URL ใน BotFather
แผนบริการฟรีของ thirdweb ให้ Gas จำนวนหนึ่งต่อเดือนสำหรับการสนับสนุนค่าใช้จ่าย ซึ่งเพียงพอสำหรับการใช้งานในโครงการขนาดเล็กหรือการทดสอบ หากมีการใช้งานจำนวนมาก คุณสามารถอัปเกรดได้ตามความต้องการที่แท้จริง
จากบทช่วยสอนนี้ คุณได้เรียนรู้วิธีการสร้างแอปพลิเคชัน Web3 ที่สมบูรณ์ภายใน Telegram—ตั้งแต่การสร้างกระเป๋าเงิน, ตรรกะของเกม ไปจนถึงการแจกจ่ายโทเค็น ทั้งหมดนี้ถูกรวมเข้าด้วยกันอย่างราบรื่น ชุดเทคโนโลยีนี้ไม่เพียงแต่เหมาะสำหรับเกมขนาดเล็ก แต่ยังสามารถขยายไปยังสถานการณ์ต่างๆ ได้อีกมากมาย เช่น DeFi, NFT, แอปพลิเคชันโซเชียล และอื่นๆ อีกมากมาย
โครงร่าง
