دروس أباتشي كوردوفا: تطوير تطبيقات الجوال باستخدام كوردوفا

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

هذا هو المكان الذي يمكن أن يصبح فيه مطور Apache Cordova على دراية جيدة أمرًا مفيدًا من خلال توفير طريقة لتطوير تطبيقات الهاتف المحمول باستخدام تقنيات الويب القياسية - HTML5 و CSS3 و JavaScript.

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

كوردوفا فون جاب؟

لا يوجد شيء من هذا القبيل ، حقًا. ما حدث هو أن Adobe استحوذت على Nitobi في عام 2011 ، وتبرعت بنواة المصدر المفتوح لمؤسسة Apache Software Foundation ، التي أعادت تسميتها Apache Cordova. هناك تشبيه شائع ستواجهه غالبًا هو أن كوردوفا هو PhoneGap مثل WebKit لمتصفح Chrome أو Safari.

من الواضح أن الاختلافات بين Cordova و PhoneGap كانت ضئيلة في البداية. مع مرور الوقت ، طورت Adobe PhoneGap مجموعتها الخاصة من ميزات الملكية ، بينما كانت Cordova - ولا تزال - مدعومة من قبل مجتمع المصادر المفتوحة. ستختبر مراجعة Apache Cordova والبرنامج التعليمي هذا تطوير تطبيق كوردوفا بمزيد من التفاصيل ، وبينما قد ينطبق بعضها على PhoneGap ، لا ينبغي اعتبار ذلك برنامجًا تعليميًا لبرنامج PhoneGap ، في حد ذاته .

قدرات اباتشي كوردوفا

في جوهرها ، لا توجد قيود على كوردوفا فيما يتعلق بالتطبيقات المطورة محليًا. ما تحصل عليه مع Cordova هو ببساطة واجهة برمجة تطبيقات JavaScript ، والتي تعمل كغلاف للرمز الأصلي ومتسقة عبر الأجهزة. يمكنك اعتبار كوردوفا حاوية تطبيق مع عرض ويب ، والذي يغطي شاشة الجهاز بالكامل. عرض الويب الذي تستخدمه كوردوفا هو نفس عرض الويب المستخدم بواسطة نظام التشغيل الأصلي. على نظام iOS ، هذا هو الافتراضي Objective-C UIWebView أو فئة WKWebView مخصصة ؛ على Android ، هذا هو android.webkit.WebView .

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

أخيرًا ، يتم تثبيت تطبيقات كوردوفا تمامًا مثل التطبيقات الأصلية. هذا يعني أن إنشاء الكود الخاص بك لنظام iOS سينتج ملف IPA ، وملف APK لنظام Android ، وينتج عن إنشاء Windows Phone ملف XAP. إذا بذلت جهدًا كافيًا في عملية التطوير ، فقد لا يدرك المستخدمون أنهم لا يستخدمون تطبيقًا أصليًا.

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

هناك مساران أساسيان يمكنك اتباعهما عند التطوير باستخدام كوردوفا:

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

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

المتطلبات الأساسية وتركيب كوردوفا

قبل تثبيت أي شيء متعلق بـ Cordova وتشغيله ، ستحتاج إلى تثبيت SDK لكل نظام أساسي تنوي إنشاء تطبيقك من أجله. سنركز على نظام Android الأساسي في هذه المقالة ؛ ومع ذلك ، فإن العملية التي تنطوي على أنظمة أساسية أخرى مماثلة.

يجب عليك تنزيل Android SDK الموجود هنا. بالنسبة لنظام التشغيل Windows ، تأتي SDK كمثبت ، بينما تأتي في نظامي Linux و OSX كأرشيف يمكن استخراجه ببساطة. بعد استخراج / تثبيت الحزمة ، ستحتاج إلى إضافة sdk/tools و sdk/platform-tools الدلائل إلى متغير PATH . تستخدم كوردوفا المتغير PATH للبحث عن الثنائيات التي تحتاجها لعملية البناء. إذا لم يكن لديك Java مثبتًا ، فيجب عليك المضي قدمًا وتثبيت JDK مع Ant. يجب ضبط ANT_HOME و JAVA_HOME على مجلدات سلة JDK و Ant ، وبعد تثبيت Android SDK ، اضبط متغير ANDROID_HOME على Android/Sdk . يجب أن تكون جميع المواقع في متغيرات *_HOME الثلاثة أيضًا في متغير PATH .

