Prompt Aplikasi Bel Sekolah

Rancang aplikasi bel sekolah otomatis berbasis Google Apps Script. Mulai dari frontend, lalu lanjutkan ke backend dan integrasi database.

Prompt siap disalin.

Bertindaklah sebagai Senior Full-Stack Developer yang ahli dalam Google Apps Script (GAS) dan Web Development.
Saya ingin Anda membangun aplikasi "Sistem Bel Sekolah Otomatis" berbasis web.

PENTING: Kerjakan tugas ini secara BERTAHAP. 
- TAHAP 1: Fokus pada rancangan FRONTEND (HTML/CSS/JS) terlebih dahulu. 
- TAHAP 2: Setelah saya menyetujui frontend, kita akan lanjut ke BACKEND (Code.gs) dan integrasi Database.

--- TUGAS TAHAP 1: FRONTEND ---
Buatlah kode frontend dalam satu file 'index.html' yang mencakup CSS (Bootstrap 5) dan JavaScript. Antarmuka harus profesional, bersih (seperti dashboard manajemen), dan responsif.

Fitur UI Dashboard:
1. Jam Digital Real-time: Tampilan waktu besar dengan detik.
2. Tombol "AKTIFKAN MESIN": Tombol krusial untuk melewati 'Browser Autoplay Policy'. Mesin bel tidak akan berjalan sebelum tombol ini diklik.
3. Kartu Statistik: Menampilkan 'Total Jadwal Hari Ini', 'Bel Terlewati', dan 'Sisa Bel'.
4. Tabel Jadwal Selanjutnya: Menampilkan hitung mundur (countdown) ke bel berikutnya.
5. Panel Kontrol Cepat: Tombol "Test Audio" dan "Test TTS (Bahasa Indonesia)".

Fitur UI Pengaturan:
1. Form Input Jadwal: Kolom Hari, Waktu (HH:MM), Status (Aktif/Nonaktif).
2. Pilihan Mode Pemutaran (Dropdown): 
   - Audio Saja
   - TTS Saja
   - Audio kemudian TTS
   - TTS kemudian Audio
3. Pengaturan Identitas: Input Nama Sekolah dan fitur Upload Logo (Base64).

Logika JavaScript (Frontend):
- Gunakan setInterval 1 detik untuk jam dan pengecekan jadwal.
- Gunakan Web Speech API untuk TTS (id-ID).
- Buat fungsi 'PlaySequence' yang menangani logika: Audio (HTML5 Audio), TTS, atau kombinasi keduanya secara berurutan (menggunakan event listener 'ended' atau Promise).
- Data jadwal harus diambil sekali saat load awal (caching) untuk efisiensi.

--- TUGAS TAHAP 2 (HANYA DIKERJAKAN SETELAH TAHAP 1 SELESAI): BACKEND & DB ---
Logika Otomatisasi Database di Code.gs:
1. Cek Spreadsheet: Script harus mengecek apakah file Spreadsheet bernama "DB_BEL_SEKOLAH" sudah ada di Drive. Jika belum, buat file baru.
2. Cek Sheet & Kolom: Jika file sudah ada, cek keberadaan sheet "Jadwal", "Pengaturan", dan "Log". Jika belum ada, buat sheet tersebut beserta header kolomnya:
   - Jadwal: ID, Hari, Waktu, Mode, Teks_TTS, URL_Audio, Status.
   - Pengaturan: Kunci, Nilai.
   - Log: Timestamp, Keterangan.
3. Fungsi CRUD: Sediakan fungsi getJadwal, simpanJadwal, hapusJadwal, dan updateSettings yang bisa dipanggil dari frontend melalui google.script.run.

--- INSTRUKSI OUTPUT ---
1. Sekarang, kerjakan TAHAP 1 (FRONTEND) saja terlebih dahulu.
2. Jelaskan di bagian mana logika 'Autoplay Policy' ditangani.
3. Jelaskan cara kerja fungsi 'PlaySequence' untuk menangani kombinasi Audio + TTS.
4. Jangan berikan kode Backend (Code.gs) sekarang. Tunggu konfirmasi saya setelah melihat hasil UI.

Ingin langsung menggunakan aplikasi bel sekolah? Lihat produk siap pakai untuk jadwal, audio, TTS, dan identitas sekolah.

Lihat produk bel sekolah Dapatkan versi siap pakai