Skip to content

Commit f1d08aa

Browse files
committed
update
1 parent 8c8b639 commit f1d08aa

2 files changed

Lines changed: 217 additions & 46 deletions

File tree

README.md

Lines changed: 207 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,104 @@
1-
# PPSA - Majmu'ah ad-Du'a Sunan Ampel
1+
# 📖 PPSA Majmu'ah ad-Du'a Sunan Ampel
22

3-
Aplikasi static PWA untuk digitalisasi **Majmu'ah ad-Du'a Pondok Pesantren Sunan Ampel**.
3+
<p align="center">
4+
<img src="assets/logo.png" alt="Logo PPSA" width="140">
5+
</p>
46

5-
## Fitur
7+
<p align="center">
8+
<strong>Aplikasi doa & wirid digital untuk keluarga besar Pondok Pesantren Sunan Ampel</strong><br>
9+
Ringan, bisa dibuka dari HP, mendukung mode offline, dan dilengkapi jadwal shalat harian.
10+
</p>
611

7-
- Splash screen dengan judul Arab.
8-
- Beranda dengan jadwal shalat berikutnya.
9-
- Jadwal shalat memakai **EQuran.id API** dengan sumber data **Bimas Islam Kementerian Agama RI**.
10-
- Default wilayah: **Kab. Jombang, Jawa Timur**.
11-
- Pengaturan wilayah manual berdasarkan provinsi dan kabupaten/kota.
12-
- Tombol GPS untuk membantu mencocokkan wilayah pengguna ke daftar kabupaten/kota.
13-
- Mode baca: **Arab saja** atau **Arab + Arti**.
14-
- Pengaturan ukuran font Arab 16–32 px.
15-
- Tasbih digital dengan target dan haptic feedback.
16-
- Offline-first untuk teks doa, wirid, dan tasbih.
17-
- Cache jadwal shalat bulan berjalan di `localStorage`.
12+
<p align="center">
13+
<a href="https://cakgup.github.io/ppsa/">
14+
<img src="https://img.shields.io/badge/GitHub%20Pages-Live-brightgreen?logo=github" alt="GitHub Pages">
15+
</a>
16+
<a href="LICENSE">
17+
<img src="https://img.shields.io/badge/License-GPL--3.0-blue.svg" alt="License GPL-3.0">
18+
</a>
19+
<img src="https://img.shields.io/badge/PWA-Offline--First-2E7D32" alt="PWA Offline First">
20+
<img src="https://img.shields.io/badge/Mobile-Responsive-1E88E5" alt="Mobile Responsive">
21+
</p>
1822

19-
## Struktur File
23+
---
24+
25+
## ✦ Bismillahirrahmanirrahim
26+
27+
Repository ini adalah ikhtiar digital untuk memudahkan keluarga, santri, dan jamaah dalam menjaga rutinitas doa, wirid, serta kedisiplinan ibadah harian.
28+
Semoga aplikasi ini menjadi wasilah kebaikan: mudah dibuka, mudah diamalkan, dan mudah diwariskan.
29+
30+
> _“Khairunnas anfa'uhum linnas.”_
31+
> Sebaik-baik manusia adalah yang paling bermanfaat bagi manusia lainnya.
32+
33+
---
34+
35+
## 📌 Tentang Aplikasi
36+
37+
**PPSA — Majmu'ah ad-Du'a Sunan Ampel** adalah aplikasi web statis berbasis PWA yang berisi kumpulan doa dan wirid dengan pengalaman baca yang ramah mobile.
38+
39+
Aplikasi ini cocok untuk:
40+
41+
- penggunaan pribadi harian setelah shalat;
42+
- pendamping amalan di rumah, pesantren, atau majelis;
43+
- akses cepat doa dalam kondisi sinyal minim;
44+
- dokumentasi digital naskah doa agar lebih mudah dirawat.
45+
46+
---
47+
48+
## ✨ Fitur Utama
49+
50+
| Fitur | Keterangan |
51+
|---|---|
52+
| 🕌 Jadwal Shalat Harian | Menampilkan waktu shalat berdasarkan wilayah pilihan pengguna |
53+
| 📍 Pilih Lokasi Manual + GPS | Pilih provinsi/kota atau bantu deteksi lokasi via GPS |
54+
| 📚 Mode Baca Fleksibel | Tersedia mode Arab saja atau Arab + Arti |
55+
| 🔠 Pengaturan Font Arab | Ukuran font Arab bisa diatur agar nyaman dibaca |
56+
| 📿 Tasbih Digital | Counter tasbih dengan target dan feedback getar (device support) |
57+
| 📶 Offline-First | Konten doa utama tetap dapat dibaca saat offline |
58+
| 📦 Cache Cerdas | Jadwal shalat bulan berjalan disimpan di localStorage |
59+
| 📱 Siap Dipasang | Mendukung install ke homescreen (PWA) |
60+
61+
---
62+
63+
## 🗂️ Struktur Repository
2064

