Botón para abrir el Menú Botón para cerrar el Menú
Logo da empresa Alura
Iniciar Sesión Nuestros Planes
Formaciones Conoce a Luri
  • Programación _
  • Front End _
  • Data Science _
  • DevOps _
  • Innovación y Gestión _
Artículos de Tecnología > Front-end

Simulando una API REST con json-server

Vinicios Neves
Vinicios Neves
20/11/2022

Compartir

Mira este artículo:
  1. Accediendo a la ruta de proyectos:

portada

​ En las empresas es habitual consumir APIs REST en nuestros frontends. Eventualmente, puede ser necesario desarrollar el frontend primero o en paralelo con el backend. Cuando esto sucede, tenemos que simular de alguna manera los datos enviados por el backend, es decir, decimos que estamos trabajando con mocks o "mockando" el backend. Mock no es más que el nombre que se le da a un contenido inventado y utilizado únicamente par marcar una posición. Hay varias maneras de hacer esto. Una de ellas es por json-server. Brevemente, json-server simulará una API REST, con todos los puntos finales de un recurso: GET, POST, PUT y DELETE. Por lo tanto, nuestra interfaz consume esta API simulada, lo que permite crear toda la capa HTTP de la aplicación. Json-server es un paquete NPM que se puede instalar globalmente en ambientes que tienen instalado NodeJS. Entonces, nuestro primer paso es ejecutar la instalación:

img1

Una vez hecho esto, ya podemos ejecutar el comando json-server en el terminal, desde cualquier directorio:

img2

Tenemos varias opciones disponibles para usar, pero comencemos creando un archivo JSON que representará nuestro backend. Vamos a crear dos recursos:

proyectos;tareas

​ El proyecto es una entidad simple, que tiene un nombre y un ID incremental numérico. La tarea tiene una descripción, un ID numérico y un proyecto. Entonces podemos representarlos:

{ 
 "proyectos": [ 
   { 
      "id": 1,
      "nombre": "Alura Tracker 3.0"
    },
    {
      "id": 2,
      "nombre": "ByteBank 2.0"
     }
     ],
     "tareas": [
     {
       "id": 1,
       "descripcion":
       "Configuración del ambiente",
       "proyecto": {
       "id": 1,
       "nombre": "Alura Tracker 3.0"
       }
      },
     {   "descripcion": "Refactorización del vuex 4",
     	 "proyecto": {
   	     "id": 1,
         "nombre": "Alura Tracker 3.0"
         },
         "id": 2
         }
      ]
   }

Tenga en cuenta que esta es una estructura JSON simple, guardemos este archivo como db.json. Tenemos una matriz con proyectos y otra con tareas, siguiendo la estructura definida anteriormente. Ahora podemos ejecutar el comando base:

img3

img4

Accediendo a la ruta de proyectos:

img5

​ Así que db.json hace que el proyecto funcione. Estas rutas se crean a partir de la estructura de archivos JSON. Entonces, ¿qué sucede cuando tenemos una variedad de tareas y una variedad de proyectos? Se crean las dos rutas. Incluso podemos ir más allá y crear un endpoint único que devolverá, por ejemplo, los datos del usuario conectado:

{
	"proyectos": [
    	{
        	"id": 1,
            "nombre": "Alura Tracker 3.0"  },
        {
        	"id": 2,
		    "nombre": "ByteBank 2.0"
        }
   ],
    "tareas": [
    	{
        	"id": 1,
            "descripcion": "Configuración del ambiente",
            "proyecto": {
            "id": 1,
            "nombre": "Alura Tracker 3.0"
         }
        },
        {
        "descripcion": "Defactorización vuex 4",
        "proyecto": {
        "id": 1,
        "nombre": "Alura Tracker 3.0"
        },
        "id": 2
      }
   ],
	 "usuario": {
     	"id": 13,
        "nome": "Laura González",
        "perfil": "Administración"
     }
}

​ Como cambiamos el db.json manualmente, tenemos que detener el comando y volver a iniciarlo para cargar los nuevos cambios. Siempre que el archivo JSON cambia, idealmente, el servidor json carga automáticamente la nueva información. Así que agreguemos la opción --watch:

img-6

img-7

Tenga en cuenta que, de acuerdo con la estructura JSON, el servidor json monta los endpoints de las API. Ahora tenemos las tres rutas disponibles y aún mantenemos el servidor json atento a los cambios en el archivo db.json. Ahora, con un excelente backend emulado, ¡estamos listos para avanzar con el desarrollo de frontend hasta que la API real esté disponible!

No logro instalar el json server, me sale un error, que debo hacer?

Es muy común que cuando uno intente instalar el json server salga un mensaje cómo este:

img-8

Generalmente cuando este error es exhibido significa que su Windows está con una configuración de políticas de script que no permite instalar determinados paquetes. Para cambiar esta licencia hay que seguir los siguientes pasos:

  1. Abrir Windows Powershell como administrador

img-9

2 .Digite el comando Get-executionpolicy en el terminal. Es esperado que sea exhibido el valor Restrict como en la imagen

Get-executionpolicy

img-10

  1. Si el Restricted fue exhibido , digite el comando: Set-ExecutionPolicy Unrestricted y el siguiente mensaje aparecerá:

img-11

	4. Presione la llave S y la política de restricciones de scripts cambiará , permitiendo que logres instalar lo que necesites para programar. Para garantizar que la alteración ocurrió correctamente digite nuevamente el comando `Get-executionpolicy` en Windows Powershell y cheque si el valor `Unrestricted` es exhibido.

img-12

¡Ahora estás listo para empezar tu proyecto!

Vinicios Neves

img-13

Vinicios es ingeniero de software, involucrado en la arquitectura, diseño e implementación de microservicios, micro frontends y sistemas distribuidos. Tiene una experiencia significativa en aplicaciones, integración y arquitectura empresarial. Es Ingeniero de Software de la UNESA y Arquitecto de Software de la PUC Minas.

traducido y adaptado por Barbara Santos

Vinicios Neves
Vinicios Neves

Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Portugal e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

Artículo Anterior
¿Que es GitOps?
Siguiente Artículo
Convirtiendo String a número en JavaScript

Ver otros artículos sobre Front-end

Navegación

  • Planes
  • Instructores
  • Blog
  • Política de privacidad
  • Términos de uso
  • Sobre nosotros
  • Preguntas frecuentes

¡CONTÁCTANOS!

  • ¡Quiero entrar en contacto!

Blog

  • Programación
  • Data Science
  • Front End
  • Innovación y Gestión
  • DevOps

AOVS Sistemas de Informática S.A CNPJ 05.555.382/0001-33

SÍGUENOS EN NUESTRAS REDES SOCIALES

YouTube Facebook Instagram Linkedin Whatsapp Spotify

NOVEDADES Y LANZAMIENTOS

Aliados

  • Programa de aceleração Scale-Up Endeavor
  • En Alura somos unas de las Scale-Ups seleccionadas por Endeavor, programa de aceleración de las empresas que más crecen en el país.
  • Growth Academy 2021 do Google For Startups
  • Fuimos unas de las 7 startups seleccionadas por Google For Startups en participar del programa Growth Academy en 2021
Alura

Una empresa del grupo Alun

Logo do grupo Alun

AOVS Sistemas de Informática S.A CNPJ 05.555.382/0001-33

SÍGUENOS EN NUESTRAS REDES SOCIALES

YouTube Facebook Instagram Linkedin Whatsapp Spotify

Cursos

Cursos de Programación
Lógica de Programación | Java
Cursos de Front End
HTML y CSS | JavaScript | React
Cursos de Data Science
Data Science | Machine Learning | Excel | Base de Datos | Data Visualization | Estadística
Cursos de DevOps
Docker | Linux
Cursos de Innovación y Gestión
Transformación Ágil | Marketing Analytics

Alura

  • Educação em Tecnologia

    • logo fiap FIAP
    • logo casa do codigo Casa do Código
    • logo pm3 PM3 - Cursos de Produto
  • Mais Alura

    • logo alura start START BY Alura
    • logo alura lingua Alura Língua
    • logo alura para empresas Alura Para Empresas
    • logo alura latam Alura LATAM
  • Comunidade

    • logo tech guide Tech Guide
    • logo 7 days of code 7 days of code
    • logo Hipsters ponto Jobs Hipsters ponto Jobs
  • Podcasts

    • logo Hipster Network Hipster Network
    • logo Hipsters ponto Tech Hipsters ponto Tech
    • logo Dev sem fronteiras Dev sem Fronteiras
    • logo Like a Boss Like a Boss
    • logo IA Sob Controle IA Sob Controle
    • logo Mesa de Produto Mesa de Produto
    • logo Decode Decode
    • logo FIAPCast FIAPCast