schwarztiger

بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته أخوتي إخواني الأعزاء , كلنا يعرف التاريخ , وكلنا يعرف كيف كان العلم والحضارة العلمية في أيدي العرب , وكيف كان الغرب في الماضي يرتع في غياهب الجهل والخرافات , بينما كان العالم العربي في أوج تقدمه وإزدهاره. دوماً نتذكر الماضي ...ونتفاخر فيه أحياناً...ونتحسر على حالنا أحياناً أخرى... لكن دعونا الآن ننظر إلى الموضوع نظرة مفكرة علمية جادة...هل تفاخرنا أو تحسرنا كافي؟؟ هل هذا هو جلّ ما نستطيع القيام به ...هل هذه هي رسالتنا في الحياة – النظر إلى إنجازات أجدادنا وأسلافنا دون أن نحرك قيد أنملة للتحرر من واقعنا المتخلف هذا , أو القيام بحركة جادة مفيدة تغيير وجه التاريخ ؟! إن كانت هذه هي رسالتنا ..فما أسخفها من رسالة ...وما اتفهنا من بشر , لكن بالتأكيد , وأنا واثقة بأن كل واحد منا لا يقبل بذلك , وبأنه يشعر في أعماق نفسه بأنه قادر على إحداث تغيير إيجابي على وجه هذه البسيطة...ولكن ربما يشعر للحظات بأنه وحيد,وقد يقول في نفسه " الكف الواحدة غير قادرة على التصفيق" فيتجاهل الفكرة ويستمر في هذه الحياة الروتينية, أو ربما يحاول الإقدام على طرح افكاره عسى أن يجد من يساعده في تطويرها قدماً ويقف إلى جانبه بحثاً عن حل جدي ينتشل ركام حضارتنا من واقعها المأساوي الحالي..ولكنه أيضاً قد يواجه بكثير من السخرية والاستهزاءات التي بدورها قد تحبطه فما أكثرهم الأشخاص الذين قد يواجهونه – أو يواجهوا مثل هذه الأفكار – بالقول " يكفيك أحلاماً " , "هههههههه هل تريد أن تغيير وجه العالم " ....وإلى غير ذلك من التفاهات , غير مدركين بأنهم جاهلون أو غافلون عن قوة الإرادة البشرية, وكيف أن رجلاً واحداً قادر على تغيير العالم بأسره . حسناً ما الذي بإمكاننا القيام به الآن , كلنا يعرف بأن طريق الألف ميل يبدأ بخطوة , وأول ما سنقوم به الآن هو الاستفادة من التاريخ بحد ذاته, ولنمحص النظر في صلب القضية, كيف انتقلت الحضارة للغرب؟؟ ببساطة : 1: كان الغرب يؤمنون بقدرتهم على تغيير واقعهم بالدرجة الأولى . 2: عبر حركة ترجمة العلوم بشكل تدريجي, حيث كانوا يقومون بإحضار الكتب العلمية في شتى المجالات من العرب ويعكفون على ترجمتها إلى لغاتهم, لينشأ بعد ذلك جيل واع على هذه العلوم السليمة المترجمة , ليأخذ بها ويدرسها منذ صغره ليطورها ويبدع في مجالها عند كبره. (أي انهم كانوا ذوي أفق واسع وتخطيط على المدى البعيد – ولا زالوا – ففي الوقت الذي نتصيد نحن فيه صوص اليوم , يتربصون هم دجاجة الغد التي تولد لهم عدد كبيراً من الصيصان). أما بالنظر إلى العامل الأول ,فنجد بأنه بالأجدر بنا أن نملك هذا الإيمان بالقدرة على التغيير الإيجابي , ألا وربنا الله وهو ثقتنا وعليه توكلنا , وما خاب من توكل على الله وجعل جل ثقته وإيمانه بالله. وبالنسبة للعامل الثاني,فما شاء الله عليكم كلكم مثقفون ومتعلمون , وقد حباكم الله بعقول نيرة أنتم مسائلون فيما بعد عن استخدامكم لها. فما الذي ينقصنا إذن, لا شي سوى أن نتوكل على الله ونخط بأيدينا خير رسالة لنا على هذه الأرض, لنشعر بأننا قد أدينا ما علينا بالحد الأدنى تجاه نعمة العقل والعلم التي حبانا الله تعالى بها.

