สอนสร้างเกม Web3 บน Telegram Mini App แบบไม่เสีย Gas

บทช่วยสอนนี้ไม่เพียงแต่จะสอนวิธีสร้างและติดตั้งใช้งาน Telegram Mini App เท่านั้น แต่ยังจะแสดงให้เห็นถึงวิธีการใช้ฟีเจอร์ฟรีของ thirdweb SDK เพื่อจัดการกับฟังก์ชันหลักของ Web3 เช่น Account Abstraction, การสร้างกระเป๋าเงิน และการแจก Token Airdrop

---

ทำไมต้องเลือก Telegram Mini App สำหรับโปรเจกต์ Web3?

การรับส่งข้อมูลทางสังคมธรรมชาติ + ประสบการณ์แบบไม่มีขั้นต่ำ

Telegram มีผู้ใช้งานรายเดือนมากกว่า 800 ล้านคน และรองรับนักพัฒนาทั่วโลกให้ใช้งานแอปพลิเคชันได้ฟรี สำหรับโปรเจกต์ Web3 แล้ว ข้อดีของ Telegram Mini App คือ:

• ไม่ต้องดาวน์โหลดติดตั้ง: ผู้ใช้ใช้งานได้โดยตรงภายใน Telegram
• การแพร่กระจายทางสังคมที่รวดเร็ว: แชร์ลิงก์เพื่อดึงดูดผู้ใช้ใหม่
• เทคโนโลยีที่สม่ำเสมอ: ใช้เทคโนโลยีเว็บ รองรับเฟรมเวิร์กหลัก เช่น React/Vue
• ปรับให้เหมาะกับมือถือ: ปรับให้เข้ากับไคลเอนต์มือถือและเดสก์ท็อปได้ตามธรรมชาติ

เมื่อรวมกับ เทคโนโลยี Account Abstraction คุณสามารถทำให้ผู้ใช้มีกระเป๋าเงินบนเชนที่สามารถเข้าถึงได้ด้วยอีเมลเท่านั้น โดยไม่ต้องดาวน์โหลดปลั๊กอินกระเป๋าเงิน — ซึ่งมีความสำคัญอย่างยิ่งต่อการลดอุปสรรคในการเข้าถึงโปรเจกต์ Web3 ของผู้ใช้

---

เราจะสร้างอะไร? เกมเป่ายิ้งฉุบ Web3 ที่สมบูรณ์

ขั้นตอนหลักของเกมนี้คือ:

1. ผู้ใช้เปิด Mini App ภายใน Telegram
2. เข้าสู่ระบบด้วยอีเมล ระบบจะสร้าง Smart Contract Wallet (Smart Account) โดยอัตโนมัติ
3. เล่นเกมเป่ายิ้งฉุบ
4. เมื่อชนะ คลิก "รับรางวัล" เพื่อรับโทเค็นเข้ากระเป๋าเงินได้ฟรี
5. ยอดคงเหลือจะแสดงตามเวลาจริง คุณสามารถเล่นต่อหรือออกได้

ตลอดกระบวนการนี้ ผู้ใช้ไม่ต้องจ่ายค่า Gas ใดๆ และไม่ต้องเจอหน้าต่างยืนยันการลงนามที่ซับซ้อน — นี่คือประสบการณ์ Web3 ที่ไร้รอยต่อที่เกิดจาก Account Abstraction + การสนับสนุน Gas

---

การเลือกเทคโนโลยีและเครื่องมือหลัก

เฟรมเวิร์ก Frontend

• Vite + React: สร้างหน้าเว็บได้อย่างรวดเร็ว
• TypeScript: เพิ่มความแข็งแกร่งของโค้ด

การรวมความสามารถ Web3

• thirdweb SDK: จัดเตรียมการเชื่อมต่อกระเป๋าเงิน, Account Abstraction, การโต้ตอบกับสัญญา
• vov/react-telegram-web-app: ไลบรารีที่รองรับอย่างเป็นทางการของ Telegram

