130 lines
7.2 KiB
Markdown
130 lines
7.2 KiB
Markdown
# **Project Brief: Smart Digital Prayer Clock (Jam Shalat Masjid) for Android TV Box**
|
|
|
|
**Target Platform:** Android TV Box (Android 13/14, 4GB RAM, 64GB ROM) \- Landscape Display (1080p).
|
|
|
|
**Framework:** Flutter (Latest Stable).
|
|
|
|
**Architecture Pattern:** Clean Architecture or MVVM.
|
|
|
|
**State Management Suggestion:** Riverpod atau Provider (Pilih salah satu yang paling stabil).
|
|
|
|
**Local Storage:** Hive atau Isar (Untuk caching API bulanan & Settings).
|
|
|
|
## **1\. Project Overview**
|
|
|
|
Aplikasi ini adalah sistem *Digital Signage* untuk masjid yang akan menyala 24/7 non-stop pada layar TV yang terhubung ke Android Box. Aplikasi ini TIDAK boleh mengandalkan internet real-time. Internet hanya tersedia sebulan sekali (via tethering HP) untuk menarik data jadwal shalat dari API (Bulk 1 bulan) dan melakukan sinkronisasi jam sistem (NTP). Selebihnya, aplikasi berjalan 100% OFFLINE membaca database lokal.
|
|
|
|
## **2\. Core Features & App State Machine**
|
|
|
|
Aplikasi memiliki siklus layar (*Screen State Machine*) berdasarkan waktu saat ini (DateTime.now()):
|
|
|
|
1. **\[STATE: NORMAL / ROTATION\]** \-\> Ini adalah state *default*. Layar akan terus berotasi/berganti secara otomatis berdasarkan skema yang ditentukan di Settings. Terdapat 2 jenis screen dalam rotasi ini:
|
|
* **Screen A (Main Screen):** Khusus menampilkan Jam Digital (Current Time), Tanggal (Masehi & Hijriah), Baris Jadwal Shalat (5/6 waktu), dan Countdown detikan menuju shalat berikutnya. Memiliki background statis/dinamis yang telah ditentukan.
|
|
* **Screen B (Slideshow Screen):** Khusus menampilkan poster informasi/pengumuman dalam bentuk gambar penuh (JPG/PNG). Transisi antar gambar atau saat berpindah dari/ke Main Screen menggunakan *Fade In-Out* atau *Slide In-Out*.
|
|
* *Skema Rotasi:* Dinamis (misal: Main \-\> Slide 1 \-\> Main \-\> Slide 2 \-\> Main \-\> Slide 3, ATAU Main \-\> Slide 1 \-\> Slide 2 \-\> Main \-\> Slide 3 dst).
|
|
2. **\[STATE: MENUJU ADZAN\]** \-\> (Misal 10 menit sebelum waktu masuk) Rotasi *Slidehow* dihentikan paksa. Layar terkunci di **Main Screen**, fokus menampilkan hitung mundur menuju Adzan agar jamaah bersiap.
|
|
3. **\[STATE: ADZAN\]** \-\> Waktu masuk. Menampilkan tulisan besar "WAKTU ADZAN \[NAMA SHALAT\]", membunyikan alarm/beep pendek.
|
|
4. **\[STATE: MENUJU IQOMAH\]** \-\> Menampilkan hitung mundur Iqomah. Khusus hari Jumat, hitung mundur ini diganti tulisan "PERSIAPAN KHUTBAH".
|
|
5. **\[STATE: SHALAT/BLACK SCREEN\]** \-\> Setelah waktu Iqomah habis, layar berubah menjadi HITAM PEKAT (Blank) dengan hanya sedikit teks samar agar tidak mengganggu kekhusyukan shalat.
|
|
6. **\[STATE: KEMBALI NORMAL\]** \-\> Setelah durasi Shalat habis, layar kembali ke \[STATE: NORMAL / ROTATION\].
|
|
|
|
## **3\. Specific Logic Requirements**
|
|
|
|
### **A. Waktu Shalat & Logika Hari Jumat (Crucial\!)**
|
|
|
|
* Terdapat 6 jadwal harian: Imsak (opsional), Subuh, Terbit/Syuruq, Dzuhur, Ashar, Maghrib, Isya.
|
|
* **Logika Hari Jumat:** JIKA DateTime.now().weekday \== DateTime.friday, MAKA jadwal "Dzuhur" HARUS diubah string/labelnya menjadi "JUMAT".
|
|
* Khusus masuk waktu "JUMAT", State \[MENUJU IQOMAH\] di-bypass atau diganti dengan tampilan Nama Khatib dan Imam.
|
|
|
|
### **B. Offline-First API Fetching**
|
|
|
|
* Buat satu halaman **Admin/Settings Page** (tersembunyi, diakses dengan menekan pojok layar 5 kali atau via icon gembok).
|
|
* Di Admin Page, ada tombol "Sync Data Bulanan".
|
|
* Saat ditekan, fetch API \-\> Parse JSON \-\> Simpan ke Hive/Isar \-\> Update last\_sync\_date.
|
|
* Di UI utama, timer HANYA boleh membaca dari database lokal, bukan nembak ke API.
|
|
|
|
### **C. Watchdog & Anti-Freeze (Device Specific)**
|
|
|
|
* Wajib menggunakan package wakelock\_plus dan panggil WakelockPlus.enable() di main.dart agar TV Box tidak masuk mode *Sleep*.
|
|
* Gunakan Timer.periodic yang efisien.
|
|
|
|
## **4\. Controllable Settings (Dynamic Variables)**
|
|
|
|
Semua variabel di bawah ini TIDAK BOLEH *hardcoded*. Buatkan model class AppSettings yang disimpan di Local Storage:
|
|
|
|
{
|
|
"masjid\_name": "Masjid Al-Ikhlas",
|
|
"masjid\_address": "Jl. Kebaikan No. 1, Padang",
|
|
"city\_id\_api": "1234",
|
|
"show\_imsak": true,
|
|
"show\_terbit": true,
|
|
"iqomah\_durations": {
|
|
"subuh": 15,
|
|
"dzuhur": 10,
|
|
"ashar": 10,
|
|
"maghrib": 7,
|
|
"isya": 10
|
|
},
|
|
"blank\_screen\_durations": {
|
|
"normal": 15,
|
|
"jumat": 45
|
|
},
|
|
"running\_text": \[
|
|
"Mohon luruskan dan rapatkan shaf",
|
|
"Kajian rutin setiap Ahad pagi"
|
|
\],
|
|
"jumat\_officers": {
|
|
"khatib": "Ust. Fulan, S.Ag",
|
|
"imam": "Ust. Alan, Lc"
|
|
},
|
|
"theme\_color": "0xFF006400",
|
|
"main\_screen\_background": "/path/to/local/bg.jpg",
|
|
"slideshow\_images": \[
|
|
"/path/to/local/slide1.jpg",
|
|
"/path/to/local/slide2.png"
|
|
\],
|
|
"rotation\_settings": {
|
|
"main\_screen\_duration\_sec": 15,
|
|
"slide\_duration\_sec": 10,
|
|
"sequence\_pattern": \["main", "slide\_1", "main", "slide\_2"\]
|
|
}
|
|
}
|
|
|
|
*(Catatan untuk AI: sequence\_pattern bisa diimplementasikan sebagai logic antrean berulang yang membaca array tersebut).*
|
|
|
|
## **5\. UI/UX Layout Structure (Landscape 16:9)**
|
|
|
|
UI harus dibuat menjadi 2 komponen terpisah yang saling bergantian (menggunakan AnimatedSwitcher untuk transisi *Fade*):
|
|
|
|
### **A. Komponen: Main Screen (Jam & Jadwal)**
|
|
|
|
* **Background:** Gambar statis yang di-set dari Settings, ditambah overlay gradient gelap agar teks terbaca jelas.
|
|
* **Top Area (Header):** Nama Masjid, Alamat, dan Logo.
|
|
* **Center Area (Fokus Utama):**
|
|
* Jam Digital berukuran sangat besar (mendominasi tengah layar).
|
|
* Tanggal Masehi & Tanggal Hijriah tepat di bawah jam.
|
|
* Teks dinamis: "Menuju \[Nama Shalat Berikutnya\] \- \[Hitung Mundur HH:MM:SS\]".
|
|
* **Bottom Area (Footer):** Row horizontal berisi kotak/kartu jadwal shalat hari ini. Kotak shalat yang akan datang diberi highlight warna berbeda.
|
|
* **Bottom Edge:** Marquee (Running Text) berjalan tanpa henti.
|
|
|
|
### **B. Komponen: Slideshow Screen (Informasi Poster)**
|
|
|
|
* **Center Area:** Gambar poster (JPG/PNG) dirender secara *fullscreen* (atau *fit center* dengan proporsi terjaga).
|
|
* **Floating Information Widget (Overlay):** Sebuah *box* melayang di pojok layar (misal pojok kanan atas) dengan *background dark transparent* (opacity 35% \- 50%). Widget ini menampilkan:
|
|
* Jam Digital (Current Time) dalam ukuran sedang.
|
|
* Nama Shalat Mendatang (Hanya filter 5 shalat fardhu: Subuh, Dzuhur/Jumat, Ashar, Maghrib, Isya. Abaikan waktu Imsak dan Terbit di widget ini).
|
|
* Countdown Timer menuju waktu shalat tersebut.
|
|
* **Bottom Edge:** Marquee (Running Text) HARUS tetap terlihat meskipun sedang dalam mode Slideshow, agar pengumuman darurat tetap terbaca.
|
|
|
|
## **6\. AI Output Instructions**
|
|
|
|
Tolong generate kode dengan urutan berikut:
|
|
|
|
1. pubspec.yaml dependencies.
|
|
2. Model class untuk Settings & Jadwal Shalat.
|
|
3. Service layer untuk Local Storage (Hive/SharedPrefs).
|
|
4. State Machine Logic (Timer provider/manager untuk handle transisi State, TERMASUK logic *Rotation Scheme* antara Main Screen dan Slideshow).
|
|
5. UI Layout: Pisahkan MainScreenWidget dan SlideshowWidget, lalu gabungkan di HomeView dengan AnimatedSwitcher.
|
|
6. Admin Screen sederhana untuk mengatur variabel Controllable Settings.
|
|
|
|
Pastikan kodenya *null-safe* dan efisien dalam penggunaan memori (hindari memory leaks pada Timer rotasi maupun interval). |