Practice Log n Share

September 2026

@@ ++ [] [] @@ [] ++ [] ++ ++ ++ ++ @@ ++ ## ## ## [] [] [] [] [] [] [] [] []
## @@ [] [] @@ ++ [] ## @@ ++ ## [] ++ @@ ++ ++ @@ [] [] [] [] [] [] [] [] []
++ @@ ## [] ++ ## ## ## @@ ## ++ ## ## ## ++ @@ ## [] [] [] [] [] [] [] [] []
@@ ++ ## [] @@ ## @@ @@ ## ++ ++ ++ ++ ## [] ## ## [] [] [] [] [] [] [] [] []
## [] ++ @@ [] @@ @@ @@ @@ [] ## ++ ## ## @@ ++ [] [] [] [] [] [] [] [] [] []
++ [] ## ## @@ ## @@ @@ ## @@ [] ## ++ @@ @@ ++ [] [] [] [] [] [] [] [] [] []
++ ++ @@ @@ ++ ++ [] ## ## @@ [] [] @@ [] @@ ++ [] [] [] [] [] [] [] [] [] []

Gambaran umum

Mencatat latihan dengan satu ketukan, lalu menunjukkan layar yang sama kepada guru saat les. Saya merancang konsep dan desain aplikasi iPhone ini untuk latihan saksofon saya sendiri, lalu mengimplementasikannya bersama AI.

Layar pencatatan. Kisi riwayat berada di atas batang hari ini (total 54 menit) dan kartu kategori. Latihan lagu sedang berlangsung lebih dari 27 menit, ditandai warna lebih terang dan garis tepi putih. — Pencatatan di kiri, berbagi di kanan. Ketuk kategori untuk menghitung waktu, lalu tunjukkan rangkuman latihan di antara les. Layar menggunakan data fiktif sebagai ilustrasi. Tangkapan layar menampilkan antarmuka asli berbahasa Jepang.

Layar berbagi. Dari tanggal les 17 September hingga 24 September: total 4 jam 38 menit, batang per kategori, dan tabel harian yang menampilkan semua kategori tanpa menggulir horizontal. — Pencatatan di kiri, berbagi di kanan. Ketuk kategori untuk menghitung waktu, lalu tunjukkan rangkuman latihan di antara les. Layar menggunakan data fiktif sebagai ilustrasi. Tangkapan layar menampilkan antarmuka asli berbahasa Jepang.

Peran: Perencanaan, desain UX/UI, implementasi (bersama Claude Code dan Codex)
Periode: September 2026
Teknologi: React · TypeScript; Swift (WKWebView, Live Activity, StoreKit, iCloud)

Coba demo web (memuat catatan latihan pribadi saya per 20 September 2026)

Awal mula — “Bagaimana latihannya?”: saya tidak bisa menjawab

Saat les dua minggu sekali, jawaban “lebih banyak tangga nada” tidak menjelaskan apa yang saya latih dan berapa lama. Menulis jurnal kertas dengan saksofon tergantung di leher terasa sulit, sementara aplikasi pencatat waktu yang saya coba ditujukan untuk meninjau catatan sendiri.

Batang atas menunjukkan latihan harian; bingkai merah menandai tanggal les. Saat les, saya menunjukkan rangkuman latihan di antaranya. Tanggal dan durasi adalah contoh fiktif; jumlah waktu batang atas dan bawah sama.

Mencatat — Sambil memegang alat musik, cukup satu ketukan

Selama latihan, saya hanya menyentuh kartu kategori. Ketuk untuk mulai menghitung, ketuk kartu lain untuk beralih, dan ketuk kartu yang sama lagi untuk berhenti.

Satu hari — Setelah penuh, batang tetap penuh

Batang hari ini penuh setelah satu jam. Setelah itu, total saat ini menjadi ujung kanan, sehingga ruang kosong tidak muncul lagi pada batang yang sudah penuh.

Latihan hari ini — 1 jam 05 mnt

Dipilih

Ditolak

Perbandingan pada 65 menit latihan. Di atas adalah desain terpilih: total menjadi ujung kanan, dengan skala minimum satu jam. Di bawah, desain yang ditolak memperluas skala dari 60 ke 90 lalu 120 menit. Begitu melewati satu jam, ruang kosong kembali hanya pada batang bawah.

Akumulasi — Semua terlihat, sejak hari pertama

Kepekatan hijau menunjukkan latihan, bingkai merah menandai les, dan guliran horizontal dapat mencapai hari pertama pencatatan. Saya mengutamakan melihat latihan bertahun-tahun daripada meringankan proses tampilan.

Kisi riwayat. Kepekatan hijau menunjukkan banyaknya latihan dari Juni hingga September; bingkai merah menandai les dua minggu sekali. — Lima tingkat: 0 menit, kurang dari 30, kurang dari 60, kurang dari 90, dan 90 atau lebih. Akumulasi ini menjadi hal pertama yang terlihat saat membuka aplikasi.

Perkembangan — Kartu menjadi panel kendali latihan

Saya membangun layar dari spesifikasi yang disusun lewat dialog dengan AI, lalu berulang kali mencoba dan memperbaikinya sendiri. Saya mengeksplorasi pencatatan dan berbagi dalam versi web awal sebelum membuat aplikasi untuk iPhone.

Versi awal 9 September. Enam kartu kategori kecil dan total hari ini, 40 menit, berada di area terpisah pada layar pencatatan. — Versi awal dan web memakai data fiktif yang sama (enam kategori, total 40 menit hari ini). iOS 1.0 memakai data fiktif yang berbeda.

Versi web 21 September. Kategori dan waktu hari ini disatukan dalam kartu besar; pembacaan partitur selama 10 menit yang sedang berjalan ditampilkan terang. — Versi awal dan web memakai data fiktif yang sama (enam kategori, total 40 menit hari ini). iOS 1.0 memakai data fiktif yang berbeda.

Nama dan waktu, bersama: Saya menampilkan waktu hari ini secara besar pada kartu, menghubungkan apa yang dilatih dengan durasinya.
Status saat ini, sekilas: Saya hanya menerangkan kartu yang sedang dihitung waktunya dan meredupkan yang lain.
Kendali tetap di dalam layar: Guliran berhenti pada posisi saat satu baris kartu muat di layar.

Menjelang akhir, saya mengulangi siklus sekitar 15 kali: Claude Code mengajukan kemungkinan masalah, Codex memeriksa dan memperbaiki, lalu saya memutuskan perubahan yang diterima.

Rasa interaksi — Memilih cara berhenti dengan mencobanya

Instruksi kata-kata saja tidak menghasilkan rasa “bergerak mulus lalu berhenti tepat”. Bersama AI, saya membuat alat untuk mengganti metode dan nilai seketika, mencoba lima metode pada perangkat nyata, lalu memilih mekanisme snap bawaan peramban.

Model gundukan

Proyeksi titik akhir

Bawaan proximity
Dipilih

Bawaan mandatory

Tanpa snap

Posisi setelah jari dilepas dibandingkan pada skala yang sama. Garis nol putus-putus menandai snap. Dari log perangkat, saya memilih lima gestur per metode dengan kecepatan 0,6–1,8 px/ms, dihitung dari posisi selama 60 ms sebelumnya, dimulai dari yang paling dekat dengan 1,2 px/ms. Pengaturan, posisi awal, dan arah tiap gestur berbeda.

Alat penyetelan guliran. Pilihan lima metode snap dan parameternya berdampingan dengan layar ponsel untuk mencoba interaksi. — Saya membandingkan cara guliran berhenti pada perangkat nyata sambil mencatat jarak dan kecepatan. Buka gambar untuk memperbesar.

Sebagai produk — Di luar latihan

Tampilan mengikuti pengaturan perangkat. Catatan latihan disimpan di perangkat dan dicadangkan otomatis ke iCloud.

Mode terang. Layar pencatatan. Kisi riwayat berada di atas batang hari ini (total 54 menit) dan kartu kategori. Latihan lagu sedang berlangsung lebih dari 27 menit, ditandai warna lebih terang dan garis tepi putih. — Layar pencatatan yang sama dalam mode terang dan gelap.

Mode gelap. Layar pencatatan. Kisi riwayat berada di atas batang hari ini (total 54 menit) dan kartu kategori. Latihan lagu sedang berlangsung lebih dari 27 menit, ditandai warna lebih terang dan garis tepi putih. — Layar pencatatan yang sama dalam mode terang dan gelap.

Ikon pada kepala aplikasi dapat dipilih sesuai latihan: 47 musik, 15 olahraga, 15 bahasa dan belajar, 11 seni, 14 kreasi dan keseharian, serta 7 ekspresi. Saksofon diadaptasi dari Qlementine Icons (Lisensi MIT).

Saat digunakan — Pertanyaan berikutnya: seberapa rinci harus dicatat

Saya menggunakan aplikasi saat latihan pagi dan menunjukkan layarnya kepada guru saat les. Tanggapannya: isi latihan langsung terlihat, dan mencatat jenis tangga nada akan lebih bermanfaat lagi (parafrasa). Saya mempertimbangkan satu tingkat di bawah kategori agar catatan lebih rinci tanpa mengorbankan kemudahan.

Materi

Demo web memungkinkan Anda mencoba pencatatan dan berbagi. Demo memuat catatan latihan pribadi saya per 20 September 2026; perubahan hanya disimpan dalam peramban yang sedang digunakan.