TKK_E32230206/laporan_alur_aplikasi.md

Dokumentasi Diagram Alur (Flowchart) Aplikasi JTA

Dokumen ini berisi rancangan Diagram Alur (Flowchart) jalannya aplikasi mobile JTA dari pertama kali dibuka hingga penggunaan fitur-fiturnya. Anda dapat menyalin kode Mermaid di bawah untuk diimpor ke Diagrams.net (Draw.io).

---

1. Kode Flowchart (Mermaid)

flowchart TD
    Start([Mulai]) --> Splash[Splash Screen: Cek Sesi Login]
    
    Splash --> LoggedIn{Apakah Sudah Login?}
    
    LoggedIn -- Tidak --> Onboarding[Landing Page / Onboarding]
    Onboarding --> ChooseAuth{Masuk atau Daftar?}
    ChooseAuth -- Masuk --> Login[Halaman Login]
    ChooseAuth -- Daftar --> Register[Halaman Register]
    
    Login --> SubmitLogin{Login Berhasil?}
    SubmitLogin -- Tidak --> Login
    SubmitLogin -- Ya --> MainTab
    
    Register --> SubmitRegister{Register Berhasil?}
    SubmitRegister -- Tidak --> Register
    SubmitRegister -- Ya --> Login
    
    LoggedIn -- Ya --> MainTab[Halaman Utama / Dashboard]
    
    MainTab --> CheckDevice{Apakah Alat Terhubung?}
    
    CheckDevice -- Tidak --> EmptyState[Tampilan Alat Belum Terhubung]
    EmptyState --> ClaimDevice[Input Claim Code Alat]
    ClaimDevice --> SubmitClaim{Claim Berhasil?}
    SubmitClaim -- Tidak --> ClaimDevice
    SubmitClaim -- Ya --> ActiveState
    
    CheckDevice -- Ya --> ActiveState[Tampilan Dashboard Aktif]
    
    ActiveState --> Nav[Navigasi Menu Utama]
    
    Nav --> TabMonitoring[Tab 1: Monitoring]
    TabMonitoring --> ViewRealtime[Pantau Suhu & Kelembapan Real-Time]
    TabMonitoring --> ViewChart[Lihat Grafik Riwayat Sensor]
    
    Nav --> TabControl[Tab 2: Control]
    TabControl --> SelectMode{Pilih Mode Kerja}
    
    SelectMode -- Otomatis --> SetThreshold[Atur Batas Threshold Suhu & Kelembapan]
    SetThreshold --> AutoWater[ESP32 Siram Otomatis jika Melewati Batas]
    
    SelectMode -- Manual --> PumpManual[Nyalakan Pompa dengan Durasi Waktu]
    
    TabControl --> SetSchedule[Atur Jadwal Penyiraman]
    SetSchedule --> ScheduleWater[ESP32 Siram Otomatis Sesuai Jadwal]
    
    Nav --> ActionLogout[Tombol Logout]
    ActionLogout --> ConfirmLogout{Konfirmasi Logout?}
    ConfirmLogout -- Ya --> ClearSession[Hapus Sesi & Kembali ke Landing]
    ClearSession --> Onboarding
    ConfirmLogout -- Batal --> ActiveState

---

2. Penjelasan Alur Aktivitas Aplikasi

Berikut adalah penjelasan narasi untuk setiap tahapan pada diagram alur di atas:

1. Awal Sesi (Splash Screen & Auth Check):

   • Ketika aplikasi pertama kali dijalankan, sistem akan menampilkan Splash Screen dan secara otomatis memeriksa status autentikasi lokal pengguna di Supabase.
   • Jika sesi login aktif masih ditemukan, pengguna langsung diarahkan ke Halaman Utama (Dashboard). Jika tidak, pengguna diarahkan ke Halaman Landing / Onboarding.

2. Proses Registrasi & Login:

   • Di Halaman Landing, pengguna dapat memilih masuk (Login) atau membuat akun baru (Register).
   • Setelah proses registrasi sukses, pengguna harus masuk menggunakan email dan password terdaftar.

3. Verifikasi Kepemilikan Alat:

   • Di Halaman Utama, sistem mendeteksi apakah akun pengguna sudah terhubung dengan perangkat IoT ESP32 (device_id != null).
   • Jika Belum Terhubung: Aplikasi menampilkan status kosong (Empty State) dan meminta pengguna memasukkan Claim Code yang tertera pada alat untuk menghubungkannya.
   • Jika Sudah Terhubung: Aplikasi langsung menampilkan dashboard aktif yang berisi pembaruan data sensor real-time.

4. Navigasi Fitur Utama: Setelah alat terhubung, pengguna dapat menggunakan 2 tab fitur utama aplikasi:

   • Fitur Monitoring (Tab 1):
     • Memantau suhu (°C) dan kelembapan (%) kumbung secara real-time yang diperbarui secara otomatis setiap 5 detik (polling).
     • Melihat riwayat grafik perkembangan sensor harian, mingguan, atau bulanan.
   • Fitur Kontrol & Penjadwalan (Tab 2):
     • Memilih mode kerja alat: Mode Otomatis (pompa menyala mandiri berdasarkan batas threshold suhu dan kelembapan yang diinput) atau Mode Manual (menyalakan pompa secara langsung dengan opsi durasi waktu 15 detik hingga 5 menit).
     • Mengatur jadwal penyiraman berkala (menentukan jam dan hari penyiraman otomatis).

5. Proses Logout:

   • Pengguna dapat keluar dari akun secara aman dengan menekan tombol logout. Sistem akan menampilkan dialog konfirmasi terlebih dahulu sebelum menghapus sesi aktif Supabase dan mengembalikan pengguna ke Halaman Landing.

---

3. Cara Mengimpor ke Diagrams.net (Draw.io)

1. Salin seluruh kode di dalam blok ```mermaid pada Bagian 1 di atas.
2. Buka app.diagrams.net.
3. Di menu atas editor Diagrams.net, pilih Arrange -> Insert -> Advanced -> Mermaid... (atau klik tombol + pada toolbar -> Advanced -> Mermaid).
4. Tempel (paste) kode Mermaid tersebut.
5. Klik Insert (Sisipkan). Diagrams.net akan langsung menggambar bagan alir lengkap di atas secara instan.