تطوير تطبيقات الويب باستخدام Angular


الدرس: تثبيت الأدوات وإنشاء مشروعك


الصفحة السابقة
الآن بعد أن تعرفت أكثر على ما هو Angular ، قبل أن تدخل في التطوير ، سيكون عليك إعداد بيئة التطوير. لبدء هذا ، ستقوم بتثبيت CLI

إعداد بيئة التطوير


ما هو CLI؟
CLI ، أو "واجهة سطر الأوامر" (أداة لتنفيذ الأوامر من وحدة التحكم) ، من Angular هي الأداة التي تسمح لك بتنفيذ البرامج النصية لإنشاء وهيكلة وإنتاج تطبيق Angular .
للوصول إلى سطر الأوامر:
  • في نظام التشغيل Windows إذا كنت ترغب في استخدام موجه أوامر Windows الأصلي ، فافتح ببساطة نافذة التشغيل عن طريق عمل Windows + R وإدخال cmd . خلاف ذلك ، هناك أدوات مساعدة أصلية مثل PowerShell أو أطراف ثالثة مثل PowerCmd أو ConEmu على سبيل المثال. يجب أن تعمل جميع الأوامر المذكورة في الدورة إذا تمت مصادقتك كمسؤول على جهازك.
  • في نظام التشغيل Mac ما عليك سوى تشغيل Terminal من Spotlight أو Launchpad .  
  • في Linux قم بتشغيل الوحدة الطرفية التي تختارها.

قم بتثبيت الأدوات


يجب عليك تثبيت الأدوات التالية إذا لم يكن لديك بالفعل على جهازك:
NODE.JS
قم بتنزيل وتثبيت أحدث إصدار LTS من Node.js هنا: https://nodejs.org/en/download/
Angular nodejs web site
NPM
NPM هو مدير حزم يسمح بتثبيت الكثير من الأدوات والمكتبات التي ستحتاجها لأي نوع من التطوير. لتثبيته ، افتح سطر أوامر واكتب الأمر التالي:

npm install -g npm@latest
Angular nodejs web site
إذا فشل الأمر في مشكلة إذن على Mac أو Linux ، يمكنك تشغيله في وضع المستخدم الفائق  مع  sudo أو راجع الوثائق التالية .
ANGULAR / CLI
ستقوم الآن بتثبيت Angular CLI عالميًا على جهازك باستخدام الأمر التالي (مع sudo إذا لزم الأمر):

npm install -g @angular/cli
Angular nodejs web site
من هناك ، ng يتوفر الأمر من سطر الأوامر من أي مجلد على الكمبيوتر.
لمزيد من المعلومات ، يمكنك العثور على وثائق كل عنصر على الموقع المقابل:
  •     node.js: https://nodejs.org/en/docs/
  •     npm: https://docs.npmjs.com/
  •     ng:  https://cli.angular.io/

أنشئ مشروعك الأول


خلال هذه الدورة ، سأستخدم الأنماط بتنسيق SCSS . لا تقلق. إذا كنت لا تعرف هذا النظام حتى الآن ، لأن أي رمز CSS صالح هو أيضًا رمز SCSS صالح. ولكن سأنتهز الفرصة لاستخدام الميزات الإضافية التي تقدمها هذه البنية. في هذه الدورة ، لن نركز على الجماليات أو واجهة المستخدم(UI) الخاصة بالتطبيق ، ولكن من أجل تخطيط بسيط وسريع وفعال ، سوف نستفيد من أنماط bootstrap. الآن بعد أن أصبحت بيئة التطوير الخاصة بك جاهزة ، فلنبدأ في إنشاء أول تطبيق لنا.
لإنشاء مشروع Angular جديد ، انتقل إلى المجلد المطلوب من سطر الأوامر وأدخل الأمر التالي:

ng new mon-premier-projet
Angular nodejs web site
Angular nodejs web site
Angular nodejs web site
ثم انتقل إلى مجلد المشروع وقم بتشغيل خادم التطوير:

cd mon-premier-projet
ng serve –open
إذا سارت الأمور على ما يرام ، فسترى معلومات الخادم التي تُفتح على localhost: 4200  وسيتم تشغيل متصفحك المفضل تلقائيًا برسالة "مرحبًا بك في التطبيق !!" والشعار Angular .
تهانينا ، بيئة التطوير الخاصة بك جاهزة!
Angular nodejs web site
بعض النصائح للتطوير

للتطوير ، أنصحك باستخدام محرر مثل Atom أو Sublime Text ، أو IDE مثل VS Code أو WebStorm . بالنسبة إلى لقطات الشاشة ، سأستخدم WebStorm ، التي تحتوي على الكثير من الميزات المصممة خصيصًا لتطوير JavaScript / TypeScript ، لذلك لا تقلق إذا كانت الألوان أو المرئيات في المحرر الخاص بك لا تبدو تمامًا مثل تلك التي أعرضها لك.
أنصحك باستخدام Chrome كمتصفحك الافتراضي للتطوير ، لأن أدوات المطورين كاملة للغاية ، ولديك أيضًا إمكانية تثبيت Augury ، وهو مكون إضافي معين من Chrome للتطوير ال Angular.

بالنسبة لبقية الدورة ، سأستخدم الأنماط في SCSS بدلاً من CSS البسيط: هذا يجلب الكثير من المزايا (إنشاء المتغيرات ، واستخدام mixins لرمز أكثر نمطيًا وما إلى ذلك) ، ويتم دمجه بواسطة CLI. لا تقلق إذا لم تفهم بنية SCSS: أي رمز CSS صالح صالح أيضًا في SCSS.
ستستخدم أيضًا Bootstrap لأنماط تطبيقك لتسهيل التخطيط البسيط الذي ستؤديه. هذا بالطبع ليس إلزاميًا ، ولكن نظرًا لأن الدورة تركز هنا على Angular ، فلن أتحدث عن الجماليات أو الجودة العامة لواجهة المستخدم.

في الجزء التالي ، سوف نكتشف العناصر الأساسية لمشروع ال Angular.