Getting Started with Angular

 Getting Started with Angular

                                                              

 المتطلبات الأساسية:

• ما تحتاجه قبل البدء: معرفة أساسية بـ HTML, CSS, JavaScript - محرر نصوص (VS Code موصى به)

• هل Angular مناسب لك؟  نعم إذا: تريد بناء تطبيقات كبيرة، تحتاج هيكل منظم، تعمل في فريق

         ربما لا إذا:تريد صفحة بسيطة، تفضل المرونة على التنظيم

قائمة المصطلحات والتعريفات:

المصطلح باللغة العربية	المصطلح باللغة الإنجليزية	التعريف
-	RxJS	مكتبة لبرمجة  (Reactive Programming) في JavaScript. تستخدم RxJS مفهوم  Observables   لتسهيل التعامل مع التدفقات من البيانات والأحداث في التطبيقات.
-	Observable	يُمثل تدفقًا من البيانات أو الأحداث على مر الزمن. التدفقات هي هياكل بيانات تمثل تسلسل متتابع من القيم على مر الزمن في RxJS.    يُستخدم المصطلح "Observable" للدلالة على التدفقات. Observables  تتيح لك رصد التغيرات في البيانات والتفاعل معها بطريقة فعّالة.
البرمجة الردية	Reactive Programming	البرمجة الردية هي نهج برمجي يركز على التعامل مع التغيرات والأحداث في النظام بطريقة فعّا ومتجاوبة. وبهذا النمط يتم التفاعل مع التغيرات عند حدوثها، والتحكم   في تدفق البيانات بشكل تلقائي في angular

المقدمة

Angular هو إطار عمل (Framework) قائم على TypeScript مطوّر من قبل فريق Google. يُستخدم لبناء تطبيقات الويب الحديثة والديناميكية. يعتبر Angular خيارًا شائعًا للمطورين الذين يسعون إلى بناء تطبيقات قائمة على المكونات والتي تتفاعل بشكل ديناميكي مع المستخدمين.

والهدف من هذه المقالة خطوات تحميل وتثبيت angular  وإنشاء أول مشروع 

لماذا نستخدم Angular ؟

1. هيكلية تنظيمية:

• يقدم هيكلية تنظيمية قوية تُسهم في تنظيم الكود بشكل فعّال، مما يجعلها سهلة الصيانة والتوسع.

2. تجربة مطور فعّالة:

• يوفر Angular ميزات قوية لتطوير التطبيقات مثل نظام الحقول (Dependency Injection) وتعبئة المحتوى (Content Projection)، مما يجعل تجربة المطور أكثر فعالية وسلاسة.

3. تركيز على التدفقات والربط الثنائي:

• يوفر Angular نظام ربط ثنائي (Two-way Data Binding) الذي يُسهم في تتبع التغييرات في الواجهة والبيانات بشكل تلقائي.

أبرز ميزات Angular:

1. TypeScript:

• Angular يعتمد على TypeScript، وهو لغة برمجة مكتوبة على JavaScript توفر نوع البيانات ومزايا أخرى تسهل فحص الكود وتجعله أكثر صحة.

2. RxJS:

• Angular يستفيد من RxJS لتسهيل التعامل مع التدفقات والأحداث، مما يجعل البرمجة الردية (Reactive Programming) جزءًا متكاملًا من تطوير التطبيقات.

3. نظام الحقول (Dependency Injection):

• يُسهم نظام الحقول في Angular في تحسين إدارة التبادلات بين مكونات التطبيق وتوفير تحكم أفضل في تبادل البيانات.

تنزيل Angular وإنشاء مشروع أولي:

-   قبل تنزيل angular  سنتأكد من تنزيل  node js و npm  مسبقا على اجهزتنا 

1.  تنزيل Node.js:

•  ندخل الى موقع Node.js الرسمي. ثم انقر على الإصدار "LTS" (الدعم على المدى الطويل) لتحميل الإصدار الموصى به لمعظم المستخدمين ثم نقوم بتحميل برنامج المثبت installer ونختار نظام التشغيل الخاص بنا بالنقر عليه لبدأ تحميله
  

• وبعد الانتهاء من التحميل نتوجه لمكان حفظ البرنامج على جهازنا ونضغط عليه ونبدأ عملية التثبيت (عملية تثبيت عدة خطوات مثل تثبيت اي برنامج اخر )

• للتحقق من تثبيت node js نقوم بتشغيل الأمر التالي  node -v  في موجه الأوامر cmd  او power shell إذا تم تثبيته بشكل صحيح وكامل نلاحظ نسخة الإصدار الذي قمنا بتحميله ولمعرفة اصدار npm  نكتب الامر npm -v 

نحن الان جاهزين لتحميل angular

2.  تنزيل angular 

 سنقوم أولا بتنزيل  angular CLI:

• ما هو ال angular CLI؟

- وهو أداة تساعد في إعداد وإدارة مشاريع Angular بسهولة. 

- ينشئ الهيكل الأساسي تلقائياً

