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