{"id":462959,"date":"2025-06-12T03:00:39","date_gmt":"2025-06-12T03:00:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=462959"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=462959","title":{"rendered":"<span>\u041e\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043e \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430: \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c Telegram Mini Apps<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u044b <a href=\"https:\/\/habr.com\/ru\/users\/dmvasiliev\/\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u043c\u0430<\/a> \u0438 <a href=\"https:\/\/habr.com\/ru\/users\/ikonik\/\" rel=\"noopener noreferrer nofollow\">\u0418\u043b\u044c\u044f<\/a>, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0422\u041c\u0410-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"https:\/\/doubletapp.ai\/miniapp\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=tma1\" rel=\"noopener noreferrer nofollow\">Doubletapp<\/a> \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c Telegram Mini App \u043d\u0430 \u0441\u0442\u0435\u043a\u0435 React + Python.  <\/p>\n<p>Telegram Mini Apps \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430. \u041e\u043d\u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0438\u0433\u0440, \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u043e\u0432, \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u043d\u043e\u0433\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Mini App:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#1\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#2\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043d\u0430 React \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Telegram SDK<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#3\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 Python (Django)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#4\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u044f\u0436\u0435\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a>.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e1a\/1a0\/c75\/e1a1a0c75eb16d33bc154beec9517ae7.webp\" width=\"1400\" height=\"783\" sizes=\"auto, (max-width: 780px) 100vw, 50vw\" srcset=\"https:\/\/habrastorage.org\/r\/w780\/getpro\/habr\/upload_files\/e1a\/1a0\/c75\/e1a1a0c75eb16d33bc154beec9517ae7.webp 780w,&#10;       https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e1a\/1a0\/c75\/e1a1a0c75eb16d33bc154beec9517ae7.webp 781w\" loading=\"lazy\" decode=\"async\"\/><\/figure>\n<h4>\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u044d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434?<\/h4>\n<p>\u042d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c production-ready Mini App \u043d\u0430 \u0441\u0442\u0435\u043a\u0435 React + Python. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u043a\u0430\u043a \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0430 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438<\/h4>\n<p>\u041d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u2014 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0442\u0435\u043e\u0440\u0438\u044e, \u0430 \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0434\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<h3>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u044b<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Telegram Mini Apps, \u043a\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f Mini Apps \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0431\u043e\u0442\u043e\u0432 Telegram. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 Mini Apps \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Telegram Mini Apps?<\/h4>\n<p>Telegram Mini Apps (TMA) \u2014 \u044d\u0442\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Telegram \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Telegram, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u0443\u044e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e, \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u0438 \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u043e\u043c. TMA \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445: Android, iOS, Windows, Mac \u0438 Linux.<\/p>\n<p>Mini Apps \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a HTML, CSS \u0438 JavaScript, \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 Telegram \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/core.telegram.org\/bots\/webapps#initializing-mini-apps\" rel=\"noopener noreferrer nofollow\">Web Apps API<\/a>. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0433\u0438\u0431\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043c\u0435\u043d\u0438 \u0438 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438) \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0431\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u0431\u043e\u0442\u043e\u0432.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Mini Apps \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 Telegram, \u0443\u043f\u0440\u043e\u0449\u0430\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u043c\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u043c\u0438.<\/p>\n<h4>\u0427\u0435\u043c Mini Apps \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0431\u043e\u0442\u043e\u0432?<\/h4>\n<p>\u0425\u043e\u0442\u044f Mini Apps \u0438 \u0431\u043e\u0442\u044b Telegram \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430, \u0443 \u043d\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<h3>1. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442<\/h3>\n<p>\u0411\u043e\u0442\u044b Telegram \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445. \u0418\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430. Mini Apps \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Telegram.<\/p>\n<h3>2. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>\u0411\u043e\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 Telegram Bot API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0438 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438. Mini Apps, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 Web Apps API, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 Telegram \u0447\u0435\u0440\u0435\u0437 JavaScript.<\/p>\n<h3>3. \u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>\u0411\u043e\u0442\u044b \u0447\u0430\u0449\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447, \u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u044b\u043b\u043e\u043a, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0447\u0430\u0442-\u0431\u043e\u0442\u0430\u043c\u0438.<\/p>\n<p>Mini Apps \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438, \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043b\u0430\u0442\u0435\u0436\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0438\u0433\u0440\u044b \u0438 \u0440\u0430\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, CRM-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Mini Apps \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u043e\u0442\u043e\u0432, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u0433\u0438\u0431\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 Telegram.<\/p>\n<h3>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e Telegram Mini App, \u0432\u0430\u0436\u043d\u043e \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438 \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043e\u0441\u043d\u043e\u0432\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0438 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0432\u0438\u0434\u0435 <strong>\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c \u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c Telegram-\u0431\u043e\u0442\u0430, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f Mini App;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Vite + React;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c Docker, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <strong>\u043f\u0440\u043e\u043a\u0441\u0438-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u043e\u0431\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c Mini App;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c Nginx.<\/p>\n<\/li>\n<li>\n<p>\u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 Init Data<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Telegram Web Apps SDK (<a href=\"https:\/\/docs.telegram-mini-apps.com\/packages\/telegram-apps-sdk-react\/2-x\" rel=\"noopener noreferrer nofollow\">@telegram-apps\/sdk-react<\/a>)<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"1\" id=\"1\"><\/a><\/p>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 <strong>\u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0438 \u0431\u044d\u043a\u0435\u043d\u0434<\/strong>. \u042d\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u043d\u043e \u0438 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 Telegram. \u0414\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong>Docker<\/strong> \u2014 \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a \u043a\u0430\u043a \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435, \u0442\u0430\u043a \u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0435\u0448\u043d\u0435, \u0438\u0437\u0431\u0430\u0432\u0438\u0432 \u0432\u0430\u0441 \u043e\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0440\u0443\u0447\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.\u00a0<\/p>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c Mini Apps \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e <strong>Init Data<\/strong> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d\u0430 Telegram-\u0431\u043e\u0442\u0430. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c <strong>Init Data<\/strong>, \u0441\u0432\u0435\u0440\u044f\u044f\u0441\u044c \u0441 \u0442\u043e\u043a\u0435\u043d\u043e\u043c \u0431\u043e\u0442\u0430, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f Mini App. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 <strong>\u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e Telegram-\u0431\u043e\u0442\u0430<\/strong> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u043e\u043a\u0435\u043d \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u0430\u0436\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 <strong>\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 backend<\/strong>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u043e\u0435\u0432\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/monorepo.tools\/\" rel=\"noopener noreferrer nofollow\"><strong>\u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/strong><\/a>: \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0438 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438, \u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043f\u043e \u043f\u0430\u043f\u043a\u0430\u043c (<code>\/frontend, \/backend<\/code>). \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443,<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 CI\/CD,<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0439 API,<\/p>\n<\/li>\n<li>\n<p>\u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u043e\u043a,<\/p>\n<\/li>\n<li>\n<p>\u0435\u0434\u0438\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u0435\u043d \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 Mini App, \u0433\u0434\u0435 \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<p><a class=\"anchor\" name=\"3\" id=\"3\"><\/a><\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u043e\u0442\u0430<\/h3>\n<p>Telegram Mini App \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Telegram-\u0431\u043e\u0442\u0430. \u042d\u0442\u043e \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0431\u043e\u0442\u0430 \u2014 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b Mini App.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0449\u0451 \u043d\u0435\u0442 \u0431\u043e\u0442\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/t.me\/BotFather\" rel=\"noopener noreferrer nofollow\">@BotFather<\/a>. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u2014 \u043e\u043d \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u0430\u043d \u0432 <a href=\"https:\/\/core.telegram.org\/bots#3-how-do-i-create-a-bot\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Telegram<\/a>.<\/p>\n<p><strong>\u0427\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c:<\/strong><\/p>\n<ol>\n<li>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0442\u043e\u043a\u0435\u043d \u0431\u043e\u0442\u0430.<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0434\u0430\u0439\u0442\u0435 URL Mini App&#8217;\u0430.<\/strong><br \/>\u0412 \u0434\u0438\u0430\u043b\u043e\u0433\u0435 \u0441 @BotFather \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043c\u0435\u043d\u044e: <strong>Bot Settings \u2192 Configure Mini App \u2192 Edit Mini App URL<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Mini App<\/strong><br \/>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0443\u044e Mini App. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/t.me\/BotFather\" rel=\"noopener noreferrer nofollow\">@BotFather<\/a>: <strong>Bot Settings \u2192 Edit Menu Button<\/strong><\/p>\n<\/li>\n<\/ol>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435<\/h3>\n<p>\u0412 Mini App \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u0431\u043e\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>\/start<\/code>. Telegram \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (<code>from<\/code>) \u043f\u043e\u0447\u0442\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0438\u043f\u0430\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439, \u0438 \u044d\u0442\u043e \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c middleware, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 Telegram-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e update;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0411\u0414, \u0435\u0441\u043b\u0438 \u043e\u043d \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0432 context, \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u0435.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"python\">import typing  import structlog from dependency_injector.wiring import Provide from dependency_injector.wiring import inject from telegram import Update from telegram.ext import CallbackContext  from project.containers import Container  if typing.TYPE_CHECKING:     from users.services import UserService  logger = structlog.get_logger(__name__)   @inject def update_or_create_user(     update: Update,     context: CallbackContext,     user_service: 'UserService' = Provide[Container.user_service], ) -&gt; None:     if update.message is None:         return      tg_user = update.message.from_user     if not tg_user:         logger.debug('No Telegram user found in the update message')         return      user, created = user_service.update_or_create(tg_user)      structlog.contextvars.bind_contextvars(         user_id=user.id,         messenger_user_id=update.message.from_user.id,     )      if created:         logger.info('New user created')      context.user_data['user'] = user<\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0431\u043e\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0448\u0430\u0433\u0443 \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Telegram.<\/p>\n<p><a class=\"anchor\" name=\"2\" id=\"2\"><\/a><\/p>\n<h3>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <\/h3>\n<p>\u0420\u0430\u043d\u0435\u0435 <a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/870236\/\" rel=\"noopener noreferrer nofollow\">\u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438<\/a>, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0435\u043c React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f TMA.  \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 Telegram \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"typescript\">import { retrieveLaunchParams } from '@telegram-apps\/sdk-react' import ReactDOM from 'react-dom\/client' import App from '.\/App.tsx' import 'config\/i18n\/i18n.ts' import { init } from '.\/utils\/init.ts'  const root = ReactDOM.createRoot(document.getElementById('root')!)  try {   init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV)   root.render(&lt;App \/&gt;) } catch (e) {   console.error(e) }<\/code><\/pre>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.  <\/p>\n<pre><code class=\"typescript\">import {   backButton,   viewport,   themeParams,   miniApp,   initData,   $debug,   init as initSDK } from '@telegram-apps\/sdk-react'  export function init(debug: boolean): void {   $debug.set(debug)    initSDK()    if (!backButton.isSupported() || !miniApp.isSupported()) {     throw new Error('ERR_NOT_SUPPORTED')   }    backButton.mount()   miniApp.mount()   themeParams.mount()   initData.restore()   void viewport     .mount()     .catch(e =&gt; {       console.error('Something went wrong mounting the viewport', e)     })     .then(() =&gt; {       viewport.bindCssVars()     })    miniApp.bindCssVars()   themeParams.bindCssVars() }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/docs.telegram-mini-apps.com\/packages\/telegram-apps-sdk-react\/2-x\" rel=\"noopener noreferrer nofollow\">@telegram-apps\/sdk-react<\/a> 2 \u0432\u0435\u0440\u0441\u0438\u0438. SDK \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0438 \u043d\u0435 \u0433\u043e\u0442\u043e\u0432 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u2014 \u0432\u0441\u0435 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438. \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SDK \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a\u0430\u043a \u043a \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0442\u0430\u043a \u0438 \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u0430\u043c, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e init. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u2014 <code>backButton<\/code>, <code>miniApp<\/code>, <code>themeParams<\/code>, <code>viewport<\/code>, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 Docker<\/h3>\n<p>\u041d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u043c. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 Docker \u043a\u043e\u043d\u0444\u0438\u0433, \u043e\u043d \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u043c, \u0447\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 hot reload, \u0447\u0442\u043e \u0432\u0430\u0436\u043d\u043e \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 frontend`\u0430.<\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0436\u0438\u043c\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 <code>docker-compose.local.yml<\/code> \u043a\u043e\u043d\u0444\u0438\u0433. \u041e\u043d \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u043c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e <code>vite<\/code> \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u2014 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043d\u044b\u0439 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e <code>nginx<\/code> \u043a\u043e\u043d\u0444\u0438\u0433\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441 <code>vite<\/code>:<\/p>\n<pre><code class=\"yaml\">services: ...  vite:     build:       context: .       dockerfile: .\/docker\/vite\/Dockerfile       args:         API_BASE_URL: ${API_BASE_URL}     volumes:       - .\/frontend:\/app       - \/app\/node_modules     restart: always     ports:       - \"5173:5173\"    nginx:     image: \"${IMAGE_NGINX}\"     build:       context: .       dockerfile: docker\/nginx-local\/Dockerfile       ...<\/code><\/pre>\n<p>docker-compose.local.yml  <\/p>\n<pre><code>http {     ...     server {         ...         location \/ {             proxy_pass http:\/\/vite:5173;             proxy_http_version 1.1;             proxy_set_header Upgrade $http_upgrade;             proxy_set_header Connection 'upgrade';             proxy_set_header Host $host;             proxy_cache_bypass $http_upgrade;         }     } }<\/code><\/pre>\n<p>nginx.conf\u00a0<\/p>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c vite \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438:<\/p>\n<pre><code>FROM node:21-alpine as build  ARG API_BASE_URL  ENV VITE_API_BASE_URL=$API_BASE_URL  WORKDIR \/app  COPY frontend\/package*.json .\/ RUN npm install  COPY .\/frontend .  EXPOSE 5173  CMD [\"npm\", \"run\", \"start\", \"--\", \"--host\", \"0.0.0.0\"]<\/code><\/pre>\n<h3>\u041f\u0440\u043e\u043a\u0441\u0438-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430<\/h3>\n<p>\u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Telegram \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e URL-\u0430\u0434\u0440\u0435\u0441\u0430 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 Telegram. \u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 <code>localhost<\/code> \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u0430 \u0441 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 BotFather \u043a URL-\u0430\u0434\u0440\u0435\u0441\u0430\u043c \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437-\u0437\u0430 \u0441\u0442\u0440\u043e\u0433\u043e\u0433\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f Telegram \u043a \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0443 HTTPS. \u0414\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u0445 Telegram (\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0445) \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c URL-\u0430\u0434\u0440\u0435\u0441 HTTPS.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u043e\u0434\u043e\u043b\u0435\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0440\u044b\u0432, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u043f\u0440\u043e\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0445 URL.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0431\u044b\u043b \u043e\u043f\u044b\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432:<\/p>\n<ul>\n<li>\n<p>ngrok \u2014 \u0441\u0435\u0440\u0432\u0438\u0441, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 VPN. ngrok \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444, \u043d\u043e \u043e\u043d \u0438\u043c\u0435\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f, \u0432\u043a\u043b\u044e\u0447\u0430\u044f, \u043e\u0434\u0438\u043d \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u043e\u043c\u0435\u043d, 20 000 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u043c\u0435\u0441\u044f\u0446 \u0438 \u043b\u0438\u043c\u0438\u0442 \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0435\u0433\u043e \u0442\u0440\u0430\u0444\u0438\u043a\u0430 \u0432 1 \u0413\u0411. \u041f\u0440\u0438 \u0438\u0441\u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u043b\u0438\u043c\u0438\u0442\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u043a\u043a\u0430\u0443\u043d\u0442.<\/p>\n<\/li>\n<li>\n<p>localtunnel \u2014 \u0441\u043b\u0443\u0436\u0438\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 ngrok, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044f \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0415\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 npm (npm install -g localtunnel). \u041d\u0430 \u043c\u043e\u0435\u043c \u043e\u043f\u044b\u0442\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0447\u0430\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c localtunnel, \u0430 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u044d\u0442\u0438\u043c \u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 BotFather \u0438 \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0418\u0437 \u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0443\u0442\u0438\u043b\u0438\u0442, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0432 \u0420\u043e\u0441\u0441\u0438\u0438, \u043c\u044b \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 Tuna. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u043e\u043c\u0435\u043d\u043e\u0432, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<h4>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0447\u0435\u0440\u0435\u0437 Init Data<\/h4>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 Telegram Mini Apps \u043e\u0434\u043d\u0438\u043c \u0438\u0437 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439. Telegram \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0447\u0435\u0440\u0435\u0437 Init Data, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u043e\u0434\u043b\u0438\u043d\u043d\u043e\u0441\u0442\u0438. \u041e\u0434\u043d\u0430\u043a\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0442\u0440\u0435\u0442\u044c\u0438\u043c\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u0430\u043c\u0438.<\/p>\n<h3>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0447\u0435\u0440\u0435\u0437 TMA<\/h3>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0442\u043e \u043a\u043b\u0438\u0435\u043d\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 Init Data \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u2014 <code>Telegram.WebApp.initData<\/code> (\u0435\u0441\u043b\u0438 TMA \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/core.telegram.org\/bots\/webapps#keyboard-button-mini-apps\" rel=\"noopener noreferrer nofollow\">keyboard button<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/core.telegram.org\/bots\/webapps#inline-mode-mini-apps\" rel=\"noopener noreferrer nofollow\">inline mode<\/a>, \u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439). Init Data \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u0441\u0442\u0440\u043e\u043a\u0438, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u0442\u0430\u043a\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u0430\u043a \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435 (<code>user<\/code>), \u0445\u044d\u0448 (<code>hash<\/code>), \u0432\u0440\u0435\u043c\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 (<code>auth_date<\/code>) \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f. \u041f\u043e\u043b\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/core.telegram.org\/bots\/webapps#webappinitdata\" rel=\"noopener noreferrer nofollow\">\u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>.<\/p>\n<p>Init Data \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 HTTP \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0414\u0430\u043b\u0435\u0435 \u043c\u044b \u043d\u0430 backend \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u043f\u043e\u0434\u043b\u0438\u043d\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0448\u0430\u0433\u0438:<\/p>\n<ol>\n<li>\n<p><strong>\u0418\u0437\u0432\u043b\u0435\u0447\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:<\/strong> \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c, \u0432\u044b\u0434\u0435\u043b\u0438\u0432 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u044c:<\/strong>\u00a0<\/p>\n<ol>\n<li>\n<p>\u0418\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c <code>hash<\/code> \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<\/li>\n<li>\n<p>\u041e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0432 \u0430\u043b\u0444\u0430\u0432\u0438\u0442\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0438 \u0441\u043e\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0438\u0445 \u0432 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432\u0438\u0434\u0430 <code>key=value<\/code>.<\/p>\n<\/li>\n<li>\n<p>\u0412\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c <a href=\"https:\/\/en.wikipedia.org\/wiki\/HMAC\" rel=\"noopener noreferrer nofollow\">HMAC-SHA256<\/a> \u0441 \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u043e\u043c, \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u043e\u043a\u0435\u043d\u0430 \u0431\u043e\u0442\u0430.<\/p>\n<\/li>\n<\/ol>\n<\/li>\n<li>\n<p><strong>\u0421\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c\u043d\u0443\u044e \u043f\u043e\u0434\u043f\u0438\u0441\u044c:<\/strong> \u0435\u0441\u043b\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0439 \u0445\u044d\u0448 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u043c hash, \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u043e\u0434\u043b\u0438\u043d\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c auth_date:<\/strong> \u0435\u0441\u043b\u0438 \u043c\u0435\u0442\u043a\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u0442\u0430\u0440\u0430\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0431\u043e\u043b\u0435\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0438\u043d\u0443\u0442), \u0434\u0430\u043d\u043d\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0435\u0441\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/core.telegram.org\/bots\/webapps#validating-data-received-via-the-mini-app\" rel=\"noopener noreferrer nofollow\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Telegram<\/a>.<\/p>\n<p>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Init Data \u0432 TMA <a href=\"https:\/\/habr.com\/ru\/posts\/880280\/\" rel=\"noopener noreferrer nofollow\">\u043c\u044b \u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443<\/a>. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 backend.<\/p>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 Django:<\/h3>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 Django. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c middleware \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c Init Data,<\/p>\n<\/li>\n<li>\n<p>\u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0438\u0437 \u043d\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (ID, \u0438\u043c\u044f, username \u0438 \u0442.\u0434.),<\/p>\n<\/li>\n<li>\n<p>\u0438 \u2014 <strong>\u0447\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0432\u0430\u0436\u043d\u043e<\/strong> \u2014 <strong>\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0431\u0430\u0437\u0435<\/strong>, \u0435\u0441\u043b\u0438 \u043e\u043d \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d. \u042d\u0442\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0448\u0430\u0433, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Mini App \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u043a\u0440\u044b\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>\/start<\/code> \u0432 \u0431\u043e\u0442\u0435, \u043d\u043e \u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0435. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0432 frontend, \u043c\u0438\u043d\u0443\u044f \u043b\u044e\u0431\u0443\u044e \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0443\u044e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 Telegram-\u0431\u043e\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u043d\u0443\u0436\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 <code>settings.py<\/code>:<\/p>\n<pre><code class=\"python\">from telegram_webapp_auth.auth import generate_secret_key  # \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438...  TELEGRAM_BOT_TOKEN = env.str('TELEGRAM_BOT_TOKEN') TELEGRAM_SECRET_KEY = generate_secret_key(TELEGRAM_BOT_TOKEN)<\/code><\/pre>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c middleware:  <\/p>\n<pre><code class=\"python\">from django.conf import settings from django.contrib.auth.models import User from django.http import HttpRequest from django.http import HttpResponse from telegram_webapp_auth.auth import TelegramAuthenticator from telegram_webapp_auth.errors import InvalidInitDataError   class TMAAuthorizationMiddleware:     def __init__(self, get_response) -&gt; None:         self.get_response = get_response         self._telegram_authenticator = TelegramAuthenticator(settings.TELEGRAM_SECRET_KEY)         self._user_service = UserService()      def __call__(self, request: HttpRequest) -&gt; HttpResponse:         auth_cred = request.headers.get('Authorization')          try:             init_data = self._telegram_authenticator.validate(auth_cred)         except InvalidInitDataError:             # TODO: \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 ExpiredInitDataError             # TODO: \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043d\u0435\u0432\u0430\u043b\u0438\u0434\u043d\u0430\u044f Init Data             pass          if not init_data.user:             # TODO: \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043b\u0443\u0447\u0430\u0439 \u0435\u0441\u043b\u0438 \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 Init Data \u043d\u0435\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435             pass                  current_user = self._user_service.update_or_create(init_data.user)         request.user = current_user  # \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430          response = self.get_response(request)          return response<\/code><\/pre>\n<p>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e middleware \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <code>MIDDLEWARE<\/code> \u0432 <code>settings.py<\/code>:<\/p>\n<pre><code class=\"python\">MIDDLEWARE = [     # \u0434\u0440\u0443\u0433\u0438\u0435 middleware     'path.to.TMAAuthorizationMiddleware', ]<\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 TMA.<\/p>\n<h3>\u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 Third-Party \u0434\u0430\u043d\u043d\u044b\u0445<\/h3>\n<p>\u0412 Telegram \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c Init Data \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0431\u043e\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e ID \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u0431\u043e\u0442\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u043c\u0435\u0436\u0434\u0443 backend-\u0430\u043c\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0431\u043e\u0442\u043e\u0432.<\/p>\n<p>\u0426\u0435\u043b\u043e\u0441\u0442\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u043d\u0430 \u043f\u0443\u0442\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 signature, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0432 <code>base64url<\/code> \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u0438 <a href=\"https:\/\/ed25519.cr.yp.to\/#:~:text=Papers-,Introduction,Nehalem%2FWestmere%20lines%20of%20CPUs.\" rel=\"noopener noreferrer nofollow\">Ed25519<\/a>. \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430, <a href=\"https:\/\/core.telegram.org\/bots\/webapps#validating-data-for-third-party-use\" rel=\"noopener noreferrer nofollow\">\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e Telegram<\/a>.<\/p>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0432 <a href=\"https:\/\/habr.com\/ru\/posts\/880280\/\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435<\/a>.<\/p>\n<h3>\u041e\u0431\u043c\u0435\u043d Init Data \u043d\u0430 JWT<\/h3>\n<p>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e\u0442 <strong>\u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0442\u044c Init Data \u043d\u0430 JWT-\u0442\u043e\u043a\u0435\u043d<\/strong> \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<ol>\n<li>\n<p>Frontend \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 Init Data \u043d\u0430 backend.<\/p>\n<\/li>\n<li>\n<p>Backend \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0438 \u0441\u043e\u0437\u0434\u0430\u0451\u0442 JWT.<\/p>\n<\/li>\n<li>\n<p>JWT \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f (\u0432 <code>localStorage<\/code>).<\/p>\n<\/li>\n<li>\n<p>\u0412\u0441\u0435 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b frontend \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441 \u044d\u0442\u0438\u043c \u0442\u043e\u043a\u0435\u043d\u043e\u043c.<\/p>\n<\/li>\n<\/ol>\n<p><strong>\u041f\u043b\u044e\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0440\u043e\u043a\u043e\u043c \u0436\u0438\u0437\u043d\u0438 \u0441\u0435\u0441\u0441\u0438\u0438.<\/p>\n<\/li>\n<li>\n<p>\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2013 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u043e\u043a\u0435\u043d\u0430.<\/p>\n<\/li>\n<li>\n<p>\u041a\u0440\u043e\u0441\u0441-\u0434\u043e\u043c\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u2013 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p><code><strong>localStorage<\/strong><\/code><strong> \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c\u0441\u044f<\/strong> \u0432 Telegram Mini App: \u041d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 (iOS, Linux Desktop) Telegram WebView \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d. \u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a Mini App \u043c\u043e\u0436\u0435\u0442 \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u043a\u044d\u0448 \u0438 storage. \u0418 \u0441 \u044d\u0442\u0438\u043c, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u0435\u0440\u044f \u0442\u043e\u043a\u0435\u043d\u0430 = \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u0430\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f, \u0447\u0442\u043e \u0432\u043b\u0435\u0447\u0451\u0442 \u0437\u0430 \u0441\u043e\u0431\u043e\u0439 \u043b\u0438\u0448\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<\/li>\n<\/ul>\n<p>\u0418\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 Telegram \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 <code>localStorage<\/code> \u043c\u044b\u00a0 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 Init Data \u0432 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u0430 \u043d\u0435 \u0447\u0435\u0440\u0435\u0437 JWT \u2014 \u043e\u043d\u0430 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u0430\u044f, \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f WebView Telegram.\u00a0<\/p>\n<h4>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Telegram SDK React<\/h4>\n<p>\u041f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/docs.telegram-mini-apps.com\/packages\/telegram-apps-sdk-react\/2-x\" rel=\"noopener noreferrer nofollow\">@telegram-apps\/sdk-react<\/a> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0431\u0435\u0441\u043f\u0440\u0435\u043f\u044f\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 Telegram \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b.<\/p>\n<h3>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 SDK<\/h3>\n<p>\u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432:<\/p>\n<p><code>BackButton<\/code> \u2014 \u043d\u0430\u0432\u0435\u0440\u043d\u043e \u0441\u0430\u043c\u044b\u0439 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0449\u0438\u0439\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u043e\u0439 \u00ab\u043d\u0430\u0437\u0430\u0434\u00bb, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0415\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0446\u0435\u043b\u044c \u2014 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u043f\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0445\u043e\u0442\u044f \u0435\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043b\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u044f\u0432\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u043e \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439. \u041c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0445\u0443\u043a \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438:<\/p>\n<pre><code class=\"typescript\">import { backButton } from '@telegram-apps\/sdk-react' import { useEffect } from 'react'  export const useAppBackButton = (handler: () =&gt; void) =&gt; {   useEffect(() =&gt; {     backButton.onClick(handler)      return () =&gt; {       backButton.offClick(handler)     }   }, [backButton])    return {     isVisible: backButton.isVisible,     showButton: backButton.show.bind(backButton),     hideButton: backButton.hide.bind(backButton)   } }<\/code><\/pre>\n<p><code>Viewport<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 Telegram. \u042d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0430\u0436\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e, \u0442\u0430\u043a\u0443\u044e \u043a\u0430\u043a <code>width<\/code>, <code>height<\/code>, <code>stability<\/code> (\u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043e\u0436\u0438\u0434\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430), <code>expansion<\/code> (\u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0430 \u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u044b) \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 <code>fullscreen<\/code>. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e expand:  <\/p>\n<pre><code class=\"typescript\">if (viewport.expand.isAvailable()) {   viewport.expand() }<\/code><\/pre>\n<p>\u0438\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c   <\/p>\n<pre><code class=\"typescript\">if (viewport.requestFullscreen.isAvailable()) {   await viewport.requestFullscreen(); }<\/code><\/pre>\n<p>\u0447\u0442\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f \u0438\u0433\u0440 \u0438\u043b\u0438 \u043c\u0435\u0434\u0438\u0430-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439. \u0422\u0430\u043a\u0436\u0435 <code>viewport<\/code> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445:  <\/p>\n<pre><code class=\"typescript\">if (viewport.bindCssVars.isAvailable()) {   viewport.bindCssVars();   \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u0442 CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:   \/\/ --tg-viewport-height: 675px   \/\/ --tg-viewport-width: 320px   \/\/ --tg-viewport-stable-height: 675px }<\/code><\/pre>\n<p>\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>ThemeParams<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0442\u0435\u043c\u043e\u0439 Telegram, \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>bindCssVars<\/code> \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:<\/p>\n<pre><code class=\"typescript\">if (themeParams.bindCssVars.isAvailable()) {   themeParams.bindCssVars();   \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u0442 CSS \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:   \/\/ --tg-theme-button-color: #aabbcc   \/\/ --tg-theme-accent-text-color: #aabbcc   \/\/ --tg-theme-bg-color: #aabbcc   \/\/ ... }<\/code><\/pre>\n<p>\u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c.\u00a0<\/p>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 <code>miniApp<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0445\u0435\u0434\u0435\u0440\u0430 \u0438 \u0444\u043e\u043d\u0430 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">if (   miniApp.setHeaderColor.isAvailable()   &amp;&amp; miniApp.setHeaderColor.supports('rgb') ) {   miniApp.setHeaderColor('#aabbcc');   miniApp.headerColor(); \/\/ '#aabbcc' }<\/code><\/pre>\n<pre><code class=\"typescript\">if (miniApp.setBackgroundColor.isAvailable()) {   miniApp.setBackgroundColor('#ffffff');   miniApp.backgroundColor(); \/\/ '#ffffff' }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043c\u0435\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b <code>close<\/code> \u0434\u043b\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 <code>ready<\/code> \u0434\u043b\u044f \u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u0448\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c.<\/p>\n<p>Telegram \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 API \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u0432\u0438\u0431\u0440\u043e\u043e\u0442\u043a\u043b\u0438\u043a\u043e\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430: \u043e\u0431\u044a\u0435\u043a\u0442 <code>hapticFeedback<\/code>. \u041c\u0435\u0442\u043e\u0434 <code>impactOccurred<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0432\u0438\u0431\u0440\u0430\u0446\u0438\u044e \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0432\u043a\u0443\u0441 \u2014 <code>light<\/code>, <code>medium<\/code>, <code>heavy<\/code>, <code>rigid<\/code>, <code>soft<\/code>. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u0434\u043b\u044f UX-\u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0435\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"typescript\">if (hapticFeedback.impactOccurred.isAvailable()) {   hapticFeedback.impactOccurred('medium'); }<\/code><\/pre>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 <code>swipeBehavior<\/code> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u0438\u0435 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0436\u0435\u0441\u0442\u043e\u043c \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u0436\u0435\u0441\u0442: <\/p>\n<pre><code class=\"typescript\">if (swipeBehavior.disableVertical.isAvailable()) {   swipeBehavior.disableVertical() }<\/code><\/pre>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0435\u0441\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0432 SDK, \u2014 \u044d\u0442\u043e <code>popup<\/code>, <code>main button<\/code>, <code>settings button<\/code>, <code>qr scanner<\/code> \u0438 \u0434\u0440\u0443\u0433\u0438\u0435. \u041e\u043d\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u0432\u0438\u0434\u0430 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h3>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b SDK, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u0441 Init Data<\/h3>\n<p>\u0410\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 initDataRaw \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u0430 retrieveLaunchParams:<\/p>\n<pre><code class=\"typescript\">const { initDataRaw } = retrieveLaunchParams()  export const http = axios.create({   baseURL: appConfig.api.baseUrl,   headers: {     Authorization: initDataRaw,     'Content-Type': 'application\/json'   } })<\/code><\/pre>\n<h2>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0430<\/h2>\n<p>\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043f\u0443\u0441\u043a\u043e\u043c Mini App \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u0432\u0430\u0436\u043d\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0438 \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0443\u0435\u043c\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0443\u0440\u043e\u0432\u043d\u044f\u0445 \u2014 \u043e\u0442 backend-\u043b\u043e\u0433\u0438\u043a\u0438 \u0434\u043e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0432 Telegram. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Telegram Mini Apps \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438, \u0433\u0434\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438 backend \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u044b, \u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b (Android, iOS, Desktop, Web), \u043e\u0442\u043b\u0430\u0434\u043a\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0441\u043e\u0431\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c:<\/p>\n<ul>\n<li>\n<p>\u043a\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u043e <strong>\u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c backend-\u0447\u0430\u0441\u0442\u044c<\/strong>, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e\u0433\u043e Init Data;<\/p>\n<\/li>\n<li>\n<p>\u043a\u0430\u043a <strong>\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c Mini App \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0443\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 SDK, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f;<\/p>\n<\/li>\n<\/ul>\n<h4>\u041e\u0442\u043b\u0430\u0434\u043a\u0430 Backend-\u0447\u0430\u0441\u0442\u0438<\/h4>\n<p>\u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 Telegram Mini App \u0432\u0430\u0436\u043d\u043e \u043d\u0430\u043b\u0430\u0434\u0438\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u0443\u044e \u0438 \u0431\u044b\u0441\u0442\u0440\u0443\u044e \u043e\u0442\u043b\u0430\u0434\u043a\u0443 API. Telegram \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0432 Mini App \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 Init Data, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u041e\u0434\u043d\u0430\u043a\u043e \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043d\u0438\u043c \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e:<\/p>\n<ul>\n<li>\n<p>Init Data \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0437 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0435\u0433\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 Telegram.<\/p>\n<\/li>\n<li>\n<p>\u0415\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u043c\u0435\u0448\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u043e\u0442\u043b\u0430\u0434\u043a\u0435 API \u0438 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u0435\u0442 \u0446\u0438\u043a\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 API \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e, \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 <strong>\u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438<\/strong>, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0435 <code>user_id<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u043c\u0438\u043d\u0443\u044f Init Data.<\/p>\n<h3>\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c:<\/h3>\n<ul>\n<li>\n<p>\u0412 middleware \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0439\u0442\u0435, \u0432\u043a\u043b\u044e\u0447\u0451\u043d \u043b\u0438 <strong>\u0440\u0435\u0436\u0438\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/strong> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0435\u0440\u0435\u0437 <code>settings.DEBUG<\/code>).<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>X-Dev-User-ID<\/code> \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u043e Init Data.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0438\u043b\u0438 \u043d\u0430\u0439\u0434\u0438\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e \u044d\u0442\u043e\u043c\u0443 ID \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0432 <code>request.user<\/code>.<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440 middleware:<\/p>\n<pre><code class=\"python\">from django.utils.deprecation import MiddlewareMixin from django.conf import settings from myapp.models import TelegramUser  class DevAuthMiddleware(MiddlewareMixin):     def process_request(self, request):         if settings.DEBUG:             user_service = UserService()             dev_user_id = request.headers.get(\"X-Dev-User-ID\")             if dev_user_id:                 user, _ = user_service.get_or_create(telegram_id=dev_user_id)                 request.user = user                 return<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Postman, cURL \u0438\u043b\u0438 Swagger UI \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u043d\u0443\u0436\u043d\u044b\u0439 ID.<\/p>\n<h4>\u0422\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445<\/h4>\n<p>\u0414\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 Android \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f Chrome DevTools, \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <code>chrome:\/\/inspect\/#devices<\/code> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Chrome \u043d\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435. \u042d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043b\u043e\u0433\u0438 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0438 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p>\u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0434\u043b\u044f Telegram-\u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u043d\u0430 iOS, Safari Web Inspector \u043d\u0430 Mac \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c iOS \u0438 \u043c\u0430\u0448\u0438\u043d\u043e\u0439 macOS \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u043d\u044e \u00ab\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430\u00bb \u0432 Safari \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e WebView, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 Chrome DevTools, \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0441\u043e\u043b\u0438.<\/p>\n<p>\u0412 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u0443\u0434\u0430\u043b\u0435\u043d\u043d\u0430\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0435\u043d\u0430 \u0438\u043b\u0438 \u043d\u0435\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 iOS \u0431\u0435\u0437 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043c\u0430\u0448\u0438\u043d\u0435 macOS, npm-\u043f\u0430\u043a\u0435\u0442 Eruda \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. Eruda \u2014 \u044d\u0442\u043e \u043b\u0435\u0433\u043a\u043e\u0432\u0435\u0441\u043d\u0430\u044f \u0432\u0435\u0431-\u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432 \u0441\u0430\u043c\u043e \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442, \u0435\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432\u044b\u0437\u0432\u0430\u0432 <code>eruda.init()<\/code>. \u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u043e\u043a Eruda. \u041d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0437\u043d\u0430\u0447\u043e\u043a \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0443\u044e \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a \u043b\u043e\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0441\u0435\u0442\u0438.<\/p>\n<p><a class=\"anchor\" name=\"4\" id=\"4\"><\/a><\/p>\n<h3>\u0414\u0435\u043f\u043b\u043e\u0439 \u043d\u0430 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d<\/h3>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Mini App \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 production. \u0412 \u044d\u0442\u043e\u043c \u0431\u043b\u043e\u043a\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c \u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u0445 \u043f\u043e \u0434\u0435\u043f\u043b\u043e\u0439\u043c\u0435\u043d\u0442\u0443, \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438 \u043d\u0430\u0434\u0435\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b Telegram Mini App \u0432 \u0431\u043e\u0435\u0432\u043e\u043c \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438. \u0412 \u0446\u0435\u043b\u043e\u043c \u043e\u043d\u0438 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043b\u044e\u0431\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<h4>\u041e\u0431\u0449\u0438\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0443<\/h4>\n<ul>\n<li>\n<p><strong>\u0420\u0430\u0437\u043d\u043e\u0441\u0438\u0442\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/strong>: \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430, staging \u0438 production \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430. \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u044b\u043b\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0441\u0442\u0435\u043d\u0434 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439.<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u043e\u043d\u0438\u0442\u043e\u0440\u044c\u0442\u0435 \u043b\u043e\u0433\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438<\/strong> \u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Sentry, Prometheus + Grafana + Loki \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e <strong>webhook \u0440\u0435\u0436\u0438\u043c<\/strong> \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b Telegram \u0431\u043e\u0442\u0430:<\/p>\n<ul>\n<li>\n<p>\u043e\u043d \u043c\u0435\u043d\u0435\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0439,<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 (\u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0441\u0440\u0430\u0437\u0443),<\/p>\n<\/li>\n<li>\n<p>\u043b\u0435\u0433\u0447\u0435 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u0435\u0442\u0441\u044f.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438<\/h4>\n<ul>\n<li>\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u044c\u0442\u0435 \u0432\u0440\u0435\u043c\u044f \u0436\u0438\u0437\u043d\u0438 Init Data<\/strong> \u2013 \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u0435\u0447\u043d\u043e\u0436\u0438\u0432\u0443\u0449\u0438\u0439 \u0442\u043e\u043a\u0435\u043d.<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u044c\u0442\u0435 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u043c<\/strong> \u2014 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e IP, VPN \u0438\u043b\u0438 \u043b\u043e\u0433\u0438\u043d\u0443<\/p>\n<\/li>\n<li>\n<p><strong>\u041e\u0433\u0440\u0430\u043d\u0438\u0447\u044c\u0442\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0434\u043b\u044f CORS \u0438 CSP<\/strong> \u2014 Telegram WebView, \u0432\u0430\u0448 \u0434\u043e\u043c\u0435\u043d \u0438 \u043d\u0443\u0436\u043d\u044b\u0435 API<\/p>\n<\/li>\n<li>\n<p><strong>\u0420\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0439\u0442\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/strong> \u0438 \u0441\u043b\u0435\u0434\u0438\u0442\u0435 \u0437\u0430 CVE-\u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438!<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0449\u0438\u0442\u0430 \u043e\u0442 DDoS-\u0430\u0442\u0430\u043a<\/strong> \u2013 \u0437\u043b\u043e\u0443\u043c\u044b\u0448\u043b\u0435\u043d\u043d\u0438\u043a \u043d\u0435 \u0434\u0440\u0435\u043c\u043b\u0435\u0442.<\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 rate limit \u043d\u0430 \u0432\u0441\u0435\u0445 API endpoint-\u0430\u0445<\/strong>\u00a0 \u2013 \u043d\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0439\u0442\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c \u044d\u043a\u0441\u043f\u043b\u0443\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0430\u0448\u0435 API.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u0441\u0442\u0430\u0442\u0438\u043a\u0438<\/h4>\n<ul>\n<li>\n<p><strong>\u041c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0439\u0442\u0435 \u0438 \u0445\u044d\u0448\u0438\u0440\u0443\u0439\u0442\u0435 JS\/CSS<\/strong> \u2013 \u044d\u0442\u043e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u0442\u0440\u0430\u0444\u0438\u043a \u0438 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 Gzip \u0438\u043b\u0438 Brotli-\u0441\u0436\u0430\u0442\u0438\u0435<\/strong> \u2013 \u0442\u0430\u043a\u0436\u0435 \u0443\u0441\u043a\u043e\u0440\u044f\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0442\u0430\u0442\u0438\u043a\u0438.<\/p>\n<\/li>\n<\/ul>\n<h4>\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a backend API<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043e\u0442\u043a\u043b\u0438\u043a \u0438 \u0441\u043d\u0438\u0437\u0438\u0442\u044c \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443:<\/p>\n<ul>\n<li>\n<p><strong>\u041a\u044d\u0448\u0438\u0440\u0443\u0439\u0442\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u0438 \u0447\u0430\u0441\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0435\u0441\u044f GET-\u0437\u0430\u043f\u0440\u043e\u0441\u044b<\/strong>. \u0414\u0435\u043b\u0430\u0439\u0442\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u0434\u0435\u043c\u043f\u043e\u0442\u0435\u043d\u0442\u043d\u044b\u043c\u0438.<\/p>\n<\/li>\n<li>\n<p><strong>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Redis\/Memcached<\/strong>. \u041a\u044d\u0448\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u0430\u043c\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b.<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 Cache-Control<\/strong>. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u043a\u044d\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<\/li>\n<\/ul>\n<h3>\u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u0435\u0439\u0441\u043e\u0432<\/h3>\n<p><strong>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0437 \u043d\u0430\u0448\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438<\/strong><\/p>\n<p>\u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0451\u043c Telegram Mini Apps \u043f\u043e\u0434 \u0441\u0430\u043c\u044b\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u2014 \u043e\u0442 \u0438\u0433\u0440 \u0434\u043e e-commerce \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432. <a href=\"https:\/\/doubletapp.ai\/miniapp\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=tma1\" rel=\"noopener noreferrer nofollow\">\u0412\u043e\u0442 \u0447\u0430\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432<\/a>:<\/p>\n<p>\u2014 Doubletapalka. \u041f\u0440\u0438\u0434\u0443\u043c\u0430\u043b\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0443, \u043f\u0440\u043e\u0441\u0447\u0438\u0442\u0430\u043b\u0438 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u043a\u0443, \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0432\u0441\u0451 \u2014 \u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d\u0430 \u0434\u043e backend-\u043b\u043e\u0433\u0438\u043a\u0438. \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u043d\u0430\u044f \u0438\u0433\u0440\u0430 \u0441 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u043e\u043c \u0434\u043b\u044f \u043c\u043e\u043d\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438.<br \/> \u2014 \u0418\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d \u043c\u0435\u0440\u0447\u0430. \u041f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 e-commerce \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 Telegram \u2014 \u0441 \u043d\u0430\u0442\u0438\u0432\u043d\u043e\u0439 \u043e\u043f\u043b\u0430\u0442\u043e\u0439 \u0431\u0430\u043d\u043a\u043e\u0432\u0441\u043a\u0438\u043c\u0438 \u043a\u0430\u0440\u0442\u0430\u043c\u0438 \u0438 \u043a\u0440\u0438\u043f\u0442\u043e\u0432\u0430\u043b\u044e\u0442\u043e\u0439. \u041c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0434\u0438\u0437\u0430\u0439\u043d, \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438 backend.<br \/> \u2014 \u0421\u0435\u0440\u0432\u0438\u0441 \u0430\u0440\u0435\u043d\u0434\u044b \u0430\u0432\u0442\u043e. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0447\u0438\u0441\u0442\u044b\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 mini app \u2014 \u0444\u043e\u043a\u0443\u0441 \u043d\u0430 UX, \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043b\u0451\u0433\u043a\u043e\u0441\u0442\u044c.<br \/> \u2014 CryptoFlow \u2014 \u043a\u0430\u0440\u0442\u043e\u0447\u043d\u0430\u044f \u0438\u0433\u0440\u0430 \u0432 \u0434\u0443\u0445\u0435 <em>Reigns<\/em>. \u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0441\u0432\u0430\u0439\u043f-\u043c\u0435\u0445\u0430\u043d\u0438\u043a\u0430, \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u0432\u044b\u0445 \u0438\u0441\u0442\u043e\u0440\u0438\u0439, \u0430\u0447\u0438\u0432\u043a\u0438, \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043a\u0430\u0440\u0442 \u0438 \u043f\u043e\u043a\u0443\u043f\u043a\u0438 \u0437\u0430 Telegram Stars. \u041c\u044b \u043e\u0442\u0432\u0435\u0447\u0430\u043b\u0438 \u0437\u0430 \u0432\u0435\u0441\u044c \u0444\u0440\u043e\u043d\u0442 \u0438 backend.<\/p>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>Telegram Mini Apps \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430. \u0412 \u044d\u0442\u043e\u043c \u0433\u0430\u0439\u0434\u0435 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u0448\u0430\u0433\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c production-ready \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<h4>\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u0440\u0435\u0437\u044e\u043c\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u043e\u0433\u043e \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430<\/h4>\n<ul>\n<li>\n<p>\u0420\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Mini Apps \u0438 \u0447\u0435\u043c \u043e\u043d\u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0431\u043e\u0442\u043e\u0432<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0441 Docker, Nginx \u0438 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u043c<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043b\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0431\u043e\u0442\u0430 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Mini App<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 Init Data \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/p>\n<\/li>\n<li>\n<p>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043b\u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043d\u0430 Vite \u0438 backend \u043d\u0430 Django<\/p>\n<\/li>\n<li>\n<p>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043e\u0442\u043b\u0430\u0434\u043a\u0443, \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u0434\u0435\u043f\u043b\u043e\u044f<\/p>\n<\/li>\n<\/ul>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u043e\u0448\u043b\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u044d\u0442\u0430\u043f\u0430 \u2014 \u0443 \u0432\u0430\u0441 \u0432 \u0440\u0443\u043a\u0430\u0445 \u0432\u0441\u044f \u0431\u0430\u0437\u0430 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e Mini App \u0432 Telegram. \u0423\u0434\u0430\u0447\u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d\u0435! \ud83d\ude80<\/p>\n<p><strong>\u0413\u043e\u0442\u043e\u0432\u044b \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c Telegram Mini App \u0432 \u0441\u0432\u043e\u0439 \u0431\u0438\u0437\u043d\u0435\u0441?<br \/><\/strong>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b \u0432 TMA \u0438 \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0441 \u0443\u043c\u043e\u043c, \u043c\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u043e\u043c\u043e\u0447\u044c. \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 \u043e\u0442 \u0443\u0434\u043e\u0431\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0434\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0432\u0430\u0448\u0438\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430\u043c\u0438.<\/p>\n<p>\u041e\u0431\u0441\u0443\u0434\u0438\u043c \u0432\u0430\u0448\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u2014 \u043d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u043d\u0430\u043c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443 <a href=\"mailto:hi@doubletapp.ai\" rel=\"noopener noreferrer nofollow\">hi@doubletapp.ai<\/a> \u0438\u043b\u0438 \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0430\u044f\u0432\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/t.me\/dt_create_mini_app_bot\" rel=\"noopener noreferrer nofollow\">\u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u0431\u043e\u0442\u0430<\/a>.<a href=\"https:\/\/t.me\/dt_create_mini_app_bot%EF%BF%BC%D0%92%D1%81%D1%91\" rel=\"noopener noreferrer nofollow\"><br \/><\/a>\u0412\u0441\u0451 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u043e\u0440\u043e\u0442\u043a\u043e\u0433\u043e \u0434\u0438\u0430\u043b\u043e\u0433\u0430. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u043d\u0430 \u0441\u0435\u0431\u044f.<\/p>\n<h3>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b <\/h3>\n<ul>\n<li>\n<p><a href=\"https:\/\/core.telegram.org\/bots\/webapps#implementing-mini-apps\" rel=\"noopener noreferrer nofollow\">https:\/\/core.telegram.org\/bots\/webapps#implementing-mini-apps<\/a> \u2013 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043e\u0442 Telegram Mini Apps<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/core.telegram.org\/bots#3-how-do-i-create-a-bot\" rel=\"noopener noreferrer nofollow\">https:\/\/core.telegram.org\/bots#3-how-do-i-create-a-bot<\/a> \u2013 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u043e\u0442\u0430<\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/t.me\/doubletapp\/991\" rel=\"noopener noreferrer nofollow\">https:\/\/t.me\/doubletapp\/991<\/a> \u2013 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 Init Data \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Python.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0411\u043e\u043b\u044c\u0448\u0435 \u043a\u0435\u0439\u0441\u043e\u0432 \u0438 \u043d\u043e\u0432\u043e\u0441\u0442\u0435\u0439 \u2013 \u0432 Telegram-\u043a\u0430\u043d\u0430\u043b\u0435 Doubletapp. <\/strong><a href=\"https:\/\/t.me\/+o0o3poIS-b0zMTAy\" rel=\"noopener noreferrer nofollow\"><strong>\u041f\u043e\u0434\u043f\u0438\u0448\u0438\u0441\u044c!<\/strong><\/a><strong>\u00a0<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><\/p>\n<div class=\"tm-article-poll-container\"><!--[--><\/p>\n<div class=\"tm-article-poll tm-article-poll_variant-bordered\">\n<div class=\"tm-notice tm-notice_positive tm-article-poll__notice\"><!----><\/p>\n<div class=\"tm-notice__inner\"><!----><\/p>\n<div class=\"tm-notice__content\" data-test-id=\"notice-content\"><!--[--><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/companies\/doubletapp\/articles\/917286\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><!--]--><\/div>\n<\/div>\n<\/div>\n<p><!--[--><\/p>\n<div class=\"tm-article-poll__header\">\u0412\u044b \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 Telegram Mini Apps \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0433\u0430\u0439\u0434\u0430?<\/div>\n<div class=\"tm-article-poll__answers\"><!--[--><\/p>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">45.45% <\/span><span class=\"tm-article-poll__answer-label\">\u0414\u0430, \u043f\u0438\u0441\u0430\u043b(\u0430) \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d<\/span><span class=\"tm-article-poll__answer-votes\">5<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width: 45.45%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">27.27% <\/span><span class=\"tm-article-poll__answer-label\">\u041f\u0440\u043e\u0431\u043e\u0432\u0430\u043b(\u0430) \u0434\u043b\u044f pet-\u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/span><span class=\"tm-article-poll__answer-votes\">3<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 27.27%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">18.18% <\/span><span class=\"tm-article-poll__answer-label\">\u041d\u0435\u0442, \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u043e\u043f\u044b\u0442<\/span><span class=\"tm-article-poll__answer-votes\">2<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 18.18%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">9.09% <\/span><span class=\"tm-article-poll__answer-label\">\u0422\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u044b\u0448\u0430\u043b(\u0430) \u043e \u043d\u0438\u0445<\/span><span class=\"tm-article-poll__answer-votes\">1<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 9.09%\"><\/div>\n<\/div>\n<\/div>\n<p><!--]--><\/div>\n<div class=\"tm-article-poll__stats\"> \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 11 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.   \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u043b\u0441\u044f 1 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c. <\/div>\n<p><!--]--><\/div>\n<p><!--]--><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/917286\/\"> https:\/\/habr.com\/ru\/articles\/917286\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u044b <a href=\"https:\/\/habr.com\/ru\/users\/dmvasiliev\/\" rel=\"noopener noreferrer nofollow\">\u0414\u0438\u043c\u0430<\/a> \u0438 <a href=\"https:\/\/habr.com\/ru\/users\/ikonik\/\" rel=\"noopener noreferrer nofollow\">\u0418\u043b\u044c\u044f<\/a>, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 \u0422\u041c\u0410-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"https:\/\/doubletapp.ai\/miniapp\/?utm_source=habr&amp;utm_medium=article&amp;utm_campaign=tma1\" rel=\"noopener noreferrer nofollow\">Doubletapp<\/a> \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u043c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c Telegram Mini App \u043d\u0430 \u0441\u0442\u0435\u043a\u0435 React + Python.  <\/p>\n<p>Telegram Mini Apps \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0435 \u043f\u0440\u044f\u043c\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430. \u041e\u043d\u0438 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0438\u0433\u0440, \u043c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441\u043e\u0432, \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u043c\u043d\u043e\u0433\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u0435 \u043c\u044b \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Mini App:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#1\" rel=\"noopener noreferrer nofollow\">\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#2\" rel=\"noopener noreferrer nofollow\">\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u043d\u0430 React \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 Telegram SDK<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#3\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430 Python (Django)<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/917286\/#4\" rel=\"noopener noreferrer nofollow\">\u0441\u0432\u044f\u0436\u0435\u043c \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/a>.<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><\/figure>\n<h4>\u0414\u043b\u044f \u043a\u043e\u0433\u043e \u044d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434?<\/h4>\n<p>\u042d\u0442\u043e\u0442 \u0433\u0430\u0439\u0434 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u043e\u043f\u044b\u0442\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u044f\u0442 \u0441\u043e\u0437\u0434\u0430\u0442\u044c production-ready Mini App \u043d\u0430 \u0441\u0442\u0435\u043a\u0435 React + Python. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438, \u043a\u0430\u043a \u0440\u0430\u0437\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e\u043c \u0441\u0442\u0435\u043a\u0435, \u0430 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u043c\u0441\u044f \u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438<\/h4>\n<p>\u041d\u0430\u0448\u0430 \u0446\u0435\u043b\u044c \u2014 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0442\u0435\u043e\u0440\u0438\u044e, \u0430 \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0432\u0430\u0441 \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0434\u043e \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0447\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u042d\u0442\u043e\u0442 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432\u0430\u043c \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439 \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0441\u043a\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<h3>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 \u0438 \u0442\u0435\u0440\u043c\u0438\u043d\u044b<\/h3>\n<p>\u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Telegram Mini Apps, \u043a\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f Mini Apps \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0431\u043e\u0442\u043e\u0432 Telegram. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 Mini Apps \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Telegram Mini Apps?<\/h4>\n<p>Telegram Mini Apps (TMA) \u2014 \u044d\u0442\u043e \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Telegram \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043c\u0438 \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e\u043d\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 Telegram, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u0431\u0435\u0441\u0448\u043e\u0432\u043d\u0443\u044e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e, \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u0438 \u0433\u043b\u0443\u0431\u043e\u043a\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e \u0441 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u043e\u043c. TMA \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445: Android, iOS, Windows, Mac \u0438 Linux.<\/p>\n<p>Mini Apps \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a HTML, CSS \u0438 JavaScript, \u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 Telegram \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/core.telegram.org\/bots\/webapps#initializing-mini-apps\" rel=\"noopener noreferrer nofollow\">Web Apps API<\/a>. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u0433\u0438\u0431\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c, \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043c\u0435\u043d\u0438 \u0438 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438) \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0431\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 \u0447\u0435\u0440\u0435\u0437 \u0431\u043e\u0442\u043e\u0432.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Mini Apps \u2014 \u044d\u0442\u043e \u043c\u043e\u0449\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 Telegram, \u0443\u043f\u0440\u043e\u0449\u0430\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u043c\u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0430\u043c\u0438.<\/p>\n<h4>\u0427\u0435\u043c Mini Apps \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u0431\u043e\u0442\u043e\u0432?<\/h4>\n<p>\u0425\u043e\u0442\u044f Mini Apps \u0438 \u0431\u043e\u0442\u044b Telegram \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430, \u0443 \u043d\u0438\u0445 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0438 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<h3>1. \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043e\u043f\u044b\u0442<\/h3>\n<p>\u0411\u043e\u0442\u044b Telegram \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445. \u0418\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430. Mini Apps \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0434\u043e\u0431\u043d\u044b\u0435 \u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Telegram.<\/p>\n<h3>2. \u0422\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>\u0411\u043e\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0447\u0435\u0440\u0435\u0437 Telegram Bot API, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438, \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c\u0438 \u0438 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438. Mini Apps, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 Web Apps API, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044e\u0442 \u0441 Telegram \u0447\u0435\u0440\u0435\u0437 JavaScript.<\/p>\n<h3>3. \u0421\u0446\u0435\u043d\u0430\u0440\u0438\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<p>\u0411\u043e\u0442\u044b \u0447\u0430\u0449\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0430\u0447, \u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0441\u044b\u043b\u043e\u043a, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0447\u0430\u0442-\u0431\u043e\u0442\u0430\u043c\u0438.<\/p>\n<p>Mini Apps \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u043c\u0430\u0433\u0430\u0437\u0438\u043d\u044b \u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438, \u0444\u0438\u043d\u0430\u043d\u0441\u043e\u0432\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u043b\u0430\u0442\u0435\u0436\u043d\u044b\u0435 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0438\u0433\u0440\u044b \u0438 \u0440\u0430\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, CRM-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430.<\/p>\n<p>\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, Mini Apps \u0434\u043e\u043f\u043e\u043b\u043d\u044f\u044e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0431\u043e\u0442\u043e\u0432, \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0438 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044f \u0431\u043e\u043b\u0435\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438 \u0433\u0438\u0431\u043a\u0438\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0432 Telegram.<\/p>\n<h3>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435<\/h3>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e Telegram Mini App, \u0432\u0430\u0436\u043d\u043e \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0435\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0438 \u0437\u0430\u043b\u043e\u0436\u0438\u0442\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u043e\u0441\u043d\u043e\u0432\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u043f\u043e\u0448\u0430\u0433\u043e\u0432\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0443 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435:<\/p>\n<ul>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u043d\u043e\u0439 \u0438 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b;<\/p>\n<\/li>\n<li>\n<p>\u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0432\u0438\u0434\u0435 <strong>\u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043e\u043c \u0438 \u0431\u044d\u043a\u0435\u043d\u0434\u043e\u043c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c Telegram-\u0431\u043e\u0442\u0430, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f Mini App;<\/p>\n<\/li>\n<li>\n<p>\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Vite + React;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c Docker, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d-\u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0435;<\/p>\n<\/li>\n<li>\n<p>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <strong>\u043f\u0440\u043e\u043a\u0441\u0438-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/strong>, \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u043e\u0431\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c Mini App;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c Nginx.<\/p>\n<\/li>\n<li>\n<p>\u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 Init Data<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 Telegram Web Apps SDK (<a href=\"https:\/\/docs.telegram-mini-apps.com\/packages\/telegram-apps-sdk-react\/2-x\" rel=\"noopener noreferrer nofollow\">@telegram-apps\/sdk-react<\/a>)<\/p>\n<\/li>\n<\/ul>\n<p><a class=\"anchor\" name=\"1\" id=\"1\"><\/a><\/p>\n<h4>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u0432\u0430\u0436\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0440\u0435\u0434\u0443, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 <strong>\u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442\u0441\u044f \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0438 \u0431\u044d\u043a\u0435\u043d\u0434<\/strong>. \u042d\u0442\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u043e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430, \u043d\u043e \u0438 \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 Telegram. \u0414\u043b\u044f \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <strong>Docker<\/strong> \u2014 \u043e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0443\u0441\u043a \u043a\u0430\u043a \u043d\u0430 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043c\u0430\u0448\u0438\u043d\u0435, \u0442\u0430\u043a \u0438 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0435\u0448\u043d\u0435, \u0438\u0437\u0431\u0430\u0432\u0438\u0432 \u0432\u0430\u0441 \u043e\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0440\u0443\u0447\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.\u00a0<\/p>\n<p>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c Mini Apps \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e <strong>Init Data<\/strong> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d\u0430 Telegram-\u0431\u043e\u0442\u0430. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u044c <strong>Init Data<\/strong>, \u0441\u0432\u0435\u0440\u044f\u044f\u0441\u044c \u0441 \u0442\u043e\u043a\u0435\u043d\u043e\u043c \u0431\u043e\u0442\u0430, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f Mini App. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 <strong>\u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e Telegram-\u0431\u043e\u0442\u0430<\/strong> \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u043e\u043a\u0435\u043d \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0434\u0430\u0436\u0435 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 <strong>\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439 backend<\/strong>, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0443\u044e \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u043e\u0435\u0432\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <a href=\"https:\/\/monorepo.tools\/\" rel=\"noopener noreferrer nofollow\"><strong>\u043f\u043e\u0434\u0445\u043e\u0434 \u043c\u043e\u043d\u043e\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u044f<\/strong><\/a>: \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0438 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438, \u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u044b \u043f\u043e \u043f\u0430\u043f\u043a\u0430\u043c (<code>\/frontend, \/backend<\/code>). \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443,<\/p>\n<\/li>\n<li>\n<p>\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 CI\/CD,<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0439 API,<\/p>\n<\/li>\n<li>\n<p>\u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u043e\u043a,<\/p>\n<\/li>\n<li>\n<p>\u0435\u0434\u0438\u043d\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439.<\/p>\n<\/li>\n<\/ul>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0443\u0434\u043e\u0431\u0435\u043d \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 Mini App, \u0433\u0434\u0435 \u043a\u043b\u0438\u0435\u043d\u0442 \u0438 \u0441\u0435\u0440\u0432\u0435\u0440 \u0442\u0435\u0441\u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439.<\/p>\n<p><a class=\"anchor\" name=\"3\" id=\"3\"><\/a><\/p>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u043e\u0442\u0430<\/h3>\n<p>Telegram Mini App \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 Telegram-\u0431\u043e\u0442\u0430. \u042d\u0442\u043e \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430, \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0441\u0441\u0435\u043d\u0434\u0436\u0435\u0440\u0430. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0431\u043e\u0442\u0430 \u2014 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b Mini App.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0449\u0451 \u043d\u0435\u0442 \u0431\u043e\u0442\u0430, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/t.me\/BotFather\" rel=\"noopener noreferrer nofollow\">@BotFather<\/a>. \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u2014 \u043e\u043d \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0438 \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u0430\u043d \u0432 <a href=\"https:\/\/core.telegram.org\/bots#3-how-do-i-create-a-bot\" rel=\"noopener noreferrer nofollow\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Telegram<\/a>.<\/p>\n<p><strong>\u0427\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c:<\/strong><\/p>\n<ol>\n<li>\n<p><strong>\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u0442\u043e\u043a\u0435\u043d \u0431\u043e\u0442\u0430.<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u0434\u0430\u0439\u0442\u0435 URL Mini App&#8217;\u0430.<\/strong><br \/>\u0412 \u0434\u0438\u0430\u043b\u043e\u0433\u0435 \u0441 @BotFather \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u043c\u0435\u043d\u044e: <strong>Bot Settings \u2192 Configure Mini App \u2192 Edit Mini App URL<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u043a\u043d\u043e\u043f\u043a\u0443 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 Mini App<\/strong><br \/>\u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0443\u044e Mini App. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/t.me\/BotFather\" rel=\"noopener noreferrer nofollow\">@BotFather<\/a>: <strong>Bot Settings \u2192 Edit Menu Button<\/strong><\/p>\n<\/li>\n<\/ol>\n<h3>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435<\/h3>\n<p>\u0412 Mini App \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u043b\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438 \u043b\u044e\u0431\u043e\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0441 \u0431\u043e\u0442\u043e\u043c, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0447\u0435\u0440\u0435\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>\/start<\/code>. Telegram \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (<code>from<\/code>) \u043f\u043e\u0447\u0442\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u0442\u0438\u043f\u0430\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0439, \u0438 \u044d\u0442\u043e \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435. \u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c middleware, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442:<\/p>\n<ul>\n<li>\n<p>\u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 Telegram-\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u043b\u044e\u0431\u043e\u0433\u043e update;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0411\u0414, \u0435\u0441\u043b\u0438 \u043e\u043d \u0435\u0449\u0451 \u043d\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d;<\/p>\n<\/li>\n<li>\n<p>\u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0435\u0433\u043e \u0432 context, \u0447\u0442\u043e\u0431\u044b \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u0435.<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"python\">import typing  import structlog from dependency_injector.wiring import Provide from dependency_injector.wiring import inject from telegram import Update from telegram.ext import CallbackContext  from project.containers import Container  if typing.TYPE_CHECKING:     from users.services import UserService  logger = structlog.get_logger(__name__)   @inject def update_or_create_user(     update: Update,     context: CallbackContext,     user_service: 'UserService' = Provide[Container.user_service], ) -&gt; None:     if update.message is None:         return      tg_user = update.message.from_user     if not tg_user:         logger.debug('No Telegram user found in the update message')         return      user, created = user_service.update_or_create(tg_user)      structlog.contextvars.bind_contextvars(         user_id=user.id,         messenger_user_id=update.message.from_user.id,     )      if created:         logger.info('New user created')      context.user_data['user'] = user<\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0431\u043e\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0448\u0430\u0433\u0443 \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 Telegram.<\/p>\n<p><a class=\"anchor\" name=\"2\" id=\"2\"><\/a><\/p>\n<h3>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f <\/h3>\n<p>\u0420\u0430\u043d\u0435\u0435 <a href=\"https:\/\/habr.com\/ru\/companies\/doubletapp\/articles\/870236\/\" rel=\"noopener noreferrer nofollow\">\u043c\u044b \u043f\u0438\u0441\u0430\u043b\u0438<\/a>, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0435\u043c React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0434\u043b\u044f TMA.  \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 Telegram \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043b\u0438\u0447\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"typescript\">import { retrieveLaunchParams } from '@telegram-apps\/sdk-react' import ReactDOM from 'react-dom\/client' import App from '.\/App.tsx' import 'config\/i18n\/i18n.ts' import { init } from '.\/utils\/init.ts'  const root = ReactDOM.createRoot(document.getElementById('root')!)  try {   init(retrieveLaunchParams().startParam === 'debug' || import.meta.env.DEV)   root.render(&lt;App \/&gt;) } catch (e) {   console.error(e) }<\/code><\/pre>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043c\u0438\u043d\u0438-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.  <\/p>\n<pre><code class=\"typescript\">import {   backButton,   viewport,   themeParams,   miniApp,   initData,   $debug,   init as initSDK } from '@telegram-apps\/sdk-react'  export function init(debug: boolean): void {   $debug.set(debug)    initSDK()    if (!backButton.isSupported() || !miniApp.isSupported()) {     throw new Error('ERR_NOT_SUPPORTED')   }    backButton.mount()   miniApp.mount()   themeParams.mount()   initData.restore()   void viewport     .mount()     .catch(e =&gt; {       console.error('Something went wrong mounting the viewport', e)     })     .then(() =&gt; {       viewport.bindCssVars()     })    miniApp.bindCssVars()   themeParams.bindCssVars() }<\/code><\/pre>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u0430\u043a\u0435\u0442 <a href=\"https:\/\/docs.telegram-mini-apps.com\/packages\/telegram-apps-sdk-react\/2-x\" rel=\"noopener noreferrer nofollow\">@telegram-apps\/sdk-react<\/a> 2 \u0432\u0435\u0440\u0441\u0438\u0438. SDK \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-462959","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/462959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=462959"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/462959\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=462959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=462959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=462959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}