الحلقة 2: Memetic Algorithm

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

ارجو بأن لا نكون قد اطلنا عليكم ريثما اعددنا هذه الحلقة من سلسلة MA.

كما نذكر فقد عرضنا في الحلقة السابقة مقدمة عن خوارزميات Memetic algorithm وشرح عنها وعن سبب تسميتها.

كتذكرة ومخلص للحلقة السابقة, نذكر بأن خوارزمية MA عبارة عن خوارزمية هجينة, تجمع سلوكيات الخوارزميات التطورية EA من حيث قاعدة البحث العام, وبين تقنيات وتجريبات البحث المحلي local search heuristics techniques.

وإن احد الميزات التي سبب هذه الشهرة والنجاح لخوارزميات MA هي التالية:

على عكس طرائق الحساب التطورية التقليدية traditional evolutionary  computation (EC) methods, فإن خوارزميات MAs تهتم باستغلال جميع المعرفة المتاحة حول المسألة قيد الدراسة. وهي نقطة تم اهمالها لزمن طويل ضمن الخوارزميات التطورية EAs .

dual-evolution-system

نتابع الآن شرحنا لخوارزمية Memetic algorithm

قالب خوارزمية MA

The MA search template

كما ذكرنا سابقا, فإن خوارزمية MAs تحاول مزج عدة مفاهيم من عدة تجرييبات وخوارزميات مثل EAs, SA -على سبيل الذكر وليس الحصر مع بعضها البعض.

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

إن MAs وبشكل مشابه لخوارزميات EA قائمة بشكل اساسي على التجمع. وهذا يعني بأن الخوارزمية تحافظ على تجمع Population من الحلول الخاصة بالمسألة قيد المعالجة.  ذلك يعني بأن التجمع يحوي على عدة حلول مقترحة بآن واحد.

كل حل من هذه الحلول هو بمثابة فرد ضمن التجمع. وهو عبارة عن حل مؤقت للمسألة قيد الدراسة.

وتخضع هذه الحلول لعمليات المنافسة والتعاون المتبادل بطريقة تشبه الأنماط السلوكية للكائنات الحية من نفس النوع

ولزيادة توضيح هذه النقطة، من الضروري أولا الاطلاع على قالب مبدئي high-level template  للحدث الاساسي ضمن التجمع في خوارزمية MA.

الترميز الاساسي لخوارزمية MA ادناه عبارة عن ترميز عام جدا وغير تفصيلي.

كما هو موضح بالشكل ادناه

MA high-level template.JPG

كما هو واضح من قالب الخوارزمية الاساسي, فإن كل جيل يتألف من مجموعة محدثة – معدل عليها – من العناصر, التي يؤمل بأن توصل إلى افضل الحلول للمسألة قيد الدراسة.

هنالك ثلاث عناصر اساسية في الخطوة المتعلقة بتشكيل التجمع:

  1. الاختيار selection
  2. اعادة الانتاج reproduction
  3. الاستبدال replacement

الاختيار selection

ntse-selection-procedure.jpg

وهو يمثل المكون الاول, وبدوره مسؤول ( بالتعاون مع مرحلة الاستبدال replacement stage ) عن جوانب المنافسة بين العناصر – الافراد – الموجودة ضمن التجمع.

تتم عملية الاختيار هذه عبر الاستفادة من المعلومات التي يوفرها تابع توجيه محدد ad hoc guiding function  ( يسمى بتابع الملائمة fitness function بعرف مصطلحات الخوارزميات التطورية).   حيث يتم قياس مدى جودة الافراد ضمن التتجمع, وبالتالي يتم اختيار عناصر محددة لاعادة الانتاج وذلك اعتمادا على قياس مدى جودتها.

 

