delete
This commit is contained in:
parent
eb29a6a34a
commit
959c63b8a5
|
|
@ -1,103 +0,0 @@
|
||||||
# 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.
|
|
||||||
Loading…
Reference in New Issue