DEV Community: Kamil Kujawiński

Turn a Google Sheet Into an iPhone and Apple Watch Widget

Kamil Kujawiński — Sun, 07 Jun 2026 20:25:17 +0000

A spreadsheet is where most of us already track the small numbers of life: the home budget, the side-project revenue, the litres of fuel, the kilometres run. The annoying part is that the number only exists when you open the sheet. You can't glance at it.

This post closes that gap. With two pieces you get any Google Sheet on your iPhone home screen and Apple Watch face:

A small n8n workflow that reads your sheet, keeps only the columns you care about, computes the aggregations you ask for (total, average, per-owner breakdown…), and exposes it as a JSON webhook.
The API Widgets iOS app, which reads that webhook and renders it as a widget.

We'll build a shared household budget widget as the worked example - a donut of who's saving how much, next to a table of where the money went - but nothing in the workflow is budget-specific. Swap the sheet and the config and you have a sales dashboard, a fitness tracker, or a fuel log.

How it works

Download the workflow and import it into your n8n instance.

It's only five nodes:

Webhook - exposes the endpoint GET /webhook/sheets.
Configuration - a Code node that returns which sheet to read and what to compute.
Get row(s) in sheet - pulls every row from the Google Sheet.
Spreadsheet to JSON - keeps the configured columns and runs the aggregations.
Respond to Webhook - returns the result as JSON.

There is no caching and no database. Every call to the webhook reads the sheet live and returns the current numbers. That keeps the workflow trivial to set up - nothing to provision, no stale data to reason about. If you ever put this in front of heavy traffic, that's the point where you'd add a cache.

Step 1: the Google Sheet

Make a sheet with a header row and one row per record. For the shared-budget example, the columns are category, budget, spent, left, and owner:

In n8n, create a Google Sheets credential (OAuth2) and give it access to this sheet. The Get row(s) in sheet node uses that credential; the sheet itself is identified by its document ID - the long string in the sheet URL between /d/ and /edit. That ID isn't typed into the node directly; it comes from the Configuration node (next step), so pointing the workflow at a different sheet is a one-line change.

Step 2: where you configure it

This is the part that replaces the database in fancier setups: the Configuration node. It's a plain Code node that returns three things - the sheet to read, the columns to keep, and the aggregations to compute. Open it and edit the values:

return {
  source: "YOUR_GOOGLE_SHEET_ID",
  columns: [
    { "position": 0, "header": "category", "type": "text" },
    { "position": 1, "header": "budget",   "type": "number" },
    { "position": 2, "header": "spent",    "type": "number" },
    { "position": 3, "header": "left",     "type": "number" },
    { "position": 4, "header": "owner",    "type": "text" }
  ],
  aggregations: [
    { "name": "savings",          "group_by": "owner", "field": "left",  "agg": "sum" },
    { "name": "responsibilities", "group_by": "owner", "field": "owner", "agg": "count" }
  ]
};

source - paste your Google Sheet document ID here.
columns - the headers to keep, in order. header must match the column name in the sheet row for row.
aggregations - the summaries to compute. Each one supports sum, avg, min, max, and count. Add group_by to get a value per distinct group instead of one overall number, and name is the key it shows up under in the response.

The example asks for two numbers per person: savings (the sum of each owner's left column) and responsibilities (how many budget categories each owner is on the hook for).

Step 3: the transform

The Spreadsheet to JSON Code node reads the configuration, picks the requested columns out of every row, and runs the aggregations:

const columns = $('Configuration').first().json.columns;
const aggregations = $('Configuration').first().json.aggregations;

const items = $input.all().map((item) => {
  const row = item.json;
  const out = {};
  for (const col of columns) {
    out[col.header] = row[col.header];
  }
  return out;
});

const aggregators = {
  sum: (vals) => vals.reduce((a, b) => a + Number(b || 0), 0),
  avg: (vals) => (vals.length ? vals.reduce((a, b) => a + Number(b || 0), 0) / vals.length : 0),
  min: (vals) => (vals.length ? Math.min(...vals.map(Number)) : null),
  max: (vals) => (vals.length ? Math.max(...vals.map(Number)) : null),
  count: (vals) => vals.length,
};

const aggResult = {};
for (const agg of aggregations) {
  const fn = aggregators[agg.agg];
  const outKey = agg.name || agg.field;

  if (agg.group_by) {
    const grouped = {};
    for (const item of items) {
      const key = String(item[agg.group_by]);
      (grouped[key] ||= []).push(item[agg.field]);
    }
    const groupOut = {};
    for (const [key, vals] of Object.entries(grouped)) {
      groupOut[key] = fn(vals);
    }
    aggResult[outKey] = groupOut;
  } else {
    aggResult[outKey] = fn(items.map((i) => i[agg.field]));
  }
}

return [{ json: { items, aggregations: aggResult } }];

For the sheet above, the response looks like this:

{
  "items": [
    { "category": "Groceries",     "budget": "600", "spent": "412.5",  "left": "187.5", "owner": "Ann" },
    { "category": "Restaurants",   "budget": "200", "spent": "250",    "left": "-50",   "owner": "Ann" },
    { "category": "Transport",     "budget": "150", "spent": "92.1",   "left": "57.9",  "owner": "Robert" },
    { "category": "Utilities",     "budget": "300", "spent": "287.4",  "left": "12.6",  "owner": "Robert" },
    { "category": "Entertainment", "budget": "150", "spent": "64",     "left": "86",    "owner": "Ann" },
    { "category": "Shopping",      "budget": "200", "spent": "143.8",  "left": "56.2",  "owner": "Ann" },
    { "category": "Health",        "budget": "100", "spent": "45",     "left": "55",    "owner": "Ann" },
    { "category": "Subscriptions", "budget": "80",  "spent": "79.99",  "left": "0.01",  "owner": "Robert" },
    { "category": "Other",         "budget": "300", "spent": "156.7",  "left": "143.3", "owner": "Ann" }
  ],
  "aggregations": {
    "savings": { "Ann": 478, "Robert": 70.51 },
    "responsibilities": { "Ann": 6, "Robert": 3 }
  }
}

items is the raw table; aggregations is the computed summary. The widget can show either - the per-owner savings as a chart, or the full items table as a list. We'll use both.

Step 4: wire it up to API Widgets

Install API Widgets on your iPhone.

In the Source tab, paste the webhook URL:

https://n8n.example.com/webhook/sheets

Then switch to the Design tab. For this budget we use the Split widget type - two panes side by side, bound to two parts of the JSON:

Left column → Pie, with the Data Source expression ${api['aggregations']['savings']} - the donut of savings per owner.
Right column → Table, with the Source expression ${api['items']} - the list of categories and what was spent.

The expression language reaches straight into the JSON the workflow returns, so anything you put under items or aggregations is one expression away from being on screen.

Final result

Tap the preview (the eye icon) and you can see the finished widget right in the app before placing it - the savings donut for Ann and Robert next to the spending table:

Add it to your home screen as usual, and the same layout works on the Apple Watch face (the watch widget requires the pro version of API Widgets).

The sheet stays the single source of truth - edit a row, and the next time the widget refreshes, your wrist catches up. Swap the sheet ID and the Configuration node, and the same workflow serves any number you keep in a spreadsheet.

Originally published at digit11.com.

Search Sofascore from Your Browser's Address Bar

Kamil Kujawiński — Tue, 21 Apr 2026 21:21:18 +0000

Sofascore browser search - GIF example

I watch a lot of football and I'm constantly looking things up on Sofascore. Opening the site, clicking the magnifier, typing — it adds up. What I want is: type sofa barcelona in my address bar, hit Enter, land on the search results.

Sofascore's URL doesn't accept a ?q= parameter natively, and the search input is a React-controlled field that ignores programmatically-set values. Getting from the address bar to a live Sofascore search takes three pieces:

A browser keyword shortcut that routes sofa <query> to Sofascore with the query attached as ?q=
A Tampermonkey userscript that reads ?q= on page load and feeds it into the search box
A local typing service that actually types the query, key by key, because the React input won't accept anything less

1. Add the browser keyword

Chrome (and any Chromium browser) supports address-bar search keywords. Add one pointing at Sofascore:

Open chrome://settings/searchEngines
Click Add under "Site search"
Set:
- Name: Sofascore
- Shortcut: sofa
- URL: https://www.sofascore.com/pl/?q=%s

Firefox and Safari have equivalent settings — the important part is the %s placeholder, which the browser replaces with whatever you typed after the keyword.

Now typing sofa barcelona in the address bar navigates to https://www.sofascore.com/pl/?q=barcelona. Sofascore itself ignores the ?q=; the userscript picks it up from there.

2. Userscript: turn ?q= into a real search

Install Tampermonkey, then add this script:

// ==UserScript==
// @name         Websearch for Sofascore
// @namespace    https://digit11.com/
// @version      1.0.0
// @description  Forward ?q= search terms into Sofascore's search input via Real Type
// @author       kkujawinski
// @match        https://www.sofascore.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=sofascore.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const TYPING_SERVER_URL = 'http://localhost:8765';

    async function realType(text, options = {}) {
        const {
            delay = 2,
            focusFirst = true
        } = options;

        // Focus the current element if requested
        if (focusFirst && document.activeElement) {
            document.activeElement.focus();
        }

        // Small delay to ensure focus
        await new Promise(resolve => setTimeout(resolve, 100));

        // Send to macOS typing service
        try {
            const response = await fetch(TYPING_SERVER_URL + '/type', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text, delay })
            });

            if (!response.ok) {
                throw new Error(`Server responded with ${response.status}`);
            }

            const result = await response.json();
            console.log('Typing completed:', result);
            return result;
        } catch (error) {
            console.error('Failed to connect to typing service:', error);
            console.log('Make sure the macOS typing service is running on port 8765');
            throw error;
        }
    }


    function getQueryParam(name) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(name) || '';
    }

    const searchValue = getQueryParam('q').replace(/\/+$/, '');
    if (searchValue) {
        (async function simulateFocusClickLoop() {
            let input;
            let maxAttempts = 50;
            while (!(input = document.querySelector('input#search-input'))) {
                maxAttempts--;
                if (maxAttempts === 0) {
                    break;
                }
                await new Promise(r => setTimeout(r, 10));
            }

            maxAttempts = 100;
            while (!(document.querySelector('.z_dropdown input[type="radio"][name="all"]'))) {
                maxAttempts--;
                if (maxAttempts === 0) {
                    break;
                }
                console.log('focusing...');
                input.focus();
                input.click();
                await new Promise(r => setTimeout(r, 10));
            }
            await new Promise(r => setTimeout(r, 30));
            await realType(searchValue);
            // input.value = searchValue;
            // input.dispatchEvent(new InputEvent('input', { bubbles: true }));
        })();
    }
})();

The script:

Reads the q query parameter (with a trailing-slash guard for browsers that append one).
Polls for input#search-input to appear, then focuses and clicks it in a loop until the search dropdown (.z_dropdown input[type="radio"][name="all"]) shows up — Sofascore's signal that the input is ready to accept keystrokes.
Calls realType(searchValue), which forwards the query to a local typing server.

Why not just input.value = searchValue? That's the commented-out line at the bottom — it's what you reach for first, and it doesn't work. React's controlled-input handlers ignore the direct assignment, and dispatching a synthetic InputEvent gets filtered out too. The search input stays empty.

The typing server exists for exactly this reason. That's the last piece.

3. Real Type — typing like a real keyboard

Repo: kkujawinski/real-type-server

The AppleScript doing the work

The core is a handful of AppleScript lines driving System Events:

tell application "System Events"
    repeat with i from 1 to length of textToType
        set currentChar to character i of textToType
        keystroke currentChar
        delay charDelay
    end repeat
end tell

keystroke is the important bit. Unlike pasting or setting a field's value, it emits events indistinguishable from a real keyboard. The target app sees key-down / key-up events arriving at human pace, so input validators, focus handlers — all of it just works. Sofascore's React input included.

The standalone macos-typer.applescript file wraps this loop so you can invoke it directly:

osascript macos-typer.applescript "hello world" 50

A tiny Python server in front

To make the typer callable from a browser userscript — or a shell alias, or another machine on localhost — there's a thin Python HTTP server (osascript-typing-server.py) on port 8765. It's http.server from the stdlib, no dependencies.

It accepts one route, POST /type, reads { "text", "delay" } from the JSON body, escapes the text for AppleScript, shells out to osascript -e …, and returns a JSON status. You can call it straight from a webpage — exactly what the userscript does.

curl -X POST http://localhost:8765/type \
  -H 'Content-Type: application/json' \
  -d '{"text": "Hello, world!", "delay": 50}'

That's the whole server. The value isn't in the Python — it's in giving the AppleScript a stable local endpoint.

Autostart at login

install-autostart.sh writes a LaunchAgent plist to ~/Library/LaunchAgents/ and launchctl loads it. From then on the server boots with your user session, restarts automatically if it crashes, and logs to /tmp/osascript-typing-server.log. One-time setup: grant Accessibility permission to the Python binary the installer reports, otherwise keystroke silently no-ops.

uninstall-autostart.sh and check-status.sh handle the rest of the lifecycle.

Full source, install scripts, and the LaunchAgent plist are in the repo.

Putting it together

With the three pieces in place, the flow is:

Type sofa barcelona in the address bar, hit Enter.
Browser navigates to https://www.sofascore.com/pl/?q=barcelona.
Userscript waits for the search input to be ready, then hands the query off to the typing server.
Real Type types barcelona into the focused field at human pace.
Sofascore's search dropdown fills with live results.

The same pattern works for any site whose search resists synthetic input — swap the selector and the keyword URL, and you've got another shortcut.

Monitor Google Cloud Platform Costs on Your iPhone and Apple Watch

Kamil Kujawiński — Mon, 23 Mar 2026 18:51:37 +0000

Keep an eye on your GCP costs right from your wrist. Don't let autoscaling silently run up your bill — stay informed with a quick glance at your iPhone or Apple Watch.

Here's the plan:

Configure GCP billing export to a BigQuery table
Create an n8n workflow that queries BigQuery for cost data
Set up a widget in API Widgets to display the results

Configure GCP Billing Export to BigQuery

1. Enable the BigQuery API in GCP

2. Enable billing export to BigQuery

3. Create a service account for BigQuery access

gcloud iam service-accounts create n8n-bigquery-reader \
  --display-name="n8n BigQuery Reader" \
  --project=YOUR_PROJECT_ID

4. Assign minimal permissions

The service account needs just two roles:

bigquery.jobUser — allows running queries
bigquery.dataViewer — allows reading tables and views (read-only)

# Allow running queries and reading results
gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="serviceAccount:n8n-bigquery-reader@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
  --role="roles/bigquery.jobUser"

# Allow reading data from datasets and tables
gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
  --member="serviceAccount:n8n-bigquery-reader@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
  --role="roles/bigquery.dataViewer"

5. Generate a service account key for n8n

gcloud iam service-accounts keys create n8n-bigquery-key.json \
  --iam-account=n8n-bigquery-reader@YOUR_PROJECT_ID.iam.gserviceaccount.com

This generates a n8n-bigquery-key.json file containing the service account credentials. You'll use this file to authenticate the BigQuery node in n8n.

Set Up the n8n Workflow

The workflow exposes a webhook endpoint that API Widgets can call. When triggered, it queries BigQuery for your billing data, groups costs by date and service, and returns the results as JSON.

The workflow consists of five nodes:

Webhook — listens for incoming requests (accepts an optional days query parameter, defaults to 14)
Configure variables — sets the BigQuery table name and the number of days to query
Execute BigQuery — runs a SQL query that aggregates daily costs by service
Format data — transforms the results into a structured JSON response with daily totals and per-service breakdowns
Respond to Webhook — sends the formatted data back to the caller

You can import the workflow into your n8n instance using the JSON file: GCP Billing costs.json. Make sure to update the table_name variable in the "Configure variables" node to match your BigQuery billing export table.

Configure API Widgets

1. Download API Widgets from the App Store.

2. Create a new widget and configure the API endpoint in the Source tab, pointing it to your n8n webhook URL.

3. Set up the visualization in the Design tab.

4. Add a home screen widget and link it to the one you just created.

The widget also works on Apple Watch — view your costs at a glance from your wrist:

Using Cloudflare SSL with Elastic Beanstalk instances

Kamil Kujawiński — Sat, 04 Jan 2025 16:06:04 +0000

Motivation:

To obtain a free SSL certificate (by Let's Encrypt) for your web application without the hassle of renewing it every three months, consider the following approach.

The simplest solution is to use a Load Balancer and attach an SSL certificate from AWS Certificate Manager (ACM) to it. However, relying on a Load Balancer solely for HTTPS may be costly. To address this, I’ve outlined a much more affordable alternative that requires a bit of configuration.

Additionally, in this post, I explain how to configure SSL for an Elastic Beanstalk instance, as I found the existing documentation and available resources to be somewhat outdated.

Keyword of the solution is Cloudflare.

Cloudflare offers a proxy feature that enables you to set up a free SSL certificate while securely proxying traffic to your host.

In Flexible mode, the communication between Cloudflare and AWS is not encrypted. If you prefer end-to-end encryption, you can opt for Full mode instead.

Steps

1. Add your domain to Cloudflare.

In the DNS settings, configure your domain as proxied.
In the SSL/TLS settings, select Full (strict) mode for end-to-end encryption.

2. Generate an Origin Certificate in Cloudflare

Go to the SSL/TLS > Origin Server section in Cloudflare.
Generate a certificate valid for up to 15 years.
Use this certificate to configure SSL in AWS Elastic Beanstalk.

3. Store Certificates in AWS Secrets Manager:

Save the server.crt and server.key files as secrets in AWS Secrets Manager.
Use the following secret names: /app/ssl/server-crt and /app/ssl/server-key

4. Grant IAM Role Access to Secrets:

In AWS IAM add a new policy named ReadSSLSecretKeys for the role aws-elasticbeanstalk-ec2-role with the following permissions:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "ssm:GetParameter",
      "Resource": "arn:aws:ssm:region:account_id:parameter/app/ssl/server-crt"
    },
    {
      "Effect": "Allow",
      "Action": "ssm:GetParameter",
      "Resource": "arn:aws:ssm:region:account_id:parameter/app/ssl/server-key"
    }
  ]
}

5. Configure your Elastic Beanstalk deployment to listen on port `443` and use the Origin Certificate generated in Cloudflare (stored in AWS Secrets Manager) do changes in the following files:

.ebextensions/01_https-instance-securitygroup.config

Resources:
  sslSecurityGroupIngress:
    Type: AWS::EC2::SecurityGroupIngress
    Properties:
      GroupId: {"Fn::GetAtt" : ["AWSEBSecurityGroup", "GroupId"]}
      IpProtocol: tcp
      ToPort: 443
      FromPort: 443
      CidrIp: 0.0.0.0/0

.ebextensions/02_https-instance.config

files:
  /etc/pki/tls/certs/server.crt:
    mode: "000400"
    owner: root
    group: root
    content: |
      -----BEGIN CERTIFICATE-----
      certificate file contents
      -----END CERTIFICATE-----

  /etc/pki/tls/certs/server.key:
    mode: "000400"
    owner: root
    group: root
    content: |
      -----BEGIN RSA PRIVATE KEY-----
      private key contents # See note below.
      -----END RSA PRIVATE KEY-----

container_commands:
  01_fetch_server_crt:
    command: |
      aws ssm get-parameter --name "/app/ssl/server-crt" --with-decryption --query "Parameter.Value" --output text > /etc/pki/tls/certs/server.crt
  02_fetch_server_key:
    command: |
      aws ssm get-parameter --name "/app/ssl/server-key" --with-decryption --query "Parameter.Value" --output text > /etc/pki/tls/certs/server.key

.platform/nginx/conf.d/https.conf

server {
    listen 443 ssl;

    ssl_certificate /etc/pki/tls/certs/server.crt;
    ssl_certificate_key /etc/pki/tls/certs/server.key;

    ssl_session_timeout 5m;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    location / {
      proxy_pass http://127.0.0.1:8000;
      proxy_http_version 1.1;

      proxy_set_header Connection "";
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto https;
    }
}