Dalam proses integrasi antara frontend dan layanan API DEWaS, saya di berikan tugas untuk menampilkan data laporan keadaan darurat (emergency report) serta data perangkat AWLR beserta ketinggian airnya dari level normal. Dengan menghubungkan frontend dengan API DEWaS, saya dapat menyajikan informasi penting ini secara langsung kepada pengguna, memungkinkan mereka untuk memantau keadaan darurat dan tingkat ketinggian air dengan lebih efektif dan akurat. Proses ini melibatkan penanganan data dari API secara efisien di sisi frontend, sehingga pengguna dapat mengakses informasi yang relevan dengan mudah dan cepat.

Tampilan frontend dan endpoint API di Insomnia

Pada gambar di atas, terlihat tampilan antarmuka pengguna (UI) dari aplikasi DEWaS yang telah saya kembangkan menggunakan Next.js. Serta, gambar juga menampilkan penggunaan endpoint API DEWaS yang dapat dilihat melalui aplikasi Insomnia. Dengan menggunakan kedua platform ini, saya dapat memastikan bahwa antarmuka pengguna berfungsi dengan baik dan terintegrasi dengan endpoint API yang tepat.

Dalam proses integrasi API ini, saya menghadapi kesulitan terkait dengan masalah CORS (Cross-Origin Resource Sharing), selengkapnya tentang CORS. Namun, akhirnya saya menemukan solusinya dengan mengimplementasikan metode pengambilan data menggunakan fetch di sisi server, bukan di sisi klien. Dengan pendekatan ini, saya berhasil mengatasi kendala CORS dan memastikan integrasi API berjalan dengan lancar.