2165
```text
22-
.
66+
ppsa/
2367
├── index.html
24-
├── css/styles.css
25-
├── js/app.js
26-
├── data/doa.json
27-
├── assets/logo.png
68+
├── css/
69+
│ └── styles.css
70+
├── js/
71+
│ └── app.js
72+
├── data/
73+
│ └── doa.json
74+
├── assets/
75+
│ ├── logo.png
76+
│ └── icon-192.png
2877
├── manifest.webmanifest
29-
└── sw.js
78+
├── sw.js
79+
├── LICENSE
80+
└── README.md
3081
```
3182

32-
## Cara Menjalankan Lokal
83+
Keterangan singkat:
84+
85+
| File/Folder | Fungsi |
86+
|---|---|
87+
| `index.html` | Entry point aplikasi |
88+
| `css/styles.css` | Styling utama aplikasi |
89+
| `js/app.js` | Logika view, jadwal shalat, tasbih, dan pengaturan |
90+
| `data/doa.json` | Sumber data doa/wirid |
91+
| `assets/` | Logo dan ikon aplikasi |
92+
| `manifest.webmanifest` | Konfigurasi PWA |
93+
| `sw.js` | Service worker untuk mode offline |
94+
95+
---
96+
97+
## 🚀 Menjalankan Secara Lokal
3398

34-
Jangan buka langsung `index.html` melalui `file://`, karena browser dapat memblokir `fetch('./data/doa.json')` dan API.
99+
Jangan buka `index.html` langsung via `file://` karena `fetch` ke file data bisa dibatasi browser.
35100

36-
Jalankan server lokal:
101+
### Opsi 1 — Python
37102

38103
```bash
39104
python -m http.server 8000
@@ -45,36 +110,133 @@ Lalu buka:
45110
http://localhost:8000
46111
```
47112

48-
## Deploy
113+
### Opsi 2 — Node.js
49114

50-
Bisa langsung diunggah ke:
115+
```bash
116+
npx -y serve .
117+
```
118+
119+
Lalu buka:
120+
121+
```text
122+
http://localhost:3000
123+
```
124+
125+
---
126+
127+
## 🌐 Deploy
128+
129+
Aplikasi dapat dipublikasikan ke:
51130

52131
- GitHub Pages
53132
- Vercel
54-
- Cloudflare Pages / pages.dev
133+
- Cloudflare Pages
134+
135+
Untuk GitHub Pages:
136+
137+
1. Push semua file ke branch `main`.
138+
2. Buka `Settings` repository.
139+
3. Masuk ke menu `Pages`.
140+
4. Pilih source `Deploy from a branch`.
141+
5. Pilih branch `main` dan folder `/root`.
142+
6. Simpan, lalu tunggu URL aktif.
143+
144+
Contoh URL:
145+
146+
```text
147+
https://cakgup.github.io/ppsa/
148+
```
149+
150+
---
151+
152+
## 🛠️ Kustomisasi Konten
153+
154+
### 1. Memperbarui data doa
155+
156+
Edit file berikut:
157+
158+
```text
159+
data/doa.json
160+
```
161+
162+
Disarankan tetap menjaga format field agar kompatibel dengan renderer di `js/app.js`.
163+
164+
### 2. Menyesuaikan branding
165+
166+
- Ubah logo di `assets/logo.png`
167+
- Ubah ikon aplikasi di `assets/icon-192.png`
168+
- Sesuaikan judul/meta di `index.html`
169+
170+
### 3. Menyesuaikan tema warna
171+
172+
Ubah variabel/aturan warna di:
173+
174+
```text
175+
css/styles.css
176+
```
177+
178+
---
179+
180+
## 🧪 Checklist Sebelum Publish
181+
182+
- [ ] Data `data/doa.json` valid (tidak ada JSON error)
183+
- [ ] Navigasi Beranda, Baca, Tasbih, Info berjalan normal
184+
- [ ] Jadwal shalat muncul untuk lokasi default dan lokasi manual
185+
- [ ] Service worker aktif dan konten inti bisa dibuka offline
186+
- [ ] Tampilan mobile tetap rapi di layar kecil
187+
- [ ] Tidak ada error penting di browser console
188+
189+
---
190+
191+
## 🧩 Troubleshooting
192+
193+
### Jadwal shalat tidak muncul
194+
195+
- cek koneksi internet;
196+
- pastikan endpoint API bisa diakses;
197+
- hapus cache browser/localStorage lalu reload.
198+
199+
### Data doa tidak tampil
200+
201+
- validasi format JSON di `data/doa.json`;
202+
- cek path file tidak berubah;
203+
- refresh keras browser (`Ctrl + F5`).
204+
205+
### Tombol install tidak muncul
206+
207+
- pastikan dibuka via `http://` atau `https://` (bukan `file://`);
208+
- pastikan browser mendukung install PWA;
209+
- interaksi user kadang dibutuhkan sebelum prompt install muncul.
210+
211+
---
212+
213+
## 🔐 Catatan Penggunaan
214+
215+
- Gunakan aplikasi ini untuk memudahkan ibadah, bukan menggantikan adab belajar dari guru.
216+
- Jika memodifikasi konten doa, lakukan tabayyun sumber terlebih dahulu.
217+
- Hindari memasukkan data pribadi sensitif ke dalam repository publik.
55218

