اذهب إلى المحتوى

تجهيز بيئة العمل في أباتشي كوردوفا


أكاديميّة حسوب

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

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

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

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

node-version.png

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

npm install -g cordova

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

install-cordova.png

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

cordova help

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

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

   sudo npm install -g cordova

cordova-version.png

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

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

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

cordova create myFirstApp 

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

cordova-Create-app.png

تثبيت بيئة التطوير المتكاملة 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 كما في الصور الثلاثة التالية:

Android-SDK-Tools.png

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

SDK-Manager.png

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

SDK-Tools-7.png

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

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

ADV-Manager-8.png

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

Select-Hardware-9.png

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

Android-Virtual-Devices-10.png

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

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

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

cordova platform add android

Cordova-platform-add-android-11.png

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

cordova platform add browser

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

cordova-platform-add-browser-12.png

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

cordova platform add ios

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

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

environment-variables-windowns-13.png.jpg

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

Environment-Variables-add-14.jpg

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

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

user-environment-variables-15.jpg

بناء التطبيق

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

cordova build

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

cordova build android

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

cordova-build-android-16.png

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

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

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

cordova emulate android

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

cordova-emulate-android-17.png

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

cordova run android

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

Developer-options-android-18.jpg

الخاتمة

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

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

اقرأ أيضًا


تفاعل الأعضاء

أفضل التعليقات

لا توجد أية تعليقات بعد



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...