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

تثبيت إطار العمل أباتشي كوردوفا

يتواجد إطار العمل كوردوفا مثل حزمة في نظام إدارة الحزم الخاص بلغة جافا سكربت Node Package Manager "NPM"، لذا يتوجّب علينا في البداية تثبيت Node.js من خلال زيارة الموقع الإلكتروني لـ Node.js وتنزيل النسخة المتوافقة مع نظام التشغيل، ومن ثمَّ تثبيتها على الحاسوب. يُعَد التثبيت على أنظمة ويندوز سهلًا جدًا من خلال ملف تثبيت البرنامج الذي يُنزّل من الموقع ثم تثبيته على الجهاز، في حين نحتاج لطريقة أخرى في نظام تشغيل Linux من خلال تنفيذ بضعة أوامر في سطر الأوامر، لتثبيت Node.js على Linux، يمكنك الاطلاع على مقالة تثبيت Node.js على نظام أبونتو 18.04، والتي تتحدث بالتفصيل عن هذه النقطة بالتحديد.

يمكن التأكد من نجاح التثبيت ومعرفة الإصدار المثبّت من خلال سطر الأوامر الخاص بنظام التشغيل ويندوز باستخدام الأمر node –v

بعد التأكد من اكتمال تثبيت Nodejs يمكننا الانتقال للخطوة التالية، ألا وهي تثبيت كوردوفا، وذلك من خلال تنفيذ الأمر التالي في سطر الأوامر:

npm install -g cordova

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

لا يستغرق التثبيت كثيرًا من الوقت (بالاعتماد على سرعة اتصال الإنترنت لديك)، وعند اكتماله يمكن كتابة الأمر الموالي لنتأكد من سلامة التثبيت:

cordova help

تُعرض الخيارات المتاحة من خلال هذا الأمر مثل ضبط الإعدادات وإنشاء تطبيق وغيرها من الأوامر المتاحة، والتي نتعرف عليها في المقال القادم، حيث سنتطرق لإنشاء أول تطبيق.

لا تختلف الخطوات في نظامي التشغيل Linux وOS، حيث يمكننا استخدام الأمر التالي مع ملاحظة كتابة sudo قبل تنفيذ الأمر في حال كان المستخدم الحالي محدود الصلاحيات:

   sudo npm install -g cordova

وبهذا نكون قد تمكنًا من تثبيت كوردوفا بخطوتين فقط وبسهولة بالغة.

إنشاء أول تطبيق كوردوفا

يجب أولًا تحديد مسار المجلد الذي يُنشَأ التطبيق فيه، ثم تنفيذ الأمر الذي يُنشِئ تطبيق كوردوفا مع كافة الملفات والمجلدات الضرورية المطلوبة بداخله

cordova create myFirstApp 

بهذا نكون قد نفذنا أمر إنشاء تطبيق جديد اسمه myFirstApp مباشرةً على محرك الأقراص C، وباستعراض محتويات التطبيق الجديد كما نلاحظ في الصورة التالية، نجد بداخله مجلد www والذي بدوره يحتوي مجلدات css وimg، بالإضافة إلى ملف index.html، كما هو الحال مع أساسيات الموقع الإلكتروني التي فصلنا الحديث عنها في المقال السابق، كما يمكننا فتح مجلد التطبيق من خلال برنامج بيئة التطوير VSCode الذي سنتعرف عليه لاحقًا.

تثبيت بيئة التطوير المتكاملة Integration Development Kit

لقد ذكرنا في هذا المقال حتى الآن بعض الخدمات التي تقدمها بيئة التطوير المتكاملة IDK ودورها في مساعدة المطوّر في إنجاز برمجة التطبيقات، وهناك بعض البيئات التي تكون مخصصةً للغة برمجة معينة، ففي حال برمجة التطبيقات الأصيلة باستخدام أندرويد مثلًا؛ فسيستخدم المطوّرون برنامج Android Studio. هناك بعض بيئات التطوير العاملة التي يمكن استخدامها بعد تخصيصها ببعض الإضافات من داخل برنامج بيئة التطوير حسب اللغة التي يعمل عليها المبرمج، وهذه الإضافات يمكن إضافتها لبعض برامج بيئة التطوير مثل Android Studio أو أي برامج تحرير النصوص البرمجية مثل برنامج Visual Studio Code من شركة MicroSoft.

يمكن إنشاء تطبيقات كوردوفا من خلال برنامج Android Studio، لكننا سنحتاج إلى تثبيت إضافة كوردوفا Cordova Plugin لتدعم تطوير تطبيقات كوردوفا، ونظرًا لكون البعض يشتكي من احتياج برنامج Android Studio إلى حاسوب ذي موارد ومواصفات عالية، فلهذا سنختار في هذا المقال استخدام برنامج VS Code، ولتثبيت البرنامج يلزمنا تنزيله من موقع البرنامج visualstudio code، وتنزيل ثم تثبيت النسخة المتوافقة مع نظام التشغيل الذي يستخدمه حاسوبك.

أدوات تطوير البرمجيات Software Development Kit

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

ومن الأمثلة على ذلك حِزمة تطوير برامج أندرويد SDK التي تدعم أنظمة التشغيل الخاصة بالحاسوب مثل Windows وLinux وiOS، وهناك أدوات تطوير أخرى خاصة بنظام ويندوز بكافة إصداراته، وأدوات تطوير نظام التشغيل iOS، وغيرها الكثير.

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

لنبدأ في الجانب العملي الآن، لإنشاء التطبيقات وتشغيلها سنحتاج إلى تثبيت حزم SDK لكل نظام أساسي نرغب في تشغيل التطبيق عليه، وبتنفيذ الأمر التالي يمكننا التحقق مما إذا كانت الحزم المثبتة تفي بالمتطلبات الأساسية لبناء التطبيق:

cordova requirements

وإذا لم تُثبت أيٌّ من متطلبات التطبيق فستظهر مثل هذه الرسالة:

No platforms added to this project. Please use 'cordova platform add <platform>' .

والتي تفيد بضرورة إضافة متطلبات التطبيق، وهو ما سنتعرف عليه الآن بالتفصيل.

تثبيت SDK الخاصة بالنظام المستهدف

تختلف الحِزم البرمجية المطلوبة تبعًا للنظام الي نرغب في تشغيل التطبيق عليه، ونخصص الحديث هنا عن الأدوات المطلوبة لتشغيل التطبيق على نظام أندرويد، ونؤكد على أن الخطوات المطلوبة لتشغيل التطبيق على نظام iOS متشابهة باختلاف الأدوات المطلوبة، ونحتاج هنا لأربع أدوات كما يلي:

1. حزمة التطوير الخاصة بلغة البرمجة جافا Java Development Kit أو اختصارًا JDK، والتي يمكن تحميلها من الرابط الخاص بها على موقعهم الرسمي ثم تثبيتها.
2. حزمة Gradle التي تساهم في تسريع إنشاء التطبيقات، وتُعَد إحدى متطلبات التطبيقات المنشأة باستخدام كوردوفا، ويمكن تثبيتها من الموقع الرسمي لـ Gradle، وللاستزادة من المعرفة عن وظائف Gradle يمكنكم زيارة مقال دليلك الكامل إلى نظام البناء Gradle.
3. حزمة التطوير الخاصة بأندرويد Android SDK Tools التي تُثبّت من خلال برنامج Android Studio الذي يمكن تنزيله من الموقع الرسمي لـ Android Studio، وبعد تثبيت البرنامج يجب الدخول إلى إدارة SDK أين ستظهر لنا عدة خيارات للتنزيل فنختار منهما أولًا SDK Platforms، وهنا يفضل اختيار أحدث إصدار (إلا إذا كنت تنوي التطوير لإصدارات قديمة من منصة أندرويد)، ثم تثبيت Android SDK Platform-Tools كما في الصور الثلاثة التالية:

نختار أولًا SDK Manager

ثم نختار الإصدار الأحدث وننزله.

ثم نختار Android SDK Platform-Tools لتنزيلها.

4. تثبيت جهاز أو أجهزة وهمية Virtual Device بإصدارات مختلفة من نظام أندرويد لتشغيل واختبار التطبيق عليها، ولهذه الخطوة بدائل، إذ يمكن الاستغناء عنها بتوصيل هاتفك مباشرةً على الحاسوب والبدء بتشغيل واختبار التطبيق من خلاله. يمكن الوصول لمدير الأجهزة الوهمية من خلال خيار ADV في إعدادات برنامج Android Studio كما في الصور التالية:

وعند اختيار AVD Manager ستظهر شاشة إدارة الأجهزة الوهمية كما يلي:

وكما هو واضح من الصورة، فإن هذه الخاصية تمكننا من اختيار نوع الجهاز الذي نرغب في محاكاة تشغيل التطبيق عليه، مثل الشاشات الذكية والهواتف والساعات الرقمية والهاتف اللوحي، وبعد اختيار نوع الجهاز - وليكن جهاز الهاتف - ننتقل إلى الخطوة التالية لتثبيت نظام الهاتف كما يتضح في الصورة التالية:

هناك برنامج مستقل لإنشاء الأجهزة الوهمية – بعيدًا عن برنامج Android Studio – يسمى Genymotion، وهو موجه للذين يستخدمون حاسوبًا ذو مواصفات محدودة، هذا البرنامج غير مجاني بالكامل لكنه يفي بالمتطلبات الأساسية لتشغيل واختبار التطبيقات من خلاله.

أما بخصوص تثبيت SDK الخاصة بنظام iOS، فإننا نحتاج هنا إلى نظام iOS الذي نجده مثبتًا على أجهزة Mac، ولا يمكن تطوير تطبيقات لمنصة iOS بسهولة وفعالية إلا من خلال حاسوب Mac. في البداية يجب تثبيت برنامج Xcode وذلك بإحدى الطريقتين، إما من (متجر التطبيقات)، أو من (تنزيلات مطوري Apple) الذي يتطلب التسجيل بعضوية مطور Apple.

الآن وبعد تثبيت SDK حسب نظام التشغيل الذي نستخدمه، سننتقل إلى الخطوة التالية في تجهيز بيئة العمل، وهي إضافة المنصة المراد استخدامها للتطبيق، وهنا سنستخدم الأمر التالي:

cordova platform add android

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

cordova platform add browser

يضيف هذا الأمر بيئة المتصفح للتطبيق كما يتضح من الصورة، حتى تكون فيه إمكانية لتشغيله عبر المتصفح كما أسلفنا في فقرة سابقة.

أما إذا كنا نرغب في إضافة منصة iOS للتطبيق - بعد تثبيت SDK الخاصة بـ iOS-، فإننا ننفذ الأمر التالي:

cordova platform add ios

إضافة متغيرات البيئة

يتعرف نظام التشغيل ويندوز على الحِزم البرمجية المضافة إليه ويمكّننا من استخدام أوامر هذه الحِزم من واجهة سطر الأوامر، وذلك من خلال إضافة قيمة لها في متغيرات البيئة Environment Variables، حيث تُضاف بعض هذه المتغيرات تلقائيًا، بينما يحتاج بعضها إلى إضافتها يدويًا. لمعرفة المزيد من التفاصيل عن متغيرات البيئة يمكنكم الاطلاع على مقال الطّريق نحو فهم مُتغير المسار ‎$PATH، والذي يتحدث عن متغيرات البيئة. يمكن إضافة متغيرات البيئة إلى ويندوز يدويًا من خلال النقر بزر الفأرة الأيمن على أيقونة "هذا الحاسوب This Computer"، واختيار عنصر "خصائص Properties" لتظهر عدة خصائص من بينها خيارات النظام المتقدمة Advanced System Settings ليظهر مربع الحوار التالي:

نختار منه بند "متغيرات البيئة Environment Variables"، ومنها يظهر مربع الحوار التالي:

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

1. عنصر متغيرات البيئة الخاصة بالمستخدم، وهنا نضيف المتغيرات التالية من خلال النقر على زر "جديد New":

• عنصر "JAVA_HOME" ويشير إلى مسار تثبيت JDK.
• عنصر "ANDROIDSDKROOT" ويشير إلى مسار تثبيت SDK.

1. عنصر متغيرات البيئة الخاصة بالنظام، وهنا يجب النقر على المتغير PATH وإضافة عنصرين أحدهما خاص بـ JAVA_HOME والآخر يخص Gradle، كما يظهر آخر عنصرين في الصورة التالية، فكلاهما يشير إلى مسار التثبيت الخاص بهما.

بناء التطبيق

كما أسلفنا، فإن كوردوفا – افتراضيًا – ينشئ التطبيق على شاكلة تطبيقات الويب، والذي تكون صفحة البداية فيه باسم index.html بداخل مجلد يحمل اسم www، مع الأخذ بالحسبان أي تخصيصات تفاعلية من خلال ملف JavaScript أو تنسيقات من ملف CSS. ولبناء التطبيق نستخدم الأمر التالي:

cordova build

كما يمكننا التحكم في اللاحقة بتخصيص بناء التطبيق لمنصة معينة مثل أندرويد أو iOS كما في المثال التالي:

cordova build android

بتنفيذ أمر بناء تطبيق كوردوفا لمنصة أندرويد ستكون النتيجة في واجهة سطر الأوامر كما يلي:

تشغيل التطبيق لأول مرة

نأتي الآن لأهم نقطة في هذا المقال، وهي أننا بعد الانتهاء من التجهيزات اللازمة لبناء التطبيق، فإننا نصل لنقطة النهاية ( نهاية التجهيزات وبداية الإعدادات والخيارات اللامحدودة ) ألا وهي تشغيل التطبيق.

توفّر أدوات تطوير البرمجيات SDK محاكيًا يمكّن المطوّرين من تشغيل التطبيق واختبار تفاعله مع مميزات الهاتف المحمول، وفي حال استخدام الأجهزة الوهمية – التي أشرنا لها سابقًا – فبإمكاننا الوصول إليها من خلال تنفيذ الأمر التالي:

cordova emulate android

بتنفيذ الأمر السابق سيعمل المحاكي المتاح - وفي حالتنا هذه يعمل محاكي نظام أندرويد - ويُعرض التطبيق عليه كما هو موضح في الصورة التالية:

أما إذا كنت تفضل أن توصل هاتفك المحمول بالحاسوب لتشغيل التطبيق عليه ثم تنفيذ الأمر:

cordova run android

تجدر الإشارة هنا -فيما يختص بالهواتف العاملة بنظام أندرويد- إلى ضرورة تجهيز الهاتف المحمول لإمكانية تشغيل التطبيق عليه، وذلك من خلال الانتقال إلى الإعدادات حول الهاتف والنقر سبع مرات متتالية على عنصر رقم إصدار نظام التشغيل، حيث ستظهر رسالة تحذيرية تفيد بأنك على وشك تفعيل وضع المطورين، وهنا سيظهر بند جديد في قائمة الإعدادات باسم "خيارات المطورين Developer options"، حيث بالدخول إليه سنفعّل خيار "وضع التصحيح Debug mode" كما يظهر في الصورة التالية، مع الأخذ بالحسبان اختلاف مسمى البند ومكانه في الإعدادات تبعًا لنوع الهاتف وإصدار النظام فيه.

الخاتمة

تُعَد الخطوات اللازمة لتجهيز بيئة العمل طويلةً نوعًا ما، وتحتاج إلى الدقة في تنفيذها، مثل اختيار الحِزم المطلوبة والتركيز على إصدارها، كما يجب التنويه إلى ضرورة الانتباه عند إنشاء متغيرات البيئة للعاملين على نظام التشغيل Windows، إلا أن هذه الخطوات تُنفّذ لمرة واحدة فقط، وبعدها يبدأ العمل على وظائف التطبيق نفسه.

تعرفنا في المقال على تثبيت إطار العمل كوردوفا وإنشاء أول تطبيق من خلاله، ثم بدأنا في تفصيل تجهيز بيئة العمل من خلال تثبيت IDE مناسب، وتثبيت SDK التي يتطلبها نظام التشغيل على الحاسوب، وبعدها بنينا التطبيق تمهيدًا لتشغيله كما في الخطوة الأخيرة، وسنتطرق في المقال التالي إلى إدارة القوالب الخاصة بالتطبيق، والتعرف على هيكلية (بنية) الملفات في مجلد التطبيق.

اقرأ أيضًا

• نظرة عامة عن تطوير تطبيقات الأجهزة المحمولة عبر كوردوفا
• أنشئ تطبيقك الأول في Cordova
• نظرة هيكلية عامة لمنصة Cordova

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

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

يطور المبرمجون التطبيقات الأصيلة للهواتف عن طريق إنشاء تطبيق مستقل لكل منصة (كما وضحنا في المقال السابق في وصفنا لطرق إنشاء تطبيقات الهواتف)، بينما تطوَّر التطبيقات الهجينة للهواتف باستخدام تقنيات الويب القياسية HTML5 وCSS3 وJavaScript، من خلال أحد أُطر العمل على النقيض من تطبيقات الويب التقدمية للهاتف والتي تُنشر من خلال متاجر التطبيقات وتوفر تجربة مستخدم أصلية. إذًا فاختيار طريقة التطبيقات الهجينة للهواتف توفر كثيرًا من الوقت اللازم لإنشاء أول نسخة من التطبيق على كل المنصات. سنخصّص هذا المقال للحديث عن إطار العمل كوردوفا الذي يُستخدم على نطاق واسع لتطوير التطبيقات الهجينة للهاتف، ويقدم العديد من الإمكانيات للمطوّرين للاستفادة القصوى من إمكانيات الهاتف، مستغلين معرفتهم بتقنيات الويب القياسية التي سنبدأ الحديث عنها مباشرةً باختصار قبل الانتقال إلى الحديث بالتفصيل عن إطار العمل أباتشي كوردوفا.

مفاهيم ومصطلحات للعمل بأباتشي كوردوفا

تتكون تقنيات الويب القياسية من ثلاث مكونات رئيسة هي HTML وCSS وJavaScript، حيث يفهم متصفح الإنترنت هذه التقنيات ويستطيع تفسيرها compile وعرضها render على صفحاته دون أي مساعدة من برامج خارجية على العكس من بعض لغات البرمجة التي تطلب وجود خادوم Server، مثل لغة PHP التي تستخدم خادومًا مثل Apache ليفسر تعليماتها البرمجية وينتجها بإحدى أشكال تقنيات الويب القياسية التي يفهمها المتصفح ويستطيع عرضها. سنذكر بعضًا من تفاصيل هذه التقنيات كما يلي:

لغة ترميز النص التشعبي HTML

لغة Hyper Text Markup Language واختصارها HTML، هي الطريقة الرئيسية التي تُنشأ بها أي صفحة في المواقع الإلكترونية على شبكة الإنترنت، ولا تُعَد لغةً برمجيةً بالمعنى المتعارف عليه للغات البرمجة، ولكنها طريقة لهيكلة ووصف محتويات صفحة الويب لمتصفحات الانترنت، حيث أن أي المتصفح يحتاج لمعرفة مكونات الصفحة من عناوين ونصوص وصور وروابط وغير ذلك من محتويات الصفحة، كي يتمكن من عرضها بالشكل الصحيح. لقد أُضيفتسلسلة مقالات تتحدث بالتفصيل عن HTML في أكاديمية حسوب، حيث يمكنك الاطلاع عليه والاستفادة منها.

وتتكون صفحة الويب من مجموعة من العناصر التي تُسمى وسوم Tags -جمع وسْم tag-، حيث كل وسْمٍ يمكن أن يحتوي على بعض الخصائص attributes والأصناف classes التي يمكن من خلالها تخصيص الوسم وإضافة نصوص التنسيق الخاصة CSS.

لغة التنسيق CSS

لغة التنسيق Cascading Style Sheet - CSS تختصّ بدورها في تصميم وتشكيل المظهر العام لصفحة الويب، مثل تحديد الخطوط والهوامش والمسافات لعناصر الموقع، وكذا تحديد لون الخلفيات وحجم العناصر، والحصول على الحركات في الموقع، والعديد من المزايا الأخرى. للتعرف على المزيد من وظائف وخصائص لغة التنسيق، يمكنك الاطلاع على سلسلة المقالات الخاصة بها على أكاديمية حسوب.

جافاسكريبت JavaScript

هي لغة برمجة عالية المستوى تُستخدم بالأصل في متصفحات الويب لإنشاء صفحات تفاعلية بين الموقع الإلكتروني والمستخدم، كما توجد بعض المكتبات المبنية على جافا سكربت التي تساعد على إنجاز وظائف أكثر بنصوص برمجية أقل مثل مكتبة jQuery وأُطر العمل Vue.js وAngular وReact. تتوفر مجموعة من مقالات على أكاديمية حسوب تمكّنك من الاطلاع على طبيعة لغة البرمجة هذه وخصائصها، وأطر العمل المبنية عليها.

إطار العمل framework

يُعَد إطار العمل أداةً تحتوي عدة مكونات تساعد المطوّر على وضع أساس التطبيق الذي يرغب في إنشائه، كما يوفر مجموعةً من النصوص والملفات البرمجية المكتوبة مسبقًا لجزء من التطبيق، ويتواجد هذا المفهوم في عدة لغات برمجية مثل لغة Java التي يتوفر لها إطار العمل Spring، ولغة PHP التي يتوفر لها عدة أطر عمل مثل CodeIgniter، وLaravel، وكذلك لغة JavaScript التي وضحنا لها في الفقرة السابقة بعض المكتبات وأطر العمل. تكمن أهمية أطر العمل في إمكانيتها لتوفير الوقت على المبرمج لأنه يجد أرضًا صلبةً لبدء تطبيقه من خلالها، مستغلًا الملفات والنصوص البرمجية المعدّة مسبقًا. هذه الميّزات تتطلب بالضرورة أن يكون المطور على علم جيّد بلغة البرمجة الأم، إضافةً إلى الخدمات والإمكانيات التي يوفر إطار العمل، مما يعني أن إطار العمل هو أداة مساعدة فقط، وعلى المبرمج تطويعها واستغلال إمكانياتها بما يخدم التطبيق الذي يعمل عليه.

بيئة التطوير المتكاملة Integrated Development Kit 

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

عادة ما تتكون هذه البيئات البرمجية من أداة لكتابة وتحرير النصوص البرمجية، وتحتوي على مفسّر compiler يشكّل دور الوسيط بين المبرمج والحاسوب، وتحوي أيضًا إمكانية تتبّع الأخطاء ومساعدتك على إصلاحها، وكذا العديد من الأدوات الأخرى لإتمام تطوير البرمجيات. من الأمثلة على هذه البيئات، نجد برنامج NetBeans لتطوير البرمجيات بلغة جافا، وبرنامج Visual Studio Code لعدة لغات برمجة - حسب تخصيص الإضافات - مثل PHP وC#، وغيرها الكثير.

بهذا نكون قد ذكرنا باختصار نبذةً سريعةً عن تقنيات الويب القياسية؛ لأهميتها في تطوير التطبيقات الهجينة للهاتف، ويجب على القارئ الذي يرغب في استكمال هذه السلسلة عن تطوير تطبيقات الهاتف الهجينة أن يكون متمكّنًا من هذه التقنيات، إذ أنّنا لن نتطرق لشرحها في هذه السلسلة، وسندرج في نهاية هذا المقال مراجع لشرح هذه التقنيات.

عمل أباتشي كوردوفا Apache Cordova

بناءً على ما سبق ذكره، تستطيع المؤسسة تسريع تطوير التطبيقات الهجينة للهاتف من خلال الاعتماد على أطر العمل المتاحة في هذا المجال، وأبرزها أباتشي كوردوفا Apache Cordova. في العام 2011 أنشأت مجموعة Nitobi فكرة إطار العمل تحت مسمى PhoneGap، ثم استحوذت عليه Adobe System وأطلقت عليه اسم Cordova، والذي يُعَد إطار عمل Framework مفتوح المصدر ومتاح لتطوير التطبيقات الهجينة للهواتف. إنّ ما يميز كوردوفا هو احتواؤه الكثير من الإمكانيات المقدَّمة للمطورين، والتي تمكّنهم من إنشاء تطبيقات هاتف تعمل على كافة الأنظمة من خلال استخدام تقنيات الويب القياسية سالفة الذّكر، بحيث تُستخدم لغة الترميز لعرض محتوى التطبيق، ولغة التنسيق لإضافة اللمسات الجمالية على المحتوى المعروض، بينما تستخدم لغة JavaScript لتنفيذ الوظائف التي يقدّمها التطبيق، وتتعامل مع تفاعل المستخدم مع التطبيق.

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

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

معالم إطار العمل أباتشي كوردوفا

يدعم نظام تشغيل الهاتف التطبيقات التي تُثبّت عليه، مقدمًا لها العديد من الخدمات التي من بينها المجسات أو المستشعرات، والتعاطي مع المدخلات لتمريرها إلى التطبيق، وفي حال بناء تطبيق الهاتف من خلال كوردوفا، فإن التطبيق سيتكون من جزئيتين رئيستين - كما هو موضح في الشكل أدناه - أولها تطبيق الويب (الذي يُبنى باستخدام تقنيات الويب القياسية) الذي يتعامل مباشرةًً مع محرك عارض الويب WebView من خلال واجهة برمجيات كوردوفا API، وواجهة برمجيات HTML مرفق معه ملف الإعدادات العامة التي تتحكم في العديد من سلوكيات تطبيقات كوردوفا، وهنا يأتي دور محرك عارض الويب في التواصل مع الجزء الثاني من التطبيق وهو إضافات كوردوفا المتنوعة أو المخصصة، تُعدّ الكاميرا والوسائط وجهات الاتصال ومحدد الموقع الجغرافي وغيرها الكثير من الإضافات الجاهزة في كوردوفا، بينما يمكنه التواصل من الإضافات المخصصة التي يطوّرها المبرمجون لدعم وظائف التطبيق الذي يعملون عليه؛ أما بخصوص نظام التشغيل، فإنه يتواصل مع محرر عارض الويب من جهة، ومع الإضافات مباشرةً لتنفيذ وظائف التطبيق. يوضح الشكل أدناه بالتفصيل تركيب الشكل العام لتطبيق مبنيّ من خلال كوردوفا، وآلية التواصل بين أجزائه.

نتطرق في النقاط القادمة إلى الجوانب المهمة في كوردوفا، والتي يجب على المطوّر معرفتها كي تساعده في تطوير التطبيقات

قاعدة الملفات البرمجية الموحدة

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

إذًا فكوردوفا تساعد المطور في برمجة أو تطوير التطبيق لمرة واحدة، ثمّ تُنشئ حزمةً برمجيةً قابلةً للتثبيت لكل نظام من أنظمة التشغيل بطريقة مستقلة، هذه الحزمة -عند تثبيتها على الهاتف- تقدّم للمستخدِم تجربة استخدام التطبيقات الأصيلة من خلال الوصول إلى إمكانيات الهاتف مثل الكاميرا ونظام تحديد المواقع GPS والبلوتوث وجهات الاتصال.

عارض الويب WebView

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

معمارية/بنية الإضافات

