كيف أبني تطبيقات Telegram Mini Apps

2026-09-10

Telegram Mini App هو تطبيق ويب يُفتح داخل Telegram بينما المستخدم مسجل الدخول وموجود في المحادثة المناسبة. هذه هي الفكرة كلها: لا حساب جديد ولا تنزيل ولا إعادة تعيين لكلمة المرور. أبنيه كما أبني أي منتج ويب للإنتاج: Next.js وTypeScript في الواجهة الأمامية وNode.js في الخلفية، مع بضع قواعد خاصة بـTelegram. آخر تطبيق سلّمته ضمن اتفاقية عدم إفصاح كان Web App وMini App ماليًا يتضمن بطاقات افتراضية ومادية باستخدام Next.js وExpress وMongoDB.

تبدأ العملية بالبوت. ينشئ BotFather البوت والتطبيق المصغر. يستطيع المستخدم فتحه من زر القائمة أو زر لوحة مفاتيح inline أو رابط مباشر من t.me يتضمن معامل startapp، وبذلك أمرر رمز إحالة أو رابطًا عميقًا إلى شاشة بعينها. يُقدّم التطبيق عبر HTTPS من مضيف عادي؛ وفي التطوير يوجّه نفق Telegram إلى localhost كي أختبره على هاتف حقيقي لا على متصفح الكمبيوتر فقط.

المصادقة هي الجزء الذي لا أختصر فيه أبدًا. يمرر Telegram إلى التطبيق initData التي تحتوي معرّف المستخدم واسمه وauth_date وhash. والاسم initDataUnsafe دقيق: تصلح لعرض اسم، لكنها لا تصلح للثقة بها. يتحقق الخادم الخلفي من initData الخام بتوقيع HMAC مشتق من رمز البوت، ويتأكد من حداثة auth_date، ثم يصدر جلسته الخاصة. لا يغادر رمز البوت الخادم مطلقًا. في منتج مالي، هذا الفحص الواحد هو الفرق بين «تسجيل الدخول عبر Telegram» و«أي شخص يستخدم أدوات المطور يستطيع انتحال أي هوية».

بعد ذلك، ينبغي أن يبدو التطبيق المصغر أصيلًا لا موقعًا ملصقًا داخل webview. أقرأ themeParams ومتغيرات CSS في Telegram ليتبع الوضع الفاتح أو الداكن للتطبيق، وأستخدم MainButton وBackButton بدل رسم بدائل خاصة، وأضيف استجابة لمسية للإجراءات المهمة، وأحترم viewport وهوامش safe area كيلا يختبئ شيء تحت الرأس أو مؤشر الشاشة الرئيسية. تصميم الهاتف أولًا ليس شعارًا هنا؛ فمعظم الجلسات تتم بإبهام واحد على الهاتف.

يعمل البوت والتطبيق المصغر معًا. يرسل البوت الإشعارات والتأكيدات والإيصالات، ويتولى التطبيق الشاشات التي تحتاج إلى نموذج أو قائمة أو إتمام شراء. تصل webhooks إلى خلفية Node.js، التي تظل المصدر الوحيد للحقيقة بشأن المدفوعات والحالة؛ يطلب العميل ولا يقرر. تُدفع قيمة السلع الرقمية داخل Telegram بعملة Stars، أما السلع المادية والخدمات فيمكن دفعها عبر مزودي الدفع. أحسم ذلك مبكرًا مع العميل لأنه يرسم مسار العمل كله.

أرفض الوثوق بـinitDataUnsafe، أو ضغط موقع سطح مكتب داخل webview، أو حصر الدفع في الواجهة الأمامية، أو إنشاء Mini App بلا مدخل ويب حين تحتاج الشركة أيضًا إلى SEO أو لوحة داخلية. إذا أردت إطلاق منتج داخل Telegram، فأرسل الإجراء الواحد الذي ينبغي للمستخدم إنجازه في المحادثة. سأرد بمسار البوت وشاشات التطبيق المصغر وما يجب أن يبقى على الخادم.

امنح المنتج القادم شخصاً يبقى معه.

هل أنت مستعد للبدء؟ أرسل لي رسالة؛ أنا متاح للبدء الآن والبقاء. عقود طويلة الأمد، لا تسليم خلال أسبوعين. لنتحدث عن مشروعك ومتطلباته وأفضل طريقة للمضي قدماً.

اسأل عن الخبرة أو الخدمات