Perencanaan proyek

Proyek penutup jalur JavaScript adalah aplikasi catatan browser bernama Papan Catatan. Topik ini menyusun rencananya secara berurutan, dimulai dari daftar fitur yang dikerjakan dan yang sengaja ditinggalkan. Selanjutnya, rencana menetapkan arsitektur tiga lapis yang memisahkan logika dari tampilan, bentuk data yang dipakai seluruh lapisan, dan keputusan penyimpanannya. Eksekusi rencana ini dilakukan penuh pada topik Implementasi, dan pola perencanaan yang sama dapat dipakai ulang untuk ide aplikasi lain.

Fitur inti dan yang ditinggalkan#

Rencana fitur Papan Catatan dimulai dari daftar sesingkat mungkin. Nama lazim untuk daftar fitur terkecil yang membuat sebuah aplikasi sudah benar-benar dapat dipakai adalah minimum viable product (MVP). Untuk aplikasi catatan, MVP-nya berisi lima kemampuan berikut.

• menambah catatan berisi judul dan isi
• menghapus catatan lewat tombol pada tiap butirnya
• menandai catatan penting dengan bintang
• mencari catatan menurut kata kunci pada judul dan isinya
• menyimpan otomatis ke localStorage sehingga catatan bertahan setelah halaman dimuat ulang

Daftar yang dikerjakan perlu diimbangi daftar yang sengaja ditinggalkan, dan tabel berikut merangkum kedua sisi itu beserta alasannya.

Sunting catatan terasa wajar masuk daftar, padahal fitur itu berarti satu form tambahan dan satu alur data lagi untuk kemampuan yang sudah tergantikan. Dengan lima fitur inti, aplikasi tetap lengkap secara pengalaman pemakaian, sementara jumlah kode yang harus benar tetap kecil. Setiap fitur yang dikeluarkan dari rencana adalah satu kelompok error potensial yang tidak pernah perlu ditangani.

Arsitektur tiga lapis#

Seluruh kode Papan Catatan dibagi ke tiga lapis yang tanggung jawabnya tidak boleh saling menyusup. Lapisan inti memuat fungsi murni (pure function), yaitu fungsi yang hasilnya hanya ditentukan oleh masukannya dan tidak menimbulkan efek samping seperti mengubah data lama atau menyentuh halaman. Lapisan penyimpanan menjadi satu-satunya bagian yang boleh memanggil localStorage, yaitu memuat daftar catatan saat halaman dibuka dan menitipkan daftar terbaru setiap ada perubahan. Lapisan UI menggambar seluruh tampilan, dari form tambah, daftar catatan, tombol bintang dan hapus, sampai kotak pencarian, lalu memanggil fungsi inti untuk mengolah data dan lapisan penyimpanan untuk menitipkannya.

Diagram berikut merangkum ketiga lapis itu beserta arah panggilannya.

Pemisahan ini membawa satu konsekuensi yang dipakai penuh pada topik Implementasi. Karena lapisan inti tidak menyentuh DOM maupun localStorage, fungsi-fungsinya dapat diuji langsung di Node.js tanpa browser, dan cacat logika tertangkap sebelum ada tampilan yang menutupinya. Arah sebaliknya juga berlaku: lapisan UI bebas dirombak tanpa menyentuh satu pun aturan pengolahan data aplikasi.

Bentuk data dan antarmuka inti#

Seluruh lapisan inti berbicara dalam satu bentuk data yang sama, yaitu array berisi object catatan dengan lima bidang. Bentuk ini ditetapkan di awal karena setiap keputusan fungsi bergantung padanya, dan satu contoh object berikut memperlihatkan kelima bidangnya.

// Satu catatan adalah object biasa dengan lima bidang.
const catatan = {
  id: 1,
  judul: "Rapat pagi",
  isi: "Siapkan anggaran bulanan.",
  penting: false,
  dibuat: "2026-11-02T08:00:00.000Z",
};

console.log(JSON.stringify(catatan));

{"id":1,"judul":"Rapat pagi","isi":"Siapkan anggaran bulanan.","penting":false,"dibuat":"2026-11-02T08:00:00.000Z"}

