Códice | Entradas sobre «api»

Accediendo a la API de Mastodon

JavGuerra — Wed, 18 Sep 2024 00:00:00 GMT

Etiquetas: #javascript, #código, #api, #servidor

En este artículo vamos a ver cómo se puede acceder a la API de Mastodon, un servicio que nos permite, entre otras cosas, obtener las últimas publicaciones de un usuario concreto.

Recientemente la he usado para mostrar, en el apartado social de esta página, las publicaciones que escribo en la red social, empleando JavaScript del lado del cliente en Astro, es decir, que en una página .astro he incluido un script que lee y muestra las publicaciones actualizadas de mi cuenta de Mastodon.

Me centraré en la parte de JavaScript y no tanto en la integración con Astro, ya que, de esta forma, será posible aprovechar la información para que pueda ser usada en otros frameworks o aplicaciones propias.

El lector debe conocer las funciones avanzadas de JavaScript como asincronía y llamadas a APIs para seguir correctamente esta entrada.

Nota: Este artículo ha sido publicado también en IfGeekThen, el blog de NTT Data, el 18 de marzo de 2026.

API de Mastodon

Realizaré la consulta a la API de Mastodon mediante la función fetch de JavaScript.

Las consultas a la API no requieren autenticación (aunque es posible), por lo que podemos acceder a ella sin ningún tipo de token, pero voy a necesitar:

La url de la instancia de Mastodon, es decir el servidor.
El id de la cuenta de usuario que quiero consultar.
El número que indique la cantidad de publicaciones que quiero obtener.

Cuando tengamos estos datos, podremos construir el endpoint o url de la API de Mastodon, que será la siguiente:

https://<server>/api/v1/accounts/<accountId>/statuses?limit=<limit>

Donde:

<server> es el nombre de dominio de la instancia de Mastodon, por ejemplo mastodon.social o la de tu propia instancia.
<accountId> es el id de la cuenta que queremos consultar, por ejemplo 1234567890. Este id se obtendría de la url de la cuenta, ej.: https://mastodon.social/@usuario, como se verá enseguida.
<limit> es el número de publicaciones que queremos consultar, por ejemplo 10.

Para obtener el id de la cuenta, debo usar la siguiente url:

https://<server>/api/v1/accounts/lookup?acct=<username>

Donde hay que sustituir <server> por el nombre de la instancia de Mastodon y <username> por el nombre de usuario de la cuenta que queremos consultar.

Obtengo un json con el id de la cuenta, entre otros datos, como por ejemplo:

{
  "id": "1234567890",
  "username": "usuario",

  ...

}

Si queremos consultar las 10 últimas publicaciones de la cuenta ficticia @usuario, que tiene el id ficticio: 1234567890, en la instancia de Mastodon mastodon.social, tendríamos que usar la siguiente url:

https://mastodon.social/api/v1/accounts/1234567890/statuses?limit=10

Fetch

Ya tenemos formado el endpoint de la API de Mastodon, y, para llevar a cabo la consulta, usaré la función fetch de JavaScript, que permite realizar peticiones HTTP, y obtener el resultado como un objeto json.

const server = 'https://mastodon.social';
const profileId = '1234567890';
const limit = 10;

const route = `${server}/api/v1/accounts/${profileId}/statuses?limit=${limit}`;

async function getLatestPosts(route) {
  try {
    const response = await fetch(route);
    if (!response.ok) throw new Error(response.statusText);
    return await response.json();
  } catch (error) {
    console.error(error);
    return [];
  }
}

Como se aprecia, se trata de una función asíncrona con una estructura de lo más común, que se ejecutará de manera independiente, y cuando se haya terminado de ejecutar, me permitirá seguir con la ejecución del código.

Para llamar a la función, uso:

const posts = await getLatestPosts(route);

Con await, se espera a que la función getLatestPosts termine de ejecutarse, y luego es posible usar el array posts para mostrar las publicaciones en nuestra página, siempre que no se haya producido ningún error.

Mostrando las publicaciones

