مطور الواجهة الأمامية - الدورة 47600 فرك. من مدرسة لوفت التدريب 3 أشهر التاريخ 28 نوفمبر 2023.

Vue.js تطوير الويب المتقدم

الأسبوع 1 - سير العمل

- نلتقي بالمرشد والمجموعة.
- باستخدام تجميع حزمة الويب، نقوم بإنشاء التخطيط المحدد للمشروع النهائي.
- نقوم بنشر النتيجة على Github وإرسالها إلى المرشد للتحقق منها.

افتتاح الدورة
1. كيف يسير التدريب (01:09:37)

فيو. دلائل الميزات
1. النظرية (04:49)
2. مرحبا بالعالم (06:20)
3. التعامل مع الأحداث (02:38)
4. التعامل مع الأحداث المتعددة (01:19)
5. القيم الديناميكية (01:30)
6. مقدمة إلى التوجيهات (05:40)
7. التوجيهات المختصرة (00:37)
8. طرق مع المعلمات (01:36)
9. معدّلات الأحداث (08:52)
10. الخصائص المحسوبة (10:50)

11. المراقبون (06:02)
12. العمل مع الفصول الدراسية (03:37)
13. العمل مع خصائص CSS (02:49)
14. الوصول إلى عناصر DOM (03:50)
15. العرض الشرطي (04:46)
16. قوائم العرض (05:12)
17. إنشاء مكون (04:16)
18. المكونات المحلية (02:44)
19. تفاعل البيانات (04:35)
20. خصائص المكونات (03:52)
21. فتحات (04:37)
22. فتحات ذات نطاق (04:52)
23. الأحداث المخصصة (04:27)
24. النقل الآني (02:53)

فيو. مكونات الملف الواحد
1. تثبيت المشروع. VUE-CLI (09:22)
2. مكون ملف واحد (03:18)
3. العمل مع الأنماط (07:02)
4. تمرير السمات والمعالجات (02:53)
5. ملفات فردية (01:26)
6. التحقق من صحة خصائص المكون (07:35)
7. التحقق من صحة أحداث المستخدم (02:01)
8. اتصال البيانات ثنائي الاتجاه (04:11)
9. نموذج v مخصص (05:51)
10. خطافات دورة الحياة (07:08)
11. الشوائب (04:40)

الآلية الوقائية الوطنية
1. ما هو npm؟ (05:50)
2. تثبيت وتحديث npm (02:33)
3. مساعدة في npm (01:28)
4. البحث عن الحزم وتثبيتها (04:24)
5. تبعيات الحزمة (02:09)
6. ملف البيان package.json (03:02)
7. إزالة الحزم وتحديثها (03:02)
8. التبعيات وتبعيات التطوير (01:51)
9. Webpack وnpx (04:04)
10. البرامج النصية npm (04:02)
11. npm وgit وgithub (02:40)

غزل
1. الغزل (07:07)

حزمة الويب. الأساسيات
1. النظرية (01:09)
2. الحد الأدنى من التكوين والتشغيل (04:41)
3. تسمية الملف (02:34)
4. اللوادر (04:28)
5. خادم التطوير (02:43)
6. المكونات الإضافية (02:34)
7. البحث عن الوحدات (03:18)
8. سورماسبس (03:17)
9. ديف وآخرون (02:42)
10. أنواع الوحدات (03:00)
11. الحد الأدنى من التجميع (05:30)

ESLint. نظرة عامة على التكوين
1. المقدمة (01:26)
2. التثبيت والإطلاق (03:10)
3. إصلاحات الأخطاء (02:04)
4. التكوين (05:21)
5. تنسيق الإخراج (00:52)

Figma لمصمم التخطيط
1. فيجما. الواجهة (04:37)
2. فيجما. تنظيم المشروع (01:32)

فليكس بوكس
1. مقدمة (00:45)
2. الحاوية المرنة (01:43)
3. محاذاة المحور الرئيسي (01:37)
4. محاذاة المحور المتقاطع (01:50)
5. محاذاة عنصر واحد (01:09)
6. العنصر المرن - الحاوية (00:53)
7. اتجاه المحاور (03:18)
8. حاوية متعددة الأسطر (02:54)
9. محاذاة المحتوى متعدد الأسطر (01:25)
10. النسب (02:46)
11. نسب الضغط (01:24)
12. الحجم الأساسي (04:02)
13. ترتيب العناصر (02:40)

