> Manuales > Manual de desarrollo de APIs

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...

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.

Autenticación en JSON-Server

Un tema super útil que puedes querer en algún momento, para facilitar todas las parcelas del prototipado de aplicaciones frontend, es disponer de un módulo de autenticación sobre JSON-Server. Este tema no es trivial y para hacerlo necesitas conocer algo de NodeJS y Express, que es justamente el lenguaje y framework sobre el que está construido JSON-Server.

Si te interesa este asunto, te recomiendo la lectura del artículo de API REST con Autenticación JWT con JSON Server, donde te explico una modificación que realicé sobre este software, cómo instalarla, cómo crear usuarios y autorizar / autenticar.

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.

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online Escu...

Manual