برمجة المواقع والتطبيقات باستخدام أنجولار

احترف إنشاء تطبيق وموقع ومشاركة البيانات

تطوير الويب4.5(68)14 ساعة و39 دقيقة62 درسا8 أقسام

ماذا ستتعلم؟

  • فهم أساسيات Angular وتثبيت الأدوات
  • إنشاء مشروع أنجولار وتنظيم ملفاته
  • استخدام TypeScript وأنواع البيانات
  • إنشاء الـ Component والتنقل بينها
  • تنفيذ مشروعي MyBlog وCalculator
  • التعامل مع الـ Data Models
  • استخدام Angular Material
  • بناء مشروع SportsStore وعربة الشراء
  • ربط المشروع بالباك إند والمصادقة
  • بناء لوحة الـ Admin

عن الدورة

يشرح هذا الكورس تطوير المواقع والتطبيقات باستخدام Angular (أنجولار) وTypeScript من البداية. تبدأ بمقدمة الدورة ومتطلباتها وما هو Angular، ثم تثبيت الأدوات والإضافات وإنشاء أول مشروع وفهم تنظيم الملفات. بعد ذلك تتعرف على TypeScript وأنواع البيانات وحل مشاكل الـ Compiler، ثم الـ Component وإنشاء Header وFooter وContact وArticle، وتنفذ مشروع MyBlog ومشروع Calculator. ثم تتعامل مع الـ Data Models ومكتبة Angular Material مثل Toolbar وTable وForm. وفي المراحل الأخيرة تبني مشروع SportsStore كاملا، بما فيه عرض المنتجات والأقسام وعربة الشراء والـ Routing والـ Checkout، وربطه بالباك إند عبر Json-Server، مع المصادقة ولوحة الـ Admin. ينفع الكورس كل من يريد احتراف إنشاء موقع وتطبيق ومشاركة البيانات بينهما، ويفضل أن تعرف أساسيات الويب قبل البدء. وبعده ستكون قادرا على بناء تطبيق ويب متكامل بأنجولار. الشرح متدرج ومع مشاريع عملية، وكل مرحلة تبني على ما قبلها حتى يكتمل المشروع.

نتائج متوقعة من الدورة

  • إنشاء تطبيقات ويب متقدمة باستخدام أنجولار.
  • فهم عميق للمكونات وطرق الربط بينها.
  • إتقان تايب سكريبت واستخدامها داخل مشاريع أنجولار.
  • تطوير تطبيقات عملية قابلة للتوسع.

تقييمات المتدربين

التقييمات هنا من المتدربين الذين اشتروا الدورة وأكملوا 50٪ من المحتوى على الأقل — لا توجد تقييمات من شخص لم يطلع على المحتوى.
4.5
★★★★★
68 تقييم
5★
36
4★
29
3★
3
2★
0
1★
0
  • ★★★★★Zaid M.·منذ 5 شهرشاهد 100٪

    الدورة ممتازة جداد و مفيدة

تم عرض كل التقييمات (1)

محتوى الدورة

1

مقدمة عن Angular

7 درس
  1. مقدمة الدورةيعرّف Angular بأنه Framework متخصص في بناء واجهات المستخدم ويمكن استخدامه أيضا لبناء تطبيقات الموبايل، ويوضح سبب الطلب الكبير عليه.8:03
  2. متطلبات الدورةيوضح متطلبات دورة Angular: أساسيات HTML وCSS وBootstrap، وJavaScript ومفاهيم البرمجة، لأن Angular يعتمد على TypeScript المبنية على JavaScript، مع معرفة Node.js للـ Backend، ويشير إلى دورات React للمقارنة.2:27
  3. ما هو Angular؟يعرّف Angular كـ Framework لبناء واجهات المستخدم ويوضح الفرق بين Framework وLibrary، ثم يحكي تاريخه من AngularJS التي أصدرتها جوجل إلى Angular الحديث والفرق بينهما.11:11
  4. تثبيت الأدواتيشرح تثبيت أدوات Angular: Visual Studio Code كمحرر أكواد، وNode.js الذي يضم مدير الحزم npm، ثم Angular CLI بأمر npm install -g، وأوامر ng مثل إنشاء مشروع وتشغيله serve.8:27
  5. تثبيت الإضافاتيثبت برنامج Git ليستخدم كنظام للتحكم في الإصدارات، ثم يستعرض إضافات في Visual Studio Code تساعد في تطوير تطبيقات Angular، منها إضافة للأوامر وإضافة لتغيير أيقونات الملفات.8:18
  6. إنشاء أول مشروعينشئ أول مشروع ويحفظه في مجلد على الجهاز ثم يفتحه في المحرر، ويحذف الملفات غير الضرورية مبدئيا مع إبقاء ملف index ليبدأ العمل عليه.8:04
  7. شرح تنظيم الملفات داخل المشروعيشرح ملفات ومجلدات مشروع Angular وأدوار كل منها، مثل ملف editorconfig ومجلد src والوحدة الأساسية وملف التشغيل الرئيسي وإعدادات السكريبت.26:13
