Recentemente, o Telegram abriu oficialmente a funcionalidade Mini App (mini-aplicativo) para desenvolvedores, permitindo que você crie experiências interativas semelhantes a aplicativos nativos dentro do Telegram. E hoje, vamos guiá-lo passo a passo na criação de um mini-jogo Web3 simples, mas completo, onde os usuários podem criar uma carteira apenas inserindo seu e-mail, jogar pedra, papel e tesoura e reivindicar recompensas em tokens – tudo isso sem que o usuário pague taxas de Gas.
Este tutorial ensinará não apenas como criar e implantar um Mini App do Telegram, mas também como usar os recursos gratuitos do SDK da thirdweb para implementar recursos essenciais Web3 como abstração de conta (Account Abstraction), criação de carteira e airdrops de token.
O Telegram tem mais de 800 milhões de usuários ativos mensais e permite que desenvolvedores globais implantem aplicativos gratuitamente. Para projetos Web3, as vantagens dos Mini Apps do Telegram incluem:
Ao combinar a tecnologia de abstração de conta, você pode permitir que os usuários tenham uma carteira on-chain apenas com seu e-mail, sem a necessidade de instalar plug-ins de carteira – isso é crucial para reduzir a barreira de entrada para projetos Web3.
O fluxo principal deste jogo é:
Todo o processo não requer que o usuário pague nenhuma taxa de Gas, nem exibe caixas complexas de confirmação de assinatura – esta é a verdadeira experiência Web3 sem atrito proporcionada pela abstração de conta + Gas patrocinado.
Na barra de pesquisa do Telegram, digite @BotFather, encontre o bot oficial e clique em "Iniciar".
Digite o comando para criar um novo bot:
/newbot
Siga as instruções para inserir um nome e um nome de usuário (que deve terminar com bot), por exemplo:
Nome: thirdweb YouTube Demo
Nome de usuário: thirdwebYouTubeBot
Após a criação bem-sucedida, o BotFather retornará um Token – guarde-o com segurança, pois é sua credencial para gerenciar o bot.
No BotFather, digite novamente:
/newapp
Selecione o Bot que você acabou de criar e preencha sequencialmente:
thirdweb Rock Paper Scissors DemoWeb3 Rock Paper Scissors Mini GameNeste momento, o Telegram solicitará o link de acesso ao seu Mini App. Vamos desenvolver o aplicativo primeiro e depois preencher este campo.
Abra o terminal e execute:
bun create vite
Selecione:
thirdweb-telegram-miniappReactTypeScript + SWCEntre no diretório do projeto:
cd thirdweb-telegram-miniapp
Instale a biblioteca de adaptação do Telegram Web App:
bun add @vov/react-telegram-web-app
Instale o SDK da thirdweb:
bun add thirdweb
Abra index.html e adicione dentro da tag <head>:
<script src="https://telegram.org/js/telegram-web-app.js"></script>
Este código informa ao Telegram que sua página da web será executada em um ambiente de Mini App.
npm run dev
Por padrão, o serviço será iniciado em http://localhost:5174.
Como o Telegram precisa de um URL público para acessar seu Mini App, usaremos a ferramenta ngrok para expor temporariamente seu serviço local à internet.
Execute:
ngrok http 5174
O ngrok retornará um endereço público, por exemplo:
https://abc123.ngrok.io
Copie este link, volte para o BotFather e cole-o no campo URL do Web App.
Agora, se você clicar no link do Mini App no Telegram, deverá ver a página padrão do Vite!
Acesse o Dashboard da thirdweb e crie um novo Client ID em Settings > API Keys.
Copie o Client ID para o arquivo .env.local na raiz do projeto:
VITE_CLIENT_ID=your_client_id_here
No src/main.tsx, envolva o aplicativo:
import { ThirdwebProvider } from "thirdweb/react";
import { createThirdwebClient } from "thirdweb";
const client = createThirdwebClient({
clientId: import.meta.env.VITE_CLIENT_ID,
});
root.render(
<ThirdwebProvider>
<App />
</ThirdwebProvider>
);
Use o componente ConnectButton fornecido pela thirdweb:
import { ConnectButton } from "thirdweb/react";
import { inAppWallet } from "thirdweb/wallets";
<ConnectButton
client={client}
wallets={[
inAppWallet({
auth: {
options: ["email"],
},
}),
]}
/>
O usuário insere o e-mail → recebe um código de verificação → após a verificação bem-sucedida, uma carteira é gerada automaticamente → concluído!
Implemente a lógica principal em 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";
};
O usuário clica no botão → a escolha do computador é gerada aleatoriamente → o resultado é determinado → o resultado é exibido.
Volte para o Dashboard da thirdweb, clique em Contracts > Deploy, e selecione Token Drop.
Configurar:
Rock Paper Scissors TokenRPSBase SepoliaApós a implantação bem-sucedida, defina as Claim Conditions como "Reivindicação pública, sem restrições".
Copie o endereço do contrato e adicione-o ao código:
import { getContract } from "thirdweb";
import { baseSepolia } from "thirdweb/chains";
const contract = getContract({
client,
chain: baseSepolia,
address: "0xYourContractAddress",
});
Adicione ao ConnectButton:
<ConnectButton
client={client}
wallets={[inAppWallet({ auth: { options: ["email"] } })]}
accountAbstraction={{
chain: baseSepolia,
sponsorGas: true,
}}
/>
Isso garante que a carteira gerada pelo usuário seja uma carteira de contrato inteligente (Smart Account), e podemos pagar as taxas de Gas por eles.
import { TransactionButton } from "thirdweb/react";
import { claimTo } from "thirdweb/extensions/erc20";
<TransactionButton
transaction={() =>
claimTo({
contract,
to: account.address,
quantity: "10",
})
}
onTransactionConfirmed={() => alert("Token reivindicado!")}
>
Reivindicar 10 RPS
</TransactionButton>
O usuário clica no botão → a thirdweb lida automaticamente com a transação → os tokens chegam → nenhuma taxa é paga pelo usuário!
import { useReadContract } from "thirdweb/react";
import { getBalance } from "thirdweb/extensions/erc20";
const { data: tokenBalance } = useReadContract(getBalance, {
contract,
address: account.address,
});
<div>Saldo: {tokenBalance?.displayValue} RPS</div>
import { useDisconnect, useActiveWallet } from "thirdweb/react";
const wallet = useActiveWallet();
const { disconnect } = useDisconnect();
<button onClick={() => disconnect(wallet)}>Sair</button>
No seu celular, abra o Telegram, pesquise pelo seu bot e clique no link do Mini App:
Todas as funcionalidades da thirdweb usadas neste tutorial estão dentro do plano gratuito, incluindo criação de carteira, interação com contratos, abstração de conta, etc. Se você precisar fazer login diretamente com uma conta do Telegram (sem verificação por e-mail), precisará fazer upgrade para um plano pago.
Você pode adicionar lógica ao seu contrato inteligente para limitar o número de reivindicações por endereço, ou usar o recurso Claim Conditions da thirdweb para definir regras como listas de permissão, janelas de tempo, etc.
Absolutamente. Basta substituir a cadeia desejada (como Polygon, Arbitrum, etc.) nas configurações de getContract e accountAbstraction. A thirdweb suporta mais de 900 cadeias compatíveis com EVM.
Implante seu código em plataformas como Vercel, Netlify, etc., obtenha um domínio oficial e substitua o URL do Web App no BotFather.
O plano gratuito da thirdweb oferece uma certa quantidade de Gas patrocinado por mês, o que é suficiente para projetos pequenos ou testes. Se o tráfego for alto, você pode fazer upgrade de acordo com suas necessidades.
Com este tutorial, você aprendeu como construir um aplicativo Web3 completo dentro do Telegram – desde a criação de carteiras, lógica de jogo até a distribuição de tokens, tudo integrado perfeitamente. Essa stack de tecnologia não é apenas adequada para mini-jogos, mas também pode ser expandida para cenários DeFi, NFTs, aplicativos sociais e muito mais.
Esboço
