Bluesky को नि: शुल्क API ले मलाई मेरो शीर्ष पोष्टहरू पहिले कहिल्यै क्युरेट गर्न मद्दत गर्दछ

प्रमाणीकरण, API कलहरू, र oEmbed अन्त्य बिन्दुहरू प्रयोग गरेर तपाइँका मनपर्ने Bluesky पोस्टहरू कसरी प्रोग्राम्याटिक रूपमा ल्याउने र इम्बेड गर्ने जान्नुहोस्।

मैले भर्खरै Bluesky मा सारियो। म पहिले नै पुष्टि गर्न सक्छु कि त्यहाँ धेरै रोचक, उपयोगी, र प्रेरणादायक सामग्री संग एक जीवन्त प्राविधिक समुदाय छ। म खुसी नयाँ प्रयोगकर्ता हुँ! फलस्वरूप, म मेरो "देव राउन्डअप" मासिक न्यूजलेटर पोस्टहरूमा मेरो शीर्ष मनपर्ने Bluesky पोस्टहरू इम्बेड गर्न चाहन्छु। मेरो उद्देश्य ब्लूस्की पोष्टहरूको क्युरेट गरिएको सूची प्रदान गर्नु हो जुन विशेष गरी सफ्टवेयर विकासकर्ताहरूको लागि उपयुक्त छ।

सौभाग्य देखि, Bluesky को एपीआई प्रयोग गर्न को लागी पूर्णतया नि: शुल्क छ, भित्र सबै सामग्री मा प्रोग्रामेटिक पहुँच को अनुमति दिदै। यस ट्यूटोरियलले तपाइँलाई उनीहरूको API प्रयोग गरी मनपर्ने Bluesky पोस्टहरू पुन: प्राप्त गर्ने र इम्बेड गर्ने प्रक्रियामा लैजानेछ, व्यक्तिगत ब्लगहरू, पोर्टफोलियोहरू, वा सामग्री एकत्रीकरण परियोजनाहरूका लागि उपयुक्त।

मेरो Bluesky API कार्यप्रवाह बुझ्दै

मैले एउटा स्क्रिप्ट बनाएको छु जसले मलाई स्वचालित रूपमा मेरो ब्लुस्की पोष्टहरू मार्कडाउन ब्लग पोस्टमा इम्बेड गर्न अनुमति दिन्छ। मलाई लाग्छ कि यस लिपिमा प्रयोग गरिएका कुनै वा सबै चरणहरू धेरै प्रयोग-केसहरूको लागि मूल्यवान छन्।

मनपर्ने पोस्टहरू इम्बेडिङको लागि मेरो कार्यप्रवाह संक्षेप गर्न, हामी यी मुख्य चरणहरू पालना गर्छौं:

1. एक प्रमाणीकृत सत्र सिर्जना गर्नुहोस्
2. "अभिनेता" को लागि मनपर्ने पोस्ट URI हरू पुन: प्राप्त गर्नुहोस्
3. oEmbed एम्बेड HTML ल्याउन यी URI हरू प्रयोग गर्नुहोस्
4. सफा गर्नुहोस् र इम्बेड कोड ढाँचा गर्नुहोस्

पूर्ण कार्यान्वयन

प्रत्येक प्रकार्य र यसको उद्देश्यलाई तोडौं:

1. 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; } };

मुख्य अन्तरदृष्टि:

• यो प्रकार्यले तपाइँको Bluesky खाता प्रमाणीकरण गर्दछ।
  • नोट: यो उदाहरणले प्रमाणहरूको लागि हार्डकोड स्ट्रिङहरू, तर उत्पादन प्रयोग मामिलामा यसलाई बेवास्ता गर्नुपर्छ।
• यसले पछिल्ला एपीआई कलहरूको लागि accessJwt JWT (JSON वेब टोकन) फर्काउँछ
• Bluesky को ATP (प्रमाणीकृत स्थानान्तरण प्रोटोकल) बाट createSession अन्त्य बिन्दु प्रयोग गर्दछ।
• प्रमाणीकरण असफल भएमा त्रुटि ह्यान्डलिङले आकर्षक असफलता सुनिश्चित गर्दछ

2. मन पराइएको पोस्ट URI हरू पुन: प्राप्त गर्दै

 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; };

मुख्य अन्तरदृष्टि:

• एक प्रमाणीकृत सत्र टोकन आवश्यक छ
• मनपर्ने पोस्टहरू प्राप्त गर्न getActorLikes अन्तिम बिन्दु प्रयोग गर्दछ
• महत्त्वपूर्ण -- अन्तिम बिन्दु डोमेन https://bsky.social हुनुपर्छ, किनकि यो एक प्रमाणीकृत अनुरोध हो।
• प्रत्येक मनपर्ने पोस्टको लागि अद्वितीय URI निकाल्छ
• 40 पोष्टहरूको सीमा (कन्फिगर योग्य)

3. URI लाई एम्बेड गर्न मिल्ने 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; } };

मुख्य अन्तरदृष्टि:

• पोष्टको एम्बेड गर्न मिल्ने HTML पहुँच गर्न पोस्ट URI सँग Bluesky को oEmbed endpoint प्रयोग गर्दछ
• ऐच्छिक: HTML लाई निरन्तर रूपमा ढाँचा गर्न prettier प्रयोग गर्दछ
• ऐच्छिक: सुरक्षा र सफा इम्बेडिङका लागि <script> ट्यागहरू हटाउँछ
  • यसको कारण यो हो कि मैले Bluesky सामग्री भएको प्रत्येक पोस्टको लागि एकल Bluesky लिपि इम्बेड गरेको छु।
• लचिलो त्रुटि ह्यान्डलिंग

यो सबै सँगै राख्दै: एक पूर्ण उदाहरण

 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); } }

सम्भावित संवर्द्धनहरू

यो समाधान मेरो लागि काम गर्दछ किनकि मलाई चाहिने सबै स्थिर रूपमा उत्पन्न मासिक ब्लग पोस्ट हो।

केही सुधारहरू समावेश हुन सक्छन्:

• ४० भन्दा बढी लाइक गरिएका पोष्टहरू ल्याउनको लागि पृष्ठांकन समर्थन थप्नुहोस्
• अनावश्यक API कलहरू कम गर्न क्यासिङ लागू गर्नुहोस्
• थप बलियो त्रुटि ह्यान्डलिंग संयन्त्र सिर्जना गर्नुहोस्
• लामो चलिरहेको प्रक्रियाहरूमा प्रयोग भएमा accessJwt टोकनलाई ताजा गर्नको लागि संयन्त्र सिर्जना गर्दै
• लोकप्रियता (लाइक) द्वारा मनपर्ने पोस्टहरू क्रमबद्ध गर्दै

समस्या निवारण सुझावहरू

• तपाईंको Bluesky प्रमाणहरू सही छन् भनी प्रमाणित गर्नुहोस्
• तपाईंको प्रमाणीकरण गरिएका अनुरोधहरूमा बेयरर टोकन सही रूपमा सेट गरिएको छ भनी जाँच गर्नुहोस्।
• तपाईंले प्रयोग गरिरहनु भएको अन्तबिन्दु डोमेनहरू सबै मान्य छन् भनी प्रमाणित गर्नुहोस्।

निष्कर्ष

ब्लुस्की पोस्टहरू इम्बेडिङले तपाइँको सामाजिक मिडिया अन्तरक्रियाहरू प्रदर्शन गर्न गतिशील तरिका प्रदान गर्दछ। API कार्यप्रवाह बुझेर र बलियो त्रुटि ह्यान्डलिङ लागू गरेर, तपाइँ आकर्षक, व्यक्तिगत, र क्युरेट गरिएको सामग्री एकीकरणहरू सिर्जना गर्न सक्नुहुन्छ।

अर्को चरणहरू

1. कोडको साथ प्रयोग गर्नुहोस्
2. इम्बेड स्टाइल अनुकूलन गर्नुहोस्
3. थप Bluesky API अन्त्य बिन्दुहरू अन्वेषण गर्नुहोस्

रमाइलो र खुसी tinkering! 🚀