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