PROGRAMACIÓN DE

DISPOSITIVOS MOVILES
GUIA III

JOAN MANUEL GREGORIO PÉREZ, M.A.

JMGREP DEVELOPER SCHOOL

 Resultados de Aprendizaje

Que el estudiante:

Diseñe aplicaciones Hibridas utilizando el framework IONIC.

Diseñe aplicaciones con navegación
Pueda crear formulario de login y validación en IONIC

Introducción

¿Que es IONIC?
Ionic Framework es un SDK de frontend de código abierto para desarrollar aplicaciones híbridas
basado en tecnologías web (HTML, CSS y JS). Es decir, un framework que nos permite desarrollar
aplicaciones para iOS nativo, Android y la web, desde una única base de código. Su
compatibilidad y, gracias a la implementación de Cordova e Ionic Native, hacen posible trabajar
con componentes híbridos. Se integra con los principales frameworks de frontend, como
Angular, React y Vue, aunque también se puede usar Vanilla JavaScript. Este framework fue
creado en 2013 por Drifty Co. y hasta la llegada de React Native ha sido una de las tecnologías
líderes para el desarrollo de aplicaciones móviles híbridas.

Características de Ionic Framework

Ionic se caracteriza por ser un Frameworks que:

• Permite desarrollar y desplegar aplicaciones híbridas, que funcionan en múltiples
plataformas, como iOS nativo, Android, escritorio y la web (como una aplicación web
progresiva), todo ello con una única base de código.
• Ofrece un diseño limpio, sencillo y funcional.
• Emplea Capacitor (o Cordova) para implementar de forma nativa o se ejecuta en el
navegador como una aplicación web progresiva.
• Está construido sobre tecnologías web: HTML, CSS y JavaScript.

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
 • Se puede usar con los Frameworks FrontEnd más populares, como Angular, React y Vue.
Componentes UI de Ionic
La facilidad que Ionic ofrece para el diseño de interfaces es uno de sus puntos fuertes y lo
consigue gracias a sus componentes. Los Componentes de Ionic son bloques de construcción de
alto nivel que nos ayudan a construir de forma rápida la interfaz de usuario de nuestra
aplicación. Algunos de sus componentes UI principales son:

• Tarjetas (ion-cards). Uno de los componentes estándar de la interfaz de usuario. Sirve

como punto de entrada a información más detallada. Suele formarse por encabezado,
título, subtítulo y contenido.
• Listas (ion-lists). Compuestas de varias filas de elementos, que pueden incluir texto,
botones, iconos y miniaturas, entre otros. Las listas de Ionic admiten interacciones
diversas como deslizar para revelar opciones o arrastrar para reordenar o eliminar
elementos.
• Pestañas (ion-tabs). Normalmente se utilizan junto a barras de pestañas (ion-tab-bars)
para implementar una navegación basada en pestañas que se comporte de forma
similar a una aplicación nativa.

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
 No. Requerimientos Cantidad
1 Memoria USB 1
2 PC , Node, Npm, Visual Studio Code y navegador web, SQLLite 1
3 Guía de laboratorio 1

Parte A: Instalación de Ionic

En esta sección vamos a ver en detalle todo el proceso de instalación de IONIC y de todas las
dependencias necesarias para que funcione. Estas son:
• NodeJs
• IONIC
• Otras dependencias

Instalar NodeJS
En primer lugar tenemos que instalar en gestor de paquetes de NodeJs (npm) para poder
instalar el propio Ionic y algunas otras dependencias que nos harán falta. Para instalarlo
simplemente podemos descargarlo e instalarlo desde su Web:
https://nodejs.org/es/download/

O en Linux instalarlo usando el gestor de paquetes:

sudo apt-get install nodejs
sudo apt-get install npm

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Instalar IONIC
La CLI de Ionic se puede instalar globalmente con npm:
1- Abra la consola o terminar y ejecute el siguiente comando:
npm install -g @ionic/cli

Validar la versión instalada con el siguiente comando:

ionic -v

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Guía de almacenamiento de datos Ionic Sqlite; En esta guía detallada, explicaremos cómo
agregar almacenamiento SQlite en la aplicación Ionic Angular. Además, también aprendemos
cómo configurar, obtener, eliminar y eliminar datos del almacenamiento del dispositivo fuera
de línea utilizando el complemento de almacenamiento Cordova e Ionic Native SQLite.

SQLite es un sistema de gestión de base de datos relacional, contenida en una biblioteca muy
pequeña, escrita en C.

A diferencia de los sistemas de gestión de bases de datos cliente-servidor, SQLite no es un

proceso independiente con el que el programa principal se comunica. En lugar de eso, la
biblioteca SQLite se enlaza con el programa pasando a ser parte integral del mismo.

Esta es una muy buena opción cuando necesitamos programar aplicaciones pequeñas y que
manejen base de datos.

Entre sus principales ventajas están:

En su versión 3, SQLite permite bases de datos de hasta 2 Terabytes de tamaño, y también

