Hybrid Mobile Apps with Ionic

Aplicaciones MóvilesHíbridas con

Junio, 2015

Erik Porroafrontend.pe

[email protected]@eporroa

mailto:[email protected]

mailto:[email protected]

La revolución de ‘lo móvil’La Web ha muerto, larga vida a las apps

Hybrid Mobile Apps with Ionic - Erik Porroa


http://revolucion.mobi

El problema de estar en Todos Lados

Primero fue cross-browser, ahora cross-device



Aplicaciones nativasvs. Web móvil


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


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!


Aplicaciones Nativas vs. Híbridas


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


Antes de Ionic, el Stack inicial:


HTML

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">


CSS

@media only screen and (min-width: 340px){

/* … */

}


JavaScript

var details = localStorage.getItem('offlineConfig');

if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(fn);}


Cordova/Phonegap


Adobe

PhoneGap

Cordova Native Apps


● Accelerometer● Geolocation● Camera● Media● Compass

● Network● Contacts● Notification● File● Storage● Custom Plug-ins

Ionic Framework



http://blog.ionic.io/announcing-ionic-1-0/

AngularJS


Ionic: Instalación

$ npm install -g cordova ionic


Ionic: Creando un nuevo proyecto


$ ionic start appname blank



$ ionic start appname tabs



$ ionic start appname sidemenu

Ionic: Corriendo el proyecto


$ cd appname

$ ionic serve

Ionic: Corriendo el proyecto


$ cd appname

$ ionic platform add android

$ ionic build ios|android

$ ionic emulate ios|android

$ ionic run ios|android

Herramientas Adicionales


$ npm install -g phonegap

$ npm install -g gulp

$ npm install -g ios-sim [mac only]



IonicView

http://view.ionic.io





IonicCreator

http://creator.ionic.io









Personalización con SASS


Personalización con SASS


$ ionic setup sass

Recursoshttp://ionicons.com/


Recursoshttps://crosswalk-project.org/


Recursos

http://mydevice.io

http://ngcordova.com

http://codepen.io/ionic/public-list/


http://mydevice.io

http://mydevice.io





#CodingTime


¡Muchas gracias!:)


#QnA


Software

Hybrid Mobile Apps with Ionic