2

نظرة سريعة على لغة TypeScript

4 درس
  1. مقدمة عن TypeScriptيقدم TypeScript كلغة مبنية على JavaScript تضيف أنواع البيانات الثابتة لمعالجة عيب الأنواع الديناميكية، وتُحوَّل إلى JavaScript ليفهمها المتصفح، وهي اللغة الأساسية لكتابة Angular.5:32
  2. فهم أساسيات وتوضيح ترجمة ملفات TypeScriptيشرح تثبيت TypeScript وإنشاء ملف tsconfig.json، وكيف يُحوَّل ملف ts إلى ملف JavaScript بالمترجم tsc، وكيف يمنع TypeScript الخطأ عند إسناد قيمة بنوع مختلف، ثم تشغيل الناتج بـ Node.12:24
  3. حل مشاكل الـ Compilerيعالج مشكلة تشغيل أوامر tsc في Visual Studio Code بتغيير سياسة تنفيذ PowerShell، ثم يضبط ملف tsconfig لتحويل ts إلى js تلقائيا، ويفعل وضع المراقبة watch عند التعديل.7:36
  4. ترتيب أنواع البياناتيشرح أنواع البيانات في TypeScript مثل string وnumber وboolean، وشجرة الأنواع التي تبدأ بـ unknown، وإضافة null، وكيف يمنح النوع الوصول لخصائصه ودوالـه ويمنع إسناد قيمة بنوع آخر.10:52
3

مشروع MyBlog

8 درس
  1. ما هو الـ Component؟يشرح الـ Component كأساس تطبيق Angular، وأن الـ Root Component يحوي مكونات فرعية مثل Header، وأجزاءه الثلاثة: ملف template بصيغة HTML، وملف التنسيق، وملف TypeScript الذي فيه الـ decorator والـ selector.8:55
  2. إنشاء وتكوين الموديول وبداخله Header Componentيشرح أن Angular تطبيق Single Page Application، ويثبت Bootstrap في المشروع، ثم ينشئ الـ Module الأساسي Core Module وبداخله Header Component، ويسجله في الـ Module ويربطه بالـ Routing.20:10
  3. إنشاء وتكوين Footer Componentينشئ Footer Component داخل Shared Module لإعادة استخدامه في أكثر من مكان، باستخدام ng generate، ثم يكتب قالبه ويستورد الموديول في Core Module ويعرضه في الصفحة.15:14
  4. إنشاء وتكوين Contact Componentينشئ Contact Component وموديوله بأوامر ng generate، ويربطه بالـ Routing للتنقل بين الصفحات، ويبني قالبه ببطاقة card فيها صورة ونص ورابط بريد إلكتروني للتواصل.9:53
  5. الانتقال إلى Contact Componentيربط التنقل بمكون Contact عبر الـ Routing، مع استخدام RouterLink في مكون الهيدر واستيراد RouterModule في الوحدة الأساسية حتى تعرض الصفحة عند الضغط على الرابط.8:30
  6. الانتقال إلى Article Componentينشئ وحدة Articles مع ملف Routing خاص بها، ويضيف رابطا في شريط التنقل باستخدام RouterLink، ويضبط مسارا فارغا ومسارا للصفحات غير الموجودة لتوجيه المستخدم.12:53
  7. إضافة محتوى Article Templateيبني قالب صفحة Articles باستخدام عناصر div وفئات list-group وعناوين، ويعرض عناوين المقالات وأوصافها، ثم يجرب الصفحة عبر المسار الذي ضبط سابقا.6:52
  8. لينك MyBlog
4

التعامل مع الإجزاء الرئيسية Component

