Posts Tagged npm

9 : Angular2 – CRUD Operations Using HTTP

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

نتابع ضمن هذه الحلقة من سلسلة Angular 2 , بالحديث عن العمليات CRUD باستخدام Angular 2. وبشكل خاص سوف نتحدث عن امكانية قراءة المعطيات باستخدام web service من خلال اطار عمل angular 2.

angular-2-http

 

مثال:

سنقوم ضمن هذا المثال, بتعريف مصدر للمعطيات data source وسيكون ببساطة عبارة عن ملف json يحوي على مجموعة منتجات.

ومن ثم سوف نقوم بتعريف خدمة service, التي ستقوم بدورها بقراءة هذه المعطيات من ملف json. ومن ثم سوف نستخدم هذه الخدمة service ضمن ملف app.component.ts بهدف عرض المنتجات.

الخطوة الاولى:

سنقوم بتعريف ملف باسم products.json ضمن برنامج Visual Studio code – او اي محرر نصوص اخر.

1-product_service.jpg.png

سنضع الكود التالي ضمن ملف prodcuts.json.

الكود يمثل المعطيات – المنتجات – التي سوف نعرضها ضمن تطبيق angular 2.

1-1 products list.JPG

الخطوة الثانية:

سنقوم بتعريف Interface والتي سوف تكون بمثابة class لتعريف عناصر المنتج الذي نرغب بقراءة معلوماته.

انشأ ملف باسم products.ts.

2 products.jpg.png

الخطوة الثالثة:

ضع الكود التالي ضمن الملف الذي قمت بإنشاءه للتو.

3 - interface code.JPG

كما هو واضح من الكود اعلاه, فإن الواجهة Interface تحوي التعريف الاساسي لعناصر المنتج الا وهي:

  • ProductID
  • ProductName

والتي هي عبارة عن خواص ضمن هذه الواجهة.

الخطوة الرابعة:

ضع الكود التالي ضمن ملف app.module.ts:

4 app module ts.jpg

الخطوة الخامسة:

قم بتعريف الملف products.service.ts

5 define_products.jpg.png

الخطوة السادسة:

اضف الكود التالي للملف الذي قمت بإنشاءه للتو

6 product service.JPG

سنفصل بعض النقاط من الكود المذكور اعلاه:

  • تم استيراد كل من
    {Http, Response} from ‘@angular/http’
    لاننا سوف نستخدم التوابع الموجودة ضمن http بهدف احضار المعطيات من ملف json
  • العبارات المدرجة ادناه تستخدم بهدف تفعيل امكانية الاستفادة من اطارالعمل التفاعلي Reactive framework, والتي من الممكن استخدامها بهدف انشاء Observable variable.6 notes
  • Observable framework: يستخدم بهدف الكشف عن اي تغيرات تحصل في استجابة http, والتي يمكن عندها – اي بعد كشف هذه التغيرات – اعادة ارسالها الى التطبيق الاساسي.
  • تم استخدام عبارة
    private _producturl = ‘app/products.json’
    بهدف تحديد موقع ملف المعطيات data source file location.
    وبنفس الوقت, ممكن ان تستخدم بهدف تحديد موقع ومسار web service.
  • من ثم قمنا بتعريف متحول variable من نمط Http, والذي سوف يستخدم بهدف احضار المعطيات من مصدر المعطيات data source.
  • ما إن نحضر المعطيات من ملف مصدر المعطيات data source file, بعدها نقوم باستخدام تعليمة
    stringify(data)
    بهدف ارسال المعطيات الى browser consule.

الخطوة السابعة:

ضع الكود التالي ضمن ملف

App.component.ts

7.JPG

العنصر الاساسي ضمن الكود السابق يتمثل بخيار ‘subscribe’ والذي يستخدم للتنصت على التابع getproducts() لاحضار المعطيات من مصدر المعطيات.

 

الآن, وبعد حفظ كل الكود السابق, وتشغيل التطبيق باستخدام npm. اذهب الى المتصفح, وسوف ترى الخرج التالي – بعد الاستعانة ب f12  او ما يعرف ب Developer tools لكي تستطيع رؤية النتيجة ضمن browser console كما يلي:

result using_npm.jpg

وبهذا المثال البسيط والمفيد ننهي حلقتنا لهذا اليوم, ببساطة وبتطبيق نفس الخطوات.

يمكن احضار معطيات من web service وعرضها على المتصفح.

والى اللقاء في حلقة قادمة نتحدث فيها معالجة الاخطاء error handling ضمن angular 2.

والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

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

 

Advertisements

, , , , , , , , , , , ,

أضف تعليق

8 : Angular2 – Data Binding ربط المعطيات

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

سنتحدث اليوم عن طريقة ربط المعطيات data binding  ضمن angular 2.

تعتبر خاصية ربط المعطيات باتجاهين عبارة عن ميزة كانت متواجدة ضمن angular js, ولكن تم ازالة هذه الميزة من الاصدار الجديد angular 2.data binding

لنوضح الآن  طريقة الربط ضمن angular 2.

1 class defnision.JPG

لنفترض بأن لدينا class  ويوجد ضمنه خاصية property لها قيمة ونمط معطيات كما يلي:

عندها, يصبح بإمكاننا ربط احدى خاصيات عناصر html بهذه الخاصية كما يلي:

2 html tag property.JPG

عندها سوف تسند قيمة هذه الخاصية Property الى خاصية عنصر html التي تم ربطها به.

سنطرح مثال عن كيفية تحقيق هذا النوع من الربط للمعطيات.

في مثالنا, سنعمد على عرض صور, بحيث ان مصدر الصور images source سوف يأتي من الخاصية الواردة ضمن ال class.

فيما يلي الخطوات المطلوبة لتحقيق هذا الربط:

  • قم بتحميل اي صورتين, على سبيل المثال, يمكن تحميل الصورة ادناه images_download.jpg.png
  • خزن هذه الصور ضمن مجلد يدعى “Images” ضمن مجلد “app”.
  • اضف الكود التالي الى ملف
    component.ts كما هو موضح في الشكل ادناه.
    3 step.JPG
  • اضف الكود التالي الى ملف
    component.html كما هو موضح ادناه
    4 step 4.JPG

كما نلاحظ في الكود اعلاه, فإننا نسند الخاصية src من الصورة الى الخاصية التابعة للصف.

النتيجة:

نتيجة تنفييذ البرنامج السابق ستُظهر كل صورة من الصور وبجوارها رقم.

————————

والى اللقاء في الحلقة القادمة التي سنتحدث فيها ان شاء الله عن عمليات الاضافة, الحذف, التعديل والاستعراض باستخدام HTTP.

الى اللقاء في الحلقة القادمة, والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

 

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

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

 

, , , , , , , , , , ,

أضف تعليق

7 : Angular2 – Directives الموجهات

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

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

سنتحدث ضمن هذه الحلقة عن الموجهات directives ضمن angular 2

الموجهات Directives:

هنالك 3 انواع للموجهات directives ضمن angular 2. كما هو موضح بالشكل ادناه

angular 2 directives.PNG

Attribute directives:

مثل

  • ngClass
  • ngStyle

Structural Directive:

مثل:

  • ngIf
  • ngFor
  • ngSwitch

وهي ستكون حديثنا ضمن هذه الحلقة.

Directive : عبارة عن عنصر من عناصر Html, يستخدم بهدف توسعة امكانيات html عبر ردفها بعناصر جديدة.

تحوي angular 2 الموجهات directives التالية والتي يتم استدعائها كجزء من موديول BrowserModule.

  • ngif
  • ngFor

باستعراض ملف app.module.ts بإمكانك رؤية الكود ادناه, بالاضافة الى استدعاء موديول BrowserModule. عبر تعريف هذا الموديول, يصبح بإمكانك عندها الاستفادة من كل من هذين الموجهين ngif, ngFor.

1.JPG

الآن, دعونا ننظر الى كل موجه من هذه الموجهات على حدا.

 ngIf

يستخدم بهدف اضافة عناصر الى كود Html, وذلك في حال تحقق الشرط المنطقي الذي يتضمنه, والا فإنه لن تتم اضافة العنصر الى كود html.

2.JPG

في حال كانت القيمة المنطق

