الفرق بين المراجعتين لصفحة: «Cordova/plugins»
لا ملخص تعديل |
تحديث |
||
(7 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الإضافات في | <noinclude>{{DISPLAYTITLE:دليل تطوير الإضافات في كوردوفا}}</noinclude> | ||
[[تصنيف: Cordova]] | [[تصنيف: Cordova]] | ||
[[تصنيف: | [[تصنيف: Cordova Plugin]] | ||
الإضافة هي حزمة من الأكواد البرمجية التي تسمح [[Cordova/webviews|لعارض كوردوفا]] (Cordova webview)، الذي يُعرض التطبيق من خلاله، التواصل مع المنصة الأصلية (native platform) التي يعمل عليها. توفر الإضافات إمكانية الوصول إلى وظائف الجهاز والمنصة غير المتوفرة عادةً للتطبيقات الشبكية (web-based apps). كل ميزات واجهة كوردوفا البرمجية (Cordova API) الرئيسية تنفَّذ على أنَّها إضافات، فضلًا عن العديد من الإضافات الأخرى التي تتيح ميزات أخرى، مثل ماسحات الرموز الشريطية (bar code scanners) والتحكم باتصالات NFC، وتصميم واجهات التقويم الزمني ...إلخ. يمكنك البحث عن الإضافات على [https://cordova.apache.org/plugins/ صفحة البحث عن الإضافات]. | |||
تشتمل الإضافات على واجهة [[JavaScript]] واحدة إلى جانب المكتبات الأصلية (native code libraries) المقابلة لكل منصة مدعومة. الهدف هو حجب الأكواد الأصلية (native code) وراء واجهة [[JavaScript]] | تشتمل الإضافات على واجهة [[JavaScript]] واحدة إلى جانب المكتبات الأصلية (native code libraries) المقابلة لكل منصة مدعومة. الهدف هو حجب الأكواد الأصلية (native code) وراء واجهة مشتركة بلغة [[JavaScript]]. | ||
يوضح هذا القسم خطوات إنشاء إضافة | يوضح هذا القسم خطوات إنشاء إضافة بسيطة تعمل على تمرير سلسلة نصية من [[JavaScript]] إلى المنصة الأصلية، والعكس بالعكس. يمكنك استخدامها كنموذج لبناء ميزات أكثر تعقيدًا. يناقش هذا القسم البنية الأساسية للإضافات وواجهة [[JavaScript]] المقدمة. للحصول على مزيد من المعلومات بخصوص الواجهات الأصلية (native interfaces) المقابلة، انظر القائمة في نهاية هذا القسم. | ||
بالإضافة إلى هذه الإرشادات، | بالإضافة إلى هذه الإرشادات، وقبل أن تكتب إضافة جديدة، من الأفضل أن تلقي نظرة على [http://cordova.apache.org/contribute الإضافات الموجودة] للحصول على إرشادات. | ||
==بناء الإضافة== | ==بناء الإضافة== | ||
يستخدم مطورو التطبيقات تعليمة [[Cordova/cli|واجهة سطر الأوامر]] <code>cordova plugin add</code> لإضافة إضافة معينة إلى | يستخدم مطورو التطبيقات تعليمة [[Cordova/cli|واجهة سطر الأوامر]] <code>cordova plugin add</code> لإضافة إضافة معينة إلى المشروع. الوسيط المُعطى لهذه التعليمة هو عنوان مستودع git الذي يحتوي على شيفرة الإضافة. ينفِّذ هذا المثال الإضافة [https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/ Device]:<syntaxhighlight lang="console">cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git | ||
</syntaxhighlight>يجب أن يحتوي مستودع الإضافة على ملف البيان <code>plugin.xml</code> في المجلد الجذري. هناك عدة طرق لإعداد هذا الملف، يمكنك الاطلاع عليها في صفحة [https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html مواصفات الإضافات]. توفر هذه النسخة المختصرة من الإضافة [https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/ <code>Device</code>] مثالاً بسيطًا يمكن استخدامه كنموذج:<syntaxhighlight lang="xml"><?xml version="1.0" encoding="UTF-8"?> | |||
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" | <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" | ||
id="cordova-plugin-device" version="0.2.3"> | id="cordova-plugin-device" version="0.2.3"> | ||
سطر 29: | سطر 30: | ||
<source-file src="src/ios/CDVDevice.m" /> | <source-file src="src/ios/CDVDevice.m" /> | ||
</platform> | </platform> | ||
</plugin> | </plugin></syntaxhighlight>لتحديد حزمة الإضافة، تستخدم الخاصية <code>id</code> الموجودة في الوسم <code>plugin</code> نفس تنسيق النطاق العكسي (reverse domain format) الذي تستخدمه التطبيقات التي ستُضاف إليها. يحدد الوسم <code>js-module</code> مسار واجهة [[JavaScript|JavaScript]] المشتركة. كما يحدد الوسم <code>platform</code> الشيفرة الأصلية المقابلة (لمنصة <code>ios</code> في هذه الحالة). يغلّف (encapsulates) الوسمُ <code>config-file</code> الوسم <code>feature</code> الذي تم تضمينه في الملف <code>config.xml</code> الخاص بالمنصة، لأجل تنبيه المنصة بالمكتبة الإضافية. يحدد الوسمان <code>header-file</code> و <code>source-file</code> مسار ملفات المكتبة. | ||
==التحقق من صحة الإضافة باستخدام <code>Plugman</code>== | ==التحقق من صحة الإضافة باستخدام <code>Plugman</code>== | ||
يمكنك استخدام <code>[[Cordova/plugman|plugman]]</code> للتحقق مما إذا كانت الإضافة ستُثبت بشكل صحيح في كل المنصات. | يمكنك استخدام <code>[[Cordova/plugman|plugman]]</code> للتحقق مما إذا كانت الإضافة ستُثبت بشكل صحيح في كل المنصات. ثبِّت [[Cordova/plugman|<code>plugman</code>]] باستخدام تعليمة [http://nodejs.org/ node] التالية:<syntaxhighlight lang="console">npm install -g plugman</syntaxhighlight>تحتاج إلى مجلد مصدري (source directory) صالح للتطبيق، مثل المجلد الجذري <code>www</code> المضمّن في المشروع الافتراضي المُنشأ عبر [[Cordova/cli|واجهة سطر الأوامر]]، كما هو موضح في صفحة [[Cordova/first app|أنشئ تطبيقك الأول]]. نفّذ بعد ذلك الأمر التالي لاختبار ما إذا كانت اعتماديات (dependencies) منصة iOS تُحمّل بالشكل المطلوب:<syntaxhighlight lang="console">plugman install --platform ios --project /path/to/my/project/www --plugin /path/to/my/plugin | ||
</syntaxhighlight>لمزيد من المعلومات حول خيارات <code>plugman</code>، راجع [[Cordova/plugman|هذه الصفحة]]. ولمزيد من المعلومات حول كيفية تنقيح (debug) الإضافات، راجع صفحات واجهات المنصات الأصلية (platform's native interface) في أسفل هذه الصفحة. | |||
==واجهة JavaScript== | ==واجهة JavaScript== | ||
توفر واجهة [[JavaScript]] | توفر واجهة [[JavaScript]] واجهةً أماميةً (front-facing interface) ما يجعلها على الأرجح أهم جزء في الإضافة. يمكنك بناء شيفرة [[JavaScript]] الخاصة بالإضافة بالطريقة التي تحب، ولكنك ستحتاج إلى استدعاء الدالة <code>cordova.exec</code> للتواصل مع المنصة الأصلية باستخدام الصياغة التالي:<syntaxhighlight lang="javascript">cordova.exec(function(winParam) {}, | ||
function(error) {}, | function(error) {}, | ||
"service", | "service", | ||
"action", | "action", | ||
["firstArgument", "secondArgument", 42, false]); | ["firstArgument", "secondArgument", 42, false]);</syntaxhighlight>يشرح ما يأتي وظيفة كل معامل من معاملات الدالة: | ||
* <code>function(winParam) {}</code>: دالة رد نداء النجاح (success callback function). بافتراض أن استدعاء <code>exec</code> مر بنجاح، فستنُفذ هذه الدالة مع المعامل التي مررتها إليها. | |||
<code>function(winParam) {}</code> | |||
دالة النجاح (success callback function). بافتراض أن استدعاء <code>exec</code> مر بنجاح، فستنُفذ هذه الدالة مع | |||
* <code>function(error) {}</code>: دالة رد نداء الخطأ (error callback function). إذا لم تكتمل العملية بنجاح، فستُنفَّذ هذه الدالة مع معامل اختياري. | |||
<code>" | * <code>"service"</code>: اسم الخدمة المراد استدعاؤها في المنصة الأصلية. يتوافق مع صنف أصلي، والذي ستجد معلومات أكثر تفصيلًا عنه في الأدلة الأصلية المذكورة أدناه. | ||
اسم الإجراء (action) المراد استدعاؤه في المنصة الأصلية. هذا يتوافق عمومًا مع تابع الصنف الأصلي. راجع الأدلة الأصلية المدرجة أدناه. | * <code>"action"</code>: اسم الإجراء (action) المراد استدعاؤه في المنصة الأصلية. هذا يتوافق عمومًا مع تابع الصنف الأصلي. راجع الأدلة الأصلية المدرجة أدناه. | ||
<code>[/* arguments */]</code> | * <code>[/* arguments */]</code>: مصفوفة من الوسائط لأجل تمريرها إلى البيئة الأصلية. | ||
==عينة عن واجهة JavaScript== | |||
== | يوضح هذا المثال إحدى الطرق الممكنة لتنفيذ واجهة [[JavaScript]] الخاصة بالإضافة:<syntaxhighlight lang="javascript">window.echo = function(str, callback) { | ||
يوضح هذا المثال إحدى الطرق الممكنة | |||
cordova.exec(callback, function(err) { | cordova.exec(callback, function(err) { | ||
callback('Nothing to echo.'); | callback('Nothing to echo.'); | ||
}, "Echo", "echo", [str]); | }, "Echo", "echo", [str]); | ||
}; | };</syntaxhighlight>في هذا المثال، تربط الإضافة نفسها بالكائن <code>window</code> باعتبارها الدالة <code>echo</code>، والتي سيستدعيها مستخدموا الإضافة على النحو التالي:<syntaxhighlight lang="javascript">window.echo("echome", function(echoValue) { | ||
alert(echoValue == "echome"); // | alert(echoValue == "echome"); // "true" سيعرض رسالة الإنذار | ||
}); | });</syntaxhighlight>انظر إلى الوسائط الثلاثة الأخيرة المُمررة إلى الدالة <code>cordova.exec</code>. يستدعي الأول الخدمة <code>Echo</code>، والتي هي اسم صنف. ويطلب الثاني الإجراء <code>echo</code>، والذي هو تابعٌ داخل ذلك الصنف. أما الثالث فهو مصفوفة من الوسائط التي تحتوي السلسلة النصية المعادة، والتي هي الوسيط الأول للدالة <code>window.echo</code>. | ||
دالة رد نداء النجاح المُمررة إلى <code>exec</code> هي مرجعٌ إلى دالة رد النداء التي تخص <code>window.echo</code>. إذا أطلقت المنصة الأصلية دالة رد نداء الخطأ (error callback)، فسيستدعي ببساطة دالة النجاح، ويمرر إليها السلسلة النصية الافتراضية. | |||
==الواجهات الأصلية== | |||
بمجرد إنهاء أكواد [[JavaScript]] الخاصة بالإضافة، فسيكون عليك تكميلها بتنفيذ أصلي (native implementation) واحد على الأقل. يمكنك إيجاد تفاصيل كل منصة أدناه، وكلها تُبنَى على مثال الإضافة <code>Echo</code> المذكور أعلاه: | |||
*[[Cordova/plugins android|إضافات أندرويد]] | |||
*[[Cordova/plugins ios|إضافات iOS]] | |||
*[[Cordova/plugins windows|إضافات ويندوز]] | |||
==نشر الإضافات== | ==نشر الإضافات== | ||
يمكنك نشر إضافتك في سجل قائم على مدير حُزم | يمكنك نشر إضافتك في سجل قائم على مدير حُزم <code>npmjs</code>-based registry) JavaScript)، لكن يوصى باستخدام [https://www.npmjs.com/ npm registry]. يمكن للمطورين الآخرين تثبيت إضافتك تلقائيًّا باستخدام إما [[Cordova/plugman|<code>plugman</code>]] أو [[Cordova/cli|واجهة سطر الأوامر]] في كوردوفا. | ||
لنشر الإضافة على مدير الحُزم npm، يلزمك اتباع الخطوات التالية: | لنشر الإضافة على مدير الحُزم npm، يلزمك اتباع الخطوات التالية: | ||
ثبِّت أولًا [[Cordova/plugman|<code>plugman</code>]] عبر الأمر التالب:<syntaxhighlight lang="console">$ npm install -g plugman</syntaxhighlight>أنشئ الملف <code>package.json</code> للإضافة خاصتك:<syntaxhighlight lang="console">$ plugman createpackagejson /path/to/your/plugin | |||
$ npm publish /path/to/your/ | </syntaxhighlight>انشرها:<syntaxhighlight lang="console">$ npm adduser # هذا في حال لم يكن لك حساب بعد | ||
==دمج الإضافة في خاصية البحث | $ npm publish /path/to/your/plugin</syntaxhighlight>لمزيد من التفاصيل حول استخدام npm، اطلع على صفحة [https://docs.npmjs.com/getting-started/publishing-npm-packages نشر حزم npm]. | ||
==دمج الإضافة في خاصية البحث== | |||
لإظهار الإضافة في صفحة [https://cordova.apache.org/plugins/ البحث عن الإضافات]، أضف الكلمة المفتاحية <code>ecosystem:cordova</code> إلى ملف <code>package.json</code> الخاص بالإضافة قبل نشرها. | لإظهار الإضافة في صفحة [https://cordova.apache.org/plugins/ البحث عن الإضافات]، أضف الكلمة المفتاحية <code>ecosystem:cordova</code> إلى ملف <code>package.json</code> الخاص بالإضافة قبل نشرها. | ||
للإشارة إلى أنّ الإضافة تدعم منصة معينة، أضف | للإشارة إلى أنّ الإضافة تدعم منصة معينة، أضف الصيغة <code>**cordova-<platformName>**</code> إلى قائمة الكلمات الرئيسية في <code>package.json</code> إذ يمثِّل <code><platformName></code> اسم المنصة. تقوم التعليمة <code>createpackagejson</code> الخاصة بسطر أوامر [[Cordova/plugman|<code>plugman</code>]] بعمل ذلك نيابة عنك، ولكن يمكنك إنشاء <code>package.json</code> يدويًا كما هو موضح أدناه. | ||
على سبيل المثال، بالنسبة إلى الإضافات التي تدعم أندرويد و iOS | على سبيل المثال، بالنسبة إلى الإضافات التي تدعم أندرويد و iOS وويندوز، يجب أن تضاف الكلمات الرئيسية التالية إلى الملف <code>package.json</code>:<syntaxhighlight lang="json">"keywords": [ | ||
"ecosystem:cordova", | "ecosystem:cordova", | ||
"cordova-android", | "cordova-android", | ||
"cordova-ios", | "cordova-ios", | ||
"cordova-windows" | "cordova-windows" | ||
]</syntaxhighlight>للحصول على مثال أكثر | ]</syntaxhighlight>للحصول على مثال أكثر تفصيلًا عن صياغة الملف <code>package.json</code>، راجع صفحة [https://github.com/apache/cordova-plugin-device/blob/master/package.json الملف package.json الخاص بالإضافة cordova-plugin-device]. | ||
==تحديد | ==تحديد الاعتماديات== | ||
أضافت Cordova 6.1.0 إمكانية تحديد | أضافت Cordova 6.1.0 إمكانية تحديد اعتماديات (dependencies) الإضافة داخل ملف الإضافة <code>package.json</code>. يمكن للإضافات أن تحدد الاعتماديات لمختلف الإصدارات لأجل إرشاد [[Cordova/cli|واجهة سطر الأوامر]] إلى إصدار الإضافة المراد جلبه من مدير الحُزم npm. ستختار [[Cordova/cli|واجهة سطر الأوامر]] أحدث إصدار من الإضافة، والذي يتوافق مع المنصة والإضافات المثبتة في المشروع المحلي، بالإضافة إلى إصدار [[Cordova/cli|واجهة سطر الأوامر]] المحلية. إذا لم يكن أيٌّ من إصدارات الإضافة متوافقًا، فستُنبّه [[Cordova/cli|واجهة سطر الأوامر]] المستخدمَ بخصوص فشل المتطلبات، ثم ستعود إلى سلوكها القديم في جلب الإصدار الأحدث. | ||
يُراد لهذه الميزة أن تستبدل الوسم <code>[https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#engines-and-engine <engines>]</code> في الملف <code>plugin.xml</code>. إدراج | يُراد لهذه الميزة أن تستبدل الوسم <code>[https://cordova.apache.org/docs/en/latest/plugin_ref/spec.html#engines-and-engine <engines>]</code> في الملف <code>plugin.xml</code>. إدراج الاعتماديات هو وسيلة جيدة لضمان ألا تتعطل إضافتك، أو تحدث أخطاء في البناء عند جلبها من مدير الحزم npm. إذا كان الإصدار الأخير من الإضافة غير متوافق مع المشروع، فستزوّد [[Cordova/cli|واجهة سطر الأوامر]] مطوّر التطبيق بقائمة تشمل متطلبات المشروع التي يحتاج إلى تلبيتها، حتى يكون على دراية بمشاكل التوافقية، ولكي يحدّّث مشروعه حتى يستخدم إضافتك. يسمح هذا الإجراء للإضافة بالتجاوب مع تغييرات الانهيار (breaking changes) دون الخوف من إرباك المطورين الذين سيحاولون بناء الإضافة انطلاقًا من منصات وإضافات قديمة. | ||
لتعيين | لتعيين اعتماديات الإضافة، قم بتعديل العنصر <code>engines</code> في الملف <code>package.json</code> ليتضمن الكائن <code>cordovaDependencies</code> وفق الصيغة التالية:<syntaxhighlight lang="json">"engines": { | ||
"cordovaDependencies": { | "cordovaDependencies": { | ||
PLUGIN_VERSION: { | PLUGIN_VERSION: { | ||
سطر 109: | سطر 99: | ||
} | } | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
* | *<code>PLUGIN_VERSION</code>: تحدد إصدار الإضافة. يمكن أن تحدد إما إصدارًا واحدًا كما هو مُعرّف في [https://www.npmjs.com/package/semver حزمة semver]، أو حدًا أعلى للإصدار (انظر أدناه). | ||
*<code>DEPENDENCY</code>: يمكن أن | *<code>DEPENDENCY</code>: يمكن أن تساوي هذه الخاصية إحدى القيم التالية: | ||
**[[Cordova/cli|واجهة سطر الأوامر]]: <code>"cordova"</code> | **[[Cordova/cli|واجهة سطر الأوامر]]: <code>"cordova"</code> | ||
**إحدى منصات | **إحدى منصات كوردوفا: <code>"cordova-android"</code> أو <code>"Cordova-ios"</code> أو <code>"cordova-windows"</code> ...إلخ. | ||
**إحدى إضافات | **إحدى إضافات كوردوفا: مثل <code>"cordova-plugin-camera"</code>. | ||
*<code>SEMVER_RANGE</code>: يجب أن تكون مجالًا كما هو محدد في [https://www.npmjs.com/package/semver حزمة semver] | *<code>SEMVER_RANGE</code>: يجب أن تكون مجالًا كما هو محدد في [https://www.npmjs.com/package/semver حزمة semver]. | ||
'''ملاحظة:''' تشير الخاصية <code>DEPENDENCY</code> إلى منصة | '''ملاحظة:''' تشير الخاصية <code>DEPENDENCY</code> إلى منصة كوردوفا، وليس إلى نظام التشغيل، مثل <code>cordova-android</code> وليس نظام التشغيل أندرويد. | ||
قد يحتوي الكائن <code>cordovaDependencies</code> على أي عدد من متطلبات <code>PLUGIN_VERSION</code> وأي عدد من قيود <code>DEPENDENCY</code>. سيتم افتراض أن إصدارات الإضافة التي لم تُدرج | قد يحتوي الكائن <code>cordovaDependencies</code> على أي عدد من متطلبات <code>PLUGIN_VERSION</code> وأي عدد من قيود <code>DEPENDENCY</code>. سيتم افتراض أن إصدارات الإضافة التي لم تُدرج اعتمادياتها لها نفس معلومات الاعتماديات لأعلى خاصية في <code>PLUGIN_VERSION</code> مدرجة أسفلها. افترض مثلًا استعمال المدخلات التالية:<syntaxhighlight lang="json">"engines": { | ||
"cordovaDependencies": { | "cordovaDependencies": { | ||
"1.0.0": { "cordova-android": "<3.0.0"}, | "1.0.0": { "cordova-android": "<3.0.0"}, | ||
"2.1.0": { "cordova-android": ">4.0.0"} | "2.1.0": { "cordova-android": ">4.0.0"} | ||
} | } | ||
} | }</syntaxhighlight>يُفترض أن جميع إصدارات الإضافة الموجودة تحت المُدخل الأدنى (الإصدار <code>1.0.0</code> في هذا المثال) ليس لها أية اعتماديات. كما يُفترَض أن يكون لكل إصدارات الإضافة الموجودة بين <code>1.0.0</code> و <code>2.1.0</code> نفس الاعتماديات التي لدى الإصدار <code>1.0.0</code> (منصة <code>Cordova-android</code> ذات إصدار أقل من <code>3.0.0</code>). لهذا يمكنك الاكتفاء بتحديث معلومات الكائن <code>cordovaDependencies</code> وحسب عندما تكون هناك تغييرات الانهيار (breaking changes). | ||
===الحد الأعلى | ===الحد الأعلى=== | ||
إضافة إلى إمكانية تحديد إصدار واحد، يمكن أن تحدد <code>PLUGIN_VERSION</code> في الكائن <code>cordovaDependencies</code> | إضافة إلى إمكانية تحديد إصدار واحد، يمكن أن تحدد <code>PLUGIN_VERSION</code> في الكائن <code>cordovaDependencies</code> حدًا أعلى (Upper Bound) لتعديل مُدخلات الإصدارات القديمة من الإضافة. هذا مفيد عند حدوث تغيير انهيار في الخاصية <code>DEPENDENCY</code>، وعندما تكون هناك حاجة لإضافة تقييد (constraint) جديد لكافة الإصدارات القديمة غير المدعومة من الإضافة. | ||
يجب كتابة هذه الحدود على هيئة <code><</code> متبوعة بإصدار | يجب كتابة هذه الحدود على هيئة <code><</code> متبوعة بإصدار [https://www.npmjs.com/package/semver semver] واحد (وليس مجال عشوائي). سيتم تطبيق ذلك كلما أُعطيت قيمة الخاصية <code>DEPENDENCY</code> لإصدارات الإضافة الموجودة أسفل الإصدار المحدد. القِ نظرة على المدخلات التالية التي افترضناها:<syntaxhighlight lang="json">"engines": { | ||
"cordovaDependencies": { | "cordovaDependencies": { | ||
"0.0.1": { "cordova-ios": ">1.0.0" }, | "0.0.1": { "cordova-ios": ">1.0.0" }, | ||
سطر 132: | سطر 122: | ||
"<2.0.0": { "cordova-ios": "<5.0.0" } | "<2.0.0": { "cordova-ios": "<5.0.0" } | ||
} | } | ||
}</syntaxhighlight>لقد حددنا هنا إصدارًا واحدًا (<code>0.0.1</code>) للإضافة، وحدّان علويان (<code><1.0.0</code> و <code><2.0.0</code>) يُقيّدان (constrain) منصة <code>[[Cordova/plugins ios|Cordova-ios]]</code>. لا يتجاوز (override) الحدان العلويان التقييد المحدد سابقًا (<code>0.0.1</code>)، بل يتم الجمع بينها عبر المعامل AND في وقت التقييم (evaluation time). عندما تتحقق [[Cordova/cli|واجهة سطر الأوامر]] من | }</syntaxhighlight>لقد حددنا هنا إصدارًا واحدًا (هو <code>0.0.1</code>) للإضافة، وحدّان علويان (<code><1.0.0</code> و <code><2.0.0</code>) يُقيّدان (constrain) منصة <code>[[Cordova/plugins ios|Cordova-ios]]</code>. لا يتجاوز (override) الحدان العلويان التقييد المحدد سابقًا (<code>0.0.1</code>)، بل يتم الجمع بينها عبر المعامل "AND" في وقت التقييم (evaluation time). عندما تتحقق [[Cordova/cli|واجهة سطر الأوامر]] من الإصدار <code>[[Cordova/plugins ios|Cordova-ios]]</code> الخاص بالمشروع، فإنّ التقييد (constraint) الذي سيُقيّم (evaluated) لأجل إصدار الإضافة <code>0.0.1</code> سيساوي ناتج التعبير التالي:<syntaxhighlight lang="text">cordova-ios >1.0.0 AND cordova-ios <2.0.0 AND cordova-ios <5.0.0</syntaxhighlight>تذكر أنَّ القيم <code>PLUGIN_VERSION</code> المسموح بها هي الإصدارات الفردية (single versions) أو الحدود العلوية (upper bounds) ولا تُدعَم مجالات [https://www.npmjs.com/package/semver semver] الأخرى. | ||
==انظر أيضًا== | |||
== انظر | *[[Cordova/plugins android|إضافات أندرويد]] | ||
* [[Cordova/plugins android|إضافات أندرويد]] | *[[Cordova/plugins ios|إضافات iOS]] | ||
* [[Cordova/plugins ios|إضافات iOS]] | *[[Cordova/plugins windows|إضافات ويندوز]] | ||
* [[plugins windows|إضافات ويندوز]] | |||
==مصادر== | ==مصادر== | ||
*[https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html قسم الإضافات في التوثيق الرسمي لكوردوفا.] | *[https://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html قسم الإضافات في التوثيق الرسمي لكوردوفا.] |
المراجعة الحالية بتاريخ 10:26، 1 ديسمبر 2020
الإضافة هي حزمة من الأكواد البرمجية التي تسمح لعارض كوردوفا (Cordova webview)، الذي يُعرض التطبيق من خلاله، التواصل مع المنصة الأصلية (native platform) التي يعمل عليها. توفر الإضافات إمكانية الوصول إلى وظائف الجهاز والمنصة غير المتوفرة عادةً للتطبيقات الشبكية (web-based apps). كل ميزات واجهة كوردوفا البرمجية (Cordova API) الرئيسية تنفَّذ على أنَّها إضافات، فضلًا عن العديد من الإضافات الأخرى التي تتيح ميزات أخرى، مثل ماسحات الرموز الشريطية (bar code scanners) والتحكم باتصالات NFC، وتصميم واجهات التقويم الزمني ...إلخ. يمكنك البحث عن الإضافات على صفحة البحث عن الإضافات.
تشتمل الإضافات على واجهة JavaScript واحدة إلى جانب المكتبات الأصلية (native code libraries) المقابلة لكل منصة مدعومة. الهدف هو حجب الأكواد الأصلية (native code) وراء واجهة مشتركة بلغة JavaScript.
يوضح هذا القسم خطوات إنشاء إضافة بسيطة تعمل على تمرير سلسلة نصية من JavaScript إلى المنصة الأصلية، والعكس بالعكس. يمكنك استخدامها كنموذج لبناء ميزات أكثر تعقيدًا. يناقش هذا القسم البنية الأساسية للإضافات وواجهة JavaScript المقدمة. للحصول على مزيد من المعلومات بخصوص الواجهات الأصلية (native interfaces) المقابلة، انظر القائمة في نهاية هذا القسم.
بالإضافة إلى هذه الإرشادات، وقبل أن تكتب إضافة جديدة، من الأفضل أن تلقي نظرة على الإضافات الموجودة للحصول على إرشادات.
بناء الإضافة
يستخدم مطورو التطبيقات تعليمة واجهة سطر الأوامر cordova plugin add
لإضافة إضافة معينة إلى المشروع. الوسيط المُعطى لهذه التعليمة هو عنوان مستودع git الذي يحتوي على شيفرة الإضافة. ينفِّذ هذا المثال الإضافة Device:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git
يجب أن يحتوي مستودع الإضافة على ملف البيان plugin.xml
في المجلد الجذري. هناك عدة طرق لإعداد هذا الملف، يمكنك الاطلاع عليها في صفحة مواصفات الإضافات. توفر هذه النسخة المختصرة من الإضافة Device
مثالاً بسيطًا يمكن استخدامه كنموذج:
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="cordova-plugin-device" version="0.2.3">
<name>Device</name>
<description>Cordova Device Plugin</description>
<license>Apache 2.0</license>
<keywords>cordova,device</keywords>
<js-module src="www/device.js" name="device">
<clobbers target="device" />
</js-module>
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="Device">
<param name="ios-package" value="CDVDevice"/>
</feature>
</config-file>
<header-file src="src/ios/CDVDevice.h" />
<source-file src="src/ios/CDVDevice.m" />
</platform>
</plugin>
لتحديد حزمة الإضافة، تستخدم الخاصية id
الموجودة في الوسم plugin
نفس تنسيق النطاق العكسي (reverse domain format) الذي تستخدمه التطبيقات التي ستُضاف إليها. يحدد الوسم js-module
مسار واجهة JavaScript المشتركة. كما يحدد الوسم platform
الشيفرة الأصلية المقابلة (لمنصة ios
في هذه الحالة). يغلّف (encapsulates) الوسمُ config-file
الوسم feature
الذي تم تضمينه في الملف config.xml
الخاص بالمنصة، لأجل تنبيه المنصة بالمكتبة الإضافية. يحدد الوسمان header-file
و source-file
مسار ملفات المكتبة.
التحقق من صحة الإضافة باستخدام Plugman
يمكنك استخدام plugman
للتحقق مما إذا كانت الإضافة ستُثبت بشكل صحيح في كل المنصات. ثبِّت plugman
باستخدام تعليمة node التالية:
npm install -g plugman
تحتاج إلى مجلد مصدري (source directory) صالح للتطبيق، مثل المجلد الجذري www
المضمّن في المشروع الافتراضي المُنشأ عبر واجهة سطر الأوامر، كما هو موضح في صفحة أنشئ تطبيقك الأول. نفّذ بعد ذلك الأمر التالي لاختبار ما إذا كانت اعتماديات (dependencies) منصة iOS تُحمّل بالشكل المطلوب:
plugman install --platform ios --project /path/to/my/project/www --plugin /path/to/my/plugin
لمزيد من المعلومات حول خيارات plugman
، راجع هذه الصفحة. ولمزيد من المعلومات حول كيفية تنقيح (debug) الإضافات، راجع صفحات واجهات المنصات الأصلية (platform's native interface) في أسفل هذه الصفحة.
واجهة JavaScript
توفر واجهة JavaScript واجهةً أماميةً (front-facing interface) ما يجعلها على الأرجح أهم جزء في الإضافة. يمكنك بناء شيفرة JavaScript الخاصة بالإضافة بالطريقة التي تحب، ولكنك ستحتاج إلى استدعاء الدالة cordova.exec
للتواصل مع المنصة الأصلية باستخدام الصياغة التالي:
cordova.exec(function(winParam) {},
function(error) {},
"service",
"action",
["firstArgument", "secondArgument", 42, false]);
يشرح ما يأتي وظيفة كل معامل من معاملات الدالة:
function(winParam) {}
: دالة رد نداء النجاح (success callback function). بافتراض أن استدعاءexec
مر بنجاح، فستنُفذ هذه الدالة مع المعامل التي مررتها إليها.
function(error) {}
: دالة رد نداء الخطأ (error callback function). إذا لم تكتمل العملية بنجاح، فستُنفَّذ هذه الدالة مع معامل اختياري.
"service"
: اسم الخدمة المراد استدعاؤها في المنصة الأصلية. يتوافق مع صنف أصلي، والذي ستجد معلومات أكثر تفصيلًا عنه في الأدلة الأصلية المذكورة أدناه.
"action"
: اسم الإجراء (action) المراد استدعاؤه في المنصة الأصلية. هذا يتوافق عمومًا مع تابع الصنف الأصلي. راجع الأدلة الأصلية المدرجة أدناه.
[/* arguments */]
: مصفوفة من الوسائط لأجل تمريرها إلى البيئة الأصلية.
عينة عن واجهة JavaScript
يوضح هذا المثال إحدى الطرق الممكنة لتنفيذ واجهة JavaScript الخاصة بالإضافة:
window.echo = function(str, callback) {
cordova.exec(callback, function(err) {
callback('Nothing to echo.');
}, "Echo", "echo", [str]);
};
في هذا المثال، تربط الإضافة نفسها بالكائن window
باعتبارها الدالة echo
، والتي سيستدعيها مستخدموا الإضافة على النحو التالي:
window.echo("echome", function(echoValue) {
alert(echoValue == "echome"); // "true" سيعرض رسالة الإنذار
});
انظر إلى الوسائط الثلاثة الأخيرة المُمررة إلى الدالة cordova.exec
. يستدعي الأول الخدمة Echo
، والتي هي اسم صنف. ويطلب الثاني الإجراء echo
، والذي هو تابعٌ داخل ذلك الصنف. أما الثالث فهو مصفوفة من الوسائط التي تحتوي السلسلة النصية المعادة، والتي هي الوسيط الأول للدالة window.echo
.
دالة رد نداء النجاح المُمررة إلى exec
هي مرجعٌ إلى دالة رد النداء التي تخص window.echo
. إذا أطلقت المنصة الأصلية دالة رد نداء الخطأ (error callback)، فسيستدعي ببساطة دالة النجاح، ويمرر إليها السلسلة النصية الافتراضية.
الواجهات الأصلية
بمجرد إنهاء أكواد JavaScript الخاصة بالإضافة، فسيكون عليك تكميلها بتنفيذ أصلي (native implementation) واحد على الأقل. يمكنك إيجاد تفاصيل كل منصة أدناه، وكلها تُبنَى على مثال الإضافة Echo
المذكور أعلاه:
نشر الإضافات
يمكنك نشر إضافتك في سجل قائم على مدير حُزم npmjs
-based registry) JavaScript)، لكن يوصى باستخدام npm registry. يمكن للمطورين الآخرين تثبيت إضافتك تلقائيًّا باستخدام إما plugman
أو واجهة سطر الأوامر في كوردوفا.
لنشر الإضافة على مدير الحُزم npm، يلزمك اتباع الخطوات التالية:
ثبِّت أولًا plugman
عبر الأمر التالب:
$ npm install -g plugman
أنشئ الملف package.json
للإضافة خاصتك:
$ plugman createpackagejson /path/to/your/plugin
انشرها:
$ npm adduser # هذا في حال لم يكن لك حساب بعد
$ npm publish /path/to/your/plugin
لمزيد من التفاصيل حول استخدام npm، اطلع على صفحة نشر حزم npm.
دمج الإضافة في خاصية البحث
لإظهار الإضافة في صفحة البحث عن الإضافات، أضف الكلمة المفتاحية ecosystem:cordova
إلى ملف package.json
الخاص بالإضافة قبل نشرها.
للإشارة إلى أنّ الإضافة تدعم منصة معينة، أضف الصيغة **cordova-<platformName>**
إلى قائمة الكلمات الرئيسية في package.json
إذ يمثِّل <platformName>
اسم المنصة. تقوم التعليمة createpackagejson
الخاصة بسطر أوامر plugman
بعمل ذلك نيابة عنك، ولكن يمكنك إنشاء package.json
يدويًا كما هو موضح أدناه.
على سبيل المثال، بالنسبة إلى الإضافات التي تدعم أندرويد و iOS وويندوز، يجب أن تضاف الكلمات الرئيسية التالية إلى الملف package.json
:
"keywords": [
"ecosystem:cordova",
"cordova-android",
"cordova-ios",
"cordova-windows"
]
للحصول على مثال أكثر تفصيلًا عن صياغة الملف package.json
، راجع صفحة الملف package.json الخاص بالإضافة cordova-plugin-device.
تحديد الاعتماديات
أضافت Cordova 6.1.0 إمكانية تحديد اعتماديات (dependencies) الإضافة داخل ملف الإضافة package.json
. يمكن للإضافات أن تحدد الاعتماديات لمختلف الإصدارات لأجل إرشاد واجهة سطر الأوامر إلى إصدار الإضافة المراد جلبه من مدير الحُزم npm. ستختار واجهة سطر الأوامر أحدث إصدار من الإضافة، والذي يتوافق مع المنصة والإضافات المثبتة في المشروع المحلي، بالإضافة إلى إصدار واجهة سطر الأوامر المحلية. إذا لم يكن أيٌّ من إصدارات الإضافة متوافقًا، فستُنبّه واجهة سطر الأوامر المستخدمَ بخصوص فشل المتطلبات، ثم ستعود إلى سلوكها القديم في جلب الإصدار الأحدث.
يُراد لهذه الميزة أن تستبدل الوسم <engines>
في الملف plugin.xml
. إدراج الاعتماديات هو وسيلة جيدة لضمان ألا تتعطل إضافتك، أو تحدث أخطاء في البناء عند جلبها من مدير الحزم npm. إذا كان الإصدار الأخير من الإضافة غير متوافق مع المشروع، فستزوّد واجهة سطر الأوامر مطوّر التطبيق بقائمة تشمل متطلبات المشروع التي يحتاج إلى تلبيتها، حتى يكون على دراية بمشاكل التوافقية، ولكي يحدّّث مشروعه حتى يستخدم إضافتك. يسمح هذا الإجراء للإضافة بالتجاوب مع تغييرات الانهيار (breaking changes) دون الخوف من إرباك المطورين الذين سيحاولون بناء الإضافة انطلاقًا من منصات وإضافات قديمة.
لتعيين اعتماديات الإضافة، قم بتعديل العنصر engines
في الملف package.json
ليتضمن الكائن cordovaDependencies
وفق الصيغة التالية:
"engines": {
"cordovaDependencies": {
PLUGIN_VERSION: {
DEPENDENCY: SEMVER_RANGE,
DEPENDENCY: SEMVER_RANGE,
...
},
...
}
}
PLUGIN_VERSION
: تحدد إصدار الإضافة. يمكن أن تحدد إما إصدارًا واحدًا كما هو مُعرّف في حزمة semver، أو حدًا أعلى للإصدار (انظر أدناه).DEPENDENCY
: يمكن أن تساوي هذه الخاصية إحدى القيم التالية:- واجهة سطر الأوامر:
"cordova"
- إحدى منصات كوردوفا:
"cordova-android"
أو"Cordova-ios"
أو"cordova-windows"
...إلخ. - إحدى إضافات كوردوفا: مثل
"cordova-plugin-camera"
.
- واجهة سطر الأوامر:
SEMVER_RANGE
: يجب أن تكون مجالًا كما هو محدد في حزمة semver.
ملاحظة: تشير الخاصية DEPENDENCY
إلى منصة كوردوفا، وليس إلى نظام التشغيل، مثل cordova-android
وليس نظام التشغيل أندرويد.
قد يحتوي الكائن cordovaDependencies
على أي عدد من متطلبات PLUGIN_VERSION
وأي عدد من قيود DEPENDENCY
. سيتم افتراض أن إصدارات الإضافة التي لم تُدرج اعتمادياتها لها نفس معلومات الاعتماديات لأعلى خاصية في PLUGIN_VERSION
مدرجة أسفلها. افترض مثلًا استعمال المدخلات التالية:
"engines": {
"cordovaDependencies": {
"1.0.0": { "cordova-android": "<3.0.0"},
"2.1.0": { "cordova-android": ">4.0.0"}
}
}
يُفترض أن جميع إصدارات الإضافة الموجودة تحت المُدخل الأدنى (الإصدار 1.0.0
في هذا المثال) ليس لها أية اعتماديات. كما يُفترَض أن يكون لكل إصدارات الإضافة الموجودة بين 1.0.0
و 2.1.0
نفس الاعتماديات التي لدى الإصدار 1.0.0
(منصة Cordova-android
ذات إصدار أقل من 3.0.0
). لهذا يمكنك الاكتفاء بتحديث معلومات الكائن cordovaDependencies
وحسب عندما تكون هناك تغييرات الانهيار (breaking changes).
الحد الأعلى
إضافة إلى إمكانية تحديد إصدار واحد، يمكن أن تحدد PLUGIN_VERSION
في الكائن cordovaDependencies
حدًا أعلى (Upper Bound) لتعديل مُدخلات الإصدارات القديمة من الإضافة. هذا مفيد عند حدوث تغيير انهيار في الخاصية DEPENDENCY
، وعندما تكون هناك حاجة لإضافة تقييد (constraint) جديد لكافة الإصدارات القديمة غير المدعومة من الإضافة.
يجب كتابة هذه الحدود على هيئة <
متبوعة بإصدار semver واحد (وليس مجال عشوائي). سيتم تطبيق ذلك كلما أُعطيت قيمة الخاصية DEPENDENCY
لإصدارات الإضافة الموجودة أسفل الإصدار المحدد. القِ نظرة على المدخلات التالية التي افترضناها:
"engines": {
"cordovaDependencies": {
"0.0.1": { "cordova-ios": ">1.0.0" },
"<1.0.0": { "cordova-ios": "<2.0.0" },
"<2.0.0": { "cordova-ios": "<5.0.0" }
}
}
لقد حددنا هنا إصدارًا واحدًا (هو 0.0.1
) للإضافة، وحدّان علويان (<1.0.0
و <2.0.0
) يُقيّدان (constrain) منصة Cordova-ios
. لا يتجاوز (override) الحدان العلويان التقييد المحدد سابقًا (0.0.1
)، بل يتم الجمع بينها عبر المعامل "AND" في وقت التقييم (evaluation time). عندما تتحقق واجهة سطر الأوامر من الإصدار Cordova-ios
الخاص بالمشروع، فإنّ التقييد (constraint) الذي سيُقيّم (evaluated) لأجل إصدار الإضافة 0.0.1
سيساوي ناتج التعبير التالي:
cordova-ios >1.0.0 AND cordova-ios <2.0.0 AND cordova-ios <5.0.0
تذكر أنَّ القيم PLUGIN_VERSION
المسموح بها هي الإصدارات الفردية (single versions) أو الحدود العلوية (upper bounds) ولا تُدعَم مجالات semver الأخرى.