شخص سخيف
1. مقدمة (07:03)
2. البدء باستخدام Git (03:01)
3. إنشاء مستودع جديد (01:09)
4. إضافة ملفات إلى فهرس Git (منطقة المراقبة) (06:49)
5. إنشاء التزام (07:17)
6. ارتكاب الملاحة. إلغاء التغييرات (12:10)
7. دورة Git النموذجية (03:34)
8. التفرع في جيت (11:27)
9. تعارض عند دمج الفروع (06:06)
10. حفظ البيانات مؤقتًا (بدون التزام) (05:25)
11. العمل مع المستودعات البعيدة (20:04)
12. استخدام صفحات GitHub لاستضافة المشاريع (04:31)

فيو. ورشة عمل رقم 1
1. بداية المشروع (05:24)
2. مكون الرأس (04:13)
3. مكون الرمز (05:06)
4. عرض قائمة المكونات (02:56)
5. تبديل المكون (03:19)

الأسبوع 2 - Vue.js

- نجعل التخطيط قابلاً للتكيف.
- سنقوم بتنفيذ كتلة "المهارات" في Vue.js.
- سنقوم بتنفيذ كتلة "مشاريعي" في Vue.js.
- نقوم بتنفيذ كتلة "Slider for review" باستخدام البرنامج المساعد Vue.js.

القصص القصيرة
1. التثبيت (01:56) 
2. القصة الأولى (04:35)
3. توصيل أحد المكونات (01:24)
4. توسيع التكوين (04:26)
5. الأنماط العامة (02:08)
6. قصة للمكون (05:23)
7. العناية الواجبة (04:16)
8. إنشاء مكون (02:28)
9. تطبيق مكون (02:29)
10. تسجيل الأحداث (03:29)
11. ملحق الخلفيات (01:41)
12. المقابض الإضافية (02:28)
13. مصدر الملحق (02:17)
14. الخاتمة (01:11)

جافا سكريبت - ES6
1. استيفاء السلسلة (07:39)
2. تبسيط أوصاف الطريقة (13:35)
3. الإعدادات الافتراضية (30:08)
4. مهمة التدمير: الكائنات (07:30)
5. الميزات الجديدة والمتصفحات القديمة (13:07)

عدم التزامن في جافا سكريبت
1. الموقتات (23:44)
2. تحميل الصور (22:21)
3. الوعود (36:29)
4. اياكس (32:28)

أكسيوس. مكتبة الاستعلامات
1. مقدمة (02:23)
2. إرسال طلب (02:12)
3. نظرة عامة على التكوين (04:30)
4. نص الطلب (01:43)
5. الإعدادات الافتراضية (01:38)
6. المعترضون (02:11)
7. الخدمات (02:33)
8. انتظار غير متزامن (01:18)

فيو. ورشة عمل رقم 2
1. التحضير (02:39)
2. توصيل أحد المكونات (02:16)
3. خرج التحكم (02:38)
4. مكون التقدم (05:09)
5. طلب إلى الخادم (06:38)
6. إخراج البيانات (05:55)

الأسبوع 3 - جافا سكريبت الأصلي

- نحن الآن بصدد إنشاء لوحة الإدارة.
— ندرس Storybook ونطبقه في مشروعنا.
— نقوم بتنفيذ المعالجة اللازمة (التحقق من صحة) نماذج المشروع.

com.VueRouter. التوجيه في المتصفح
1. المقدمة (04:31)
2. بناء الروابط (02:41)
3. التنقل بين البرامج (02:35)
4. معلمات المسار (04:42)
5. المعلمات كخصائص (00:49)
6. الخيارات المتقدمة و404 (03:29)
7. المسارات المتداخلة (03:23)
8. حصص النشاط (02:37)
9. طرق عرض مختلفة لجهاز التوجيه (01:08)
10. الواردات الديناميكية (02:00)
11. عنوان URL جميل (02:16)

