Trasparencias utilizadas para la charla GDG Madrid: Cordova + AngularJS + Ionic

1. www.autentia.com
@raguilera82
github.com/raguilera82
raguilera@autentia.com

2. www.autentia.com
¿Quién soy yo?
Consultor Sénior en Autentia, me puedes encontrar en
www.adictosaltrabajo.com
+10 años en este mundillo, actualmente interesado en
cacharrerar con movilidad.
Aprendiz permanente, maestro ocasional.

3. www.autentia.com
Situación
Android IOS Windows
Phone
FirefoxOS
% Mercado 86,1 % 8,7 % 4,6 % 0,2 %
Lenguajes Java Objective-C C# HTML, CSS, JS
Herramientas/Pl
ataformas
Android
Developer/Mac,
Linux y
Windows
XCode / Mac Visual Studio /
Windows
Editor Web /
Mac, Linux y
Windows
Ejecutables .apk .app .xap .zip
Markets Google Play Apple Store Market Firefox Market
Coste
Distribución
25 €/año 80 €/año 14 €/año 0 €

4. www.autentia.com
Problemas
Necesitamos conocer todas las tecnologías: Java,
Objective-C, C#, HTML5, CSS3, Javascript.
El tiempo y por tanto el coste de desarrollo de una
aplicación se multiplica por el número de plataformas
soportadas.
Lo ideal sería desarrollar una única aplicación.

5. www.autentia.com
1º Solución: Aplicación Web
Creamos una aplicación web que sea ejecutada con el
navegador del dispositivo.
Problemas:
● No podemos hacer uso de las funcionalidades del
móvil como la cámara, los contactos, etc..
● No podemos aprovechar los markets para la
distribución de la aplicación.
● La ejecución va a depender del navegador que se
esté utilizando.

6. www.autentia.com
2º Solución: Aplicación Híbrida
Son aplicaciones web (HTML5, CSS3 y Javascript) que
acceden a las funciones nativas de los dispositivos pero
de una determinada plataforma.
Aprovechamos el market de esa plataforma.
Si queremos ejecutar nuestra aplicación en otra
plataforma tenemos que hacer otro desarrollo híbrido
específico para esa plataforma.

7. www.autentia.com
3º Solución: PhoneGap / Cordova
Creamos una aplicación híbrida con HTML5, CSS3 y
Javascript y la podemos ejecutar directamente en todas las
plataformas soportadas.
Podemos hacer uso de las funcionalidades del móvil gracias
a un API Javascript que se adapta a cada plataforma.
Podemos publicar la aplicación en los markets de cada
plataforma.

8. www.autentia.com
API Reference (3.4)
File
Geolocation
Globalization
InAppBrowser
Media
Notification
Splashscreen
Storage
Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events

9. www.autentia.com
Historia
2008, la empresa Nitobi presenta PhoneGap en el
iPhoneDevCamp.
2011, Adobe compra Nitobi y PhoneGap se convierte en
la distribución del proyecto libre Apache Cordova.
2012, Adobe presenta PhoneGap Build, plataforma de
pago que permite la construcción y distribución de estas
aplicaciones en la nube.

10. www.autentia.com
Empezando con Cordova
Para instalar Cordova necesitamos tener instalado Node
en nuestra máquina. http://nodejs.org
Después ejecutamos en un terminal:
sudo npm install -g cordova

11. www.autentia.com
Crear primer proyecto
Abrimos un terminal y ejecutamos:
cordova create HolaMundo com.autentia.holamundo “Hola Mundo”
1º Es el path de la carpeta del proyecto
2º Es el id del widget (Opcional)
3º Es el nombre del proyecto (Opcional)

12. www.autentia.com
Estructura del proyecto
merges: para personalizar código.
platforms: contiene cada uno de los proyectos por
plataforma.
plugins: para extender funcionalidad por plataforma.
www: contiene los ficheros fuentes de la aplicación.

13. www.autentia.com
Plugins
Es la mejor forma de extender funcionalidad. Existen
muchos plugins listos para ser utilizados (https://build.
phonegap.com/plugins)
cordova plugins ls
cordova plugins add org.apache.cordova.camera
cordova plugins rm org.apache.cordova.camera

14. www.autentia.com
Platforms
Es momento de añadir las plataformas que queramos
soportar.
Importante: Nuestra máquina de desarrollo tiene que
estar preparada para la plataforma en cuestión.
Ej: no puedo desarrollar para wp8 fuera de Windows 8.
cordova platforms add ios android wp8 firefoxos

