خلال السنين القليلة الماضية وبعد اكتساح أندرويد وiOS لسوق اﻷجهزة الذكية والتنامي المهول في طلبات تطوير تطبيقات جديدة، ظهرت الحاجة لابتكار طريقة حديثة أكثر سهولة وأسرع وتيرة في بناء التطبيقات الصغيرة\والمتوسطة، اﻷمر الذي قاد بعض المطوّرين إلى ابتداع مفهوم جديد في عالم تطوير تطبيقات الموبايل وهو “التطبيقات الهجينة (Hybrid Apps)” وهو على العكس من المصطلح “التطبيقات اﻷصيلة (Native Apps)”، فما المقصود بهذيّن المصطلحين؟

التطبيقات اﻷصيلة (Native Apps)

هي تلك التطبيقات التي تُصمم بواسطة بيئة ولغة البرمجة اﻷصلية لنظام التشغيل، فعلى سبيل المثال: يُعتبر التطبيق المُبرمج بواسطة لغة Java على نظام أندرويد “تطبيقًا أصيلًا” ﻷنه بُرمج باللغة الحقيقية (Java) التي يتعامل فيها أندرويد مع التطبيقات بصورة مباشرة، اﻷمر ذاته مع نظام iOS حيث تُعدّ التطبيقات المُبرمجة بواسطة لغتيّ Objective C و Swift تطبيقات أصيلة، والنظام Windows Phone الذي يستعمل لغة سي شارب.

التطبيقات الهجينة (Hybrid Apps)

أمّا التطبيقات الهجينة فهي تلك التي تُصمم بواسطة لغات وتقنيات الويب المختلفة (HTML, CSS, JavaScript,..)، وعلى الرغم من أن التطبيقات اﻷصيلة تتفوّق على الهجينة في اﻷداء والسرعة وبعض مزايا التعامل مع النظام، إلا أن الهجينة قد أحرزت تقدّمًا واضحًا في اﻵونة اﻷخيرة في هذه الناحية، وتتميّز التطبيقات الهجينة بسهولة التطوير مقارنة بالتطبيقات الأصيلة التي تحتاج بعض الجهد، فلوّ أنك لديك معرفة بتقنيات الويب اﻷساسية سوف تكون قادرًا على تعلمها بسرعة، ولذلك ظهرت بعض أُطُر العمل (Frameworks) لتطوير التطبيقات الهجينة ولعلّ أشهرها هو Ionic وNativeScript وReactNative.

ما هو إطار العمل (Framework)؟

مصطلح مشهور جدًا في عالم بناء التطبيقات بصورة عامّة، ويُعرف بأنه مجموعة من المكونات الجاهزة التي يستعملها المطوّر في بناء تطبيقه، فلسنا بحاجة للبدء من الصفر وإعادة اختراع العجلة، توفّر عليك الوقت والجهد والتخطيط وتجعل التطبيق أكثر قابلية للصيانة.

ما هو Ionic؟

آيونيك هو إطار عمل (Framework) مفتوح المصدر، لتطوير تطبيقات الموبايل الهجينة (Hybrid Mobile Apps)، وهو أشهر إطار عمل في هذا المجال نظرًا لسهولته واﻷمر اﻷهم نظرًا لتوثيقه الغنيّ جدًا (Documentation) حيث أن الموقع الرسمي يوفّر شرحًا مبسطًا ورائعًا لكل شيء موجود في آيونيك ويعرض لك معاينة مباشرة ﻷي ميزة تريد تجربتها، عوضًا عن مجتمعه النشط.

أول إصدارة من آيونيك أطلقت منذ بضع سنين وكانت مبنية على إطار العمل Angular.js أما النسخة الحديثة فهي مبنية على إطار العمل Angular وهو إطار عمل جافاسكربت تفاعلي مصمم لبناء تطبيقات الويب ذات الصفحة الواحدة (Single Page Apps)، ويمثّل آنجولار أحد اللبنات اﻷساسية ﻵيونيك، إضافة إلى بيئة Cordova للتواصل مع خدمات النظام اﻷصلية.

ما الفرق بين AngularJs و Angular؟

تعتبر AngularJs هي النسخة اﻷولى من هذا اﻹطار وتسمى كذلك Angular 1 ولكن لاحقًا وبعد صدور النسخ اللاحقة تم تغيير الاسم إلى Angular، والفرق ليس في التسمية فقط، بل هنالك فرق شاسع بين اﻹصدار اﻷول (AngularJS) واﻹصدارات الحديثة (Angular) في كثير من اﻷشياء. أحدث إصدارة من آنجولار حاليًا هي 9.

ما هي تطبيقات الويب وحيدة الصفحة (SPA)؟

