El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com desenvolupar plugins personalitzats per a Apache Cordova. Els plugins permeten estendre les capacitats de les aplicacions Cordova accedint a funcionalitats natives del dispositiu que no estan disponibles a través de les APIs estàndard de Cordova.

Objectius del tema

Comprendre la necessitat de plugins personalitzats.
Aprendre a crear un plugin bàsic.
Integrar el plugin en una aplicació Cordova.
Depurar i provar el plugin.

Comprensió dels plugins personalitzats

Què és un plugin de Cordova?

Un plugin de Cordova és un component que permet a una aplicació Cordova utilitzar funcionalitats natives del dispositiu, com ara la càmera, el GPS, o l'accés a fitxers. Els plugins actuen com a pont entre el codi JavaScript de l'aplicació i el codi natiu del dispositiu (Java per a Android, Objective-C/Swift per a iOS).

Per què necessitem plugins personalitzats?

Funcionalitats específiques: Quan les APIs estàndard de Cordova no cobreixen les necessitats específiques de la teva aplicació.
Optimització: Per optimitzar el rendiment o afegir funcionalitats que no estan disponibles en els plugins existents.
Integració amb serveis de tercers: Quan necessites integrar serveis o SDKs de tercers que no tenen un plugin Cordova disponible.

Creació d'un plugin bàsic

Estructura d'un plugin Cordova

Un plugin Cordova típic té la següent estructura:

my-plugin/
├── src/
│   ├── android/
│   │   └── MyPlugin.java
│   ├── ios/
│   │   └── MyPlugin.m
├── www/
│   └── myplugin.js
├── plugin.xml
└── package.json

Pas a pas: Creació d'un plugin bàsic

2.1. Configuració inicial

Crea una carpeta per al teu plugin:
```
mkdir my-plugin
cd my-plugin
```

Crea el fitxer plugin.xml:

<plugin id="com.example.myplugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>MyPlugin</name>
    <js-module src="www/myplugin.js" name="MyPlugin">
        <clobbers target="cordova.plugins.MyPlugin" />
    </js-module>
    <platform name="android">
        <source-file src="src/android/MyPlugin.java" target-dir="src/com/example/myplugin" />
    </platform>
    <platform name="ios">
        <source-file src="src/ios/MyPlugin.m" />
    </platform>
</plugin>

Crea el fitxer package.json:

{
    "name": "com.example.myplugin",
    "version": "1.0.0",
    "description": "A simple Cordova plugin",
    "cordova": {
        "id": "com.example.myplugin",
        "platforms": ["android", "ios"]
    }
}

2.2. Implementació del codi JavaScript

Crea el fitxer www/myplugin.js:

var exec = require('cordova/exec');

var MyPlugin = {
    coolMethod: function(arg0, success, error) {
        exec(success, error, 'MyPlugin', 'coolMethod', [arg0]);
    }
};

module.exports = MyPlugin;

2.3. Implementació del codi natiu per a Android

Crea el fitxer src/android/MyPlugin.java:

package com.example.myplugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

public class MyPlugin extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("coolMethod")) {
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

2.4. Implementació del codi natiu per a iOS

Crea el fitxer src/ios/MyPlugin.m:

#import <Cordova/CDV.h>

@interface MyPlugin : CDVPlugin
- (void)coolMethod:(CDVInvokedUrlCommand*)command;
@end

@implementation MyPlugin

- (void)coolMethod:(CDVInvokedUrlCommand*)command {
    CDVPluginResult* pluginResult = nil;
    NSString* echo = [command.arguments objectAtIndex:0];

    if (echo != nil && [echo length] > 0) {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
    } else {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR messageAsString:@"Expected one non-empty string argument."];
    }

    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

Integració del plugin en una aplicació Cordova

Instal·lació del plugin

Des de la carpeta del teu projecte Cordova, executa:

cordova plugin add /path/to/my-plugin

Ús del plugin en el codi JavaScript de l'aplicació

document.addEventListener('deviceready', function() {
    cordova.plugins.MyPlugin.coolMethod('Hello, Cordova!', function(success) {
        console.log('Success: ' + success);
    }, function(error) {
        console.error('Error: ' + error);
    });
}, false);

Depuració i proves

Depuració del plugin

Android: Utilitza Android Studio per depurar el codi Java.
iOS: Utilitza Xcode per depurar el codi Objective-C/Swift.

Proves del plugin

Unit tests: Escriu tests unit per al codi JavaScript i natiu.
Proves manuals: Executa l'aplicació en dispositius reals per assegurar-te que el plugin funciona correctament.

Conclusió

En aquest tema, hem après a crear un plugin personalitzat per a Apache Cordova, des de la configuració inicial fins a la integració i depuració. Els plugins personalitzats són una eina poderosa per estendre les capacitats de les aplicacions Cordova i accedir a funcionalitats natives del dispositiu.

Exercici pràctic

Objectiu: Crear un plugin personalitzat que accedeixi a la informació de la bateria del dispositiu.

Crea la carpeta del plugin.
Configura el fitxer plugin.xml i package.json.
Implementa el codi JavaScript, Android i iOS.
Instal·la el plugin en una aplicació Cordova i prova'l.

Solució:

Segueix els passos detallats en aquest tema per crear el plugin.
Utilitza les APIs natives d'Android i iOS per accedir a la informació de la bateria.

Amb aquesta pràctica, reforçaràs els conceptes apresos i adquiriràs experiència en el desenvolupament de plugins personalitzats per a Apache Cordova.

Desenvolupament de plugins personalitzats