5 درس
  1. إنشاء Calculator Componentينشئ مشروع آلة حاسبة Calculator بـ Angular، ويضيف الـ Component وإعدادات Bootstrap وملف index.html، ويسجل المكون في الـ Module، ثم يشغل المشروع لعرض قالب المكون.11:34
  2. التعامل مع Calculator Templateيبني قالب Calculator Component بـ HTML وBootstrap: خانة للإدخال Input وأخرى للنتيجة Result، وأزرار الأرقام والعمليات، ويربط حدث الضغط click بدالة تستقبل الرقم.28:01
  3. إضافة اللوجيك والوظائف إلى Calculator Componentيضيف منطق الآلة الحاسبة في Calculator Component: دوال معالجة الضغط على الأرقام والعمليات الحسابية، وفحص آخر مدخل لمنع تكرار العلامات، وتحديث الحقل الناتج عند كل ضغطة.25:36
  4. إضافة المشروع الثاني إلى Article Templateيضيف مشروع الآلة الحاسبة كمشروع ثان إلى صفحة المقالات Article في تطبيق المدونة، بإنشاء بطاقات تصف المشروع، ويشير إلى ربطه بالصفحة عبر الـ Routing وإمكان إضافة رابط المصدر.9:40
  5. لينك Calculator
5

التعامل مع Data Model _ Angular Material

10 درس
  1. مقدمة (التعامل مع Data Model _ Angular Material)يعرض نظرة عامة على تطبيق قائمة مهام To Do يُبنى بـ Angular وAngular Material، يضيف مهمة جديدة ويحدد اكتمالها، ويعرض عدد المهام غير المكتملة وقائمة المهام المنجزة.5:21
  2. تكوين الـ Data Modelsيبني Data Model لتطبيق To Do بإنشاء كلاس يمثل المهمة الواحدة بحقول الوصف وحالة الإنجاز، وكلاس آخر يمثل قائمة المهام مع دالة للقراءة فقط، مع شرح الخاصية private.19:16
  3. التعامل واستخدام الـ Data Modelsيستخدم الـ Data Models في تطبيق To Do: يضع النماذج في مجلد خاص، ويعرّف كائن مستخدم وعدد المهام، ويضيف مهام للقائمة، ثم يستعمل filter لعرض المهام غير المنجزة وعددها.14:56
  4. تثبيت وتهيئة الـ Angular Materialيثبت Angular Material في المشروع بأمر ng add مع ثيم افتراضي، ويستورد موديولاتها في موديول خاص بها، ثم يعرض بعض مكوناتها مثل الأزرار والبطاقات والـ badge وحقل الفورم.13:44
  5. استخدام الـ Material Toolbarيستخدم Material Toolbar لبناء شريط علوي يعرض اسم المستخدم وأيقونة وشارة Badge، مع استيراد وحدات Angular Material المطلوبة وضبط تنسيق العناصر داخله.8:54
  6. عرض البيانات من خلال الـ Material Tableيعرض قائمة المهام داخل جدول Material Table، فيعرف الأعمدة والصفوف والعناوين ومصدر البيانات الذي يملأ الجدول بالمهام.17:24
  7. التحكم من خلال الـ Material Checkboxيتحكم في المهام باستخدام Material Checkbox مرتبطا بـ ngModel، فيغير حالة المهمة واللون والعداد عند التحديد، ويخفي المهام المكتملة بفلتر.6:43
  8. إضاقة بيانات جديدة من خلال الـ Material Formيضيف بيانات جديدة عبر Material Form، فيتيح للمستخدم إدخال مهمة جديدة في حقل وإضافتها بزر، وتمرر القيمة المدخلة إلى المكون عبر حدث.13:31
  9. التحكم في عرض البيانات Material Slide Toggleيضيف Material Slide Toggle للتبديل بين عرض كل المهام أو المهام غير المكتملة فقط، عبر متغير يتغير بالضغط ويطبق فلترا على القائمة المعروضة.6:53
  10. لينك ToDo
6

المرحلة الأولى من المشروع النهائي SportsStore

