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últiples
lenguajes
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últiples
lenguajes
Mezcla
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 vectoriales
Llamado ionicons
Descargarlos desde ionicons.com
Luego añadir las fonts y css.
Ejemplo
<i class="icon ion-star"></i>

Ionic - CSS - Botones
button-<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 - Botones
Botones 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 sheet
var 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:{
},
content:{
}
}})

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 4
Crear nuevo proyecto de ionic llamado “navh”:
1. Listado libros, imagen, título
2. Detalle del libro, imagen, título, descripción.
Requisitos:
1. La navegación del listado al detalle debe ser horizontal
2. Tanto en el listado como el detalle tiene que haber un navbar. En el detalle tendrá el título del
libro
3. 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 plataformas
Comandos
Listar: platform list
Añadir: platform add <nombre_pltfrm>
Eliminar: platform remove <nombre_pltfrm>
Actualizar: platform update <nombre_pltfrm>
ej: cordova platform add ios

Gestionar plugins
Comandos
Listar: plugin list
Añadir: plugin add <nombre_plugin>
Eliminar: plugin remove <nombre_plugin>
Buscar: plugin search <nombre_plugin>
ej: cordova plugin add cordova-plugin-camera

Compilar aplicación
Comandos
Ejecutar en navegador: serve
Build: 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

Ejemplo ngCordova
1. 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 final
1. 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 Perfil
c. Se mostrará el nombre del usuario logueado.
d. Imagen que nos podremos hacer con nuestra cámara del smartphone
e. Podremos cerrar sesión y nos llevará al login la app.
3. About
f. título de la app y descripción
4. Librería
g. Listado de libros con imagen, título y descripción.
h. Posibilidad de buscar por título
i. 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.

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

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

Similar a Ionic, Adaptación de desarrollos web a dispositivos móviles (20)

Último

Último (7)

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