Aplicaciones multiplataforma

Ignacio Muñoz Vicente @imunoz_ 17 y 18 Septiembre 2015

Un poco de mi

Ignacio Muñoz VicenteIngeniero informático

Mobile Tech Leader (Hiberus Tecnología)

@imunoz_ (linkedin + slideshare)

Co-autor libro desarrollo de aplicaciones para iOS (SEAS Estudios Superiores)

CertificadoScrum Manager

CertificadoKanban Foundation

Ingeniero Software Telefónica I+D / Aurigae

Emprendiendoproyectos de movilidad

Índice

Jueves

Viernes

- Apps híbridas - Diferencia entre nativas e híbridas - Cómo funciona - Ventajas e inconvenientes - Ejemplos

- Historia - Programar - prueba de los conceptos - Otras herramientas y tecnologías

- Single Page Applications - Frameworks - Herramientas de trabajo - AngularJS - Ionic Framework - Repaso general

Antes de empezar…

Descargar e instalar para usar luego

- nodeJS: https://nodejs.org

- GIT: https://git-scm.com/

- Editor de textos. Ej. Sublime Text: http://www.sublimetext.com/

- Para iOS: - Xcode (en App Store)

- Para Android: - JDK 7: http://www.oracle.com/technetwork/es/java/javase/downloads/jdk7-

downloads-1880260.html - SDK: http://developer.android.com/sdk/index.html

- Si Windows: Visual Studio: https://www.visualstudio.com/

Apps híbridas

Diferencia entre apps nativas e híbridas

App nativa

https://octopusapps.com/blog/wp-content/uploads/2014/04/img-post-02.jpg

Apps híbridas

Diferencia entre apps nativas e híbridas

App nativa App híbrida

https://octopusapps.com/blog/wp-content/uploads/2014/04/img-post-02.jpg

Apps híbridas

Diferencia entre apps nativas e híbridas

HTML5 + JS + CSS3 + Frameworks

Apps híbridas

Diferencia entre apps nativas e híbridas

WebView Android, Safari, Crosswalk, CocoonJS

Apps híbridas

Diferencia entre apps nativas e híbridas

Código nativo: - Java - Swift / ObjectiveC

Apps híbridas

Diferencia entre apps nativas e híbridas

Integrador entre JS y código nativo

Apps híbridas

Diferencia entre apps nativas e híbridas

Sistema operativo: - Android - iOS - Windows - Blackberry OS - Etc.

Apps híbridas

Diferencia entre apps nativas e híbridas

HTML5 + JS + CSS3 + Frameworks

WebView Android, Safari, Crosswalk, CocoonJS Código nativo:

- Java - Swift / ObjectiveC

Integrador entre JS y código nativo

Sistema operativo: - Android - iOS - Windows - Blackberry OS - Etc.

Apps híbridas

Diferencia entre apps nativas e híbridas

http://es.slideshare.net/ejlp12/intro-to-apache-cordova

Apps híbridas

Cómo funciona Desarrollamos la aplicación: - Diseño y maquetación: HTML 5 + CSS 3 - Programación: JS

Apps híbridas

Cómo funciona

Encapsulamos la aplicación con (por ejemplo) Apache Cordova

Apps híbridas

Cómo funciona

OTROS

Desplegamos en las plataformas deseadas

Apps híbridas

Cómo funciona

Plugin

Código nativo Si necesitamos funcionalidad nativa, implementarla + crear plugin (por cada plataforma)

OTROS

Apps híbridas

Cómo funciona

Plugin

Código nativo Si necesitamos funcionalidad nativa, implementarla + crear plugin (por cada plataforma)

OTROS

Desplegamos en las plataformas deseadas

Encapsulamos la aplicación con (por ejemplo) Apache Cordova

Desarrollamos la aplicación: - Diseño y maquetación: HTML 5 + CSS 3 - Programación: JS

Apps híbridas

Ventajas e inconvenientes

App híbrida Apps nativas

- Menor tiempo de desarrollo (excepto si se requiere muchas funcionalidad nativas)

- Mantenimiento y mejoras más sencillo (un solo código que mantener)

- Un solo lenguaje: JavaScript (un solo perfil de programación es necesario)

- Rendimiento mayor(por norma general)

- Animaciones y transiciones de calidad(al utilizar directamente los componentes nativos)

Apps híbridas

Coste temporal

App híbrida

App nativa Android

App nativa iOS

App nativa Windows

VS1 3

Apps híbridas

Coste temporal

App híbrida

App nativa Android

App nativa iOS

App nativa Windows

VS1 3

Apps híbridas

Coste temporal

App híbrida

1,5 - Maquetación y diseño CSS3 más costoso - Despliegue y pruebas en los distintos SO - Problemas de compatibilidad o rendimiento - Soporte HTML5 / CSS3 en dispositivos antiguos

Apps híbridas

JavaScript

Mucha más info en: http://githut.info/

Apps híbridas

¿Qué tipo de desarrollo se utiliza?

Casi siempre es una decisión basada en el presupuesto disponible

Apps híbridas

Ejemplos

