desarrollo de aplicaciones multiplataforma 1/2
TRANSCRIPT
![Page 1: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/1.jpg)
Aplicaciones multiplataforma
Ignacio Muñoz Vicente @imunoz_ 17 y 18 Septiembre 2015
![Page 2: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/2.jpg)
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
![Page 3: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/3.jpg)
Í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
![Page 4: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/4.jpg)
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/
![Page 5: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/5.jpg)
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
![Page 6: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/6.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
![Page 7: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/7.jpg)
Apps híbridas
Diferencia entre apps nativas e híbridas
HTML5 + JS + CSS3 + Frameworks
![Page 8: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/8.jpg)
Apps híbridas
Diferencia entre apps nativas e híbridas
WebView Android, Safari, Crosswalk, CocoonJS
![Page 9: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/9.jpg)
Apps híbridas
Diferencia entre apps nativas e híbridas
Código nativo: - Java - Swift / ObjectiveC
![Page 10: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/10.jpg)
Apps híbridas
Diferencia entre apps nativas e híbridas
Integrador entre JS y código nativo
![Page 11: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/11.jpg)
Apps híbridas
Diferencia entre apps nativas e híbridas
Sistema operativo: - Android - iOS - Windows - Blackberry OS - Etc.
![Page 12: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/12.jpg)
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.
![Page 13: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/13.jpg)
Apps híbridas
Diferencia entre apps nativas e híbridas
http://es.slideshare.net/ejlp12/intro-to-apache-cordova
![Page 14: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/14.jpg)
Apps híbridas
Cómo funciona Desarrollamos la aplicación: - Diseño y maquetación: HTML 5 + CSS 3 - Programación: JS
![Page 15: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/15.jpg)
Apps híbridas
Cómo funciona
Encapsulamos la aplicación con (por ejemplo) Apache Cordova
![Page 16: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/16.jpg)
Apps híbridas
Cómo funciona
OTROS
Desplegamos en las plataformas deseadas
![Page 17: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/17.jpg)
Apps híbridas
Cómo funciona
Plugin
Código nativo Si necesitamos funcionalidad nativa, implementarla + crear plugin (por cada plataforma)
OTROS
![Page 18: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/18.jpg)
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
![Page 19: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/19.jpg)
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)
![Page 20: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/20.jpg)
Apps híbridas
Coste temporal
App híbrida
App nativa Android
App nativa iOS
App nativa Windows
VS1 3
![Page 21: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/21.jpg)
Apps híbridas
Coste temporal
App híbrida
App nativa Android
App nativa iOS
App nativa Windows
VS1 3
![Page 22: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/22.jpg)
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
![Page 24: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/24.jpg)
Apps híbridas
¿Qué tipo de desarrollo se utiliza?
Casi siempre es una decisión basada en el presupuesto disponible
![Page 25: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/25.jpg)
Apps híbridas
Ejemplos
HE Mango Evernote Uber
![Page 26: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/26.jpg)
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
![Page 27: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/27.jpg)
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…
![Page 28: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/28.jpg)
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
![Page 29: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/29.jpg)
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
![Page 30: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/30.jpg)
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
![Page 31: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/31.jpg)
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.
![Page 32: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/32.jpg)
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>
![Page 33: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/33.jpg)
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
![Page 34: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/34.jpg)
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>
![Page 35: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/35.jpg)
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/
![Page 36: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/36.jpg)
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
![Page 37: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/37.jpg)
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
![Page 38: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/38.jpg)
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
![Page 39: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/39.jpg)
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
![Page 40: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/40.jpg)
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);}
![Page 41: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/41.jpg)
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>
![Page 42: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/42.jpg)
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();
![Page 43: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/43.jpg)
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; }
![Page 44: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/44.jpg)
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
![Page 45: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/45.jpg)
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
![Page 46: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/46.jpg)
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’)
![Page 47: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/47.jpg)
Otros
PhoneGap Buildhttps://build.phonegap.com/
![Page 48: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/48.jpg)
Otros
PhoneGap Developer Apphttp://app.phonegap.com/
![Page 49: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/49.jpg)
Otros
PhoneGap Enterprisehttp://enterprise.phonegap.com/
![Page 50: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/50.jpg)
Otros
Crosswalk projecthttps://crosswalk-project.org
![Page 51: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/51.jpg)
Otros
CocoonJShttps://www.ludei.com/
![Page 52: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/52.jpg)
A programar un poco
One more thing…
Cómo funciona Cordova en su parte nativa
![Page 53: Desarrollo de aplicaciones multiplataforma 1/2](https://reader033.vdocuments.net/reader033/viewer/2022052205/58ec9ee01a28ab754e8b46cb/html5/thumbnails/53.jpg)
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