Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Hybrid Mobile Apps with Ionic

1.431 Aufrufe

Veröffentlicht am

Veröffentlicht in: Software

Hybrid Mobile Apps with Ionic

  1. 1. Aplicaciones Móviles Híbridas con Junio, 2015
  2. 2. Erik Porroa frontend.pe erik@porroa.com @eporroa
  3. 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. 4. Hybrid Mobile Apps with Ionic - Erik Porroa http://revolucion.mobi
  5. 5. El problema de estar en Todos Lados Primero fue cross-browser, ahora cross-device Hybrid Mobile Apps with Ionic - Erik Porroa
  6. 6. Hybrid Mobile Apps with Ionic - Erik Porroa
  7. 7. Aplicaciones nativas vs. Web móvil Hybrid Mobile Apps with Ionic - Erik Porroa
  8. 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. 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. 10. Aplicaciones Nativas vs. Híbridas Hybrid Mobile Apps with Ionic - Erik Porroa
  11. 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. 12. Antes de Ionic, el Stack inicial: Hybrid Mobile Apps with Ionic - Erik Porroa
  13. 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. 14. CSS @media only screen and (min-width: 340px){ /* … */ } Hybrid Mobile Apps with Ionic - Erik Porroa
  15. 15. JavaScript var details = localStorage.getItem ('offlineConfig'); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(fn); } Hybrid Mobile Apps with Ionic - Erik Porroa
  16. 16. Cordova/Phonegap Hybrid Mobile Apps with Ionic - Erik Porroa Adobe PhoneGap
  17. 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. 18. Ionic Framework Hybrid Mobile Apps with Ionic - Erik Porroa
  19. 19. Hybrid Mobile Apps with Ionic - Erik Porroa http://blog.ionic.io/announcing-ionic-1-0/
  20. 20. AngularJS Hybrid Mobile Apps with Ionic - Erik Porroa
  21. 21. Ionic: Instalación $ npm install -g cordova ionic Hybrid Mobile Apps with Ionic - Erik Porroa
  22. 22. Ionic: Creando un nuevo proyecto Hybrid Mobile Apps with Ionic - Erik Porroa $ ionic start appname blank
  23. 23. Ionic: Creando un nuevo proyecto Hybrid Mobile Apps with Ionic - Erik Porroa $ ionic start appname tabs
  24. 24. Ionic: Creando un nuevo proyecto Hybrid Mobile Apps with Ionic - Erik Porroa $ ionic start appname sidemenu
  25. 25. Ionic: Corriendo el proyecto Hybrid Mobile Apps with Ionic - Erik Porroa $ cd appname $ ionic serve
  26. 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. 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. 28. Herramientas Adicionales Hybrid Mobile Apps with Ionic - Erik Porroa IonicView http://view.ionic.io
  29. 29. Herramientas Adicionales Hybrid Mobile Apps with Ionic - Erik Porroa
  30. 30. Herramientas Adicionales Hybrid Mobile Apps with Ionic - Erik Porroa IonicCreator http://creator.ionic.io
  31. 31. Herramientas Adicionales Hybrid Mobile Apps with Ionic - Erik Porroa
  32. 32. Herramientas Adicionales Hybrid Mobile Apps with Ionic - Erik Porroa
  33. 33. Herramientas Adicionales Hybrid Mobile Apps with Ionic - Erik Porroa
  34. 34. Herramientas Adicionales Hybrid Mobile Apps with Ionic - Erik Porroa
  35. 35. Personalización con SASS Hybrid Mobile Apps with Ionic - Erik Porroa
  36. 36. Personalización con SASS Hybrid Mobile Apps with Ionic - Erik Porroa $ ionic setup sass
  37. 37. Recursos http://ionicons.com/ Hybrid Mobile Apps with Ionic - Erik Porroa
  38. 38. Recursos https://crosswalk-project.org/ Hybrid Mobile Apps with Ionic - Erik Porroa
  39. 39. Recursos http://mydevice.io http://ngcordova.com http://codepen.io/ionic/public-list/ Hybrid Mobile Apps with Ionic - Erik Porroa
  40. 40. #CodingTime Hybrid Mobile Apps with Ionic - Erik Porroa
  41. 41. ¡Muchas gracias! :) Hybrid Mobile Apps with Ionic - Erik Porroa
  42. 42. #QnA Hybrid Mobile Apps with Ionic - Erik Porroa

×