Allí donde vamos a mostrar las publicaciones, voy a usar un elemento <div> con el id="posts" para definir una lista de publicaciones, un <ul>, y un elemento <li> para cada publicación.

Incluyo el siguiente código HTML en la página:

<div id="posts">
  Cargando...
</div>

Y luego, mediante el script de JavaScript, sustituiré el contenido del elemento <div> con las publicaciones obtenidas y formateadas:

function displayPosts(posts) {
  const postsElement = document.getElementById('posts');

  if (!posts || posts.length === 0) {
    postsElement.innerHTML = '<p>No se encontraron posts.</p>';
    return;
  }

  postsElement.innerHTML = `
    <h2>Últimas publicaciones</h2>
    <ul>
    ${posts.map(post => {
      const isReblog = post.reblog != null;
      const originalPost = isReblog ? post.reblog : post;
      const contentIsEmpty = !originalPost.content || originalPost.content.replace(/<[^>]*>/g, '').trim() === '';
      const hasMedia = originalPost.media_attachments && originalPost.media_attachments.length > 0;
      const multimediaLink = hasMedia ? `<small>Incluye contenido multimedia <a href="${originalPost.url}">👁️ Ver en origen →</a></small><br />` : '';

      return `
        <li class="post">
          ${isReblog 
            ? `${originalPost.content} <small>♻️ Republicado </small>`
            : contentIsEmpty && hasMedia
              ? multimediaLink
              : originalPost.content + multimediaLink}

          <a href="${originalPost.url}">
            <small>
              📢 ${new Date(originalPost.created_at).toLocaleString('es-ES', {dateStyle: 'medium', timeStyle: 'short'})}
            </small>
          </a>
        </li>
        `
      }).join('')}
    </ul>
  `;
}

Vamos por partes.

Primero obtengo el elemento <div> con el id posts del DOM, y lo guardo en una variable postsElement para poder referirme a él en el script.

const postsElement = document.getElementById('posts');

Compruebo que hay publicaciones y que el array posts no esté vacío. Si no es así, defino el contenido del elemento <div> con el siguiente código:

postsElement.innerHTML = '<p>No se encontraron posts.</p>';

Si hemos obtenidos publicaciones, hago uso de la siguiente estructura:

postsElement.innerHTML = `
    <h2>Últimas publicaciones</h2>
    <ul>
    ${posts.map(post => `

        // código para mostrar cada publicación

    `).join('')}
    </ul>
  `;

Con la función map puedo iterar sobre cada elemento del objeto posts y acceder a cada una de las publicaciones, y luego puedo juntar todos los elementos formateados en una cadena de texto mediante la función join. El resultado se incluirá en el elemento <div> con el id posts mediante el método innerHTML de postElement. Es decir, obtengo cada publicación, esta se formatea, y se concatena o añade a la cadena de texto que conforma el contenido del elemento <div>; las publicaciones.

Pintando…

Para formatear las publicaciones, voy a usar una estructura de elementos <li> por cada publicación, como dije, y un elemento <a> para enlazar a la publicación original. Lo que quiero conseguir se parece a esto:

<li class="post">
  Este es un ejemplo de una publicación en Mastodon.
  <a href="https://mastodon.social/@usuario/109292343224519197">
    <small>18 sep 2024, 1:23:45</small>
  </a>
</li>

De cada publicación obtengo el contenido de la publicación, y el enlace a la publicación. Con esta información defino una serie de variables:

const isReblog = post.reblog != null;
const originalPost = isReblog ? post.reblog : post;
const contentIsEmpty = !originalPost.content || originalPost.content.replace(/<[^>]*>/g, '').trim() === '';
const hasMedia = originalPost.media_attachments && originalPost.media_attachments.length > 0;
const multimediaLink = hasMedia ? `<small>Incluye contenido multimedia <a href="${originalPost.url}">👁️ Ver en origen →</a></small><br />` : '';

Como las publicaciones pueden ser republicaciones, es decir, publicaciones compartidas de otros usuarios o propias, compruebo si este es el caso.

Si es una republicación, obtengo su contenido, sino, obtengo el contenido de la publicación original.

