Header Ads Widget

Ticker

6/recent/ticker-posts

Simulación de un back-end de API REST para su aplicación Angular 10/9 con JSON-Server y Faker.js

 En este tutorial, aprenderemos, con un ejemplo rápido, cómo simular un back-end de API REST para su aplicación Angular 10/9 que puede consumir usando Angular 10 HttpClient incluso antes de que su back-end real esté listo.

Usaremos dos poderosos paquetes de código abierto, json-server y faker.js y asumimos que tiene un proyecto Angular listo.

Tenga en cuenta que ambos json-serverfaker.jsson independientes del marco, es decir, puede usarlos con cualquier marco de JavaScript como Vue.js o React, pero en este ejemplo los usaremos en el contexto de un proyecto Angular.

¿Por qué burlarse de un back-end para su aplicación Angular 10?

La mayoría de las veces, el desarrollo web moderno implica a varios desarrolladores que trabajan en aplicaciones independientes de front-end y back-end. Este enfoque tiene muchas ventajas, como la separación de preocupaciones, pero también presenta algunos desafíos, como las dificultades en la coordinación entre los desarrolladores de front-end y back-end. Aquí viene el papel de herramientas como JSON-Server para aliviar estas dificultades. Como desarrollador de aplicaciones para el usuario, JSON-Server es una gran herramienta que le permite poner en marcha un servidor de API REST con una API completamente funcional sin codificación.

Lea para crear un ejemplo real de API REST o también este tutorial que implementa una API REST TypeScript / Node.js con JWT Auth . Pero, en lo que respecta a Angular, no hay diferencia entre consumir una API REST real o simulada.

¿Cómo simular un back-end de API REST?

Veamos ahora cómo simular un back-end de API RESTful usando json-server.

Vaya a una nueva terminal, navegue hasta su proyecto Angular e instálelo json-serverdesde npm:

$ cd ~/angular-example
$ npm install --save json-server

A continuación, cree un database.jsonarchivo dentro de una servercarpeta con el siguiente objeto:

{    
    "products": []
}

Necesitamos agregar datos a este archivo que serán devueltos desde nuestros puntos finales de API REST. Podemos usar Faker.js para generar automáticamente grandes cantidades de datos que parecen realistas.

Dirígete a tu terminal, ve a la raíz de tu proyecto Angular e instálalo Faker.jsdesde npm:

$ cd ..
$ npm install faker --save

Ahora, cree un generateData.jsarchivo y agregue el siguiente código:

var faker = require('faker');

var database = { products: []};

for (var i = 1; i<= 300; i++) {
  database.products.push({
    id: i,
    name: faker.commerce.productName(),
    description: faker.lorem.sentences(),
    price: faker.commerce.price(),
    imageUrl: "https://source.unsplash.com/1600x900/?product",
    quantity: faker.random.number()
  });
}

console.log(JSON.stringify(database));

A continuación, agregue los scripts generateDatarunServeral package.jsonarchivo:

{
  "name": "angulardemo",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "generate": "node ./server/generate.js > ./server/database.json",
    "server": "json-server --watch ./server/database.json"
  },

A continuación, vaya a su terminal y creemos algunos datos para nuestra API REST:

$ npm run generateData

Finalmente, ejecute el servidor API REST usando:

$ npm run runServer

Su servidor de API REST estará disponible en la [http://localhost:3000/](http://localhost:3000/)dirección.

Backend angular 10

Estos son los puntos finales de API disponibles que podemos consumir usando Angular HttpClient:

  • GET /products para conseguir los productos,
  • GET /products/<id> para obtener un solo producto por id,
  • POST /products para crear un nuevo producto,
  • PUT /products/<id> para actualizar un producto por id,
  • PATCH /products/<id> para actualizar parcialmente un producto por id,
  • DELETE /products/<id> para eliminar un producto por id.

Puede utilizar los parámetros _page_limitpara recuperar páginas de datos. En la Linkcabecera de la respuesta HTTP que tendrá las firstprevnextlastenlaces.

Conclusión

Gracias a json-server, puede aumentar su productividad al desarrollar su front-end de Angular 10 sin esperar a que las funciones del back-end estén listas. Dado que json-server se basa en Express.js, incluso es posible agregar funciones avanzadas a su back-end simulado, como autenticación y protección de rutas. Consulte este tutorial para ver un ejemplo con autenticación o también este paquete npm .

Publicar un comentario

0 Comentarios