Crear un API REST, 5 minutos con json-server

  • Por
Crear en 5 minutos un API REST que devuelve datos en formato JSON. Sería un web service fake (falso) con datos de prueba, pero ideal para aprender y prototipar aplicaciones frontend con un framework Javascript del lado del cliente, implementado con json-server.

En este artículo vamos a ver cómo podemos crear un API REST en menos de 5 minutos, que podremos usar con fines didácticos o para prototipado, ideal cuando estamos aprendiendo a desarrollar con un framework Javascript del lado del cliente, o cuando tenemos que realizar una aplicación frontend sin tener que entretenernos con el desarrollo backend.

La idea es conseguir un API perfectamente funcional, que admita las operaciones típicas de cualquier API REST estándar, ofreciendo las habituales operaciones través de los distintos verbos del HTTP, pero sin tener que invertir horas de nuestro tiempo para aprovisionarlo. Este tipo de servicios web se conocen como "API RESR fake", pues son realmente datos falsos, únicamente con propósitos de prueba.

Para poder ser tan rápidos usaremos un sencillo archivo JSON como fuente de datos, donde podremos generar nuestro modelo de datos, con distintas entidades, y datos de prueba. Como servidor REST usaremos un programa llamado "json-server", desarrollado con NodeJS que nos ofrece la posibilidad de tener un servidor web que responde a las operaciones típicas de las API.

El API REST que vamos a crear será perfectamente funcional, es decir, realizará todas las operaciones posibles sobre nuestros datos (lecturas, modificaciones, inserciones y borrados), almacenando los datos en el archivo JSON. La persistencia de los datos se realiza en el propio archivo de texto JSON, de este modo, en futuros accesos a la aplicación web, el API recordará su estado manteniendo toda la actividad que se haya realizado a lo largo del tiempo.

Al final del artículo verás además un vídeo donde se explica todo el proceso y se muestra cómo realizarlo en pocos minutos.

Nota: Si no tienes claro lo que es REST te recomiendo que te leas el artículo Qué es REST de Eduard Tomàs que lo explica muy bien y muy rápido. Incluso si tienes una idea de lo que es un API REST y quieres completar la información y saber más detalles de este tipo de recursos, la lectura te vendrá muy bien.

Descargar json-server

El primer paso para tener nuestra API es descargar e instalar json-server. Este programa es un paquete de NodeJS que instalaremos vía npm.

Nota: Si no tienes NodeJS deberás instalarlo en tu ordenador. Es muy sencillo entrando en https://nodejs.org y siguiendo las intrucciones para instalación. También te recomendamos el Manual de NodeJS de DesarrolloWeb.com, donde encontrarás información útil sobre "Node". El gestor de paquetes "npm" se instala automáticamente durante la instalación de NodeJS en tu máquina.

Realizaremos el siguiente comando en nuestro terminal:

npm install -g json-server

El gestor de paquetes npm nos instalará json-server con todas sus dependencias. Mientras tanto, podemos ir realizando el siguiente paso.

Crear un archivo JSON con los datos de nuestra API

En cualquier carpeta de nuestro ordenador debemos crear el archivo JSON que va a servir de origen de datos para nuestra API. Los datos serán aquellos que necesitemos en nuestra aplicación y en el propio JSON se puede introducir de inicio un conjunto de datos de prueba.

Nota: Puedes saber algo más de JSON en este artículo. En realidad no es más un archivo de texto plano, que guardarás con codificación UTF-8. La notación para definir los datos la realizamos como si fuera un objeto Javascript. Al trabajar con JSON no se realiza una definición del modelo de datos como se hace en una base de datos relacional, ya que este modelo de datos se define a través de los propios datos.

Podemos ver un juego de datos de muestra, en el siguiente código JSON, que almacena películas y un conjunto de clasificaciones de películas.

{
  "peliculas": [
    {
      "id": 1,
      "nombre": "El sexto sentido",
      "director": "M. Night Shyamalan",
      "clasificacion": "Drama"
    },
    {
      "id": 2,
      "nombre": "Pulp Fiction",
      "director": "Tarantino",
      "clasificacion": "Acción"
    },
    {
      "id": 3,
      "nombre": "Todo Sobre Mi Madre",
      "director": "Almodobar",
      "clasificacion": "Drama"
    },
    {
      "id": 4,
      "nombre": "300",
      "director": "Zack Snyder",
      "clasificacion": "Acción"
    },
    {
      "id": 5,
      "nombre": "El silencio de los corderos",
      "director": "Jonathan Demme",
      "clasificacion": "Drama"
    },
    {
      "id": 6,
      "nombre": "Forrest Gump",
      "director": "Robert Zemeckis",
      "clasificacion": "Comedia"
    },
    {
      "id": 7,
      "nombre": "Las Hurdes",
      "director": "Luis Buñuel",
      "clasificacion": "Documental"
    }
  ],
  "clasificaciones": [
    {
      "nombre": "Drama",
      "id": 1
    },
    {
      "nombre": "Comedia",
      "id": 2
    },
    {
      "nombre": "Documental",
      "id": 3
    },
    {
      "nombre": "Acción",
      "id": 4
    }
  ]
}

