Feel yourself IOS developer with 20 lines of JavaScript

In this short tutorial, we will build something like this. Being JavaScript developers. Writing very little code.

I got inspired to have this because of two reasons:

1. Saw a tweet by Tony where he used the widget to display his revenue
2. Got really frustrated checking Lost Pixel stars growth on GitHub

Turns out it's not hard to build an IOS widget if you have the tools & even basic JavaScript knowledge!

TL;DR what we are building

IOS widget to show up-to-date count of Github stars on the specific repo. In this case, I use my open-source project as an example. We will be using Scriptable - which is a tool that consumes JavaScript and spits out beautiful widgets like on the screenshot above!

Show me the code 👀

// Request
// Nothing special here, just an async request function GitHub open API
async function getGithubData() {
  const url = "https://api.github.com/repos/lost-pixel/lost-pixel";
  const request = new Request(url);
  const response = await request.loadJSON();
  return response;
}

//UI

// Function that defines the element of the widget
async function createWidget() {
  // Fetching data with the function we prepared before
  const githubData = await getGithubData();
 // Create new wdiget & set black background color
  let listwidget = new ListWidget();
  listwidget.backgroundColor = new Color("#000000");

// Create heading and style it properly
  let heading = listwidget.addText("⭐ Lost Pixel ⭐");
  heading.centerAlignText();
  heading.font = Font.lightSystemFont(25);
  heading.textColor = new Color("#fff");

// Add spacer between elements
  listwidget.addSpacer(15);

//  Create the stars display and style it properly. We use the data from API here
  let stars = listwidget.addText(githubData.stargazers_count);
  stars.centerAlignText();
  stars.font = Font.semiboldSystemFont(20);
  stars.textColor = new Color("#ffffff");

  return listWidget;
}

// Execute createWidget function that returns us the widget
let widget = await createWidget();

// Show the widget when added to IOS homescreen
if (config.runsInWidget) {
  Script.setWidget(widget);
} else {
  widget.presentMedium();
}

// finish the execution of the script
Script.complete();

Showing the widget

1. Install Scriptable for IOS on your device.

2. Create new script by clicking + button.

1. Paste the code from above into blank input.

2. Save it! Congrats you have it - now the final step is just to add the widget to your home screen. Enter wiggle mode and add the created widget using Scriptable widget.

Congrats - you have it 🎊