10 درس
  1. مقدمة المرحلة الأولىيقدم المرحلة الأولى من مشروع متجر e-commerce اسمه Sports Store بـ Angular، وفيها الشكل الأساسي وعرض المنتجات مقسمة حسب التصنيف Category وصفحات، مع بيانات من Backend Server.5:34
  2. إنشاء وتهيئة المشروع النهائيينشئ المشروع النهائي sportsstore بأمر ng new، ويثبت Font Awesome وjson-server وjsonwebtoken، ويضيف ملفات الأنماط في angular.json، ويجهز المشروع للمراحل التالية.10:31
  3. تهيئة الباك إند للمشروع من خلال الـ Json-Sreverيجهز الـ Backend للمشروع باستخدام json-server: يكتب ملف بيانات يعرّف المنتجات والطلبات، ويضيف ملف middleware للمصادقة بالـ JSON Web Token، ويعالج طلبات GET وPOST لتسجيل الدخول.20:24
  4. تنظيم الملفات للمشروع وتشغيل سيرفر الباك إندينظم ملفات المشروع بإنشاء مجلدات للـ Model والـ Store والأدمن، ويشغل الـ Backend بأمر json-server على منفذ محدد ويجرب طلب المنتجات والتصنيفات، ثم يتأكد من عمل الخادمين معا.9:16
  5. إنشاء وتكوين كل الـ Data Modelsينشئ نماذج البيانات Data Models التي تمثل شكل البيانات، ثم مصدر بيانات ثابتا ومستودعا يعيد المنتجات والتصنيفات بشكل ديناميكي بدل إضافتها يدويا.35:20
  6. إنشاء وتكوين الـ Model Moduleينشئ Model Module لتجميع نماذج البيانات والمستودعات في وحدة واحدة، ويعرف مزوديها Providers داخل NgModule، حتى يمكن استخدامها في أي مكان من التطبيق.5:05
  7. إنشاء وتكوين الـ Store Componentينشئ Store Component وقالبه، ويمرر له معاملات مثل المنتجات والتصنيفات، ثم يكون وحدة Store Module تستورد وحدات Angular والنماذج لعرض المتجر.14:32
  8. عرض كل الـ Productsيعرض جميع المنتجات في المتجر بتكرار عنصر واحد عبر ngFor، فيظهر اسم كل منتج وسعره بعملة محددة بدل تكرار الكود يدويا لكل منتج.9:10
  9. التحكم في عرض المنتجات من خلال الـ Categoriesيتحكم في عرض المنتجات حسب التصنيف، فينشئ أزرارا للتصنيفات تغير التصنيف المحدد، وتعرض القائمة المنتجات المطابقة له فقط عبر دالة تستقبل رقما.24:29
  10. إعادة تهيئة الكود من خلال الـ Custom Directiveينشئ Custom Directive خاصا يعيد استخدام الكود، يعرف سياقه Context ومحدده Selector ويسجله في وحدة المتجر، ثم يستخدمه لتكرار العناصر وبناء أرقام الصفحات.10:59
7

المرحلة الثانية من المشروع النهائي SportsStore

8 درس
  1. مقدمة المرحلة الثانيةيقدم المرحلة الثانية من متجر Sports Store: سلة المشتريات Cart، وإضافة المنتج وتغيير الكمية وحساب الإجمالي، وإزالة العناصر، ثم الانتقال إلى إتمام الطلب Order.3:59
  2. إنشاء وتكوين الـ Cart Modelينشئ Cart Model الذي يصف بيانات سلة الشراء: خطوط الطلب lines، وإضافة منتج وزيادة كميته إن كان موجودا، وحساب عدد العناصر والسعر الإجمالي، ثم يسجله في الـ Module.22:47
  3. إنشاء وتكوين الـ Cart Summaryينشئ Cart Summary Component الذي يعرض عدد العناصر في السلة وإجماليها بشروط ngIf، ويضيف زر إضافة المنتج إلى السلة بحدث click يستدعي دالة تضيف المنتج للـ Cart.15:52
  4. إضافة واستخدام الانتقال من خلال الـ Routingينشئ مجلدا ومكونا ووحدة Module خاصة بالسلة، ثم يضبط الـ Routing بحيث ينتقل المستخدم إلى صفحة السلة وصفحة الدفع، ويربطها بالـ Router داخل التطبيق.15:26
  5. إنشاء وتكوين إحدى مميزات الانتقال Store First Guardينشئ حارس مسار Route Guard يتحكم في الانتقال بين الصفحات، فيمنع الانتقال أو يسمح به حسب شروط محددة، ويسجله في وحدة الـ Routing ويجربه مع صفحة السلة.12:19
  6. إضافة المنتجات المختارة للشراء من خلال الـ Cart Detailيبني صفحة تفاصيل السلة Cart Detail التي تعرض المنتجات المختارة، مع رسالة عند خلو السلة باستخدام ngIf، وحساب الإجمالي لكل منتج وإجمالي السلة عند تغيير الكمية.25:42
  7. اتمام عملية الشراء من خلال الـ Checkoutيبدأ إتمام الشراء Checkout بإنشاء نموذج الطلب Order ووظائف المستودع لجلب الطلبات وحفظها، ويصمم نموذج إدخال بيانات العميل مثل الاسم والعنوان.36:29
  8. ربط المشروع بالباك إند وعرض البياناتيربط المشروع بالـ Backend عبر RESTful API، فيستبدل البيانات الثابتة بمصدر بيانات REST يرسل طلبات HTTP على بروتوكول ومنفذ محددين، ويعرض البيانات القادمة من السيرفر.15:06
