Crear Proyecto:
cordova create hello com.example.hello HelloWorld
Abrir Proyecto Creado:
Agregar Plataforma por la terminal de la herramienta de desarrollo o por la terminal de linux en la ruta de la carpeta donde se encuentra en proyecto recientemente creadosudo cordova platform add android
Crear Plugin: Dentro de nuestro proyecto creamos un nuevo directorio:
Dentro del nuevo directorio creamos la siguiente estructura de
carpetas:
A la misma altura de la carpeta Plugins-Usuario creamos el siguientearchivo
plugin.xml con el siguiente contenido xml:<?xml version="1.0" encoding="utf-8"?> <plugin xmlns="http://www.phonegap.com/ns/plugins/1.0" id="cordova-plugin-hello-master" version="0.7.0"> <name>Hello</name> <engines> <engine name="cordova" version=">=3.4.0"/> </engines> <asset src="www/hello.js" target="js/hello.js"/> <js-module src="www/hello.js" name="hello"> <clobbers target="hello" /> </js-module> <platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <feature name="Hello"> <param name="android-package"value="com.example.plugin.Hello"/></feature> </config-file> <source-file src="src/android/Hello.java"target-dir="src/com/example/plugin/"/> </platform> <platform name="ios"> <config-file target="config.xml" parent="/widget"> <feature name="Hello"> <param name="ios-package" value="HWPHello" /> </feature> </config-file> <header-file src="src/ios/HWPHello.h" target-dir="HelloPlugin"/> <source-file src="src/ios/HWPHello.m" target-dir="HelloPlugin"/> </platform> <platform name="wp7"> <source-file src="src/wp7/Hello.cs"/> </platform> </plugin>Quedando de la siguiente manera:
Dentro de la carpeta Plugins-Usuario/www creamos el siguiente archivo: hello.js con el siguiente contenido/*global cordova, module*/ module.exports = { greet: function (name, successCallback, errorCallback) { cordova.exec(successCallback, errorCallback, "Hello", "greett", [name]);
} };
Dentro de la carpeta Plugins-Usuario/android creamos el siguiente
archivo: hello.java con el siguiente contenido package com.example.plugin; import org.apache.cordova.*; import org.json.JSONArray; import org.json.JSONException; import android.os.Bundle; import android.telephony.TelephonyManager; import android.content.Context; import android.net.ConnectivityManager; import android.net.NetworkInfo; import android.telephony.TelephonyManager; import android.provider.Settings.Secure; public class Hello extends CordovaPlugin { @Override public boolean execute(String action, JSONArray data, CallbackContext callbackContext) throws JSONException { if (action.equals("greett")) { //final TelephonyManager tm = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE); String name = data.getString(0); String message = "Hello123456789, " + name; callbackContext.success(message); return true; } else { return false; } } }Quedando de la siguiente manera:
Ya creado nuestro plugin, debemos adicionarlo al proyecto con el
siguiente comando desde consola:
sudo cordova plugin add Plugins-Usuario
Nota: Si presenta problemas con el SDK puede ejecutar de esta manera:
sudo ANDROID_HOME="$HOME/Android/Sdk" cordova plugin add Plugins-Usuario
Si todo esta bien, se debería crear automáticamente dentro de
nuestro proyecto en la carpeta plugin nuestro nuevo plugin:
y dentro de la carpeta plataforma de nuestro proyecto debería
quedar de la siguiente manera:
dichas rutas de instalación esta definidas dentro de nuestro archivo
plugin.xml
Hacer uso del nuestro nuevo plugin: Para probar que verdaderamente nuestro plugin funciona a la perfección nosdirigimos a la carpeta TestProyectos/hello/www/js de nuestro proyecto cordova.
Ojo no es la carpeta que esta dentro de las carpetas plugin.
sino la del proyecto cordova:
Modificamos el archivo index.js reemplazando todo el contenido
por el siguiente:
var app = { // Application Constructor initialize: function() { document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); }, onDeviceReady: function() { this.receivedEvent('deviceready'); hello.greet("Mi primer plugin", app.sendSuccess, app.sendError); }, sendSuccess : function(parametro) { alert("Respuesta: " + parametro); }, sendError : function(error) { var estado = document.getElementById('estado'); estado.innerHTML = '<p>Error:' + error + '</p>'; }, receivedEvent: function(id) { var parentElement = document.getElementById(id); var listeningElement = parentElement.querySelector('.listening'); var receivedElement = parentElement.querySelector('.received'); listeningElement.setAttribute('style', 'display:none;'); receivedElement.setAttribute('style', 'display:block;'); console.log('Received Event: ' + id); } }; app.initialize();
Y por ultimo paso para probar nuestro plugin, hacemos llamado
desde el archivo TextProyectos/hello/www/index.html
Listo…
Ahora Para probar con el emulador.
Creamos, seleccionamos y ejecutamos emulador:
Compilamos:
sudo cordova build android
Si presentamos problemas con SDK ejecutamos entonces con la siguiente linea
sudo ANDROID_HOME="$HOME/Android/Sdk" cordova build androidEmulamos:
sudo cordova run android --target="3801ae5651a21300"
Si presentamos problemas con SDK ejecutamos entonces con la siguiente linea sudo ANDROID_HOME="$HOME/Android/Sdk" cordova run android –target="3801ae5651a21300"Modificar o Actualizar Plugin:
Recordemos que los plugin por ser instalados dentro del proyecto, no debemos
modificarlos directamente sino que debemos desinstalarlos, hacer los cambios y luego
volver a instalar.Para desinstalar plugin: sudo ANDROID_HOME="$HOME/Android/Sdk" cordova plugin rm cordova-plugin-hello-masterPara modificar nuestro plugin solo debemos hacer los ajustes en el plugin que
creamos inicialmenteVolver a instalar: sudo ANDROID_HOME="$HOME/Android/Sdk" cordova plugin add /home/danny/proyectos/hello/cordova-plugin-hello-masterEl comandocordova plugin add
requiere especificar el repositorio para el código del plugin. Estos son ejemplos de cómo puede usar la CLI para agregar funciones a la aplicación:
- Información básica del dispositivo (dispositivo API):
$ cordova plugin add cordova-plugin-device
- Conexión de red y eventos de batería:
$ cordova plugin add cordova-plugin-network-information $ cordova plugin add cordova-plugin-battery-status
- Acelerómetro, brújula y geolocalización:
$ cordova plugin add cordova-plugin-device-motion $ cordova plugin add cordova-plugin-device-orientation $ cordova plugin add cordova-plugin-geolocation
- Cámara, reproducción multimedia y captura:
$ cordova plugin add cordova-plugin-camera $ cordova plugin add cordova-plugin-media-capture $ cordova plugin add cordova-plugin-media
- Acceder a archivos en el dispositivo o red (archivo API):
$ cordova plugin add cordova-plugin-file $ cordova plugin add cordova-plugin-file-transfer
- Notificación mediante vibración o cuadro de diálogo:
$ cordova plugin add cordova-plugin-dialogs $ cordova plugin add cordova-plugin-vibration
- Contactos:
$ cordova plugin add cordova-plugin-contacts
- Globalización:
$ cordova plugin add cordova-plugin-globalization
- SplashScreen:
$ cordova plugin add cordova-plugin-splashscreen
- Abrir nuevas ventanas del navegador (InAppBrowser):
$ cordova plugin add cordova-plugin-inappbrowser
- Consola de depuración:
$ cordova plugin add cordova-plugin-console
No hay comentarios:
Publicar un comentario