Perancangan Schema Integrasi Backend dan Frontend - Perwira Learning Center

Konsep Schema API untuk Monitoring

Saat kita merancang schema untuk monitoring, fokusnya bukan lagi sekadar menampilkan data biasa, tapi lebih ke data yang berubah seiring waktu (time series) atau data ringkasan. Karena itu, informasi yang dikirim harus mencakup waktu, nilai numerik seperti persentase atau jumlah aktivitas, serta identitas sumber seperti id pengguna dan id kursus.

Schema memang ditulis dalam format JSON, tapi yang paling penting sebenarnya adalah kesepakatan isi datanya. Misalnya, untuk progres mingguan siswa, setiap data bisa memiliki properti seperti tanggal dengan format YYYY-MM-DD, persentase dari 0 sampai 100, modul_terakhir berupa judul modul, dan waktu_belajar_menit dalam bentuk angka. Dengan begitu, semua sudah terdefinisi sejak awal dan tidak ada data yang dibuat secara asal.

Schema ini tidak hanya penting untuk backend, tapi juga menjadi panduan bagi frontend. Developer frontend bisa langsung memahami bahwa tanggal digunakan sebagai sumbu X, persentase sebagai sumbu Y, dan modul terakhir sebagai informasi tambahan. Dengan struktur yang jelas, backend dan frontend bisa bekerja secara paralel tanpa perlu komunikasi terus-menerus.

Standard Response

Agar frontend tidak perlu melakukan pengecekan data yang rumit, digunakan struktur response standar yang terdiri dari tiga bagian utama, yaitu status, message, dan data. Status berfungsi sebagai penanda apakah request berhasil atau tidak, biasanya berisi “success” atau “error”. Dari sini, frontend langsung tahu apakah harus menampilkan grafik atau pesan error.

Message berisi kalimat singkat yang bisa ditampilkan ke pengguna, seperti “Progres berhasil diambil” atau “Data tidak ditemukan”. Sementara itu, data merupakan bagian inti dari response yang berisi informasi utama, baik dalam bentuk array maupun objek.

Struktur ini bisa dianalogikan seperti amplop surat. Status adalah penandanya, message adalah keterangan singkat, dan data adalah isi utamanya. Dengan format yang konsisten, frontend tidak akan kebingungan meskipun isi data berubah-ubah.

Error Handling Structure yang Mencegah Visualisasi Rusak

Dalam sistem apa pun, error adalah hal yang tidak bisa dihindari, seperti kesalahan format tanggal, data yang tidak ditemukan, atau server yang sedang sibuk. Jika error tidak ditangani dengan baik, frontend bisa saja tetap mencoba menampilkan grafik dari data kosong atau bahkan menampilkan pesan teknis yang sulit dipahami pengguna.

Untuk mengatasi hal ini, struktur error tetap mengikuti tiga pilar yang sama, tetapi dengan status bernilai “error”. Message berisi penjelasan yang mudah dimengerti, dan bisa ditambahkan properti opsional bernama errors yang berisi detail kesalahan, misalnya penjelasan bahwa format tanggal harus menggunakan YYYY-MM-DD.

Dengan pendekatan ini, frontend cukup memeriksa nilai status. Jika bernilai “error”, maka cukup menampilkan pesan yang sesuai tanpa memaksakan grafik untuk tampil. Hasilnya, pengalaman pengguna tetap terjaga meskipun terjadi kesalahan.

Relasi Data: Menggabungkan User, Kursus, dan Monitoring

Dalam sistem seperti, terdapat tiga entitas utama yang saling berkaitan, yaitu User, Course, dan Monitoring. Untuk menampilkan progres belajar seorang siswa dalam suatu kursus, backend perlu menggabungkan ketiga data ini dalam satu response yang utuh.

Biasanya, schema akan berisi informasi singkat tentang user seperti nama dan ID, informasi kursus seperti judul dan jumlah modul, serta data monitoring dalam bentuk array. Setiap item dalam array tersebut berisi waktu, persentase progres, dan status penyelesaian.

Dengan struktur seperti ini, frontend bisa langsung menggunakan data monitoring untuk membuat grafik yang menunjukkan perkembangan siswa dari waktu ke waktu. Pendekatan ini dikenal sebagai “satu response, semua data siap pakai”, karena frontend tidak perlu melakukan beberapa kali request API untuk mendapatkan data yang dibutuhkan.

Contoh Schema Endpoint Progres Mingguan

Sebagai contoh, terdapat endpoint GET /api/v1/monitoring/weekly-progress yang digunakan untuk mengambil data progres belajar selama tujuh hari terakhir. Request tidak memerlukan body karena identitas pengguna sudah dikenali melalui token login.

Response yang berhasil tetap menggunakan struktur tiga pilar. Pada bagian data, terdapat array berisi tujuh objek yang masing-masing mewakili satu hari. Setiap objek memiliki properti seperti tanggal, persentase_progres, jumlah modul yang diselesaikan, dan total durasi belajar dalam menit. Data sudah diurutkan dari yang paling lama ke yang terbaru, dan nilai persentase sudah dipastikan berada dalam rentang 0 hingga 100.

Dengan format ini, frontend dapat langsung memetakan tanggal sebagai sumbu X dan persentase sebagai sumbu Y tanpa perlu mengolah ulang data. Jika terjadi error, misalnya siswa belum terdaftar dalam kursus apa pun, maka status akan bernilai “error”, message berisi penjelasan yang sesuai, dan data bernilai null. Frontend kemudian dapat menampilkan informasi bahwa data tidak tersedia.

Best Practice: Menjaga Konsistensi Schema Monitoring

Agar schema monitoring tetap konsisten dan mudah digunakan dalam jangka panjang, ada beberapa praktik yang perlu diperhatikan.

Beberapa hal penting yang harus dijaga:

• gunakan satu gaya penamaan field (snake_case atau camelCase)
• sertakan satuan yang jelas dalam nama field (contoh: waktu_belajar_menit)
• gunakan format waktu standar seperti ISO 8601
• gunakan versioning API seperti /v1/
• pisahkan endpoint untuk data detail dan data ringkasan

Dengan menjaga konsistensi ini, schema akan lebih mudah dipahami, lebih scalable, dan tidak membingungkan saat sistem berkembang.

Hasil Pembelajaran

Melalui pembelajaran ini, saya memahami bahwa Laravel telah menyediakan sistem autentikasi yang terintegrasi dan dapat dikembangkan sesuai kebutuhan. Proses autentikasi meliputi registrasi pengguna, login, serta pengelolaan sesi atau token untuk mempertahankan status pengguna yang telah berhasil masuk ke sistem.

Saya juga mempelajari penggunaan middleware untuk membatasi akses ke route tertentu agar hanya dapat diakses oleh pengguna yang telah terautentikasi. Selain itu, saya memahami pentingnya validasi data serta enkripsi password untuk menjaga keamanan informasi pengguna.

Kesimpulan

Autentikasi merupakan komponen penting dalam pengembangan aplikasi menggunakan Laravel. Dengan menerapkan sistem login, pengelolaan sesi atau token, serta middleware pembatas akses, aplikasi dapat berjalan dengan lebih aman dan terkontrol.

Pemahaman mengenai autentikasi memberikan dasar yang kuat dalam membangun sistem yang profesional dan siap digunakan dalam lingkungan nyata, terutama pada aplikasi yang melibatkan banyak pengguna dan data sensitif.