Ismerje meg, hogyan lehet programozottan lekérni és beágyazni kedvelt Bluesky-bejegyzéseit hitelesítés, API-hívások és oEmbed-végpontok segítségével. Nemrég áttértem a ra. Már most megerősíthetem, hogy élénk technológiai közösség van, rengeteg érdekes, hasznos és inspiráló tartalommal. Boldog új felhasználó vagyok! Ennek eredményeként a legjobban kedvelt Bluesky-bejegyzéseimet szerettem volna beágyazni a "Fejlesztői körkép" havi hírleveleimbe. Célom, hogy a Bluesky-bejegyzések válogatott listáját biztosítsam, amely kifejezetten a szoftverfejlesztők számára készült. Bluesky- Szerencsére teljesen ingyenesen használható, lehetővé téve a programozott hozzáférést az összes tartalomhoz. Ez az oktatóanyag végigvezeti Önt a kedvelt Bluesky-bejegyzések lekérésének és beágyazásának folyamatán az API használatával, amely tökéletes személyes blogokhoz, portfóliókhoz vagy tartalom-összesítő projektekhez. a Bluesky API A Bluesky API munkafolyamat megértése Létrehoztam egy szkriptet, amely lehetővé teszi, hogy Bluesky-bejegyzéseimet automatikusan beágyazzam egy markdown blogbejegyzésbe. Úgy gondolom, hogy a szkriptben használt lépések bármelyike vagy mindegyike értékes számos felhasználási esetben. A kedvelt bejegyzések beágyazásának munkafolyamatának összefoglalásához az alábbi fő lépéseket követjük: Hozzon létre egy hitelesített munkamenetet Tetszett bejegyzés URI-k lekérése egy "színész" számára Használja ezeket az URI-kat lekéréséhez az oEmbed beágyazott HTML Tisztítsa meg és formázza a beágyazási kódot A teljes megvalósítás Nézzük meg az egyes funkciókat és azok célját: 1. Bluesky Session létrehozása 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; } }; Kulcsfontosságú betekintések: Ez a funkció hitelesíti Bluesky-fiókját. Megjegyzés: ez a példa merev kódokat tartalmaz a hitelesítő adatokhoz, de ezt kerülni kell éles felhasználási esetekben. Egy JWT-t (JSON Web Token) ad vissza a későbbi API-hívásokhoz accessJwt A végpontot használja a Bluesky ATP-jéből (Authenticated Transfer Protocol) createSession A hibakezelés kecses meghibásodást biztosít, ha a hitelesítés sikertelen 2. Tetszett bejegyzés URI-k lekérése 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; }; Kulcsfontosságú betekintések: Hitelesített munkamenet-token szükséges végpontot használja a kedvelt bejegyzések lekéréséhez A getActorLikes Fontos – a végpont tartományának https://bsky.socialnak kell lennie, mivel ez egy hitelesített kérés. Egyedi URI-kat von ki minden kedvelt bejegyzéshez Legfeljebb 40 hozzászólás (konfigurálható) 3. URI-k konvertálása beágyazható HTML-vé 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; } }; Kulcsfontosságú betekintések: használja bejegyzés URI-kkal a bejegyzés beágyazható HTML-jének eléréséhez A Bluesky oEmbed végpontját Nem kötelező: használ a HTML következetes formázásához prettier Nem kötelező: Eltávolítja címkéket a biztonság és a tiszta beágyazás érdekében <script> Ennek az az oka, hogy minden egyes Bluesky-tartalmat tartalmazó bejegyzéshez egyetlen Bluesky-szkriptet ágyazok be. Rugalmas hibakezelés Mindent összerakni: teljes példa 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); } } Lehetséges fejlesztések Ez a megoldás számomra működik, mert csak egy statikusan generált havi blogbejegyzésre van szükségem. Néhány fejlesztés a következőket foglalhatja magában: Lapozási támogatás hozzáadása több mint 40 kedvelt bejegyzés lekéréséhez A szükségtelen API-hívások csökkentése érdekében hajtsa végre a gyorsítótárazást Hozzon létre egy robusztusabb hibakezelési mechanizmust Mechanizmus létrehozása token frissítéséhez, ha hosszú futó folyamatokban használják accessJwt A kedvelt bejegyzések rendezése népszerűség szerint (lájkok) Hibaelhárítási tippek Ellenőrizze, hogy a Bluesky hitelesítő adatai helyesek Ellenőrizze, hogy a Bearer token megfelelően van-e beállítva a hitelesített kéréseken. Ellenőrizze, hogy az Ön által használt végponttartományok mindegyike érvényes-e. Következtetés A Bluesky-bejegyzések beágyazása dinamikus módot biztosít a közösségi média interakcióinak bemutatására. Az API munkafolyamatának megértésével és a robusztus hibakezelés megvalósításával vonzó, személyre szabott és válogatott tartalomintegrációkat hozhat létre. Következő lépések Kísérletezzen a kóddal Szabja testre a beágyazás stílusát Fedezzen fel további Bluesky API-végpontokat Jó szórakozást és jó bütykölést! 🚀
