Esta aplicación ha sido desarrollada como un ejercicio práctico dentro del módulo de Desarrollo Web en Entorno Cliente, de segundo curso del Ciclo Formativo de Grado Superior en Desarrollo de Aplicaciones Web, en el I.E.S. Polígono Sur de Sevilla.
El objetivo de este trabajo práctico es el de crear una Single Page Application (SPA) con Angular que haga llamadas a una API y utilice los datos recibidos. En este caso se ha elegido la API de The New York Times, en concreto los sets de datos de la sección de libros del periódico.
El código provisto en este repositorio es la carpeta src del proyecto de Angular. Dentro de dicho directorio se encuentra un subdirectorio app, en el que se incluyen los distintos componentes de la aplicación (autores, lista, listas, home, navbar, wishilist). En él, además, se incluye el directorio services, que contiene el archivo books.services.ts, que hace las distintas llamadas a la API.
NOTA: La ubicación del directorio src se explica en el apartado 3. Ejecución, mientras que las distintas funciones se detallan en el apartado 4. Funcionamiento.
Para ejecutar la aplicación, primero debemos tener instalado en nuestro sistema el gestor de paquetes NPM, el entorno de ejecución NodeJS y el framework de desarrollo Angular.
- Instalación en Windows y MacOS
En la web de NodeJS disponemos de instaladores tanto para Windows como para MacOS. Al instalar NodeJS estaremos instalando también npm.
- Instalación en Linux (Debian / Ubuntu)
Primero instalamos NodeJS y npm.
~$ sudo apt update
~$ sudo apt install nodejs
~$ sudo apt install npmA continuación comprobamos la instalación y la versión que hemos instalado.
~$ npm -v
~$ nodejs -vEs conveniente actualizar a la última versión estable, para lo cual instalamos n, creamos los enlaces simbólicos de directorios y comprobamos la versión instalada.
~$ sudo npm install -g n
~$ sudo n stable
~$ sudo ln -sf /usr/local/n/versions/node/[VERSIÓN INSTALADA]/bin/node /usr/bin/node
~$ nodejs -vPor último instalamos Angular CLI.
~$ sudo npm install -g @angular/cliUna vez configurado el entorno de ejecución, es recomendable instalar el IDE Visual Studio Code, tanto si vas a trabajar en desarrollo sobre el proyecto como si eres usuario de Windows, ya que VSC incluye una consola bash que te permitirá ejecutar los comandos de npm y Angular CLI como si estuvieras en Linux o MacOS.
Primero debemos crear un nuevo proyecto con Angular CLI.
~$ ng new nyt-booksIMPORTANTE: en el momento de crear el proyecto, la consola nos mostrará un asistente que nos preguntará si queremos habilitar la revisión de tipado estricta, si queremos añadir el routing de Angular y cuál es el formato de estilos que deseamos. Debemos indicar "Y" / "Y" / "CSS".
Luego descargamos o clonamos este repositorio.
~$ git clone https://github.com/jesusrodriguezg/nyt-books.gitA continuación debemos sustituir el directorio nyt-books/src con el directorio src que has descargado o clonado de este repositorio. Una vez hecho, ya podemos lanzar la aplicación, ejecutando desde la consola los siguientes comandos.
~$ cd nyt-books/
~$ ng serveUna vez haya compilado todo el proyecto, debemos abrir desde el navegador la ruta localhost:4200.
La aplicación consta de varias secciones y funcionalidades. Al abrirla, encontramos la portada, con un resumen del proyecto. En la parte superior tenemos la barra de navegación, con enlaces a los distintos apartados.
- Lists: despliega una tabla con las distintas listas de libros del New York Times; junto a cada una de ellas hay un botón que nos lleva a una subpágina donde se muestran los libros incluidos en esa lista; debajo de cada libro, encontremos un botón para añadirlo a la lista de deseos.
- Wishlists: nuestra lista de deseos, donde se van incluyendo los distintos libros que vamos añadiendo manualmente (y que podemos eliminar haciendo clic en el botón correspondiente).
- Búsqueda por autor: si introducimos el nombre de un autor (p.e., Stephen King) en la barra de búsqueda de arriba a la derecha, la aplicación nos devuelve todos los libros de dicho autor en una vista distinta a las anteriores; en cada libro de dicho autor aparece un enlace a la reseña que en su día publicó el New York Times.
Algunas funciones que se contemplan para el futuro son:
- Inclusión de un formulario de contacto reactivo que nos remita el mensaje a una dirección de correo determinada.
- Corrección de errores, optimización de código y mejoras de diseño.
Aunque esto es un proyecto de clase y su funcionamiento, diseño y alcance es limitado y básico, cualquier comentario, sugerencia, ayuda o mejora son bienvenidos.