بعد تثبيت الأمر SDK android سيصبح متاحًا في سطر الأوامر. قم بتنفيذه لفتح مدير SDK وتثبيت أحدث الأدوات وواجهة برمجة تطبيقات Android. قد تحتاج على الأرجح إلى أدوات Android SDK وأدوات نظام Android SDK وأدوات إنشاء Android SDK ومنصة SDK و Google APIs Intel x86 Atom System Image ومصادر Android SDK و Intel x86 Emulator Accelerator (مثبت HAXM) . بعد ذلك ستتمكن من إنشاء محاكي باستخدام android avd .

يعتمد Cordova CLI على Node.js وعميل Git ، لذا انطلق وقم بتنزيل وتثبيت Node من nodejs.org ، و Git من git-scm.com. ستستخدم npm لتثبيت Cordova CLI نفسه وكذلك لتثبيت مكونات إضافية ، وستستخدم Cordova git خلف الكواليس لتنزيل التبعيات المطلوبة. أخيرًا ، قم بتشغيل

 npm install -g cordova

... لتثبيت Cordova CLI عالميًا ( npm install cordova ليس كافيًا في حد ذاته.)

للتلخيص ، هذه هي الحزم التي ستحتاجها:

• جافا
• النملة
• أندرويد سك
• NodeJS
• شخص سخيف

وستحتاج متغيرات البيئة هذه إلى التحديث:

• PATH
• JAVA_HOME
• ANT_HOME
• ANDROID_HOME

تمهيد التطبيق

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

 cordova create toptal toptal.hello HelloToptal

يتكون سطر الأوامر من اسم الأمر cordova ، متبوعًا بالأمر الفرعي create . يتم استدعاء الأمر الفرعي بثلاث معلمات إضافية: المجلد الذي سيتم وضع التطبيق فيه ، ومساحة اسم التطبيق ، واسم العرض الخاص به. يؤدي هذا إلى تمهيد التطبيق في مجلد بالهيكل التالي:

 toptal/ |-- hooks/ |-- platforms/ |-- plugins/ |-- www/ `-- config.xml

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

بينما يسمح لك كوردوفا بتطوير تطبيق لمنصات مختلفة ، تحتاج أحيانًا إلى إضافة تخصيصات. عند التطوير لأنظمة أساسية متعددة ، لا تريد تعديل ملفات المصدر في مختلف platforms/[platform-name][assets]/www ، لأنه يتم استبدالها بانتظام بملفات www ذات المستوى الأعلى.

في هذه المرحلة ، يمكنك أيضًا فتح ملف config.xml وتغيير البيانات الوصفية لتطبيقك ، مثل المؤلف والوصف.

أضف منصتك الأولى باستخدام:

 cordova platform add android

إذا غيرت رأيك لاحقًا ، فيمكنك إزالة نظام أساسي من عملية الإنشاء بسهولة:

 cordova platform rm android

عند فحص دليل الأنظمة الأساسية ، ستلاحظ مجلد android بداخله. لكل منصة تقوم بإضافتها ، سيقوم كوردوفا بإنشاء دليل جديد في الأنظمة الأساسية ونسخ مجلد www بداخله. على سبيل المثال ، إذا كنت تريد تخصيص تطبيقك لنظام Android ، فيمكنك تعديل الملفات في platforms/android/assets/www والتبديل إلى أدوات shell الخاصة بالمنصة.

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

إذا كنت تريد الاستمرار في استخدام سير العمل عبر الأنظمة الأساسية وما زلت تقوم بإجراء تخصيصات خاصة بالنظام الأساسي ، فيجب عليك استخدام مجلد الدمج ذي المستوى الأعلى. بدءًا من الإصدار 3.5 من كوردوفا وما بعده ، تمت إزالة هذا المجلد من قالب التطبيق الافتراضي ، ولكن إذا كنت في حاجة إليه ، فيمكنك ببساطة إنشائه جنبًا إلى جنب مع أدلة المستوى الأعلى الأخرى ( hooks platforms plugins و www ).

يتم وضع التخصيصات الخاصة merges/[platform-name] ، ويتم تطبيقها بعد الملفات المصدر في مجلد www ذي المستوى الأعلى. بهذه الطريقة ، يمكنك إما إضافة ملفات مصدر جديدة لأنظمة أساسية معينة ، أو يمكنك تجاوز ملفات المصدر عالية المستوى بالكامل بملفات خاصة بالنظام الأساسي. خذ الهيكل التالي على سبيل المثال:

 merges/ |-- wp8/ | `-- app.js |-- android/ | `-- android.js |-- www/ `-- app.js

