Una aplicación grande en cuanto a lógica la mayoría de veces requiere un servidor con el cuál se intercambien datos y un cliente ya sea una aplicación web, móvil ó de escritorio que consuma estos datos, hablamos de una arquitectura cliente-servidor al repartir las responsabilidades así. Dentro del server también se construye un API para construirla generalmente se usa el estilo de arquitectura REST.

Pero ¿Qué pasa cuando se inicia un desarrollo en paralelo es decir, que tanto el desarrollo de la api y de los clientes inicie al mismo tiempo? y los clientes no tienen un API que consumir, para este tipo de casos es bastante útil un Mock server

En general cuando hablamos de Mock hablamos de algo que vamos a simular, es decir vamos a simular que tenemos un server que sea capaz de responder como lo haría el servidor ya terminado, la gran ventaja de usar una arquitectura cliente-servidor es que el server tiene la mayoría de la lógica del negocio pero los clientes, no deben de saberlo es como una caja negra y solo nos interesa que devuelva los valores esperados, sin importar que procesos haga para obtenerlos.

Así que en teoría podemos agregar cualquier otro server que nos devuelva la respuesta que queremos , en ese punto vamos a simular respuestas, pero necesitamos algo que este en la red y que responda cuando ejecutamos al menos una petición GET/POST en nuestro server ahí es donde entra JSON-SERVER

json-server es parte de npm (Node Package Manager) que es un gestionador de paquetes para nodejs, para esto debemos instalar nodeJs y npm en nuestro equipo una vez instalado debemos ejecutar el siguiente comando en la consola:

Con este comando instalaremos json-server en nuestro equipo de manera global y podremos usarlo cuando sea requerido.

Para usarlo necesitamos un archivo json la estructura debe de ser la siguiente:

{
(esto será el path de la petición, ejemplo: movies -> http://localhost:3000/movies)
“<nombre del objeto1>”:
//JSON Array
[
//objeto json
{},
        .
        .
        .
        {}
    ],
    .
    .
    .
    .
    .
    “<nombre del objetoN>”:
//JSON Array
[
//objeto json
{},
         .
         .
         .
        {}
    ]
}

puedes descargar el json que utilizo en el ejemplo con el siguiente enlace: descarga aquí

En nuestro caso quise hacer un mock server de películas es por eso que la estructura va así:

movieServer.json

{
“movies”: [
{
“poster_path”: “https://img2.rtve.es/v/3682901?w=1600&preview=1470297144384.jpg”,
“overview”: “From DC Comics comes the Suicide Squad, an antihero team of incarcerated supervillains who act as deniable assets for the United States government, undertaking high-risk black ops missions in exchange for commuted prison sentences.”,
“release_date”: “2016-08-03”,
“id”: 297761,
“original_title”: “Suicide Squad”,
“original_language”: “en”,
“title”: “Suicide Squad”,
“backdrop_path”: “/ndlQ2Cuc3cjTL7lTynw6I4boP4S.jpg”,
“popularity”: 48.261451,
“vote_count”: 1466,
“vote_average”: 5.91
},

…

]

}

Una vez que tenemos el archivo, únicamente es necesario ejecutar el siguiente comando:

Esto va a levantar un servidor en tu puerto 3000 y verás algo así:

y si abrimos el browser e ingresamos la url: http://localhost:3000/movies

veremos el contenido de nuestro archivo json

Igual podemos abrir nuestro postman y ingresar la URL http://localhost:3000/movies, hacer una petición GET y veremos el mismo resultado del browser

De igual forma podemos ejecutar:

POST (creación de elemento)

/movies

request body (objeto movie)

PUT (actualización total de elemento)

/movies/{id}

request body (objeto movie)

PATCH (actualización parcial de elemento)

/movies/{id}

request body (parte del objeto movie)

DELETE (borrado de elemento)

/movies/{id}

Funciona bien si quieres probar tu aplicación web corriendo en la máquina local ó tu aplicación de escritorio no?

• ¿Qué pasa si la quieres mostrar en la maquina del cliente?
• ¿Qué pasa si es una aplicación móvil?
• ¿Qué pasa si la quieres exponer a todo tu equipo?
• No quieres usar http, quieres usar https y un dominio!

Para eso llega a salvarnos ngrok!

ngrok es un tunnel que se hace desde tu servidor local para poder exponerlo a internet con un dominio auto generado https que puedes compartir.

Simplemente tienes que entrar a la página de ngrok aquí, registrarte y seguir las instrucciones para configurarlo, se descargará un archivo zip que hay que abrir y una vez en la carpeta puedes ejecutar el siguiente comando:

Recuerdan por default donde corre json-server? es el puerto 3000! correcto!

entonces el comando será:

./ngrok http 3000

verás algo así:

donde:

Forwarding https://1b3d7a0cb442.ngrok.io -> localhost:3000

es la url hacía tu local server

ahora puedes cambiar localhost por la url por https que da ngrok y consumir el mock server en tu aplicación móvil ó lo que necesites!

Muchas gracias!