تطبيق الويب التعليمي: 13 خطوة

2025 مؤلف: John Day | [email protected]. آخر تعديل: 2025-01-23 12:53

تم إنشاء هذا المشروع كمهمة لدورة الفيديو والتلفزيون الرقمي حيث كان علينا حل مشكلة التدريس والتعلم في ثلاثة مستويات: المنهجية والوظيفية والمفاهيمية.

تم إنشاء هذا المشروع كمهمة لدورة الفيديو والتلفزيون الرقمي ، حيث كان علينا حل مشكلة التدريس والتعلم في هذه المستويات الثلاثة: المنهجية والوظيفية والمفاهيمية ، قررنا حل هذه المشكلة باستخدام منصة ويب ، حيث يمكن للطلاب والمعلمين في الدورة تسجيل الدخول. يمكن للطلاب أيضًا الوصول إلى مقاطع الفيديو التعليمية التي تغطي موضوعات مثل برامج الترميز وتنسيقات الفيديو ، بعد أن يتعلموا الجزء المفاهيمي من الموضوع يمكنهم المتابعة لإجراء تقييم. يتكون التقييم من ثلاثة أنشطة ؛ سيحتوي كل نشاط على نوع من مقاطع الفيديو التي تدرس موضوعات تتعلق ببرامج الترميز وتنسيقات الفيديو وفي نفس الوقت يكون لكل نشاط غرض مختلف ، لذلك باستخدام هذه المنصة يمكننا تحقيق التدريس وتقييم الجزء المنهجي والوظيفي والمفاهيمي. لتحقيق كل هذا ، استخدمنا Angular 4 و Firebase ، باستخدام مكتبات مثل AngularFire5 و Dragula. بالنسبة لمقاطع الفيديو ، استخدمنا تطبيق الويب "PowToon".

لهذا الدليل سوف تحتاج:

• NodeJs
• الزاوي 4
• مشروع Firebase
• كمبيوتر

الخطوة 1: التثبيت

• قم بتثبيت nodejs 8.9.1 باستخدام NPM (مدير حزمة العقدة)
• قم بتثبيت Angular-CLI (واجهة سطر الأوامر) بكتابة في وحدة التحكم "npm install -g @ angular / cli"

الخطوة الثانية: إنشاء المشروع

• إنشاء مشروع باستخدام "ng new my-app"
• تثبيت حزم العقد مع "تثبيت npm"
• تثبيت دراجولا مع "npm install dragula --save"
• قم بتثبيت AngularFire2 باستخدام "npm install firebase angularfire2 --save"

الخطوة 3: Firebase

لهذا يمكنك التحقق من صور هذه الخطوة

• قم بإنشاء حساب جوجل
• انقر فوق "الانتقال إلى وحدة التحكم"
• إنشاء مشروع
• انتقل إلى عام واحصل على مفاتيح العميل

الخطوة 4: تكوين المكونات

لهذا يمكنك التحقق من صور هذه الخطوة

قم بإنشاء مكونات التطبيق.

استخدام "ng g c" اسم المكون "" لكل من المكونات التالية:

• صفحة الدورة
• صفحة المواضيع
• صفحة الفيديو
• صفحة التقييم
• الصفحة المنهجية
• الصفحة المفاهيمية
• الصفحة الوظيفية
• مكون التعليقات
• مشرف

الخطوة 5: صفحة الدورة التدريبية

لهذا يمكنك التحقق من صور هذه الخطوة

قم بإنشاء html و ts

ستكتب في ts المنطق وراء التوثيق الذاتي ، إذا كان المستخدم طالبًا أو مسؤولًا ، وستكتب جدولًا بمعلومات الدورة التدريبية من الطالب. لذلك يمكنك استخدام خدمة مصادقة وخدمة قاعدة بيانات يتم توفيرهما في نهاية هذا الدليل.

الخطوة السادسة: صفحة المواضيع

لهذا يمكنك التحقق من صور هذه الخطوة

في هذا المكون سوف تكتب html و ts.

على غرار صفحة الدورة التدريبية باستثناء أنك لست مضطرًا للتحقق مما إذا كان المستخدم مسؤولًا أم طالبًا ، فسيتعين عليك فقط كتابة المصادقة وتقديم قوائم الموضوعات في الدورة التدريبية.

الخطوة 7: صفحة الفيديو

لهذا يمكنك التحقق من صور هذه الخطوة

في هذا المكون سوف تكتب html و ts.

بالنسبة لهذا المكون ، ستوفر رابطًا من powToon لتشغيل الفيديو ومكون التعليق

الخطوة 8: صفحة التقييم

لهذا يمكنك التحقق من صور هذه الخطوة

في هذا الحدث ، ستستخدم نفس مكون الفيديو مع مقطع فيديو مختلف ستشرح فيه عملية التقييم.

ثم يكون لديك فقط زر يرتبط بالصفحة المفاهيمية

الخطوة 9: الصفحة المفاهيمية

لهذا يمكنك التحقق من صور هذه الخطوة

في هذه الصفحة سوف تقوم بإنشاء كل من html و ts.

• قم بإنشاء مكونين للفيديو بواسطة زر
• إنشاء مصفوفة من مقطعي فيديو باستخدام قيمة منطقية "isCorrect"
• اكتب دالة CheckScore ()
• تحميل النتيجة إلى قاعدة البيانات
• النقل إلى الصفحة التالية

الخطوة 10: الصفحة المنهجية

لهذا يمكنك التحقق من صور هذه الخطوة

في هذه الصفحة سوف تقوم بإنشاء كل من html و ts.

• سوف تستفيد من دراجولا ، لذلك اقرأ مستندات دراجولا
• إنشاء مجموعة من مقاطع الفيديو
• أنشئ ترتيب مقاطع الفيديو
• اكتب تحقق من النتيجة
• تحميل النتيجة
• انتقل إلى الصفحة التالية

الخطوة 11: الصفحة الوظيفية

لهذا يمكنك التحقق من صور هذه الخطوة

في هذه الصفحة سوف تقوم بإنشاء كل من html و ts.

• مثل الصفحة المفاهيمية ، سيكون لديك أزرار ومقاطع فيديو كخيارات.
• في لغة تأشير النص الفائق اكتب مشكلة ليحلها المستخدم
• ثم ضع مقاطع الفيديو في مصفوفة باستخدام قيمة منطقية "IsCorrect"
• تحميل النتيجة إلى قاعدة البيانات

الخطوة 12: صفحة تسجيل الدخول

لهذا يمكنك التحقق من صور هذه الخطوة

• قم بإنشاء html و ts
• ضع في html الصورة
• اكتب النموذج في html
• إرسال النموذج في ts إلى خدمة المصادقة
• احفظ المستخدم في قاعدة البيانات

الخطوة 13: تنزيل التعليمات البرمجية الكاملة للمكونات والخدمات

في حال واجهتك مشاكل ، هنا هو rar مع المكونات والخدمات