في هذه الحالة ، سيحتوي ملف الإخراج لنظام Android على كل من ملفات app.js و android.js ، لكن ملف الإخراج لـ Windows Phone 8 سيحتوي فقط على ملف app.js الموجود في مجلد merges/wp8 ، منذ الملفات في عمليات merges/[platform] تتجاوز الملفات الموجودة في www .

يحتوي دليل المكونات الإضافية على معلومات عن المكونات الإضافية لكل نظام أساسي. في هذه المرحلة ، يجب أن يكون لديك ملف android.json فقط الذي يجب أن يحتوي على الهيكل التالي:

 { "prepare_queue": { "installed": [], "uninstalled": [] }, "config_munge": { "files": {} }, "installed_plugins": {}, "dependent_plugins": {} }

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

يوفر Cordova العديد من خطوات CLI لإنشاء تطبيقاتك وتشغيلها: cordova prepare ، و cordova compile ، و cordova build (وهو اختصار للخطوتين السابقتين) ، cordova emulate و cordova run (الذي يشتمل على build ويمكن تشغيل المحاكي أيضًا). يجب ألا يربك هذا الأمر ، لأنه في معظم الحالات قد ترغب في إنشاء وتشغيل تطبيقك في المحاكي:

 cordova run --emulator

إذا كنت ترغب في ذلك ، يمكنك توصيل جهازك من خلال منفذ USB ، وتمكين وضع تصحيح أخطاء USB ونشر تطبيق Apache Cordova الأول مباشرة على جهازك الذي يعمل ببساطة:

 cordova run

