ionic, adaptación de desarrollos web a dispositivos móviles
TRANSCRIPT
![Page 1: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/1.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Desarrollos web adaptados a
dispositivos móviles
Ionic + Cordova
![Page 2: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/2.jpg)
© 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
![Page 3: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/3.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
El presente es móvil
![Page 4: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/4.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Android® iOS® Windows Phone® Blackberry
Plataformas relevantes
![Page 5: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/5.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Plataformas relevantes
![Page 6: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/6.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
![Page 7: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/7.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Posibilidades de desarrollo
![Page 8: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/8.jpg)
© 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
![Page 9: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/9.jpg)
© 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
![Page 10: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/10.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
![Page 11: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/11.jpg)
© 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.
![Page 12: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/12.jpg)
© 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
![Page 13: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/13.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - Más que un framework
![Page 14: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/14.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - Creator
creator.ionic.io
![Page 15: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/15.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Pero centrémonos en el desarrollo
Estructura y estética Funcionalidad+
![Page 16: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/16.jpg)
© 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
![Page 17: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/17.jpg)
© 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>
![Page 18: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/18.jpg)
© 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>
![Page 19: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/19.jpg)
© 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>
![Page 20: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/20.jpg)
© 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>
![Page 21: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/21.jpg)
© 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>
![Page 22: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/22.jpg)
© 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>
![Page 23: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/23.jpg)
© 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>
![Page 24: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/24.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Ionic - CSS - Listados<ul class="list">
<li class="item">
...
</li>
</ul>
![Page 25: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/25.jpg)
© 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
![Page 26: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/26.jpg)
© 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>
![Page 27: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/27.jpg)
© 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/
![Page 28: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/28.jpg)
© 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.
![Page 29: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/29.jpg)
© 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➔ ...
![Page 30: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/30.jpg)
© 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();
};
![Page 31: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/31.jpg)
© 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'); }
});
![Page 32: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/32.jpg)
© 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;}
});
![Page 33: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/33.jpg)
© 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
![Page 34: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/34.jpg)
© 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
![Page 35: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/35.jpg)
© 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.
![Page 36: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/36.jpg)
© 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
![Page 37: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/37.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Funcionalidad avanzada:Estructuras de navegación
![Page 38: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/38.jpg)
© 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
![Page 39: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/39.jpg)
© 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'
})
![Page 40: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/40.jpg)
© 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'
}}})
![Page 41: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/41.jpg)
© 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();};
![Page 42: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/42.jpg)
© 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.
![Page 43: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/43.jpg)
© 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>
![Page 44: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/44.jpg)
© 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.
![Page 45: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/45.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
![Page 46: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/46.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
![Page 47: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/47.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Gestionar plataformas
Nos permite...
Gestionar plugins Compilar aplicación
![Page 48: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/48.jpg)
© 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
![Page 49: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/49.jpg)
© 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
![Page 50: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/50.jpg)
© 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
![Page 51: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/51.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Ionicview
1. Descargar ionicview
2. Registrarse
3. ionic upload (desde consola)
![Page 52: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/52.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
ngCordova
Cordova con la potencia de AngularJS
![Page 53: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/53.jpg)
© 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
![Page 54: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/54.jpg)
© 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
});
![Page 55: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/55.jpg)
© 2015 Título de experto universitario en programación con tecnologías web
Proyecto final
![Page 56: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/56.jpg)
© 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
![Page 57: Ionic, Adaptación de desarrollos web a dispositivos móviles](https://reader031.vdocuments.pub/reader031/viewer/2022022414/587354e01a28ab56378b716d/html5/thumbnails/57.jpg)
© 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.