Histeel Membership App / Laporan Proyek
Phase 1 · Aktif Flutter · Dart 3
DOKUMENTASI PROYEK

Histeel Membership App

Aplikasi keanggotaan resmi Histeel untuk Android & iOS — dibangun dengan Flutter, arsitektur berlapis, dan sistem loyalitas terintegrasi penuh.

Android & iOS Versi 1.0.0 (build 1) 16 Juni 2026
7.949
Baris kode Dart
56
File sumber
10
Modul fitur
21
Layar aplikasi
01 RINGKASAN EKSEKUTIF

Kartu keanggotaan digital dalam genggaman

Histeel App menyatukan profil member, poin loyalitas, transaksi, voucher, hadiah, promo, lokasi cabang, dan notifikasi dalam satu pengalaman yang rapi dan cepat — sepenuhnya berbahasa Indonesia (id_ID).

Sistem Loyalitas

Kumpulkan & tukar poin, akses katalog hadiah, voucher, dan promo eksklusif member.

Arsitektur Matang

Pola feature-first berlapis (UI → State → Repository → API) yang skalabel & mudah dipelihara.

Aman by Design

Token terenkripsi di level OS, autentikasi otomatis, dan penanganan sesi kedaluwarsa.

02 MODUL FITUR

Sepuluh modul, dua puluh satu layar

Setiap fitur berdiri sendiri dengan model data, repository, provider, dan layar UI-nya sendiri.

Autentikasi
Splash, login email/username, sesi token aman, logout otomatis.
2 layar
Beranda
Ringkasan member, berita & artikel berdetail, banner promo dinamis.
3 layar
Transaksi
Riwayat pembelian member lengkap dengan detail per transaksi.
2 layar
Poin Loyalitas
Saldo real-time, riwayat (earn/redeem/reverse/expiry), penukaran poin.
2 layar
Hadiah
Katalog hadiah yang dapat ditukar poin, proses redeem & riwayatnya.
1 layar
Voucher
Daftar voucher member dengan detail & informasi penggunaan.
2 layar
Promo
Promo berjalan dengan tampilan banner dan halaman detail.
2 layar
Lokasi
Peta interaktif cabang, daftar & detail cabang, dukungan geolokasi.
2 layar
Notifikasi
Pusat notifikasi in-app + Firebase Cloud Messaging, tandai dibaca.
1 layar
Akun
Profil, edit data, hubungi kami, info aplikasi & legal.
4 layar
03 ALUR PENGGUNA

Perjalanan dari splash ke fitur

Penjaga sesi (route guard) memastikan pengguna selalu berada di tempat yang tepat.

Splash ScreenMemeriksa status login
Sudah login?
Tidak → Login
Ya → Beranda
Beranda
Transaksi
Poin
Lokasi
Akun

Penjaga Sesi Otomatis

Bila token kedaluwarsa atau tidak valid (respons 401) di tengah penggunaan, aplikasi otomatis menghapus sesi dan mengarahkan pengguna kembali ke login — tanpa membuat aplikasi error.

Peta Situs · 21 Layar
Entry & Auth2
Splash/splash
Login/login
Tab Utama (Shell)5
Beranda/beranda
Transaksi/transaksi
Poin/poin
Lokasi/lokasi
Akun/akun
Halaman Penuh14
Notifikasi/notifikasi
Semua Berita/beranda/berita
Detail Berita/beranda/news/:id
Detail Transaksi/transaksi/:id
Tukar Poin/poin/tukar
Detail Cabang/lokasi/:id
Edit Profil/akun/edit
Hubungi Kami/akun/hubungi
Info Aplikasi/akun/info
Voucher & Detail/voucher · /:id
Hadiah/hadiah
Promo & Detail/promo · /:id
04 ARSITEKTUR TEKNIS

Empat lapisan, satu arah aliran data

Setiap lapisan punya tanggung jawab tunggal sehingga mudah diuji, dipelihara, dan dikembangkan.

01
Screens — Antarmuka
Widget Flutter, tampilan & interaksi yang dilihat pengguna
mengamati (watch)
02
Providers — Manajemen State
ChangeNotifier · status loading, data, dan error aplikasi
memanggil
03
Repositories — Lapisan Data
Jembatan ke server, memanggil API & parsing respons
HTTP request (Dio)
04
Backend API — Server
api-mobile.ikhtiar.site · sumber data sebenarnya

Provider

State management resmi rekomendasi tim Flutter. 9 provider global menjaga state antar tab.

GoRouter

StatefulShellRoute menjaga state tiap tab + route guard otomatis ke login.

Dio

Interceptor menyisipkan token & logging otomatis di setiap request.

STRUKTUR PROYEK
lib/
├─ core/             komponen inti bersama
│  ├─ network/        HTTP, endpoint, interceptor
│  ├─ router/         definisi rute & route guard
│  ├─ storage/        secure & local storage
│  ├─ theme/          warna, font, komponen
│  └─ widgets/        shell & widget bersama
└─ features/         10 modul fitur
   └─ <fitur>/
      ├─ models/       struktur data + parsing JSON
      ├─ repositories/ komunikasi dengan API
      ├─ providers/    state & logika bisnis
      └─ screens/      tampilan antarmuka (UI)

Setiap modul menerapkan keempat lapisan secara konsisten — keseragaman ini yang membuat aplikasi mudah dirawat.

Modul
Model
Repository
Provider
Layar
Autentikasi
2
Beranda
3
Transaksi
2
Poin
2
Hadiah
1
Voucher
2
Promo
2
Lokasi
2
Notifikasi
1
Akun
4
05 TEKNOLOGI & DEPENDENSI

Pustaka matang & teruji industri

Seluruh versi dependensi terkunci untuk menjamin stabilitas build.

5
5
3
5
2
Jaringan & Data 5
Antarmuka 5
Peta & Lokasi 3
Push & Utilitas 5
State & Navigasi 2
State & Navigasi
providergo_router
Jaringan & Data
dioretrofitflutter_secure_storageshared_preferenceshive
Peta & Lokasi
flutter_maplatlong2geolocator
Antarmuka
google_fontscached_network_imageshimmerqr_flutterflutter_svg
Push & Utilitas
firebase_messagingintlurl_launcherequatabledartz
06 INTEGRASI BACKEND

REST API terstruktur

Base URL https://api-mobile.ikhtiar.site/api/v1 · format JSON standar { data, meta, errors } dengan pagination.

POST/auth/loginMasuk memberpublik
GET/profileData profil pengguna auth
PATCH/profilePerbarui profil auth
GET/transactionsRiwayat transaksi auth
GET/rewards/balance · /rewards/historySaldo & riwayat poin auth
GET/loyalty/catalogKatalog hadiah auth
POST/loyalty/redeemTukar poin jadi hadiah auth
GET/content/articles · /branches · /bannersBerita, cabang, bannerpublik
GET/notificationsDaftar notifikasi auth
Contoh Format Respons
GET /rewards/balance200 OK
{
  "data": {
    "points_balance": 12500,
    "last_calculated_at": "2026-06-16T09:30:00Z"
  },
  "meta": {
    "pagination": { "current_page": 1, "per_page": 20, "total": 48 }
  },
  "errors": null   // diisi saat terjadi kesalahan
}

Indikasi teknis menunjukkan backend kemungkinan berbasis WordPress (referensi wp_user_id pada data poin) — menjelaskan integrasi konten artikel & banner.

07 KEAMANAN

Perlindungan sejak baris pertama

Aspek keamanan menjadi perhatian sejak awal pengembangan.

Token Terenkripsi OS

flutter_secure_storage — Keychain (iOS) & EncryptedSharedPreferences (Android).

Pemisahan Data

Data sensitif (token) terpisah dari data non-sensitif (ID, onboarding).

Auto-Authorization

Setiap request menyertakan header Bearer token via interceptor.

Timeout 30 Detik

Mencegah aplikasi menggantung saat koneksi bermasalah.

Sesi Kedaluwarsa

Respons 401 otomatis menghapus seluruh data sesi & arahkan login ulang.

HTTPS End-to-End

Seluruh komunikasi terenkripsi melalui transport aman.

Siklus Token Autentikasi
Login
Email & sandi
Repository
POST /auth/login
Server
Validasi + token
Secure Storage
Simpan terenkripsi
Terautentikasi
Masuk beranda

Catatan Phase 1

Sistem belum menggunakan refresh token — saat token habis, pengguna login ulang. Mekanisme refresh token direkomendasikan untuk fase berikutnya demi kenyamanan pengguna.

08 IDENTITAS VISUAL

Sistem desain Material 3 yang konsisten

Palet brand hitam-merah, font Be Vietnam Pro, dan komponen bertema terpusat.

Black
#0F0F0F
Red
#E8192C
Red Soft
#FFF1F2
Green
#2D8B4E
Background
#F7F7F7
Text 2nd
#6B6B6B
Be Vietnam Pro

Aa Bb Cc · 0 1 2 3 4 5 6 7 8 9 — skala tipografi lengkap dari Display hingga Caption, konsisten di seluruh aplikasi.

Floating Bottom Nav

5 tab dalam pill mengambang — Beranda, Transaksi, Poin, Lokasi, Akun. Tab aktif beraksen merah.

Material 3 · Light Theme

Komponen bertema terpusat, latar terang, aksen hitam-merah.

Mode Potret Terkunci

Orientasi portrait dengan system nav bar gelap brand.

State Antar Tab Terjaga

Berpindah tab tidak mereset posisi scroll & data tiap halaman.

09 METRIK & KOMPOSISI

Distribusi layar & kesiapan proyek

Sebaran 21 layar per modul dan tingkat penyelesaian tiap area menuju rilis.

68%
Kesiapan total menuju rilis
100%
Arsitektur & struktur
80%
Integrasi API
10%
Pengujian otomatis
Layar per Modul
Akun4
Beranda3
Auth2
Lokasi2
Poin2
Promo2
Transaksi2
Voucher2
Hadiah1
Notifikasi1
Kesiapan per Area
Arsitektur & Struktur100%
Autentikasi & Keamanan95%
UI / Layar Fitur90%
Integrasi API80%
Push Notification40%
Pengujian Otomatis10%
Kesiapan Rilis Store60%
10 STATUS PENGEMBANGAN

Papan kesiapan menuju rilis

Dikelompokkan berdasarkan prioritas: wajib sebelum rilis, disarankan, dan sudah selesai.

Wajib sebelum rilis3
Application ID
Masih default com.example.histeel_mobile — ganti ke ID resmi.
Konfigurasi Firebase
google-services.json & GoogleService-Info.plist belum terpasang.
Aset Gambar
Folder assets/images/ masih kosong, perlu aset final.
Disarankan4
Refresh Token
Perpanjangan sesi otomatis agar tak sering login ulang.
Pengujian Otomatis
Unit & widget test untuk jaga kualitas.
Registrasi Mandiri
Alur pendaftaran member baru bila dibutuhkan.
Caching Offline
Manfaatkan Hive untuk konten jarang berubah.
Sudah selesai6
Arsitektur & Struktur
Autentikasi + Storage Aman
Lapisan Jaringan + Error Handling
21 Layar dari 10 Modul
Sistem Tema Konsisten
Navigasi Multi-Tab

Laporan ini disusun berdasarkan analisis langsung kode sumber per 16 Juni 2026. Untuk pertanyaan teknis lebih lanjut, silakan menghubungi tim pengembang.