Prompt dan Source Code Aplikasi Al-Quran Digital Menggunakan Blogger

Membuat aplikasi berbasis web (Web App) dulunya membutuhkan keahlian coding yang rumit dan biaya server yang mahal. Namun, dengan memanfaatkan fitur XML pada Blogger dipadukan dengan API gratis, kita bisa menciptakan Aplikasi Al-Quran Digital 30 Juz yang sangat profesional, ringan, dan 100% responsif.

Aplikasi ini sangat cocok digunakan sebagai media pembelajaran Al-Quran atau portofolio web yang elegan.

✨ Fitur Unggulan Aplikasi

Tema Premium & Dark Mode

Desain UI/UX kelas atas (High-Contrast) ramah mata dengan peralihan mulus antara mode terang dan gelap.

Audio Murottal Cerdas

Audio per-ayat tanpa *overlap*. Dilengkapi auto-play ke ayat berikutnya tanpa membuat layar melompat paksa.

Jadwal Sholat Otomatis

Mendeteksi lokasi pengguna secara presisi (GPS/IP) dengan opsi pencarian kota secara manual via Modal interaktif.

Sistem "Last Read"

Sensor canggih menyimpan ayat terakhir dibaca secara otomatis. Dilengkapi fitur Bookmark untuk menyimpan ayat favorit.

Fuzzy Search (Pencarian)

Mencari surat menjadi sangat instan. Cukup ketik "baqarah" atau "yasin" dan hasil akan muncul tanpa perlu reload halaman.

SPA & Offline Cache

Berjalan sebagai Single Page Application. Navigasi super cepat dan tetap bisa menampilkan daftar surat meski tanpa internet.

🤖 Prompt Detail (AI Generator)

Ingin tahu bagaimana cara memerintahkan AI (seperti Gemini, ChatGPT, atau Claude) untuk membuat aplikasi sekompleks ini? Berikut adalah resep Prompt Engineering rahasianya:

Prompt AI

Bertindaklah sebagai Senior Frontend Web Developer. Buatkan saya kode lengkap (Single File XML) Tema Blogger untuk Aplikasi Al-Quran Digital Premium.

Kriteria Wajib:
1. Framework: Gunakan Bootstrap 5.3 (via CDN) dan Vanilla JavaScript modern (ES6). Font menggunakan 'Plus Jakarta Sans' dan 'Amiri Quran'.
2. Desain: Tema warna Deep Emerald Green (#08502F) & Gold Premium (#b8860b). Wajib mendukung High-Contrast Dark Mode otomatis. Layout harus 100% responsif hingga layar HP terkecil (360px).
3. API Integrasi:
   - equran.id/api/v2 untuk data 114 surat, ayat, teks latin, terjemahan, dan audio Murottal (Kunci di Qori Misyari Rasyid/05).
   - api.aladhan.com untuk jadwal sholat harian 5 waktu + Imsak berdasarkan Geolocation otomatis atau input manual via Modal Bootstrap.
4. Fitur Spesifik Aplikasi:
   - Pencarian Cerdas (Fuzzy Search) tanpa peduli spasi atau kapital.
   - Sistem Single Page Application (SPA): Navigasi antar surat menggunakan hash router URL (#surah-1) tanpa memuat ulang halaman. Tombol Back browser harus berfungsi sempurna.
   - Audio Pintar: Audio tidak menumpuk saat diputar beruntun. Mendukung Auto-play ayat selanjutnya TANPA menarik/memaksa layar melompat (No Scroll Hijacking).
   - LocalStorage Cache: Menyimpan status Dark Mode, Bookmark Ayat, Cache Daftar 114 Surat (agar bisa diakses saat offline), dan Cache Lokasi/Jadwal Sholat harian.
   - Auto Last Read: Gunakan Intersection Observer (threshold 0.2) untuk mendeteksi dan menyimpan ayat yang sedang dibaca di tengah layar tanpa perlu menekan tombol apa pun. Munculkan Banner "Lanjutkan Membaca" di halaman utama.

Kondisikan agar seluruh script berjalan secara asinkronus dengan aman, tidak memicu "Mixed Content", dan ramah SEO.

📥 Download Source Code Lengkap

Jika Anda tidak ingin repot berurusan dengan AI atau coding, Anda bisa langsung mengunduh file XML yang sudah 100% matang, bersih dari bug, dan siap pasang di Blogger Anda.