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činok plugins/ totiž nie je dobré ani dávať do git-u. Takže nový modul vytvoríme príkazom plugman 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');
    
    exports.coolMethod = function (arg0, success, error) {
        exec(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činku src/, 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ódu coolMethod(). Ak ju chceme použiť v našom kóde, zavoláme ju cez objekt cordova nasledovne:

    cordova.plugins.Toasty.coolMethod(
        "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úbore Toasty.js:

    exports.coolMethod = function (arg0, success, error) {
    console.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ódy coolMethod() 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) {
                callbackContext.success(message);
                Log.i(TAG, String.format(">> coolMethod() invoked in Android with argument %s", message));
            } else {
                callbackContext.error("Expected one non-empty string argument.");
        }
    }
  • 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;
    
    Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
  • 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:

    cordova.exec(function(winParam) {},
                 function(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.