7 Hal Baik Sebelum Memulai Project Web

Dalam pengembangan project IT sering kali kita dihadapkan pada kondisi dimana diharuskan untuk melakukan perubahan pada seluruh halaman UI atau controller.
Perubahan yang umum terjadi biasanya seputar :

- Pengecekan session
- Pengecekan user privileges
- Perubahan message info / error
- Perubahan layout, dll

Hal tersebut bukan tidak mungkin dilakukan satu per satu, tapi membutuhkan waktu yang lama dan rawan terjadi human error karena ada halaman atau controller yang terlewat untuk diupdate.

Untuk mengatasi hal tersebut, saya ingin berbagi catatan pribadi mengenai hal apa saja yang sebaiknya dilakukan sebelum memulai project baru.
Beberapa hal tersebut saya bagi menjadi 2 bagian yaitu front end mulai nomor 1–3 dan back end untuk point sisanya

1.) Membuat fungsi global untuk memanggil API

Saat kita ingin memanggil API dari back end biasanya kita menggunakan fungsi semacam $.ajax() atau $http.post() di vue, dll.
Sebelum memanggil fungsi tersebut sebaiknya kita buat fungsi global dengan parameter yang dibutuhkan seperti url, param, fungsi on success, fungsi on failed.

Tujuannya jika kita ingin melakukan perubahan maka kita hanya cukup mengubah di 1 tempat.
Berikut beberapa hal yang bisa kita tambahkan di fungsi global ini:
1. redirect ke halaman login jika session expired
2. penambahan html script checker apabila input mengandung html script maka return error

Sebagai contoh jika kita ingin menambahkan pengecekan session pada fungsi ajaxPost maka kita cukup menambahkan script sebelum callbackOK() :

Contoh pemanggilan fungsi ajaxPost() di suatu halaman :

2.) Membuat fungsi global untuk category message

Suatu message baik itu error / info bisa digenerate melalui back end maupun langsung dari front end seperti password tidak match, konfirmasi delete atau lainnya.

Tujuannya jika ada perubahan tata bahasa (wording) suatu message maka kita hanya mengubah nya di 1 kategori message.
Beberapa hal yang menyebabkan perubahan wording :
1. Belum ada requirement yang jelas, sehingga developer menyiapkan wording yang sekiranya tepat
2. Project Manager merasa wording nya kurang pas, setelah diganti seminggu kemudian client bilang yang kemaren udah bener, kita sebagai developer hanya bisa pasrah menghadapi situasi seperti ini
3. Kesalahan di developer sendiri, misal entah galau atau gimana sehingga salah menulis pesan “Are you sure? you want to delete someone from your memory ?” #backsound Armada — Asal Kau Bahagia

3.) Membuat sample layout untuk beberapa form

Tujuannya untuk menyeragamkan desain halaman dengan basic layout yang mirip. Sehingga ketika seorang developer, misal, ingin membuat form wizard tinggal memilih form wizard mana yang ingin dipakai

4.) Membuat standarisasi object Result

Result yang dikembalikan dari back end sebaiknya menggunakan struktur data yang sama agar memudahkan tim UI untuk melakukan standarisasi.
Komponen utama dari suatu result adalah data, flag error / success, message.
Berikut contoh object result beserta para method nya yang diambil dari toolkit dengan sedikit modifikasi

5.) Membuat fungsi global untuk check session / user privileges

Sebelum mengeksekusi semua logic di back end sebaiknya kita lakukan pengecekan session terlebih dahulu.
Fungsi ini dibuat global supaya ketika ada perubahan struktur data kita cukup mengubah di 1 tempat.
Sebagai contoh fungsi di bawah ini menggunakan knot untuk menyimpan session, acl untuk mengecek apakah session valid atau tidak, dan result info untuk menyimpan default data jika session invalid:

6.) Membuat fungsi untuk generate message

Sama seperti point no. 2 di bagian front end, fungsi seperti ini bertujuan agar kita mempunyai standarisasi format message dan memudahkan untuk melakukan modifikasi

7.) Membuat fungsi Build Filter

Fungsi ini memudahkan kita untuk melakukan penambahan filter baru pada suatu query.
Jika tidak menggunakan fungsi ini, setiap menambah filter baru maka kita harus mengubah front end dan back end
Jika ada penambahan filter untuk semua query misal _id: {$ne: “”} maka cukup menambahkannya di fungsi ini tidak perlu update di semua controller

Sekarang mari kita lihat cara implementasi point 4, 5, 6 dan 7 dalam suatu knot controller dan suatu halaman di bagian front end :

That’s all folks, itu dia catatan dari saya walau sebenarnya masih banyak hal baik lain yang bisa dilakukan sebelum memulai suatu project, seperti:

1. Fungsi audit trail untuk menyimpan history data
2. Fungsi untuk check duplicate data
3. Fungsi untuk check data relation saat update data, dll

Semua code yang ada di story ini dapat dilihat pada link berikut