سيؤدي هذا إلى نسخ جميع ملفاتك إلى platforms/* وتنفيذ جميع المهام المطلوبة.

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

 cordova run android --emulator

أو

 cordova run ios --emulator --target="iPhone-8-Plus"

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

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

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

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/toptal.css" /> <title>Hello Toptal</title> </head> <body> <div> <div> </div> </div> <footer> <ul> <li class="tab-button active" data-tab="#search-tab">Search Projects</li> <li class="tab-button" data-tab="#add-tab">Post a Project</li> </ul> </footer> <div></div> <script src="js/lib/jquery-1.11.1.min.js"></script> <script src="js/lib/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/SQLiteStorageService.js"></script> <script type="text/javascript" src="js/Controller.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>

لاحظ أنني قمت بإضافة Bootstrap و jQuery Mobile كاعتماديات. يرجى العلم أنه تم تطوير حلول وأطر عمل أفضل بكثير لبناء تطبيقات هجينة حديثة ، ولكن نظرًا لأن معظم مطوري الويب (إن لم يكن جميعهم) على دراية بهاتين المكتبتين ، فمن المنطقي استخدامها في برنامج تعليمي للمبتدئين. يمكنك تنزيل أوراق الأنماط من GitHub أو استخدام أوراق الأنماط الخاصة بك ، إذا كنت تفضل ذلك.

دعنا ننتقل إلى ملف index.js ، ونجرده إلى ما يلي:

 var app = { // Application Constructor initialize: function() { if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { this.onDeviceReady(); } }, onDeviceReady: function() { // We will init / bootstrap our application here }, }; app.initialize();

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

 var Controller = function() { var controller = { self: null, initialize: function() { self = this; this.bindEvents(); self.renderSearchView(); }, bindEvents: function() { $('.tab-button').on('click', this.onTabClick); }, onTabClick: function(e) { e.preventDefault(); if ($(this).hasClass('active')) { return; } var tab = $(this).data('tab'); if (tab === '#add-tab') { self.renderPostView(); } else { self.renderSearchView(); } }, renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $projectTemplate = $('.project').remove(); // Load projects here }); } } controller.initialize(); return controller; }

لدى وحدة التحكم طريقتان حتى الآن ، واحدة لعرض طريقة عرض البحث والأخرى لعرض طريقة عرض "ترحيل المشروع". دعنا نهيئها في ملف index.js الخاص بنا عن طريق إعلانها أولاً في الأعلى وإنشاءها في طريقة onDeviceReady:

 // top of index.js var controller = null

 // inside onDeviceReady method controller = new Controller();

أخيرًا ، أضف مرجعًا للبرنامج النصي في index.html أعلى المرجع إلى index.js . يمكنك تنزيل طرق عرض البحث والنشر مباشرة من GitHub. نظرًا لأن العروض الجزئية تتم قراءتها من ملف ، فإن بعض المتصفحات مثل Chrome ، أثناء محاولة عرض صفحتك ، ستشتكي من الطلبات عبر النطاقات.

سيكون الحل الممكن هنا هو تشغيل خادم ثابت محلي ، على سبيل المثال باستخدام وحدة node-static npm. أيضًا ، هنا يمكنك البدء في التفكير في استخدام بعض الأطر مثل PhoneGap و / أو Ionic. توفر جميعها مجموعة من أدوات التطوير ، بما في ذلك المحاكاة في المتصفح وإعادة التحميل السريع وإنشاء الكود (السقالات).

في الوقت الحالي ، دعنا ننشر ببساطة على جهاز Android عن طريق تشغيل ما يلي:

 cordova run android

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

تسمح علامة التبويب الثانية بنشر المشاريع الجديدة:

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

• التخزين المحلي
• WebSQL
• مفهرسة ديسيبل
• التخزين من جانب الخادم الذي يتم الوصول إليه من خلال خدمة الويب
• توفر المكونات الإضافية لجهات خارجية خيارات أخرى

يعد LocalStorage مناسبًا لتخزين كميات صغيرة من البيانات ، ولكنه لن يكون كافياً إذا كنت تقوم ببناء تطبيق كثيف البيانات ، حيث تتراوح المساحة المتاحة من 3 إلى 10 ميجا بايت. قد يكون IndexedDB حلاً أفضل لهذه الحالة. WebSQL مهمل وغير مدعوم في بعض الأنظمة الأساسية. أخيرًا ، يتناسب استخدام خدمات الويب لجلب البيانات وتعديلها بشكل جيد مع نموذج SPA ، ولكنه ينهار عندما يصبح تطبيقك غير متصل بالإنترنت. لقد دخلت تقنيات PWA جنبًا إلى جنب مع عمال الخدمة في عالم كوردوفا مؤخرًا للمساعدة في ذلك.

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

 cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin

يوفر SQLitePlugin واجهة برمجة تطبيقات لقاعدة بيانات SQLite بالجهاز ويعمل كآلية ثبات حقيقية. يمكننا إنشاء خدمة تخزين بسيطة بالطريقة التالية:

 SQLiteStorageService = function () { var service = {}; var db = window.sqlitePlugin ? window.sqlitePlugin.openDatabase({name: "demo.toptal", location: "default"}) : window.openDatabase("demo.toptal", "1.0", "DB para FactAV", 5000000); service.initialize = function() { // Initialize the database var deferred = $.Deferred(); db.transaction(function(tx) { tx.executeSql( 'CREATE TABLE IF NOT EXISTS projects ' + '(id integer primary key, name text, company text, description text, latitude real, longitude real)' ,[], function(tx, res) { tx.executeSql('DELETE FROM projects', [], function(tx, res) { deferred.resolve(service); }, function(tx, res) { deferred.reject('Error initializing database'); }); }, function(tx, res) { deferred.reject('Error initializing database'); }); }); return deferred.promise(); } service.getProjects = function() { // fetch projects } service.addProject = function(name, company, description, addLocation) { // add a new project } return service.initialize(); }

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

 initialize: function() { self = this; new SQLiteStorageService().done(function(service) { self.storageService = service; self.bindEvents(); self.renderSearchView(); }).fail(function(error) { alert(error); }); }

إذا قمت بإلقاء نظرة خاطفة على service.addProject () ، فستلاحظ أنها تجري مكالمة إلى طريقة navigator.geolocation.getCurrentPosition (). يحتوي كوردوفا على مكون إضافي لتحديد الموقع الجغرافي يمكنك استخدامه للحصول على الموقع الحالي للهاتف ، ويمكنك حتى استخدام طريقة navigator.geolocation.watchPosition () لتلقي التحديثات عندما يتغير موقع المستخدم.

أخيرًا ، دعنا نضيف مقابض أحداث وحدة التحكم لإضافة المشاريع وإحضارها من قاعدة البيانات:

 renderPostView: function() { $('.tab-button').removeClass('active'); $('#post-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); $("#tab-content").load("./views/post-project-view.html", function(data) { $('#tab-content').find('#post-project-form').on('submit', self.postProject); }); }, postProject: function(e) { e.preventDefault(); var name = $('#project-name').val(); var description = $('#project-description').val(); var company = $('#company').val(); var addLocation = $('#include-location').is(':checked'); if (!name || !description || !company) { alert('Please fill in all fields'); return; } else { var result = self.storageService.addProject( name, company, description, addLocation); result.done(function() { alert('Project successfully added'); self.renderSearchView(); }).fail(function(error) { alert(error); }); } }, renderSearchView: function() { $('.tab-button').removeClass('active'); $('#search-tab-button').addClass('active'); var $tab = $('#tab-content'); $tab.empty(); var $projectTemplate = null; $("#tab-content").load("./views/search-project-view.html", function(data) { $('#addressSearch').on('click', function() { alert('Not implemented'); }); $projectTemplate = $('.project').remove(); var projects = self.storageService.getProjects().done(function(projects) { for(var idx in projects) { var $div = $projectTemplate.clone(); var project = projects[idx]; $div.find('.project-name').text(project.name); $div.find('.project-company').text(project.company); $div.find('.project-description').text(project.description); if (project.location) { var url = '<a target="_blank" href="https://www.google.com.au/maps/preview/@' + project.location.latitude + ',' + project.location.longitude + ',10z">Click to open map</a>'; $div.find('.project-location').html(url); } else { $div.find('.project-location').text("Not specified"); } $tab.append($div); } }).fail(function(error) { alert(error); }); }); }

لإضافة وحدة التحكم ومكونات الحوار الإضافية ، قم بتنفيذ ما يلي:

 cordova plugin add org.apache.cordova.dialogs cordova plugin add org.apache.cordova.console

سيساعدك المكون الإضافي cordova.console في تصحيح الأخطاء من خلال تمكين وظيفة console.log() داخل المحاكيات.

يمكنك بسهولة تصحيح أخطاء تطبيقات Android من خلال مصحح أخطاء Chrome عن بُعد. بمجرد توصيل جهازك ، انقر فوق القائمة المنسدلة في الزاوية اليمنى العليا (أسفل الزر X) ، وقم بتوسيع المزيد من الأدوات ، وانقر فوق فحص الأجهزة. يجب أن ترى جهازك في القائمة ويجب أن تكون قادرًا على فتح وحدة التصحيح الخاصة به.

يوفر Safari نفس الوظيفة لتصحيح أخطاء تطبيقات iOS التي تعمل على جهاز أو محاكي متصل بـ USB. ما عليك سوى تمكين Developer Tools ضمن Safari Settings> علامة التبويب Advanced.

يُمكّن المكون الإضافي cordova.dialogs الإخطارات الأصلية. من الممارسات الشائعة إعادة تعريف طريقة windows.alert باستخدام cordova.dialogs API بالطريقة التالية:

 overrideBrowserAlert: function() { if (navigator.notification) { // Override default HTML alert with native dialog window.alert = function (message) { navigator.notification.alert( message, // message null, // callback "Toptal", // title 'OK' // buttonName ); }; } }

يجب استدعاء الدالة overrideBrowserAlert داخل معالج الحدث deviceready .

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

دعنا نضيف لمسة نهائية إلى التطبيق عن طريق تعيين رمز وشاشة البداية. أضف ما يلي إلى ملف config.xml الخاص بك:

 <platform name="android"> <icon src="www/img/logo.png" /> <splash src="www/img/logo.png" density="mdpi"/> <splash src="www/img/logo.png" density="hdpi"/> <splash src="www/img/logo.png" density="xhdpi"/> </platform>

أخيرًا ، ضع صورة شعار في مجلد www/img .

تطبيق كوردوفا الخاص بك

لقد مررنا بالخطوات الأساسية لتطوير تطبيق Apache Cordova واستخدمنا بنية JavaScript الخاصة بنا وورقة أنماط CSS. كان هذا البرنامج التعليمي من كوردوفا محاولة لإظهار إمكانات Apache Cordova كوسيلة لتطوير تطبيقات الهاتف المحمول باستخدام تقنيات مألوفة ، مما يقلل من وقت التطوير والجهد المطلوب لبناء تطبيقات متعددة لمنصات مختلفة.

ومع ذلك ، عند إنشاء التطبيقات التي ستدخل حيز الإنتاج ، يوصى باستخدام إطار عمل موجود. بالإضافة إلى هيكلة التطبيق الخاص بك في بنية محددة مسبقًا ، قد يوفر لك هذا أيضًا مجموعة من المكونات التي ستساعد تطبيقك على الاقتراب من الشكل والمظهر الأصليين. بعض الأطر الجديرة بالملاحظة هي Ionic و Framework7 و Weex و Ratchet و Kendo UI و Onsen UI. حظا سعيدا!