Skip to content

Latest commit

 

History

History
101 lines (70 loc) · 8.35 KB

README.ar.md

File metadata and controls

101 lines (70 loc) · 8.35 KB

🚀 بوت أسئلة وأجوبة

مرحبًا بك في منصتنا لمجتمع الأسئلة والأجوبة! 🌐 استعد للانغماس في عالم تفاعلي من الأسئلة والأجوبة، بفضل ثنائينا الديناميكي: بوت تليجرام وتطبيق تليجرام ميني آب. نحن هنا لسبب واحد، ليس فقط للإجابة على الأسئلة؛ بل نحن هنا لنقلب مفهوم مشاركة المجتمع رأسًا على عقب. لماذا هذا التصنيف بالضبط، ستسأل؟ حسنًا، ليس فقط نحن؛ بل مسابقة تليجرام ميني آب كانت تصرخ تقريبًا: "انغمس في إدارة المجتمع!" إذًا، ها نحن، نقدم لأصحاب القنوات والمستخدمين العابرين الفرصة لطرح والرد على الأسئلة مع الحفاظ على سرية هويتهم.

✨ ميزات بلا حدود

  • الخصوصية أولاً: لنلعب لعبة الاختباء. يمكن للطرفين إخفاء هويتهم، ولكن هيا، الطرف الذي يجيب يمكنه أيضًا اختيار الكشف عن هويته.
  • سحر صندوق الوارد: استلم الأسئلة، وأجب عليها - بساطة كالسلام!
  • مغامرات صندوق الصادر: أرسل الأسئلة، احصل على الإجابات وتذوق فرح التواصل.
  • الملفات الشخصية في الأضواء: اطّلع على ملفات المستخدمين الآخرين وافتح عقلك للفضول.
  • الإدارة كالرئيس: احذف أو عدّل الأسئلة التي تلقيتها - إنه عالمك؛ نحن مجرد ضيوف فيه.
  • مملكة الإشعارات: احصل على تنبيه عندما تستلم سؤالًا أو عندما يتم الرد على سؤالك.
  • أناقة التخصيص: نحن دائمًا في الموضة. يستخدم التطبيق نفس السمة المرئية كتليجرام، مما يوفر تجربة سلسة.
  • المواجهة بين البوت وتطبيق ميني آب: لماذا تقييد نفسك؟ استخدم البوت أو تطبيق ميني آب - أنت الحكم.
  • كرنفال المجتمع: اسأل، أجب، كرر. شارك في رقصة الأسئلة والأجوبة، والتي تسهل إدارة المجتمع، خاصةً لمسؤولي القنوات الذين يمكنهم الآن التفاعل بسهولة مع مجتمعهم مع الحفاظ على سرية هويتهم.

🧩 لغز كبير

هذا العرض ليس مجرد تطبيق ميني آب - إنها سيمفونية من التطبيقات! تخيل هذا: تطبيق تليجرام ميني آب، عجائب الويب في VueJS وNuxt، مع تطبيق FastAPI القوي في الخلفية بلغة البايثون. ولا ننسى بوت تليجرام، كتب أيضًا بلغة البايثون ويتناسب في الخلفية. لماذا؟ لنتعمق في ذلك أكثر:

  • عزل التطبيق الصغير: نريد أن يشارك الجميع في الحفلة، حتى الذين لديهم أقل خبرة في عالم التطوير. لذا عزلنا التطبيق الص

تطبيق تليجرام الصغير

يتألف من مجموعة إجمالية من 3 صفحات:

  • index.vue: الصفحة الرئيسية التي تعرض الأسئلة المطروحة للمستخدم. يمكن للمستخدمين الرد على هذه الأسئلة.
  • outbox.vue: تعرض الأسئلة التي تم إرسالها بواسطة المستخدم.
  • users/[id].vue: صفحة تعرض ملف تعريف لمستخدم آخر. يمكن للمستخدمين أيضًا طرح أسئلة على هذه الصفحة.

يقدم هذا التطبيق الصغير خادمًا داخليًا باستخدام Nitro. بدلاً من استخدام FastAPI ، يمكن إجراء استعلامات إلى قاعدة البيانات باستخدام هذا الخادم ، ولكنه يتطلب SSR. حالياً ، يتم استخدام الإصدار الذي تم بناؤه بشكل ثابت من Mini App.

