Telegram Mini App’larni qanday yarataman

2026-09-10

Telegram Mini App — foydalanuvchi tizimga kirgan va kerakli chatda turgan paytda Telegram ichida ochiladigan veb-ilova. Butun taklif shundan iborat: yangi akkaunt, yuklab olish yoki parolni tiklash shart emas. Uni har qanday production veb-mahsulot kabi yarataman: frontendda Next.js va TypeScript, backendda Node.js, yana Telegram’ga xos bir nechta qoida. NDA ostidagi so‘nggi loyiham Next.js, Express va MongoDB’da qurilgan, virtual va jismoniy kartali fintech Web & Mini App bo‘ldi.

Hammasi botdan boshlanadi. BotFather bot va Mini App’ni yaratadi. Foydalanuvchi uni menyu tugmasi, inline klaviatura tugmasi yoki startapp parametri bor bevosita t.me havolasi orqali ochishi mumkin. Shu orqali tavsiya kodini uzataman yoki muayyan ekranga deep link beraman. Ilova oddiy hostingdan HTTPS orqali taqdim etiladi; ishlab chiqish paytida tunnel Telegram’ni localhost’ga yo‘naltiradi, shunda faqat desktop brauzerda emas, haqiqiy telefonda sinayman.

Autentifikatsiyada hech qachon yo‘lni qisqartirmayman. Telegram ilovaga foydalanuvchi ID’si, ismi, auth_date va hash’dan iborat initData beradi. initDataUnsafe nomi nimani anglatishini ko‘rsatadi: ismni chiqarish mumkin, unga ishonib bo‘lmaydi. Backend xom initData’ni bot tokenidan olingan HMAC imzosi bilan tekshiradi, auth_date yangiligini tasdiqlaydi va shundan keyingina o‘z sessiyasini beradi. Bot tokeni serverdan tashqariga chiqmaydi. Fintech mahsulotida shu tekshiruv «Telegram orqali kirdi» bilan «devtools’i bor har kim o‘zini istalgan odam qilib ko‘rsata oladi» orasidagi farqdir.

Keyin Mini App webview’ga yopishtirilgan sayt emas, tabiiy ilovadek tuyulishi kerak. Foydalanuvchi ilovasidagi yorug‘ yoki qorong‘i mavzuga moslashish uchun themeParams va Telegram CSS o‘zgaruvchilarini o‘qiyman; o‘zim tugma chizmay MainButton va BackButton’dan foydalanaman, muhim amallarga haptik javob qo‘shaman, sarlavha yoki bosh ekranga qaytish indikatori ostida hech narsa qolmasligi uchun viewport va safe-area oraliqlariga amal qilaman. Mobile-first bu yerda shior emas — seanslarning ko‘pi telefonda bitta bosh barmoq bilan ishlatiladi.

Bot va Mini App birga ishlaydi. Bot bildirishnomalar, tasdiqlar va cheklarni yuboradi; Mini App esa forma, ro‘yxat yoki to‘lov kerak bo‘lgan ekranlarni ko‘rsatadi. Webhook’lar Node.js backend’iga keladi, to‘lov va holat uchun yagona ishonchli manba shu bo‘ladi — mijoz so‘raydi, qaror qilmaydi. Telegram ichidagi raqamli mahsulotlar Stars orqali to‘lanadi, jismoniy mahsulot va xizmatlarda to‘lov provayderlaridan foydalanish mumkin. Bu butun jarayonni belgilagani uchun mijoz bilan boshidayoq kelishib olaman.

initDataUnsafe’ga ishonishni, desktop saytni webview’ga tiqishni, to‘lovni faqat frontendda qoldirishni va biznesga SEO yoki ichki dashboard ham kerak bo‘lsa, veb-ko‘rinishsiz Mini App qilishni rad etaman. Telegram ichida mahsulot chiqarmoqchi bo‘lsangiz, foydalanuvchi chatda bajarishi kerak bo‘lgan bitta amalni yuboring. Bot jarayoni, Mini App ekranlari va serverda qoladigan qismlarni taklif qilaman.

Keyingi mahsulotingizga qoladigan insonni bering.

Boshlashga tayyormisiz? Yozing — hozir boshlayman va qolaman. Ikki haftalik topshirish emas, uzoq hamkorlik. Loyiha, talab va eng yaxshi yo‘lni muhokama qilaylik.

Tajriba yoki xizmatlar haqida so‘rang