ذكرنا أن أنجولار هو إطار عمل جافاسكربت تفاعلي لتطوير التطبيقات ذات الصفحة الواحدة (Single Page Apps)، ولكن ما معنى هذا المصطلح الغريب؟ يعني أن الموقع يبدو وكأنه تطبيق سطح مكتب لذلك يكون سريعا جدًا، حيث عندما تنتقل من قسم إلى آخر في الموقع (أو من صفحة ﻷخرى وأقول صفحات “مجازًا” ﻷن الموقع أصلا يعتبر صفحة واحدة فعليًا! ولكن يتم تقسيمه بصورة داخلية) فإنه يتم عرض الصفحة بصورة فورية وذلك ﻷن كل مكونات الموقع يتم تحميلها كدفعة واحدة “مسبقًا” مما يجعل الموقع مكتمل التحميل تماما عندما تبدأ التصفح فيه.

لتفهم الكلام بصورة أفضل، اذهب موقع SoundCloud وقم بتشغيل أغنية ولاحظ أنك عندما تنتقل من مكان إلى آخر لا يقوم بإعادة تحميل الصفحة كلها واﻷغنية تبقى تعمل ولا تتوقف، وأيضًا اذهب  إلى البريد Gmail وانظر عندما تتنقل بين الرسائل الواردة والصادرة والمسودات وغيرها من اﻷقسام، انظر كيف يتم الانتقال بصورة فورية بدون الحاجة إلى إعادة تحميل الصفحة من جديد. (وكأنه تطبيق سطح مكتب).

مثال آخر، ادخل إلى موقع آنجولار نفسه https://angular.io وابدأ التنقل بين اﻷقسام (Features, Docs, Resources, Events) وغيرها من أجزاء الموقع (باستثناء القسم Blog ﻷنهم وضعوه في صفحة مستقلة)، وانظر كيف يتم الانتقال بشكل فوري بين اﻷقسام وبدون الحاجة إلى إعادة تحميل الصفحة.

آنجولار مصمم بواسطة شركة جوجل، وتوجد أُطُر عمل أخرى منافسة ﻵنجولار مثل Vue.js وأيضا React المقدّم من شركة فيسبوك، إلا أن آنجولار أشهرهم.

ما هي بيئة كوردوفا (Cordova)؟

كوردوفا هو الجسر الذي يربط ما بين تطبيق آيونيك ونظام التشغيل، حيث يقوم بعمل Compile لتطبيقك المكتوب بتقنيات الويب ليجعله يعمل على أنظمة تشغيل الموبايل لتبدو وكأنها مجازًا تتصرف بصورة تطبيقات أصيلة (run natively)، كذلك كوردوفا يحتوي على مئات اﻹضافات التي تتيح لك التواصل مع خدمات النظام مثل الكاميرا والصوت والـ GPS وذلك ﻹضافة المزيد من المزايا والوظائف للتطبيق.

* إن كلًا من آنجولار وكوردوفا مكوّنان أساسيان في إطار العمل آيونيك.

ما هي مميزات التطبيقات الهجينة؟

  • تطبيقك يمكن أن يعمل على أي نظام تشغيل (Android, iOS, WP) أيّ أنه متعدد المنصات”Cross-Platform”، لستَ بحاجة لكتابة نسخة جديدة لكل نظام تشغيل، أما في حالة التطبيقات اﻷصيلة سوف تحتاج لبناء نسخة للأندرويد بالجافا ونسخة أخرى للـ iOS بلغة سويفت أخرى للويندوز فون بلغة سي شارب.
  •  عملية تصميم وبناء التطبيق أكثر سهولة وأقل جهدا.
  • التطبيق أكثر قابلية للصيانة والتحديث.
  • لا يحتاج لمعرفة برمجية قوية.

ما هي عيوب التطبيقات الهجينة؟

  • أقل سرعة من التطبيقات اﻷصيلة.
  • قد تواجه بعض المشاكل في التوافقية، وعدم دعم لبعض الميزات.
  • عملية اختبار التطبيق على المتصفح قد تكون مخادعة عن اختبارها على الهاتف، ﻷن المتصفح لا يعطي النتائج الصحيحة دائمًا، فاﻷمور ستكون مختلفة على هواتف المستخدمين، سترى اختلافا باﻷداء والاستجابة.

أمثلة على تطبيقات بواسطة Ionic

سوف أستعرض قائمة ببعض التطبيقات التي بُرمجت بواسطة إطار العمل آيونيك:

يمكنك مطالعة المزيد من التطبيقات عبر هذه الصفحة والتنقل بين اﻷقسام (TOP APPS, NEWEST, ARCHIVE)

ماذا أحتاج لتعلّم آيونيك؟

  • معرفة مسبقة بـ HTML, CSS, JavaScript (ضروريّ جدًا).
  • معرفة بإطار العمل Angular (مستحسن بشدة).
  • معرفة بلغة TypeScript المبنية على JavaScript (مستحسن بشدة).
  • معرفة بأصول البرمجة الكائنية “OOP” (مستحسن بشدة).

يمكنك تعلّم HTML, CSS, JS من موقع W3Schools، أمّا Angular فيمكن تعلمها من موقعها الرسمي، وبالنسبة للغة TypeScript فهي لا تحتاج وقتًا بالمرة لتعلمها إذا كنتَ تعرف جافاسكربت أمّا OOP فيمكن تعلمها من هذا الموقع.