ية للتعبير المدرج مع ngIf محققة – اي تساوي true – عندها فإنه تتم اضافة العنصر المرتبط بها الى كود Html.  وإلا فإنه لن تتم اضافة العنصر.

دعونا الآن نطرح مثال لكيفية استخدام موجه ngif.

الخطوة الاولى:

في البداية قم بإضافة خاصية تدعى ‘appStatus’ الى AppComponent Class.  هذه الخاصية من النمط المنطقي Boolean. وسنسند القيمة true

الى هذه الخاصية.

3.JPG

الخطوة الثانية:

الآن قم بإضافة الكود التالي الى ملف
app.component.html

4

نجد في الكود السابق, بإننا قمنا بتعريف الموجه ngIf . واعطائه القيمة ‘appStatus’ التي هي في الاساس تملك القيمة true وبالتالي فإن الشرط المنطقي سوف يتحقق, وسوف يتم اضافة هذا العنصر الى كود html.

وكنتيجة لذلك سوف يظهر لنا الخرج التالي:

ngif.jpg.png

ngFor

يستخدم العنصر ngFor بمثابة حلقة تكرار loop.

5- ngFor.JPG

حيث ان المتحول let  عبارة عن متحول مؤقت يستخدم بهدف عرض القيمة الموجودة ضمن variablelist.

سنطرح الآن مثالا حول استخدام ngFor.

الخطوة الاولى:

اضف الخاصية ‘appList’ الى ملف app.comopnent.ts كما هو موضح بالشكل ادناه.

6 - ng for

كما هو واضح من الشكل, فإن appList عبارة عن مصفوفة مكونة من عنصرين.

كل عنصر منهما لديه خاصيتين: ID, Name.

الخطوة الثانية:

عرف الكود التالي ضمن ملف app.component.html.

7 - ng for

في الشكل اعلاه, نستخدم الموجه ngFor كحلقة تمر على كل عناصر المصفوفة appList وتقوم بعرضها.

وستظهر لنا  النتيجة عبر المتصفح كالتالي:

ngfor.jpg

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

———————————————

الى اللقاء في الحلقة القادمة

والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

 

المراجع:

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

 

, , , , , , , , ,

أضف تعليق

6 : Angular2 – Templates القوالب

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

نعود لنتابع سلسلتنا حول angular 2, لنتحدث ضمن هذه الحلقة عن القوالب templates ضمن angular 2.

تستخدم القوالب ضمن المكونات components بهدف تحديد واجهة العرض التي ستظهر لهذا المكون.template

اي بهدف تحديد كود Html او تشير لصفحة Html تحوي الكود المطلوب لعرضه لهذا المكون.

 

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

ضمن حديثنا المكونات في الحلقة السابقة, كنا قد عرضنا بعد اجزاء الكود التي كانت تحتوي على تعريف للقوالب templates.

كما في الصورة ادناه:

1 - template.JPG

يعرف هذه الاسلوب ب ‘Inline template’. حيث يتم بعد تعليمة‘template’  عرض كود html المطلوب عرضه والخاص بهذا المكون.

هنالك طريقة اخرى لتعريف القالب template, والتي تتم عبر استخدام التعليمة ‘templateURL’.
الهدف من استخدام تعليمة templateURL هي الاشارة الى مسار الملف الذي يحوي كود html, بدلا من ذكر الكود مباشرة في نفس ملف المكون component كما هي الحال عند استخدام تعليمة template

طريقة استخدامها كمايلي:

2- templateURl syntax.JPG

فيما يلي سنذكر الخطوات المطلوبة لتعريف ‘template’:

  • انشأ ملف بالاسم التالي:
    component.html
    والذي بدوره سيحوي على كود Html اللازم لعرضه.
    app_component.jpg
  • اضف الكود التالي ضمن الملف الذي قمت بإنشاءه
    step 2 of inline.JPG
    حيث قمنا بتعريف div ووضعنا داخلها مرجع للخاصية ‘appTitle’ المعرفة ضمن app.component.ts
  • ضمن ملف app.omponent.ts ضع الكود التالي:
    step 3 of inline.JPG
    كما هو واضح من الكود, فقد قمنا باستخدام التعليمة ‘templateURL’ بهدف الاشارة لملف app.component.html.
  • الآن قم بتشغيل الكود ضمن المتصفح, وسوف تحصل على الخرج التالي:
    run_the_code.jpg.png

