GITHUB COPILOT

1. Instal Visual Studio Code

2. Buka VS Code, klik extension, cari Live Server dan Github Copilot - Instal

3. Buat akun di github.com

4. Buat folder di Drive, Drag ke dalam VS Code

5. Buka chat gpt . Prompt : anda modifikasi prompt kalimat saya ini, masukan kalimat lengkap dengan fundamentalnya. saya akan membuat website untuk puskesmas pemanggilan pasien dengan suara untuk pemanggilan pasien. anda buatkan html css dan javascript 

6. Copy prompt yang sudah di modifikasi chat gpt tadi : Prompt Modifikasi : 

 Tujuan: Membuat sebuah website untuk Puskesmas yang berfungsi sebagai sistem pemanggilan pasien dengan suara berbasis Web Speech API. Sistem harus mampu menampilkan daftar antrian pasien, memanggil pasien secara otomatis maupun manual, dan mengumumkan nomor antrian atau nama pasien menggunakan suara.

Kebutuhan Fungsional:
• Menambah, menghapus, atau memproses antrian pasien.
• Memanggil pasien secara manual (Call), ulangi panggilan (Repeat), lewati pasien (Skip), dan hentikan suara (Stop).
• Mode otomatis untuk memanggil urutan pasien dengan jeda waktu tertentu.
• Dukungan text-to-speech (TTS) dengan pilihan suara, volume, dan kecepatan bicara.
• Riwayat log untuk semua panggilan pasien.
• Fitur import contoh antrian, export log, dan format kalimat pengumuman yang fleksibel.

Kebutuhan Non-Fungsional (Fundamental System Requirements):
• Interface responsif dan mudah digunakan oleh petugas Puskesmas.
• Menggunakan HTML, CSS, dan JavaScript murni tanpa backend.
• Ramah aksesibilitas (kontras, navigasi keyboard, pesan status).
• Data hanya disimpan di memori browser (frontend only).
• Kompatibel dengan browser modern (Chrome/Edge/Firefox).
• Privasi terjaga: tidak menyimpan data sensitif pasien secara permanen.

Output: Buatkan satu file HTML berisi struktur HTML + CSS + JavaScript yang menjalankan sistem pemanggilan pasien dengan suara.

7. Buka https://docsbot.ai/prompts dan Paste Prompt  

8. Maka akan dibuatkan prompt yang lebih terstruktur. Copi prompt nya : 

Buat sebuah file HTML tunggal yang mencakup HTML, CSS, dan JavaScript untuk sistem pemanggilan pasien Puskesmas berbasis Web Speech API tanpa backend. Sistem harus menyediakan fitur berikut:

- Menampilkan daftar antrian pasien yang bisa ditambah, dihapus, dan diproses.

- Memungkinkan pemanggilan pasien secara manual (Call), pengulangan panggilan (Repeat), melewati pasien (Skip), dan menghentikan suara (Stop).

- Mode otomatis yang memanggil pasien secara berurutan dengan jeda waktu configurable.

- Text-to-Speech (TTS) menggunakan Web Speech API dengan opsi pengaturan suara, volume, dan kecepatan bicara.

- Menampilkan riwayat log semua panggilan pasien yang dapat diekspor.

- Menyediakan fitur import contoh antrian dan ekspor log.

- Mendukung format kalimat pengumuman yang fleksibel, misalnya "Nomor antrian [nomor] dipersilakan ke loket."

Selain itu, sistem harus :

- Memiliki interface yang responsif dan mudah digunakan untuk petugas Puskesmas.

- Menggunakan HTML, CSS, dan JavaScript murni tanpa backend.

- Memenuhi standar aksesibilitas (kontras warna tinggi, navigasi keyboard, pesan status yang jelas).

- Menyimpan seluruh data hanya di memori browser (frontend only), tanpa menyimpan data sensitif secara permanen.

- Kompatibel dengan browser modern seperti Chrome, Edge, dan Firefox.

Struktur kode harus jelas dan rapi, serta menyediakan interaksi pengguna yang intuitif sesuai kebutuhan fungsional.

# Langkah-langkah utama:

1. Buat markup HTML untuk daftar antrian, kontrol panggilan (Call, Repeat, Skip, Stop), pengaturan TTS, mode otomatis, import/export data, dan log panggilan.

2. Terapkan CSS agar tampilan responsif, mudah dinavigasi via keyboard, dan memenuhi standar kontras warna.

3. Implementasikan JavaScript yang mengelola antrian pasien, kontrol suara menggunakan Web Speech API, fitur import/export, dan penyimpanan data di memori browser.

4. Pastikan suara yang dihasilkan sesuai pengaturan suara, volume, dan kecepatan.

5. Tambahkan fungsionalitas log panggilan dengan opsi ekspor.

6. Implementasikan mode otomatis memanggil pasien dengan jeda waktu tertentu yang dapat dikonfigurasi petugas.

# Format Output

Berikan hasil dalam satu file HTML lengkap yang dapat langsung dibuka di browser modern dan menjalankan seluruh sistem secara mandiri tanpa ketergantungan eksternal.

# Contoh Pengumuman

"Nomor antrian 5 dipersilakan ke loket." atau "Pasien dengan nama Budi dipersilakan masuk."

# Catatan

- Jangan gunakan library atau backend external.

- Pastikan tidak ada penyimpanan data pasien secara permanen di luar memori sementara.

- Manfaatkan Web Speech API standar untuk text-to-speech.

- Sistem harus mudah digunakan dan sesuai standar aksesibilitas.

9. Buka VS Code

10. Di sidebar kanan cari Chat, hubungkan ke akun github terlebih dahulu

11. Paste prompt diatas tadi ke add context, enter dan tunggu github copilot bekerja membuatkan coding

12. Klik keep

13. Klik kanan, Open With Live Server

14. Untuk melakukan perubahan tuliskan prompt di kolom add context tadi atau langsung ubah di dalam code