مقدمة لإطار العمل Ionic 2 لبرمجة تطبيقات الموبايل

Ionic 2 هو اسم الإصدار الجديد من إطار العمل Ionic لبرمجة تطبيقات الموبايل الهجينة Hybrid والعابرة للمنصات Cross-Platform. في هذا المقال سنتحدث عن أبرز مستجدات هذا الإصدار مع ذكر أبرز النقاط التي يختلف فيها عن الإصدار القديم Ionic 1.

هذا وسأحاول مساعدتك، عزيزي المطور، على اتخاذ قرارك بشأن ما إذا كان يجب عليك استخدامه في مشروعك التالي أم لا.

ما هو Ionic ؟

Ionic هو إطار عمل لبناء تطبيقات الأجهزة المحمولة باستخدام تقنيات الويب HTML، CSS و JavaScript، حيث يضع في متناول المطور مجموعة من المكونات الرسومية UI Components والدوال Functions اللازمة لعمل تطبيقات موبايل جميلة واحترافية.

إطار العمل Ionic مبني على منصة كوردوفا Cordova، فلا يمكن تطوير تطبيقات الموبايل بواسطة Ionic فقط لأن الأخير يهتم فقط بالواجهات الرسومية للتطبيق مع الإعتماد على إطار العمل المعروف Angular في كتابة أكواد الجافاسكربت وتنظيمها.

التطبيقات المطورة باستخدام Ionic وCordova تعتبر هجينة Hybrid أي أنها تعمل على ال Webview داخل الجهاز، بعبارة أخرى ليست تطبيقات أصلية Native.

ما الجديد في Ionic 2  ؟

في هذا الجزء سنتناول أبرز المتغيرات والمميزات الجديدة التي جاء بها  إطار العمل Ionic 2.

Ionic 2 لم يعد يستخدم لتطبيقات الموبايل فقط

في وقت سابق، كان Ionic 1 يتخصص في المساعدة على تطوير تطبيقات الموبايل فقط، لكن مع قدوم الإصدار 2 فإن هذه الحقيقة قد تغيرت.

Ionic 2 أصبح يدعم تطوير تطبيقات الويب المتقدمة Progressive Web Apps وكذلك تطبيقات سطح المكتب بالإعتماد على إطار العمل Electron.

الإعتماد على Angular 2 و Typescript

Ionic 2 بات يعتمد على الإصدار الجديد من إطار العمل Angular الخاص بلغة الجافاسكربت، هذا يعني أنك مطالب بتعلم Angular 2 (وليس Angular 1 كما كان عليه الحال في إصدار Ionic 1) للتمكن من تطوير التطبيقات باستخدام Ionic 2.

بجانب Angular 2، يعتمد Ionic 2 كذلك على لغة تايب سكريبت، هذه الأخيرة تم تطويرها من طرف شركةمايكروسوفت حول لغة البرمجة جافاسكربت من أجل مساعدة المطورين على كتابة أكواد جافاسكربت ذات جودة عالية. أي أننا في الأخير نحصل على كود جافاسكربت اعتيادي ما يعني أنه مازال يمكنك بناء تطبيقات Ionic باستخدام الجافاسكربت الخام Vanilla JavaScript، ولكن ينصح دائما باستخدام TypeScript مع أنغولار لأنه مدعوم بشكل رسمي من طرف هذا الإطار، كما أنه يقوم بتسهيل عدد من المهام على المطور ويقوم بتحسين جودة الشيفرة المصدرية.

Syntax

ذكرنا أعلاه أن Ionic 2 يعتمد على إطار العمل Angular 2، والأخير جاء بتغييرات جذرية في طريقة كتابة الجافاسكريبت وكذلك بنية القوالب Templates.

هذه أمثلة لعدد من الإختلافات بين قوالب Ionic 1 و Ionic 2 :

الإستماع للأحداث Listening to events

1 2 3 4 5

<!--ionic 1--> <button on-tap="onTap()" class="button">Test</button>   <!--ionic 2--> <button (tap)="onTap($event)">Test</button>

طريقة استخدام نماذج البيانات أو Models

1 2 3 4 5

<!--ionic 1--> <input ng-model="email" />   <!--ionic 2--> <input [(ng-model)]="email" />

