Ionic, Adaptación de desarrollos web a dispositivos móviles

© 2015 Título de experto universitario en programación con tecnologías web

Desarrollos web adaptados a

dispositivos móviles

Ionic + Cordova


ENIAC (1946)30.000.000 g

170.000 W

500.000 $

30.000 mm

500 FLOPS

iPhone 6 (2014)129 g

5 W

699 $

138 mm

7.680.000.000 FLOPS

x 0,0000043

x 15.360.000


El presente es móvil


Android® iOS® Windows Phone® Blackberry

Plataformas relevantes


Plataformas relevantes


Posibilidades de desarrollo





Único lenguaje Múltipleslenguajes

Bajo rendimiento Mayor rendimiento →

Rápido desarrollo Desarrollo dedicado

Mezcla

Acceso al dispositivoSin acceso



Único lenguaje

Bajo rendimiento

Mayor rendimiento

Acceso al dispositivo

Rápido desarrollo

MúltipleslenguajesMezcla

Desarrollo dedicado

Sin acceso



Ionic - ¿Qué es?

Es un framework para el desarrollo

de aplicaciones híbridas basadas en html5, css y javascript, con una estética y usabilidad mobile friendly.

Utiliza AngularJS y Cordova.


VS

Framework

Se basa en AngularJS

Declarativo

Incluye compilador

Librería

Se basa en jQuery

Imperativo

No incluye compilador


Ionic - Más que un framework


Ionic - Creator

creator.ionic.io


Pero centrémonos en el desarrollo

Estructura y estética Funcionalidad+


Ionic - CSS + HTML5

Estética muy cercana a la propuesta por Apple

En desarrollo la adecuación con la guía de estilo Material Design


Ionic - CSS - Colores

Similar a bootstrap.

<button class="button button-light"> Hello button</button>


Ionic - CSS - Iconos Paquete de iconos vectorialesLlamado ionicons

Descargarlos desde ionicons.comLuego añadir las fonts y css.

Ejemplo<i class="icon ion-star"></i>

http://ionicons.com/


Ionic - CSS - Botonesbutton-<color>

<button class="button button-stable"> button-stable

</button>

button-block

<button class="button button-block"> button-stable

</button>

button-full

<button class="button button-full"> button-stable

</button>


Ionic - CSS - BotonesBotones con iconos

<button class="button icon-left ion-home">

Home

</button>

Agrupación de botones

<div class="button-bar"> <a class="button">First</a> <a class="button">Second</a> <a class="button">Third</a></div>


Ionic - CSS - Toggle<label class="toggle">

<input type="checkbox">

<div class="track">

<div class="handle"></div>

</div>

</label>


Ionic - CSS - Checkbox<li class="item item-checkbox">

<label class="checkbox">

<input type="checkbox">

</label>

Flux Capacitor

</li>


Ionic - CSS - Rango<div class="item range range-positive">

<i class="icon ion-volume-low"></i>

<input type="range" name="volume" min="0" max="100" value="33">

<i class="icon ion-volume-high"></i>

</div>


Ionic - CSS - Listados<ul class="list">

<li class="item">

...

</li>

</ul>


Ionic - CSS - Grid System<div class="row">

<div class="col">.col</div>



</div>

● Columna libre● Columna fija● Alineación vertical

○ De fila○ De columna

● Responsive


Ionic - CSS - Estructura básica<ion-pane>

<div class="bar bar-stable bar-header">

<h1 class="title">Awesome App</h1>

</div>

<div class="content padding has-header">

<button class="button button-assertive">I'm a button</button>

</div>

<div class="bar bar-stable bar-footer">

<h1 class="title">Awesome App</h1>

</div>

</ion-pane>


VAMOS AL RECREO!Pero no al que os pensáis...

play.ionic.io

Y en otra pestaña:http://ionicframework.com/docs/


Ejercicio 1: Crear una aplicación de cero y crear:1. Header con título “Ejercicio 1”

2. Listado con un conjunto de libros. Cada ítem debe tener como mínimo el título.

