Tabla de contenido

Introducción ............................................................................................................................. 2
Alcance/Objetivo....................................................................................................................... 2
Desarrollo................................................................................................................................. 2
Simular HTTP............................................................................................................................. 3
Clase Contacto................................................................................................................... 3
Api in-memory-web ........................................................................................................... 3
contacto.service................................................................................................................. 4
Importar en app.module..................................................................................................... 4
Listar contactos......................................................................................................................... 5
Lista de contactos .............................................................................................................. 8
Borrar contactos ....................................................................................................................... 9
Método borrar()................................................................................................................10
Borrar en el servicio de datos.............................................................................................11
Nuevo Contacto .......................................................................................................................11
Formulario para nuevo Contacto........................................................................................13
nuevocontacto.ts ..............................................................................................................14
Nuevo contacto en el servicio de datos...............................................................................15
Taller .......................................................................................................................................16
Introducción
En la guía anterior realizamos la configuración de nuestro entorno de desarrollo (Ionic/Cordova),
además de las herramientas necesarias para poder generar las aplicaciones para plataforma
Android.

Finalizando el ejercicio anterior realizamos nuestra primera aplicación “holamundo”, en el que

identificamos la estructura de archivos que se genera al momento de crear un proyecto Ionic.

Repasemos un poco: para crear un nuevo proyecto debemos usar el comando

ionic start <<nombreproyecto>> [sidemenu/tabs/blank]

El comando ionic start usa el ionic cli para descargar y configurar todo el entorno necesario para el
desarrollo y ejecución del proyecto, por defecto ionic tiene tres plantillas base que nos permiten
crear tres tipos básicos de aplicaciones:

Sidemenu: crea una aplicación con un menú lateral

Tabs: crea un sistema de navegación basado en pestañas

Blank: crea una aplicación en blanco.

Para esta guía vamos a crear una aplicación de contactos(agenda) que nos permita realizar algunas
de las funciones básicas de cualquier aplicación, emplearemos los elementos vistos en las clases
anteriores para el desarrollo de nuestra aplicación.

Alcance/Objetivo
Desarrollar una aplicación de contactos para plataforma Android, que permita listar los contactos
disponibles en una lista, la aplicación debe permitir registrar nuevos contactos en la lista,
solicitando los siguientes datos: Nombre (obligatorio), apellido, empresa, teléfono (obligatorio) y
correo; además debe permitir eliminar los registros de manera individual.

Desarrollo
Para empezar vamos usar la plantilla tabs como base para nuestra aplicación. (para la guía
usaremos el nombre ionicContactos pero uds pueden usar el nombre que deseen)

ionic start ionicContactos tabs

Al finalizar la ejecución de este comando vamos a revisar la carpeta src, en donde tenemos los
componentes de nuestra aplicación, la carpeta app tiene los elementos básicos o comunes de
nuestra aplicación como el app.module.ts, que es el componente módulo en donde hacemos el
cargue de los diferente elementos de nuestra app; y también tenemos la carpeta pages, en donde
tenemos cada una de las vistas/interfaces que tendrá nuestra aplicación.
Simular HTTP
Para el ejercicio vamos a tomar como ejemplo las guias anteriores y vamos a simular que nuestra
aplicación hace uso de un servidor remoto, para lo cual usaremos la API in-memory-web.

Clase Contacto
Lo primero que vamos a hacer es crear un componente con la clase contacto, la cual nos va a
definir los elementos/propiedades que esperamos que tenga un contacto, datos que están
definidos en el alcance de esta guía.

Debido a que esta clase es un elemento común que puede ser usado por diferentes componentes
de nuestra aplicación lo vamos a crear en la carpeta app, creamos el archivo contacto.ts.

El archivo va a tener la definición de la clase Contacto, y las propiedades

{id,nombre,apellido,empresa,teléfono,correo} con sus respectivos tipos de datos.

Api in-memory-web
Ahora vamos a crear el simulador del servicio de datos usando el api in-memory-web; puesto que
es un servicio que puede ser común para varios componentes de la aplicación, la crearemos en la
carpeta app. Creamos el archivo in-memory-data.service.ts

Para este servicio creamos un arreglo contactos, el cual tendrá 5 elementos iniciales para simular
el inicio de nuestra base de datos (uds pueden colocar los elementos que deseen), observen que
cada elemento del arreglo es un objeto conformado por id, nombre, apellido, empresa, telefono y
correo.

Recuerden que para que el api in-memory-web funcione en nuestro proyecto debemos ejecutar el
comando (ejecutar dentro de la carpeta del proyecto):

npm install angular-in-memory-web-api --save

contacto.service
Al igual que los dos archivos anteriores el servicio contacto también será un elemento común a
varios componentes. Este servicio va a proveer los métodos de consulta al servidor, retornando un
promise del servicio de datos. (creamos el archivo contacto.service.ts)

Importar en app.module
Ahora vamos a importar los servicios en el módulo de nuestra aplicación, abrimos el archivo
app.modulo.ts y agregamos las siguientes líneas.
Listar contactos
Antes de empezar con las interfaces de nuestra aplicación exploremos lo que generó nuestro
proyecto. Ejecutemos el comando ionic serve para ver la aplicación en el navegador.
 Pestañas (tabs)

La aplicación generó tres interfaces con un sistema de navegación de pestañas (tabs) ubicado en la
parte inferior.

Al abrir la carpeta src/pages podemos ver que se generó una carpeta por cada una de las
interfaces de nuestra aplicación, también observe que se creó una carpeta en donde se tiene el
sistema de pestañas (tabs)

Para nuestra aplicación usaremos la interfaz dos para colocar el formulario de registro de nuevos
contactos y la tercer pestaña tendrá la lista de contactos de nuestro servicio de datos. La primera
pestaña la usaremos para hacer la presentación de la app.

Lo primero que vamos a hacer es cambiar el sistema de navegación para que se ajuste a nuestra
aplicación, abrimos el archivo tabs/tabs.html
Observen que se cambió los títulos de cada pestaña (tabTitle) para que aparezca en español y
cambiamos el icono1 de la segunda pestaña para que aparezca el icono de añadir persona.

Renombramos la carpeta contact y la llamamos contactos y todos los archivos al interior nos
aseguramos que tengan el nombre contactos.

Antes de continuar nos aseguramos que el archivo contactos.ts, este relacionado con su correcto
template es decir que diga contactos.html, y que el nombre de la clase sea el correcto.

Ahora es necesario que ajustemos el modulo y el enrutado de las pestañas. Abrimos el archivo
app.module.ts, y ajustamos el nombre del componente contact a contactos, de lo contrario nos
marcara un error indicando que no encuentra el componente.

1
Ionic dispone de una gran fuente de iconos para usar en nuestras aplicaciones, ver
https://ionicframework.com/docs/ionicons/
Y en el archivo tabs.ts.

Al ver la aplicación en el navegador podemos ver que esta sigue funcionando sin ningún problema.

Lista de contactos
Para cargar la lista de contactos, primero vamos a modificar el componente contactos, para esto
abrimos el archivo contactos.ts. y hacemos el cargue del servicio de datos, y creamos los métodos
para retornar el arreglo de contactos.
Ajustar el template del componente, abrimos el archivo contactos.html. y cambiamos el titulo de
la vista, y agregamos una lista de elementos que recorre el arreglo de contactos usando *ngFor.

Borrar contactos
Otra de las funcionalidades de la aplicación es la posibilidad de borrar los contactos de la lista,
primero vamos a agregar el botón necesario en la lista de contactos, y le agregamos el manejador
del evento clic para ejecutar el método borrar().(archivo contactos.html),
Método borrar()
El método borrar permitirá eliminar un contacto de la lista, pero para hacerlo mas funcional le
agregaremos una confirmación de la acción, es decir antes de borrar debe preguntar si estamos
seguros de hacerlo. La confirmación hace parte de los elementos alertController2 que dispone
ionic. (archivo contactos.ts)

2
https://ionicframework.com/docs/components/#alert
Borrar en el servicio de datos
Por último debemos crear el método borrar en el servicio de datos, abrimos el archivo
contacto.service.ts.

Al ejecutar la aplicación e intentar eliminar un contacto la app debe pedir una confirmación para
terminar la acción.

Nota: si el navegador muestra algún error, es posible que necesite cerrar el servidor (ctrl+c) y
volverlo a abrir (ionic serve).

Nuevo Contacto
Para la última acción debemos crear un formulario para crear un nuevo contacto. Para esto vamos
a crear un nuevo componente, para esto creamos la carpeta pages/nuevo (pueden sacar una copia
de la carpeta about y la renombran “nuevocontacto”), asegúrense de tener los archivos
nuevocontacto.ts, nuevocontacto.html, nuevocontacto.scss.

Después de crearlos(copiarlos) Abra el archivo nuevocontacto.html y cambie el titulo de la vista

“Nuevo Contacto”.
Después abra el archivo nuevocontacto.ts y especifique correctamente e l nombre de la clase y de
la plantilla del componente.

Ahora en el archivo tabs.ts vamos a enrutar el tab2Root al componente “nuevocontacto” y NO al

componente about.

Finalmente debemos realizar el cargue del nuevo componente en el app.module.ts.

Nota: hasta aquí la aplicación debe seguir funcionando

Formulario para nuevo Contacto

Primero que nada vamos a crear el formulario con los campos según lo definido en el alcance de
esta guía.
Observe que se crearon los campos (<ion-input>3) nombre, apellido, empresa, teléfono, correo; y
se especificó que los campos nombre y teléfono serian obligatorios (required) .

También se agrega un botón de tipo submit, el cual estará desactivado (disabled) mientras el
formulario no este completo (campos obligatorios).

nuevocontacto.ts
En el componente “nuevocontacto” debemos importar el servicio de datos para poder adicionar
nuevos contactos a la base de datos. Abrimos el archivo nuevocontacto.ts

3
https://ionicframework.com/docs/components/#inputs
Al crear la vista se realiza el cargue de la lista de la base de datos y se inicializa la propiedad
this.contactos.

Al presionar el botón, se invoca el método nuevo el cual ejecuta la acción crearNuevo que
debemos crear en el servicio de datos.

Después de agregar el contacto a la base de datos se limpia el formulario y se despliega un

mensaje de notificación informando que se creó un nuevo contacto.

Nuevo contacto en el servicio de datos

Finalmente creamos la acción que agrega el contacto a la base de datos. Abrimos el archivo
contacto.service.ts.
Taller
1. Debemos agregar la funcionalidad de editar un contacto existente
2. La lista de contactos debe ordenarse por nombre/apellido
3. Permitir hacer un filtro de la lista de contactos.