تتم عملية الاختيار هذه بعدة طرق. احد اشهر التقنيات المستخدمة تعتمد على :

  • تابع الملائمة او الجودة fitness function ( حيث تزداد احتمالية اختيار فرد كلما ازدادت جودته او ملائمته).
  • الاعتماد على rank-based methods اي تعتمد على ترتيب الفرد ضمن التجمع. بحيث تزداد احتمالية اختيار فرد محدد على موقعه ترتيبه ضمن التجمع بعد ترتيب كافة العناصر ضمن التجمع.
  • طرائق تعتمد على المسابقة Tournament-based methods: حيث يعتمد اختيار الافراد على اساس التنافس المباشر ضمن مجموعات جزئية من الافراد الموجودين ضمن التجمع

 

 الاستبدال Replacement  

عملية الاستبدال مرتبطة بشكل وثيق بجانب المنافسة المذكور سابقا.
ويحرص هذا المكون – الاستبدال – على الحفاظ على حجم ثابت للتجمع population.   ومن اجل القيام بذلك يتم استبدال الافراد من التجمع الاقدم, بالافراد الجدد – المنتجين حديثا ( المنتجين خلال مرحلة اعادة الانتاج reproduction stage).

عملية الاستبدال تقوم على اساس خواص محددة.  على سبيل المثال: عادة ما يتم ذلك عبر اختيار الافراد الافضل ( تبعا الى قيمة تابع الملائمة fitness function) من كل من التجمعين الجديد والحالي ( تدعى هذه الاستراتيجية بالتبديل باسم “plus”).ا

هنالك طريقة اخرى, حيث يتم اختيار العناصر الافضل من الجيل الجديد ويتم ادخالهم ضمن التجمع عبر استبدالهم اسوء العناصر الموجودة فيه ( تدعى هذه الاستراتيجية باسم “comma”)

 

مرحلة اعادة الانتاج reproduction stage

ربما كان الجانب الاكثر اثارة للاهتمام خلال عملية توليد الجيل تكمن في مرحلة اعادة الانتاج reproduction phase.

خلال هذه المرحلة ننشأ الافراد الجدد individuals عبر الاستفادة من الافراد الموجودين. يتم ذلك عبر استخدام مجموعة من العمليات الخاصة باعادة توليد افراد جديدة.  يمكن استخدام وتطبيق اكثر من عملية واحدةoperator  بهدف توليد الافراد الجدد في خوارزمياتMA  – كما هو موضح بالشكل ادناه.

ومع ذلك, فإن الوضع الأكثر شيوعا ينطوي على استخدام اثنين فقط من العمليات, الا وهي التالية:

  1. الدمج او اعادة التركيب recombination
  2. الطفرة mutation

1.2procedure generate new population.JPG

parent and childrenعملية اعادة التركيب او الدمج recombination  عبارة عن عملية تمثل عملية التعاون المتبادل بين عدة افراد individual  ( عادة اثنين منهم, ولكن ممكن القيام بالعملية مع عدد اكبر من الافراد).

ويتم ذلك من خلال بناء افراد جدد باستخدام المعلومات الواردة في عدد من الاباء المختارين.

 

ملاحظة:

يطلق مصطلح offspring على الافراد الناتجين من عملية اعادة التركيب recombination.

 

تسمى عملية اعادة التركيب recombination  باسم عملية الارسال transmitting في حال كان الافراد الناتجين offspring من عملية اعادة التركيب مكونين بشكل كامل من المعلومات التي تم اخذها من والديهم.

 

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

عادة يستخدم التصالب crossover بهدف تحقيق  عملية اعادة التركيب  recombination .

فيما يلي عدة امثلة على عمليات ارسال transmitting من خلال عمليات التصالب احادي النقطة single-pint crossover او التصالب الموحد uniform crossover .

Fig-2-Crossover-single-point-Source-43.png

توضح الصورة ادناه اشكال التصالب المذكورة انفا

Fig-6-Illustration-of-examples-of-one-point-two-points-and-uniform-crossover-methods.png

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

 

يقال عن عامل اعادة تركيب recombination operator  بأنه properly assorting – مشكل صحيح ان جازت الترجمة- اذا وفقط اذا استطاع ان ينتج احفاد يحملون اي تركيبة من الصفات المتوافقة الماخوذة من الأباء.
ويقال عن عملية التشكيل assortment بأنها ضعيفة weak في حال كان من الضروري انجاز عدة عمليات اعادة تشكيل recombination ضمن الفرد الناتج offspring من اجل تحقيق التوافق المذكور اعلاه.

 