فويكس. مدير الدولة
1. المقدمة (01:13)
2. اتصال (02:30)
3. الإجراء (02:27)
4. الطفرات (02:16)
5. الحروف (02:02)
6. التطبيق العملي (08:07)
7. وظائف المساعد (02:59)
8. الوحدات (05:18)
9. الوحدات الديناميكية (01:38)
جواب السؤال

فيو. ورشة عمل رقم 3
1. التخطيط (04:33)
2. إخراج البيانات (02:42)
3. التحضير للرسوم المتحركة (02:14)
4. عرض الزر (03:45)
5. تحميل المحتوى الإضافي (11:38)
6. إظهار الشريحة بعد النقل (02:17)

الأسبوع 4 - Vue.js، SPA

- نقوم بتنفيذ SPA في لوحة الإدارة.
— ندرس العمل مع البيانات من خلال تخزين التطبيق
- نستخدم أجاكس للتواصل مع واجهة برمجة التطبيقات، وإعداد تفاعلات خادم العميل.

تفويض. الرموز
1. أنواع التفويض (04:20)
2. جيثب OAuth (01:42)
3. إنشاء تطبيق GitHub (02:28)
4. استلام الرمز (08:38)
5. تخزين البيانات في التعليمات البرمجية (01:46)
6. حماية الطريق (04:13)

فيو. ورشة عمل رقم 4
1. التحضير (01:33)
2. إنشاء إجراء (02:30)
3. حالة التنزيل (04:01)
4. الطلب (02:27)
5. إزالة التكرارات (03:29)
6. حماية الطريق (03:23)
7. تسجيل الخروج (00:51)

الأسبوع 5 - الممارسة

- نقوم بعرض البيانات المحفوظة من لوحة الإدارة إلى الصفحة المقصودة.
- نقوم باختبار المكونات.
- العمل الجماعي في مشروع مع مرشد.

Vue.js. واجهة برمجة التطبيقات للتكوين
1. مقدمة (01:29)
2. مثال عام (03:57)
3. وظيفة الأغنية (01:51)
4. وظيفة رد الفعل (00:55)
5. الدالة toRef (01:35)
6. الدالة toRefs (00:58)
7. الخصائص المحسوبة (00:56)
8. وظيفة المراقبة (01:41)
9. وظيفة watchEffect (03:14)
10. وظيفة للقراءة فقط (00:40)
11. وظائف الاختبار (02:30)
12. دالة unref (01:27)
13. خطافات دورة الحياة (00:58)
14. مثال. نظرة عامة على المشروع (00:53)
15. مثال. وظيفة التحميل (01:20)
16. مثال. الفئات (02:20)
17. مثال. التصفية الأولية (02:46)
18. مثال. تبديل الفلتر (02:11)
19. مثال. وظائف التصفية الأخرى (02:03)
20. مثال. طريقة الفرز (03:05)
اختبار كود JS
1. المقدمة (16:05)
2. مزاح (15:47)
3. فوائد الاختبارات (09:01)
4. التغطية (10:02)

Vue.js. اختبار المكونات
1. إعداد الحزم (04:39)
2. مجمع المكونات (04:13)
3. ما يجب اختباره (02:48)
4. الاختبار الأول (05:25)
5. التحقق من حدث الانبعاث (03:44)
6. نقل الخصائص (02:58)
7. العمل مع عناصر النموذج (05:42)
8. الإعدادات العامة (01:15)
9. موكي (05:04)
10. ربط المكتبات (02:32)
11. اختبار العمل (03:26)
12. اختبار المتجر (02:53)
13. الاختبار بالصور (03:08)

اختبارات. موكي
1. إنشاء نموذج بالحجم الطبيعي (02:39)
2. التعامل مع الوسيطات (01:39)
3. القيمة المرجعة (02:57)
4. الوحدات (04:24)
5. الموقتات (02:05)

فيو. ورشة عمل رقم 5
1. مكون بسيط (03:03)
2. مكون مع مخزن (05:21)
3. اختبارات. التحضير (03:20)
4. اختبارات. المبدل (02:38)
5. اختبارات. القضايا (05:08)

الأسبوع السادس - استكمال المشروع

- نحن نقوم بوضع اللمسات النهائية على المشروع.
- نقوم بتقديم المشروع للمراجعة من قبل الموجهين.
- درجات الدبلومات.

