जावास्क्रिप्ट में एक एक्सबार-प्लगइन लिखना
एक सप्ताहांत-परियोजना के रूप में मैं xbar के लिए एक साधारण प्लगइन लिखना चाहता था, एक एप्लिकेशन जिसे मैंने हाल ही में ठोकर खाई थी। xbar स्वयं प्रोग्रामिंग भाषा "गो" में लिखा गया है और इसकी अंतर्निहित सेवा के रूप में "वाइल्स" का उपयोग करता है ताकि डेवलपर्स मैकोज़ में मेनू बार के लिए कस्टम मेनू प्रविष्टियां लिख सकें (हां, यह वर्तमान में केवल मैकोज़ तक ही सीमित है)।
एक्सबार के बारे में अच्छी बात यह है कि यह विभिन्न प्रकार की प्रोग्रामिंग भाषाओं का समर्थन करता है, जिसमें जावास्क्रिप्ट भी शामिल है। स्वयं एक वेब डेवलपर के रूप में, इसलिए मैं यह देखना चाहता था कि एक कस्टम प्लगइन लिखना कितना आसान है जो मेरी गोपनीयता के अनुकूल विश्लेषण सेवा, Plausible.io से जुड़ता है। लक्ष्य उन सभी मौजूदा उपयोगकर्ताओं को प्रस्तुत करना है जो वर्तमान में इस वेब ऐप पर हैं। लेखन के समय, पुल अनुरोध अभी भी समीक्षा में है।
बेसिक xbar सेटअप
xbar को केवल आपके Mac पर डाउनलोड और इंस्टॉल किया जा सकता है। एक बार जब आप इसे पहली बार शुरू करते हैं, तो एक स्क्रीन जिसमें सभी डाउनलोड करने योग्य और प्रकाशित प्लगइन्स होते हैं, का उपयोग उस प्लगइन को प्राप्त करने के लिए किया जा सकता है जिसे आप चाहते हैं।
संस्थापन प्रक्रिया केवल प्लगइन के स्रोत कोड (प्रति प्लगइन एक एकल फ़ाइल) को एक विशेष फ़ोल्डर में कॉपी करती है, जिससे xbar वर्तमान में स्थापित सभी प्लगइन्स को पढ़ता है। अपना खुद का प्लगइन लिखना शुरू करने के लिए, आप बस निर्देशिका में एक फाइल बनाते हैं और हैकिंग शुरू करते हैं। साफ!
xbar फ़ाइल नाम सम्मेलन
फ़ाइल के नाम में तीन भाग होते हैं, सभी डॉट द्वारा अलग किए जाते हैं।
- आपका अद्वितीय प्लगइन नाम
- वह समय अंतराल जिसमें आपका कोड CRON-job के समान निष्पादित होता है
- सामान्य फ़ाइल प्रत्यय
plausible.1m.js
JS में xbar प्लगइन कोडिंग
अब आप कोडिंग शुरू करने के लिए तैयार हैं! पहले xbar को बताने के लिए आवश्यक शेबैंग निर्देश शामिल करें जहां नोड इंस्टेंस पाया जाना चाहिए।
#!/usr/bin/env /usr/local/bin/node
अगला भाग कुछ मेटा डेटा जोड़ रहा है। बेशक, स्थानीय विकास के लिए इसे छोड़ा जा सकता है, लेकिन यहाँ मैं प्रशंसनीय-प्लगइन के लिए उपयोग कर रहा हूँ।
// Metadata allows your plugin to show up in the app, and website.
//
// <xbar.title>Plausible Tracker</xbar.title>
// <xbar.version>v1.0</xbar.version>
// <xbar.author>Tom Schönmann</xbar.author>
// <xbar.author.github>flaming-codes</xbar.author.github>
// <xbar.desc>See who's on your site at-a-glance.</xbar.desc>
// <xbar.dependencies>node</xbar.dependencies>
// <xbar.abouturl>https://flaming.codes</xbar.abouturl>
// <xbar.image>https://raw.githubusercontent.com/flaming-codes/xbar-plausible-stats/main/plausible-icon-36-36-144.png</xbar.image>
और आपके प्लगइन को चलाने के लिए बस इतना ही आवश्यक है। अब आपके पास एक कैनवास है जहां आप शुद्ध जावास्क्रिप्ट में कोड कर सकते हैं, जिसे उपयोगकर्ता के Node.js-instance द्वारा निष्पादित किया जाता है। इसका मतलब है कि हमारे पास "https" जैसे सभी कोर नोड-पैकेज तक पहुंच है। मेरे उपयोग के मामले के लिए, यह वह सब कुछ है जो मुझे चाहिए, क्योंकि उपयोगकर्ताओं की ट्रैकिंग के लिए बस Plausible.io-API से एक लाने की आवश्यकता होती है।
कोड के निम्नलिखित टुकड़े सबसे प्रासंगिक हिस्सा दिखाते हैं जो मुझे लगता है कि बात करने लायक है। पूरा कोड संबंधित सार्वजनिक भंडार में उपलब्ध है, इस पृष्ठ के अंत में परिशिष्ट में लिंक।
// Here you see how to make network
// requests with 'https'-only.
// This is a native node-lib that
// works w/ data streams, as you'll see.
const https = require("https");
// Those have to edited by the
// user directly in the file,
// after it has been downloaded
// (aka installed)!
const SITE_ID = "";
const API_KEY = "";
// ... other code ...
async function fetcher() {
return new Promise((resolve, reject) => {
let body = "";
const request = {
host: "plausible.io",
path: `/api/v1/stats/realtime/visitors?site_id=${SITE_ID}`,
method: "GET",
headers: {
Authorization: `Bearer ${API_KEY}`,
},
};
try {
const req = https.get(request, (res) => {
res.on("data", (data) => {
body += data;
});
res.on("end", () => {
resolve(JSON.parse(body));
});
});
req.on("error", (error) => {
console.error(error);
});
req.end();
} catch (error) {
reject(error);
}
});
}
// I've implemented an array of tuples
// that hold an icon + count threshold
// when to active it.
// The first entry doesn't render a
// string (which can be direclty used),
// but rather a mapping that results in
// the following code:
//
// `image="..." font=Menlo color=white`
//
// This is a special syntax that tells
// xbar to render a base64 image w/
// a custom font and color.
//
// 'plausibleIconWhite' is just the string
// for the base64-image.
const stepIcons = [
[0, `${plausibleIconWhite} Menlo white`, "image font color"],
[5, "💫"],
[10, "⭐️"],
[50, "🌟"],
[100, "⚡️"],
[500, "💥"],
];
// Actually rendering stuff in xbar
// is super simple - just output it
// with console.log(...).
//
// As you'll see, '---' define
// separator. The first log-call
// gets rendered as acutal menu item.
const linksMenu = [
"---",
`🔮 Open dashboard | href=https://plausible.io/${SITE_ID}`,
`🔥 Made by flaming.codes | href=https://flaming.codes`,
];
function renderError(props) {
const { error } = props;
const output = [
"❔",
"---",
"No data accessible",
"Please check your user data",
...linksMenu,
];
console.log(output.join("\n"));
}
// Finally, I defined a single function
// where everything starts. This function
// just gets called to kick everyting off.
// Plain JS, it's that simple.
async function render() {
const { data, error } = await fetcher()
.then((data) => ({ data }))
.catch((error) => ({ error }));
if (data >= 0) return renderData({ data });
if (error) return renderError({ error });
}
render();
xbar के लिए कोडिंग आसान है
पूरी प्रक्रिया को पूरा करने में मुझे कुछ घंटे लगे, ज्यादातर एक्सबार से एपीआई की जांच करने के साथ-साथ स्टाइल के लिए विभिन्न कॉन्फ़िगरेशन के साथ खेलना। कुल मिलाकर, इस तरह एक साधारण प्लगइन लिखना वास्तव में बहुत अधिक प्रयास नहीं है जो करने में वास्तविक मज़ा है। यदि आपके पास कुछ अतिरिक्त घंटे हैं, तो आपको इसे भी आजमाना चाहिए!
मुझे लगता है कि एक्सबार के लिए जो सबसे ज्यादा बोलता है वह स्क्रिप्टिंग अवसर है जो यह लचीला और तेज़ विकास अनुमति देता है। आप अपने क्लाउड सेटअप या एनालिटिक्स सेवाओं के लिए कस्टम ट्रैकर्स लिख सकते हैं, ताकि सभी मेट्रिक्स macOS में आपके मेनू बार में एक नज़र में दिखाई दें। मुझे यह पसंद है!
