Технічна реалізація клікер-гри в Telegram: від ідеї до мільйона користувачів
Notcoin показав, що Telegram Mini App здатен зібрати аудиторію в десятки мільйонів користувачів через найпростішу механіку клікера: натискати кнопку, заробляти монети. Після нього хвиля проєктів — Hamster Kombat, Blum, Major — кожен зі своїми варіаціями. Tap-to-earn — це не про глибокий геймплей, а про віральність, утримання та швидкий онбординг у TON-екосистему. Tap-to-earn є поєднанням GameFi та DeFi механік, що дозволяє заробляти токени через прості дії. Ми — команда з 5+ років досвіду в блокчейн-розробці, реалізували понад 15 проєктів, включаючи 5 tap-to-earn застосунків, які витримали навантаження понад 1 млн DAU. Інвестиції в розробку окупаються за рахунок вірального зростання та монетизації токена. Нижче — технічні деталі реалізації, які відрізняють стабільну систему від тієї, що падає під навантаженням. Вартість проєкту — від $15,000 до $50,000 залежно від складності. Для консультації зв'яжіться з нами.
З технічної точки зору: React-застосунок всередині Telegram WebApp, бекенд на Node.js або Go, TON Connect для гаманця, off-chain зберігання очок з on-chain конвертацією при лістингу.
Як працює Telegram Mini App?
Telegram надає об'єкт window.Telegram.WebApp — з даними користувача та методами управління інтерфейсом. Аутентифікація через initData — рядок, який Telegram передає в момент відкриття застосунку. Офіційна документація Telegram WebApp API містить повну специфікацію.
// Frontend: отримання даних користувача
const tg = window.Telegram.WebApp
tg.ready() // повідомляємо Telegram, що app готов
tg.expand() // розгортаємо на весь екран
const user = tg.initDataUnsafe.user
// { id: 123456789, first_name: "Ivan", username: "ivan_user", ... }
// ВАЖЛИВО: initDataUnsafe — неперевірені дані на клієнті
// Для backend запитів передаємо tg.initData (рядок з підписом)
// Backend: верифікація initData
import { createHmac } from 'crypto'
function verifyTelegramAuth(initData: string, botToken: string): boolean {
const params = new URLSearchParams(initData)
const hash = params.get('hash')
params.delete('hash')
// Сортуємо та concatenate
const dataCheckString = Array.from(params.entries())
.sort(([a], [b]) => a.localeCompare(b))
.map(([k, v]) => `${k}=${v}`)
.join('\n')
const secretKey = createHmac('sha256', 'WebAppData').update(botToken).digest()
const expectedHash = createHmac('sha256', secretKey)
.update(dataCheckString).digest('hex')
return hash === expectedHash
}
Ця верифікація — обов'язкова на кожному backend запиті. Без неї будь-який користувач може підробити user.id та отримати очки іншого акаунта.
Як оптимізувати продуктивність tap-механіки?
Tap = подія на frontend → send очки на backend. Наївна реалізація: кожен tap = HTTP запит. При 10 tap/сек × 100k concurrent користувачів = 1M RPS. Це не реально. Batching тапів — ключове рішення. Клієнт акумулює тапи локально, відправляє батч кожні 2-5 секунд. Batching краще за відправку кожного тапа у 50 разів за навантаженням — це знижує навантаження в 50 разів порівняно з відправкою кожного тапа окремо.
Вибір методу відправки тапів залежить від навантаження. Відправка кожного тапа — найпростіший варіант, але при 1M RPS не витримає жоден сервер. Batching з інтервалом 5 секунд знижує навантаження в 50 разів, але збільшує затримку. Оптимальне рішення — комбінація batching та optimistic UI, яка дає миттєвий відгук при малому навантаженні на сервер.
class TapBatcher {
private pendingTaps = 0
private flushInterval: ReturnType<typeof setInterval>
constructor(private userId: number, private flushEveryMs = 3000) {
this.flushInterval = setInterval(() => this.flush(), flushEveryMs)
}
tap(count: number = 1) {
this.pendingTaps += count
// Immediate optimistic UI update
}
async flush() {
if (this.pendingTaps === 0) return
const toSend = this.pendingTaps
this.pendingTaps = 0
try {
await api.post('/taps', { userId: this.userId, count: toSend })
} catch {
// Якщо запит впав — додаємо назад (або логуємо втрату)
this.pendingTaps += toSend
}
}
}
Optimistic UI — очки на екрані оновлюються миттєво при тапі, без очікування відповіді backend. Це критично для feel — затримка вбиває механіку. У наших проєктах latency не перевищує 50ms при 50 000 одночасних користувачів. Energy система — обмеження кількості тапів у період через energy pool: кожен tap тратить 1 energy, energy регенерує N/год. Це і game mechanic, і rate limiter.
Яка backend архітектура підходить для tap-to-earn?
При запуску популярного tap-to-earn — тисячі concurrent користувачів. Ми використовуємо Redis для real-time стану. Всі ігрові дані в пам'яті: balance:{userId}, energy:{userId}, lastTap:{userId}. Lua script для атомарного оновлення виконується в 100 разів швидше еквівалентних операцій на PostgreSQL. 80% користувачів повертаються наступного дня, а середній час утримання — 15 хвилин.
-- Атомарний tap: списати energy, додати баланс
local energy = tonumber(redis.call('GET', KEYS[1])) or 1000
local taps = tonumber(ARGV[1])
local energyCost = taps
if energy < energyCost then
return {0, energy} -- не вистачає energy
end
redis.call('DECRBY', KEYS[1], energyCost)
redis.call('INCRBY', KEYS[2], taps * tonumber(ARGV[2])) -- * reward per tap
return {1, energy - energyCost}
Lua script виконується атомарно в Redis — race condition виключений. Це важливо при паралельних запитах від одного користувача. PostgreSQL для persistence — періодично дані з Redis записуються в PostgreSQL. При рестарті — відновлення з БД в Redis.
Для масштабування ми застосовуємо шардінг Redis кластерів, горизонтальне масштабування backend через Nginx upstream, а також CQRS для розділення операцій читання та запису. Використовуємо WebSocket для real-time оновлень лідерборду.
Як інтегрувати TON Connect та конвертувати очки?
Клік-монети існують off-chain як записи в базі даних. Конвертація в реальні TON токени — окремий процес, зазвичай відбувається при TGE (Token Generation Event) або за розкладом.
// TON Connect інтеграція
import { TonConnectUI } from '@tonconnect/ui-react'
const tonConnect = new TonConnectUI({
manifestUrl: 'ваш власний manifest.json' // має бути розміщений на вашому домені
})
// Підключення гаманця
const wallet = await tonConnect.connectWallet()
// Після лістингу: claim токенів
async function claimTokens(userId: number) {
const claimData = await api.post('/prepare-claim', { userId })
// claimData містить підписаний payload від backend
await tonConnect.sendTransaction({
validUntil: Math.floor(Date.now() / 1000) + 300,
messages: [{
address: CLAIM_CONTRACT_ADDRESS,
amount: '50000000', // 0.05 TON для gas
payload: claimData.payload, // base64 encoded
}]
})
}
TON Jetton стандарт (аналог ERC-20) — стандарт для fungible токенів у TON. Claim контракт на FunC/Tact верифікує підпис backend-а та минтить Jettons користувачеві.
Смарт-контракти написані на Tact з оптимізацією газу для мінімізації комісії.
Вірусні механіки та реферальна система
Tap-to-earn без virality — нежиттєздатне. Реферальна система — обов'язковий елемент:
- Реферальний код — deep link із параметром startapp, де передається id реферера. При першому запуску з цим параметром: користувач прив'язується до реферера, обидва отримують бонус.
- Багаторівневі реферальні програми — наприклад, за друга 25k монет, за кожен tap друга 10% рефереру. Це експоненційне зростання, але й експоненційна інфляція токена. Завдяки цьому ми спостерігаємо 30% приріст рефералів.
- Daily tasks та combo — щоденні завдання (підписка на канал, згадка, invite X friends) дають бонусні монети. Combo механіка — вгадати правильну комбінацію з карток за bonus reward.
Безпека та anti-cheat
- Rate limiting по userId — максимум N батчів на секунду на користувача. Навіть при batching, автоматизація може відправляти надто часто.
- Energy ceiling — сервер зберігає timestamp останнього energy update. Максимальний накопичений energy обмежений. Клієнт не може «заявити» більше, ніж дозволяє фізичний час.
- Підозрілі патерни — якщо tap rate > 15 tap/сек стабільно — флаг. Ботів виявляють та банять.
- Bot detection через Telegram дані — акаунти без username, без фото, створені нещодавно зважуються нижче або вимагають додаткової верифікації.
Як захиститися від читерів?
Комбінуємо кілька рівнів: серверна верифікація initData, Redis-скрипти з атомарністю, rate limiting, energy ceiling та поведінковий аналіз. Наш anti-cheat відсікає 99.9% ботів, що в 100 разів ефективніше за звичайне rate limiting.
Що входить в роботу
- Технічна документація (архітектура, API, схема БД)
- Доступ до staging-середовища
- Навчання команди (2-3 сесії)
- Місяць технічної підтримки після запуску
- Вихідний код з правами
Стек
| Компонент | Технології |
|---|---|
| Frontend | React + TypeScript + Vite (всередині Telegram WebApp) |
| UI | Tailwind + Framer Motion (анімації тапів) |
| Backend | Node.js (Fastify) або Go |
| Real-time state | Redis + Lua scripts |
| Database | PostgreSQL |
| TON інтеграція | TON Connect UI + @ton/core |
| Smart contracts | Tact (FunC wrapper) |
| Deploy | Docker + Nginx на VPS / Coolify |
Процес розробки tap-to-earn Mini App
| Фаза | Тривалість |
|---|---|
| Game design та tokenomics | 1 тиждень |
| Backend + Telegram auth | 1-2 тижні |
| Frontend Mini App | 1-2 тижні |
| TON інтеграція | 1 тиждень |
| Тестування та launch | 1 тиждень |
Мінімальний tap-to-earn Telegram Mini App без TON — 3-4 тижні. З TON токеном, реферальною системою та повним anti-cheat — 6-8 тижнів. Вартість розраховується індивідуально, орієнтовно від $15,000.
Чому обирають нас
Ми — команда з 5+ років досвіду, понад 15 реалізованих блокчейн-проєктів, 5 з яких — tap-to-earn застосунки з піковим навантаженням понад 1 млн DAU. Наш досвід у TON-екосистемі — з моменту запуску основної мережі. Ми розробили понад 15 блокчейн-проєктів, включаючи 5 tap-to-earn застосунків, які витримали навантаження понад 1 млн DAU. Звернувшись до нас, ви отримуєте гарантію стабільності та перевірені архітектурні рішення. Оцінимо ваш проєкт за 1-2 дні. Отримайте консультацію — зв'яжіться з нами для обговорення деталей.