เครือข่ายบล็อกเชน

• Base Sepolia Testnet (เครือข่ายทดสอบ): ฟรี รวดเร็ว เหมาะสำหรับการสาธิตการพัฒนา

เครื่องมือช่วยพัฒนา

• ngrok: ทำให้สภาพแวดล้อมการพัฒนาภายในเครื่องสามารถเข้าถึงได้ผ่านเครือข่ายสาธารณะ เพื่อความสะดวกในการดีบัก

---

ขั้นตอนที่ 1: การสร้าง Telegram Mini App

1. เพิ่ม BotFather และสร้าง Bot

ในช่องค้นหาของ Telegram พิมพ์ @BotFather ค้นหาบอทอย่างเป็นทางการแล้วคลิก "Start"

ป้อนคำสั่งเพื่อสร้าง 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 ตอนนี้ มาพัฒนาแอปก่อน แล้วค่อยกรอกฟิลด์นี้

---

ขั้นตอนที่ 2: การตั้งค่าสภาพแวดล้อมการพัฒนาภายในเครื่อง

การเริ่มต้นโปรเจกต์

เปิด Terminal แล้วรัน:

bun create vite

เลือก:

• ชื่อโปรเจกต์: thirdweb-telegram-miniapp
• เฟรมเวิร์ก: React
• ตัวแปร: TypeScript + SWC

เข้าสู่ไดเรกทอรีโปรเจกต์:

cd thirdweb-telegram-miniapp

การติดตั้ง Dependency

ติดตั้งไลบรารีที่รองรับ 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 ตามค่าเริ่มต้น

---

ขั้นตอนที่ 3: การเปิดใช้งานลิงก์ภายในเครื่องด้วย ngrok

เนื่องจาก Telegram ต้องการ URL เครือข่ายสาธารณะเพื่อเข้าถึง Mini App ของคุณ เราจะใช้เครื่องมือ ngrok เพื่อเปิดใช้งานบริการภายในเครื่องของคุณไปยังเครือข่ายภายนอกชั่วคราว

รัน:

ngrok http 5174

ngrok จะส่งคืนที่อยู่เครือข่ายสาธารณะ เช่น:

https://abc123.ngrok.io

คัดลอกลิงก์นี้ กลับไปที่ BotFather แล้ววางลงในฟิลด์ Web App URL ตอนนี้ หากคุณคลิกลิงก์ Mini App ใน Telegram คุณควรจะเห็นหน้าเริ่มต้นของ Vite ของคุณ!

---

ขั้นตอนที่ 4: การรวม 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>
);

การเพิ่มฟังก์ชันการเข้าสู่ระบบด้วยอีเมล

ใช้คอมโพเนนต์ ConnectButton ที่ thirdweb จัดเตรียมให้:

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

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

ผู้ใช้กรอกอีเมล → รับรหัสยืนยัน → หลังจากยืนยันสำเร็จ กระเป๋าเงินจะถูกสร้างขึ้นโดยอัตโนมัติ → เสร็จสมบูรณ์!

---

ขั้นตอนที่ 5: การสร้างตรรกะเกมเป่ายิ้งฉุบ

นำตรรกะหลักไปใช้ใน 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";
};

ผู้ใช้คลิกปุ่ม → สุ่มเลือกตัวเลือกคอมพิวเตอร์ → ตัดสินผลแพ้ชนะ → แสดงผลลัพธ์

---

ขั้นตอนที่ 6: การติดตั้งใช้งานสัญญาโทเค็น 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",
});

---

ขั้นตอนที่ 7: การใช้งาน Account Abstraction + การรับโทเค็นโดยไม่ต้องเสีย Gas

การเปิดใช้งาน Account Abstraction