Compruebo si el texto de la publicación está verdaderamente vacío, es decir, si no contiene, por ejemplo, alguna etiqueta HTML.

Compruebo también si la publicación tiene contenido multimedia.

Por último, si la publicación tiene contenido multimedia, preparo el enlace a la publicación original, y si no lo tiene, dejo el aviso vacío.

Seguidamente, formateo el texto de la publicación mediante el siguiente código:

  <li class="post">
    ${isReblog 
      ? `${originalPost.content} <small>♻️ Republicado </small>`
      : contentIsEmpty && hasMedia
        ? multimediaLink
        : originalPost.content + multimediaLink}

    <a href="${originalPost.url}">
      <small>
        📢 ${new Date(originalPost.created_at).toLocaleString('es-ES', {dateStyle: 'medium', timeStyle: 'short'})}
      </small>
    </a>
  </li>

¿Se trata de una republicación?, entonces publico el texto de la republicación con el aviso de ♻️ Republicado.

En caso contrario, compruebo si el texto de la publicación está vacío y si tiene contenido multimedia.

Si ambas condiciones se cumplen, entonces publico el aviso de ver 👁️ Ver en origen → con su enlace, ya que será una publicación sin texto pero con video o imagen…

Si no se cumple alguna o ambas condiciones, entonces publico el contenido de la publicación y el aviso de ver 👁️ Ver en origen → con su enlace, pues o bien la publicación tiene contenido, tiene texto y contenido multimedia o sólo texto.

Para mostrar la fecha, uso la función toLocaleString de JavaScript, que me permite obtener la fecha en formato local.

Es posible llamar a la función displayPosts mediante:

displayPosts(posts);

Siendo posts el objeto de publicaciones en json obtenido de la API de Mastodon.

Una advertencia

Si bien las instancias de Mastodon se encargan de limpiar las publicaciones de los usuarios ante potenciales peligros, no estaría de más implementar una función propia que se ocupe de limpiar el contenido de las publicaciones antes de hacer uso de originalPost.content para evitar sorpresas por la inclusión de etiquetas o atributos dañinos que pudieran llegar de publicaciones de instancias de Mastodon poco confiables.

El código completo

El código siguiente incluye el contenido mostrado hasta ahora en el artículo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Publicaciones de Mastodon</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <h1>Mastodon</h1>

    <div id="posts">
        Cargando...
    </div>

<script>
    // Sustituye los valores siguientes para adaptarlo a tu propio uso
    const server = 'https://mastodon.social';
    const profileId = '1234567890';
    const limit = 10;

    const route = `${server}/api/v1/accounts/${profileId}/statuses?limit=${limit}`;

    async function getLatestPosts(route) {
        try {
            const response = await fetch(route);
            if (!response.ok) throw new Error(response.statusText);
            return await response.json();
        } catch (error) {
            console.error(error);
            return [];
        }
    }

    function displayPosts(posts) {
      const postsElement = document.getElementById('posts');

      if (!posts || posts.length === 0) {
        postsElement.innerHTML = '<p>No se encontraron posts.</p>';
        return;
      }

      postsElement.innerHTML = `
        <h2>Últimas publicaciones</h2>
        <ul>
        ${posts.map(post => {
          const isReblog = post.reblog != null;
          const originalPost = isReblog ? post.reblog : post;
          const contentIsEmpty = !originalPost.content || originalPost.content.replace(/<[^>]*>/g, '').trim() === '';
          const hasMedia = originalPost.media_attachments && originalPost.media_attachments.length > 0;
          const multimediaLink = hasMedia ? `<small>Incluye contenido multimedia <a href="${originalPost.url}">👁️ Ver en origen →</a></small><br />` : '';

          return `
            <li class="post">
              ${isReblog 
                ? `${originalPost.content} <small>♻️ Republicado </small>`
                : contentIsEmpty && hasMedia
                  ? multimediaLink
                  : originalPost.content + multimediaLink}

              <a href="${originalPost.url}">
                <small>
                  📢 ${new Date(originalPost.created_at).toLocaleString('es-ES', {dateStyle: 'medium', timeStyle: 'short'})}
                </small>
              </a>
            </li>
            `
          }).join('')}
        </ul>
      `;
    }

    document.addEventListener("DOMContentLoaded", async () => {
      const posts = await getLatestPosts(route);
      displayPosts(posts);
    });
