Telegram Mini App — пайдаланушы жүйеге кіріп, керек чатта отырған кезде Telegram ішінде ашылатын веб-қолданба. Бар уәдесі осы: жаңа аккаунт та, жүктеу де, құпиясөзді қалпына келтіру де қажет емес. Оны production-ға арналған кез келген веб-өнім секілді құрамын: фронтендте Next.js пен TypeScript, бэкендте Node.js, оған қоса Telegram-ға ғана тән бірнеше қағида. NDA аясында соңғы жеткізгенім Next.js, Express және MongoDB арқылы жасалған, виртуалды әрі пластик карталары бар fintech Web & Mini App болды.
Жұмыс боттан басталады. BotFather бот пен Mini App жасайды. Пайдаланушы оны мәзір түймесінен, inline пернетақта түймесінен немесе startapp параметрі бар тікелей t.me сілтемесінен аша алады. Осылайша referral кодын өткіземін не нақты экранға терең сілтеме жасаймын. Қолданба әдеттегі хосттан HTTPS арқылы беріледі; әзірлеу кезінде туннель Telegram-ды localhost-қа бағыттайды, сондықтан тек компьютер браузерінде емес, шынайы телефонда сынаймын.
Аутентификацияда ешқашан қысқа жол іздемеймін. Telegram қолданбаға пайдаланушының ID-і, аты, auth_date және hash бар initData жібереді. initDataUnsafe атауы айтып тұрғандай: атты көрсетуге болады, бірақ оған сенуге болмайды. Бэкенд бастапқы initData мәнін бот токенінен алынған HMAC қолтаңбасымен тексереді, auth_date жаңалығын қарайды да, содан кейін ғана өз сессиясын береді. Бот токені серверден шықпайды. Fintech өнімінде бір тексерістің өзі «Telegram арқылы кірді» мен «devtools қолданған кез келген адам басқа біреу бола алады» дегеннің арасын ажыратады.
Содан кейін Mini App webview ішіне жапсырылған сайт емес, төл қолданбадай сезілуі керек. themeParams пен Telegram CSS айнымалыларын оқып, ашық/қараңғы тақырыпты пайдаланушы қолданбасына сәйкестендіремін; өз батырмамды сызбай MainButton мен BackButton қолданамын, маңызды әрекеттерге тактильді кері байланыс қосамын, тақырып не үй экраны индикаторы ештеңені жаппасын деп viewport пен safe-area аралығын ескеремін. Mobile-first — ұран емес: сессиялардың көбі телефонда бір бас бармақпен өтеді.
Бот пен Mini App жұп болып істейді. Бот хабарландыру, растау мен түбіртек жібереді; Mini App форма, тізім не төлем экранын көрсетеді. Webhook-тар Node.js бэкендіне түседі, ал төлем мен күйдің жалғыз ақиқат көзі сол болып қалады — клиент сұрайды, шешім шығармайды. Telegram ішіндегі цифрлық тауарлар Stars-пен төленеді, физикалық тауарлар мен қызметтерді төлем провайдерлері арқылы өткізуге болады. Бұл бүкіл ағынды өзгертетіндіктен, клиентпен ерте келісемін.
initDataUnsafe-ке сенуді, десктоп сайтын webview-ге тықпалауды, төлемді тек фронтендте қалдыруды және бизнеске SEO не ішкі дашборд керек бола тұра веб-нұсқасы жоқ Mini App жасауды қабылдамаймын. Telegram ішінде іске қосқыңыз келсе, пайдаланушы чатта орындауға тиіс бір әрекетті жіберіңіз. Бот ағынын, Mini App экрандарын және серверде қалатын бөлікті ұсынамын.
Келесі өнімге онымен бірге қалатын адамды беріңіз.
Бастауға дайынсыз ба? Маған жазыңыз — қазір бастап, әрі қарай қалуға дайынмын. Екі апталық тапсыру емес, ұзақ мерзімді келісімдер. Жобаңызды, талаптарды және алға жылжудың ең тиімді жолын талқылайық.