الحلقات التكرارية 

1 2 3 4 5 6 7 8 9

<!--ionic 1--> <li ng-repeat="item in list">     {{ item.name }} </li>   <!--ionic 2--> <li *ngFor="let item of list">     {{ item.name }}     </li>

بنية المجلدات

ليس هناك اختلافات جذرية في البنية الشجرية للمجلدات بين Ionic 1 و Ionic 2، هذا لأن Ionic يبقى معتمدا على منصة اسمها Cordova.

الإختلاف الوحيد هو في الجانب المتعلق بالشفرة المصدرية للمشروع، وهذا راجع كما قلنا للإنتقال من Angular 1 ل Angular2

في السابق كنا نمضي معظم الوقت داخل المجلد www ، بينما في Ionic 2 تم استحداث مجلد جديد اسمهsrc  وفيه يمضي المطور جل وقته. في هذا المجلد تتواجد كافة الملفات الخاصة بالمشروع وفي كل مرة يتم إحداث تغيير على مستوى هذه الملفات، يقوم Ionic بإجراء عملية Compiling عليها ونقلها للمجلدwww/build  حتى تتم قراءتها من قبل المتصفح أو المحاكي.

الجميل كذلك مع هذه البنية الجديدة، أن الصفحات يتم تضمينها داخل المجلد src/pages  وكل صفحة بالمجلد الخاص بها ونجد بداخله ملفات الجافاسكربت، HTML وCSS الخاصة بهذه الصفحة.

هذا التنظيم لم يكن في الإصدار السابق، حيث كان المطور يجمع كافة ملفاته داخل المجلد www  ويتولى بنفسه تنظيمها بطريقته الخاصة.

أدوات جديدة

Ionic 2 جاء كذلك مع عدد من الأدوات الجديدة التي تجعل المطور يستمتع أثناء عمله.

المولدات أو Generators

عديدة هي المولدات التي يضعها Ionic 2 بين يدي المطور، من أهمها المولد الذي يمكن من إنشاء صفحة جديدة في المشروع :

1	ionic generate page about

تنفيذ هذا الأمر سيؤدي لإنشاء الملفات الخاصة بصفحة about  داخل المجلد src/pages/about، هذه الملفات هي :

• about.html
• about.ts ( حيث .ts  هو الإمتداد الخاص بملفات Typescript).
• about.css

الإبلاغ عن الأخطاء

جاء Ionic 2 بنظام جديد للإبلاغ عن الأخطاء Error Reporting. هذا النظام يقوم بإظهار الأخطاء، التي تطرأ أثناء عملية التطوير، في واجهة التطبيق نفسه وليس في نافذة الأوامر فقط كما تعودنا في السابق.

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

القولبة Theming

في السابق، كانت تطبيقات Ionic 1 تظهر بنفس المظهر على جميع المنصات (أندرويد، iOS أو ويندوز فون).

لحسن الحظ، جاء Ionic 2 بنظام جديد وذكي حيث يضع بين أيدينا 3 نماذج للقالب الإفتراضي : نموذجMaterial Design خاص بتطبيقات أندرويد، نموذج iOS خاص بتطبيقات آيفون وآيباد ونموذج ويندوز فونخاص بتطبيقات Windows Phone.

هذا يضمن ظهور التطبيق على المنصة المستهدفة بشكل أقرب ما يكون إلى الأصالة التي تتميز بها تطبيقات الموبايل الأصلية Native Mobile Applications.

مكونات جديدة

المكونات هي أجزاء من الواجهات الرسومية في Ionic مثل الأزرار، اللوائح، الحقول النصية إلخ…

عدد كبير من المكونات Components الجديدة تمت إضافتها في الإصدار الجديد Ionic 2، وفي هذا الجزء من المقال سنذكر أهمها.

Action Sheet

مكون Action Sheet هو عبارة عن قائمة من الإختيارات تظهر أسفل الشاشة مع خلفية سوداء وشفافة تملأ الشاشة. يمكن استخدام هذا العنصر كبديل للقوائم في حالات معينة، ولكن لا ينصح باستخدامه للتنقل (Navigation) بين صفحات التطبيق.