Dowiedz się, jak programowo pobierać i osadzać polubione posty Bluesky, korzystając z uwierzytelniania, wywołań API i punktów końcowych oEmbed. Niedawno przeszedłem na . Mogę już potwierdzić, że istnieje tam prężnie działająca społeczność technologiczna z mnóstwem interesujących, przydatnych i inspirujących treści. Jestem szczęśliwym nowym użytkownikiem! W rezultacie chciałem osadzić moje najbardziej lubiane posty Bluesky w moich miesięcznych postach w biuletynie „Dev Roundup”. Moim celem jest dostarczenie wyselekcjonowanej listy postów Bluesky, która jest specjalnie dostosowana do programistów oprogramowania. Bluesky Na szczęście jest całkowicie darmowe, co pozwala na programowy dostęp do całej zawartości. Ten samouczek przeprowadzi Cię przez proces pobierania i osadzania polubionych postów Bluesky za pomocą ich API, co jest idealne dla osobistych blogów, portfolio lub projektów agregacji treści. API Bluesky Zrozumienie mojego przepływu pracy API Bluesky Zbudowałem skrypt, który pozwala mi automatycznie osadzać moje posty Bluesky w poście blogowym w formacie Markdown. Myślę, że wszystkie lub niektóre kroki użyte w tym skrypcie są cenne w wielu przypadkach użycia. Podsumowując mój obieg pracy związany z osadzaniem polubionych postów, postępujemy zgodnie z poniższymi kluczowymi krokami: Utwórz uwierzytelnioną sesję Pobierz URI polubionych postów dla „aktora” Użyj tych URI, aby pobrać osadzony kod HTML oEmbed Wyczyść i sformatuj kod osadzania Całkowita implementacja Przyjrzyjmy się bliżej każdej funkcji i jej celowi: 1. Tworzenie sesji 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; } }; Najważniejsze informacje: Ta funkcja uwierzytelnia Twoje konto Bluesky. Uwaga: w tym przykładzie ciągi znaków dla poświadczeń są na stałe kodowane, jednak należy tego unikać w zastosowaniach produkcyjnych. Zwraca JWT (JSON Web Token) dla kolejnych wywołań API accessJwt Używa punktu końcowego z protokołu ATP (Authenticated Transfer Protocol) firmy Bluesky createSession Obsługa błędów zapewnia łagodne zakończenie awarii w przypadku niepowodzenia uwierzytelniania 2. Pobieranie URI polubionych postów 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; }; Najważniejsze informacje: Wymaga uwierzytelnionego tokena sesji Używa punktu pobierania polubionych postów getActorLikes do Ważne — domeną punktu końcowego powinna być https://bsky.social, ponieważ jest to żądanie uwierzytelnione. Wyodrębnia unikalne identyfikatory URI dla każdego polubionego posta Limity do 40 postów (konfigurowalne) 3. Konwersja URI do osadzalnego HTML 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; } }; Najważniejsze informacje: Używa z adresami URI postów w celu uzyskania dostępu do osadzalnego kodu HTML posta punktu końcowego oEmbed firmy Bluesky Opcjonalnie: Użyj , aby spójnie sformatować kod HTML prettier Opcjonalnie: usuwa znaczniki w celu zapewnienia bezpieczeństwa i czystego osadzania <script> Powodem tego jest fakt, że osadzam pojedynczy skrypt Bluesky dla każdego wpisu zawierającego treść Bluesky. Elastyczna obsługa błędów Łącząc wszystko w całość: kompletny przykład 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); } } Potencjalne ulepszenia To rozwiązanie sprawdza się w moim przypadku, ponieważ wszystko, czego potrzebuję, to statycznie generowany, miesięczny wpis na blogu. Niektóre usprawnienia mogą obejmować: Dodaj obsługę paginacji w celu pobrania ponad 40 polubionych postów Wdróż buforowanie, aby ograniczyć liczbę niepotrzebnych wywołań API Utwórz bardziej niezawodny mechanizm obsługi błędów Tworzenie mechanizmu odświeżania tokena , jeśli jest używany w długotrwałych procesach accessJwt Sortowanie polubionych postów według popularności (polubień) Porady dotyczące rozwiązywania problemów Sprawdź, czy Twoje dane uwierzytelniające Bluesky są poprawne Sprawdź, czy token nośnika jest prawidłowo ustawiany w uwierzytelnianych żądaniach. Sprawdź, czy wszystkie używane domeny punktów końcowych są prawidłowe. Wniosek Osadzanie postów Bluesky zapewnia dynamiczny sposób prezentowania interakcji w mediach społecznościowych. Dzięki zrozumieniu przepływu pracy API i wdrożeniu solidnej obsługi błędów możesz tworzyć angażujące, spersonalizowane i starannie dobrane integracje treści. Następne kroki Eksperymentuj z kodem Dostosuj styl osadzania Poznaj dodatkowe punkty końcowe interfejsu API Bluesky Miłej zabawy i udanego majsterkowania! 🚀
