Integración Nativa Con Html5

37
INTEGRACIÓN NATIVA CON HTML5 JOSÉ ROBERTO ARDILA GARCÍA 12 HIT COMBO!

description

como integrar htmla una aplicacion movil nativa en android ios o blacberry

Transcript of Integración Nativa Con Html5

Integracin nativa con html5

Integracin nativa con html5Jos Roberto ardila Garca12 hit combo!Porque es necesaria la integracin nativa?Hagamos un repaso de las caractersticas que nos ofrece PhoneGapAcelermetroCmara BrjulaAcceso a contactosArchivosGeolocalizacinMediaNetworkNotificaciones (alertas, sonidos, vibraciones).Porque si utilizando herramientas como phonegap es posible realizar aplicaciones mviles basadas en html5 sin necesidad de utilizar ningn componente nativo?Hagamos un repaso de las caractersticas que nos ofrece PhoneGap

2Pero que ocurre si se necesita o aparece una nueva caracterstica nueva o diferente en los dispositivos Android?NFCiBeacons (Comunicacin va Bluetooth)WidgetsTextToSpeechVoiceTypingReutilizar cdigo o Activities que realizaban operaciones especficas y puntuales (por ejemplo enviar correos)

Que ocurre si PhoneGap no ofrece soporte para ello.Llorar?Esperar a que en algn momento phonegap ofrezca soporte para esas caractersticas?Ensuciarse las manos y extender de alguna forma la funcionalidad de phonegap para dar soporte a las caractersticas deseadasPhoneGap PluginsPor medio de los plugins es posible extender las funcionalidades de phonegap.A travs de los plugins es posible acceder a caractersticas nativas de los dispositivosPhonegap utiliza ese concepto para acceder a las caractersticas nativas previamente mencionadas.Los plugins son desarrollados en cdigo nativo de la plataforma (en el caso de Android: java)Entendiendo la estructura de plugins nativos de phonegapLos plugin tienen 2 partes: una interfaz basada en JavaScript que puede accederse desde la aplicacin PhoneGap (y que ser utilizada en todas las plataformas) y su correspondiente clase nativa que realizar las operaciones necesarias en cdigo nativo.

La interfaz en JavaScript invocar al cdigo nativo utilizando el mtodo Cordova.exec, el cual invocar a un mtodo Execute presente en las clases nativas.

Entendiendo la estructura de plugins nativos de phonegap

El mtodo Cordova.execcordova.exec(successCallback,failureCallback,class,method,[arguments]);

successCallback:ser la funcin que se quiera ejecutar cuando el resultado de la invocacin sea satisfactorio.failureCallback:ser la funcin a ejecutar cuando el resultado de la invocacin no sea satisfactorio.

El mtodo Cordova.execcordova.exec(successCallback,failureCallback,class,method,[arguments]);

class:ser el nombre de la clase de nuestro cdigo nativo.method:ser el nombre de la accin que se va a tener en cuenta en el mtodo "execute" de la clase anterior que queremos invocar.[arguments]]:ser un array, generalmente en formato JSON, donde se le pasan todos los parmetros de entrada al mtodo invocado.

Creacin de nuestro primer pluginCreamos un nuevo proyecto PhoneGap (offline) y lo importamos a Eclipse:

$ cordova create C:\MyFirstPlugin com.unal.plugins CustomPluginActivity$cd C:\MyFirstPlugin $cordova platform add android Creacin de Nuestra Clase NativaCreamos una nueva clase HelloPlugin que extienda de org.apache.cordova.CordovaPlugin

En esta clase irn las operaciones nativas que necesitemos ejecutar

public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {boolean validAction = true;Log.d("Plugin ejecutando accin:",action);if (action.equals("nativeAction")) {callbackContext.success(args.getString(0));}else {validAction = false;}return validAction;}Registrar el nuevo plugin:En nuestro archivo res/xml/config.xml registramos nuestro nuevo plugin, dentro de los tags widget.

Modificamos nuestro index.xml para usar nuestro nuevo plugin:

Hola Plugin

Prueba del nuevo Plugin!

Click para invocar al PluginNativo con SUCCESS! Click para invocar al PluginNativo con ERROR!

Creamos nuestro archivo HelloPlugin.js encargado de contener los mtodos de ejecucin del plugin nativo.var HelloPlugin = { callNativeFunction: function (success, fail, resultType) { return cordova.exec( success, fail, "HelloPlugin", "nativeAction", [resultType]); } };y de los callbacks correspondientesfunction callNativePlugin( returnSuccess ) { HelloPlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); }

function nativePluginResultHandler (result){ alert("SUCCESS: \r\n"+result ); } function nativePluginErrorHandler (error){ alert("ERROR: \r\n"+error ); }

Creacin de Una Nueva Clase NativaPara invocar una Agenda NativaCreamos una nueva clase CalendarPlugin que extienda de org.apache.cordova.CordovaPlugin

En esta clase irn las operaciones nativas que necesitemos ejecutarpublic class CalendarPlugin extends CordovaPlugin {public static final String ACTION_ADD_CALENDAR_ENTRY = "addCalendarEntry"; @Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {try { if (ACTION_ADD_CALENDAR_ENTRY.equals(action)) { Creacin del Calendar nativo (con los parmetros trados desde phonegap)Ya que estamos trabajando de forma nativa podemos invocar un Activity externo de la misma forma que haramos normalmente.Utilizamos un intent Intent.ACTION_EDIT para crear la agenda.Los parmetros que necesitamos para crear la agenda sern datos trados desde phonegap.Estos parmetros vendrn en formato JSON.JSONObject arg_object = args.getJSONObject(0);

Intent calIntent = new Intent(Intent.ACTION_EDIT) .setType("vnd.android.cursor.item/event") .putExtra("beginTime", arg_object.getLong("startTimeMillis")) .putExtra("endTime", arg_object.getLong("endTimeMillis")) .putExtra("title", arg_object.getString("title")) .putExtra("description", arg_object.getString("description")) .putExtra("eventLocation", arg_object.getString("eventLocation")); this.cordova.getActivity().startActivity(calIntent); callbackContext.success(); return true;} callbackContext.error("Invalid action"); return false;} catch(Exception e) { System.err.println("Exception: " + e.getMessage()); callbackContext.error(e.getMessage()); return false;} }Podemos agregar mltiples plugins nativos a una misma aplicacin

24Creamos un archivo llamado CalendarPlugin.js y una funcin createEvent:var calendarPlugin = { createEvent: function(title, location, notes, startDate, endDate, successCallback, errorCallback) { cordova.exec( successCallback, errorCallback, 'CalendarPlugin', 'addCalendarEntry', [{"title": title, "description": notes, "eventLocation": location, "startTimeMillis": startDate.getTime(), "endTimeMillis": endDate.getTime() }] ); }}Con este mtodo es que inicializamos los datos de nuestra agenda (este cdigo tambin va en el archivo CalendarPlugin.js)function addToCal() { var startDate = new Date("July 19, 2013 8:00:00"); var endDate = new Date("July 19, 2013 18:00:00"); var notes = llegar a tiempo al evento(desde Android)"; var title = "PhoneGap Day"; var location = "Portland, OR"; var notes = llegar a tiempo!"; var success = function() { alert(exito"); }; var error = function(message) { alert(error! " + message); }; calendarPlugin.createEvent(title, location, notes, startDate, endDate, success, error);}Podemos agregar a nuestra pgina ya existente el nuevo plugin

Hola Plugin Prueba del nuevo Plugin! Click para invocar al PluginNativo con SUCCESS! Click para invocar al PluginNativo con ERROR! Click para crear una agenda

Agregar Text To SpeechCreamos una nueva clase TTSPlugin que extienda de org.apache.cordova.CordovaPlugin

En esta clase irn las operaciones nativas que necesitemos ejecutar

Este es un ejemplo de como utilizar datos que se reciben desde PhoneGap.

En esta ocasin utilizaremos 2 acciones una para iniciar el sistema TTS y otro para ejecutar la accin de conversin de texto a sonido, de ah que declararemos las siguientes variables globales:public static final String ACTION_NEW_TTS_INIT = "textToSpeechInit"; public static final String ACTION_NEW_TTS_TALK = "textToSpeechTalk";TextToSpeech ttobj;@Overridepublic boolean execute(String action, final JSONArray args, final CallbackContext callbackContext) throws JSONException {

Debido a que las operaciones TTS son bastante exigente debemos utilizar multi-threading, esto nos obliga a que algunos parmetros tengan que ser declaradas como final:if (ACTION_NEW_TTS_INIT.equals(action)) { cordova.getThreadPool().execute(new Runnable() { public void run() { if(ttobj == null) { ttobj=new TextToSpeech(cordova.getActivity().getApplicationContext(), new TextToSpeech.OnInitListener() { @Override public void onInit(int status) { if(status != TextToSpeech.ERROR){ ttobj.setLanguage(Locale.US); } } }); } } }); return true;}else if(ACTION_NEW_TTS_TALK.equals(action)){ cordova.getThreadPool().execute(new Runnable() { public void run() { try { ttobj.speak(args.getString(0), TextToSpeech.QUEUE_FLUSH, null); callbackContext.success(); } catch(Exception e) { callbackContext.error(e.getMessage()); } } }); return true;}else{ return false;}Agregamos nuestro plugin (en res/xml/config.xml)

y creamos un nuevo archivo JavaScript llamado TTSPlugin.js

var TTSPlugin = { callTTSInitFunction: function (success, fail, resultType) { return cordova.exec( success, fail, "TTSPlugin", "textToSpeechInit", [resultType]); }, callTTSTalkFunction: function (success, fail, resultType) { return cordova.exec( success, fail, "TTSPlugin", "textToSpeechTalk", [resultType]); } };Agregamos las funciones de callback y las que llamaremos de nuestro cdigo:function callTTSInitPlugin(returnSuccess) { TTSPlugin.callTTSInitFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); }

function callTTSTalkPlugin( returnSuccess ) { TTSPlugin.callTTSTalkFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); } function nativePluginResultHandler (result) { alert("SUCCESS: \r\n"+result ); }

