3: Angular2 – Hello World

facebook-groupالسلام عليكم ورحمة الله وبركاته

كما تذكرون فقد قمنا بالحلقة السابقة باعداد بيئة العمل المناسبة لبرمجة angular 2

اما الان فسنتابع بتطبيق عملي وبرنامج بسيط باستخدام angular 2
hello world

هنالك عدة طرق للبدء ببرمجة وبناء تطبيقات angular 2

  • الطريقة الأولى تتمثل ببناء التطبيق من الصفر, وتعتبر اصعب طريقة, وليست محبذة.
  • الطريقة الثانية تتمثل باستخدام كود جاهز لتسهيل الانطلاق ببرمجة angular 2 موجود على ال github.
    يحوي هذا الكود على الاكواد الضرورية اللازمة لكي نبدأ البرمجة ب angular 2 بسهولة.
    تعتبر هذه الطريقة هي الطريقة المفضلة لدى اغلب المبرمجين, وهي الطريقة التي سنتبعها ضمن هذه الحلقة.
  • الطريقة الاخيرة تتمثل باستخدام Angular CLI. سنناقض هذه الطريقة بالتفصيل ضمن الحلقات القادمة.

فيما يلي الخطوات اللازمة للحصول على تطبيق صغير جاهز من ال Github.

  1. اذهب الى الرابط التالي:
    https://github.com/angular/quickstart
    1 github. quick start
  2. افتح سطر الاوامر command prompt وقم بإنشاء مجلد خاص للمشروع.
    عبارة عن مجلد فارغ. ضمن مثالنا سنقوم بإنشاء مجلد يدعى “Project”.
  3. ضمن سطر الاوامر. انتقل إلى داخل المجلد الذي قمت بإنشاءه للتو, ومن ثم نفذ الامر التالي الذي سيقوم بدوره بتحميل المثال المطلوب الى داخل المجلد.
    git clone https://github.com/angular/quickstart Demo
    3 - command download quickstart.jpg.png
  4. افتح الملفات – التي قمت بتحميلها للتو – باستخدام visual studio code
    4 - vs open_code.jpg.png
  5. عد الى سطر الاوامر, ثم انتقل الى داخل مجلد “Demo” واكتب الامر التالي
    npm install
    5 npm_install.jpg.png
    ستقوم هذه التعليمة بتحميل الملفات الضرورية المطلوبة من قبل تطبيق angular js لكي يعمل
    ما ان يتم تنفيذ هذه التعليمة حتى تظهر لك بنية شجرية tree structure تظهر لك فيها كافة المتعلقات التي قمت بتحميلها
    5-1 tree_structure.jpg.png
  6. اذهب الان الى المسار التالي:
    Demo -> src -> app -> app.component.js
    ستجد بداخل هذه الملف الكود التالي:
    6 app.component.js 1.JPG
    استبدل كلمة “Angular” بجملة “Hello World” كما هو مبين بالصورة ادناه
    6 app.component.js 2.JPG
    ستجد هنالك العديد من الملفات, وهي جزء من الملفات الاساسية للمشروع, لا تكترث بها حاليا لانه لاتوجد حاليا حاجة لتعديل اي منها في مثالنا الحالي, وسنقوم بمناقشتها بالتفصيل ضمن حلقات قادمة ان شاء الله.
    ملاحظة:
    في حال لم تجد الملف السابق ووجدت بدلا منه component.ts استخدمه وقم بالتبديل المطلوب. ستجد محتوى مكافئ سنشرحه فيما بعد
  7. اذهب الى سطر الاوامر ونفذ الامر التالي:
    npm start
    7 npm start angular_application.jpg.png
    7 - 1 lite_server.jpg.png
    ستشغل هذه التعليمة Node package manager والتي بدورها سوف تشغل تطبيق angular على مخدم الويب web server.
    في هذه اللحظة سوف يعمل تطبيق angular js على المتصفح وسوف تظهر لك عبارة “Hello World”  التي قمت بتعديلها منذ قليل كما هو موضح ضمن الشكل ادناه:
    8 hello_world.jpg.png

 

النشر Deployment

بما ان التطبيق عبارة عن تطبيق angular js, لذلك فإنه من الممكن نشره على اي منصة عمل platform. وكذلك فإن بيئة التطوير ممكن ان تكون بدورها اي منصة عملplatform .

في حالتنا هذه فإن منصة التطوير الحالية هي عبارة عن نظام ويندوز windows  باستخدام Visual Studio Code.

اما بالنسبة لخيارات النشر deployment options فإن هنالك عدة خيارات, ولكننا سوف نتطرق الى احدها فقط الا وهو التالي:

 

Deployment on NGNIX Servers On Windows

النشر على سيرفر NGINX ضمن نظام تشغيل ويندوز

ملاحظة: بالامكان استخدام اي مخدم ويب Web server على اي منصة عمل platform من اجل تطبيقات angular js, ولكن في حالتنا هذه سنتطرق لمثال يستخدم مخدم NGNIX server على نظام ويندوز.

خطوات النشر هي التالية: Deployment Steps

  1. تحميل مخدم الويب الشهير NGINX من الرابط التالي
    http://nginx.org/en/download.html
    1- Deployment nginx.jpg.png
  2. بعد فك ضغط الملفات, قم بتشغل الملف exe الذي بدوره سيقوم بتشغيل مخدم الويب بالخلفية.
    من ثم سيكون بامكانك الذهاب الى الرابط التالي ضمن المتصفح:
    http://localhost
    2- deployemnt.png
  3. اذهب الى مجلد المشروع
  4. انسخ المجلد التالي: Project -> Demo -> node-modules
    والصقها ضمن المسار المجلد التالي:
    nginx/html
    4 deploymentdemo.jpg
    6 deployemnt html_folder.jpg.png
  5. انسخ ايضا كافة الملفات الموجودة ضمن مجلد
    project -> Demo -> src
    والصقها ضمن المسار المجلد التالي:
    nginx/html
    5 deployemnt src_folder.jpg.png
  6. الآن اذهب اكتب الرابط التالي ضمن المتصفح
    http://localhost
    ستظهر عندها عبارة “Hello World” كما هو ظاهر في الشكل ادناه
    6-1 deployemnt hello_world_application.jpg

وبذلك نكون بهذه الخطوات البسيطة قد قمنا بنشر deploy تطبيق angular js  على مخدم nginx بمنصة عمل ويندوز

 

من الطرق الاخرى للنشر deployment عملية النشر على نظام Ubuntu مذكورة ضمن المرجع ادناه, لم نتطرق اليها بالامكان الرجوع اليها عبر الرابط.

وبهذه نكون قد انهينا ضمن هذه الحلقة وعبر خطوات بسيطة وسهلة عملية تشتغل اول تطبيق angular js

في الحلقات القادمة سنعتمد على نفس المثال والملفات التي قمنا بتحميلها والعمل عليها ضمن هذه الحلقة, لنشرح بالتفصيل بنية الملفات وتفاصيل الكود المضمنة داخلها, ونجري معنا بعض التعديلات فنفهم بذلك الية عمل angular 2
والى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

 

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform

المراجع:

  1. https://www.tutorialspoint.com/angular2/index.htm
  2. الموقع الرسمي https://angular.io/

 

 

Advertisements

, , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: