UNIVERSIDAD DON BOSCO TÉCNICO EN INGENIERIA EN COMPUTACIÓN

CICLO I DISEÑO Y PROGRAMACIÓN DE SOFTWARE MULTIPLATAFORMA

Guía de laboratorio No.5 Introducción a Ionic

I. RESULTADO DE APRENDIZAJE

Que el estudiante aprenda a:

• Trabajar con el framework de Ionic.

• Familiarizarse con el entorno de Ionic.

II. RESULTADO DE APRENDIZAJE

Ionic Es una librería que permite crear y desarrollar principalmente a través de la utilidad de

línea de comandos ionicos, y el uso de córdoba para construir e implementar como una

aplicación nativa, para crear proyectos ionic se tiene que instalar la última versión de la CLI

y Córdoba. Además, necesitaremos la versión más reciente de Node.js. Para esta práctica

utilizaremos la siguiente tabla de comando:

Comando Descripción

Ionic start myApp blank Ionic start myApp tabs Ionic start myApp sidemenu

Este comando creara una carpeta llamada “myApp” con el contenido del nuevo proyecto Ionic.

Ionic cordova platform add <nombre de la plataforma>

Este comando añade una plataforma para la cual queremos compilar nuestro.

Ionic serve –lab Abrira nuestro proyecto en un navegador para poder ver y depurar lo que vamos haciendo.

Ionic cordova emulate <PLATFORM> Para utilizar este comando debemos haber añadido una plataforma anteriormente y asi poder emular el proyecto en la terminal.

Ionic cordova run <PLATFORM> Para instalar y ejecutar en un dispositivo real se hace con este comando.

Ionic g page nombre_pagina Crea una nueva página en nuestro proyecto ionic.

III. MATERIALES Y EQUIPO

No. Requerimientos Cantidad

1 Memoria USB 1

2 PC con uno de los editores de páginas Web: Sublime Text, Brackets, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7 u 8, Firefox (última versión disponible), Google Chrome (última versión disponible), Opera (última versión disponible), Safari (última versión disponible).

1

3 Guía de laboratorio 5 1

IV. PROCEDIMIENTO

INDICACIONES GENERALES

1. Crear una carpeta en “mis documentos” y colocarle el nombre

N°Carnet_Guia4_DSM, Nota: Cambiar N°Carnet por su número de carnet brindado

por la Universidad.

PARTE A. Creación de Aplicación Ionic blank

1. Verificar si tiene instalado JDK, haga clic en Inicio, seleccione Panel de control,

seleccione Programas, haga clic en Programas y características, compruebe si

JavaJDK aparece en la lista de programas instalados.

2. Ahora procederemos a configurar la variable JAVA_HOME. Para ello, ingresaremos

con la combinación de teclas Windows + Pause; en la ventana emergente seleccione

Cambiar Configuración, en Propiedades de Sistema seleccione la pestaña Opciones

Avanzadas y luego de clic el botón Variables de Entorno. Agregue en Variables de

usuario la variable JAVA_HOME y en el valor ingrese la ruta de instalación del JDK, la

cual fue C:Program Files/jdk1.8.0_12. Es importante validar de no agregar / al final

de la ruta.

3. Configurando JAVA_HOME

4. Verificar si tiene instalado en su máquina nodeJS

node -v

5. Verificar si tiene instalado en su máquina npm

npm -v 6.

6. Verificar si tiene instalado Ionic

ionic -v

NOTA: si no tiene instalado ionic framewrok, proceda a instalar a través de nodeJS y

NPM, a través del siguiente comando:

npm install –g cordova ionic

7. Crearemos una aplicación:

ionic start HelloWorld blank

NOTA: HelloWorld es el nombre de la aplicación.

8. Vamos entrar a nuestra aplicación que acabamos de crear app con el siguiente

comando: cd HelloWorld

9. Abriremos nuestro proyecto a través de visual studio code o en el editor de su

preferencia.

10. Ahora procederemos a probar nuestra aplicación por el emulador de ionic con el

siguiente comando:

ionic serve –l

11. En nuestro navegador deberemos observar lo siguiente:

12. En nuestro proyecto abierto, ubicar la carpeta src del proyecto, abrirla y luego volver

abrir la carpeta app, ahí modificaremos el archivo app.html. En este archivo se

encuentra configurado nuestro menú por ello es que vamos a modificarlo.

13. En nuestro proyecto abierto, ubicar la carpeta src del proyecto, abrirla y luego volver

abrir la carpeta pages, ahí modificaremos el archivo home.page.html.

<ion-header>

<ion-toolbar>

<ion-title>

Mi primer App

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<h1>Hola Mundo</h1>

</ion-content>

14. Verificar los cambios en el navegador:

15. Parar la ejecución de nuestro servidor.

16. Desde consola crearemos una nueva página para nuestra aplicación con el siguiente comando.

ionic g

17. Al ejecutar el comando anterior nos mostrara el siguiente menú donde seleccionaremos la opción page.

