Skryf 'n xbar -inprop vir Plausible.io

Hoe ek 'n JS-inprop vir die xbar-app geskryf het om die huidige aantal besoekers te sien

Skryf 'n xbar-inprop in Javascript

As 'n naweek-projek wou ek 'n eenvoudige inprop vir xbar skryf, 'n toepassing wat ek onlangs gestruikel het. xbar self is in die programmeertaal "Go" geskryf en gebruik "Wails" as die onderliggende diens om ontwikkelaars in staat te stel om persoonlike spyskaartinskrywings vir die menubalk in macOS te skryf (ja, dit is tans slegs beperk tot macOS).

Die goeie ding van xbar is dat dit 'n wye verskeidenheid programmeertale ondersteun, wat ook Javascript insluit. As 'n webontwikkelaar wou ek dus sien hoe maklik dit is om 'n pasgemaakte inprop te skryf wat aansluit by Plausible.io, my privaatheidsvriendelike ontledingsdiens. Die doel is om alle huidige gebruikers wat tans op hierdie webprogram is, weer te gee. Met die skryf hiervan word die trekversoek nog hersien.

Image 52d29c4414ce

Image 67e4f6e5107d

Basiese xbar -opstelling

xbar kan eenvoudig op u Mac afgelaai en geïnstalleer word. Sodra u dit vir die eerste keer begin het, kan 'n skerm met alle aflaaibare en gepubliseerde inproppe gebruik word om die inprop te kry wat u wil hê.

Die installeringsproses kopieer die bronkode van die inprop ('n enkele lêer per inprop) na 'n spesiale gids, waaruit xbar alle tans geïnstalleerde inproppe lees. Om u eie inprop te begin skryf, skep u eenvoudig 'n lêer in die gids en begin uithack. Netjies!

xbar lêernaamkonvensie

Die lêernaam bestaan uit drie dele, almal geskei deur 'n punt.

  • u unieke inpropnaam
  • die tydsinterval waarin u kode uitgevoer word, soortgelyk aan 'n CRON-taak
  • die algemene lêer agtervoegsel
plausible.1m.js

Kodering van 'n xbar -inprop in JS

Nou is u gereed om te begin kodeer! Sluit eers die vereiste shebang -opdrag in om xbar te vertel waar die node -instansie gevind moet word.

#!/usr/bin/env /usr/local/bin/node

Die volgende deel voeg dan 'n paar metadata by. Dit kan natuurlik vir plaaslike ontwikkeling weggelaat word, maar dit is wat ek gebruik vir die Plausible-inprop.

// 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>

En dit is al wat nodig is om u inprop te laat werk. Nou het u 'n doek waar u in suiwer Javascript kan kodeer, uitgevoer deur die gebruiker se Node.js-instansie. Dit beteken dat ons toegang het tot alle kernknooppakkette, soos “https”. Vir my gebruiksgeval is dit alles wat ek nodig het, aangesien die opsporing van gebruikers eenvoudig 'n opgawe van die Plausible.io-API vereis.

Die volgende stukke kode toon die mees relevante deel waarvan ek dink dit die moeite werd is om oor te praat. Die volledige kode is beskikbaar in die verwante openbare bewaarplek, 'n skakel in die bylae aan die einde van hierdie bladsy.

// 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();

Kodering vir xbar is maklik

Die hele proses het my 'n paar uur geneem om te voltooi, meestal het ek die API van xbar nagegaan, en ek het met verskillende konfigurasies vir styling gekyk. Al met al is dit regtig nie veel moeite om 'n eenvoudige inprop soos hierdie te skryf nie. As u 'n paar ure het, moet u dit ook probeer!

Ek dink wat die meeste vir xbar spreek, is die skripgeleentheid wat hierdie buigsame en vinnige ontwikkeling moontlik maak. U kan pasgemaakte spoorsnyers vir u wolkopstellings of ontledingsdienste skryf, sodat die statistieke almal in 'n oogopslag sigbaar is in u menubalk in macOS. Ek hou daarvan!