Tabla de contenidos
En una Arquitectura Web Desacoplada, es decir, donde el Frontend y el Backend están separados, comúnmente el desarrollo de las actividades del Frontend no necesariamente está sincronizado a las actividades del Backend como fuente de datos en el proceso de construcción de la aplicación.
Es por ello que en múltiples ocasiones, los desarrolladores Frontend necesitan agregar APIs Simuladas (Mock APIs) para poder probar o testear el consumo de información desde una fuente de datos.
Al proceso de agregar Mock APIs para poder probar el consumo de información se denomina mock APIs for testing
¿Qué es una API?
Una API(Interfaz de Programación de Aplicaciones), es un software desarrollado desde el Backend con lenguajes y frameworks de programación como podrían ser: PHP, Python, NodeJS, Elixir por mencionar algunos.
El objetivo de la API es funcionar como un medio de comunicación entre 2 desarrollos de software, estableciendo protocolos y métodos para su correcto funcionamiento.
Imagina que tienes un proyecto estático desarrollado con HTML, CSS y Javascript y por otro lado una base de datos en MySQL con muchos datos por consumir.
Uno de los grandes retos es como lograr consumir esos datos, sin necesidad de agregar a tu HTML lenguajes de programación del lado del servidor como PHP.
La mejor forma de lograr esto, es poder desarrollar una API con PHP para enviar esta información al proyecto estático y mediante métodos o funciones como Fetch o alguna librería como Axios, obtener estos datos desde el Frontend e imprimirlos en el documento.
Ahora, imagina que tu desarrollo Frontend ya está listo, sin embargo, el Backend apenas se encuentra en construcción, es aquí cuando toman utilidad las mock APIs, ya que permitirán simular esa fuente de datos para no entorpecer el trabajo del Frontend.
¿Cómo puedo crear mock APIs?
Lo primero que necesitarás para crear mock APIs es un mock API Server, por lo que ahora te voy a platicar de una herramienta muy buena que se denomina Mockoon
Como lo indica Mockoon en su sitio web: “Es la forma más fácil y rápida de diseñar y correr mock REST APIs.”
Lo único que tenemos que hacer es descargar el programa e instalarlo y una vez que ya se encuentre funcionando en tu máquina local, tendrás del lado izquierdo un panel con el listado de entornos y del lado derecho encabezados, donde el más importante es la sección de rutas.
Para poder crear mock APIs, deberás presionar el botón en la parte superior izquierda denominado Nuevo entorno y se abrirá una ventana en donde tendrás que guardar un archivo en formato JSON con el nombre de tu entorno.
Creando nuestra primera ruta en mock APIs
Una vez que hayas guardado tu entorno, aparecerá la primera ruta denominada “/” de tipo GET y con respuesta 200, tanto la ruta como el método y el http status response los podrás modificar en cualquier momento.
Creando mock API Response
Podemos hacer un ejemplo, cambiando la ruta de solo “/” a “/users”, ¿Qué crees que suceda?
Después de haber configurado nuestra ruta, será necesario agregar el body de la ruta, esto se puede hacer mediante un archivo JSON o en la sección de body agregando un objeto JSON o un arreglo de objetos, Intenta añadir lo siguiente:
{
"user": "8devmx",
"type": "Frontend"
}Según la documentación de Mockoon, también podemos generar un bucle para poder realizar un arreglo de objetos, por ejemplo:
[
{{# repeat 8}}
{
"user": "{{@index}}devmx",
"type": "{{someOf (array 'Frontend' 'Backend' 'Full Stack') 0}}"
}
{{/ repeat}}
]Ya que hayamos populado el body de nuestras mock APIs, podemos configurar información adicional como los headers o cabeceras, para evitar bloqueos de CORS o para poder establecer el Content-Type por mencionar algunos.
Ya solo nos queda pulsar el botón de play que se encuentra de lado izquierdo del encabezado de las rutas para poder empezar a servir la información que pusimos en el body
Mock API Run y Mock API Call
Con esto ya tendremos la primera de nuestras rutas para nuestras mocks APIs disponibles en la ruta http://localhost:3000 aunque también tendremos disponible http://127.0.0.1 y es importante mencionar que podemos cambiar el puerto desde la sección de Settings.
Ya podemos utilizar el cliente de APIs favorito que tengamos como Postman, Insomnia o la extensión Rest en VSCode para poder probar nuestra API funcionando desde http://localhost:3000/users
Bueno, bueno pero todo esto está en local y tu prometiste que se vería en Internet
Diría mi madre: “No comas ansias que esto aún no termina”
Para poder exponer nuestra API al internet, es necesario utilizar un servicio que permita agregar un dominio o subdominio según sea el caso y que Forwardee todas las peticiones y respuestas que se generen es ese tunel.
Es por ello que para estas actividades, utilizaremos Nhttps://ngrok.com/grok, a si mismo como Mockoon, Ngrok se define así mismo como: “La forma más rápida de hostear tu servicio en internet.”
Empezaremos por descargar e instalar Ngrok en nuestro equipo, para ello, podemos ocupar Brew en Mac o Chocolatey en Windows o APT en Linux y una vez que lo hayamos instalado, desde nuestra terminal o línea de comandos:
Podremos utilizar el comando ngrok, por ejemplo si quieres probar que ngrok está funcionando correctamente puedes escribir:
ngrok -hUna vez que ya está instalado y funcionando, necesitaremos crear una cuenta en la página, es importante mencionarte que ngrok cuenta con múltiples planes, sin embargo, El plan Free nos servirá para este caso.
Una vez que hayamos creado nuestra cuenta e iniciado sesión, podemos dirigirnos al Dashbor y obtener nuestro Authtoken, copiaremos el token que nos provee y en la terminal podremos escribir:
ngrok config add-authtoken TOKENDonde TOKEN será el token que previamente habíamos copiado desde el dashboard, recuerda que esto solo se tendrá que realizar una vez como forma de autenticación, una vez que hayamos guardado nuestro token, ya simplemente tendremos que inicializarlo.
Por último, simplemente tendremos que inicializar ngrok, para ello simplemente tendremos que escribir el comando:
ngrok http 3000Recuerda que 3000 es el puerto donde inicializaste tu Mockoon, sin embargo, si por alguna razón cambiaste este puerto, será necesario reemplazarlo por el puerto que hayas configurado previamente.
Si todo sale bien, en nuestra terminal debemos ver una pantalla en donde nos aparece información importante de la sesión, como su status, la cuenta, la versión, región, etc…
Lo que es importante es que observes la opción que dice Forwarding, en donde podrás ver que lo que era tu http://localhost:3000 ahora es un subdominio que contiene ngrok.io.
Ahora lo único que tenemos que hacer es copiar el subdominio que se nos ha asignado para pegarlo en nuestro cliente API Favorito y listo! ya tenemos nuestra Mock APIs expuesto a internet.
En resumen, es importante mencionarte que las API Simuladas o mock APIs, es una herramienta de suma importancia en nuestros desarrollos día a día como Frontend, así mismo, existen muchas otras herramientas con las cuales podrás desarrollar la misma actividad.
Sin embargo, quise comentarte de estas 2 herramientas como una alternativa práctica en el proceso de mock APIs.
Como buen “Youtuber”, es importante que te pida que te suscribas a mi canal, actives la campanita de notificaciones y compartas para que ayudes a mi contenido a bla, bla bla.
