TypeScript / Angular – datos externos

Bienvenidos sean a este post, hoy veremos un tema muy particular.

Si vienen de los posts anteriores tenemos una aplicacion que muestra distintas viviendas con diversos datos y el ultimo cambio nos permitio aplicar para poder alquilar la casa. Aunque solamente con unos datos que tenemos internamente en el codigo pero en la vida real toda esa informacion debe ser de orden externo. Un ejemplo puede ser una base de datos pero tambien podemos usar otro medio muy popular a la hora de poner informacion disponible como es JSON. En este post veremos como crear un servidor de JSON para enviar la informacion y como desde la aplicacion recuperaremos la misma. Sino poseen el proyecto les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta todo listo para ser utilizado. Nuestro primer paso sera ingresar al directorio y ejecutaremos el siguiente comando:

$ npm install -g json-server

Esto nos instalara el servidor de json de forma global. Con nuestro servidor creado pasemos al segundo paso, para ello en el raiz del directorio del proyecto generen un archivo con el nombre de db.json y agreguen el siguiente codigo:

db.json

{
"ubicaciones": [
    {
        "id": 0,
        "nombre": "Casa inicial",
        "ciudad": "Santa Rosa",
        "pcia": "CBA",
        "foto": "https://angular.io/assets/images/tutorials/faa/bernard-hermant-CLKGGwIBTaY-unsplash.jpg",
        "wifi": false
    },
    {
        "id": 1,
        "nombre": "Departamento Universitario",
        "ciudad": "Cordoba",
        "pcia": "CBA",
        "foto": "https://angular.io/assets/images/tutorials/faa/brandon-griggs-wR11KBaB86U-unsplash.jpg",
        "wifi": true
    },
    {
        "id": 2,
        "nombre": "Casa grande y antigua",
        "ciudad": "Alta Gracia",
        "pcia": "CBA",
        "foto": "https://angular.io/assets/images/tutorials/faa/i-do-nothing-but-love-lAyXdl1-Wmc-unsplash.jpg",
        "wifi": false
    },
    {
        "id": 3,
        "nombre": "Casa confortable",
        "ciudad": "Villa General Belgrano",
        "pcia": "CBA",
        "foto": "https://angular.io/assets/images/tutorials/faa/ian-macdonald-W8z6aiwfi1E-unsplash.jpg",
        "wifi": true
    },
    {
        "id": 4,
        "nombre": "Casa moderna",
        "ciudad": "Embalse",
        "pcia": "CBA",
        "foto": "https://angular.io/assets/images/tutorials/faa/krzysztof-hepner-978RAXoXnH4-unsplash.jpg",
        "wifi": true
    },
    {
        "id": 5,
        "nombre": "Casa final",
        "ciudad": "Santa Monica",
        "pcia": "CBA",
        "foto": "https://angular.io/assets/images/tutorials/faa/r-architecture-JvQ0Q5IkeMM-unsplash.jpg",
        "wifi": true
    }
]
}

En este caso simplemente trajimos cada uno de los datos de las viviendas y las adaptamos al estilo json para que puedan ser utilizadas. La otra diferencia es que las fotos tienen la direccion completa pero el resto sigue exactamente de la misma forma. Lo siguiente sera ejecutar el siguiente comando:

$ json-server --watch db.json

Este dara inicio al servidor y ahora podremos acceder a la informacion mediante la siguiente URL:

http://localhost:3000/ubicaciones

Si la abren en un browser se vera de la siguiente manera:

Nuestro siguiente paso sera eliminar el array y hacer que la aplicacion tome esta informacion, para ello debemos ir a viviendas.service.ts y modificaremos el codigo de la siguiente manera:

import { Injectable } from '@angular/core';
import { Ubicacionviviendas } from './ubicacionviviendas';

@Injectable({
  providedIn: 'root'
})
export class ViviendasService {
  readonly url = "http://localhost:3000/ubicaciones";

  async getTodasUbicaciones(): Promise<Ubicacionviviendas[]> {
        const datos = await fetch(this.url);
        return await datos.json() ?? [];
  }
  async getUbicacionPorId(id: number): Promise<Ubicacionviviendas | undefined> {
        const datos = await fetch(`${this.url}/${id}`);
        return await datos.json() ?? {};
  }
  submitAplicacion(nombre: string, apellido: string, email: string) {
        console.log(`Aplicacion Casas recibio:
                Nombre: ${nombre}, Apellido: ${apellido}, e-mail: ${email}
                .`);
  }
}

Las mayores modificaciones las efectuamos en la clase donde modificamos a url, ahora tiene la direccion del servidor json, eliminamos el array con las viviendas y modificamos los metodos para obtener las ubicaciones. En ambos casos las transformamos en asincronicas, y en ambos casos devuelven una promesa. Tambien poseen una constante para almacenar la obtencion de los datos desde el servidor pero el especifico pasa el id para obtener solo esos datos. Por esa razon cuando no encuentre nada para el metodo de todas las ubicaciones devuelve un tuple vacio y para el caso especifico devuelve un array vacio. El metodo submitAplicacion no recibio ninguna modificacion. Ya tenemos la forma de obtener los datos desde el servidor pero todavia no tenemos como mostrarlos, para ello debemos ir a hogar.component.ts y modificaremos el constructor de la siguiente manera:

  constructor() {
        this.serviceViviendas.getTodasUbicaciones().then(
          (listaUbicacionViviendas: Ubicacionviviendas[]) => {
                this.listaUbicacionViviendas = listaUbicacionViviendas;
                this.listaViviendasFiltradas = listaUbicacionViviendas;
          });
  }

En este caso modificamos al constructor para que mediante then procesemos al resultado devuelto por la funcion getTodasUbicaciones. Este lo pasaremos a las dos listas, la sin filtrar y la que sera para filtrar. La siguiente modificacion sera en la encargada de mostrar los detalles de cada vivienda. Para ello debemos ir al detalles.component.ts y modificaremos el constructor de la siguiente manera:

  constructor() {
        const ubicacionVivId = parseInt(this.route.snapshot.params['id'],10);
        this.servicioVivienda.getUbicacionPorId(ubicacionVivId)
                .then(ubicacionViviendas => {
                        this.ubicacionViviendas = ubicacionViviendas;
                });
  }

Aca volvemos a hacer lo mismo que en el otro, transformar las funciones para recibir los datos asincronicos. La primera modificacion es que no usamos a Number para convertir el id de la vivienda sino que usamos parseInt, el 10 es para especificar que use la base decimal, y en el llamado a la funcion para buscar por id le aplicamos un then, este utiliza la propiedad ubicacionViviendas para tomar el valor recibido y asignarlo al del objeto creado de esta clase.

Con esto ya deben tener funcionando nuevamente a la pagina, pero ahora con la particularidad de que toma los datos del servidor de json. Con esto ya hemos terminado el proyecto y hemos pasado por muchos temas basicos de angular. Antes de finalizar les dejo el codigo final del proyecto para descargarlo:

En resumen, hoy hemos visto como obtener datos externos mediante angular, en este caso lo hicimos mediante json, como implementar un servidor sencillo de json para enviar la informacion, despues realizamos las modificaciones para tomar los datos del servidor de forma asincronica, y para que la aplicacion tome estos valores asincronicos capturados. Espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.