lunes, 30 de enero de 2017



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 creado
sudo 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 siguiente 
archivo
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 nos 
dirigimos 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 android
Emulamos: 
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-master

Para modificar nuestro plugin solo debemos hacer los ajustes en el plugin que 
creamos inicialmente

Volver a instalar: 
sudo ANDROID_HOME="$HOME/Android/Sdk"  cordova plugin add /home/danny/proyectos/hello/cordova-plugin-hello-master

El comando cordova 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