HE Mango Evernote Uber

Un poco de historia

Nitobi crea PhoneGap 2009

2011 SeptNitobi dona el código de PhoneGap a la fundación Apache

Adobe compra Nitobi 2011 Oct

2012 FebApache renombra el proyecto como Cordova

Adobe lanza PhoneGap Build 2012

Adobe es hackeado 2013 Oct

A programar un poco

- Apache Cordova - Proyecto - Uso de API

- Cordova CLI - Plugins

- Uso de plugin de terceros - Creación de uno propio

- Despliegue en terminales - Depuración

Vamos a jugar con…

A programar un poco

- Instalar Node + NPM: - https://nodejs.org

- Instalar Apache Cordova: - https://cordova.apache.org/ - $ npm install -g cordova

- Acceder a los docs de Cordova: - http://cordova.apache.org/docs/en/5.0.0/

Antes de empezar

A programar un poco

- Crear proyecto Cordova: - $ cordova create hello com.example.hello HelloWorld && cd hello

- Añadir SO / plataformas (se requiere SDK instalado): - $ cordova platform add ios - $ cordova platform add android - $ cordova platforms ls

- Servir en el navegador (para debug): - $ cordova serve

Paso 1: Proyecto inicial

A programar un poco

hooksPermite ejecutar tareas automáticas cuando se ejecutan comandos de Cordova

plataformsProyectos híbridos generados. En este ejemplo, proyecto Xcode

pluginsContenedor de plugins utilizados en la aplicación

wwwAplicación HTML5 que se desplegará en todos los SO

configConfiguración de la app híbrida

A programar un poco

App iOSAl añadirse la plataforma y compilar, Cordova genera automáticamente el proyecto Xcode preparado para ser utilizado.

Podemos seguir haciendo todo por línea de comandos sin tener que abrir Xcode para nada.

A programar un poco

Paso 2: Configurar aplicación

<?xml version='1.0' encoding='utf-8'?> <widget id="es.ai2aragon.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>Demo</name> <description> Ejemplo presentación. </description> <author email="hola@ai2aragon.es" href="http://ai2aragon.es"> Ignacio ai2aragon </author> <content src="index.html" /> <plugin name="cordova-plugin-whitelist" version="1" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>

A programar un poco

Paso 2: Configurar aplicación

<?xml version='1.0' encoding='utf-8'?> <widget id="es.ai2aragon.hello" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> <name>Demo</name> <description> Ejemplo presentación. </description> <author email="hola@ai2aragon.es" href="http://ai2aragon.es"> Ignacio ai2aragon </author> <content src="index.html" /> <plugin name="cordova-plugin-whitelist" version="1" /> <access origin="*" /> <allow-intent href="http://*/*" /> <allow-intent href="https://*/*" /> <allow-intent href="tel:*" /> <allow-intent href="sms:*" /> <allow-intent href="mailto:*" /> <allow-intent href="geo:*" /> <platform name="android"> <allow-intent href="market:*" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> </platform> </widget>

$ cordova prepare $ cordova compile

A programar un poco

Paso 2: Configurar aplicación

Otras configuraciones importantes:

<widget … android-versionCode=“X" ios-CFBundleVersion=“X.Y.Z">

<preference name="XXX" value="ZZZ" />

Ejemplos: <preference name="Fullscreen" value="true" /> <preference name="DisallowOverscroll" value=“true"/> <preference name="Orientation" value="landscape" />

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" /> <splash src="res/screen/ios/Default~iphone.png" width="320" height=“480"/>

Si se quiere configuración para sólo una plataforma: <platform name=“ios”>

… </platform>

A programar un poco

Paso 2: Configurar aplicación

Otras configuraciones importantes:

<widget … android-versionCode=“X" ios-CFBundleVersion=“X.Y.Z">

<preference name="XXX" value="ZZZ" />

Ejemplos: <preference name="Fullscreen" value="true" /> <preference name="DisallowOverscroll" value=“true"/> <preference name="Orientation" value="landscape" />

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" /> <splash src="res/screen/ios/Default~iphone.png" width="320" height=“480"/>

Si se quiere configuración para sólo una plataforma: <platform name=“ios”>

… </platform>

Truco: para generar todos los iconos: http://makeappicon.com/

A programar un poco

- Buscar plugins: - $ cordova plugin search XXXX YYYY ZZZZ - http://plugins.cordova.io/npm/index.html

- Plugins más utilizados - $ cordova plugin add cordova-plugin-device - $ cordova plugin add cordova-plugin-network-information - $ cordova plugin add cordova-plugin-geolocation - $ cordova plugin add cordova-plugin-camera - $ cordova plugin add cordova-plugin-contacts - $ cordova plugin add cordova-plugin-console

Paso 3: Plugins

A programar un poco

Paso 3: Plugins

- Buscar plugins: - $ cordova plugin search XXXX YYYY ZZZZ - http://plugins.cordova.io/npm/index.html

