دورة MEAN Stack لبناء نسخة Trello في الوقت الفعلي
ابنِ نسخة من Trello بجودة إنتاجية من الصفر باستخدام مكدس MEAN الكامل — MongoDB وExpress وAngular وNode.js. أتقن التعاون الحيوي باستخدام Socket.IO والمصادقة الآمنة باستخدام JWT وإدارة الحالة القابلة للتوسع باستخدام NgRx. انشر تطبيقًا حيًا موضوعًا في حاويات يمكنك عرضه على أي صاحب عمل.
ماذا ستتعلم:
ابنِ لوحة كانبان كاملة الوظائف مع إدارة البطاقات بالسحب والإفلات عبر القوائم.
هيّئ هيكل مشروع مستودع أحادي مع إعدادات TypeScript مشتركة للعميل والخادم.
طبّق المصادقة القائمة على JWT مع التحكم في الوصول القائم على الأدوار لأعضاء اللوحة.
ادمج Socket.IO لبث تحديثات اللوحة الحية عبر عدة مستخدمين متصلين.
أدر حالة التطبيق المعقدة بشكل قابل للتوقع باستخدام متجر NgRx والإجراءات والتأثيرات.
ضع التطبيق الكامل لمكدس MEAN في حاويات وانشره باستخدام Docker وGitHub Actions.
كيف تدرس بشكل عملي دورة MEAN Stack لبناء نسخة Trello في الوقت الفعلي
كيف تتدرب دورة MEAN Stack لبناء نسخة Trello في الوقت الفعلي
لك أنت كشركة وتريد تدريب فريقك
في Dedika للشركات، يأتي الدورة مع تمارين وأمثلة من عملك نفسه وبالطريقة التي تحتاجها شركتك.
محتوى الدورة
8 فصول • 37 دروسالمدة بين 4 و 360 ساعة (أنت تقرر)
الفصل 1إخفاءإخفاء التفاصيلعرض التفاصيلأساسيات مكدس ميان وتهيئة المشروع
أساسيات مكدس ميان وتهيئة المشروع
الدرس 1 • تهيئة هيكل المشروع الأحادي
يهيئ أدلة منفصلة للعميل والخادم داخل مستودع واحد. يضع اصطلاحات المجلدات المستخدمة طوال الدورة بأكملها.
الدرس 2 • فهم معمارية مكدس ميان
يغطي أدوار مونغو دي بي وإكسبريس وأنجولار ونود.جي إس وكيفية ترابطها. يوفر النموذج الذهني اللازم قبل كتابة أي شيفرة.
الدرس 3 • إدارة متغيرات البيئة والتكوين
يقدم مكتبة dotenv للأسرار والإعدادات الخاصة بالبيئة. يمنع دخول بيانات الاعتماد المكتوبة بشكل ثابت إلى نظام التحكم بالمصدر.
الدرس 4 • تثبيت أدوات التطوير وتكوينها
يثبت نود.جي إس وأنجولار CLI ومونغو دي بي وVS Code مع الإضافات الأساسية. يضمن بيئة متسقة عبر جميع الفصول اللاحقة.
الفصل 2إخفاءإخفاء التفاصيلعرض التفاصيلنمذجة بيانات مونغو دي بي للوحة كانبان
نمذجة بيانات مونغو دي بي للوحة كانبان
الدرس 1 • التحقق من صحة المخطط وروابط البرمجيات الوسيطة
يضيف أدوات التحقق من صحة مونجوز وروابط ما قبل/ما بعد الحدث لفرض قواعد العمل على مستوى النموذج. يقلل من البيانات غير الصالحة قبل وصولها إلى قاعدة البيانات.
الدرس 2 • تصميم مخططات اللوحة والقائمة والبطاقة
ينشئ مخططات مونجوز للكيانات الثلاثة الأساسية لتريلو مع حقول محددة الأنواع. يحدد عقود البيانات التي تستهلكها كل نقطة نهاية API.
الدرس 3 • الفهرسة وتحسين الاستعلامات
يطبق فهارس مركبة وأحادية الحقل لدعم عمليات البحث السريعة عن اللوحات والبطاقات. يهيئ قاعدة البيانات لأحمال استعلامات الوقت الفعلي.
الدرس 4 • نمذجة البيانات العلائقية مقابل الوثائقية
يقارن بين تسوية SQL واستراتيجيات التضمين والإسناد في مونغو دي بي. يؤطر قرارات التصميم المتخذة خلال هذا الفصل.
الفصل 3إخفاءإخفاء التفاصيلعرض التفاصيلبناء REST API مع إكسبريس
بناء REST API مع إكسبريس
الدرس 1 • اختبار API باستخدام Postman و Jest
يختبر جميع نقاط النهاية يدويًا في Postman ويؤتمتها باستخدام Jest و Supertest. يتحقق من صحة API قبل دمج الواجهة الأمامية.
الدرس 2 • نقاط نهاية CRUD للوحات والقوائم والبطاقات
يبني نقاط نهاية RESTful تغطي الإنشاء والقراءة والتحديث والحذف للكيانات الثلاثة. يربط المتحكمات بنماذج مونجوز التي تم إنشاؤها في الفصل الثاني.
الدرس 3 • التحقق من صحة الإدخال باستخدام Express-Validator
يتحقق من صحة أجسام الطلبات الواردة ويعقمها قبل وصولها إلى قاعدة البيانات. يمنع البيانات المشوهة ومحاولات الحقن عند حدود API.
الدرس 4 • هيكل تطبيق إكسبريس والتوجيه
ينظم المسارات والمتحكمات والخدمات في معمارية متعددة الطبقات. يحافظ على فصل الاهتمامات لسهولة الصيانة مع نمو API.
الدرس 5 • البرمجيات الوسيطة العالمية ومعالجة الأخطاء
يضيف تسجيل الطلبات وتحليل JSON و CORS ومعالج أخطاء مركزي. يضمن استجابات API متسقة وتنقيح أخطاء أسهل.
الفصل 4إخفاءإخفاء التفاصيلعرض التفاصيلالمصادقة والتفويض باستخدام JWT
المصادقة والتفويض باستخدام JWT
الدرس 1 • نقاط نهاية التسجيل وتسجيل الدخول
يبني مسارات /auth/register و /auth/login التي تُرجع رموز JWT موقعة عند النجاح. يربط إنشاء المستخدم والتحقق من بيانات الاعتماد بدورة حياة الرمز.
الدرس 2 • برمجية JWT الوسيطة وحماية المسار
ينشئ برمجية وسيطة إكسبريس تتحقق من الرموز وتُرفق المستخدم بالطلب. يحمي جميع مسارات اللوحة والقائمة والبطاقة من الوصول غير الموثق.
الدرس 3 • مخطط المستخدم وتجزئة كلمات المرور
ينشئ نموذج مستخدم مونجوز ويجزئ كلمات المرور باستخدام bcrypt قبل التخزين. يؤسس أساس بيانات الاعتماد الآمن لجميع تدفقات المصادقة.
الدرس 4 • التحكم في الوصول القائم على الأدوار للوحات
يضيف أدوار المالك والعضو إلى اللوحات ويفرض الصلاحيات في المتحكمات. يمنع المستخدمين غير المصرح لهم من تعديل اللوحات التي لا يملكونها.
الفصل 5إخفاءإخفاء التفاصيلعرض التفاصيلمعمارية الواجهة الأمامية لأنجولار والتوجيه
معمارية الواجهة الأمامية لأنجولار والتوجيه
الدرس 1 • إدارة الحالة باستخدام NgRx
يقدم مخزن NgRx والإجراءات والمختزلات والتأثيرات لإدارة حالة اللوحة والبطاقة. يوفر حاوية حالة قابلة للتنبؤ للتحديثات في الوقت الفعلي.
الدرس 2 • تصميم وحدة أنجولار والوحدات المميزة
ينظم التطبيق إلى وحدات أساسية ومشتركة ومميزة وفقًا لأفضل ممارسات أنجولار. يقلل حجم الحزمة ويحسن قابلية اكتشاف الشيفرة.
الدرس 3 • عميل HTTP والمعترضات
يعد تسجيل HttpClientModule ومعترضًا يرفق رؤوس JWT بكل طلب. يركز حقن رمز المصادقة عبر جميع استدعاءات API.
الدرس 4 • حراس المصادقة وحماية المسار
يطبق حراس CanActivate يعيدون توجيه المستخدمين غير الموثقين إلى صفحة تسجيل الدخول. يعكس طبقة التفويض في الواجهة الخلفية على جانب العميل.
الدرس 5 • تكوين التوجيه المحمل بشكل كسول
يهيئ موجه أنجولار بمسارات محملة بشكل كسول للوحات والمصادقة ولوحة البيانات. يحسن أداء التحميل الأولي بتقسيم الحزمة.
الفصل 6إخفاءإخفاء التفاصيلعرض التفاصيلبناء مكونات واجهة مستخدم لوحة كانبان
بناء مكونات واجهة مستخدم لوحة كانبان
الدرس 1 • النماذج التفاعلية والتحقق من الصحة
ينفذ نماذج أنجولار التفاعلية لجميع نماذج الإنشاء والتحرير مع التحقق من الصحة من جانب العميل. يعكس قواعد التحقق من الصحة من جانب الخادم لتجربة مستخدم متسقة.
الدرس 2 • السحب والإفلات باستخدام Angular CDK
يدمج Angular CDK DragDrop لتمكين إعادة ترتيب البطاقات داخل القوائم وعبرها. يرسل إجراءات إعادة الترتيب إلى NgRx ويتم المزامنة مع الواجهة الخلفية.
الدرس 3 • مكونات لوحة البيانات الرئيسية والتنقل
يبني لوحة البيانات الرئيسية التي تسرد جميع لوحات المستخدم وشريط تنقل علوي. يربط المكونات بمحددات NgRx واستدعاءات API للوحة.
الدرس 4 • عرض اللوحة مع القوائم والبطاقات
يعرض لوحة واحدة بقوائمها وبطاقاتها في تخطيط أفقي قابل للتمرير. يجلب ويطبيع بيانات اللوحة من مخزن NgRx.
الدرس 5 • نافذة تفاصيل البطاقة والتحرير
ينشئ نافذة حوار مشروطة لعرض وتحرير تفاصيل البطاقة بما في ذلك الوصف والملصقات. يحفظ التغييرات عبر استدعاءات PATCH API وتأثيرات NgRx.
الفصل 7إخفاءإخفاء التفاصيلعرض التفاصيلميزات الوقت الفعلي باستخدام Socket.IO
ميزات الوقت الفعلي باستخدام Socket.IO
الدرس 1 • تحديث مخزن NgRx من أحداث Socket
يرسل إجراءات NgRx من اشتراكات أحداث المقبس لتحديث حالة اللوحة في الوقت الفعلي. يدمج تدفقات بيانات REST و WebSocket في مصدر حالة واحد.
الدرس 2 • انبعاث الأحداث من نقاط نهاية API
يطلق انبعاثات المقبس من متحكمات إكسبريس بعد عمليات كتابة قاعدة البيانات الناجحة. يحافظ على تزامن طبقات REST و WebSocket عند كل تعديل.
الدرس 3 • إعداد خادم Socket.IO ومساحات الأسماء
يرفق Socket.IO بخادم HTTP لإكسبريس الحالي ويعرف مساحات أسماء محددة باللوحة. يعزل أحداث الوقت الفعلي لكل لوحة لبث فعال.
الدرس 4 • مؤشرات التواجد والمؤشرات الحية
يظهر المستخدمين الذين يشاهدون اللوحة حاليًا باستخدام أحداث التواجد ومؤشرات الصورة الرمزية. يضيف وعيًا تعاونيًا دون حظر تدفق البيانات الرئيسي.
الدرس 5 • خدمة مقبس أنجولار وتكامل RxJS
ينشئ خدمة أنجولار تلف اتصال Socket.IO-client وتعرض تدفقات الأحداث كـ Observables. يتيح الاشتراك التفاعلي في أحداث اللوحة في الوقت الفعلي.
الفصل 8إخفاءإخفاء التفاصيلعرض التفاصيلالنشر والأداء والجاهزية للإنتاج
النشر والأداء والجاهزية للإنتاج
الدرس 1 • التسجيل والمراقبة وتتبع الأخطاء
يدمج التسجيل المنظم ومراقبة وقت التشغيل ومتتبع أخطاء الواجهة الأمامية في الإنتاج. يوفر رؤية للأعطال قبل أن يبلغ عنها المستخدمون.
الدرس 2 • حوسبة تطبيق مكدس ميان كحاويات باستخدام Docker
يكتب ملفات Dockerfile لبناء أنجولار وخادم إكسبريس ويؤلفها مع مونغو دي بي. ينتج صور حاويات قابلة لإعادة الإنتاج لأي هدف نشر.
الدرس 3 • خط أنابيب CI/CD مع GitHub Actions
يؤتمت التحليل والاختبار والبناء ودفع صور Docker عند كل طلب سحب. يقلل خطوات النشر اليدوية ويكتشف الانحدارات مبكرًا.
الدرس 4 • النشر السحابي وتكوين البيئة
ينشر الحاويات على منصة سحابية ويكوّن متغيرات بيئة الإنتاج. يجعل التطبيق متاحًا للعموم مع اتصال قاعدة بيانات مُدارة.
الدرس 5 • تحسين بناء أنجولار
يطبق علامات بناء الإنتاج والتحميل الكسول وتحليل الحزمة لتقليل حجم الحمولة. يحسن وقت التفاعل للمستخدمين النهائيين على جميع الأجهزة.
شهادة إتمام معتمدة
هذا الدورة مخصصة لك:
مطور جافا سكريبت مبتدئ: مستعد لتجاوز تمارين الدروس التعليمية الصغيرة.
مطور واجهات أمامية: يريد أن يتقن أيضًا طبقات الواجهة الخلفية وقواعد البيانات.
محوّل مسار مهني: لديه مهارات أساسية في البرمجة ويحتاج إلى عمل رئيسي في ملف الأعمال.
طالب علوم حاسوب: يتطلع إلى تطبيق النظرية الدراسية على منتج حقيقي.
مطور ويب مستقل: يحتاج إلى تقديم حل متكامل وحديث للعملاء.
مطور واجهات خلفية: يريد خبرة عملية في بناء واجهات أنجولار تفاعلية.
ماذا يقول طلابنا
دروسكم مثالية. اشتريت باقة السنة الواحدة وأخيرًا أصبحت لدي الفرصة لمتابعة مواضيع متنوعة تهمني دون الحاجة لتغيير المنصة... أشكركم على كل ما تقدمونه، وقد أوصيت بكم بالفعل لأشخاص آخرين...
أعجبني كيف أن الدروس مباشرة إلى النقطة وكيف يمكنني التنقل بين الفصول وتخطي المحتوى الذي لا أحتاجه.
أحببت المحتوى وأسلوب العرض ونسخ الفيديو، مما يسرّع العملية!
المنصة سريعة وسهلة الاستخدام. تنوع المحتوى والفيديوهات التكميلية يساعدان حقًا في التعلم.
أهم الدورات
الأسئلة الشائعة
من هي Dedika؟
هل الشهادة صالحة في المملكة العربية السعودية؟
هل الدورات مجانية؟
ما هو عبء الدورة؟
كيف هي الدورات؟
كيف تعمل الدورات؟
ما هي مدة الدورات؟
ما هو سعر أو تكلفة الدورات؟
ما هو التعليم عن بعد أو الدورة عبر الإنترنت وكيف تعمل؟
دورة PDF