يتضمن الشرح الذي ذكرناه عن عملية اعادة التركيب عدة مفاهيم مثيرة للاهتمام, مثل مفهومي

  • الصفات المرتبطة related features
  • التعاون cooperation

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

الطفرة Mutation

من وجهة نظر كلاسيكية – على الاقل في مجال الخوارزميات الجينية GA – فإن هذه العملية الثانية – الطفرة mutation – تضيف باستمرار مواد جديدة الى التجمع, ولكن بمعدل منخفض ( والا سوف تتحول عملية البحث الى ما يشبه عملية المشي العشوائي ضمن فضاء الحل).  قد لا يوافق رودا البرمجة التطورية Evolutionary-programming على هذا الوصف للطفرة, حيث يدعون بأن للطفرة دور مركزي.dna mutation.png

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

الخلاصة, فإن عملية الطفرة تقوم بتوليد حل جديد وذلك عبر تعديل حل موجود.

يمكن للتعديل ان يكون عشوائيا – وهي الحالة الغالبة – او من الممكن ان يُطرح مع معلومات المسألة المطلوب معالجتها بحيث يحيز البحث الى اماكن جيدة من فضاء  البحث.

——————————-

سنتوقف عند هذا القدر ضمن هذه الحلقة, لنتابع ان شاء الله في حلقات قادمة المزيد عن استراتيجية وخوارزمية Memetic algorithm.

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

مع تحيات

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

 

الترجمة المصطلح
الخوارزميات التطورية Evolutionary algorithms – EA
الامثلة Optimization
البحث Search
محاكاة التلدين Simulated annealing – SA
التجريبيات metaheuristics
التطور الثقافي cultural evolution
جينات genes
ميم meme
طرائق الحساب التطورية evolutionary  computation (EC) methods
خوارزميات التقريب approximation algorithms
تقنيات البحث المحلي local search techniques
خوارزميات ميماتيك Memetic algorithms – MAs
تجمع Population
فرد ضمن التجمع Individual – agent
الاختيار selection
مرحلة الاستبدال replacement stage
تابع الملائمة Fitness function
التصالب احادي النقطة Single point crossover
التصالب crossover
عامل اعادة تركيب recombination operator
اعادة تركيب او دمج recombination
الصفات features
عتبة threshold
منهج احتمالي probabilistic approach
ارسال transmitting

 

 

Clever Algorithms: Nature-Inspired Programming Recipes

http://www.cleveralgorithms.com/nature-inspired/physical/memetic_algorithm.html

1

A study on the use of “self-generation” in memetic algorithms
N Krasnogor, S Gustafson – Natural Computing, 2004 – Springer

2

New Optimization Techniques in Engineering  – Chapter 1 : Memetic Algorithms
http://www.lcc.uma.es/~ccottap/papers/IntroMAs.pdf

3

A Gentle Introduction to Memetic Algorithms
Pablo Moscato

Departamento de Engenharia de Sistemas,

Faculdade de Engenharia Eletrica, Universidade Estadual de Campinas,

Carlos Cotta

Departamento de Lenguajes y Ciencias de la Computacion,

Escuela Tecnica Superior de Ingeniera Informatica, Universidad de Malaga,

4

Handbook of Bioinspired Algorithms and Applications
Edited by Stephan Olariu & Albert Y. Zomaya

5

https://www.quora.com/Whats-the-difference-between-memetic-algorithm-and-genetic-algorithm

6

 

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

أضف تعليق

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/

 

, , , , , , , ,

أضف تعليق

الحلقة: 1 – مقدمة عن خوارزمية Memetic Algorithm MA

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

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

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

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

وضمن هذه السلسلة الجديدة سنتطرق اليوم الى خوارزمية:

MA = Memetic Algorithm

mematic algorithm

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

 

مقدمة Introduction

بالعودة الى اواخر الستينيات, وبداية السبعينيات, نجد ان عددا من الباحثين كانوا قد اسسوا البداية لما يعرف الان بالخوارزميات التطورية evolutionary algorithms (EAs).

