Smart City Frontend #1: Perancangan Fitur & Alur Sistem Portal Informasi Kota - Perwira Learning Center

1. Latar Belakang

    Perkembangan teknologi digital mendorong pemerintah daerah untuk menyediakan layanan informasi yang lebih mudah diakses oleh masyarakat. Salah satu bentuk implementasinya adalah melalui portal informasi berbasis web yang terintegrasi dengan konsep smart city. Berdasarkan kebutuhan tersebut, proyek Purbalingga Smart City ini dikembangkan untuk mendukung konsep Portal Informasi melalui penyediaan informasi yang mudah diakses oleh masyarakat, khususnya warga Purbalingga.

2. Alat dan Bahan

A. Perangkat Lunak

- Sistem Operasi Linux (atau yang lainnya)

- Visual Studio Code (atau text editor lainnya)

- Laravel 12.0

- React 

B. Perangkat Keras

- Laptop / PC

3. Pembahasan

3.1 Konsep Frontend

    Frontend adalah salah satu sebutan di dunia pengembangan aplikasi yang berperan sebagai wajah dari suatu situs web dan langsung berinteraksi dengan pengguna. Semua hal yang dapat dilihat dan diakses oleh pengguna adalah bagian dari frontend.

3.2 Konsep Portal Informasi

    Portal informasi merupakan suatu situs web yang menyediakan informasi dari berbagai sumber dan membuat informasi tersebut dapat diakses oleh semua orang. Portal ini juga dapat digunakan untuk mencari dan mendapatkan akses ke situs lain sehingga Portal Informasi dapat sangat membantu bagi orang awam. Selain sebagai sarana penyedia informasi, Portal juga dapat melindungi mereka dari berbagai hujan informasi yang tidak tersusun dan terstruktur seperti yang umumnya disediakan pada website Portal Informasi.

3.3 Pengenalan Projek

    Proyek ini merupakan pengembangan portal informasi berbasis web yang mengusung konsep smart city dengan fokus pada penyediaan informasi daerah secara terpusat. Portal ini dirancang untuk membantu masyarakat dalam mengakses berbagai informasi penting terkait Kabupaten Purbalingga melalui satu platform digital.

3.4 Perancangan Fitur Utama

    Dalam pengembangan portal informasi smart city, tidak semua fitur dibahas secara rinci, melainkan difokuskan pada fitur-fitur utama yang menjadi inti dari sistem. Fitur-fitur ini dirancang untuk memenuhi kebutuhan pengguna dalam mengakses informasi serta berinteraksi dengan portal.

a. Fitur Peta Smart City

    Peta digital ini digunakan untuk melihat berbagai fasilitas umum, bangunan-bangunan, dan informasi lokasi lainnya yang berada di kota Purbalingga.

Pengguna dapat:

• Melihat lokasi bangunan melalui marker
• Melakukan pencarian lokasi
• Memfilter kategori (seperti fasilitas umum, CCTV, dan destinasi wisata)
• Melihat detail informasi melalui popup

Gambaran peta (masih tahap development)

b. Fitur Wisata dan Tiket

    Setiap wisata yang ada di purbalingga memiliki detail informasi yang dapat diakses melalui fitur ini. Selain itu, informasi wisata juga akan dilengkapi dengan fitur pemesanan tiket wisata. Pengguna dapat memilih tanggal kunjungan, menentukan jumlah pengunjung, dan proses pemesanan lain melalui digital.

c. Fitur Informasi Publik

    Portal ini juga menyediakan berbagai informasi publik yang dapat diakses oleh masyarakat, meliputi Berita, Event atau agenda kota, Pengumuman, serta informasi umum lain yang bermanfaat dan terstruktur.

d. Fitur Pencarian

    Suatu situs portal informasi pastinya harus memiliki fitur pencarian untuk memudahkan pengguna dalam mencari informasi dengan lebih cepat dan praktis. Maka dari itu, disediakanlah fitur pencarian pada landing page milik Purbalingga Smart City.

Gambaran Landing Page (masih tahap development)

3.5 Perancangan Alur Sistem (User Flow)

    Alur sistem menggambarkan bagaimana pengguna berinteraksi dengan portal. Berikut alur sederhana yang telah dirancang untuk mendukung konsep User Friendly, yaitu:

Pengguna membuka halaman beranda

Pengguna melihat informasi fasilitas pada peta

Memilih menu (misalnya wisata)

Melihat daftar wisata

Memilih salah satu wisata

Melihat detail

Melakukan pemesanan tiket

3.6 Kesimpulan

    Perancangan fitur dan alur sistem merupakan tahap penting dalam pengembangan portal informasi. Dengan perencanaan yang baik, proses implementasi dapat dilakukan secara lebih terarah dan efisien.

Hasil dari tahap ini meliputi:

• Identifikasi kebutuhan sistem
• Perancangan fitur utama
• Alur interaksi pengguna
• Serta desain awal antarmuka

Tahap selanjutnya adalah implementasi dari rancangan tersebut ke dalam bentuk tampilan nyata pada halaman web.

4. Daftar Pustaka

Universitas Muhammadiyah Malang. (2024). Mengenal Frontend: Wajah Aplikasi yang Berinteraksi dengan Pengguna. Diakses dari: https://informatika.umm.ac.id/mengenal-frontend-wajah-aplikasi-yang-berinteraksi-dengan-pengguna/

IGI Global Scientific Publishing. (2009). What is Information Portals. Diakses dari: https://www.igi-global.com/dictionary/web-portal-research-issues/37241#:~:text=It%20consists%20of%20a%20Web,her%20toward%20a%20specific%20goal.