ionic, adaptación de desarrollos web a dispositivos móviles
TRANSCRIPT
© 2015 Título de experto universitario en programación con tecnologías web
Desarrollos web adaptados a
dispositivos móviles
Ionic + Cordova
© 2015 Título de experto universitario en programación con tecnologías web
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
© 2015 Título de experto universitario en programación con tecnologías web
El presente es móvil
© 2015 Título de experto universitario en programación con tecnologías web
Android® iOS® Windows Phone® Blackberry
Plataformas relevantes
© 2015 Título de experto universitario en programación con tecnologías web
Plataformas relevantes
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
Único lenguaje Múltipleslenguajes
Bajo rendimiento Mayor rendimiento →
Rápido desarrollo Desarrollo dedicado
Mezcla
Acceso al dispositivoSin acceso
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
Único lenguaje
Bajo rendimiento
Mayor rendimiento
Acceso al dispositivo
Rápido desarrollo
MúltipleslenguajesMezcla
Desarrollo dedicado
Sin acceso
© 2015 Título de experto universitario en programación con tecnologías web
© 2015 Título de experto universitario en programación con tecnologías web
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.
© 2015 Título de experto universitario en programación con tecnologías web
VS
Framework
Se basa en AngularJS
Declarativo
Incluye compilador
Librería
Se basa en jQuery
Imperativo
No incluye compilador
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - Más que un framework
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - Creator
creator.ionic.io
© 2015 Título de experto universitario en programación con tecnologías web
Pero centrémonos en el desarrollo
Estructura y estética Funcionalidad+
© 2015 Título de experto universitario en programación con tecnologías web
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
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Colores
Similar a bootstrap.
<button class="button button-light"> Hello button</button>
© 2015 Título de experto universitario en programación con tecnologías web
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>
© 2015 Título de experto universitario en programación con tecnologías web
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>
© 2015 Título de experto universitario en programación con tecnologías web
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>
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Toggle<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Checkbox<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
© 2015 Título de experto universitario en programación con tecnologías web
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>
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Listados<ul class="list">
<li class="item">
...
</li>
</ul>
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Grid System<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
● Columna libre● Columna fija● Alineación vertical
○ De fila○ De columna
● Responsive
© 2015 Título de experto universitario en programación con tecnologías web
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>
© 2015 Título de experto universitario en programación con tecnologías web
VAMOS AL RECREO!Pero no al que os pensáis...
play.ionic.io
Y en otra pestaña:http://ionicframework.com/docs/
© 2015 Título de experto universitario en programación con tecnologías web
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.
© 2015 Título de experto universitario en programación con tecnologías web
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➔ ...
© 2015 Título de experto universitario en programación con tecnologías web
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();
};
© 2015 Título de experto universitario en programación con tecnologías web
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'); }
});
© 2015 Título de experto universitario en programación con tecnologías web
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;}
});
© 2015 Título de experto universitario en programación con tecnologías web
Ahora instalemos Ionic en nuestra máquina
> npm install -g ionic cordova
> ionic -h
© 2015 Título de experto universitario en programación con tecnologías web
Y que empiece la fiesta
> ionic start proweb1 blank
> cd proweb1
> ionic serve --lab
© 2015 Título de experto universitario en programación con tecnologías web
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.
© 2015 Título de experto universitario en programación con tecnologías web
Ejercicio 3
Sobre el ejercicio 2:1. Implementar vista slide si en el actionsheet
se ha seleccionado vista tipo slides
© 2015 Título de experto universitario en programación con tecnologías web
Funcionalidad avanzada:Estructuras de navegación
© 2015 Título de experto universitario en programación con tecnologías web
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
© 2015 Título de experto universitario en programación con tecnologías web
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'
})
© 2015 Título de experto universitario en programación con tecnologías web
<ion-view>
<!-- este elemento se rellena con el template que se haya definido en el estado -->
</ion-view>
<ion-view name=”header”>
<!-- vista del header -->
</ion-view>
<ion-view name=”content”>
<!-- vista del 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'
}}})
© 2015 Título de experto universitario en programación con tecnologías web
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();};
© 2015 Título de experto universitario en programación con tecnologías web
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.
© 2015 Título de experto universitario en programación con tecnologías web
Side menu<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ui-view name="content"></ui-view>
</ion-side-menu-content>
<!-- Left menu -->
<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>
© 2015 Título de experto universitario en programación con tecnologías web
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.
© 2015 Título de experto universitario en programación con tecnologías web
© 2015 Título de experto universitario en programación con tecnologías web
© 2015 Título de experto universitario en programación con tecnologías web
Gestionar plataformas
Nos permite...
Gestionar plugins Compilar aplicación
© 2015 Título de experto universitario en programación con tecnologías web
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
© 2015 Título de experto universitario en programación con tecnologías web
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
© 2015 Título de experto universitario en programación con tecnologías web
Compilar aplicaciónComandos
Ejecutar en navegador: serveBuild: build <nombre_pltfrm>Ejecutar en dispositivo: run <nombre_pltfrm>Emular: emulate <nombre_pltfrm>
ej: cordova build android
© 2015 Título de experto universitario en programación con tecnologías web
Ionicview
1. Descargar ionicview
2. Registrarse
3. ionic upload (desde consola)
© 2015 Título de experto universitario en programación con tecnologías web
ngCordova
Cordova con la potencia de AngularJS
© 2015 Título de experto universitario en programación con tecnologías web
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
© 2015 Título de experto universitario en programación con tecnologías web
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
});
© 2015 Título de experto universitario en programación con tecnologías web
Proyecto final
© 2015 Título de experto universitario en programación con tecnologías web
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
© 2015 Título de experto universitario en programación con tecnologías web
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.