Part 13
tvorba vlastných modulov
Introduction
- Vytvoríme modul, pomocou ktorého bude možné vytvárať toasty.
Create Cordova Project
Začneme tým, že vytvoríme prázdny projekt:
cordova create hello sk.tuke.smart.hello Hello
Platforma, pre ktorú budeme plugin vyvíjať, bude Android. Takže do projektu pridáme platformu
android
:cordova platform add android
Create New Plugin with Plugman
Na vytvorenie nového zásuvného modulu použijeme nástroj Plugman. Plugman je CLI nástroj na inštaláciu a odinštaláciu modulov pre projekty vytvorené pomocou rámca Apache Cordova.
Nástroj Plugman nainštalujeme do systému nasledovne:
npm install -g plugman
Priečinok, v ktorom sa nachádzajú nainštalované moduly, je
plugins/
. My však nebudeme vytvárať modul v tomto priečinku, ale vytvoríme ho v priečinku aplikácie. Priečinokplugins/
totiž nie je dobré ani dávať do git-u. Takže nový modul vytvoríme príkazomplugman create
:plugman create --name Toasty --plugin_id sk.tuke.smart.plugins.toasty --plugin_version 0.0.1
Po vytvorení pluginu bude vyzerať jeho štruktúra nasledovne:
tree Toasty/ Toasty/ ├── plugin.xml ├── src/ └── www/ └── Toasty.js
Kód modulu sa nachádza v súbore
Toasty.js
. Po vytvorení sa v ňom nachádza jednoduchá ukážková metóda:var exec = require('cordova/exec'); .coolMethod = function (arg0, success, error) { exportsexec(success, error, 'Toasty', 'coolMethod', [arg0]); ; }
Náš modul budeme vytvárať pre platformu Android, takže ju pridáme aj do nášho modulu:
plugman platform add --platform_name android
Výsledkom príkazu bude vytvorenie priečinku
android/
v priečinkusrc/
, kde sa bude nachádzať natívna implementácia nášho modulu:tree Toasty/ Toasty/ ├── plugin.xml ├── src/ │ └── android/ │ └── Toasty.java └── www/ └── Toasty.js
Následne je potrebné vytvoriť súbor
package.json
pre vytvorený zásuvný modul. Ten vytvoríme z priečinku modulu nasledujúcim príkazom:bash plugman createpackagejson .
Nakoniec modul nainštalujeme do našej aplikácie. Zatiaľ je síce prázdny, ale overíme tak jeho funkčnosť:
bash cordova plugin add Toasty # plugman install --platform android --project platforms/android --plugin ../cordova-plugin-toasty
Note! This will copy your existing plugin to the
src/
folder of your desired platform. Do not edit plugin files in your Cordova Project! Whenever you make changes to your plugin, you have to uninstall the plugin using:bash cordova plugin rm sk.tuke.smart.toasty # plugman uninstall --platform android --project platforms/android --plugin ../LogicLinkPlugin/
and reinstall it with the plugman install command above.
Nakoniec môžeme vyskúšať preklad a nasadenie modulu na platformu Android:
cordova run android
Using the Plugin
Keď sa pozrieme do súboru
Toasty.js
, nájdeme v ňom exportnut-ú metóducoolMethod()
. Ak ju chceme použiť v našom kóde, zavoláme ju cez objektcordova
nasledovne:.plugins.Toasty.coolMethod( cordova"Hello world!", function(data) { console.log(">> coolMethod() successfully invoked."); console.log(data); , }function(error) { console.error( `>> there was an error when invoked coolMethod(): ${error}` ; ) }; )
Ak aplikáciu spustíme, uvidíme vo výpise správy zo success callback-u.
Touching the Plugin
Teraz sa však poďme pozrieť na samotný plugin. Aby sme sa uistili, že bol zavolaný, modifikujeme obsah samotnej metódy
coolMethod()
v súboreToasty.js
:.coolMethod = function (arg0, success, error) { exportsconsole.log(`>> coolMethod() invoked with argument ${arg0}`); exec(success, error, 'Toasty', 'toasty', [arg0]); ; }
Ak chceme kód vyskúšať, musíme modul odinštalovať a naspäť nainštalovať:
cordova plugin rm sk.tuke.smart.toasty cordova plugin add Toasty
Až potom vieme spustiť aplikáciu s novou verziou modulu:
cordova run android
Teraz sa však pozrime na súbor
Toasty.java
, kde je implementovaná podoba natívneho volania metódycoolMethod()
na platforme Android. Pokusne môžeme opäť vypísať text ako správu do log-u, ktorý následne zobrazíme cez LogCat:import android.util.Log; public class Toasty extends CordovaPlugin { private static final String TAG = "ToastyPlugin"; ... private void coolMethod(String message, CallbackContext callbackContext) { if (message != null && message.length() > 0) { .success(message); callbackContext.i(TAG, String.format(">> coolMethod() invoked in Android with argument %s", message)); Log} else { .error("Expected one non-empty string argument."); callbackContext} }
Po spustení aplikácie spustíme aj LogCat, kde vyfiltrujeme príslušné správy so značkou
ToastyPlugin
:adb logcat |grep ToastyPlugin
Takže už zostáva len vytvoriť toast:
import android.widget.Toast; .makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show(); Toast
To, čo nás však bude zaujímať, je funkcia
exec()
. The JavaScript interface provides the front-facing interface, making it perhaps the most important part of the plugin. You can structure your plugin’s JavaScript however you like, but you need to call cordova.exec to communicate with the native platform, using the following syntax:.exec(function(winParam) {}, cordovafunction(error) {}, "service", "action", "firstArgument", "secondArgument", 42, false]); [
Here is how each parameter works:
function(winParam) {}
- A success callback function. Assuming your exec call completes successfully, this function executes along with any parameters you pass to it.function(error) {}
- An error callback function. If the operation does not complete successfully, this function executes with an optional error parameter."service"
- The service name to call on the native side. This corresponds to a native class, for which more information is available in the native guides listed below."action"
- The action name to call on the native side. This generally corresponds to the native class method. See the native guides listed below.[/* arguments */]
- An array of arguments to pass into the native environment.