كما هو واضح, فقد تم استدعاء app.component.html وعرضه, مع تعويض قيمة الخاصية appTitle بالقيمة المسندة لها.

————–

كما نلاحظ فإن استخدام القوالب templates ضمن angular 2  بسيط جدا ومفيد في تنظيم العمل.

كانت هذه حلقة بسيطة جدا, وقصيرة, لننتقل في الحلقة القادمة ان شاء الله للحديث عن الموجهات Directives

والى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template

 

المراجع:

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

 

, , , , , , , , ,

أضف تعليق

5 : Angular2 – Components

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

نتابع ضمن هذه الحلقة المزيد من الشروح الننظرية حول بنية ومركبات angular 2.

في الحلقة الماضية تحدثنا بالتفصيل عن الموديول module ضمن angular 2. اما ضمن هذه الحلقة فسوف نتحدث عن مركب مهم وضروري ضمن angular 2 الا وهو المكونات components.

وكما نذكر من الحلقة السابقة, فإن الموديول module قد يتألف من عدة components.

دعونا الآن اذن نطّلع على بنية وطبيعة ال component.

Components

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

يتألف ال component مما يلي:

  • “Template” – القالب: ويستخدم لتحديد واجهة HTML التي سيتم تهيئتها وعرضها ضمن التطبيق.
  • “Class”– مشابه لاي كلاس في اي لغة برمجة اخرى مثل  java or C.
    يحوي على خصائصproperties  وتوابع  methods. ويوجد ضمنه الكود الللازم لدعم الواجهة. وتتم برمجة الكلاس class باستخدام لغة TypeScript.
  • “Metadata” – تستخدم بهدف توسيع فعالية الصف class.

الآن دعونا ندهب ونفتح الملف التالي:

App.component.ts

بهدف انشاء اول component لنا.

والآن دعونا نضيف الكود التالي الى الملف, ومن ثم نناقش بالفصيل كل خطوة من الخطوات.

Class

كما ذكرنا منذ قليل, يتم تعريف وكتابة ال class  باستخدام لغة TypeScript.

وله  البناء التالي كما هو موضح بالشكل ادناه.

  • “Classname”– يمثل الاسم الذي سوف يتم اعطاءه للصف class.
  • “Propertyname”– الاسم الذي سيمثل الخاصية property
  • “PropertyType”– نمط ونوع الخاصية – مثلا string, integer…
  • “Value”– القيمة التي سيتم اسنادها الى الخاصيةproperty

مثال:

هنالك عدة نقاط من المهم الانتباه لها ضمن المثال المذكور:

  • في المثال تم تعريف صف class اسمه AppComponent
  • تم استخدام الكلمة المفتاحية “export” للدلالة على ان هذا المكون يمكن استخدامه ضمن مودول module اخرى ضمن تطبيق angular 2.
  • “appTitle” تمثل اسم الخاصية
  • نوع الخاصة من نمط string
  • قيمة الخاصية ‘Welcome’

 

القالب Template

وتمثل جزء من واجهة العرض التي سيتم عرضها ضمن التطبيق

  • “HTML Code” – عبارة عن كود html التي سيتم تهئيته وعرضه ضمن التطبيق.
  • “Class Properties”– عبارة عن خصائص الصف التي من الممكن الاشارة اليها هنا ضمن القالبtemplate .

مثال:

هنالك عدة نقاط من المهم الانتباه لها ضمن المثال المذكور:

  • قمنا بتعريف كود html الذي سيتم عرضه ضمن التطبيق
  • كما اننا نشير الى الخاصية appTitle التي تم تعريفها منذ قليل داخل الصف class .

Metadata

تستخدم بهدف توسيع فعالية الصف  class واضافة المزيد من المعلومات.

دعونا الان نلقي نظرة على الكود الكامل لكل من الصف class, القالب template  و ال metadata.

مثال:

نلاحظ النقاط التالية ضمن المثال السابق:

  • استخدمنا الكلمة المفتاحية “import” بهدف استيراد المكونات ‘component’ من موديول angular/core.
  • استخدمنا الكلمة المفتاحية ‘Component’ والتي يدرج تحتها كلمة ‘selector’ والتي تحدد تاغ من تاغات Html والذي سيستخدم في الصفحة الرئيسية.
    اسم التاغ ‘my-app’.

الآن دعونا نستعرض صفحة index.html.

دعونا نتحقق الان من وجود تاغ ‘my-app’ ضمن هذه الصفحة في جزء ال Body.

للتأكد من صحة مثالنا, ارجو وضع الكود التالي بمكان تاغ <body>

النتيجة

الآن لاستعراض النتيجة, افتح المتصفح على العنوان التالي:

Localhost:3000

ويجب ان يظهر الخرج التالي كما في الشكل ادناه

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

في الحلقة القادمة سنتحدث عن القوالب template, بشكل بسيط يوضح الغرض المطلوب منها.

ارجو ان ننتهي من هذه السلسة باقرب وقت ممكن لنتمكن بعدها من الانتقال الى موضوع شيق اكثر, تشكل angular 2 جزء اساسي منه, الا وهو برمجة تطبيقات الموبايل باستخدام HTML 5 & Angular 2.

والى لقاء قريب في الحلقة القادمة.

والى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

مع تحيات

م. نور الصباحي

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template

 

المراجع:

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

 

, , , , , , , ,

أضف تعليق

3 : اعداد بيئة العمل الازمة لبرمجة Angular2

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

نتابع معكم ضمن سلسلة angular 2 لنتعلم ضمن هذه الحلقة كيف نعد البيئة المحيطة اللازمة لعمل angular 2.

حيث سنقوم ضمن هذه الحلقة بشرح طريقة تنصيب البرامج اللازمة لتسهيل العمل والبرمجة مع angular 2

ثم سنتتطرق ضمن الحلقات التالية الى تطبيقات عملية يتم ضمنها الاستفادة من البرامج التي سيتم تنصيبها ضمن هذه الحلقة.

ملاحظة:

سنقوم بشرح كافة الخطوات الازمة لاعداد بيئة العمل لبرمجة angular 2 ضمن windows

 

اعداد بيئة العمل مع Angular 2

لكي تبدأ بالعمل مع angular 2 يتوجب عليك القيام تنصيب المكونات التالية:

  • Npm– ويعرف ب node package manager
    angularJs عبارة عن اطار عمل لدية مكونات وملفات متعلقة به. وبالامكان استخدام npm بهدف تحميل تلك الملفات المتعلقة وربطها بمشروعك.
  • Git– برنامج كود المصدر source code software, وسنتسخدمه بهدف تحميل التطبيق الذي سنعمل عليه من github.
  • Editor– محرر النصوص: هنالك الكثير من محررات النصوص التي يمكن استخدامها من اجل تطوير Angular Js, على سبيل المثال, يمكن استخدام فيجوال استيديو Visual Studio وهو ما سوف نستخدمه ضمن مثالنا هذا.

 

تنصيب install npmnpm logo.png

الموقع الرسمي ل Npm:

https://www.npmjs.com/
npm site

  1. نفتح صفحة الموقع ومن ثم نذهب الى قسم “get started with npm”
    get_started npm
  2. ضمن الصفحة التالية التي ستظهر امامك قم باختيار المنصب installer الذي ترغب بتحميله وذلك اعتمادا على نظام التشغيل الخاص بك.
    choose_installer npm
    على سبيل المثال سوف نقوم بتحميل نسخة الخاصة ب windows 64
  3. شغل ال installer بعد تحميله. ضمن الشاشة الاولى التي ستظهر لك قم بالضغط على زر التالي “Next”
    launch.next
  4. في الشاشة التالية اضغط على زر الموافقة على اتفاقية اللايسنز ومن ثم اضغط زر التالي “Next”
    accept aggreement npm
  5. في الشاشة التالية, حدد المجلد الذي ترغب بأن تخزن به الملفات واضغط التالي “Next”
    destination_folder.npm
  6. في الشاشة التالية, قم باختيار المكونات ثم اضغط زر التالي “Next” . بامكانك الموافقة على كافة المكونات المعروضة ضمن
    الالحالة الافتراضية
    default_installation.component npm
  7. في الشاشة التالية اضغط على زر تنصيب “Install”
    click_install npm
  8. ماان ينتهي التنصيب حتى تظهر لك شاشة اضغط فيها على زر انتهاء “Finish”
    finish_button.npm
  9. لكي تتحقق من ان عملية التنصيب قد تمت بنجاح, اذهب الى سطر الاوامر command line , ثم اكتب الامر التالي:
    ‘npm version’
    سيظهر لك عندها تاريخ اصدار npm كما هو واضح في الصورة ادناه وذلك في حال كانت عملية النتصيب قد تمت بنجاح
    command line np

 

 