عند استخدام إطار العمل كوردوفا، يستطيع المطورون ربط نصوص برمجية مكتوبة بلغة جافا سكربت للنصوص البرمجية التي تعمل في الواجهة البرمجية الخلفية Back-End من خلال الإضافات (المكونات الإضافية) الاختيارية القوية التي توفرها كوردوفا، إذ توفّر كوردوفا للمطورين عددًا كبيرًا من الإضافات الجاهزة حسب الوظيفة التي يرغب المطوّر بإضافتها للتطبيق، والمتوافقة مع نظام التشغيل الذي يستهدفه التطبيق. يستطيع المطوّر تمكين التطبيق من الوصول إلى إمكانيات الهاتف مستخدمًا إحدى الإضافات التي توفرها كوردوفا، على سبيل المثال يستطيع المطوّر استخدام واجهة برمجية التطبيق Application Programming Interface - API للاستفادة من خصائص الحماية من النظام الأساسي، وفي نفس الوقت، إذا لم يجد المطوّر الإضافة البرمجية التي توفر طلبه بشكل دقيق، فأن كوردوفا -من خلال API الخاصة بها- تمهّد الطريق للمطوّر لبرمجة الإضافات الخاصة به وفقًا لاحتياجاته الدقيقة.

واجهة سطر الأوامر Command Line Interface

تساعد واجهة سطر الأوامر الخاصة بكوردوفا المطورين على تسريع مراحل تطوير تطبيقات الهواتف وإمكانية اختبارها وتجهيزها لتعمل على الأنظمة، من خلال كتابة بعض الأوامر المعروفة، حيث يستطيع المطورون استخدام CLI لتسريع المهام الروتينية لتطوير تطبيقات الهاتف مثل إنشاء مشروع جديد وتجهيز التطبيق للعمل على الأنظمة المختلفة، كما يمكنهم أيضًا تنفيذ أوامر لاختبار التطبيق الهجين للهاتف باستخدام أجهزة حقيقية أو محاكيات وهمية Simulators تُضاف مسبقًا في بيئة العمل. يجب على المطوّر تجهيز بيئة العمل من خلال تثبيت حِزم أدوات تطوير البرمجيات Software Development Kit - SDK لكل منصة هاتف مستهدَفة قبل استخدام أدوات CLI، وسنتطرق في [المقال القادم](راب المقال) إلى تجهيز بيئة العمل، ونتعرف على الأدوات المطلوبة.

مجموعة متنوعة من أدوات التطوير

يتوافق إطار العمل كوردوفا مع العديد من أطر تطوير تطبيقات الهواتف وبيئات التطوير المتكاملة IDEs، كذا والأدوات المستخدمة على نطاق واسع. وبالتالي يستطيع المطورون توسيع إطار عمل كوردوفا بسهولة، وذلك من خلال الاستفادة من الأدوات شائعة الاستخدام مثل دمج أُطر عمل أخرى لبيئة التطوير مثل إطار العمل أيونيك Ionic Framework - الذي يستخدم لتطوير تطبيقات هجينة -، وبيئة التطوير التي تتوافق مع طبيعة التطبيقات التي نطوّرها مثل Android Studio وVisual Studio Code من MicroSoft، والذي تَطوّر كثيرًا في الآونة الأخيرة ليدعم مجموعةً من الأدوات لكوردوفا من بينها مُثبِّت سهل الاستخدام، ومحرر النصوص البرمجية مع دعم لتنقيح الأخطاء، وتخصيص تجربة التطبيق، بالإضافة إلى آليات لاختبار التطبيق؛ أما بخصوص برمجيات أدوات التطوير SDK فإنها توفر للمطورين خيارات متعددة لتطوير التطبيقات الهجينة للهواتف مثل دعم أيونيك Ionic لتحسين مظهر وأدوات تفاعل المستخدم مع التطبيق look and feel، ورفع جودة تجربة المستخدم.

نقاط ضعف التطبيق الهجين لكوردوفا

مثل جميع أدوات التطوير الأخرى للتطبيقات الهجينة للهواتف، تحتوي كوردوفا على بعض العيوب، نذكر منها ما يلي:

• بطء التطبيق موازنةً بالتطبيقات الأصيلة: إن الاهتمام بتوافق التطبيق الهجين عبر جميع أنظمة التشغيل يجعل تطبيقات الهاتف المنشأة بكوردوفا تعمل أبطأ من التطبيقات الأصيلة.
• عدم غزارة الإضافات: غالبًا ما تواجه المطورين بعض الصعوبة في العثور على إضافات تتوافق بدقة مع الوظائف المطلوب تنفيذها في التطبيق، مما يضطرهم للجوء إلى تصميم وبرمجة إضافات مخصصة لتتوافق مع احتياجات التطبيقات التي يطوّرونها.
• المزيد من تخصيص التطبيق: يضطر المطورون للجوء إلى تخصيص التطبيق ليتوافق أكثر مع أنظمة التشغيل المختلفة -تحديدًا iOS وأندرويد-، بتخصيص يتوافق مع طبيعة نظام التشغيل نفسه، وهذه من العيوب التي يعمل مطورو إطار العمل كوردوفا على تطويرها ومعالجة النقص فيها لتكتمل تجربة بناء تطبيقات هجينة تعمل بجودة عالية على جميع أنظمة التشغيل، وقد نجد لها بعض الحلول في الإصدارات القادمة من كوردوفا.

الخلاصة

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

اقرأ أيضًا

• نظرة هيكلية عامة لمنصة Cordova
• أنشئ تطبيقك الأول في Cordova

قبل عقدِ من الزمان، بدأت الهواتف الذكيّة والحواسيب اللوحية بالسيطرة على قطاع التقنية وتكنولوجيا المعلومات وبدأ سوقها بالنمو المتسارع، حتى وصلت إلى ما هي عليه الآن، بحيث بات لا يمكنك في هذه الأيام أن تجد أحدًا يستغني عن استخدامها في مجالات يصعب حصرها، مثل التجارة الإلكترونية والتعليم الإلكتروني والتسلية والترفيه والتواصل الاجتماعي والمجال الطبي والتسويقي .. إلخ، وكذا الغوص في تطبيقاتها متعددة المزايا والخدمات. وبالتوازي مع الهواتف الذكية، فقد ظهرت تطبيقاتها التي تشكّل سوقًا خاصًا له ميزاته التجارية والمالية والتقنية.

لعملية إنشاء تطبيقات الهواتف الذكية - ودعنا مبدئيا نصطلح على تسميتها بتطبيقات الهاتف-، عدة منهجيات أو طرق لإنشائها بالاعتماد على التقنيات المستخدمة وشركات تصنيع الهواتف، حيث سنتطرق في هذا المقال إلى هذه الطرق الأربعة، مع الاستطراد بتوضيح الفروق بينها، ولا نغفل بذلك ذِكر الميزات والعيوب التي تخص كل من هذه الطرق.

نظرة عامة عن تطوير تطبيقات الهاتف

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

تطوير تطبيقات الهواتف هو عملية إنشاء تطبيقات برمجية تعمل على الهواتف، من خلال إنشاء حِزم برامج قابلة للتثبيت مهمتها تنفيذ خدمات في الخلفية، مثل الوصول إلى إمكانيات الهاتف أو البيانات باستخدام واجهة برمجة التطبيقات. تتطلب بعض التطبيقات، وجود اتصال شبكة للعمل مع موارد الحوسبة عن بُعد، مع مراعاة نظام التشغيل المستهدف لتشغيل التطبيق عليه.

تطبيقات الهاتف وأنظمة تشغيل الأجهزة

تسيطر منصتان رئيستان على سوق الهواتف الذكية، أولهما هو نظام iOS من شركة Apple، وهذه المنصة هي نظام التشغيل المتواجد في الهواتف iPhone من شركة Apple، والثاني هو Android من Google، وهو ليس حكرًا على أجهزة Google فقط كما هو الحال مع Apple، بل يُستخدم أيضًا من قِبل العديد من مصنعي الأجهزة الذكية كالساعات وشاشات العرض والأجهزة المنزلية الذكية، وكذلك الهواتف.

على الرغم من وجود بعض أوجه التشابه بين هذين النظامين الأساسيين عند برمجة وتطوير التطبيقات، فإن التطوير لنظام iOS يختلف عن التطوير لنظام Android، حيث أن عملية التطوير تتضمن استخدام أدوات تطوير برامج SDKs مختلفة، بالإضافة إلى أدوات تطوير أخرى تختلف بين نظامي التشغيل، فحينما نرى أن شركة Apple تستخدم نظام iOS حصريًا للأجهزة الخاصة بها، فإن Google تجعل Android متاحًا للشركات الأخرى شرط أن تفي بمتطلبات محددة مثل تضمين بعض تطبيقات Google على الأجهزة التي تنتجها، ويمكن للمطورين إنشاء تطبيقات لمئات الملايين من الأجهزة من خلال استهداف كلا النظامين.

طرق تطوير تطبيقات الهواتف

هناك أربعة طرق تطوير رئيسة عند إنشاء تطبيقات الهاتف، وهي كما يلي:

1. تطبيقات الهاتف الأصيلة Native
2. تطبيقات الهاتف الأصيلة متعددة المنصات عبر الأنظمة الأساسية Cross-Platform Native
3. تطبيقات الهاتف الهجين Hybrid
4. تطبيقات الويب التقدمية Progressive Web Applications

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

