El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Desarrollo de Plugins Personalizados

Siguiente ►
►

En este módulo, aprenderás cómo desarrollar tus propios plugins personalizados para Apache Cordova. Los plugins permiten extender la funcionalidad de tu aplicación Cordova mediante la integración de código nativo. Esto es especialmente útil cuando necesitas acceder a características específicas del dispositivo que no están cubiertas por los plugins existentes.

Objetivos del Módulo

  • Comprender la estructura de un plugin de Cordova.
  • Aprender a crear un plugin básico.
  • Integrar código nativo en tu plugin.
  • Probar y depurar tu plugin.

  1. Estructura de un Plugin de Cordova

Un plugin de Cordova generalmente consta de los siguientes componentes:

  • plugin.xml: Archivo de configuración del plugin.
  • Código JavaScript: Interfaz que expone las funcionalidades del plugin a la aplicación Cordova.
  • Código Nativo: Implementación de las funcionalidades específicas del dispositivo.

Ejemplo de plugin.xml

<plugin id="com.example.customplugin" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0">
    <name>CustomPlugin</name>
    <js-module src="www/CustomPlugin.js" name="CustomPlugin">
        <clobbers target="window.CustomPlugin" />
    </js-module>
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="CustomPlugin">
                <param name="android-package" value="com.example.customplugin.CustomPlugin" />
            </feature>
        </config-file>
        <source-file src="src/android/CustomPlugin.java" target-dir="src/com/example/customplugin" />
    </platform>
</plugin>

Estructura de Archivos

custom-plugin/
├── src/
│   └── android/
│       └── CustomPlugin.java
├── www/
│   └── CustomPlugin.js
└── plugin.xml

  1. Creando un Plugin Básico

Paso 1: Crear el Archivo plugin.xml

El archivo plugin.xml define la configuración del plugin, incluyendo las plataformas soportadas y los archivos de código fuente.

Paso 2: Escribir el Código JavaScript

El archivo JavaScript actúa como una interfaz entre la aplicación Cordova y el código nativo.

www/CustomPlugin.js

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

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

module.exports = CustomPlugin;

Paso 3: Escribir el Código Nativo

El código nativo implementa la funcionalidad específica del dispositivo.

src/android/CustomPlugin.java

package com.example.customplugin;

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

public class CustomPlugin 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.");
        }
    }
}

  1. Integrando Código Nativo

Android

Para Android, el código nativo se escribe en Java y se coloca en el directorio src/android/.

iOS

Para iOS, el código nativo se escribe en Objective-C o Swift y se coloca en el directorio src/ios/.

  1. Probando y Depurando tu Plugin

Instalación del Plugin

Para probar tu plugin, primero debes instalarlo en tu proyecto Cordova.

cordova plugin add /path/to/custom-plugin

Uso del Plugin en tu Aplicación

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

Depuración

  • Android: Utiliza Android Studio para depurar el código Java.
  • iOS: Utiliza Xcode para depurar el código Objective-C o Swift.

Ejercicio Práctico

Ejercicio 1: Crear un Plugin que Obtenga la Versión del Sistema Operativo

Paso 1: Configuración del plugin.xml

<plugin id="com.example.osversion" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0">
    <name>OSVersion</name>
    <js-module src="www/OSVersion.js" name="OSVersion">
        <clobbers target="window.OSVersion" />
    </js-module>
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="OSVersion">
                <param name="android-package" value="com.example.osversion.OSVersion" />
            </feature>
        </config-file>
        <source-file src="src/android/OSVersion.java" target-dir="src/com/example/osversion" />
    </platform>
</plugin>

Paso 2: Código JavaScript

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

var OSVersion = {
    getVersion: function(success, error) {
        exec(success, error, 'OSVersion', 'getVersion', []);
    }
};

module.exports = OSVersion;

Paso 3: Código Nativo (Android)

package com.example.osversion;

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

public class OSVersion extends CordovaPlugin {
    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("getVersion")) {
            this.getVersion(callbackContext);
            return true;
        }
        return false;
    }

    private void getVersion(CallbackContext callbackContext) {
        String version = android.os.Build.VERSION.RELEASE;
        callbackContext.success(version);
    }
}

Solución

Instala el plugin y úsalo en tu aplicación Cordova para obtener la versión del sistema operativo.

document.addEventListener('deviceready', function() {
    OSVersion.getVersion(function(version) {
        console.log('OS Version: ' + version);
    }, function(error) {
        console.error('Error: ' + error);
    });
}, false);

Conclusión

En este módulo, has aprendido cómo desarrollar un plugin personalizado para Apache Cordova. Has visto cómo estructurar el plugin, escribir el código JavaScript y nativo, y cómo probar y depurar tu plugin. Con esta base, puedes extender la funcionalidad de tus aplicaciones Cordova para satisfacer necesidades específicas del dispositivo.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados