Pelajari cara mengambil dan menyematkan postingan Bluesky yang Anda sukai secara terprogram menggunakan autentikasi, panggilan API, dan titik akhir oEmbed. Saya baru saja pindah ke . Saya sudah dapat memastikan bahwa ada komunitas teknologi yang aktif di sana dengan banyak konten yang menarik, bermanfaat, dan menginspirasi. Saya pengguna baru yang bahagia! Oleh karena itu, saya ingin menyematkan postingan Bluesky yang paling saya sukai di postingan buletin bulanan "Ringkasan pengembang" saya. Tujuan saya adalah menyediakan daftar postingan Bluesky yang dikurasi secara khusus untuk Pengembang Perangkat Lunak. Bluesky Untungnya, sepenuhnya gratis untuk digunakan, yang memungkinkan akses terprogram ke semua konten di dalamnya. Tutorial ini akan memandu Anda melalui proses pengambilan dan penyematan posting Bluesky yang disukai menggunakan API mereka, cocok untuk blog pribadi, portofolio, atau proyek agregasi konten. API Bluesky Memahami Alur Kerja API Bluesky saya Saya telah membuat skrip yang memungkinkan saya untuk secara otomatis menyematkan posting Bluesky saya di posting blog markdown. Saya pikir semua atau sebagian langkah yang digunakan dalam skrip ini berguna untuk banyak kasus penggunaan. Untuk meringkas alur kerja saya dalam menyematkan postingan yang disukai, kami mengikuti langkah-langkah utama berikut: Buat sesi yang diautentikasi Ambil URI postingan yang disukai untuk "aktor" Gunakan URI ini untuk mengambil HTML sematan oEmbed Bersihkan dan format kode sematan Implementasi Lengkap Mari kita uraikan setiap fungsi dan tujuannya: 1. Membuat Sesi 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; } }; Wawasan Utama: Fungsi ini mengautentikasi akun Bluesky Anda. Catatan: contoh ini mengkodekan string secara permanen untuk kredensial, tetapi ini harus dihindari dalam kasus penggunaan produksi. Ini mengembalikan JWT (JSON Web Token) untuk panggilan API berikutnya accessJwt Menggunakan titik akhir dari ATP (Authenticated Transfer Protocol) Bluesky createSession Penanganan kesalahan memastikan kegagalan yang baik jika autentikasi gagal 2. Mengambil URI Postingan yang Disukai 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; }; Wawasan Utama: Memerlukan token sesi yang diautentikasi Menggunakan akhir untuk mengambil postingan yang disukai titik getActorLikes Penting -- domain titik akhir harus https://bsky.social, karena ini adalah permintaan yang diautentikasi. Mengekstrak URI unik untuk setiap postingan yang disukai Batasan hingga 40 postingan (dapat dikonfigurasi) 3. Mengonversi URI ke HTML yang Dapat Disematkan 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; } }; Wawasan Utama: Menggunakan dengan URI posting untuk mengakses HTML yang dapat disematkan pada posting titik akhir oEmbed Bluesky Opsional: Memanfaatkan untuk memformat HTML secara konsisten prettier Opsional: Menghapus tag demi keamanan dan penyematan yang bersih <script> Alasannya adalah karena saya menanamkan satu skrip Bluesky untuk setiap postingan yang berisi konten Bluesky. Penanganan kesalahan yang fleksibel Menyatukan Semuanya: Contoh Lengkap 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); } } Potensi Peningkatan Solusi ini cocok bagi saya karena yang saya perlukan hanyalah postingan blog bulanan yang dibuat secara statis. Beberapa perbaikan yang dapat dilakukan antara lain: Tambahkan dukungan pagination untuk mengambil lebih dari 40 postingan yang disukai Terapkan caching untuk mengurangi panggilan API yang tidak perlu Buat mekanisme penanganan kesalahan yang lebih kuat Membuat mekanisme untuk menyegarkan token jika digunakan dalam proses yang berjalan lama accessJwt Mengurutkan postingan yang disukai berdasarkan popularitas (suka) Tips Pemecahan Masalah Verifikasi apakah kredensial Bluesky Anda sudah benar Periksa apakah token Bearer telah ditetapkan dengan benar pada permintaan Anda yang diautentikasi. Verifikasi bahwa domain titik akhir yang Anda gunakan semuanya valid. Kesimpulan Penyematan posting Bluesky menyediakan cara dinamis untuk memamerkan interaksi media sosial Anda. Dengan memahami alur kerja API dan menerapkan penanganan kesalahan yang kuat, Anda dapat membuat integrasi konten yang menarik, dipersonalisasi, dan terkurasi. Langkah Berikutnya Bereksperimen dengan kode Sesuaikan gaya sematan Jelajahi titik akhir API Bluesky tambahan Selamat menikmati dan mengutak-atik! 🚀