ضمن ما يقرب الاربعة عقود, كان جل اهتمام الباحثين ينصب على موضوعي البحث search  والامثلة optimization  وذلك على صعيد كل من العلوم التطبيقة والنظرية.

وقد تطورت هذه النظريات ليثبت بعضه فائدته في حيث يثبت البعض الاخر عدم فائدته.

وكان هذا هو الحال ايضا فيما يتعلق ببعض التقنيات المشابه مثل:

  • simulated annealing – محاكاة التلدين
  • Tabu search

وقد القي مصطلح “التجريبيات” metaheuristics على هذه المجموعة من التقنيات.

في اواخر الثمانينيات ظهر مصطلح “خوارزميات  Memetic algorithms (MAs) للوجود.

وكان يشير الى مجموعة – عائلة – من التجريبيات metaheuristics التي حاولت مزج عدة مفاهيم – كانت فيما سبق منفصلة – تحت اطار واحد.

هذه المجموعة  الجديدة اصبحت تشمل على سبيل المثال: الخوارزميات التطورية EAs و محاكاة التلدين Simulated annealing SA

سبب التسمية

Questionmark.pngاما كلمة “Memetic”  فهي مشتقة من عبارة “Meme” وقد صاغ الاسم الدكتور R. Dawkins.

وقام بهذه التسمية بهدف الدلالة على وجود شيء مماثل للجين gene في سياق التطور الثقافي ايضا cultural evolution

 

مقتبس من كلام R. Dawkins:
“هنالك عدة أمثلة على الميمات memes الا وهي الألحان، والأفكار، عبارات الصيد، والموضات الملابس، وطرق صنع الأواني أو بناء الأقواس.
  تماما كما تنتشر الجيناتgenes  نفسها في تجمع الجينات عن طريق القفز من الجسم إلى الجسم عن طريق الحيوانات المنوية أو البيض، كذلك الميمات memes تنشر نفسها في تجمع ميمي من خلال القفز من الدماغ إلى اخر عن طريق ما يعرف بعملية التقليد “.

 

ويوضح الاقتباس أعلاه الفلسفة المركزية لخوارزميات مMAs : التحسين الفردي بالإضافة إلى التعاون الجماعي بين السكان.

بشكل عام – وكما شرحنا في البداية عن مقاربة خوارزمية MA للخوارزميات الجينية من حيث الشبه والاختلاف – فإننا نجد بأن خوارزميات  Memetic algorithms تبني ثنائية للتطور الجيني والثقافي مع بعضهم البعض, وبذلك تسمح بنقل واختيار selection, وراثة inheritance  والتعديل على الميمات mems بالاضافة الى الجينات genes.

dual-evolution-system

وكما كان الحال بالنسبة للخوارزميات التطورية الكلاسيكية AEs , فقد مرت خوارزميات MAs  باوقات أولية صعبة، ولكنها أصبحت الآن ذات شعبية متزايدة، كما قد يتحقق القارئ من ذلك من خلال إلقاء نظرة سريعة على انجازات وتطبيقات هذه الخوارزمية التي سنذكرها في حلقات قادمة ان شاء الله. 😂

وكما سنرى بان هذه الخوارزمية ايضا تستخدم كجزء ضمن بعض انواع الخوارزميات – غير المذكورة اعلاه . سنتحدث عن هذه النقطة فيما بعد.

والآن, بالاضافة للتعريف السابق لخوارزميات Memetic algorithms , بإمكاننا القول بأن MA عبارة عن استراتيجية بحث حيث تقوم مجموعة من العناصر الامثلية ضمن تجمع ما بالتعاون والتنافس.

كما تحدثنا سابقا, سنجد بأن خوارزميات MAs تشكل موضوعا ساخنا هذه الايام ضمن خووارزميات الذكاء الصناعي AI, وذلك بسبب نجاحها الواضح في حل العديد من مسائل الامثلة الصعبة hard optimization problems.

احد الميزات التي سبب هذه الشهرة والنجاح لخوارزميات MA هي التالية:

على عكس طرائق الحساب التطورية التقليدية traditional evolutionary  computation (EC) methods, فإن خوارزميات MAs تهتم باستغلال جميع المعرفة المتاحة حول المسألة قيد الدراسة. وهي نقطة تم اهمالها لزمن طويل ضمن الخوارزميات التطورية EAs .

يتم تحقيق استغلال المعرفة المتاحة للمسألة قيد الدراسة ضمن خوارزميات MAs عبر دمج العديد من التقنيات مثل: التجريبات, خوارزميات التقريب approximation algorithms,  تقنيات البحث المحلي local search techniques…

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

 

باختصار, فإن خوارزمية MA عبارة عن خوارزمية هجينة, تجمع سلوكيات الخوارزميات التطورية EA من حيث قاعدة البحث العام, وبين تقنيات وتجريبات البحث المحلي local search heuristics techniques.

Diagrammatic representation of MA

Diagrammatic representation of MA

الهدف الاساسي من مثل هذه التركيبة الهجيينة هو مايلي:

  • تسريع عملية البحث وايجاد النتائج الافضل, تلك النتائج التي قد تستغرق العملية التطورية في خوارزميات EA وقتا طويلا للوصول اليها
  • او بهدف الحصول على حلول قد يكون من غير الممكن الحصول عليها في حال اعتمدنا على الطريقة التطورية evolution method لوحدها, او في حال اعتمدنا على طرائق البحث المحلي لوحدها.

ومما سبق نجد بأن MA عبارة عن:

Global-local search hybrids

سنلاحظ ايضا فيما بعد بأن اغلب خوارزميات MA تستخدم تجريبات البحث المحلي heuristic local search بدلا من غيرها من الطرق المتاحة.

————————-

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

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

مع تحيات

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

الترجمة المصطلح
الخوارزميات التطورية Evolutionary algorithms – EA
الامثلة Optimization
البحث Search
محاكاة التلدين Simulated annealing – SA
التجريبيات metaheuristics
التطور الثقافي cultural evolution
جينات genes
ميم meme
طرائق الحساب التطورية evolutionary  computation (EC) methods
خوارزميات التقريب approximation algorithms
تقنيات البحث المحلي local search techniques
خوارزميات MA Memetic algorithms – MAs
تجمع Population
فرد ضمن التجمع Individual – agent
الاختيار selection
مرحلة الاستبدال replacement stage
تابع الملائمة Fitness function
التصالب احادي النقطة Single point crossover
التصالب crossover
عامل اعادة تركيب recombination operator
اعادة تركيب او دمج recombination
الصفات features
عتبة threshold
منهج احتمالي probabilistic approach

 

References

Clever Algorithms: Nature-Inspired Programming Recipes

http://www.cleveralgorithms.com/nature-inspired/physical/memetic_algorithm.html

1

A study on the use of “self-generation” in memetic algorithms
N Krasnogor, S Gustafson – Natural Computing, 2004 – Springer

2

Memetic Algorithms
http://www.lcc.uma.es/~ccottap/papers/IntroMAs.pdf

3

A Gentle Introduction to Memetic Algorithms
Pablo Moscato

Departamento de Engenharia de Sistemas,

Faculdade de Engenharia Eletrica, Universidade Estadual de Campinas,

Carlos Cotta

Departamento de Lenguajes y Ciencias de la Computacion,

Escuela Tecnica Superior de Ingeniera Informatica, Universidad de Malaga,

4

https://www.quora.com/Whats-the-difference-between-memetic-algorithm-and-genetic-algorithm

5

 

, , , , , ,

أضف تعليق

4: Angular2 – Architecture الهيكلة والبنية

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

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

اما في هذه الحلقة فسوف نتحدث عن البنية الاساسية لتطبيق angular 2

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

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

الموديول Module:

تستخدم  الموديول module  في angular 2  بهدف وضع حدود منطقية ضمن التطبيق.

مثلا بدل من وضع الكودل كله كجزء واحد ضمن التطبيق, يمكن عبر بناء موديول module منفصلة لكل فعالية ضمن التطبيق.

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

استخدم Visual Studio code – او اي محرر اخر – لفتح الملف التالي:
Demo -> app ->app.module.ts

