كيف تكتب كوردوفا الإضافات

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

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

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

دعنا نبدأ في المربع رقم واحد والسير خلال عملية أن نصبح مطور برامج إضافي لـ Cordova. أعتقد أنك ستجد أنه أقل تخويفًا مما يبدو!

0. ما هو البرنامج المساعد Cordova؟

قبل أن ندخل في بناء أول مكون إضافي لـ Cordova ، دعنا نرجع ونتحدث عن مكون إضافي من Cordova ، وبالتالي ، Cordova.

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

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

يعني بناء مكونات Cordova أننا نكتب بعض جافا سكريبت للاتصال بالرمز الأصلي (Obj-c / Swift ، Java ، إلخ) الذي نكتبه أيضًا ، ونعيد النتيجة إلى JavaScript.

لتلخيصها: نقوم ببناء مكون إضافي من Cordova عندما نريد أن نفعل شيئًا أصليًا لا يحتوي على مثيل لـ Web API ، مثل الوصول إلى بيانات HealthKit على iOS أو استخدام Fingerprint Scanner على Android.

1. الشروع في العمل: السقالات المكون الأول لدينا

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

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

نرى بعض الملفات والدلائل هنا ، ولكن الأهم من ذلك: plugin.xml و src و www:

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

التالي هو src. هذا هو المكان الذي يعيش فيه رمزنا الأصلي. إذا نظرنا إلى هنا سنرى مجلد ios و android.

أخيرًا ، www هو المكان الذي يعيش فيه رمز JavaScript لبرنامجنا الإضافي. هذا ما يطلق عليه أولاً ثم ينطلق Cordova للاتصال بالرمز الأصلي الخاص بنا.

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

2. تكوين البرنامج المساعد لدينا

الآن عن الجزء المفضل لدي: كتابة XML !!! 1

حسنًا ، إنه ليس بريقًا ، لكن ملف plugin.xml هو المكان الذي يحدث فيه كل شيء وهو المكان الذي يجب أن نبدأ فيه. أولاً ، نحتاج إلى إعطاء المكون الإضافي اسمًا ومعرفًا فريدين. بقدر ما تذهب اصطلاحات التسمية ، عادةً ما يكون المُعرّف بالشكل هذا المكون الإضافي ، مثل cordova-plugin-device (على سبيل المثال):

بعد ذلك ، سنقوم بتعيين إشارة إلى رمز JavaScript لدينا:

في لمحة ، تحدد js-module رمز JS الذي سيتم تشغيله ، وتعيين ما هو إطار النافذة الذي سيتم تصدير المكون الإضافي به. لذلك ، في هذه الحالة ، يكون ملف البرنامج النصي الخاص بنا هو www / plugin.js ، وعندما يتم تشغيل تطبيقنا ، سنكون قادرين على الوصول إلى المكون الإضافي من window.MyCordovaPlugin.

بعد ذلك ، نحدد الأنظمة الأساسية التي سندعمها ، إلى جانب إشارات إلى الكود الأصلي المقابل لكل منها ، بدءًا من Android:

داخل ، نحدد اسم حزمة Android الخاص بنا وأيضًا الرمز الذي ستستخدمه Cordova لتحديد المكوِّن الإضافي لدينا ، وهو في هذه الحالة MyCordovaPlugin. أخيرًا ، لدينا إشارة إلى شفرة Java الرئيسية الخاصة بنا داخل حيث يعيش رمزنا الأصلي.

دعنا نلقي نظرة على ios:

في هذا المقتطف ، نرى الكثير من الأشياء نفسها من Android. داخل لدينا إدخال مماثل لنظام Android بدون تنسيق حزمة Java. أخيرًا ، نقوم بإدراج الملفات المصدر التي ستنسخها Cordova إلى تطبيقنا قبل الإنشاء ، مع التأكد من تحديد كل من ملفات الرأس والمصدر التي سنضمها. ملاحظة: يمكن إنشاء المكونات الإضافية في Swift ، ولكن نظرًا لأن Cordova لا يزال في Objective-C ولأنه يوجد مقدار ضئيل للغاية من استخدام Swift ، فسوف نركز على Objective-c في الوقت الحالي.

3. بناء البرنامج المساعد لدينا: جافا سكريبت

لنبدأ بواجهة JavaScript API التي نرغب في عرضها للمطور. في هذه الحالة ، يعيش رمز JavaScript في www / plugin.js. إليك ما يبدو عليه:

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