- يدير التبعيات (Dependencies)

- يقدم خادم تطوير محلي

- يقوم بعمل Build للتطبيق

- ينشئ المكونات والخدمات تلقائياً

-أوامر CLI الأساسية التي ستحتاجها

مثال	الوظيفة	الأمر
ng new shop-app	مشروع جديد	ng new
ng serve --open	تشغيل التطبيق	ng serve
ng g c product-list	إنشاء مكون	ng generate
ng build --prod	بناء للتوزيع	ng build
ng test	تشغيل الاختبارات	ng test

• الآن لنعد لتثبيت Angular CLI، افتح نافذة الأوامر واكتب الأمر التالي: npm install -g @angular/cli
  ثم نقوم بكتابة الامر ng v فيظهر لنا ما يلي 

3.  إنشاء مشروع angular:

- خطوة اختيارية:  توجه لأي قرص على الحاسب وأنشأ مجلد جديد  خاص بمشاريع angular  لتنظيمها 

1. عن طريق موجه الأوامر يمكننا إنشاء مشروع جديد عن طريق كتابة الامر:  ng new my-angular-app  

حيث أن :  ng new  هو اختصار angular  و انشاء مشروع جديد
              my-angular-app   هو اسم المشروع المراد إنشائه ويمكنك وضع أي اسم تريده

2.  بعد كتابة التعليمة يظهر سؤال "Which stylesheet format would you like to use" ويقصد به تحديد ورقة الأنماط (Stylesheet)

 قم بتحديد ما يتطلبه مشروعك انا سأختار الافتراضي حاليا وهو css  بالضغط على Enter  ويمكن التبديل بينهما عن طريق الأسهم في لوحة المفاتيح 

3. بعد اختيار الخطوة السابقة سيظهر لدينا سؤال آخر وهذا السؤال يتعلق بخيارين مهمين في Angular لتحسين أداء التطبيق وتحسين تجربة المستخدم:

1. SSR: عند تمكين Server-Side Rendering (تقديم الجانب الخادم)، يتم إنشاء الصفحة على الخادم وتقديمها إلى المتصفح بصورة جاهزة للعرض. يُفضل SSR لتحسين أداء محركات البحث وتقديم تجربة مستخدم أسرع خاصة في الصفحات التي تحتوي على الكثير من المحتوى الديناميكي.

2. SSG/Prerendering:  عند تمكين Static Site Generation (تقديم الموقع الثابت)، يتم إنشاء صفحات HTML الثابتة أثناء وقت البناء (build time) وتقديمها كملفات HTML عادية. يعتبر هذا مناسبًا لتطبيقات الويب الثابتة التي لا تحتاج إلى تحديثات ديناميكية بشكل كبير في وقت التشغيل

•  سنجيب على هذا الخيار بأحد الحرفين y او n :  "دائما قم بإختيار الإجابة Y '

-  سننتظر قليلا حتى يتم إنشاء ملفات المشروع

4) تشغيل المشروع 

- يمكن عن طريق التعليمات التالية تشغيل المشروع ورؤيته عن طريق الدخول للرابط  :

• من نفس واجهة الأوامر ندخل للمجلد عن طريق وضع cd  ثم اسم المشروع الذي أنشأناه  cd my-angular-app
  ثم نكتب التعليمة التالية لتشغيل المشروع

• ng serve

• ويمكن بعد الدخول للمجلد كتابة التعليمة   . code  لفتح المشروع من vs code IDE ورؤية كل ملفات المشروع

• يمكننا رؤية هرمية المشروع وما تحتويه من مجلدات وملفات من النصف الأيسر من الصور

• ثم نفتح نافذة التيرمنال "Terminal" في المحرر و نكتب التعليمة   ng serve لتشغيل المشروع وننتقل للرابط لعرض المشروع على المتصفح 

عند الدخول للرابط نرى المشرع على الشكل :

فهم هيكل مشروع Angular

my-angular-app/

├── node_modules/ # كل المكتبات المثبتة

├── src/ # مصدر التطبيق

│ ├── app/

│ │ ├── app.component.ts # المكون الرئيسي

│ │ ├── app.component.html # واجهة المكون

│ │ ├── app.component.css # تنسيقات المكون

│ │ └── app.module.ts # تعريف الوحدة

│ ├── assets/ # صور، خطوط، ملفات ثابتة

│ ├── index.html # الصفحة الرئيسية

│ └── main.ts # بداية تشغيل التطبيق

├── angular.json # إعدادات Angular

├── package.json # تبعيات المشروع

└── tsconfig.json # إعدادات TypeScript

• أهم الملفات لفهمها

1. app.component.html: غير `<h1>Hello World</h1>` إلى `<h1>أهلاً بالعالم</h1>`

2. app.component.ts: هنا تكتب المنطق البرمجي

3. angular.json: إعدادات Build والخادم

المراجع:

اسم المرجع	الرابط
موقع angular	https://angular.io/guide/setup-local
موقع node js	https://nodejs.org/en/download