يعرف هذا بالملف باسم صف الموديول الجذري root module calss.

root_module_class.jpg.png

سيظهر لك الكود التالي ضمن الملف:

app.module.ts

دعونا نناقش كل سطر ضمن الكود بالتفصيل:

  • عبارة الاستيراد Import تستخدم لاستحضار فعاليات اخرى من الموديولز الموجودة.
    وبذلك فإن اول ثلاث عبارات للاستيراد import مخصصة لاحضار الموديولز التالية: NgModule, BrowserModule, AppComponennt
  • عبارة “NgModule”  فإنها تستخدم لتحدد عدد من الخيارات الا وهي :
    imports, declarations, bootstrapping
  • “BrowserModule”فإنه ضروري من اجل اي تطبيق angularمخصص للويب
  • خيار “bootstrap” يخبر angular عن المكون component الذي يجب سيكون بوابة التطبيق

 

بشكل عام, فإن كل موديول module مؤلف من الأقسام التالية:

  • “Bootstrap array”: عبارة عن مصفوفة, تستخدم لاخبار angular عن المكونات components التي يتوجب تحميلها لان خدماتها وفعالياتها مطلوبة اثناء عمل التطبيق.
  • “Export array” : عبارة عن مصفوفة, تستخدم بهدف تحديد المكونات components المراد تصديرها, بحيث يصبح من الممكن استخدامها عبر موديول اخرى.
  • “Import array” : عبارة عن مصفوفة, مشابة لمصفوفة التصدير export array, ولكنها تستخدم بهدف استيراد فعاليات من موديولز اخرى.

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

اما الان فسوف ننتقل للحديث عن هيكلية وبنية angular 2.

 

هيكلية وبنية Angular 2 Architecture

الشكل التالي يظهر صورة تشريحية لتطبيق angular 2.

كل تطبيق يتالف من مكونات components.

كل مكون component عبارة عن جزء منطقي من الكود يحوي على فعالية ما ضمن التطبيق.

كما ان هنالك طبقة الخدمات services layer, والتي تستخدم بهدف مشاركة الفعاليات functionalities  بين المكونات components.

 

anatomy.jpg.png

بنية المكون Component Structure  

فيما يلي تشريح لبنية المكون component  ضمن angular 2.

يتألف كل مكون من العناصر التالية:

  • “Class”: وهو عبارة عن صف برمجي, مماثل لاي صف قد يتواجد ضمن كود جافا او سي. وبالتالي كالمعتاد فإنه يتألف من خصائص وتوابع properties and methods.
  • “Metadata”: تستخدم بهدف توسيع فعالية الصف class .
  • “Template”: تستخدم بهدف تحديد جزء html الذي سيتم عرضه ضمن التطبيق

componet.jpg.png

فيما يلي مثال على كود لاحد المكونات component.

component code example.JPG

يتكون كل تطبيق من مجموعة موديول.

بالنسبة لتطبيق angular 2 , فإنه بحاجة لان يكون هنالك موديول جذر واحد Angular root module.

كل موديول جذر root module يمكن ان يحوي على اكثر من مكون واحد component بهدف توزيع الفعاليات ضمن التطبيق.

model - component functionality.jpg

فيما يلي مثال على موديول جذر root module.

root module example.JPG

كل تطبيق مكون من مجموعة من الموديول modules, وكل موديول module  له ميزة خاصه ضمن التطبيق.

كل موديول يمكن ان يحوي على عدة مكونات component بهدف فصل وتوزيع الفعاليات ضمن التطبيق.

each_application.jpg.png

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

لنتابع بالحلقة القادمة ان شاء الله بقية المفاهيم والشروح عن المركبات الاساسية وبنية عناصر angular 2.

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

 

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

 

المراجع:

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

, , , , , , ,

أضف تعليق

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/

المراجع:

  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/

 

 

, , , , , ,

أضف تعليق

1: مقدمة Angular2

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

وكما وعدناكم سنعود مع سلسلة من الحلقات التعليمية التي سنتطرق فيها للحديث عن تقنيات برمجة تطبيقات الموبايل باستخدام HTML5 مع AngularJs

وكبداية ستكون السلسلة الاولى متعلقة بAngularJs2