Este archivo JSON tendrá típicamente una extensión .json. En nuestro caso lo podríamos guardar como "peliculas.json". De esta manera ya tenemos todo el código que necesitaremos para crear nuestro API REST fake con unos datos iniciales, aunque también podríamos perfectamente colocar un JSON sin datos, donde sólo tengamos definidas las entidades (los arrays principales de las cosas que vamos a manejar, aunque sin información inicial.

Arrancar el servidor del API REST Fake

Como tercer y último paso para tener nuestro API funcionando debemos arrancar el servidor del API, es decir, nuestro recién instalado json-server. Esto también lo hacemos desde el terminal, con el siguiente comando.

json-server --watch peliculas.json

Enseguida veremos que nos aparece una serie de mensajes indicando cómo podríamos acceder a nuestro origen de datos, a través de las URL del servidor, o las URL de los recursos o entidades generadas en el JSON.

Acceder al API

Ahora ya solo nos queda acceder al API. Realmente podrás entrar en la "home" del servidor json-server para tu API a través de una URL como esta:

http://localhost:3000

En esa página encontrarás enlaces a los distintos recursos de tu API. Si los abres verás que te devuelve datos JSON como la mayoría de las API REST. Las operaciones que podrás realizar sobre el API son las típicas y se opera básicamente mediante los verbos del HTTP. Realmente aquí no difiere en nada de cualquier otro API que puedas usar.

Además, el API está perfectamente habilitada para invocarla desde otros dominios gracias a tener habilitado CORS, o si se desea usando JSONP.

En resumen, en menos de 5 minutos tenemos un API funcionando que nos vendrá perfecto para realizar nuestra programación Javascript del lado del cliente con acceso a datos de un API. Como hemos dicho, este servidor de JSON está más enfocado a fines didácticos o también al prototipado de un proyecto web o App para móviles.

Objeto de estudio aparte sería el acceso a esos datos, que generalmente harás con Ajax, usando un framework como AngularJS o una librería como BackboneJS, o al menos con jQuery.

Vídeo de la creación del API

A continuación puedes ver todo el proceso de creación del API REST en vídeo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Julio

30/11/2015
Muy útil
Existen frameworks que tb hacen muy rápido el desarrollo API REST como por ejemplo SailsJS. Estaría bien q nos enseñarais uno de ellos.

Samil

18/5/2016
Al iniciar el servidor json me genera un error,
Señor Miguel Angel, he seguido todo los pasos descritos en el vídeo y en su pagina web http://www.desarrolloweb.com/articulos/crear-api-rest-json-server.html, pero al iniciar el servidor json me genera un error, es el siguiente:

C:UserssamilAppDataRoaming pm ode_modulesjson-serversrccliutilsload.js:39
data = low(source, { storage: fileAsync }).state()
^

TypeError: low(...).state is not a function
at module.exports (C:UserssamilAppDataRoaming pm ode_modulesjson-serversrccliutilsload.js:39:48)
at start (C:UserssamilAppDataRoaming pm ode_modulesjson-serversrccli un.js:99:5)
at module.exports (C:UserssamilAppDataRoaming pm ode_modulesjson-serversrccli un.js:126:3)
at module.exports (C:UserssamilAppDataRoaming pm ode_modulesjson-serversrccliindex.js:86:3)
at Object.<anonymous> (C:UserssamilAppDataRoaming pm ode_modulesjson-serverinindex.js:2:22)
at Module._compile (module.js:399:26)
at Object.Module._extensions..js (module.js:406:10)
at Module.load (module.js:345:32)
at Function.Module._load (module.js:302:12)
at Function.Module.runMain (module.js:431:10)


Al entrar en el archivo load.js, me he puesto a buscar de donde se encuentra la funcion .state pero no la halle...

No se si a usted o ha alguien le ha pasado esto....

Muchas gracias por su ayuda de antemano?

Miguel

15/9/2017
Error al instalar json-server
Hola Miguel, excelente y muy didactico tu articolo felicitaciones!...
Te escribo pq tengo algun problema y quera validar si en algun momento se te presto, o alguien mas que lea este articulo, estoy instalando json-server en Windows 7, pero al ejecutar npm install -g json-server, me muestra los siguientes errores:
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:Program Files odejs ode_modules pmin pm-cli.js" "install" "-g" "json-server"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10
npm ERR! code ECONNRESET

Si alguien tiene idea de lo que me puede estar pasando, agradecería mucho su aporte!.

rafael

13/7/2018
Enlace publico
Hola, como puedo darle acceso a la api desde el puerto 3000? no me da acceso como loopback