</script>

</body>
</html>

No olvides sustituir los valores de server, profileId y limit con los que correspondan a tu propio perfil de Mastodon o el del perfil que desees consultar.

Cargando las publicaciones

Aquí confluye todo. Mediante el evento asociado a la carga de la página DOMContentLoaded, que se incluye al final del script, se inicia la petición asíncrona a la API de Mastodon con getLatestPosts(route) y se muestran las publicaciones con displayPosts(posts).

Estilos

Para que el contenido se vea correctamente, es recomendable definir algunos estilos en el archivo style.css. Un ejemplo:

.invisible {
  display: inline-block;
  font-size: 0;
  height: 0;
  line-height: 0;
  position: absolute;
  width: 0;
}
.invisible img,
.invisible svg {
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 0 !important;
}
.ellipsis:after {
  content: "…";
}

Los estilos aquí mostrados son los que usa el propio Mastodon para presentar las publicaciones en su página.

La clase .invisible se aplica a los elementos que quiero que no se vean. Esto es necesario para evitar saltos de línea y espacios en blanco en el contenido de las publicaciones debido a su formateo original.

Se incluye también la clase .invisible para imágenes y vectores SVG. Si bien no se usa en este ejemplo, pueden ser de utilidad si decides mostrar el contenido multimedia de las publicaciones.

Por su parte, la clase .ellipsis se usa para mostrar puntos suspensivos … al final de los enlaces acortados.

A partir de estos estilos es posible aplicar estilos propios al contenido mostrado.

Experimenta por tu cuenta

Como has podido comprobar a lo largo de este artículo, acceder a la API de Mastodon es un proceso sencillo que nos permite integrar el contenido de una cuenta en nuestros propios proyectos mediante código JavaScript. Desde la construcción del endpoint y la gestión de la respuesta asíncrona con fetch, hasta el formateo final de los datos considerando casos como las republicaciones o el contenido multimedia, has visto los fundamentos para crear tu propio visor de publicaciones.

Te animo a que tomes el código completo, lo adaptes con tus propios datos y experimentes modificando la lógica de displayPosts y el css para personalizar aún más la presentación. Y si te surgen dudas o mejoras, no dudes en explorar la documentación oficial de la API, donde encontrarás muchas más posibilidades.

Saber más

Mastodon
Mastodon API
Ejemplo de uso: Social

De Thunder a Postman

JavGuerra — Thu, 02 Apr 2026 00:00:00 GMT

Etiquetas: #api, #json, #herramienta, #código, #javascript, #node.js

Necesitaba migrar colecciones de API desde Thunder Client (una extensión de VS Code) a Bruno (cliente API), pero Bruno no importa directamente colecciones de Thunder Client. Sin embargo, Bruno sí importa colecciones de Postman. Así que creé este script que convierte cualquier colección exportada de Thunder Client al formato estándar de Postman Collection v2.1.0, permitiendo importarla en Bruno (o Postman) sin perder carpetas, autenticación, archivos ni estructura. En esta entrada te explico cómo funciona el script.

¿Qué es Bruno?

Bruno es un cliente de API de código abierto, offline y respetuoso con la privacidad. A diferencia de otras herramientas, no requiere cuenta, no sincroniza tus colecciones en la nube y todos los datos se guardan localmente en tu ordenador. Es rápido, ligero y perfecto para equipos que priorizan la seguridad y el control de sus propios archivos.

Planteamiento

Thunder Client exporta las colecciones en un formato JSON propio. Postman y Bruno usan otro formato diferente. El script actúa como un “traductor” que lee el JSON de Thunder Client, lo interpreta y genera un JSON válido para Postman, conservando:

Las peticiones (GET, POST, PUT, DELETE, etc.)
Las carpetas y subcarpetas
Los headers, autenticación y cuerpos de las peticiones
Los archivos adjuntos en formularios