8

المرحلة الأخيرة من المشروع النهائي SportsStore

10 درس
  1. مقدمة المرحلة الأخيرةيقدم المرحلة الأخيرة من المشروع وهي لوحة الأدمن: صفحة تسجيل دخول، وعرض المنتجات والطلبات، وإضافة منتج جديد وتعديله وحذفه، وتحديد عدد العناصر في الصفحة.8:41
  2. إنشاء وتكوين وربط Auth and Admin Componentsينشئ مكونات المصادقة Auth والأدمن Admin في Angular: نموذج تسجيل دخول بـ ngForm واسم المستخدم وكلمة المرور، ومكون Admin، وموديول خاص بالأدمن، ثم يربطها بمسارات الـ Routing.25:34
  3. تكوين وتطبيق المصادقة أثناء تسجيل الدخول Authenticationيبرمج مصادقة تسجيل دخول الأدمن في Angular: خدمة Auth ترسل طلب HTTP بـ POST وتفحص نجاح الاستجابة، وربطها بالـ Router وبمكون تسجيل الدخول، وتجربة النجاح من أدوات المتصفح.22:31
  4. إضافة جميع الوظائف للتعامل مع الطلبات والمنتجات للـ Adminيضيف وظائف تتيح للمدير التعامل مع المنتجات والطلبات عبر مصدر بيانات REST، مستخدما HttpHeaders، مع دوال الحفظ والتحديث في مستودعي المنتجات والطلبات.24:24
  5. الخطوة الأولى لتكوين عناصر الـ Adminيبدأ بناء واجهة المدير باستخدام Angular Material، فينشئ مكون جدول المنتجات وأزرارا وقائمة تنقل، ثم يعرض صفحتين مؤقتتين للمنتجات والطلبات.35:57
  6. الخطوة الثانية عرض المنتجات للـ Adminيعرض المنتجات في جدول لصفحة المدير داخل مكون Product Table، مع أزرار للتعديل والحذف، ويحذف المنتج من بيانات السيرفر ويحدث الجدول.28:01
  7. تعديل وإضافة منتجات جديدة بالنسبة للـ Adminيبني نموذجا لتعديل المنتجات وإضافة منتجات جديدة للمدير، يميز بين حالة التعديل وحالة الإنشاء حسب المسار، ويغير نص الزر وسلوكه تبعا لذلك.24:21
  8. الخطوة الثالثة عرض كل طلبات الشراء للـ Adminيبني مكون Order Table لعرض كل طلبات الشراء في صفحة المدير باستخدام Material Table، مع صفوف العناوين وصف لحالة عدم وجود بيانات وعرض بيانات العميل.30:19
  9. الخطوة الأخيرة فى المشروعيضيف ترقيم الصفحات في جدول المدير باستخدام Material Paginator مع خيارات لحجم الصفحة، ثم يجرب إرسال طلب من العميل ويتحقق من وصوله إلى السيرفر.13:17
  10. لينك المشروع النهائى

المحاضر

م/عمرو عبد الفتاح

م/عمرو عبد الفتاح

مهندس أنظمة حاسوب متخصص في تطوير وتصميم تطبيقات الهواتف ومواقع الإنترنت، عمل على تطوير منصات ومواقع شهيرة.
49.1K مشاهدة20 دورة

دورات ذات صلة