15. www.autentia.com
www
Aquí es donde vamos a desarrollar nuestra aplicación
con HTML5, CSS3 y Javascript.
Podemos utilizar cualquier framework de front-end como
AngularJS, Ember, Backbone, etc...
Nos crea una aplicación de ejemplo lista para desplegar.

16. www.autentia.com
Construir la aplicación
Para construir la aplicación para todas las plataformas
dadas de alta:
cordova build
Para una específica:
cordova build [ios | android | wp8]

17. www.autentia.com
Construir para FirefoxOS
El caso de FirefoxOS es algo especial dado que no tiene
binarios basta con ejecutar:
cordova prepare
Para firefoxos exclusivamente:
cordova prepare firefoxos

18. www.autentia.com
Probar la aplicación
Podemos emular la aplicación en una plataforma
específica:
cordova emulate [ios | android]
Podemos arrancar en un dispositivo físico:
cordova run [ios | android]

19. www.autentia.com
Desmontando la magia
Se trata de una aplicación híbrida que conecta con las
clases nativas a través de su API Javascript.
cordova.exec(successCallback, failCallback, “Clase”, “accion”,
args)
En cada plataforma implementamos la acción como
corresponda:
public class Clase extends CordovaPlugin{
public boolean execute(String accion, JSONArray args,
CallbackContext callbackContext){}
}

20. www.autentia.com
Cosas a tener en cuenta
Nos crea proyectos independientes para cada una de las
plataformas dadas de alta que se pueden abrir con las
herramientas específicas.
En determinados procesos puede empeorar la experiencia de
usuario con respecto a aplicaciones puramente nativas.
La distribución en los markets depende de las condiciones de
cada plataforma: licencias, costes, iconos, ...

21. www.autentia.com
Buenas prácticas
Desarrollar inicialmente para una plataforma, podría ser
FirefoxOS por su facilidad de debug y la rapidez del
simulador, aunque Android gracias a Genymotion es una
buena alternativa también.
Probar en el resto de plataformas y solucionar
diferencias a través de “merges” y “plugins”.

22. www.autentia.com
Buenas prácticas
Siempre personalizar las interfaces a través de la
carpeta “merges”.
Siempre extender la funcionalidad con la creación de
plugins reutilizables para cada una de las plataformas.
Solo subir al control de versiones las carpetas “merges”
y “www”. El resto del proyecto se genera desde la
plataforma específica.

23. www.autentia.com
¿Y Ahora qué?

24. www.autentia.com
Yeoman + AngularJS
sudo npm install -g yo bower grunt
sudo npm install -g generator-angular
yo angular

25. www.autentia.com
Yeoman + AngularJS

26. www.autentia.com
Yeoman + AngularJS
grunt serve

27. www.autentia.com
Integrar Cordova
1. Eliminar la directiva ng-app del index.html
2. Añadir el cordova.js al index.html, asegurando que
no se ve afectado por la minificación de scripts
3. En el fichero app.js crear el siguiente script

28. www.autentia.com
Integrar Cordova
var CordovaInit = function() {
if (window.cordova) {
document.addEventListener('deviceready', function() {
console.log('Arranco angular desde cordova');
boot();
});
} else {
console.log('Arranco angular desde web');
boot();
}
function boot(){
angular.bootstrap(document, [ 'gdgdemoApp' ]);
}
};
angular.element(document).ready(function() {
new CordovaInit();
});

29. www.autentia.com
Integrar Cordova
cordova create cordova-apps “com.autentia” “GDGDemo” --link-
to=app
cd cordova-apps && cordova platforms add android
cordova build android
cordova run android

30. www.autentia.com
¿Y Ahora qué?

31. www.autentia.com
Ionic
bower install ionic#1.0.0-beta.5b --save
Es un framework para dar apariencia “nativa” a nuestras
aplicaciones híbridas.
Ofrece directivas predefinidas en AngularJS y un
conjunto de estilos e iconos muy útiles.

32. www.autentia.com
Ionic

33. www.autentia.com
Demo Time
https://github.com/raguilera82/GDG-demo

34. www.autentia.com

35. www.autentia.com
“Somos pocos, somos buenos, estamos
motivados y nos gusta lo que hacemos”