المصادقة والتفويض

عندما يبدء المستخدمون في تشغيل Mini App على تليجرام ، يتم مشاركة معلوماتهم الشخصية مع Mini App إذا قبلوا الشروط. يتم تأكيد البيانات التي قدمتها تليجرام باستخدام مفتاح السر الخاص بالروبوت وهاش لسلامة البيانات المقدمة ، مما يتحقق من أنها مقدمة فعليًا من قبل تليجرام. تحقق من الملف backend/api/utils/web_app_data_validator.py لمزيد من المعلومات.

من هذه النقطة ، يتم إنشاء JWT على FastAPI. كل مستخدم وسؤال لديهم قيمة "رابط" ، ويتم استخدام هذه البيانات التي تم إنشاؤها بشكل عشوائي بدلاً من معرف. يتضمن تحميل JWT قيمة رابط المستخدم.

الاعتمادات الرئيسية لتطبيق Mini App

  • vue-tg: مكتبة رائعة وبسيطة للغاية للعناصر المستخدمة في Mini App. تحقق منها هنا لمعرفة المزيد حول كيفية استخدامها. كنت سأكتب مكتبتي الخاصة ، لكنني وجدت هذه وكانت مثالية لاحتياجاتي وليس علينا إعادة اختراع العجلة. بدلاً من ذلك ، يمكننا التركيز على مشروع عينة سيساعد المطورين في البداية مع تطبيق Mini App على تليجرام.

استخدام مثالي

لعرض زر رئيسي وزر العودة ، دعنا نلقي نظرة على الشيفرة التالية من frontend/components/QAForm.vue. فورمة Vue الصفحة ، ستظهر الأزرار تلقائيًا. تُستخدم خاصية progress لعرض مؤشر التحميل على الزر الرئيسي. تُستخدم خاصية disabled لتعطيل الزر الرئيسي. تُستخدم خاصية text لتعيين نص الزر الرئيسي. يتم استخدام حدث @click لإرسال حدث إلى المكون الأصلي. يتم استخدام حدث @click لزر العودة لاستدعاء طريقة onCancel لإغلاق نافذة النموذج.

<MainButton 
  :progress="progressing"
  :disabled="disabled"
  :text="mainButtonText"
  @click="$emit('submitQAForm', text)" />

<BackButton @click="onCancel" />

ألوان السمة ومتغيرات العرض

كما نستخدم المكونات التي قدمها تليجرام ، يمكننا أيضًا استخدام ألوان السمة التي قدمها تليجرام. على الرغم من توفر ألوان السمة في البيانات الأولية ، ستكون متاحة أيضًا كمتغيرات CSS ويمكنك العثور على قائمة منها أدناه:

html {
  --tg-theme-button-text-color: #ffffff;
  --tg-theme-link-color: #f83b4c;
  --tg-theme-button-color: #f83b4c;
  --tg-color-scheme: dark;
  --tg-theme-bg-color: #3e2222;
  --tg-theme-secondary-bg-color: #271616;
  --tg-theme-text-color: #ffffff;
  --tg-theme-hint-color: #b1c3d5;
  --tg-viewport-height: 100vh;
  --tg-viewport-stable-height: 100vh;
}

يمكنك استخدامه في CSS الخاص بك كما يلي:

body {
  background-color: var(--tg-theme-bg-color);
}

نظرًا لأننا نستخدم TailwindCSS في هذا المشروع ، يمكننا استخدام ألوان السمة كأنماط مضمنة مثل هذا:

<div class="bg-[var(--tg-theme-secondary-bg-color)]"></div>

يرجى ملاحظة أننا لسنا مقيدين بأنماط مضمنة. تحقق من توثيق TailwindCSS لمزيد من التفاصيل.

البدء

  1. استنسخ وعدل ملفات env .env.example و .db.env.example بتغيير الاسم إلى .env و .db.env على التوالي.

  2. عدل nuxt.config.ts وغير runtimeConfig.public.botUsername إلى اسم مستخدم روبوتك.

لتشغيل:

docker-compose -f docker-compose.prod.yml up --build -d