3. Footer gris que contenga un interruptor. Cuando esté encendido el header se vuelve verde, cuando esté apagado se queda blanca.


Ionic - Angular JS

Uso del magnífico framework JS para:➔ Empaquetar la aplicación Ionic➔ Navegación por estados➔ Directivas personalizadas➔ Binding de los datos➔ Modularización➔ ...


Ionic - JS - Popover$ionicPopover.fromTemplateUrl('popover.html', {scope: $scope})

.then(function(popover) {

$scope.popover = popover;

});

$scope.openPopover = function($event) {

$scope.popover.show($event);

};

$scope.closePopover = function() {

$scope.popover.hide();

};


Ionic - JS - Popup$scope.showConfirm = function() {

var confirmPopup = $ionicPopup.confirm({

title: 'Do you accept our terms of service',

template: 'You cannot use this app unless you accept?'

});

confirmPopup.then(function(res) {

if(res) { console.log('You are sure'); }

else { console.log('You are not sure'); }

});


Ionic - JS - Action sheetvar sheet = $ionicActionSheet.show({

buttons: [

{ text: '<b>Share</b> This' },

{ text: 'Move' }

],

destructiveText: 'Delete',

titleText: 'Modify your album',

cancelText: 'Cancel',

cancel: function() {},

buttonClicked: function(index) {return true;}

});


Ahora instalemos Ionic en nuestra máquina

> npm install -g ionic cordova

> ionic -h


Y que empiece la fiesta

> ionic start proweb1 blank

> cd proweb1

> ionic serve --lab


Ejercicio 2 Crear una aplicación de cero y crear:1. Navbar con título “Libros”

2. Listado de libros con: imagen, título, descripción

3. Botón superior con icono sin texto en navbar que muestre un ActionSheet con título, modo de visualización, y con las opciones, lista, slides y cancelar.


Ejercicio 3

Sobre el ejercicio 2:1. Implementar vista slide si en el actionsheet

se ha seleccionado vista tipo slides


Funcionalidad avanzada:Estructuras de navegación


AngularJS por defecto utiliza ngRoute (angular-route.js). Ionic utiliza ui-router

Compatible con todo lo que soporta ngRoute, pero puede realizar funciones extras.

● Herencia: vistas anidadas ● Linking entre estados fuerte mediante el nombre del estado.

Permite cambiar las URL sin afectar a la navegación.● Paso de parámetros a través de $stateParams.

npm install angular-ui-router

Navegación con estados


var myApp = angular.module('myApp', ['ui.router']);

[...]

$stateProvider

.state("nombre", {

url: '/urlEstado,

templateUrl: 'views/vista.html',

controller: 'nombreControlador'

})

[...]

$urlRouterProvider.otherwise("/urlEstado");

Navegación por estados

.state("nombre.hijo", {url: '/hijo,templateUrl: 'views/vista2.html',controller: 'nombreControlador2'

})


<ion-view>



</ion-view>

<ion-view name=”header”>



</ion-view>

<ion-view name=”content”>



</ion-view>

Vista básica

.state("nombre.hijo", {url: '/url,views:{

header:{templateUrl: 'views/vista2.html',controller: 'nombreControlador2'

},content:{

templateUrl: 'views/vista2.html',controller: 'nombreControlador2'

}}})


Modales

La transición básica a esta vista que suele estar por defecto es slide-in-up

$ionicModal.fromTemplateUrl('modal.html', {

scope: $scope,

animation: 'slide-in-up'

}).then(function(modal) {

$scope.modal = modal;

});

$scope.openModal = function() {$scope.modal.show();}

$scope.closeModal = function() {$scope.modal.hide();};


Navegación horizontal

<ion-nav-bar class="bar-positive">

</ion-nav-bar>

<ion-nav-view>

<ion-view>

<ion-content>Hello!

</ion-content>

</ion-view>

</ion-nav-view>

Muy utilizada para navegar desde un listado a un detalle de la celda seleccionada.

Requiere de una ion-nav-bar e ion-nav-view.

