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.
Cada vez más personas y empresas invierten sus esfuerzos en tener presencia en dispositivos móviles. Pero a la hora de abordar esta figura surge siempre la misma pregunta: ¿Versión web móvil o aplicación nativa? ¿Cuáles son sus ventajas? ¿Y sus inconvenientes? ¿Te interesaría conocer las consideraciones que son necesarias a tener en cuenta para tomar estas decisiones?
Programación de apps multiplataforma con Apache Cordova
(parte 2 de 2).
Explicación de qué es y cómo desarrollar aplicaciones con AngularJS e Ionic Framework. Controllers, services, filters, directives, etc.
Con el auge de las tecnologías Web, se están realizando desarrollo móviles empleando estrategias híbridas con frameworks como Apache Cordova (aka PhoneGap) o trigger.io. Pero, debido a un no buen entendimiento de en qué medida mezclar el desarrollo nativo y el Web en la aplicación, en algunas ocasiones, las aplicaciones desarrolladas pueden no llegar cubrir las expectativas, creando una mala reputación para este tipo de desarrollos híbridos.
La charla se centraría en exponer:
Revisión de los diferentes tipos de desarrollo móvil.
Los diferentes aproximaciones/frameworks híbridos disponibles para el desarrollo de aplicaciones móviles.
El correcto entendimiento de una estrategia híbrida: predominantemente nativa vs web.
Lecciones aprendidas del desarrollo híbrido a tener en cuenta.
Estrategias de desarrollo de aplicaciones móviles.
Ultimas tendencias: framework Calatrava.
Aplicaciones Mobile con AngularJS y Ionic framework Marcos Reynoso
Presentación de la charla "Aplicaciones Mobile con AngularJS y Ionic Framework" realizada el día 27 de marzo de 2014 para el grupo de meetup de AngularJS de Buenos Aires.
Desarrollo de apps móviles con Apache CordovaSoftware Guru
Con la amplia variedad de dispositivos, plataformas y funcionalidades existentes en el mundo de dispositivos móviles, se ha vuelto muy difícil para los desarrolladores el crear aplicaciones de forma rápida, así como de dar mantenimiento a estas en las diferentes combinaciones de plataformas (iOS, Android, Windows, etc.). Así mismo, poner las aplicaciones en las manos de los usuarios hace que esto sea un tarea casi imposible en un periodo de tiempo corto.
Apache Cordova provee un conjunto de APIs para crear aplicaciones móviles híbridas usando tecnologías Web que pueden accesar funciones nativas, tales como la cámara, contactos, acelerómetro, red, etc.
En esta sesión, Victor Sosa demostrará como se puede crear una aplicación móvil de una forma rápida que es capaz de ser usada en diferentes dispositivos y plataformas y que además usará funciones nativas. También compartirá buenas prácticas y recomendaciones para proyectos de desarrollo de aplicaciones basadas en Apache Cordova.
Cada vez más personas y empresas invierten sus esfuerzos en tener presencia en dispositivos móviles. Pero a la hora de abordar esta figura surge siempre la misma pregunta: ¿Versión web móvil o aplicación nativa? ¿Cuáles son sus ventajas? ¿Y sus inconvenientes? ¿Te interesaría conocer las consideraciones que son necesarias a tener en cuenta para tomar estas decisiones?
Programación de apps multiplataforma con Apache Cordova
(parte 2 de 2).
Explicación de qué es y cómo desarrollar aplicaciones con AngularJS e Ionic Framework. Controllers, services, filters, directives, etc.
Con el auge de las tecnologías Web, se están realizando desarrollo móviles empleando estrategias híbridas con frameworks como Apache Cordova (aka PhoneGap) o trigger.io. Pero, debido a un no buen entendimiento de en qué medida mezclar el desarrollo nativo y el Web en la aplicación, en algunas ocasiones, las aplicaciones desarrolladas pueden no llegar cubrir las expectativas, creando una mala reputación para este tipo de desarrollos híbridos.
La charla se centraría en exponer:
Revisión de los diferentes tipos de desarrollo móvil.
Los diferentes aproximaciones/frameworks híbridos disponibles para el desarrollo de aplicaciones móviles.
El correcto entendimiento de una estrategia híbrida: predominantemente nativa vs web.
Lecciones aprendidas del desarrollo híbrido a tener en cuenta.
Estrategias de desarrollo de aplicaciones móviles.
Ultimas tendencias: framework Calatrava.
Aplicaciones Mobile con AngularJS y Ionic framework Marcos Reynoso
Presentación de la charla "Aplicaciones Mobile con AngularJS y Ionic Framework" realizada el día 27 de marzo de 2014 para el grupo de meetup de AngularJS de Buenos Aires.
Desarrollo de apps móviles con Apache CordovaSoftware Guru
Con la amplia variedad de dispositivos, plataformas y funcionalidades existentes en el mundo de dispositivos móviles, se ha vuelto muy difícil para los desarrolladores el crear aplicaciones de forma rápida, así como de dar mantenimiento a estas en las diferentes combinaciones de plataformas (iOS, Android, Windows, etc.). Así mismo, poner las aplicaciones en las manos de los usuarios hace que esto sea un tarea casi imposible en un periodo de tiempo corto.
Apache Cordova provee un conjunto de APIs para crear aplicaciones móviles híbridas usando tecnologías Web que pueden accesar funciones nativas, tales como la cámara, contactos, acelerómetro, red, etc.
En esta sesión, Victor Sosa demostrará como se puede crear una aplicación móvil de una forma rápida que es capaz de ser usada en diferentes dispositivos y plataformas y que además usará funciones nativas. También compartirá buenas prácticas y recomendaciones para proyectos de desarrollo de aplicaciones basadas en Apache Cordova.
Aplicaciones híbridas: presente y futuro del desarrollo móvilatSistemas
Ha llegado a su fin la época en la que un departamento de desarrollo debía concentrarse, exclusivamente, en crear aplicaciones para PC.
Actualmente, vivimos y hacemos negocios en un entorno omnicanal, en el que nuestros clientes interaccionan con nosotros y nuestra competencia a través de todos los dispositivos posibles y en todas las situaciones imaginables y en el que nuestros usuarios internos exigen acceso ubicuo a las aplicaciones corporativas desde sus dispositivos personales.
La decisión ya no radica entre desarrollar o no pensando en dispositivos tan diversos como la web, los smartphones, las tabletas, las televisiones inteligentes o los dispositivos wearable. Ahora, la única decisión que cabe tomar es cómo hacer eso consiguiendo el equilibrio entre funcionalidad, experiencia de uso, rendimiento, mantenibilidad y, sobre todo, coste.
Presentación que se preparo para la conferencia dada en el Congreso Multidisciplinario en Tecnologías para la Innovación Tekhné 2014, sobre Aplicaciones móviles híbridas.
Desarrollo de apps híbridas HTML5 con intel XDKSoftware Guru
Estudiaremos los aspectos fundamentales para el desarrollo de aplicaciones móviles híbridas HTML5, y revisaremos como nos puede ayudar la herramienta Intel XDK.
Buenas prácticas en el desarrollo para Android.
Consejos sobre:
- Organización del código
- Trucos en programación Java
- Reutilización
- Rendimiento
- Compartición de datos
- Usabilidad
- Etc.
Aplicaciones híbridas: presente y futuro del desarrollo móvilatSistemas
Ha llegado a su fin la época en la que un departamento de desarrollo debía concentrarse, exclusivamente, en crear aplicaciones para PC.
Actualmente, vivimos y hacemos negocios en un entorno omnicanal, en el que nuestros clientes interaccionan con nosotros y nuestra competencia a través de todos los dispositivos posibles y en todas las situaciones imaginables y en el que nuestros usuarios internos exigen acceso ubicuo a las aplicaciones corporativas desde sus dispositivos personales.
La decisión ya no radica entre desarrollar o no pensando en dispositivos tan diversos como la web, los smartphones, las tabletas, las televisiones inteligentes o los dispositivos wearable. Ahora, la única decisión que cabe tomar es cómo hacer eso consiguiendo el equilibrio entre funcionalidad, experiencia de uso, rendimiento, mantenibilidad y, sobre todo, coste.
Presentación que se preparo para la conferencia dada en el Congreso Multidisciplinario en Tecnologías para la Innovación Tekhné 2014, sobre Aplicaciones móviles híbridas.
Desarrollo de apps híbridas HTML5 con intel XDKSoftware Guru
Estudiaremos los aspectos fundamentales para el desarrollo de aplicaciones móviles híbridas HTML5, y revisaremos como nos puede ayudar la herramienta Intel XDK.
Buenas prácticas en el desarrollo para Android.
Consejos sobre:
- Organización del código
- Trucos en programación Java
- Reutilización
- Rendimiento
- Compartición de datos
- Usabilidad
- Etc.
Presentación de charla efectuada en el evento Encuentro Social de Desarrolladores organizado por el grupo Desarrolladores Habana. Trata sobre desarrollo para aplicaciones móviles empleando las tecnologías Ionic y Apache Cordova.
Desenvolvimento de Aplicativo Multiplataforma com Intel® XDKEvandro Paes
O objetivo da apresentação é mostrar como desenvolver de forma fácil e rápida aplicativos móveis híbridos com a ferramenta Intel XDK. Abordarei sobre aplicativos híbridos, framewroks de desenvolvimento mobile, sobre a ferramenta e suas funcionalidades, além da demonstração de um aplicativo.
O Minicurso Intel XDK é uma série de vídeo-aulas sobre a ferramenta de desenvolvimento multiplataforma Intel XDK, onde são apresentados os principais tópicos para o desenvolvimento mobile nesta IDE, utilizando HTML5 e Apache Cordova.
De maneira objetiva e abrangente, as aulas mostram os conceitos básicos da ferramenta, suas bibliotecas, como acessar os recursos de hardware do dispositivo (GPS, Câmera, etc.), até a publicação do aplicativo nas lojas mobile.
Veja a série 'Minicurso Intel XDK' em http://diegocavalca.com/minicurso-intel-xdk/
Easy Taxi è la soluzione innovativa ai problemi di gestione di tali flotte che consente di ottimizzare il servizio di “lancio corse” e prenotazioni e nel contempo migliorare e velocizzare il contatto con il cliente
"Pocos metros y mucho orden": la decoradora Margarida Muñoz en la revista Cos...Margarida Muñoz
Reportaje "Pocos metros y mucho orden" dedicado a un proyecto de reforma y decoración integral dirigido por la decoradora Margarida Muñoz en una vivienda localizada en Barcelona.
El reportaje fue realizado por el equipo de la revista de interiorismo "Cosas de Casa" (RBA) y publicado en el número 222 (junio de 2015).
HP Enterprise Security Products - Intelligent Security & Risk management Platform, una risposta globale e proattiva alle nuove sfide del mercato della sicurezza.
Pierpaolo Ali' , HP Enterprise Security Product - Sales Director Italy
El seminario tiene dos partes bien diferenciadas. En la primera parte se introduce ANDROID: las herramientas de desarrollo más utilizadas, cómo subir una aplicación al market y finalmente se desarrollará una aplicación de ejemplo paso a paso.
En la segunda parte se abordarán los distintos kernels de ANDORID, las posibilidades de modificar un kernel existente o desarrollar uno a medida.
Los asistentes al seminario deberán traer sus portátiles y terminales ANDORID para participar y desarrollar los ejemplos. El formato del curso será abierto, resolviendo el profesor las dudas que surjan sobre la marcha, así como las que planteen los alumnos.
Presentación empleada en el taller "Desarrollo de apps móviles con la tecnología del SIG Corporativo de la Junta de Andalucía", impartido en las Jornadas Ibéricas de Infraestructuras de Datos Espaciales de 2015, en la ciudad de Sevilla, España. www.jiide.org
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+DinLabFIB
Workshop realitzat per l'equip uLab UPC de l'inLab FIB, després de realitzar una prova de concepte de la tecnologia. Més informació:
http://inlab.fib.upc.edu/ca/blog/meteorjs-getting-started
Smad TI - Phonegap Aplicaciones Nativas Móviles con HTML5Smad IT
Esta presentacion fue creada para el Demo Day de Parquesfot Quindio que se realizo en la Universidad del Quindio; en ella podra encontrar informacion de como construir aplicaciones moviles nativas multipilataforma con phonegap y html5.
Presentación para el 2do meetup TI realizado en Temuco - Chile. La presentación por si sola no es auto explicativa, por lo que se puede complementar con este video: http://www.youtube.com/playlist?list=PLDBEAE35BC0850582
Taller de Android para Webconf Latino 2010
- El sistema operativo de android con DEX
- Desarrollo y herramientas de Android (eclipse)
- Herramientas para crear aplicaciones
- Como crear una imagen y el emulador
- Desarrollo nativo en C/C++ para Android
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