أولا: تطبيقات الهاتف الأصيلة Native

تُكتَب تطبيقات الهاتف الأصيلة بلغة البرمجة وأطر العمل البرمجية التي يوفرها مالك النظام الأساسي، وتعمل مباشرةً على نظام تشغيل الهاتف ذاك فقط، مثل لغة البرمجة Objective-C وSwift المستخدَمتين لتطوير تطبيقاتٍ تعمل ضمن نظام iOS وAndroid، وفي هذه الطريقة يُستخدم Android Studio على سبيل المثال لتطوير تطبيقات خاصة بنظام Android باستعمال لغات البرمجة المدعومة جافا Java أو كوتلن Kotlin، بينما يُستخدم Xcode على نظام التشغيل Mac لتطوير تطبيقات خاصة بنظام التشغيل iOS باستخدام لغات البرمجة Objective-C أو Swift.

المميزات

• الأفضل أداءً خلال تشغيل التطبيق.
• الوصول المباشر إلى واجهات برمجة التطبيقات الخاصة الهاتف.

العيوب

• ضرورة وجود اعتبار للتكلفة المادية لكل نظام تشغيل عند إنشاء التطبيق وصيانته، حيث أنه ستبنى نسخة كاملة منفصلة لأجهزة الأندرويد من قِبل مبرمج أندرويد، وبالتوازي ستبنى نسخة خاصة بأجهزة لآيفون من قِبل مبرمج iOS.

ثانيا: تطبيقات الهاتف الأصيلة متعددة المنصات عبر الأنظمة الأساسية Cross-Platform Native

يمكن كتابة تطبيقات الهاتف الأصيلة عبر الأنظمة الأساسية بلغات وأطر برمجة مختلفة، ولكنها تُجمَّع لاحقًا في تطبيق أصيل يعمل مباشرةً على نظام تشغيل الهاتف، وفي هذه الطريقة تُستخدم أّطر عمل متقدمة مثل Flutter وXamarin وReact Native

المميزات

• كود رئيسي/ملفات برمجية موحدة لمنصات متعددة.
• سهولة وسرعة إنشاء وصيانة التطبيق الخاص بك.
• إمكانية إعادة الاستخدام لفقرات متعددة من النص البرمجي في وظائف مماثلة في التطبيق أو تطبيقات أخرى، مما يقلل من الوقت الذي يستغرقه إنشاء التطبيق.

العيوب

• الاعتماد على مكتبات خارجية مخصصة للوصول إلى الميزات الأصيلة للهاتف.
• كود رئيسي/ملفات برمجية متعددة لكل منصة.

ثالثا: تطبيقات الهاتف الهجينة Hybrid

لقد صُمّمت تطبيقات الهاتف الهجينة باستخدام تقنيات الويب القياسية مثل HTML5 وCSS وJavaScript، وهي مجمعة مثل حزم تثبيت التطبيق، حيث تعمل التطبيقات المختلطة -طبعًا على العكس من التطبيقات الأصيلة- على "حاوية ويب" توفر إمكانية التشغيل عبر المتصفح، بالإضافة إلى كونها جسرًا لواجهات برمجة التطبيقات الأصيلة للهواتف، وهنا تُستخدم أُطر عمل مثل أباتشي كوردوفا Apache Cordova وأيونيك Ionic.

المميزات

• توفير الكثير من الوقت والجهد وكذلك المال، من خلال تطوير تطبيق واحد لكل المنصات.
• كود رئيسي/ملفات برمجية مشتركة بين تطبيقات الويب وتطبيقات الهاتف، وتُعَد أهم الميزات لمطور التطبيق.
• استخدام مهارات تطوير الويب لبناء تطبيقات الهواتف.

العيوب

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

رابعا: تطبيقات الويب التقدمية Progressive Web Applications

تطبيقات الويب التقدمية PWA هي تطبيقات ويب تستخدم بعضًا من إمكانيات المتصفح -مثل العمل في وضع عدم الاتصال وتشغيل بعض العمليات في الخلفية وإضافة ارتباط إلى الشاشة الرئيسية للهاتف-، لتوفر للمستخدم تجربة ما يشبه التطبيق عبر المتصفح. تشكّل هذه الطريقة نهجًا بديلًا لتطوير تطبيقات الهواتف التقليدية عن طريق تجاوز تسليم التطبيق لمتجر التطبيقات الخاصة بالمنصة، وكذلك تخطي خطوات تثبيت التطبيق. وهنا تستخدم أُطر عمل مثل Angular وReact وPolymer لإنشاء تطبيقات الويب التقدمية.

المميزات

• التطبيق نفسه متاح لكل من الويب والهاتف.
• يمكن الوصول إليه من خلال عنوان الإنترنت URL، ولا يلزم التثبيت.

العيوب

• دعم محدود للميزات الأصيلة للهاتف.
• اعتماد إمكانيات التطبيق على المتصفح المستخدم.

موازنة التطبيقات الأصيلة مقابل التطبيقات الهجينة

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

لماذا تختار طريقة التطبيقات الهجينة على طريقة التطبيقات متعددة المنصات؟

تتمثل إحدى مشكلات تطوير تطبيقات الهاتف الأصيلة في أنها تتطلب مجموعة مهارات عالية التخصص، فعلى الرغم من وجود مجتمعات مطورين كبيرة ونابضة بالحياة للغة سي C (وهي اللغة الأم لتطوير تطبيقات iOS، وما بُني عليها من لغات برمجة عالية المستوى مثل Objective-C ثم Swift التي صدرت لتشكّل بديلًا عن كل ما سبقها)، وجافا Java (الخاصة بتطوير تطبيقات Android)، وكذلك لغة البرمجة Kotlin (التي اعتمدت رسميًا من جوجل منذ 2017 لتكون ثاني لغة برمجة لتطوير تطبيقات الأندرويد بعد جافا)؛ إلا أن هناك عددًا أقل من المطورين الذين يمتلكون مهارات عالية ومعرفة كبيرة بالإصدارات الخاصة بالنظام الأساسي لتلك اللغات وبيئة التطوير المتكاملة IDE الخاصة بكل لغة.

لا شك أن هناك طلب كبير على المطورين المتميزين للتطبيقات الأصيلة، حيث تتعرض العديد من الشركات لضغوط شديدة فتكون الخيارات إما توظيفهم دائمًا وتحمل تكلفتهم الباهظة كما ذكرنا في عيوب هذه الطريقة من التطوير، أو اعتماد أسلوب التعهيد الذي يمكنهم من توظيف مؤقت لشركات أو مبرمجين لإنشاء التطبيقات. هذه التحديات تجعلنا نفكر في اتجاه آخر، وهو إمكانية إنشاء تطبيق يعمل على جميع المنصات بتقنيات معروفة ومهارات متوسطة، وهنا يأتي تصنيف التطبيقات الهجينة الذي يعتمد على تقنيات الويب القياسية، وسنركز على هذا التصنيف في هذه السلسلة؛ أما إن كنت من ذوي المهارات العالية في تطوير التطبيقات لمنصة محددة فهنيئًا لك، إلا أن هذه السلسلة موجهة للمهتمين بتطوير أو إنشاء تطبيقات الهاتف باستخدام الأطر الهجينة.

كيف تعمل الأطر الهجينة ومتعددة المنصات عبر الأنظمة الأساسية؟

تسمح التطبيقات الهجينة للمطورين باستخدام تقنيات الويب القياسية HTML, CSS, JS، حيث يمكن من خلال هذه التقنيات إنشاء موقع ويب مثل موقع لعرض معلومات المؤسسة، أو موقع إخباري، أو موقع شخصي.. إلخ؛ أو إنشاء تطبيق ويب ليكون موقعًا ذا غرض معين مثل موقع لعرض المقالات، أو موقع لتنزيل الكتب، أو موقع لحساب السعرات الحرارية والوزن المثالي.. إلخ.

تُغلّف التطبيقات الهجينة في حاوية تسمح لتطبيق الويب بالعمل مثل التطبيق الأصيل على الهاتف، حيث يمكن استخدام معظم التعليمات البرمجية من تطبيق ويب لإنشاء تطبيق هاتف بالاعتماد على أنّ تطبيقات الهواتف الهجينة هي مجرد تطبيقات ويب تعمل في بيئة متصفح الويب المضمن في نظام تشغيل الهاتف. يعتمد نظام أندرويد على عارض الويب WebView بينما يعتمد نظام iOS على UIWebView الذي يستخدم في إصدار iOS الثاني حتى الثامن، وقد طُوِّر لتسريع عرض المكونات في المتصفح بدءًا من الإصدار الثامن، وصدر باسم جديد هو WKWebView. يُعَدّ تطوير التطبيقات الهجينة بديلًا فعالًا لمطوري الويب الذين يرغبون في إنشاء تطبيقات الهواتف بسرعة، نظرًا لأن أداء طريقة عمل المتصفحات في الهواتف في تحسن مستمر من ناحية تحويل التطبيق وتشغيله وعرضه.