تنصيب فيجوال ستيديو كود Visual Studio Code Installationmstile-310x310.png

الموقع الرسمي

https://code.visualstudio.com/
visualstudio.jpg.png

  • الرجاء بعد تحميل download فيجوال استيديو اتباع خطوات التنصيب.
    في الشاشة الاولى اضغط على زر التالي.
    initial_screen.jpg.png
  • في الشاشة التالية اضغط على الموافقة على اتفاقية اللايستنز ومن ثم اضغط التالي.
    next. vs install
  • في الشاشة التالية, قم باختيار المجلد الذي سيتم فيه تنصيب وتخزين الملفات ثم اضغط التالية
    destination_location.vs.png
  • في الشاشة التالية, حدد الاسم المختصر للبرنامج ومن ثم اضغط التالي
    program_shortcut.vs.png
  • في الشاشة التالية, اقبل الاعدادات الافتراضية كما هي ومن ثم اضغط التالي.
    1 default setting
  • في الشاشة التالية, اضغط على زر تنصيب “Install”
    setup.install vs
  • في الشاشة الاخيرة اضغط على زر الانتهاء “Finish” ليعمل فيجوال استيديو كود
    final_screen.vs

 

Installing Gitgit logo.png

الموقع الرسمي

https://git-scm.com/
gitSite.png

  • بعد ان تنتهي من تحميله اتبع الخطوات التالية: في الشاشة الاولى اضغط على زر التالي
    gnu_licence.git.png
  • حدد المكونات التي تحتاج الى تحميلها. بامكانك القبول بكافة المكونات التي تم تحديدها بشكل افتراضي
    default_components.git
  • في الخطوة التالية قم باختيار اسم المختصر الذي سوف يظهر للبرنامج ومن ثم اضغط التالي
    git_shortcut git.png
  • في الشاشة التالية قم بتحديد خيار “Use OpenSSH” ومن ثم اضغط التالي
    default_ssh git.png
  • وافق على الخيارات الافتراضية الخاصة ب “Checkout Windows Style, commit Unix style endings” ومن ثم اضغط التالي
    default_setting.git.png
  • وافق على الاعدادات الافتراضية “use MinTTY(the default terminal of MSYS2)” ومن ثم اضغط التالي
    terminal GIT.png
  • وافق ايضا على الاعدادات الافتراضية ومن ثم اضغط التالي
    accept_default_settings.git
  • تجاوز خيار “Enable experimental, builtin difftool” ومن ثم اضغط على زر التنصيب “Install”
    experimental_options.git.png
  • في الشاشة النهائية اضغط على زر الانتهاء لتتم بذلك عملية التنصيب
    complete_installation_process. git.png

وبذلك تكون بيئة العمل جاهزة لنباشر التطبيق على المثال الجاهز الذي سنقوم بتحميله ضمن الحلقات القادمة والعمل عليه عبر خطوات سهلة وبسيطة

والى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

 

الترجمة المصطلح
مفتوح المصدر Open source
جافا سكريبت Java script
اطار عمل framework
تطبيقات الصفحة الواحدة Single page application
المكونات Components
المتحكمات Controllers
الخدمات services
تطبيق application
واجهات العرض Views
برنامج كود المصدر source code software
تنصيب install
نظام التشغيل Operating system
سطر الاوامر Command line

 

المراجع:

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

 

 

, , , , , ,

أضف تعليق