Este documento presenta información sobre aplicaciones multiplataforma. Explica la diferencia entre aplicaciones nativas e híbridas, cómo funcionan las aplicaciones híbridas utilizando HTML5, CSS y JavaScript empaquetadas con frameworks como Apache Cordova. También describe ventajas e inconvenientes de las aplicaciones híbridas y nativas, ejemplos de aplicaciones híbridas populares, y herramientas para desarrollar aplicaciones híbridas como Cordova, plugins y frameworks como Ionic.

1. Aplicaciones
multiplataforma
Ignacio Muñoz Vicente
@imunoz_
17 y 18 Septiembre 2015

2. Un poco de mi
Ignacio Muñoz Vicente
Ingeniero informático
Mobile Tech Leader
(Hiberus Tecnología)
@imunoz_ (linkedin + slideshare)
Co-autor libro desarrollo
de aplicaciones para iOS
(SEAS Estudios Superiores)
Certificado
Scrum Manager
Certificado
Kanban Foundation
Ingeniero Software
Telefónica I+D / Aurigae
Emprendiendo
proyectos de movilidad

3. Í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

4. 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/

5. 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

6. 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

7. Apps híbridas
Diferencia entre apps nativas e híbridas
HTML5 + JS + CSS3
+ Frameworks

8. Apps híbridas
Diferencia entre apps nativas e híbridas
WebView Android, Safari,
Crosswalk, CocoonJS

9. Apps híbridas
Diferencia entre apps nativas e híbridas
Código nativo:
- Java
- Swift / ObjectiveC

10. Apps híbridas
Diferencia entre apps nativas e híbridas
Integrador entre JS
y código nativo

11. Apps híbridas
Diferencia entre apps nativas e híbridas
Sistema operativo:
- Android
- iOS
- Windows
- Blackberry OS
- Etc.

12. 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.

13. Apps híbridas
Diferencia entre apps nativas e híbridas
http://es.slideshare.net/ejlp12/intro-to-apache-cordova

14. Apps híbridas
Cómo funciona Desarrollamos la aplicación:
- Diseño y maquetación: HTML 5 + CSS 3
- Programación: JS

15. Apps híbridas
Cómo funciona
Encapsulamos la aplicación con
(por ejemplo) Apache Cordova

16. Apps híbridas
Cómo funciona
OTROS
Desplegamos en las plataformas deseadas

17. Apps híbridas
Cómo funciona
Plugin
Código nativo Si necesitamos funcionalidad nativa, implementarla + crear plugin (por cada plataforma)
OTROS

18. 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

19. 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)

20. Apps híbridas
Coste temporal
App híbrida
App nativa Android
App nativa iOS
App nativa Windows
VS
1 3

21. Apps híbridas
Coste temporal
App híbrida
App nativa Android
App nativa iOS
App nativa Windows
VS
1 3

22. 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

23. Apps híbridas
JavaScript
Mucha más info en: http://githut.info/

24. Apps híbridas
¿Qué tipo de desarrollo se utiliza?
Casi siempre es una decisión
basada en el presupuesto
disponible

25. Apps híbridas
Ejemplos
HE Mango Evernote Uber

26. Un poco de historia
Nitobi crea PhoneGap
2009
2011 Sept
Nitobi dona el código de PhoneGap
a la fundación Apache
Adobe compra Nitobi
2011 Oct
2012 Feb
Apache renombra el proyecto
como Cordova
Adobe lanza PhoneGap Build
2012
Adobe es hackeado
2013 Oct

27. 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…

28. 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

29. 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

30. A programar un poco
hooks
Permite ejecutar tareas automáticas cuando se ejecutan
comandos de Cordova
plataforms
Proyectos híbridos generados. En este ejemplo, proyecto Xcode
plugins
Contenedor de plugins utilizados en la aplicación
www
Aplicación HTML5 que se desplegará en todos los SO
config
Configuración de la app híbrida

31. A programar un poco
App iOS
Al 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.

32. 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>

33. 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

34. 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>

35. 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/

36. 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

37. 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

38. 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

39. 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

40. 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);
}

41. 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>

42. 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();

43. A programar un poco
Paso 5: Cómo funcionan los plugins
src/android/Device.java
public 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;
}

44. 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

45. 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

46. 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’)

47. Otros
PhoneGap Build
https://build.phonegap.com/

48. Otros
PhoneGap Developer App
http://app.phonegap.com/

49. Otros
PhoneGap Enterprise
http://enterprise.phonegap.com/

50. Otros
Crosswalk project
https://crosswalk-project.org

51. Otros
CocoonJS
https://www.ludei.com/

52. A programar un poco
One more thing…
Cómo funciona Cordova en su parte nativa

53. 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