permite la inclusión de campos tipo BLOB.
• Es de libre distribución
• No requiere configuración
• No se requiere uso del servidor
• Multiplataforma (Windows, Linux, Android, Mac, etc.)

Se maneja como un único archivo y puede estar situado en cualquier parte; esto permite poder
usarlo incluso desde una memoria USB.
• Es transaccional
• Puede ser utilizado por casi todos los lenguajes de programación (C, .NET, Visual Basic
6, Phyton, Delphi, PHP, Java, etc.)
• Utiliza registros de longitud variable, lo cual permite ahorrar espacio, permitiendo que
la base de datos sea más pequeña.

Debido a sus múltiples ventajas, este sistema de base de datos ya es usado por diversas
empresas y productos, como: Mozilla Firefox, Adobe Photoshop Elements, varias aplicaciones
de Apple, Skype y más.

Por experiencia, puedo recomendarte esta base de datos, siempre y cuando tu aplicación no
realice muchos accesos simultáneos a la base de datos, de lo contrario, seria mejor utilizar las
bases de datos tradicionales de tipo cliente-servidor.
En los navegadores web, dependemos principalmente de los objetos de almacenamiento local
para almacenar los datos de forma local, mientras que, en los dispositivos móviles, Cordova
ofrece una opción impecable para crear una aplicación fuera de línea. El paquete SQLite le
permite acceder a las bases de datos SQLite en los dispositivos y eso con demasiada facilidad y
rapidez. Independientemente de la plataforma en la que esté creando una aplicación, no se
preocupe; SQLite cubre todas las plataformas principales, como Android, iOS, macOS, no solo
sino también Windows.

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Creando el Proyecto
Pasos:
Paso 1: Instale la aplicación Ionic
Paso 2: Instale el complemento de almacenamiento SQLite
Paso 3: agregue el módulo de almacenamiento en la clase AppModule
Paso 4: Acceda a la API de almacenamiento en Ionic
Paso 5: Establecer clave / valor
Paso 6: obtener clave / valor
Paso 7: eliminar el valor de almacenamiento
Paso 8: Obtenga todas las claves almacenadas
Paso 9: Aplicación de prueba

Para poder crear un nuevo proyecto debemos de tener en cuenta en donde lo queremos
almacenar, para esto es muy importante movernos dentro de nuestra terminal o CMD,
usaremos comandos comandos básicos así que no te preocupes, te dejo algunos comandos
que debes de tener en cuenta.
Comandos Descripción Sistema Operativo
ls Listar Elementos MacOS / Distros GNU/Linux
dir Listar Elementos Windows
cd Cambio de directorio Todos
clear Limpiar terminal MacOS / Distros GNU/Linux
cls Limpiar terminal Windows
pwd Ruta absoluta actual MacOS / Distros GNU/Linux
chdir Ruta absoluta actual Windows

Una vez hayamos pensado en donde queremos almacenar nuestro proyecto, debemos
de saber donde nos encontramos dentro de nuestra terminal, regularmente siempre
nos ubica en nuestra carpeta personal o la del usuario que inició sesión, si queremos
asegurarnos en donde nos encontramos debemos de usar el comando pwd o en su
defecto chdir dependiendo el sistema operativo en donde nos encontremos, si después
de presionar enter nos muestra algunas carpetas conocidas como Escritorio o Desktop
o Documentos o Descargas entonces nos encontramos en nuestra carpera personal, y
ahí quedará de nosotros elegir en donde queremos almacenar el proyecto.

Para este ejemplo elegiré crear mi proyecto en el Escritorio, para esto debo de usar el
comando para cambiar de directorio "cd" seguido del nombre de la carpeta a donde nos
dirigimos "Escritorio" quedaría así:

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
NOTA: debemos de cuidar que el nombre de la carpeta esté bien escrito, respetando
mayúsculas, o de igual manera podemos apoyarnos del Tabulador para autocompletar
lo que estemos escribiendo.

Si usamos únicamente este comando el CLI nos brindará los pasos que debemos de
seguir, como ingresar el nombre de nuestro proyecto, si queremos usar un template al
momento de iniciar nuestro proyecto, y también el Framework que deseaos usar con
Ionic.

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Elegimos el tipo de proyecto que queremos generar (Tbas, Menu, List) en el recuadro
App Name, escribiremos el nombre del proyecto, luego procedemos a dar clic en
continue y nos presentara el login de nuestra cuenta de github para guardar el proyecto
en nuestro repositorio.
Si ya tenemos en mente el nombre de nuestro proyecto podemos hacer la ejecución en
una sola línea simplemente agregando otros parámetros como lo indico a continuación:
Muy bien ya nos encontramos en la carpeta, es momento de crear el proyecto, para esto
usaremos el comando:

Los Templates disponibles son:

Templates Descripción
blank Crea un Proyecto sin Template.
tabs Crea un proyecto con tres vistas donde puedes navegar entre ellas muy fácil.
sidemenu Crea un proyecto con un menú lateral

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Crear aplicación en blanco
1- Crear un proyecto en blanco con el siguiente comando en IONIC
Ionic start “nombre del proyecto” “tipo de proyecto”
En nuestro caso como crearemos un login este será el nombre del proyecto y el tipo
del proyecto es en blanco
ionic start ionic-sqlite blank --type=angular

Seleccionamos angular
Nos dirigimos a la carpeta de nuestro proyecto:
cd ionic-sqllite – presionamos la tecla enter

Instalar SQLite Storage Plugin

ionic cordova plugin add cordova-sqlite-storage
npm install --save @ionic/storage
npm install @ionic/[email protected] --save --save-exact

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Agregar SQLite Storage Module en AppModule Class
Importe el módulo SQLite del paquete "@ ionic-native / sqlite / ngx" y regístrese en la matriz
de proveedores en la clase AppModule.

Abra y coloque el siguiente código en el archivo app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';

// Import storage module

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
IonicStorageModule.forRoot()
],
providers: [
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
}
],
bootstrap: [AppComponent],
})

export class AppModule {}

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Acceso al almacenamiento con API en IONIC
Acceder al almacenamiento nativo en toda la aplicación es fácil y rápido; importe el módulo de
almacenamiento, agréguelo al método constructor. Después de eso, puede configurar el par
key-value de manera similar para obtener el par clave-valor, y puede consultar la respuesta en
el registro de la consola.
En home.pages.ts agregamos el siguiente código:
import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})

export class HomePage {

constructor(private storage: Storage) {

// set a key/value
this.storage.set('name', 'Max');

// Or to get a key/value pair

this.storage.get('age').then((val) => {
console.log('Your age is', val);
});
}

Set Key/Value
Acceda al método set () utilizando el complemento de almacenamiento, este método toma la
clave y el valor a través del cual puede establecer o agregar valor en una clave. Devuelve una
respuesta y le permite saber si el valor se agrega a la clave.
// set a key/value
setValue(key: string, value: any) {
this.storage.set(key, value).then((res) => {
console.log('set' + key + ' ', res);

// fetch key-value stored in key

this.getKeyValue(key);

}).catch((error) => {
console.log('Error ' + key + ' ', error);
});
}

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Get Key/Value
El método get () toma la clave como parámetro y se accede a través del módulo de
almacenamiento; en consecuencia, devuelve la promesa junto con el valor relacionado con la
propiedad de clave pasada.

// fetch a key/value
getKeyValue(key: string) {
this.storage.get(key).then((res) => {
this.data[key] = "";
this.data[key] = res;
}).catch((err) => {
console.log('Error ' + key + '', err);
});
}
Eliminar el valor almacenado
El método remove () elimina el valor relacionado con la clave pasada del almacenamiento
fuera de línea en ionic.

// Remove key/value
deleteKey(key: string) {
this.storage.remove(key).then(() => {
alert('Deleted ' + key);
this.data[key] = "";
}).catch((err) => {
alert(err);
});
}
Get All Stored Keys
La API de almacenamiento proporciona el método THE keys () y obtiene todas las claves
almacenadas

// Get all stored key/value

allStoredKeys() {
this.storage.keys().then((res) => {
this.getStoredKeys = res;
});
}

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
Codigo Final
Aquí está el código final con el que puede comparar su código para usar el almacenamiento
fuera de línea en la aplicación Ionic:

Abra la página home.page.html y agregue el código sugerido:

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Almacenamiento con SQLLite
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

<ion-grid>
<ion-row>
<ion-col>
<strong>Valores String:</strong>
</ion-col>
<ion-col>:
{{data.name}}<ion-
icon name="trash" (click)="deleteKey('name')"></ion-icon>
</ion-col>
</ion-row>

<ion-row>
<ion-col>
<strong>Valores entero:</strong>
</ion-col>
<ion-col>:
{{data.phone}}<ion-
icon name="trash" (click)="deleteKey('phone')"></ion-icon>
</ion-col>
</ion-row>

<ion-item-divider></ion-item-divider>

<ion-row>
<ion-col>
<strong>Todas las claves almacenada:</strong>
</ion-col>
<ion-col>
{{ getStoredKeys }}
</ion-col>
</ion-row>

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles
 <ion-item-divider></ion-item-divider>

<ion-row>
<ion-col>
<strong>Usuario Objeto con JSON:</strong>
<ion-icon name="trash" (click)="deleteKey('users')"></ion-icon>

<ion-card *ngFor="let user of data.users; let i = index">

<ion-card-header>
<ion-card-title>Usuario {{i + 1}}</ion-card-title>
</ion-card-header>
<ion-card-content>
<p><strong>Nombre</strong>: {{user.name}}</p>
<p><strong>Email</strong>: {{user.email}}</p>
<p><strong>Nombre de usuario</strong>: {{user.username}}</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>

</ion-grid>
</ion-content>

Por lo tanto, abra el archivo home.page.ts y actualice el siguiente código:

Creado por Joan Manuel Gregorio Pérez, M.A.

Curso de IONIC Desarrollo de Aplicaciones móviles