API Gratis Bluesky Membantu Saya Menyusun Postingan Terbaik Saya Seperti Sebelumnya

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 Bluesky . 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.

Untungnya, API Bluesky 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.

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:

1. Buat sesi yang diautentikasi
2. Ambil URI postingan yang disukai untuk "aktor"
3. Gunakan URI ini untuk mengambil HTML sematan oEmbed
4. 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 accessJwt JWT (JSON Web Token) untuk panggilan API berikutnya
• Menggunakan titik akhir createSession dari ATP (Authenticated Transfer Protocol) Bluesky
• 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 titik akhir getActorLikes untuk mengambil postingan yang disukai
• 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 titik akhir oEmbed Bluesky dengan URI posting untuk mengakses HTML yang dapat disematkan pada posting
• Opsional: Memanfaatkan prettier untuk memformat HTML secara konsisten
• Opsional: Menghapus tag <script> demi keamanan dan penyematan yang bersih
  • 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 accessJwt jika digunakan dalam proses yang berjalan lama
• 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

1. Bereksperimen dengan kode
2. Sesuaikan gaya sematan
3. Jelajahi titik akhir API Bluesky tambahan

Selamat menikmati dan mengutak-atik! 🚀