وبالمثل، تُكتَب تطبيقات الويب التقدمية PWA باستخدام تقنيات برمجة تطبيقات الويب التقليدية، ويكون الوصول إليها مبدئيًا من خلال متصفح نظام التشغيل إما على الهاتف أو جهاز الحاسوب.

توفر معظم الأطر المشتركة بين الأنظمة الأساسية مكونات أصيلة للعمل مع التعليمات البرمجية عبر الأنظمة الأساسية، بينما تعمل بعض الأطر الأخرى مثل Flutter وXamarin، على ترجمة التعليمات البرمجية عبر الأنظمة الأساسية إلى الكود الأصيل للحصول على أداء أفضل.

أجزاء تطبيقات الهاتف من وجهة نظر فريق التطوير

ينظر فريق التطوير إلى عملية تطوير التطبيق من خلال منظورين رئيسين، وهما الواجهات الأمامية والوظائف التي ينفذها التطبيق. بعض التطبيقات ينجزها شخص واحد مؤهل في المنظورين - بلا شك اعتمادًا على حجم التطبيق والوقت المقدر لإنشائه -، وبعض التطبيقات يحتاج إلى فريق عمل متخصص كل في جزئيته، نوضّحهما كما يلي:

الواجهة الأمامية لتطبيق الهاتف Front-End

الواجهة الأمامية للهاتف هي الجزء المرئي والتفاعلي من التطبيق الذي يتفاعل معه المستخدم، وعند استخدام مصطلح "مبرمج تطبيقات الهاتف"، فإننا غالبًا ما نقصد الجزء الأمامي من التطبيق، بحيث يكون هذا المبرمج مؤهلًا في اللغات، والتقنيات المستخدَمة لإنشاء هذه الواجهات، بحيث قد يكون وحده مطورًا للتطبيق، أو يشاركه أشخاص مختلفون في تصميم وتطوير الواجهات، فقد يتواجد في الفريق مصممو رسومات متخصصون مسؤولون عن إنشاء عناصر مرئية للتطبيقات مثل الرموز والخلفيات والألوان والسمات وأجزاء أخرى من التطبيق، في حالة أنواع معينة من التطبيقات مثل الألعاب مثلًا، وقد يضم الفريق مطوري الرسوم المتحركة.

الواجهة الخلفية لتطبيق الهاتف Back-End بغضّ النظر عن النظام الأساسي للواجهة الأمامية أو طريقة التطوير المستخدمة ومدى جمال والتصميم، فإن تنفيذ التطبيق للوظائف المطلوبة منه تُعَد أكثر أهميةً للمستخدمين، وإلا ما الفائدة من تطبيق آلة حاسبة يبدو جيدًا، ويستخدم رموز وسمات وألوان رائعة، لكنه ينجز عمليات الحساب بطريقة خاطئة ومنافية للمنطق. نظرًا للأهمية الحاسمة للخدمات الخلفية لنجاح تطبيقات الهاتف، فإن لدى المطورين العديد من الخيارات المعمارية المهمة التي يجب عليهم الموازنة بينها واختيار أفضلها، من بينها الخدمات التي يجب أن ينشؤوها بأنفسهم، وأي الخدمات الخارجية المقدَّمة من طرف ثالث يجب أن يستفيدوا منها، وبعد ذلك يجب عليهم تشغيل وصيانة خدماتهم الخاصة أو إذا استفادوا من خدمات الطرف الثالث.

خدمات تطبيقات الهاتف الرئيسية

هناك المئات من الخدمات السحابية والجهات الخارجية التي يمكن لمطوري تطبيقات الهواتف الاستفادة منها لتسريع تطوير تطبيقاتهم وتسليمها، ومع ذلك فمن الصعب أن يتمكن المطور من إجمال وفهم كل هذه الخدمات، ولهذا بدلًا من ذلك، يجب على مطوري الهواتف البحث عن بيئة تطوير تسهّل عليهم دمج واستخدام القدرات المطلوبة الأكثر شيوعًا في تطبيقاتهم بسرعة وسهولة، مع الحفاظ على حرية الاستفادة من العديد من الخدمات الفردية المتاحة، وهذه الخدمات مصنفة كما يلي:

خدمات أساسية

• إدارة إنشاء العضوية وتسجيل الدخول للمستخدمين.
• تسجيل الدخول عبر منصات التواصل الاجتماعي (تسجيل الدخول بحساب Facebook أو Twitter، إلخ).
• تحليل طريقة استخدام المستخدم للتطبيق ومتابعة سجل الأخطاء.
• الإشعارات الآنية/اللحظية.
• اختبار التطبيق على نفس الفئة من الأجهزة المستخدمة.

خدمات البيانات

• التخزين السحابي.
• بيانات الحقيقية في الوقت الفعلي.
• منطق ووظائف التطبيق / وظائف السحابة.

تعلم الآلة

• المحادثة الآلية (الرد التلقائي).
• التعرف على الصور والفيديو.
• التعرف على الكلام (تحويل النص إلى صوت، وبالعكس).

الموازنة بين التطبيقات المذكورة لإنشاء تطبيقك الخاص

من خلال ما سبق وتعرفت عليه، فما هو اختيارك من بين الطرق المذكورة أعلاه لإنشاء تطبيقك الخاص؟

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

إنشاء تطبيق أصيل

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

إنشاء تطبيق متعدد الأنظمة الأساسية

تُعَد هذه الطريقة حلًا وسطًا بين خيارات طرق تطوير تطبيقات الهواتف، فهي أقل تكلفةً موازنةً بالتطبيقات الأصيلة، مع أداء في مستوى جيد ومرضٍ للمستخدمين، إضافةً إلى كسب الوقت المستغرق في إنشاء نفس التطبيق لكافة أنظمة التشغيل.

إنشاء تطبيق هجين

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

إنشاء تطبيق ويب PWA

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

خاتمة

لقد تعرفنا في هذا المقال على تصنيف تطبيقات الهاتف، وصنّفنا طرق تطوير هذه التطبيقات في أربعة طرق، حيث وضحنا منهجية كل طريقة في إنشاء أو تطوير تطبيقات الهاتف، إضافةً إلى التركيز على بيان ميّزات كل طريقة وعيوبها، ثم تطرّقنا إلى الحديث عن تقسيمٍ لعملية تطوير تطبيق الهاتف، والتي تنقسم لفئتين أولاهما فئة تصميم واجهات التطبيق Front-End والتي تهتم بالشكل الجمالي لواجهات وصفحات التطبيق، والتي بدورها تراعي تجربة المستخدم وتعمل على تطويرها وتطويع التطبيق ليكون أسهل ما يكون للمستخدم؛ أما الفئة الثانية فتختص بتطوير وظائف وعمليات التطبيق وتسمى تطوير الواجهات الخلفية Back-End. وقد خُتم المقال بآلية توجه المستخدِم نحو اختيار الطريقة المناسبة في التطوير، متبوعةً برسم توضيحي عن المزايا التي يتطلبها المستخدم في التطبيق، والطريقة المثلى لتطوير هذه التطبيق.

سنتحدث في المقال القادم عن الخطوة الأولى في تطوير تطبيقات الهاتف بالطريقة الهجينة، بالاعتماد على تقنيات الويب القياسية HTML5, CSS, JS من خلال إطار العمل أباتشي كوردوفا Apache Cordova وما تتطلبه من أدوات لتجهيز بيئة العمل والبدء بإنشاء أول تطبيق جوال من خلال كوردوفا.

اقرأ أيضًا

• نظرة هيكلية عامة لمنصة Cordova
• أنشئ تطبيقك الأول في Cordova
• المدخل الشامل لتعلم تطوير الويب

