Studi kasus · 2022
Unit 3C Mobile
Adaptasi unit3C untuk Mobile - Flutter & Dart sebagai teknologi utama - Cross-platform development untuk Android & iOS Fitur Mobile-Specific - Native mobile experience dengan gestures, notifications - Offline-first approach untuk pembelajaran tanpa internet - Responsive design untuk berbagai ukuran layer
01Masalahnya
Unit 3C punya versi web untuk peserta dan mentor. Versi mobile ini mengadaptasinya ke ponsel dengan Flutter, berupa demo atau mockup antarmuka dengan fokus pada kegiatan: apa yang diikuti peserta dan apa yang dibimbing mentor. Tantangannya merangkai alur yang utuh (masuk atau daftar, tampilan berbeda untuk dua peran, daftar dan detail kegiatan) tanpa backend, sehingga data contoh datang dari berkas JSON lokal.
02Prosesnya
Aplikasi ditulis dengan Flutter 3.7 dan Dart 2.19, memakai Material Design dan font Quicksand dari google_fonts. State tidak memakai package tambahan: AppController (ChangeNotifier) dibagikan ke seluruh pohon widget lewat InheritedNotifier, sehingga layar dibangun ulang saat sesi atau data berubah. Data dimuat sekali saat aplikasi dibuka dari tiga berkas JSON di aset (pengguna, kegiatan, akun Google demo), lalu dipetakan ke model Pengguna dan Kegiatan. Status Selesai dihitung dari tanggal kegiatan terhadap hari ini. Logika masuk, daftar, dan kueri data diuji dengan 42 test unit dan widget.
03Solusinya
Peserta bisa masuk dengan email atau nomor HP, mendaftar akun baru dengan validasi form, atau memakai Continue With Google (simulasi: memilih akun demo dari JSON). Setelah masuk ada tiga tab: Beranda dengan ringkasan dan kegiatan yang diikuti, Kegiatan dengan semua kegiatan terbagi mendatang dan selesai, serta Profil dengan Logout. Mentor masuk lewat halaman terpisah; Beranda-nya menampilkan kegiatan yang dibimbing beserta total peserta, dan detail kegiatan miliknya memuat daftar peserta.
Alur layar
- Login Participant dengan email atau nomor HP, Continue With Google, dan tautan ke Register
- Login Mentor lewat tombol Are you Mentor?
- Beranda: sapaan, jumlah kegiatan diikuti dan mendatang (peserta), atau kegiatan dibimbing dan total peserta (mentor)
- Kegiatan: semua kegiatan, mendatang lalu selesai
- Detail kegiatan: kategori, jadwal, lokasi, mentor, kuota, deskripsi, dan daftar peserta untuk mentor pemiliknya
- Profil: data akun dan Logout
Keputusan teknis
- Data read-only. Berkas JSON di
lib/assets/data/hanya dibaca. Akun yang mendaftar disimpan di memori dan hilang saat aplikasi ditutup; sesi login juga tidak disimpan. - Satu sumber state.
AppControllermenyimpan pengguna, kegiatan, dan sesi, sehingga layar cukup membaca dariAppScope. - Validasi dipakai bersama. Aturan nama, email, dan password dipakai oleh form dan fungsi
register, jadi keduanya tidak bisa berbeda. - Peran dipisah di login. Akun mentor yang masuk lewat login peserta (dan sebaliknya) ditolak dengan pesan yang mengarahkan ke halaman yang benar.
Status: demo dan mockup
Source yang dibagikan di sini adalah demo antarmuka, bukan produk jadi. Yang sudah berjalan hanyalah alur layar di atas dengan data contoh dari JSON.
- Tidak ada backend. Login dicocokkan dengan JSON lokal dan password disimpan sebagai teks biasa karena hanya untuk demo.
- Continue With Google hanyalah simulasi, bukan login Google sungguhan.
- Source saat ini hanya punya target Android. Versi web di halaman ini dibuat dari source yang sama dengan tambahan scaffold web, khusus untuk pratinjau.
- Satu-satunya kebutuhan jaringan adalah font Quicksand, yang diunduh
google_fontssaat aplikasi dijalankan. - Tanggal kegiatan contoh jatuh pada September sampai Desember 2026, jadi label Mendatang dan Selesai bergeser mengikuti tanggal hari ini.
Rencana pengembangan
Bagian ini belum ada di source dan menjadi arah pengembangan berikutnya.
- Firebase. Authentication dan database untuk menggantikan berkas JSON dan akun contoh.
- Logika backend. Login sungguhan serta pengelolaan data kegiatan, peserta, dan mentor yang kini hanya berupa tampilan dari JSON.
- Fitur khas mobile. Notifikasi dan gestur untuk pengalaman yang lebih native.
- Offline-first. Pembelajaran tetap bisa dipakai tanpa internet.
- Lintas platform. Android dan iOS.
- Responsif. Tata letak yang menyesuaikan berbagai ukuran layar.
Mockup desain
Rancangan antarmukanya tersedia sebagai prototype di Figma: buka mockup di Figma.
Mencoba demo
Buka Live demo; aplikasi tampil di bingkai ponsel. Masuk dengan Continue With Google untuk peserta, atau pakai akun contoh yang tertera di panel info. Mentor masuk lewat tombol Are you Mentor? di halaman login. Perubahan apa pun, termasuk akun baru dari Register, hilang saat halaman dimuat ulang. Source bisa diunduh lewat tombol Source code.