نعم قد طرحنا فيما سبق سلسلة عن angularJs فما الاختلاف الآن!

الفارق هو اننا سنتكلم ضمن هذه السلسلة عن اصدار جديد من angular الا وهو الاصدار الثاني angularJs2

ماهو Angular 2 ؟

angular2

عبارة عن اطار عمل جافا سكريبت مفتوح المصدر open source   يستخدم لبناء تطبيقات الويب باستخدام HTML & JS.

تم بناء angular 2  من قبل مبرمجي غوغل.

الهدف من بناء اطار العمل هذا هو التغلب على التحديات التي تواجه المبرمج عند برمجة تطبيقات الصفحة الواحدة Single page applications.

تم اصدار النسخة الاولية من اطار العمل في تشرين الاول 2010

سنتطرق ضمن هذه السلسلة التعليمية الى عدة جوانب مختلفة من اطار عمل Angular 2 التي تتضمن مايلي:

  • اساسيات اطار العمل basics of the framework
  • الاعدادات Setup of Angular 2
  • التعامل مع الجوانب المختلفة الموجودة في اطار العمل
  • امثلة تطبيقية مختلفة
  • في حلقات متقدمة سيتم الحديث عن
    • الواجهات Interfaces
    • المكونات المتداخلة nested components
    • الخدمات services
    • التوجيه routing
    • Modules
    • المصفوفات arrays

ملاحظة:

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

المتطلبات

لكي تستطيع المتابعة معنا والاستفادة من هذه السلسلة, يتوجب عليك ان يكون لديك المام باساسيات تطوير الويب وجافا سكريبت, وذلك لكون اطار عمل angular 2  مبني على اساس اطار عمل javascript.poc-checklist-blog

ميزات Angular 2

فيما يلي سندرج اهم الميزات الموجودة ضمن Angular 2

  • Components – المكونات: ركزت النسخ الاولية من angular على المتحكمات controllers, ولكن الان مع النسخة الجديدة من angular قد تحول التركيز الى المكونات components بدلا من المتحكمات controllers.
    كما سنرى فيما بعد فإن ال components تساعد على بناء تطبيقات سهلة الصيانة والتعديل على مر الزمن
  • TypeScipt: تم بناء النسخة الحديثة من angular على اساس typescript.
  • Services – الخدمات: عبارة عن مجموعة من الاكواد البرمجية التي يمكن مشاركتها عبر عدة مكونات components ضمن الطبيق application.
    على سبيل المثال: في حال كان لديك مكون خاص بالمعطيات data components يستخدم لاحضار المعطيات من قاعدة المعطيات, عندها بإمكانك تحويله الى خدمة مشتركة shared service التي بالامكان استخدامها عبر عدة تطبيقات.
  • بالاضافة إلى ان angular 2 تتمتع بإمكانيات افضل من اصداراتها السابقة من حيث معالجة الاحداث event-handling, وتتميز بدعم افضل لاجهزة الموبايل.

image why angular 2

مم يتألف angular 2

يـتألف من المركبات التالية:

  • Modules: وتستخدم لتقسيم التطبيق الى عدة قطع برمجية. كل قطعة برمجية – او module– الهدف منه انجاز مهمة محددة.
  • Components: تستخدم بهدف تجميع ال modules مع بعضها البعض.
  • Templates– القوالب : تستخدم لتحديد واجهات العرض views ضمن تطبيق angular js
  • Metadata: تستخدم لاضافة المزيد من المعطيات الى angular class– سنطرق لشرحها فيما بعد
  • Service: تستخدم لبناء مكونات يمكن مشاركتها عبر التطبيق ككل.

سنتحدث بالتفصيل عن كل مركب من مركبات angular 2 في الحلقات القادمة من هذه السلسلة التعليمية7things2angular2

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

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

 

الترجمة المصطلح
مفتوح المصدر Open source
جافا سكريبت Java script
اطار عمل framework
تطبيقات الصفحة الواحدة Single page application
المكونات Components
المتحكمات Controllers
الخدمات services
تطبيق application
واجهات العرض Views

المراجع:

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

, , , ,

أضف تعليق