Desarrollo de aplicaciones multiplataforma 1/2
-
Upload
ignacio-munoz-vicente -
Category
Internet
-
view
677 -
download
0
Transcript of Desarrollo de aplicaciones multiplataforma 1/2
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
¿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="[email protected]" 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="[email protected]" 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