¡Buenas! Acá te cuento el paso a paso de cómo monté el endpoint /api/get-info/. La idea era simular una API para mostrar cómo pienso la lógica de un backend, pero sin tener un backend de verdad, todo con archivos estáticos. Puro JavaScript.
Seguro ya sabés, porque lo explican en la mayoría de los tutoriales (yo acá no voy a enseñar nada nuevo), que cuando entrás a un dominio, por defecto el servidor te devuelve el archivo index.html.
Bueno, la lógica es la misma para las subcarpetas. Si queremos que se muestre algo en la ruta /api/get-info/, es tan simple como crear esas carpetas en nuestro proyecto. Así, cuando alguien entre a esa URL, el servidor va a buscar y devolver el index.html que esté ahí adentro. ¡Una pavada!
mi-proyecto/
└── api/
└── get-info/
└── index.html <-- Este es el que se muestra.
Al principio tenía el CSS en una etiqueta <style>, pero cuando lo probé con curl, me di cuenta de que agregaba mucho "ruido" a la terminal. Yo quería que la salida fuera lo más limpia y directa posible.
La solución fue inyectar los estilos directamente en cada etiqueta usando el atributo style="...". De esta forma, el HTML que se devuelve es mínimo y va directo al grano, que es mostrar la etiqueta <pre> y el script que hace la magia.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Metadatos esenciales, nada de más -->
</head>
<!-- Estilos inyectados directamente para minimizar el código -->
<body style="margin: 0; background-color: #1e1e1e;">
<!-- El contenedor para el JSON, también con estilos en línea -->
<pre id="json-output" style="..."></pre>
<!-- Y por último, el script que hace todo -->
<script>
(function() {
/* ... la lógica de la API ... */
})();
</script>
</body>
</html>
Acá está el truco. Todo el laburo lo hace este pedacito de JavaScript que se ejecuta apenas se carga la página. Lo metí dentro de una función que se autoejecuta, (function(){ ... })();, para que no ande ensuciando el entorno global.
(function() {
// ---- 1. Definimos todo en el código ----
// Este es nuestro token "secreto". Cualquiera que quiera usar la API
// va a tener que pasar este mismo texto en la URL.
const FAKE_API_TOKEN = "KT-PROFILE-DEMO-TOKEN";
// Preparamos los dos posibles resultados como objetos de JavaScript.
// Uno para cuando todo sale bien...
const successResponse = {
status: "success",
source: "Simulated JavaScript API",
timestamp: new Date().toISOString(), // Le ponemos la fecha y hora actual para que parezca más real.
data: { /* ... toda mi info profesional ... */ }
};
// ...y otro para cuando el token está mal.
const errorResponse = {
status: "error",
code: 403,
message: "Forbidden. El token proporcionado es inválido o no fue provisto. Agrega '?token=TU_TOKEN' a la URL."
};
// ---- 2. Chusmeamos la URL ----
// Creamos un objeto que nos ayuda a leer los parámetros de la URL actual.
const urlParams = new URLSearchParams(window.location.search);
// Buscamos si hay un parámetro que se llame "token" y guardamos su valor.
const providedToken = urlParams.get('token');
// ---- 3. Comparamos y decidimos ----
// Declaramos una variable para guardar la respuesta final.
let finalResponse;
// Si el token que nos pasaron es igual al nuestro...
if (providedToken === FAKE_API_TOKEN) {
// ...la respuesta final va a ser la de éxito.
finalResponse = successResponse;
} else {
// Si no, la respuesta va a ser la de error. Simple.
finalResponse = errorResponse;
}
// ---- 4. Lo mostramos en pantalla ----
// Convertimos el objeto de JavaScript (success o error) a un texto en formato JSON.
// El "null, 2" es para que lo indente lindo y no quede todo en una sola línea.
const jsonString = JSON.stringify(finalResponse, null, 2);
// Agarramos la etiqueta <pre> que tiene el id "json-output" y le metemos
// adentro el texto JSON que acabamos de crear.
document.getElementById('json-output').textContent = jsonString;
})();
Si probás esto desde la terminal con curl, vas a ver todo el código HTML, no solo el JSON. Esto es porque curl te muestra el archivo crudo que le manda el servidor. La "magia" de mostrar solo el JSON la hace el navegador cuando ejecuta el JavaScript. ¡Es la prueba de que todo esto corre del lado del cliente!
Todo el código, incluyendo el token "secreto", está a la vista de cualquiera que abra la consola del navegador. Esto es un juego, una demostración para divertirse y mostrar cómo funciona la lógica de una API. Nunca de los nunca uses esto para información sensible.
La posta para hacer APIs seguras y de verdad es con un backend. Para eso, si querés, podés aprender Django (en Programación Para Mortales 😉 jaja).