ใน 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 จัดการธุรกรรมโดยอัตโนมัติ → โทเค็นเข้าสู่บัญชี → ผู้ใช้ไม่ต้องจ่ายอะไรเลย!

---

ขั้นตอนที่ 8: การแสดงยอดคงเหลือและฟังก์ชันการออกจากระบบ

การอ่านยอดคงเหลือโทเค็น

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:

1. กรอกอีเมล → ยืนยัน → สร้างกระเป๋าเงิน
2. เล่นเกม → เมื่อชนะ คลิก "รับรางวัล"
3. โทเค็นเข้าบัญชี ยอดคงเหลืออัปเดต
4. ไม่ต้องมีปลั๊กอินหรือการดำเนินการลงนามใดๆ!

---

คำถามที่พบบ่อย (FAQ)

โซลูชันนี้ฟรีหรือไม่?

ฟังก์ชัน thirdweb ทั้งหมดที่ใช้ในบทช่วยสอนนี้อยู่ภายใต้ แผนบริการฟรี ซึ่งรวมถึงการสร้างกระเป๋าเงิน, การโต้ตอบกับสัญญา, Account Abstraction เป็นต้น หากคุณต้องการเข้าสู่ระบบโดยตรงด้วยบัญชี Telegram (ไม่ต้องยืนยันอีเมล) คุณจะต้องอัปเกรดเป็นแผนบริการแบบชำระเงิน

จะหลีกเลี่ยงไม่ให้ผู้ใช้รับโทเค็นซ้ำได้อย่างไร?

คุณสามารถเพิ่มตรรกะในสัญญาอัจฉริยะเพื่อจำกัดจำนวนครั้งที่แต่ละที่อยู่สามารถรับได้ หรือใช้ฟังก์ชัน Claim Conditions ของ thirdweb เพื่อตั้งกฎ เช่น รายการที่อนุญาต, หน้าต่างเวลา เป็นต้น

สามารถเปลี่ยนไปใช้บล็อกเชนอื่นได้หรือไม่?

ได้แน่นอน เพียงแค่แทนที่เชนที่คุณต้องการ (เช่น Polygon, Arbitrum เป็นต้น) ในการกำหนดค่า getContract และ accountAbstraction thirdweb รองรับเชนที่เข้ากันได้กับ EVM มากกว่า 900 เชน

จะติดตั้งใช้งานในสภาพแวดล้อมการผลิตได้อย่างไร?

นำโค้ดไปติดตั้งใช้งานบนแพลตฟอร์ม เช่น Vercel, Netlify จากนั้นรับโดเมนอย่างเป็นทางการ แล้วแทนที่ Web App URL ใน BotFather

การสนับสนุนค่า Gas จะมีค่าใช้จ่ายสูงหรือไม่?

แผนบริการฟรีของ thirdweb ให้ Gas จำนวนหนึ่งต่อเดือนสำหรับการสนับสนุนค่าใช้จ่าย ซึ่งเพียงพอสำหรับการใช้งานในโครงการขนาดเล็กหรือการทดสอบ หากมีการใช้งานจำนวนมาก คุณสามารถอัปเกรดได้ตามความต้องการที่แท้จริง

---

สรุป

จากบทช่วยสอนนี้ คุณได้เรียนรู้วิธีการสร้างแอปพลิเคชัน Web3 ที่สมบูรณ์ภายใน Telegram—ตั้งแต่การสร้างกระเป๋าเงิน, ตรรกะของเกม ไปจนถึงการแจกจ่ายโทเค็น ทั้งหมดนี้ถูกรวมเข้าด้วยกันอย่างราบรื่น ชุดเทคโนโลยีนี้ไม่เพียงแต่เหมาะสำหรับเกมขนาดเล็ก แต่ยังสามารถขยายไปยังสถานการณ์ต่างๆ ได้อีกมากมาย เช่น DeFi, NFT, แอปพลิเคชันโซเชียล และอื่นๆ อีกมากมาย