Telegram Mini App foydalanuvchiga botdan chiqmasdan to'liq interfeysga ega ilovadan foydalanish imkonini beradi: katalog ko'rish, savatcha to'ldirish, joy band qilish yoki anketa to'ldirish. Texnik jihatdan bu oddiy veb-sahifa bo'lib, Telegram uni o'z ichidagi brauzer oynasida ochadi va unga maxsus JavaScript obyekti orqali foydalanuvchi, mavzu ranglari va tugmalar bilan ishlash imkonini beradi. Demak, Mini App uchun alohida "Telegram serveri" kerak emas, uni odatiy sayt kabi hostingga joylash mumkin. Quyida Samarqanddagi non do'koni uchun buyurtma ilovasi misolida butun jarayonni ko'rib chiqamiz.
Mini App nimalardan tashkil topadi
Odatda Mini App ikki qismdan iborat. Birinchisi frontend: HTML, CSS va JavaScript fayllari, ular React, Vue yoki oddiy JavaScript bilan yozilishi mumkin. Ikkinchisi backend: buyurtmalarni qabul qiladigan, bazaga yozadigan va foydalanuvchini tekshiradigan API. Kichik loyihalarda ikkalasi bitta domenda turadi, masalan frontend app.misol.uz ildizida, API esa app.misol.uz/api/ manzilida. Bu sxema CORS sozlamalari bilan bog'liq ortiqcha muammolarni oldini oladi.
Frontend statik fayllar to'plami bo'lgani uchun uni deyarli istalgan hostingga joylash mumkin. Backend PHP'da yozilgan bo'lsa, oddiy shared hosting ham yetarli; Node.js yoki Python'da yozilgan bo'lsa, doimiy jarayonni ushlab turish uchun VPS qulayroq bo'ladi. Non do'koni misolida frontend Vite bilan yig'ilgan, backend esa bir nechta PHP skriptdan iborat va MySQL bazasidan foydalanadi.
Hosting va HTTPS tayyorlash
Telegram Mini App manzili albatta HTTPS bo'lishi kerak, oddiy HTTP manzilni BotFather qabul qilmaydi. Shuning uchun birinchi qadam subdomen yaratib, unga SSL sertifikatini o'rnatishdir. sayt.uz hostingida bu ish kabinet orqali bajariladi: subdomen qo'shiladi, unga bepul Let's Encrypt sertifikati ulanadi va sertifikat muddati tugashidan oldin avtomatik yangilanadi. Sertifikat yangilanmay qolsa, Mini App foydalanuvchilarda oq ekran bilan ochiladi, shuning uchun avtomatik yangilanish bu yerda juda muhim.
Frontendni build qilgach, dist papkasidagi fayllarni subdomenning ildiz katalogiga yuklang. Agar ilova klient tomonida marshrutlashdan foydalansa, barcha noma'lum manzillarni index.html fayliga yo'naltirish kerak. Apache ishlatiladigan hostingda buni .htaccess fayli bilan qilish mumkin:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/api/
RewriteRule ^ index.html [L]Frontend: telegram-web-app.js bilan ishlash
Telegram bilan aloqa rasmiy skript orqali o'rnatiladi. U sahifaga window.Telegram.WebApp obyektini qo'shadi. ready() metodi Telegram'ga ilova yuklanganini bildiradi, expand() esa oynani to'liq balandlikka ochadi. Pastdagi asosiy tugma MainButton orqali boshqariladi va u Telegram dizayniga mos ko'rinadi.
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<script>
const tg = window.Telegram.WebApp;
tg.ready();
tg.expand();
tg.MainButton.setText("Buyurtma berish").show();
tg.MainButton.onClick(async () => {
await fetch("/api/order.php", {
method: "POST",
headers: { "Content-Type": "application/json", "X-Init-Data": tg.initData },
body: JSON.stringify({ items: cart })
});
tg.close();
});
</script>Ilova ranglarini qo'lda tanlash o'rniga tg.themeParams qiymatlaridan foydalanish tavsiya etiladi. Shunda Mini App foydalanuvchining kunduzgi yoki tungi mavzusiga moslashadi va Telegram ichida begonadek ko'rinmaydi.
Eng muhim qism: initData'ni serverda tekshirish
Frontend foydalanuvchi haqidagi ma'lumotni ikki ko'rinishda oladi: initDataUnsafe obyekti va initData satri. Nomidan ham ko'rinib turibdiki, birinchisiga ishonib bo'lmaydi, chunki brauzerdagi istalgan qiymatni soxtalashtirish mumkin. To'g'ri yo'l initData satrini serverga yuborib, uning imzosini bot tokeni yordamida tekshirishdir. Telegram hujjatlariga ko'ra kalit WebAppData so'zi va bot tokenidan HMAC-SHA256 orqali hosil qilinadi, so'ng saralangan maydonlar satri shu kalit bilan imzolanadi.
function tg_check_init_data(string $initData, string $botToken): ?array {
parse_str($initData, $data);
if (empty($data['hash'])) return null;
$hash = $data['hash'];
unset($data['hash']);
ksort($data);
$pairs = [];
foreach ($data as $k => $v) $pairs[] = $k . '=' . $v;
$secret = hash_hmac('sha256', $botToken, 'WebAppData', true);
$calc = hash_hmac('sha256', implode("\n", $pairs), $secret);
if (!hash_equals($calc, $hash)) return null;
if (time() - (int)($data['auth_date'] ?? 0) > 86400) return null;
return $data;
}Funksiya imzo to'g'ri bo'lsa maydonlar massivini qaytaradi, user maydoni esa JSON ko'rinishida bo'lib, uni json_decode bilan o'qish mumkin. auth_date tekshiruvi eski, ushlab qolingan so'rovlarni qayta ishlatishdan himoya qiladi. Bot tokeni faqat serverda, masalan veb-katalogdan tashqaridagi konfiguratsiya faylida saqlanishi kerak.
BotFather orqali botga ulash
Ilova tayyor bo'lgach, uni botga bog'lash qoladi. Buning bir nechta usuli bor va ularni birgalikda ishlatish ham mumkin:
- Menyu tugmasi: BotFather'da bot sozlamalaridan menyu tugmasini sozlab, unga
https://app.misol.uzmanzilini berasiz. - To'g'ridan-to'g'ri havola:
/newappbuyrug'i bilan ilova yaratib, uni alohida havola orqali ulashish mumkin. - Klaviatura tugmasi: bot xabarida
web_appturidagi tugma yuborib, ilovani muayyan suhbat ichidan ochish mumkin.
Sinov paytida Telegram ichki brauzeri sahifani keshlab qolishi mumkin, shuning uchun yangi build yuklagandan keyin fayl nomlarida hash bo'lishiga e'tibor bering; Vite va boshqa zamonaviy yig'uvchilar buni avtomatik bajaradi. Xatolarni topish uchun Telegram Desktop yoki Android ilovasidagi veb-tekshiruv imkoniyatlari haqida rasmiy hujjatlarni ko'rib chiqing.