كيفية الحصول على وظيفة في مجال تكنولوجيا المعلومات: النصائح والحيل
1. كيف تحصل على وظيفة في مجال تكنولوجيا المعلومات؟ البحث والمقابلة وفترة الاختبار (42:21)
2. كيف تجد طلبات العمل عن بعد والعمل الحر؟ (20:12)
3. الوظيفة الأولى في مجال تكنولوجيا المعلومات - كيف تتصرف؟ التدريب والتوظيف الرسمي والعمل "من أجل الغذاء" (14:11)
4. كيفية اجتياز فترة الاختبار؟ (27:10)
5. كيفية الاستعداد للمقابلة في شركة FAANG (08:52)
6. عملية تحميل صفحة الويب (25:19)
7. مقابلة مبرمج - كل ما تريد معرفته (01:24:07)
8. حل مشكلة من مقابلة مبرمج (19:36)
9. مقابلة مطور الواجهة الأمامية (01:37:17)

React.js تطوير تطبيقات الويب

الأسبوع الأول - مقدمة إلى React.js

- نتعرف على فريق الدورة وزملاء الدراسة.
- تعلم JSX و Virtual DOM في React.
- نحن ندرس النهج المكون وطرق نقل البيانات.

معرفة
1. افتتاح الدورة (05:41)

أنا أتفاعل.js
1. ما هو الرد (07:05)
2. DOM الافتراضي (02:46)
3. جي إس إكس (06:10)
4. التقديم مع الشروط (05:11)
5. العمل مع القوائم (02:45)
6. المكونات (02:41)
7. الدعائم (01:45)
8. الولاية (06:45)
9. الأحداث (02:26)
10. أدوات تطوير التفاعل (03:58)

الثاني رد فعل.js
1. أساليب دورة الحياة (05:19)
2. المكونات - الوظائف (01:29)
3. مكون نقي (02:54)
4. الأحداث الاصطناعية (01:42)
5. العمل مع النماذج (02:51)
6. معالجة الأخطاء (01:39)

تحليل المهام رقم 1
1. ورشة العمل رقم 1 (30:36)

الأسبوع الثاني - اختبار أنماط React.js

- ندرس مكونات وعناصر ومثيلات فئة المكون.
- نحن نعتبر مكتبة إعادة التركيب والمكونات عالية الترتيب وأنماط Render Props.
— نحن نفهم مزايا الاختبارات، دراسة Jest، Enzyme، Snapshots.

ثالثا رد الفعل
1. مقدمة (01:43)
2. أنواع الخصائص (10:18)
3. السياق (05:19)
4. المراجع (05:18)
5. البوابات (05:02)
6. خطافات (10:42)

IV رد الفعل.js
1. المكونات ذات الترتيب العالي (HOCs) - المكونات ذات الترتيب العالي (10:33)
2. إعادة توجيه المرجع (HOCs) (04:31)
3. عرض نمط الدعائم (05:25)
4. إعادة إنشاء مكتبة HOK (10:32)
5. التنميط (04:02)

اختبارات
1. مقدمة (05:06)
2. عداء الاختبار (02:51)
3. اختبار DSL (08:41)
4. الانزيم (06:57)
5. لقطات (03:09)
6. ملاحم الاختبار (05:01)
7. مكتبة اختبار التفاعل (06:32)

تحليل المهام رقم 2
1. ورشة العمل رقم 2 (27:54)

الأسبوع 3 - الإعادة والتوجيه

— ندرس التوجيه: التوجيه البسيط، والتوجيه باستخدام Switch، وكذلك التوجيه المتداخل.
- التعرف على مكتبة Redux: المفاهيم والمفاهيم الأساسية للمتجر، الإجراءات، المخفضات، React-redux.
— تعتبر البرامج الوسيطة وسيلة للعمل مع Sideeffect.

التوجيه في المتصفح
1. واجهة برمجة تطبيقات التاريخ (02:48)
2. توجيه بسيط (05:39)
3. التوجيه من المحول (04:16)
4. التوجيه المتداخل (05:32)
5. طريق خاص (04:39)

