El documento habla sobre las aplicaciones móviles híbridas con Ionic. Explica las diferencias entre aplicaciones nativas, web móvil y híbridas, y cómo Ionic combina HTML, CSS y JavaScript con Cordova para crear aplicaciones multiplataforma que se sienten nativas pero son actualizables como sitios web. También proporciona instrucciones para instalar Ionic y crear, ejecutar y personalizar aplicaciones híbridas.

1. Aplicaciones Móviles
Híbridas con
Junio, 2015

2. Erik Porroa
frontend.pe
erik@porroa.com
@eporroa

3. La revolución de ‘lo móvil’
La Web ha muerto, larga vida a las apps
Hybrid Mobile Apps with Ionic - Erik Porroa

4. Hybrid Mobile Apps with Ionic - Erik Porroa
http://revolucion.mobi

5. El problema de estar en
Todos Lados
Primero fue cross-browser, ahora cross-device
Hybrid Mobile Apps with Ionic - Erik Porroa

6. Hybrid Mobile Apps with Ionic - Erik Porroa

7. Aplicaciones nativas
vs. Web móvil
Hybrid Mobile Apps with Ionic - Erik Porroa

8. Aplicaciones Nativas
● Optimización de performance
● Para una plataforma específica
● Herramientas específicas de desarrollo
● Un desarrollo por cada plataforma
● Mayor costo de producción
Hybrid Mobile Apps with Ionic - Erik Porroa

9. Web Móvil
● Directo desde un Navegador Web
● Disponible en cualquier dispositivo
● Se actualiza sin problemas
● Optimizadas para un uso ligero
● Sin acceso al dispositivo (o hasta donde el
navegador lo permita)
● Una Web Puede ser una App!
Hybrid Mobile Apps with Ionic - Erik Porroa

10. Aplicaciones
Nativas vs. Híbridas
Hybrid Mobile Apps with Ionic - Erik Porroa

11. Agenda
● Revolución Móvil ✅
● Herramientas Web: HTML, CSS, JS
● Cordova, AngularJS y su integración móvil
● Ionic, instalación, desarrollo y
qué ver después.
● #CodingTime
● Recursos
● #QATime
Hybrid Mobile Apps with Ionic - Erik Porroa

12. Antes de Ionic, el Stack inicial:
Hybrid Mobile Apps with Ionic - Erik Porroa

13. HTML
<meta name="viewport" content="
width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0">
Hybrid Mobile Apps with Ionic - Erik Porroa

14. CSS
@media only screen and (min-width:
340px){
/* … */
}
Hybrid Mobile Apps with Ionic - Erik Porroa

15. JavaScript
var details = localStorage.getItem
('offlineConfig');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(fn);
}
Hybrid Mobile Apps with Ionic - Erik Porroa

16. Cordova/Phonegap
Hybrid Mobile Apps with Ionic - Erik Porroa
Adobe
PhoneGap

17. Cordova Native Apps
Hybrid Mobile Apps with Ionic - Erik Porroa
● Accelerometer
● Geolocation
● Camera
● Media
● Compass
● Network
● Contacts
● Notification
● File
● Storage
● Custom Plug-ins

18. Ionic Framework
Hybrid Mobile Apps with Ionic - Erik Porroa

19. Hybrid Mobile Apps with Ionic - Erik Porroa
http://blog.ionic.io/announcing-ionic-1-0/

20. AngularJS
Hybrid Mobile Apps with Ionic - Erik Porroa

21. Ionic: Instalación
$ npm install -g cordova ionic
Hybrid Mobile Apps with Ionic - Erik Porroa

22. Ionic: Creando un nuevo proyecto
Hybrid Mobile Apps with Ionic - Erik Porroa
$ ionic start appname blank

23. Ionic: Creando un nuevo proyecto
Hybrid Mobile Apps with Ionic - Erik Porroa
$ ionic start appname tabs

24. Ionic: Creando un nuevo proyecto
Hybrid Mobile Apps with Ionic - Erik Porroa
$ ionic start appname sidemenu

25. Ionic: Corriendo el proyecto
Hybrid Mobile Apps with Ionic - Erik Porroa
$ cd appname
$ ionic serve

26. Ionic: Corriendo el proyecto
Hybrid Mobile Apps with Ionic - Erik Porroa
$ cd appname
$ ionic platform add android
$ ionic build ios|android
$ ionic emulate ios|android
$ ionic run ios|android

27. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa
$ npm install -g phonegap
$ npm install -g gulp
$ npm install -g ios-sim [mac only]

28. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa
IonicView
http://view.ionic.io

29. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa

30. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa
IonicCreator
http://creator.ionic.io

31. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa

32. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa

33. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa

34. Herramientas Adicionales
Hybrid Mobile Apps with Ionic - Erik Porroa

35. Personalización con SASS
Hybrid Mobile Apps with Ionic - Erik Porroa

36. Personalización con SASS
Hybrid Mobile Apps with Ionic - Erik Porroa
$ ionic setup sass

37. Recursos
http://ionicons.com/
Hybrid Mobile Apps with Ionic - Erik Porroa

38. Recursos
https://crosswalk-project.org/
Hybrid Mobile Apps with Ionic - Erik Porroa

39. Recursos
http://mydevice.io
http://ngcordova.com
http://codepen.io/ionic/public-list/
Hybrid Mobile Apps with Ionic - Erik Porroa

40. #CodingTime
Hybrid Mobile Apps with Ionic - Erik Porroa

41. ¡Muchas gracias!
:)
Hybrid Mobile Apps with Ionic - Erik Porroa

42. #QnA
Hybrid Mobile Apps with Ionic - Erik Porroa