Apila automáticamente las vistas sobre las que vamos navegando, de esta manera, sabe a qué vista volver cuando tocamos el botón atrás.

Deberemos cambiar el contenido del ion-nav-view para que se realice la transición correctamente al cambiar de estado.


Side menu<ion-side-menus>



<ion-side-menu-content>

<ui-view name="content"></ui-view>

</ion-side-menu-content>



<ion-side-menu side="left">

<a nav-clear menu-close href="#/cajeros" class="item">Cajeros</a>

<a nav-clear menu-close href="#/oficinas" class="item">Oficinas</a>

<a nav-clear menu-close href="#/contacto" class="item">Contacto</a>

</ion-side-menu>

</ion-side-menus>


Ejercicio 4Crear nuevo proyecto de ionic llamado “navh”:1. Listado libros, imagen, título2. Detalle del libro, imagen, título, descripción.

Requisitos: 1. La navegación del listado al detalle debe ser horizontal2. Tanto en el listado como el detalle tiene que haber un navbar. En el detalle tendrá el título del

libro3. Desde el detalle, se podrá volver al listado tocando el botón atrás y se deberá animar

correctamente.




Gestionar plataformas

Nos permite...

Gestionar plugins Compilar aplicación


Gestionar plataformasComandos

Listar: platform listAñadir: platform add <nombre_pltfrm>Eliminar: platform remove <nombre_pltfrm>Actualizar: platform update <nombre_pltfrm>

ej: cordova platform add ios


Gestionar pluginsComandos

Listar: plugin listAñadir: plugin add <nombre_plugin>Eliminar: plugin remove <nombre_plugin>Buscar: plugin search <nombre_plugin>

ej: cordova plugin add cordova-plugin-camera


Compilar aplicaciónComandos

Ejecutar en navegador: serveBuild: build <nombre_pltfrm>Ejecutar en dispositivo: run <nombre_pltfrm>Emular: emulate <nombre_pltfrm>

ej: cordova build android


Ionicview

1. Descargar ionicview

2. Registrarse

3. ionic upload (desde consola)


ngCordova

Cordova con la potencia de AngularJS


ngCordova es una colección de más de 63 extensiones para AngularJS, que utilizan el API de Cordova para acceder al dispositivo.

Pasos:

1. bower install ngCordova

2. <script src="lib/ngCordova/dist/ng-cordova.js"></script> (antes de cordova.js)

3. angular.module('myApp', ['ngCordova'])

ngCordova

http://ngcordova.com/




Ejemplo ngCordova1. cordova plugin add cordova-plugin-camera

2. Inyectar en el controlador $cordovaCamera

3. var options = {

destinationType: Camera.DestinationType.FILE_URI,

sourceType: Camera.PictureSourceType.CAMERA,

};

$cordovaCamera.getPicture(options).then(function(imageURI) {

var image = document.getElementById('myImage');

image.src = imageURI;

}, function(err) {

// error

});


Proyecto final


Consejos para realizar el PF.Paso 1

● Leer todos los apartados que se requieren en la app● Realizar bocetos para la estructura de vistas y navegación.● Validar los bocetos si cumplen los requisitos y mantienen

buena usabilidad.

Paso 2● Programar la estructura básica de vistas y navegación con

estados.● Terminar la funcionalidad requerida de cada vista


Proyecto final1. Login

a. Si el usuario y contraseña es admin, entrará a la aplicación.b. Si no, mensaje de error y el móvil vibra.

2. Mi Perfilc. Se mostrará el nombre del usuario logueado.d. Imagen que nos podremos hacer con nuestra cámara del smartphonee. Podremos cerrar sesión y nos llevará al login la app.

3. Aboutf. título de la app y descripción

4. Libreríag. Listado de libros con imagen, título y descripción. h. Posibilidad de buscar por títuloi. Ver detalle de un libro a tocar en una celda del listado. j. Leer código QR el cual nos lleva al detalle del libro que corresponda con ese id.

Software

Ionic, Adaptación de desarrollos web a dispositivos móviles