Javascript'te bir xbar eklentisi yazma
Bir hafta sonu projesi olarak xbar için basit bir eklenti yazmak istedim, geçenlerde rastladığım bir uygulama. xbar'ın kendisi "Go" programlama dilinde yazılmıştır ve geliştiricilerin macOS'ta menü çubuğu için özel menü girişleri yazmasını sağlamak için temel hizmeti olarak "Wails"i kullanır (evet, şu anda yalnızca macOS ile sınırlıdır).
xbar'ın güzel yanı, Javascript'i de içeren çok çeşitli programlama dillerini desteklemesidir. Ben de bir web geliştiricisi olarak, gizlilik dostu analitik hizmetim olan Plausible.io'ya bağlanan özel bir eklenti yazmanın ne kadar kolay olduğunu görmek istedim. Amaç, şu anda bu web uygulamasında bulunan tüm mevcut kullanıcıları oluşturmaktır. Yazılı olarak, çekme isteği hala incelemede.
Temel xbar kurulumu
xbar, Mac'inize indirilebilir ve yüklenebilir. İlk kez başlattığınızda, sahip olmak istediğiniz eklentiyi elde etmek için tüm indirilebilir ve yayınlanmış eklentileri içeren bir ekran kullanılabilir.
Yükleme işlemi, eklentinin kaynak kodunu (eklenti başına tek bir dosya), xbar'ın şu anda yüklü olan tüm eklentileri okuduğu özel bir klasöre kopyalar. Kendi eklentinizi yazmaya başlamak için dizinde bir dosya oluşturmanız ve hacklemeye başlamanız yeterlidir. Düzenli!
xbar dosya adı kuralı
Dosyanın adı, tümü nokta ile ayrılmış üç bölümden oluşur.
- benzersiz eklenti adınız
- CRON işine benzer şekilde kodunuzun yürütüldüğü zaman aralığı
- ortak dosya soneki
plausible.1m.js
JS'de bir xbar eklentisi kodlama
Artık kodlamaya başlamak için hazırsınız! İlk önce, düğüm örneğinin nerede bulunması gerektiğini xbar'a söylemek için gerekli Shebang yönergesini ekleyin.
#!/usr/bin/env /usr/local/bin/node
Bir sonraki kısım daha sonra bazı meta verileri eklemektir. Tabii ki, yerel geliştirme için bu atlanabilir, ancak burada makul eklenti için kullanıyorum.
// 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>
Eklentinizin çalışması için gereken tek şey bu. Artık, kullanıcının Node.js örneği tarafından yürütülen saf Javascript ile kod yazabileceğiniz bir tuvaliniz var. Bu, "https" gibi tüm temel Düğüm paketlerine erişimimiz olduğu anlamına gelir. Benim kullanım durumum için, kullanıcıların takibi sadece Plausible.io-API'den bir getirme gerektirdiğinden, ihtiyacım olan her şey bu.
Aşağıdaki kod parçaları, bahsetmeye değer olduğunu düşündüğüm en alakalı kısmı göstermektedir. Kodun tamamı ilgili halka açık depoda mevcuttur, bağlantı bu sayfanın sonundaki ektedir.
// 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 için kodlama kolaydır
Tüm sürecin tamamlanması birkaç saatimi aldı, çoğunlukla xbar'dan API'yi kontrol etmenin yanı sıra stil için farklı konfigürasyonlarla uğraştım. Sonuç olarak, bunun gibi basit bir eklenti yazmak gerçekten eğlenceli olacak kadar fazla bir çaba değil. Boş saatleriniz varsa, siz de denemelisiniz!
Bence xbar için en çok konuşulan şey, bu esnek ve hızlı geliştirmenin izin verdiği komut dosyası oluşturma fırsatı. Bulut kurulumlarınız veya analiz hizmetleriniz için özel izleyiciler yazabilir, böylece metriklerin tümünün macOS'taki menü çubuğunuzda bir bakışta görülebilmesini sağlayabilirsiniz. Beğendim!
