Ejercicios 1

En esta sección de ejercicios vamos a desarrollar la primera parte de una aplicación destinada a la gestión de una biblioteca de un centro educativo.

Ejercicio 1.1 - Inicio de la aplicación (1 punto)

En primer lugar crea un nuevo proyecto mediante el cli de Ionic, usa la plantilla en blanco (tipo blank) y llama al proyecto "iBiblioteca". Al crear un proyecto de este tipo se incluirá el contenido mínimo de ejemplo dentro de la carpeta src, lo cual será suficiente para empezar nuestro proyecto.

Una vez creada la aplicación vamos a revisar su contenido:

1. Revisa el contenido de las carpetas del proyecto, ¿qué carpetas se han creado y para qué sirve cada una?

2. Como podrás ver no se han creado las carpetas de Cordova, prueba a añadir la plataforma "android" y revisa las nuevas carpetas que se añaden.

3. Revisa el contenido de la carpeta "src" y busca el contenido de la página que se incluye por defecto (llamada home).

4. ¿Cómo se carga la página por defecto desde el módulo principal de la aplicación (app)? Busca si se hace referencia a la página "home" desde algún fichero y cómo se indica que se cargue como página principal.

Una vez hecho esto vamos a visualizar la aplicación:

• Abre la aplicación en el navegador usando la opcion "serve" del cli de ionic con el parámetro "--lab". Revisa la apariencia de esta aplicación para Android, iOS y Windows phone. Opcional).

• De forma opcional compila y ejecuta la aplicación para la plataforma Android. Prueba a utilizar las opciones "-c" y "-l" (¿para qué sirven estas opciones?).

Ejercicio 1.2 - Crear páginas de la app (2 puntos)

En este segundo ejercicio vamos a crear todas las páginas de la aplicación. Para esto, usando el comando ionic, crea tres páginas con el siguiente nombre:

• autor

• curriculum

• biblioteca

Una vez hecho esto vamos a modificar el título de la barra de navegación de cada una de las páginas (incluida la página home). El título de cada página será el siguiente:

• home --> Inicio

• autor --> Autor

• curriculum --> Currículum

• biblioteca --> iBiblioteca

Además añade al área de contenido de cada página un encabezado h1 con el mismo título y un párrafo con el texto "Contenido de ejemplo".

Para poder ver los cambios realizados, como todavía no están enlazadas las páginas, vamos a modificar el componente "app/app.component.ts" (que es el componente principal de la aplicación que incluye la navegación con la página principal) y añadir un import para cada una de las nuevas páginas:

import { AutorPage } from '../pages/autor/autor';
import { CurriculumPage } from '../pages/curriculum/curriculum';
import { BibliotecaPage } from '../pages/biblioteca/biblioteca';

y modificar la variable "rootPage" para que apunte a las nuevas páginas:

rootPage:any = AutorPage;

Una vez hecho esto, ¿puedes ver las nuevas páginas en el emulador o te aparece un error diciendo "No component factory found for AutorPage..."?

Recuerda que tras crear una página es necesario importarla en el módulo principal "app.module.ts" e incluirla en las secciones "declarations" y "entryComponents". Por lo tanto, añade los imports de las nuevas páginas a este módulo, añádelas a los arrays "declarations" y "entryComponents", y por último prueba a visualizarlas en el emulador.