Scriptable 101: Bikin Widget iPhone Pertamamu dengan JavaScript

Di artikel sebelumnya aku cerita soal sistem keuangan yang aku bangun sendiri di iPhone. Semua widget di sistem itu dibikin pakai satu aplikasi gratis bernama Scriptable. Artikel ini fondasinya: dari install sampai widget pertamamu beneran nempel di home screen.

Nggak perlu jago. Kalau kamu paham variabel, function, dan pernah lihat JavaScript, kamu bisa ngikutin. Kalau belum pernah ngoding sama sekali juga tetap bisa, tinggal salin kodenya dan ubah bagian yang aku tandai.

Apa itu Scriptable?

Scriptable adalah aplikasi iOS gratis yang membiarkan kamu menulis script JavaScript yang bisa mengakses fitur native iPhone: bikin widget, baca file di iCloud, munculin notifikasi, fetch API, sampai kirim data ke aplikasi lain.

Bedanya sama aplikasi widget template (Widgetsmith, Top Widget, dsb.): di sana kamu milih dari desain yang disediakan, di Scriptable kamu yang nentuin semuanya. Mau widget yang ngambil data dari API cuaca terus ngasih verdict "hari ini naik sepeda atau TJ"? Bisa. Widget template mana pun nggak akan punya itu.

Langkah 0: Install

Download Scriptable di App Store. Gratis, nggak ada iklan, nggak ada langganan.

Buka aplikasinya, kamu bakal lihat beberapa contoh script bawaan. Tiap script adalah satu file JavaScript yang bisa dijalanin sendiri-sendiri.

Langkah 1: Widget pertamamu

Tap tombol + di kanan atas, terus salin kode ini:

// Widget pertamaku 🎉
const widget = new ListWidget();
widget.backgroundColor = new Color("#1e293b");

const salam = widget.addText("Halo, dunia! 👋");
salam.font = Font.boldSystemFont(18);
salam.textColor = Color.white();

widget.addSpacer(6);

const tanggal = widget.addText(
  new Date().toLocaleDateString("id-ID", {
    weekday: "long", day: "numeric", month: "long"
  })
);
tanggal.font = Font.systemFont(13);
tanggal.textColor = new Color("#94a3b8");

Script.setWidget(widget);
widget.presentSmall();
Script.complete();

Tap tombol ▶ di kanan bawah. Kalau muncul preview widget kecil dengan tulisan "Halo, dunia!" dan tanggal hari ini, selamat, kamu barusan bikin widget iPhone 🎉

Kasih nama script-nya (tap judul di atas), misalnya widget-pertama.

Langkah 2: Pahami kodenya

Biar nggak cuma salin tempel, ini yang terjadi baris per baris:

new ListWidget() bikin "kanvas" widget kosong. Semua elemen ditambahkan ke objek ini.

widget.addText("...") menambahkan teks, dan mengembalikan objek teks yang bisa kamu atur font-nya dan textColor-nya. Font pakai Font.boldSystemFont(18) (angkanya ukuran), warna pakai new Color("#hexcode").

widget.addSpacer(6) memberi jarak 6 poin. Kalau dipanggil tanpa angka, addSpacer(), dia jadi "pegas" yang mendorong elemen sejauh mungkin. Berguna banget buat layout.

Script.setWidget(widget) mendaftarkan widget ini ke iOS (dipakai saat jalan beneran di home screen), sementara widget.presentSmall() menampilkan preview pas kamu jalanin dari dalam aplikasi. Ada juga presentMedium() dan presentLarge().

Langkah 3: Pasang di home screen

1. Long press home screen sampai icon-icon goyang
2. Tap + di pojok kiri atas, cari Scriptable
3. Pilih ukuran Small, tap Add Widget
4. Long press widget yang baru muncul, pilih Edit Widget
5. Di bagian Script, pilih widget-pertama

Selesai. Widget-mu sekarang hidup di home screen.

Langkah 4: Naik level, bikin countdown

Karena kamu udah sampai sini, sekalian bikin yang lebih berguna: countdown menuju tanggal tertentu. Ganti tanggal target sesuai kebutuhanmu (gajian, ulang tahun, deadline, liburan).

// === GANTI BAGIAN INI ===
const NAMA_EVENT = "Liburan ke Bali 🏖️";
const TANGGAL_TARGET = new Date(2026, 11, 20); // (tahun, bulan-1, tanggal). 11 = Desember!
// ========================

const hariIni = new Date();
const awalHariIni = new Date(
  hariIni.getFullYear(), hariIni.getMonth(), hariIni.getDate()
);
const sisaHari = Math.ceil(
  (TANGGAL_TARGET - awalHariIni) / (1000 * 60 * 60 * 24)
);

const widget = new ListWidget();

// Gradient biar nggak polos
const gradient = new LinearGradient();
gradient.colors = [new Color("#0f172a"), new Color("#1e293b")];
gradient.locations = [0, 1];
widget.backgroundGradient = gradient;

const judul = widget.addText(NAMA_EVENT.toUpperCase());
judul.font = Font.semiboldSystemFont(11);
judul.textColor = new Color("#94a3b8");

widget.addSpacer();

const angka = widget.addText(String(sisaHari));
angka.font = Font.boldSystemFont(42);
angka.textColor = new Color("#10b981");

const label = widget.addText("hari lagi");
label.font = Font.systemFont(13);
label.textColor = new Color("#94a3b8");

widget.addSpacer();

// Minta refresh tiap tengah malam biar angkanya update
const besok = new Date(awalHariIni);
besok.setDate(besok.getDate() + 1);
widget.refreshAfterDate = besok;

Script.setWidget(widget);
widget.presentSmall();
Script.complete();

Perhatikan satu jebakan klasik JavaScript di situ: bulan di new Date() dihitung dari 0. Januari itu 0, Desember itu 11. Semua orang pernah kejebak ini, minimal sekali 😄

Tiga hal yang perlu kamu tahu soal widget iOS

Widget bukan aplikasi mini. Dia snapshot yang dirender ulang secara berkala. Nggak bisa ada tombol atau input di dalamnya (tap widget cuma bisa membuka satu hal).

Jadwal refresh dikontrol iOS. refreshAfterDate itu permintaan, bukan perintah. iOS yang memutuskan kapan beneran refresh, biasanya tiap beberapa menit sampai jam. Buat countdown harian sih lebih dari cukup.

Debug-nya di dalam aplikasi. Kalau widget nggak muncul sesuai harapan, jalanin script-nya dari dalam Scriptable. Error bakal kelihatan jelas, dan kamu bisa pakai console.log() buat ngintip nilai variabel.

Selanjutnya

Kamu sekarang punya semua dasar yang dibutuhkan: bikin widget, styling, layout, dan refresh. Di tutorial berikutnya kita gabungkan semuanya jadi widget yang beneran aku pakai tiap hari: countdown gajian + sisa budget jajan dengan progress bar (coming soon).

Kalau ada yang error atau bingung di langkah mana pun, kabarin aku. Aku baca semuanya.