paint-brush
La API gratuita de Bluesky me ayuda a organizar mis publicaciones más destacadas como nunca antespor@noahm
Nueva Historia

La API gratuita de Bluesky me ayuda a organizar mis publicaciones más destacadas como nunca antes

por Noah5m2024/12/17
Read on Terminal Reader

Demasiado Largo; Para Leer

Aprenda a obtener e incrustar de manera programada sus publicaciones de Bluesky favoritas mediante autenticación, llamadas API y puntos finales oEmbed.
featured image - La API gratuita de Bluesky me ayuda a organizar mis publicaciones más destacadas como nunca antes
Noah HackerNoon profile picture

Aprenda a obtener e incrustar de manera programada sus publicaciones de Bluesky favoritas mediante autenticación, llamadas API y puntos finales oEmbed.


Hace poco me pasé a Bluesky . Ya puedo confirmar que existe una comunidad tecnológica vibrante allí con toneladas de contenido interesante, útil e inspirador. ¡Soy un nuevo usuario feliz! Como resultado, he querido incorporar mis publicaciones favoritas de Bluesky en las publicaciones de mi boletín mensual "Resumen de desarrolladores". Mi objetivo es proporcionar una lista seleccionada de publicaciones de Bluesky que esté diseñada específicamente para desarrolladores de software.


Afortunadamente, la API de Bluesky es completamente gratuita, lo que permite el acceso programático a todo el contenido. Este tutorial te guiará a través del proceso de recuperación e incorporación de publicaciones de Bluesky que te gusten mediante su API, lo que resulta perfecto para blogs personales, portafolios o proyectos de agregación de contenido.

Comprender el flujo de trabajo de la API de Bluesky

He creado un script que me permite insertar automáticamente mis publicaciones de Bluesky en una publicación de blog en formato Markdown. Creo que cualquiera o todos los pasos utilizados en este script son valiosos para muchos casos de uso.


Para resumir mi flujo de trabajo para insertar publicaciones que me gustan, seguimos estos pasos clave:

  1. Crear una sesión autenticada
  2. Recuperar las URL de las publicaciones que me gustaron de un "actor"
  3. Utilice estas URI para obtener HTML incrustado de oEmbed
  4. Limpiar y formatear el código de inserción


La implementación completa

Analicemos cada función y su propósito:

1. Creación de una sesión Bluesky

 export const createSession = async (): Promise<string | null> => { try { const response = await fetch( "https://bsky.social/xrpc/com.atproto.server.createSession", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ identifier: "your-handle", password: "your-password", }), } ); const responseJson = await response.json(); return responseJson.accessJwt; } catch (e) { console.error("Failed to create session: ", e); return null; } };


Ideas clave:

  • Esta función autentica su cuenta Bluesky.
    • Nota: este ejemplo codifica cadenas para credenciales, pero esto debe evitarse en casos de uso de producción.
  • Devuelve un JWT (JSON Web Token) accessJwt para llamadas API posteriores
  • Utiliza el punto final createSession del ATP (Protocolo de transferencia autenticado) de Bluesky
  • El manejo de errores garantiza un fallo sin problemas si falla la autenticación

2. Recuperación de las URL de publicaciones que me gustan

 export const getBlueskyLikeUris = async (actor: string, limit: number = 40) => { const token = await createSession(); if (!token) { console.error("Failed to get token"); return; } const response = await fetch( "https://bsky.social/xrpc/app.bsky.feed.getActorLikes?actor=${actor}&limit=${limit}", { method: "GET", headers: { Authorization: `Bearer ${token}`, }, } ); const responseJson = await response.json(); const uris = responseJson.feed.map((entry: any) => entry.post.uri); return uris; };


Ideas clave:

  • Requiere un token de sesión autenticado
  • Utiliza el punto final getActorLikes para obtener las publicaciones que le gustan
  • Importante: el dominio del punto final debe ser https://bsky.social, ya que esta es una solicitud autenticada.
  • Extrae URL únicas para cada publicación que te gusta
  • Límite de 40 publicaciones (configurable)

3. Conversión de URI a HTML integrable

 export const getBlueskyPostEmbedMarkup = async (uri: string) => { try { const response = await fetch(`https://embed.bsky.app/oembed?url=${uri}`); const responseJson = await response.json(); const formattedHTML = prettier.format(responseJson.html, { parser: "html", plugins: [require("prettier/parser-html")], htmlWhitespaceSensitivity: "ignore", printWidth: 1000, }); return formattedHTML.replace(/<script[\s\S]*?<\/script>/g, ""); } catch (e) { console.error("Failed to get Bluesky post embed markup"); return null; } };


Ideas clave:

  • Utiliza el punto final oEmbed de Bluesky con las URI de publicaciones para acceder al HTML integrable de una publicación
  • Opcional: utiliza prettier para formatear el HTML de manera uniforme
  • Opcional: elimina las etiquetas <script> por razones de seguridad y limpieza de la incrustación
    • La razón de esto es que inserto un único script de Bluesky para cada publicación que contiene contenido de Bluesky.
  • Manejo flexible de errores

Poniéndolo todo junto: un ejemplo completo

 async function embedLikedPosts() { try { // Get liked post URIs const likedPostUris = await getBlueskyLikeUris(); if (!likedPostUris) { console.error("No liked posts found"); return; } // Convert URIs to embed HTML const embedPromises = likedPostUris.map(getBlueskyPostEmbedMarkup); const embedHtmlArray = await Promise.all(embedPromises); // Filter out any failed embeds const validEmbeds = embedHtmlArray.filter(embed => embed !== null); // Return the markup for all liked posts return ` ## Some Fave Posts 🦋 ${validEmbeds.join(`\n\n`)} ` } catch (error) { console.error("Error embedding Bluesky posts:", error); } }

Mejoras potenciales

Esta solución funciona para mí porque todo lo que necesito es una publicación de blog generada estáticamente mensualmente.


Algunas mejoras podrían incluir:

  • Agregue soporte de paginación para obtener más de 40 publicaciones con me gusta
  • Implementar el almacenamiento en caché para reducir llamadas API innecesarias
  • Crear un mecanismo de gestión de errores más robusto
  • Creación de un mecanismo para actualizar el token accessJwt si se utiliza en procesos de larga ejecución
  • Ordenar las publicaciones que me gustan por popularidad (me gusta)

Consejos para la solución de problemas

  • Verifique que sus credenciales de Bluesky sean correctas
  • Verifique que el token Bearer se esté configurando correctamente en sus solicitudes autenticadas.
  • Verifique que los dominios de punto final que está utilizando sean todos válidos.

Conclusión

La incorporación de publicaciones de Bluesky proporciona una forma dinámica de mostrar sus interacciones en las redes sociales. Si comprende el flujo de trabajo de la API e implementa un manejo sólido de errores, puede crear integraciones de contenido atractivas, personalizadas y seleccionadas.

Próximos pasos

  1. Experimenta con el código
  2. Personalizar el estilo de incrustación
  3. Explorar puntos finales adicionales de la API de Bluesky


¡Que lo disfrutes y que disfrutes haciendo experimentos! 🚀