Prompt AI Gratis

Prompt Aplikasi Bel Sekolah Otomatis Berbasis Google Apps Script

Gunakan masterprompt ini untuk meminta AI membuat rancangan frontend aplikasi bel sekolah otomatis terlebih dahulu, sebelum lanjut ke backend dan integrasi database.

Lihat Prompt Lain Lihat Produk

Masterprompt

Salin prompt, lalu gunakan di ChatGPT atau AI coding pilihanmu.

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.

jika kamu membutuhkan informasi lain untuk memperjelas keinginanku, boleh tanyakan beberapa hal. Namun jika sudah paham, tuliskan masterpromptnya sekarang.

4. Jangan berikan kode Backend (Code.gs) sekarang. Tunggu konfirmasi saya setelah melihat hasil UI.

Penting: Masterprompt itu harus kamu tulis apa adanya. Jangan diubah, jangan dikurang maupun dihapus sebagian.

Solusi Siap Pakai

Mau Aplikasi Bel Sekolah yang langsung siap pakai tanpa ribet bangun dari awal?

Kalau ingin lebih cepat digunakan di sekolah, versi produk siap pakai sudah dirancang untuk membantu operator mengatur jadwal bel, audio, TTS, dan identitas sekolah melalui dashboard web app yang praktis.

Lihat Selengkapnya Dapatkan Versi Siap Pakai