JSON Server, HttpClient y Peticiones HTTP en Angular

npm i json-server

JSON-Server puede trabajar con archivos JSON o JavaScript. Si utilizamos JSON entonces su contenido será modificado para actualizar cambios hechos por el cliente. Para este ejemplo vamos a trabajar con un archivo JavaScript de manera que al restaurar el proceso los datos vuelvan a su estado original.

Vamos a crear un script para ejecutarlo. Para añadir el script de ejecución, editaremos el archivo package.json en la carpeta del proyecto:

"serverAPI": "json-server --port 5000 --watch restData.js"

Para inicializarlo, en la Terminal ejecutamos el comando:

npm run serverAPI

Para acceder, nos conectaremos a: http://localhost:5000/ (podemos cambiar el puerto por cualquier otro, por defecto es el puerto 3000). Debemos tener el servidor siempre en ejecución.

HttpClient

Para poder hacer uso de estas características en Angular, hay que configurar el archivo src/app/app.module.ts:

Para gestionar la funcionalidad HTTP creamos un nuevo servicio. En una Terminal ejecutamos el comando:

ng g service --skip-tests=true services/tarea

En el archivo src/app/services/tarea.service.ts, creamos una propiedad privada con la URL del servidor. Además, todo Servicio necesita el decorador @Injectable:

Importamos todo lo que vamos a necesitar y declaramos HttpClient en el constructor para poder hacer uso de la funcionalidad HTTP:

• import { HttpClient } from ‘@angular/common/http’;
• import { Observable } from ‘rxjs’; nos va a facilitar el uso del método subscribe, que nos permitirá ver tanto la respuesta a la petición como cualquier posible error.
• import { HttpHeaders } from ‘@angular/common/http’; para modificar las cabeceras y así indicar el tipo de objeto que estamos enviando para actualizar (PUT) o crear (POST).

Peticiones HTTP

El primer paso va a ser crear el método getTareas que devolverá un Observable de tipo Tarea[ ] y, a través de una petición GET, conseguirá todas las Tareas:

getTareas(): Observable<Tarea[]> {
    return this.http.get<Tarea[]>(this.apiUrl);
}

Por otro lado, en el Componente src/app/components/tareas/tareas.component.ts, importamos el Servicio y lo inyectamos en el constructor para poder hacer uso del mismo en nuestro componente:

Y nos suscribimos al método getTareas que acabamos de crear:

ngOnInit(): void {
  this.tareaService
    .getTareas()
    .subscribe((tareas) => (this.tareas = tareas));
}

Para los métodos deleteTarea (DELETE) y updateTareaRecordatorio (PUT) habrá que pasar por parámetro el «id» de la Tarea para eliminarla o actualizarla.

En los métodos updateTareaRecordatorio (PUT) y addTarea (POST) tenemos que establecer las cabeceras, que indicarán el tipo de objeto que enviaremos, bien para actualizar o bien para crear.

De esta forma tendríamos nuestro servicio terminado:

Finalmente, completamos nuestro Componente para tener toda la funcionalidad de la aplicación implementada:

• Autor: Borja Viejo Cabanillas
• Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
• Centro: Tajamar
• Año académico: 2021-2022

• Código: https://github.com/borja-viejo/ListaTareas-Angular-JsonServer
• LinkedIn: https://www.linkedin.com/in/borja-viejo/