موقع الطلاب
ما يقدّمه موقع الطلاب للزوار وللمتعلمين بعد تسجيل الدخول، وكيف يعمل شراء الدورة وإتمامها، وأين تغيّر ذلك.
لحزمة الحزمة الكاملة
الصفحات العامة
توجد كل صفحة تحت بادئة لغة، /en أو /ar، وتُعرض الصفحات العربية من اليمين إلى اليسار. يؤدي فتح / إلى توجيه الزائر إلى /en.
| الصفحة | العنوان | ما تعرضه |
|---|---|---|
| الرئيسية | /en | القسم الرئيسي، والدورات المميزة، وطريقة العمل، والمدرّسون، وآراء المتعلمين، ودعوة إلى اتخاذ إجراء. |
| الدورات | /en/courses | الكتالوج، مع التصفية حسب الفئة وحسب النوع (مباشرة أو مسجّلة)، والتنقل بين الصفحات. |
| الدورة | /en/courses/<slug> | نظرة عامة، والمنهج، وفيديو المعاينة، وبطاقة السعر، والمدرّس، وتقييمات الطلاب المنشورة للدورة مع متوسط التقييم، والأسئلة الشائعة، والدورات ذات الصلة. يبدأ الشراء من هنا. |
| المدرّسون | /en/instructors | دليل المدرّسين، مع التصفية حسب التخصص. |
| المدرّس | /en/instructors/<username> | ملف مدرّس واحد ودوراته. |
| المدونة | /en/blog و/en/blog/<slug> | المقالات حسب الفئة، وكل مقالة على حدة. |
| التحقق من شهادة | /en/verify-certificate | يمكن لأي شخص التحقق من رقم شهادة هنا، دون حساب. |
| من نحن، والخصوصية، والشروط | /en/about, /en/privacy, /en/terms | صفحات ثابتة. |
| نتائج الدفع | /en/checkout/success, /en/checkout/cancelled | حيث يصل المشتري بعد الدفع على صفحة Stripe أو PayPal، وبعد التسجيل في دورة مجانية. |
| صفحات تسجيل الدخول والحساب | /en/auth/... | login وregister وforgot-password وreset-password وverify-email وwelcome وauth-code-error. |
يعرض أي عنوان آخر صفحة 404 الخاصة بالموقع. ومن دون واجهة API، تأتي بيانات الكتالوج والمدرّسين والمدونة من البيانات النموذجية المرفقة: راجع البيانات النموذجية في الواجهات الأمامية.
لوحة الطالب
يحصل الطالب بعد تسجيل الدخول على لوحة تحت /en/dashboard. وإذا لم يكن مسجّلًا الدخول، يُوجَّه من أي عنوان في اللوحة إلى تسجيل الدخول ثم يعود إلى الصفحة التي طلبها.
| الصفحة | العنوان | وظيفته |
|---|---|---|
| نظرة عامة | /dashboard | التقدّم، ونشاط التعلّم، والدروس الأخيرة، والدورة التي يتابعها. |
| دوراتي | /dashboard/courses, /dashboard/courses/live, /dashboard/courses/recorded | كل دورة مسجّل فيها الطالب، مع التقدّم وزر لاستئناف التعلّم. |
| مشغّل الدورة | /dashboard/courses/<courseId> | الدروس والملاحظات والموارد، كما هو موضح أدناه. |
| الاختبارات | /dashboard/courses/<courseId>/quizzes | اختبارات الدورة ومحاولاتها ونتائجها. لا يظهر الرابط إلا عندما تحتوي الدورة على اختبارات. |
| التقويم | /dashboard/calendar | الحصص المباشرة والواجبات والمواعيد النهائية خلال الأسبوع. يسلّم الطالب الواجب من هنا. |
| الحصة المباشرة | /dashboard/calendar/live/<sessionId> | غرفة الفيديو الخاصة بالحصة، وتُفتح قبل بدء الحصة بقليل. |
| المحفوظات | /dashboard/wishlist | دورات محفوظة لوقت لاحق، جاهزة للنقل إلى السلة. |
| الشهادات | /dashboard/certificates | الشهادات المكتسبة، للطباعة أو المشاركة، والدورات التي أوشك الطالب على إتمامها. |
| الرسائل | /dashboard/messages | المحادثات مع مدرّسي الدورات التي يدرسها الطالب. |
| الإعدادات | /dashboard/settings | بيانات الملف الشخصي وكلمة المرور. |
- تُفتح الإشعارات من الجرس في ترويسة اللوحة: شهادة جديدة، على سبيل المثال.
- يعثر البحث في ترويسة اللوحة على دورات الطالب نفسه، والكتالوج، والمدرّسين، والفئات، ومقالات المدونة. ويحتاج إلى حرفين على الأقل.
- لا يمكن للطالب مراسلة مدرّس إلا بشأن دورة مسجّل فيها.
مشغّل الدورة وتقدّم الدروس
- يُفتح المشغّل على آخر درس شاهده الطالب. وعند القدوم من تسجيل جديد، يبدأ من الدرس الأول.
- يُعدّ الدرس مكتملًا عندما ينتهي الفيديو الخاص به أو عندما يضغط الطالب تحديد كمكتمل. يُحفظ التقدّم في واجهة API، فيبقى بعد إعادة تحميل الصفحة وعلى جهاز آخر.
- لكل درس نظرة عامة، والمدرّس، وموارد قابلة للتنزيل، وتبويب الملاحظات خاص. تُحفظ الملاحظات تلقائيًا أثناء كتابة الطالب.
- يتذكر مشغّل الفيديو مستوى الصوت والترجمة وسرعة التشغيل في المتصفح، ويدعم اختصارات لوحة المفاتيح.
- بعد إتمام كل الدروس، تعرض ترويسة الصفحة شهادة الدورة. ويظهر هناك زر الاختبارات عندما تحتوي الدورة على اختبارات.
- قيّم هذه الدورة في رأس الصفحة يفتح تقييم الطالب: درجة من نجمة إلى 5 نجوم وتعليق اختياري حتى 2,000 حرف. بعد الإرسال يصبح الزر تقييمك، ومنه يستطيع الطالب تعديله أو حذفه.
تقييمات الدورات
يقيّم الطلاب الدورات التي يدرسونها، وتعرض صفحة الدورة هذه التقييمات لكل زائر.
- لا يقيّم الدورة إلا طالب مسجّل فيها، مرة واحدة لكل دورة. والتسجيل الملغى لا يسمح بذلك.
- يظهر التقييم في صفحة الدورة مع اسم الطالب وصورته، الأحدث أولًا، مع زر عرض المزيد من التقييمات لتحميل البقية. يُعاد حساب متوسط تقييم الدورة وعدد تقييماتها، ومتوسط مدرّسها وعدده، بعد كل تقييم وكل إجراء إشراف.
- عند تفعيل الإعداد
reviews_require_approval، ينتظر التقييم بحالة بانتظار الموافقة حتى ينشره مشرف من شاشة التقييمات في لوحة الإدارة، ولا يراه في الأثناء سوى كاتبه. وعند إيقافه، وهي حالته الافتراضية، يظهر فورًا. - يستطيع المشرف إخفاء تقييم؛ وتعديل التقييم المخفي يعيده إلى انتظار الموافقة. أما التقييم الذي حذفه مشرف فلا يمكن تعديله ولا استبداله.
- يُشعَر الطاقم الذي يستطيع رؤية التقييمات بكل تقييم جديد.
التسجيل والدفع
يُسجَّل الطالب في دورة بدفع ثمنها. يفتح زر الشراء في صفحة الدورة لوحة الدفع، وتتيح السلة دفع ثمن عدة دورات في عملية دفع واحدة، مع طلب مستقل لكل دورة. يحتاج الدفع إلى حساب طالب: يُوجَّه الزائر غير المسجّل الدخول الذي يضغط زر الدفع إلى تسجيل الدخول.
يختار الطالب البطاقة أو PayPal
تسأل اللوحة واجهة API عن طرق الدفع التي يقبلها هذا البناء (
GET /api/shop/payment-methods)، فلا تعرض أبدًا طريقة لا يستطيع الخادم التعامل معها.تستلم واجهة API الدفعة
مع المحاكي المدمج، يُملأ نموذج البطاقة أو PayPal داخل الموقع ويُسوّى فورًا. أما مع ضبط Stripe أو PayPal، فيُوجَّه الطالب إلى صفحة معالج الدفع نفسه ويبقى الطلب معلّقًا.
يعود الطالب
يعيده معالج الدفع إلى
/<locale>/checkout/success?order=<reference>، أو إلى/checkout/cancelled. تؤكد صفحة النجاح الدفع وتنتظر حتى يُسوّى الطلب.يُمنح المقعد
لا يُنشأ التسجيل إلا بعد تأكيد الدفع: فورًا مع المحاكي، وعبر الـ webhook الخاص بمعالج الدفع في غير ذلك. ثم تُرسل رسالة بريد إلكتروني بالإيصال.
النتيجة المتوقعة: تظهر الدورة ضمن «دوراتي».
- الدورات المجانية (السعر 0) تعرض مجانًا ولا يلزم أي دفع على بطاقة السعر في صفحة الدورة، ويصبح زرها سجّل مجانًا. تفتح اللوحة نفسها، دون طريقة دفع ولا حقول بطاقة، ويصبح زرها سجّل مجانًا أيضًا. تُكمل واجهة API الطلب دون معالج دفع، فتعمل الدورة المجانية حتى دون أي مفاتيح دفع. ينتقل الطالب مباشرة إلى صفحة النجاح، وتصبح الدورة له فورًا، وتؤكد الرسالة التسجيل دون إيصال.
- يُرفض شراء دورة يملكها الطالب بالفعل، فلا يدفع أحد مرتين.
- يُرسل النقر المزدوج أو إعادة المحاولة مفتاح منع التكرار (idempotency key) نفسه، فتجيب واجهة API بالطلب الأول بدلًا من الخصم مرة أخرى.
- تُحفظ السلة وقائمة المحفوظات في المتصفح، لا في واجهة API.
إتمام الدورة
تُعدّ الدورة مكتملة عندما يتحقق الشرطان معًا:
- اكتمال كل الدروس، وهو ما يرفع تقدّم الطالب إلى 100%.
- اجتياز كل الاختبارات المطلوبة. لا تُحتسب إلا الاختبارات المنشورة والمعلَّمة بأنها مطلوبة. والدورة التي لا تحتوي على اختبارات مطلوبة تكتمل باكتمال دروسها.
تتحقق واجهة API من ذلك في كل مرة يُكمل فيها الطالب درسًا أو يجتاز اختبارًا. وعند اكتمال الدورة، تعلّم التسجيل بأنه مكتمل وتُصدر الشهادة بنفسها، ويُبلَّغ الطالب. كما يعرض مشغّل الدورة الشهادة بعد اكتمال الدروس، وهذا يغطي الدورة التي اكتملت قبل أن يتسنى إصدار الشهادة. وإذا بقي اختبار مطلوب لم يُجتز بعد، يُبلَّغ الطالب بأن الشهادة ليست جاهزة بعد.
تُعرض الشهادات ضمن «الشهادات» في اللوحة، حيث يطبع الطالب إحداها أو يشارك رابطها. ويمكن لأي شخص تُعرض عليه شهادة التحقق من رقمها في /verify-certificate.
محركات البحث والمشاركة
- عنوان الموقع: اضبط
NEXT_PUBLIC_SITE_URLقبل البناء. تستخدمه الروابط الأساسية (canonical) وبطاقات المشاركة وخريطة الموقع والبيانات المنظّمة كلها. وإذا لم يُضبط، يعود إلىhttp://localhost:3030، فيتضح العنوان الخاطئ من أول مشاركة. - خريطة الموقع: تسرد
/sitemap.xmlصفحات الرئيسية والدورات والمدرّسين والمدونة ومن نحن والخصوصية والشروط، إضافة إلى كل دورة منشورة، وكل ملف مدرّس، وكل مقال منشور، بكل لغة ومع ترجماتها. تُبنى عند كل طلب من قراءات واجهة API نفسها التي تستخدمها الصفحات، فتظهر فيها الدورة المنشورة من لوحة الإدارة فورًا. ومن دون واجهة API، تأتي الدورات والمدرّسون من البيانات النموذجية ولا يُدرج أي مقال. - robots.txt: يسمح
/robots.txtبكل شيء باستثناء/api/ولوحة الطالب وصفحات تسجيل الدخول، ويشير إلى خريطة الموقع. - العناوين وبطاقات المشاركة: تضبط صفحات الرئيسية والدورات والدورة والمدرّسين والمدرّس والمدونة والمقال ومن نحن والخصوصية والشروط كلٌّ منها عنوانها ووصفها وعنوانًا أساسيًا (canonical) وروابط
hreflangإلى لغاتها الأخرى، عبرbuildPageMetadataفيsrc/lib/seo/. وتضيف صفحات الدورة والمدرّس والمقال صورتها الخاصة. أما اسم الموقع ووصفه ومعرّف تويتر (SITE.twitterHandle) وألوان المتصفح (SITE.browserChrome) فتأتي منsrc/config/site.ts، وصورتا المشاركة الافتراضيتان هماsrc/app/opengraph-image.pngوtwitter-image.png. - البيانات المنظّمة: يكتب التخطيط الجذري بيانات المؤسسة بصيغة JSON-LD في كل صفحة.
أين تغيّر الأشياء
كل شيء موجود في frontend/src/. شغّل الموقع بالأمر yarn dev وافتح المنفذ 3030؛ تُعاد تحميل الصفحة مع كل تغيير.
frontendyarn dev| ما تريد تغييره | أين تجده |
|---|---|
| صفحة أو عنوانها | src/app/[locale]/، مجلد لكل مسار |
| ما تعرضه الصفحة | src/features/<feature>/: home وcourses وinstructors وblog وcheckout وcertificates وauth، وdashboard/<page> للوحة الطالب |
| الشريط الجانبي للوحة | src/layouts/dashboard/sidebar/config/navigationData.ts |
| الترويسة والتذييل العامّان | src/layout/NavBar/ وsrc/layout/Footer/ |
| الاسم والوصف والألوان وحسابات التواصل الاجتماعي | src/config/site.ts |
| اللغات | src/config/locales.ts، إضافة إلى messages/<namespace>/<locale>.json لكل لغة |
| النصوص | messages/<namespace>/en.json وar.json |
| ألوان السمة | src/styles/theme-variables.css |
| الاستدعاءات إلى واجهة API | src/lib/api/<domain>/ |
يتحقق yarn typecheck وyarn lint من تغييراتك؛ ويُنشئ yarn build بناء الإنتاج.
كيف تُصدر الشهادات ويُتحقَّق منها
مُضمَّن مع مشترياتك. سجّل الدخول لقراءته، أو افتحه في ملف التنزيل.
كيف تقرر واجهة API أن الدورة اكتملت، وكيف ترقّم كل شهادة وتحفظها، وكيف تجيب عن طلب التحقق.
الحصص المباشرة داخل الموقع
مُضمَّن مع مشترياتك. سجّل الدخول لقراءته، أو افتحه في ملف التنزيل.
كيف يدخل الطالب حصة مباشرة: نافذة فتح الغرفة، وطلب الانضمام، وتضمين Jitsi Meet.
كيف تترابط شيفرة الموقع
مُضمَّن مع مشترياتك. سجّل الدخول لقراءته، أو افتحه في ملف التنزيل.
كيف تصل البيانات إلى الصفحة، وكيف يعمل تسجيل الدخول والقوائم المحفوظة في المتصفح، وخطوات إضافة صفحة خاصة بك.