function nativePluginErrorHandler (error) { alert("ERROR: \r\n"+error ); } Modificamos nuestro archivo index.js para que quede as (de esta forma inicializamos el sistema TTS al cargar la pgina):var app = { // Application Constructor initialize: function() { this.bindEvents(); }, bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); },onDeviceReady: function() {callTTSInitPlugin('inicia'); },};Para facilitar la manipulacin de datos, utilizaremos jquery, para esto descargaremos el archivo JavaScript de jquery desde:

http://jquery.com/download/

y lo copiaremos en nuestra carpeta assets/www/js

TTS:

app.initialize();Agregaremos a nuestro archivo index.html lo siguiente:

Agregar Text To SpeechCreamos una nueva clase STTPlugin que extienda de org.apache.cordova.CordovaPlugin

En esta clase irn las operaciones nativas que necesitemos ejecutar

Este es un ejemplo de como utilizar datos que se reciben desde PhoneGap.

public static final String ACTION_NEW_STT_TALK = "SpeechToTextTalk";CallbackContext callbackContext;protected static final int RESULT_SPEECH = 1;

@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {this.callbackContext = callbackContext; if(ACTION_NEW_STT_TALK.equals(action)) { Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH); intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, "en-US"); this.cordova.getActivity().startActivityForResult(intent, RESULT_SPEECH); return true; } else { return false; }}public void onActivityResult(int requestCode, int resultCode, Intent data) { switch (requestCode) { case RESULT_SPEECH: if (resultCode == android.app.Activity.RESULT_OK && null != data) { ArrayList text = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); callbackContext.success(text.get(0)); } else { //code launched in case of error String message=data.getStringExtra("result"); callbackContext.error(message); } break; default: break; }}