- Plugins más utilizados - $ cordova plugin add cordova-plugin-device - $ cordova plugin add cordova-plugin-network-information - $ cordova plugin add cordova-plugin-geolocation - $ cordova plugin add cordova-plugin-camera - $ cordova plugin add cordova-plugin-contacts - $ cordova plugin add cordova-plugin-console

A programar un poco

Paso 4: Programar

Utilizar plugins anteriores: http://cordova.apache.org/docs/en/5.0.0/cordova_plugins_pluginapis.md.html

Guardar datos en el dispositivo: http://www.w3schools.com/html/html5_webstorage.asp

A programar un poco

Paso 4-B: SublimeText

- Cambiar ajustes: Preferences —> Settings -User

- Instalar Package Control—> https://packagecontrol.io/installation

- Instalar paquetes: - JShint (instalar también via NPM) - Package Control - SublimeLinter-XXXX - LESS o SASS - SideBarEnhancements

A programar un poco

Paso 4: Programar

Ejemplo: <button id="myButton">Make foto</button><img id="myImage" width="100px" height="100px" />

document.getElementById("myButton").addEventListener("touchend", getImage, false);

function getImage() { navigator.camera.getPicture(onSuccess, onFail, { quality: 50, sourceType : Camera.PictureSourceType.PHOTOLIBRARY, destinationType: Camera.DestinationType.DATA_URL });}

function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData;}

function onFail(message) { alert('Failed because: ' + message);}

A programar un poco

Paso 5: Cómo funcionan los plugins

plugin.xml <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:rim="http://www.blackberry.com/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" id="cordova-plugin-device" version="1.0.1"> <name>Device</name> <description>Cordova Device Plugin</description> <license>Apache 2.0</license> <keywords>cordova,device</keywords> <repo>https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git</repo> <issue>https://issues.apache.org/jira/browse/CB/component/12320648</issue>

<js-module src="www/device.js" name="device"> <clobbers target="device" /> </js-module>

<platform name="android"> <config-file target="res/xml/config.xml" parent="/*"> <feature name="Device" > <param name="android-package" value="org.apache.cordova.device.Device"/> </feature> </config-file> <source-file src="src/android/Device.java" target-dir="src/org/apache/cordova/device" /> </platform>

A programar un poco

Paso 5: Cómo funcionan los plugins

www/device.js

function Device() { }

Device.prototype.getInfo = function(successCallback, errorCallback) { argscheck.checkArgs('fF', 'Device.getInfo', arguments); exec(successCallback, errorCallback, "Device", "getDeviceInfo", []); };

module.exports = new Device();

A programar un poco

Paso 5: Cómo funcionan los plugins

src/android/Device.javapublic class Device extends CordovaPlugin {

public Device() { }

public void initialize(CordovaInterface cordova, CordovaWebView webView) { super.initialize(cordova, webView); Device.uuid = getUuid(); }

public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals("getDeviceInfo")) { JSONObject r = new JSONObject(); … callbackContext.success(r); } else { return false; } return true; }

A programar un poco

Paso 5: Cómo funcionan los plugins

Crear uno propio

- plugins.xml

- archivo JS

- archivos nativos (.java, .h, .m, etc.)

- Publicar en github

- http://cordova.apache.org/docs/en/5.0.0/guide_hybrid_plugins_index.md.html#Plugin%20Development%20Guide

A programar un poco

Paso 6: Optimizar el código

- touch vs click (300ms)

- Transiciones CSS vs cambios del DOM

- Cache local: localStorage

- Controlar falta de conexión: estado offline

- Quitar JS y CSS no utilizados

- Configuraciones http://cordova.apache.org/docs/en/5.0.0/guide_platforms_index.md.html#Platform%20Guides  

- merges/<platform>: ajustes por plataforma https://cordova.apache.org/docs/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

A programar un poco

Paso 7: Depuración en dispositivo

Chrome Remote Debugging: 1- Activar depuración USB en dispositivo

(si no aparece, hacer ‘truquillo’)

2- Conectar dispositivo

3- Ir a chrome://inspect y marcar el check ‘Discover USB devices’

Más info: screencasting + other config: https://developer.chrome.com/devtools/docs/remote-debugging

Safari Remote Debugging: 1- Activar ‘Web inspector’ en ‘Ajustes’ —> ‘Safari’ —> Avanzado

2- En Safari (Mac) acceder al dispositivo correspondiente en ‘Desarrollo’ (si no aparece, ir a ‘Preferencias’ —> ‘Avanzado’ —> ‘Mostrar el menú de desarrollo en la barra de menús’)

Otros

PhoneGap Buildhttps://build.phonegap.com/

Otros

PhoneGap Developer Apphttp://app.phonegap.com/

Otros

PhoneGap Enterprisehttp://enterprise.phonegap.com/

Otros

Crosswalk projecthttps://crosswalk-project.org

Otros

CocoonJShttps://www.ludei.com/

A programar un poco

One more thing…

Cómo funciona Cordova en su parte nativa

A programar un poco

One more thing…

Si queremos añadir Cordova a un proyecto existente y sólo en algunas partes del mismo:

http://cordova.apache.org/docs/en/5.0.0/guide_platforms_android_webview.md.html