18. Luego de seleccionar el elemento nos preguntar el nombre nosotros pondremos

“Pagina2”, de la forma como se muestra en la imagen.

19. Con los pasos anteriores, hemos creado una nueva página y podemos verificar en

nuestro proyecto que se a creado la nueva página con todos sus componentes.

20. Modificaremos el archivo pagina2.page.html

<ion-header>

<ion-toolbar>

<ion-buttons slot="start">

<ion-back-button defaultHref='/home'></ion-back-button>

</ion-buttons>

<ion-title>{{argumento}}</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<h1>Pagina Dos</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi explicabo doloribus

fugiat reiciendis quibusdam iusto vel facilis ratione, consequatur incidunt! Odio.</p>

</ion-content>

21. Ahora debemos primero dirigimos a app-routing.modules.ts y debemos verificar la

ruta de nuesta pagina que se crea automáticamente, y además vamos agregar un parámetro para la pagina2.page.html cuyo nombre es id:

22. Nos dirigiremos al pagina2.page.ts para elaborar poder leer el parámetro enviado desde home.page.html en nuestra pagina.page.ts.

23. Ahora crearemos un pequeño botón desde nuestra página home.page.html que nos lleve directamente a la página anteriormente creada, digitar el siguiente código en el home.page.html:

<ion-header>

<ion-toolbar>

<ion-title>

Mi primer App

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<p>Este es mi primera aplicación Ionic</p>

<ion-item>

<ion-input placeholder="nombre" [(ngModel)]="valor"></ion-input>

</ion-item>

<ion-button expand="full" [routerLink]="['/pagina2',valor]">

Push Angular

</ion-button>

<ion-button color="primary" expand="full" (click)="irsegunda()">

Push router

</ion-button>

<ion-button expand="full" (click)="irsegundaNavCtrl()">

Push con NavCtrl

</ion-button>

</ion-content>

24. Diríjase a home.page.ts y proceda a realizar los siguientes cambios:

import { Component } from '@angular/core';

import {Router} from '@angular/router';

import {NavController} from '@ionic/angular';

import { getOrCreateCurrentQueries } from '@angular/core/src/render3/state';

import { isRegExp } from 'util';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

})

export class HomePage {

valor='';

constructor(

private router:Router,

private navCtrl:NavController

){}

irsegunda(){

this.router.navigate(['/pagina2/',this.valor]);

}

irsegundaNavCtrl(){

this.navCtrl.navigateForward(`/pagina2/${this.valor}`);

}

}

25. Guardemos los resultados y volvemos a ejecutar el emulador de ionic. Deberemos

ver lo siguiente:

PARTE B. Creación de Login

1. Crearemos una aplicación: ionic start Login blank

2. Vamos entrar a nuestra aplicación que acabamos de crear app con el siguiente

comando: cd Login

3. Abriremos nuestro proyecto a través de visual studio code o en el editor de su preferencia.

4. Modificaremos nuestro archivo home.html

<ion-header>

<ion-toolbar>

<ion-title>

Login

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item>

<ion-label >Username</ion-label>

<ion-input type="text" value="" [(ngModel)]="username" ></ion-input>

</ion-item>

<ion-item>

<ion-label >Password</ion-label>

<ion-input type="password" value="" [(ngModel)]="userpwd"></ion-input>

</ion-item>

</ion-list>

<div padding>

<ion-button color="primary" expand="full" (click)="autorizado()" block>Ingresar</ion-

button>

</div>

</ion-content>

5. Realizaremos los siguientes cambios en nuestro archive home.page.ts:

• Agregar la directiva que nos permite generar las alertas.

• Crear las siguientes variables y el constructor:

• Crear las siguientes funciones:

6. Probaremos nuestro código y debera verse de la siguiente forma:

7. Crear una Alerta para notificarle al Usuario que su acceso es Denegado, por usuario

o contraseña invalida. 8. Basando en el ejemplo de la parte A, deberemos crear una nueva página de

nombre: Autorizad 9. Modificar el código del ejemplo Login, para que cuando el usuario y la

contraseña sean validos nos lleve a la página Autorizado.

PARTE C. Creación de App Android

1. Primero deberemos añadir nuestra plataforma a nuestro proyecto.

ionic cordova platform add Android

2. Si queremos usar el emulador tendremos que crear un AVD para que simule un teléfono de verdad, ya creado y el emulador corriendo ejecutamos el siguiente comando. Ionic cordova run android

Ionic cordova emulate android

3. Si solo queremos generar el apk, digitamos los siguiente.

ionic cordova build Android

V. Ejercicio Complementario 1. Crear una aplicación que sume dos números dados por el usuario. 2. Crear la siguiente aplicación siguiendo las siguientes especificaciones.

• La página deberá presentar las siguientes imágenes.

Nota: Verificar documentación de Ionic para trabajar con ion-img para las imágenes y con ion-grid para lograr ese posicionamiento.

• Al seleccionar cualquier imagen deberá mostranos la siguiente página con la información de animal seleccionado.