تُظهر هذ الإرشادات كيفية إنشاء تطبيقات JS/HTML Cordova ونشرها على منصّات موبايل أصليّة متنوعة باستخدام واجهة سطر أوامر كوردوفا (cordova (CLI, راجع CLI reference لتفاصيل مرجعية عن واجهة سطر أوامر Cordova.

تثبيت Cordova CLI

واجهة سطر أوامر Cordova موزّعة كحزمة npm (نظام إدارة حزم). اتبع الخطوات التالية لتثبيت أداة cordova CLI :
1- حمّل وثبّت Node.js. خلال التثبيت يجب أن تكون قادراً على استدعاء node و npm على سطر الأوامر الخاص بك.
2- (اختياري) حمّل وثبّت git client, إذا لم يكن لديك نسخة مسبقًا. قم بتثبيتها, وبعدها يجب أن تكون قادرًا على استدعاء git على سطر الأوامر الخاص بك. حيث يستخدمها CLI لتحميل الموارد عندما يتم الاشارة إليها باستخدام git repo
3- ثبّت cordova باستخدام أداة npm لـ Node.js. حيث سيُحمّل cordova أوتوماتيكيًا باستخدام أداة npm .

• في OS ولينكس

$ sudo npm install -g cordova

في أنظمة OSX و LINUX قد يكون الحاق الأمر npm بـ sudo ضروريًا لتثبيت أداة التطوير هذه في الأدلة المقيّدة مثل /usr/local/share
إذا كنت تستخدم الأداة الاختيارية nvm/nave أو تمتلك صلاحية الوصول الى دليل التثبيت. يمكنك الاستغناء عن البادئة sudo .

• في نظام التشغيل ويندوز Windows

C:\>npm install -g cordova

تخبر العلامة g- الأمر npm بتثبيت cordova بشكل عام. وإذا لم يتم التحديد سيتم التثبيت في الدليل الفرعي node_modules من مسار التثبيت الحالي. بعد إتمام التثبيت يجب أن تتمكن من تشغيل cordova من موجه الأوامر بدون معامِلات، ويجب أن تقوم Cordova بطباعة نص للمساعدة على شاشة موجه الأوامر..

إنشاء التطبيق

اذهب الى الدليل الذي تدير فيه شفرتك المصدرية. وأنشئ مشروع Cordova

$ cordova create hello com.example.hello HelloWorld

هذا ينشئ بنية الدليل المطلوب لتطبيق cordova الخاص بك. افتراضيًا, سكريب cordova create يولد هيكلية تطبيق معتمد على الوب والذي صفحته الرئيسية هي ملف المشروع www/index.html.

إضافة منصّات

يجب تشغيل جميع الأوامر اللاحقة ضمن الدليل الرئيسي المشروع، أو أي دليل فرعي:

$ cd hello

أضف المنصّات التي ترد لتطبيقك أن يستهدفها. سنضيف منصّة أندرويد و IOS والتأكد من حفظها الى config.xml و package.json:

$ cordova platform add ios
$ cordova platform add android

للتأكد من مجموعتك الحاليّة للمنصّات:

$ cordova platform ls

تشغيل أوامر لإضافة أو إزالة المنصّات يؤثّر على محتويات دليل منصّات المشروع، حيث تظهر كل منصّة محدّدة كدليل فرعي.

اقتباس

ملاحظة: عند استخدام CLI لبناء تطبيقك، يجب عدم تحرير أي ملفات في الدليل /platforms/. تستبدل الملفات في هذا الدليل بشكل روتيني عند تحضير التطبيقات للبناء، أو عند إعادة تثبيت الإضافات.

ثبيت المتطلبات المسبقة للبناء

لإنشاء التطبيقات وتشغيلها، يلزمك تثبيت حزم SDK لكل منصّة تريد استهدافها. بدلاً من ذلك، إذا كنت تستخدم متصفح للتطوير فيمكنك استخدام منصّة browser التي لا تتطلب أية SDKs للمنصّة. للتحقق مما إذا كنت مستوفيًا لمتطلبات إنشاء المنصّة:

$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
Gradle: installed

Requirements check results for ios:
Apple OS X: not installed
Cordova tooling for iOS requires Apple OS X
Error: Some of requirements check failed

بناء التطبيق

افتراضيًا، Cordova تنشئ سكريبت يولد هيكلية تطبيق معتمد على الوب والذي صفحة البداية له هي ملف المشروع www/index.html. يجب تحديد أيّة تهيئة كجزء من معالج حدث deviceready المعرّف في www/js/index.js. قم بتشغيل الأمر التالي لبناء المشروع لجميع المنصّات:

$ cordova build

يمكنك اختياريًا تحديد المجال في كل بناء لمنصّات محدّدة- في هذه الحالة"ios"

$ cordova build ios

اختبار التطبيق

غالباً ما تأتي حزم SDK لمنصّات الموبايل مع محاكي تشغّل صورة الجهاز, وبذلك يمكنك تشغيل التطبيق من الشاشة الرئيسية ومشاهدة كيفية تفاعله مع العديد من ميزات المنصّة.
شغّل أمر مثل التالي لإعادة بناء التطبيق وعرضه ضمن محاكي منصّة معيّنة:

$ cordova emulate android

تبعاً لأوامر محاكي Cordova تحدّث (refreshes) صورة المحاكي لعرض أحدث تطبيق, والذي قد أصبح متاحاً للوصول من الشاشة الرئيسية:

في نفس الوقت يمكنك توصيل الهاتف إلى حاسوبك واختبار التطبيق مباشرةً:

$ cordova run android

قبل تشغيل هذا الأمر، تحتاج إلى إعداد الجهاز للاختبار، باتباع الإجراءات التي تختلف حسب كل منصّة.

إضافة الإضافات Plugins

يمكنك تعديل التطبيق المولَّد افتراضياً للاستفادة من ميزات تقنيات الوب المعيارية, ولكن ستكون بحاجة لإضافة Plugins لكي يتمكّن التطبيق من الوصول لميزات على مستوى الجهاز. تعرض الإضافة واجهة برمجة تطبيقات جافا سكربت Javascript API لوظيفة SDK الأصلية. يتم استضافة الإضافات عادةً على npm ويمكنك البحث عنهم في صفحة plugin search. تُزوَّد بعض مفاتيح API من قبل مشروع المصدر المفتوح Apache Cordova ويشار إليها باسم Core Plugin APIs

$ cordova plugin search camera

لإضافة وحفظ إضافة الكاميرا إلى config.xml و package.json، سنحدّد اسم حزمة لإضافة الكاميرا:

$ cordova plugin add cordova-plugin-camera
Fetching plugin "cordova-plugin-camera@~2.1.0" via npm
Installing "cordova-plugin-camera" for android
Installing "cordova-plugin-camera" for ios

يمكن أن تضاف الإضافات أيضاً باستخدام الدليل أو باستخدام git repo

اقتباس

ملاحظة: يضيف الـ CLI شفرة الإضافة لتناسب كل منصّة. إذا أردت التطوير من خلال أداة شيل منخفضة المستوى أو منصّات SDK كما نوقش في مقال مدخل إلى Apache Cordova, ستكون بحاجة لتشغيل أداة Plugman لإضافة إضافات منفصلة لكل منصّة.

استخدم plugin ls أو plugin list أو plugin لوحدها لعرض الإضافات المثبّتة حالياً. كلٌ يُعرض من خلال معرّفه الخاص:

$ cordova plugin ls
cordova-plugin-camera 2.1.0 "Camera"
cordova-plugin-whitelist 1.2.1 "Whitelist"

استخدام mergesلتخصيص كل منصّة

في حين أن Cordova تسمح لك بنشر التطبيق بسهولة على منصّات مختلفة, إلا أنه في بعض الأحيان ستحتاج لإضافة تخصيصات. في هذه الحالة, لن تقوم بتعديل الملفات المصدرية في أدّلة www المتعددة ضمن دليل المستوى العالي platforms , لأنه يتم استبداله بشكل منتظم مع مصدر المنصّات المتعددة لدليل المستوى العالي www
بدلاً من ذلك، دليل المستوى الأعلى merges يوفر مكاناً لتحديد الموارد للنشر على منصّات محدّدة. يعكس كل دليل فرعي خاص بالمنصّة ضمن عمليات merges بنية الدليل لشجرة المصدر www، مما يسمح لك بتجاوز أو إضافة ملفات حسب الحاجة. على سبيل المثال، إليك كيفية استخدام عمليات merges لزيادة حجم الخط الافتراضي لأجهزة أندرويد:

• حرّر ملف www/index.html , مضيفاُ رابط ملف CSS إضافي, overrides.css في هذه الحالة:

<link rel="stylesheet" type="text/css" href="css/overrides.css" />

• يمكن اختياريا إنشاء ملف www/css/overrides.css فارغ. والذي سيطبق من أجل كل بناء غير مخصص للأندرويد, لمنع خطأ الملف مفقود (missing-file)
• أنشئ ملف css على دليل فرعي ضمن merges/android, ثم أضف ملف overrides.css المقابل. حدّد CSS الذي يتجاوز حجم الخط الافتراضي 12-نقطة داخل www/css/index.css, على سبيل المثال:

body { font-size:14px; }

عندما تعيد بناء المشروع, تضمّن نسخة الأندرويد حجم الخط المخصص, بينما تظل البقية دون تغيير. كما يمكن استخدام merges لإضافة ملفات غير موجودة في الدليل الأصلي www. على سبيل المثال, تطبيق يمكنه تضمين back button رسومي داخل واجهة الـ iOS, مخزّن في merges/ios/img/back_button.png , ، في حين أنه يمكن لنسخة الأندرويد بدلاً من ذلك التقاط الأحداث backbutton من زر الأجهزة المقابلة.

تحديث كوردوفا وتطبيقك

بعد تثبيت أداة Cordova, يمكنك دوماً تحديثها إلى آخر إصدار من خلال تشغيل الأمر

$ sudo npm update -g cordova

استخدم هذه الصّياغة لتثبيت إصدار محدّد:

$ sudo npm install -g cordova@3.1.0-0.2.0

نفّذ cordova -v لمعرفة النسخة الحالية قيد التشغيل. شغّل الأمر التالي لإيجاد آخر نسخة تم إصدارها Cordova:

$ npm info cordova version

لتحديث المنصّة التي تستهدفها:

$ cordova platform update android --save
$ cordova platform update ios --save
...etc.

ترجمة -وبتصرّف- للمقال Create your first Cordova app للمساهمين في كتابة المقال على GitHub

هذا المقال منشور تحت الرخصة Apache License, Version 2.0

نظرة عامة

أباتشي كوردوفا (Apache Cordova) هي منصّة مفتوحة المصدر لتطوير تطبيقات الموبايل. تمكّنك من استخدام تقنيات الويب المعياريّة مثل HTML5, CSS3, وJavaScript للتطوير متعدد المنصّات “cross-platform development” حيث تنفذ التطبيقات من خلال محزّم مخصص لكل منصّة، ويعتمد على الواجهات البرمجيّة القياسيّة للوصول إلى موارد الأجهزة كالحسّاسات، البيانات، وحالة الشبكة.
قم باستخدام Apache Cordova إذا كنت:

• مطوّر تطبيقات موبايل وتريد أن توسّع قدرة تطبيقك ليعمل على أكثر من منصّة، بدون الحاجة إلى إعادة تنفيذه بلغة ومجموعة الأدوات الخاصّة بكل منصّة.
• مطوّر تطبيقات ويب، وتريد أن تنشر تطبيق محزّم للتوزيع على متاجر تطبيقات متنوعة.
• مطوّر تطبيقات موبايل مهتم بدمج مكونات التطبيق الأصليّة بطريقة عرض الويب WebView (نافذة تصفح خاصّة) يمكنها الوصول إلى الواجهات البرمجية للتطبيقات على مستوى الأجهزة (device-level APIs)، أو إذا كنت تودّ تطوير واجهة إضافة (plugin interface) بين المكونات الأصليّة ومكونات الويب.

البنية

يتواجد العديد من المكونات لتطبيقات Cordova, يبيّن المخطط التالي نظرة عالية المستوى على بنية تطبيق Cordova.

عرض الويب WebView

WebViewالمدعم بـ Cordova يمكن أن يزود التطبيق بكل واجهات المستخدم الخاصّة به، كما يمكن أن يكون في بعض المنصّات كمكوّن ضمن تطبيق مختلط أكبر يدمج WebView مع مكوّنات التطبيق الأصليّة

تطبيق الويب Web App

هو الجزء الذي تتوضع فيه شفرة تطبيقك، التطبيق بحد ذاته ينفذ كصفحة ويب، وبشكل افتراضي هو الملف المسمّى index.html والذي يرتبط بـ JavaScript ، CSS، صور، ملفات وسائط متعددة، أو مصادر أخرى ضرورية لتشغيله. ينفذ التطبيق في WEBVIEW ضمن محزّم البرنامج الأصلي, الذي قمت بتوزيعه على متاجر التطبيقات.
ويحتوي أيضًا على ملف مهم للغاية وهو config.xml والذي يؤمّن معلومات عن التطبيق ويحدّد البارامترات التي تؤثر على كيفية عمله، كتحديد فيما إذا كان يستجيب لتغيرات الاتجاه.

الإضافات Plugins

تشكل الإضافات جزء أساسي من النظام الوظيفي لـ Cordova. فهي تؤمن الواجهة لـ Cordova والمكونات الأساسيّة للاتصال فيما بينها، وعملية التغليف إلى واجهات تطبيقات الجهاز القياسيّة APIS ، وهذا يمكنك من استدعاء الشفرة الأصليّة للبرنامج من خلال Javascript. مشروع Apache Cordova يدير مجموعة من الإضافات تسمّى الإضافات الجوهرية Core Plugins. هذه الإضافات تمكّن تطبيقك من الوصول إلى موارد جهازك (كالبطارية، الكاميرا، جهات الاتصال، ..الخ). وبالإضافة إلى المكونات الجوهريّة يوجد العديد من الإضافات التابعة لجهات أخرى third-party plugins والتي تؤمّن تغليفات إضافية لخصائص قد لا تكون متوافرة بالضرورة في جميع الأجهزة. يمكنك البحث عن إضافات Cordova باستخدام (plugin search(npm، كما يمكنك أيضًا تطوير إضافاتك الخاصة. يمكن أن تكون الإضافات ضروريّة . كمثال، من أجل الاتصال بين Cordova والمكونات الاصليّة العاديّة.

اقتباس

ملاحظة: عندما تقوم بإنشاء مشروع باستخدام Cordova, فإن المشروع لا يمتلك أيّة إضافة، و هو السلوك الافتراضي حديثًا، فأيّة إضافات ترغب بها، حتى الإضافات الجوهرية, يجب أن تضاف بشكل دقيق.

لا تؤمن Cordova أي أدوات واجهات UI widgets أو بنى تعتمد عرض النماذج MV* frameworks. تؤمن لها فقط زمن التشغيل الذي يمكنها التنفيذ خلاله. إذا كنت تريد استخدام أدوات الواجهات أو بيئة عرض النماذج، يتوجب عليك اختيارهم وتضمينهم في تطبيقك.

مسارات التطوير Development Paths

تزودك Cordova بمخططي عمل workflow أساسيين من أجل إنشاء تطبيق موبايل، بينما يمكنك غالبًا استخدام أيّ منهما لإنجاز نفس المهمة، فإنّ كل منهم يقدم خصائص إيجابية:

• مخطط عمل موجه الأوامر متعدد المنصات (Cross-platform (CLI) workflow)

استخدم هذا المخطط إذا كنت تودّ أن يعمل تطبيقك على أنظمة تشغيل مختلفة قدر الامكان. مع حاجة قليلة للتطوير المتعلق بالمنصة (platform-specific development)
يركّز مخطط العمل هذا على موجه الأوامر في كوردوفا (Cordova CLI)، والذي هو عبارة عن أداة عالية المستوى تمكنك من بناء مشاريع لمنصّات متعددة في نفس الوقت. تستخرج العديد من خصائص سكربتات شيل(الصدفة) الأقل المستوى lower-level shell .scripts يقوم CLI بنسخ مجموعة من تجهيزات الويب الشائعة إلى مجلدات فرعية لكل منصّة موبايل، القيام بتغيير الإعدادات الضرورية لعمل كل منها، وتشغيل سكريبتات البناء لتوليد الملفات التنفيذية للتطبيقات. يؤمن CLI أيضًا واجهة عامة لتنصيب الإضافات على تطبيقك. إذا لم تكن بحاجة إلى مخطط مخصّص لمنصّة محددة يفضل اعتماد المخطط لمنصّات متعددة.

• مخطط العمل المتعلق بمنصّة Platform-centered workflow

قم باستخدام هذا المخطط إذا كنت تودّ إنشاء تطبيق مخصّص لمنصّة واحدة, ولديك حاجة لأن تكون قادرًا على تعديله بالمستويات الأدنى. وكمثال إذا كنت تريد من تطبيقك أن يدمج المكونات الأصلية العادية مع مكونات Cordova المعتمدة على الويب (web-based Cordova components)، كما نوقش في تضمين WebViews. وكقاعدة متعارف عليها، استخدم هذا المخطط إذا كنت تريد تعديل المشروع من خلال حزمة تطوير النظام الخاصّة به SDK. هذا CLI مجموعة على مجموعة من سكريبتات المستوى الأدنى التي تم تعديلها لتلائم كل من المنصّات المدعومة. بالإضافة إلى أداة منفصلة (Plugman) تمكّنك من تنصيب الإضافات. بالرغم من أنّه يمكنك استخدام هذا المخطط لإنشاء تطبيقات لمنصّات متعددة، لكن ذلك يتم عادة بصعوبة أكبر، وذلك بسبب أن نقص أدوات المستوى الأعلى يعني دورات بناء منفصلة وتعديلات على الإضافة لكل منصّة. في بداية العمل، من الأسهل البدء باستخدام مخطط العمل متعدد المنصّات لإنشاء التطبيق، يمكننا بعدها الانتقال إلى مخطط العمل المخصص لمنصّة إذا كنت تريد تحكم أوسع يتم تأمينه من قبل حزمة تطوير النظام الخاصة بالتطبيق SDK.

اقتباس

ملاحظة: عندما تنتقل من مخطط العمل المعتمد على موجّه الاوامر CLI-based workflow إلى آخر يركّز على أدوات شيل shell tools وحزم تطوير النظام الخاصّة بمنصّة محددة (platform-specific SDKs) ، فإنّه لا يمكنك التراجع.

تدير CLI مجموعة شائعة من الشفرات المصدرية متعددة المنصّات، تستخدمها في كل عمليّة بناء للكتابة فوق الشفرة المخصصة لمنصّة واحدة. للحفاظ على أيّة تعديلات قمت بإجرائها على المكونات المخصصة لمنصّة، يتوجب عليك الانتقال إلى استخدام أدوات شيل المخصصة لتلك المنصّة التي تتجاهل الشفرات المصدريّة متعددة المنصّات وتقوم بدلاً عن ذلك بالاعتماد على شفرات مصدريّة مخصصة لمنصّة واحدة.

تنصيب Cordova

يختلف تنصيب Cordova بحسب مخطط العمل الذي تختاره.

• مخطط العمل متعدد المنصّات: (سنتعرّف عليه في الدرس القادم)
• مخطط العمل المخصص لمنصّة.

بعد تنصيب Cordova, يفضل الاطلاع على قسم (Develop for Platforms) لمنصّات الموبايل التي تطوّر التطبيق من أجلها.

ترجمة -وبتصرّف- للمقال Architectural overview of Cordova platform للمساهمين في كتابة المقال على GitHub

هذا المقال منشور تحت الرخصة Apache License, Version 2.0