Bidang id tidak diacak melainkan dihitung, yaitu id terbesar pada daftar ditambah satu. Format penghitung seperti ini deterministik, artinya hasilnya sama di lingkungan mana pun, sehingga pengujian tidak perlu menebak angka yang muncul. Bidang dibuat memakai string tanggal format ISO 8601. Pada format yang seragam, urutan alfabetis sama dengan urutan waktu, sehingga pengurutan cukup membandingkan teksnya. Bintang catatan baru juga selalu bernilai false saat diciptakan, sehingga pembalikannya sepenuhnya menjadi pekerjaan tandaiPenting.

Antarmuka fungsi inti disepakati sebagai enam fungsi berikut.

// tidak-dijalankan
// Semua fungsi menerima daftar catatan dan mengembalikan data baru.

idBaru(daftar)                          // angka id berikutnya
buatCatatan(daftar, judul, isi, waktu)  // daftar baru bertambah satu catatan
tandaiPenting(daftar, id)               // daftar baru dengan bintang terbalik
hapusCatatan(daftar, id)                // daftar baru tanpa catatan yang dituju
cariCatatan(daftar, kueri)              // daftar hasil pencarian judul dan isi
urutkan(daftar)                         // daftar tertata, penting dulu lalu terbaru

Satu aturan mengikat keenam fungsi itu, yaitu tidak ada satu pun yang mengubah daftar masukannya. Setiap fungsi mengembalikan array baru, sedangkan daftar lama tetap utuh. Aturan ini menutup keluarga bug mutasi yang muncul ketika array dan object dipakai bersama, sekaligus membuat setiap fungsi aman dipanggil berulang tanpa saling menimpa hasil.

Keputusan penyimpanan#

Untuk versi pertama ini, localStorage dipilih sebagai penyimpanan Papan Catatan. Alasannya dapat dirangkum dalam tiga hal: API-nya sinkron dan hanya terdiri atas setItem() dan getItem(), kapasitasnya sekitar lima megabita per origin sehingga ribuan catatan teks masih muat, dan tersedia di semua browser modern tanpa instalasi apa pun. Data array catatan dikemas sebagai JSON ketika ditulis dan dibongkar kembali ketika dibaca, dan seluruh aksesnya dibungkus try/catch karena lingkungan seperti mode privat dapat memblokir penyimpanan. Penyimpanannya juga sepenuhnya lokal, tanpa jaringan dan tanpa akun, sehingga aplikasi tetap hidup saat luring dan tidak ada data yang meninggalkan perangkat.

Batas localStorage juga menjadi batas rencana. Bila kelak aplikasi butuh menyimpan puluhan ribu object, mencari menurut bidang tertentu lewat index, atau bekerja luring dengan data besar, IndexedDB menjadi pilihan berikutnya karena kapasitasnya lebih luas dan operasinya asinkron. Perpindahan itu hanya menyentuh lapisan penyimpanan, karena hanya lapisan itulah yang memanggil API penyimpanan, sedangkan inti dan UI tidak berubah sama sekali. Rincian cara kerja IndexedDB dibahas pada topik Pengenalan IndexedDB.

Ringkasan#

• Rencana Papan Catatan menetapkan lima fitur inti, yaitu tambah, hapus, bintang, pencarian, dan simpan otomatis, beserta daftar fitur yang sengaja ditinggalkan.
• Arsitekturnya tiga lapis, yaitu inti berisi fungsi murni, penyimpanan sebagai satu-satunya pemakai localStorage, dan UI sebagai penggambar tampilan.
• Data intinya array object catatan dengan bidang id, judul, isi, penting, dan dibuat, dan semua fungsi inti mengembalikan data baru tanpa mengubah masukannya.
• localStorage dipilih untuk versi pertama, dan perpindahan kelak ke IndexedDB hanya menyentuh lapisan penyimpanan.

Referensi#

• Window: localStorage — MDN — dokumentasi API penyimpanan yang menjadi dasar keputusan versi pertama.
• IndexedDB API — MDN — gambaran penyimpanan tingkat lanjut ketika localStorage tidak lagi cukup.