Puedes descargar el script desde el:

Dificultades de la conversión

Estructura inconsistente del JSON de Thunder Client
Las exportaciones no siguen un formato fijo: las peticiones pueden estar en requests, en items, en tests o en arrays con nombres personalizados como requests_carpeta_auth. El script tuvo que aprender a buscar en cualquier lugar.

Carpetas anidadas sin un identificador claro
Thunder Client a veces usa parentId, otras veces _parentId, o simplemente anida objetos. Reconstruir la jerarquía a cualquier nivel requirió una función recursiva robusta.

Variables en URLs
Thunder Client permite {{variables}} en las URLs. Si intentas parsear la URL con new URL(), el script falla. Hubo que detectar y proteger estos casos.

Autenticación dispersa
La autenticación puede venir en un bloque auth o directamente en los headers. Además, hay que soportar Bearer, Basic y API Key (que puede ir en header o en query param).

Archivos en formdata
Los archivos no se representan como strings simples, sino como objetos con ruta o strings especiales (@/ruta). Hay que identificarlos y convertirlos al formato que espera Postman.

Headers con espacios
Algunos headers exportados tenían espacios al inicio o final del nombre, lo que provocaba errores en Bruno. Hubo que limpiarlos con trim().

BOM en archivos Windows
Los archivos exportados desde Windows incluyen una marca de orden de bytes (BOM) invisible que rompe el parseo JSON. Hubo que detectarla y eliminarla.

El script paso a paso

1. Lee el archivo de entrada

El script recibe como parámetro el archivo JSON exportado desde Thunder Client. Verifica que el archivo existe y que es un JSON válido. Si el archivo tiene BOM (marca de orden de bytes típica de Windows), lo elimina automáticamente para evitar errores.

2. Extrae todas las peticiones

Busca las peticiones en cualquier lugar del JSON: en la raíz, dentro de carpetas, en arrays con nombres personalizados, etc. No importa cómo haya estructurado Thunder Client la exportación.

3. Extrae la estructura de carpetas

Identifica las carpetas y subcarpetas, detectando sus identificadores (folderId, parentId) para reconstruir la jerarquía original, incluyendo subcarpetas anidadas a cualquier nivel.

4. Convierte cada petición individualmente

Para cada petición, traduce:

URL: La segmenta en partes (host, path, query params) para Bruno, pero respeta las variables {{variable}} sin intentar parsearlas.
Headers: Los mantiene y limpia espacios accidentales.
Autenticación: Soporta Bearer Token, Basic Auth y API Key (tanto en header como en query param).
Cuerpo (body): Maneja JSON (con resaltado de sintaxis), formularios multipart (con detección automática de archivos) y urlencoded.

5. Construye la colección Postman

Reconstruye la jerarquía completa usando recursividad: carpetas raíz, subcarpetas y peticiones en su lugar correspondiente. Si la exportación no incluye identificadores, usa un método alternativo como respaldo.

6. Guarda el resultado

Escribe el archivo JSON en el formato estándar de Postman Collection v2.1.0, listo para importar.

7. Muestra estadísticas

Al finalizar, informa sobre cuántas peticiones y carpetas se han convertido.

El resultado: características principales destacadas

Característica	Qué hace
Jerarquía completa	Respeta carpetas y subcarpetas anidadas a cualquier nivel
Búsqueda exhaustiva	Encuentra peticiones estén donde estén en el JSON
Autenticación múltiple	Bearer, Basic y API Key (header o query)
Soporte para archivos	Detecta y convierte campos de tipo file en formularios
Compatibilidad con Bruno	Segmenta el host y limpia rutas para importación perfecta
Resaltado JSON	Configura los cuerpos JSON para que se vean con colores
Manejo robusto	Valida archivos, limpia BOM, muestra errores claros
Sin dependencias	Usa solo módulos nativos de Node.js

Ejemplo de uso

node convertir-thunder-a-postman.js prueba-thunder.json coleccion-postman.json

Salida esperada:

✅ Conversión completada con éxito.
🚀 Fichero generado: coleccion-postman.json
📊 Peticiones: 24 | Carpetas: 7

Limitaciones del script

Variables de colección: No se importan automáticamente (deben recrearse a mano)
Scripts pre-request y tests: No se convierten (la API es compatible, pero hay que copiarlos manualmente)
Autenticación avanzada: OAuth 2.0, AWS Signature y Digest no están soportados

Enlaces

Recursos TIC

JavGuerra — Wed, 11 Dec 2024 00:00:00 GMT

Etiquetas: #portfolio, #web, #java, #spring boot, #bootstrap, #thymeleaft, #spring security, #accesibilidad, #responsive, #selenium, #api, #swagger, #javadoc, #junit, #mockito, #docker, #jacoco, #github actions, #ci-cd, #sonarqube

Recientemente he cursado una formación con Adecco, y este es mi proyecto fin de estudios, que ha consistido en desarrollar una aplicación que permita gestionar recursos TIC y listas de recursos, para realizar los tests correspondientes, aplicando los conocimientos aprendidos, y que ha sido desplegada en el servicio de Railway.com.

El proyecto

La plataforma, que está basada en Java y Spring Boot, utiliza un patrón Modelo-Vista-Controlador y una arquitectura cliente-servidor, haciendo uso del IDE IntelliJ IDEA, de Maven para la gestión del proyecto, de Git y GitHub para el versionado de código, de MySQL, H2 y el ORM Hibernate para la gestión de la base de datos y de una configuración LAMP dockerizada para las pruebas.

Para el frontend se ha empleado el gestor de plantillas Tymeleaft y Bootstrap.

Para los tests se ha usado JUnit, Mockito, Selenium. la API se ha probado con Swagger y las estadísticas se han generado con JaCoCo y SonarQube.

Para el despliegue se utilizaron tecnologías como Docker y metodologías CI/CD con GitHub Actions.

La planificación y codificación se han llevado a cabo usando Trello.

Destacados

Además de los requisitos del MVP, se han incluido las siguientes funcionalidades:

Diseño responsive, “mobile first”
Web accesible AA. Testada con WAVE
Seguridad por diseño
Confirmaciones de borrado
Implementación de login de usuarios
Integra el editor TinyMCE
Provee API REST e interfaz Swagger
Incluye aviso legal, privacidad y cookies
Documentación la aplicación con JavaDoc
Usa el protocolo OpenGraph para RR.SS.
Manifest para móviles (PWA)
Desarrollada con Linux + Docker LAMP
Despliegue

Video

El proyecto fue presentado a empresas de tecnología, y se puede ver en el vídeo de la presentación del proyecto aquí:

Indicaciones de uso

Requisitos

Para ejecutar el proyecto se requiere:

Java 23 o superior
Maven
MySQL
Docker

Configuración

Actualmente la aplicación se ejecuta localmente en el puerto 8082.

Puede construirse un contenedor Docker con la imagen de la aplicación ejecutando el fichero docker.sh que hace uso de docker-compose para lanzar la aplicación y la BBDD que requiere.

Para generar un informe de cobertura de testing, se puede ejecutar el comando mvn site y acceder a él en el directorio target/site/jacoco/index.html.

Códice | Entradas sobre «api»

Accediendo a la API de Mastodon

API de Mastodon

Fetch

Mostrando las publicaciones

Pintando…

Una advertencia

El código completo

Cargando las publicaciones

Estilos

Experimenta por tu cuenta

Saber más

De Thunder a Postman

¿Qué es Bruno?

Planteamiento

Dificultades de la conversión

El script paso a paso

1. Lee el archivo de entrada

2. Extrae todas las peticiones

3. Extrae la estructura de carpetas

4. Convierte cada petición individualmente

5. Construye la colección Postman

6. Guarda el resultado

7. Muestra estadísticas

El resultado: características principales destacadas

Ejemplo de uso

Limitaciones del script

Enlaces

Recursos TIC

El proyecto

Destacados

Video

Indicaciones de uso

Requisitos

Configuración

Autores

Licencia

Enlaces