104 lines
4.9 KiB
Markdown
104 lines
4.9 KiB
Markdown
# 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)
|
|
|
|
```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](https://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.
|