56-
Pastikan seluruh isi folder ini berada di root repository `cakgup/ppsa`.
219+
---
57220

58-
## Catatan Jadwal Shalat
221+
## 🛠️ Teknologi
59222

60-
- Teks doa tetap dapat dibaca offline.
61-
- Jadwal shalat membutuhkan internet saat pertama kali mengambil data wilayah/bulan berjalan.
62-
- Setelah jadwal berhasil diambil, data bulan berjalan tersimpan di browser pengguna.
63-
- Fitur GPS hanya membantu mendeteksi wilayah dan tetap membutuhkan izin lokasi dari pengguna.
223+
| Teknologi | Fungsi |
224+
|---|---|
225+
| HTML | Struktur halaman |
226+
| CSS | Tampilan visual |
227+
| JavaScript | Interaksi aplikasi |
228+
| Service Worker | Dukungan offline |
229+
| Web App Manifest | Instalasi PWA |
64230

231+
---
65232

66-
## Catatan Normalisasi Teks Arab v5
233+
## 📜 Lisensi
67234

68-
- `data/doa.json` sekarang memiliki field tambahan `arabic_display`.
69-
- Field `arabic` tetap dipertahankan sebagai teks canonical PPSA.
70-
- Aplikasi menampilkan `arabic_display` agar tampilan Arab lebih halus, dengan separator koma Arab `،` seperti gaya file runtime TTS.
71-
- Jika `arabic_display` tidak tersedia, aplikasi otomatis fallback ke `arabic`.
235+
Repository ini menggunakan lisensi **GNU General Public License v3.0 (GPL-3.0)**.
236+
Lihat detail pada file [LICENSE](LICENSE).
72237

238+
---
73239

74-
## Revisi v7
75-
- Header Arab disesuaikan agar subjudul tidak terpotong.
76-
- Alignment judul Arab daftar doa dibuat konsisten.
77-
- Judul Wirid Setelah Shalat Fardhu diringkas.
78-
- Kartu Operasional Offline dihapus.
79-
- Footer kredit kecil ditambahkan pada halaman Info.
80-
- Cache service worker: ppsa-cache-v7.
240+
<p align="center">
241+
<strong>Dibuat dengan niat ibadah, dirawat dengan amanah, dan dibagikan untuk kemaslahatan.</strong>
242+
</p>

js/app.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@ function renderPrayerItems(section) {
358358

359359
const showSubsectionTitle = subsections.length > 1 || !/^umum$/i.test(subsections[0]?.title || '');
360360
container.innerHTML = subsections.map(sub => {
361-
const title = showSubsectionTitle ? formatSubsectionTitle(sub.title || 'Umum') : '';
361+
const title = showSubsectionTitle ? formatSubsectionTitle(getReaderSubsectionTitle(sub)) : '';
362362
const cards = (sub.items || []).map(item => prayerCard(item)).join('');
363363
const anchor = `<div class="subsection-anchor" id="subsection-${escapeHtml(sub.id)}"></div>`;
364364
return `${anchor}${title}${cards}`;
@@ -379,6 +379,15 @@ function renderPrayerItems(section) {
379379
}
380380
}
381381

382+
function getReaderSubsectionTitle(subsection = {}) {
383+
const title = String(subsection.title || '').trim();
384+
const titleOriginal = String(subsection.title_original || '').trim();
385+
const hasArabic = /[\u0600-\u06FF]/.test(title);
386+
const originalHasArabic = /[\u0600-\u06FF]/.test(titleOriginal);
387+
if (hasArabic || !originalHasArabic) return title || 'Umum';
388+
return titleOriginal;
389+
}
390+
382391

383392
function formatSubsectionTitle(title = '') {
384393
const cleanTitle = String(title || 'Umum').trim();

0 commit comments

Comments
 (0)