window.MyCordovaPlugin.echo ("مرحبًا!" ، function () {// callback})

الكود الذي يفعل السحر هنا هو وظيفة exec التي استوردناها من cordova / exec. عند الاتصال ، يخبر هذا المكون الإضافي طبقة المكون الإضافي لـ Cordova بالعثور على المكون الإضافي المحدد بواسطة PLUGIN_NAME وإرسال الإجراء الذي تم تمريره إلى استدعاء دالة (iOS) أو وظيفة التبديل (android). من الممارسات الجيدة التأكد من أن اسم رمز Cordova الذي نوفره للمكون الإضافي (في هذه الحالة MyCordovaPlugin) يطابق إعداد من plugin.xml ، حيث سيكون ذلك هو متغير النافذة الذي نصل إليه.

بالنسبة للعديد من المكونات الإضافية ، يكون هذا الأمر معقدًا بقدر ما يحتاجون إليه للحصول على جانب جافا سكريبت ، حيث أن الكود الأصلي يقوم بكل العمل. ومع ذلك ، أتوسل إلى مطوري برامج Cordova في المستقبل أن يفكروا بقوة في القيام بالمزيد من العمل الفعلي في JavaScript بدلاً من الكود الأصلي. على سبيل المثال ، تجنب أشياء مثل معالجة السلسلة ، وترميز JSON ، وما إلى ذلك في الكود الأصلي لأن لديك المزيد من التعليمات البرمجية الخاصة بالنظام للمحافظة عليها ، وغالبًا ما يؤدي جافا سكريبت هذه المهام بأعباء عقلية أقل بكثير للمطور (اقرأ: معالجة السلسلة في الهدف- C هو المعاناة مثل كل الجحيم). إليك أحد الإضافات التي تعمل بها العديد من المنصات في طبقة JavaScript ، فقط باستخدام الطبقة الأصلية للحصول على البيانات التي لا تستطيع طبقة JS.

4. بناء البرنامج المساعد لدينا: الأصلي دائرة الرقابة الداخلية

الآن من أجل الجزء الممتع: كتابة بعض كود الهدف الأصلي من نظام التشغيل iOS.

لنبدأ بملف الرأس Objective-C ، في src / ios / MyCordovaPlugin.h:

يعد ملف الرأس هذا أحد مواصفات الوظائف التي سننفذها في ملفنا المقابل .m ، MyCordovaPlugin.m:

يتم استدعاء هذه الطرق عبر Cordova عندما نقوم بتشغيل exec () من JavaScript. يأخذون وسيطة CDVInvokedUrlCommand * التي تحتوي على الوسيطات التي تم تمريرها من JS ، مع الإشارة إلى رد الاتصال الذي مر به المستخدم. يمكننا تكوين رد الاتصال للعمل مرة واحدة فقط ، أو ليتم الاتصال مرارًا وتكرارًا (باستخدام [نتيجة setKeepCallbackAsBool]).

مرة واحدة في هذه الطريقة ، نحن نقوم بالهدف الأول C. أي شيء يمكنك أن تحلم به أصلاً يمكنك القيام به هنا. عندما تنتهي من ذلك وتريد إرجاع البيانات إلى JS ، قم بإنشاء كائن CDVPluginResult وأرسله إلى commandDelegate والذي يرسل النتيجة مرة أخرى إلى JS.

في المثال أعلاه ، تقوم طريقة الصدى فقط باستدعاء NSLog لترديد السلسلة التي يمر بها المستخدم ، بينما يحصل getDate على تاريخ أصلي من iOS ثم يحوله إلى سلسلة ISO ويعيدها.

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

5. بناء لدينا الروبوت المساعد

بناء جزء أندرويد من المكون الإضافي لدينا هو نفسه من الناحية النظرية تمامًا ، ولكن الإضافات التي تعمل بنظام أندرويد لها دلالات مختلفة قليلاً. إليك ما يشبه src / android / com / example / MyCordovaPlugin.java:

بالنسبة إلى Android ، لدينا طريقة تنفيذ واحدة واحدة يستدعيها Cordova مع الإجراء الذي وضعناه في exec () على جانب JS ، جنبًا إلى جنب مع الوسائط وسياق رد الاتصال. وبالتالي ، بدلاً من استدعاء Cordova لطريقتنا مباشرةً ، يتعين علينا التحقق من سلسلة الإجراءات مقابل كل اسم إجراء ندعمه ، وفي هذه الحالة "echo" و "getDate". بعد ذلك ، نقوم بتنفيذ الإجراء ونعيد النتيجة تمامًا كما في iOS Side.

مرة أخرى ، لمشاهدة مكوّن إضافي أكثر تعقيدًا لنظام Android ، ألق نظرة على مصدر مكون Geolocation.

6. اختبار الإضافات

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

لاختبار مكون Cordova الإضافي ، نحتاج إلى تشغيل تطبيق Cordova / PhoneGap / Ionic. الإضافات Cordova ليست runnable من تلقاء نفسها.

على افتراض أن لدينا تطبيق Cordova حاليًا ، يمكننا إضافة مكوننا الإضافي محليًا:

cordova plugin add --link ~ / git / echo-plugin

تضيف علامة الارتباط المكون الإضافي الخاص بنا كارتباط رمزي ، مما يعني أنه يمكننا العمل على الكود الخاص بنا (على الأقل الكود الأصلي) وإعادة بناء التطبيق وتشغيله دون الحاجة إلى إضافة المكوّن الإضافي مرة أخرى. ومع ذلك ، لسبب ما ، لا يتم تحديث جانب JavaScript في المكون الإضافي الخاص بنا تلقائيًا. أثناء قيامنا ببناء وتعديل جانب JS ، يتعين علينا إزالة المكون الإضافي بسرعة باستخدام cordova rm my-cordova-plugin وإضافته كما فعلنا من قبل.

لاختبار المكوّن الإضافي ، نقوم بتشغيل تطبيقنا كما هو معتاد ، وذلك باستخدام تقنيات تصحيح Cordova القياسية (إرفاق أدوات تطوير المتصفح ، واستخدام وحدة التحكم IDE ، إلخ).

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

7. إلى أين أذهب من هنا

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

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

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

القرصنة سعيدة!