أنا مسترجع
1. مقدمة (04:07)
2. المتجر (05:03)
3. الإجراءات (02:17)
4. المخفضات (07:56)
5. رد الفعل-الإعادة (03:26)

II الإعادة
1. مقدمة (03:11)
2. إنشاء إجراءات (إجراءات إعادة) (09:13)
3. الوسيطة (07:54)
4. التعامل مع الإجراءات (05:52)
5. المحددات (06:17)
6. إعادة التحديد (04:49)
7. البط (06:56)

تحليل المهام رقم 3
1. ورشة العمل رقم 3 (39:13)

الأسبوع 4 - ملحمة الإعادة

— نحن ندرس مكتبة Redux-saga. كرر وظائف المولد*. دعونا نتعلم كيفية تشغيلها بالتوازي.
- دعونا نلقي نظرة على طريقة اتخاذ. دعونا ندرس التحديد كطريقة للحصول على البيانات من المتجر.
- نحن نبحث عن طرق لتصميم تطبيق React. نحن ندرس المكتبات ClassNames، StyledComponents، BrowserList، MaterialUI.

أنا إعادة الملحمة
1. مقدمة (00:57)
2. نظرة عامة (02:08)
3. مولدات (04:11)
4. إضافة الملاحم (02:07)
5. الرد على الإجراءات (03:53)
6. إطلاق الميزات (02:06)

II ملحمة الإعادة
1. مقدمة (00:27)
2. تنفيذ التأثيرات بالتوازي (03:41)
3. يسري مفعوله (02:45)
4. تحديد التأثير (02:04)
5. إلغاء التأثيرات (04:05)

العمل مع الأنماط
1. مقدمة (01:34)
2. أنماط CRA (05:21)
3. أسماء الفئات (06:32)
4. مكونات ستايل (07:11)
5. قائمة المتصفحات (01:37)
6. واجهة المستخدم المادية (08:13)

تحليل المهام رقم 4
1. ورشة العمل رقم 4 (09:55)

الأسبوع الخامس - النماذج وCI وDI ومعالجة أخطاء العميل

- نحن نفكر في العمل مع النماذج باستخدام مكتبات Formik وRedux Forms وReact Final Form.
- نحن ندرس طرق ضمان جودة كود الإنتاج. نقوم بتحليل أدوات مثل: Husky، TravisCI، HerokuNow.
— ندرس مجموعة من المكتبات المفيدة للتطوير (Storybook، RamdaJS، Axios).
— نحن نفكر في TypeScript.

العمل مع النماذج
1. مقدمة (05:07)
2. فورميك (08:51)
3. نموذج الإعادة (06:22)
4. رد الفعل النهائي (06:36)

CI & DI ومعالجة أخطاء العميل
1. مقدمة (05:07)
2. أجش (02:32)
3. CI باستخدام TravisCI (03:32)
4. النشر في هيروكو (04:57)
5. شريط التمرير (02:00)

مجموعة من المكتبات المفيدة للتطوير
1. القصص المصورة (05:32)
2. رامدا جي إس (04:47)
3. أكسيوس (05:52)
4. الآلة الكاتبة (09:31)

تحليل المهام رقم 5
1. ورشة العمل رقم 5 (13:17)

الأسبوع السادس - عمل المشروع

- نقوم بإكمال الطلب وإرساله للمراجعة.

كيفية الحصول على وظيفة في مجال تكنولوجيا المعلومات: النصائح والحيل
1. كيف تحصل على وظيفة في مجال تكنولوجيا المعلومات؟ البحث والمقابلة وفترة الاختبار (42:21)
2. كيف تجد طلبات العمل عن بعد والعمل الحر؟ (20:12)
3. الوظيفة الأولى في مجال تكنولوجيا المعلومات - كيف تتصرف؟ التدريب والتوظيف الرسمي والعمل "من أجل الغذاء" (14:11)
4. كيفية اجتياز فترة الاختبار؟ (27:10)
5. كيفية الاستعداد للمقابلة في شركة FAANG (08:52)
6. عملية تحميل صفحة الويب (25:19)
7. مقابلة مبرمج - كل ما تريد معرفته (01:24:07)
8. حل مشكلة من مقابلة مبرمج (19:36)
9. مقابلة مطور الواجهة الأمامية (01:37:17)