Gemini AI Chatbot - Final Project

Sistem penjadwalan SI UIN Alauddin dengan integrasi Gemini AI Chatbot.

🚀 Setup & Installation

Prerequisites

• Node.js (v14 atau lebih tinggi)
• npm atau yarn
• Gemini API Key (dari https://ai.google.dev/)

1. Install Dependencies

npm install

2. Konfigurasi Environment Variables

Duplikasi file .env.example menjadi .env:

cp .env.example .env

Edit file .env dan masukkan Gemini API Key Anda:

GEMINI_API_KEY=your_api_key_here
MODEL=gemini-2.5-flash-lite
PORT=3000

3. Jalankan Server

npm start

Server akan berjalan di http://localhost:3000

📋 Fitur

Frontend

• ✅ Tampilan jadwal kuliah interaktif (List & Grid mode)
• ✅ Filter berdasarkan hari, semester, dosen, dan ruangan
• ✅ Floating Chat Icon - Icon chat yang floating di kanan bawah
• ✅ Chat Popup Modal - Chatbot muncul dalam popup modal yang stylish
• ✅ Markdown rendering untuk respons bot
• ✅ Responsive design

Backend

• ✅ Express.js Server
• ✅ Integrasi Gemini API 2.5 Flash Lite
• ✅ CORS enabled untuk frontend
• ✅ Conversational memory - chatbot mengingat history percakapan

🎯 Cara Menggunakan Chatbot

1. Buka aplikasi - Halaman akan terbuka di browser
2. Klik Chat Icon - Icon chat floating di bagian kanan bawah layar
3. Ketik pesan - Tulis pertanyaan atau pesan Anda
4. Kirim - Tekan tombol "Kirim" atau Enter
5. Tutup - Klik tombol X di sudut kanan atas popup untuk menutup

Contoh Pertanyaan

• "Berikan rekomendasi wisata di Sulawesi Selatan"
• "Buat itinerary 3 hari ke Bantimurung"
• "Apa saja destinasi wisata di Makassar?"

📁 Struktur Folder

.
├── index.js                 # Backend server utama
├── package.json             # Dependencies & scripts
├── .env.example             # Template environment variables
├── public/
│   ├── index.html          # Main HTML file
│   ├── script.js           # Frontend JavaScript
│   ├── style.css           # Styling (termasuk chat icon & modal)
│   └── assets/             # Logo & gambar
└── README.md               # File ini

🔧 API Endpoints

POST /api/chat

Mengirim pesan ke Gemini AI dan mendapatkan respons.

Request:

{
  "conversation": [
    { "role": "user", "text": "Halo" },
    { "role": "model", "text": "Halo! Apa kabar?" }
  ]
}

Response:

{
  "result": "Respons dari Gemini AI..."
}

⚙️ Konfigurasi

Environment Variables

• GEMINI_API_KEY - API key untuk Gemini
• MODEL - Model Gemini yang digunakan (default: gemini-2.5-flash-lite)
• PORT - Port server (default: 3000)

System Instruction

Chatbot dikonfigurasi sebagai "Agen Penjadwalan Kuliah Pada Sistem Informasi UIN Alauddin Makassar" yang:

1. BATASAN BAHASA: Anda HANYA diizinkan merespons menggunakan Bahasa Indonesia yang baik, formal, dan mudah dipahami.
2. BATASAN DOMAIN: Anda HANYA beroperasi untuk lingkup Program Studi Sistem Informasi.
3. BATASAN TOPIK: Anda HANYA boleh menjawab pertanyaan yang berhubungan dengan jadwal perkuliahan, nama dosen, mata kuliah, hari, jam, dan ruangan kelas.
4. PENOLAKAN PERTANYAAN DI LUAR KONTEKS: Jika pengguna menanyakan hal di luar jadwal kuliah (misalnya: cara memprogram PHP, berita terkini, jadwal jurusan lain, resep makanan, dll), Anda WAJIB menolak dengan sopan.
   • Contoh Penolakan: "Mohon maaf, saya hanya asisten penjadwalan kuliah Jurusan Sistem Informasi UIN Alauddin Makassar. Saya tidak dapat menjawab pertanyaan di luar informasi jadwal perkuliahan."
5. KEBENARAN DATA (NO HALLUCINATION): Jawaban Anda WAJIB 100% bersumber dari [DATA JADWAL KULIAH] di bawah ini. Jangan pernah menebak, mengarang jadwal, atau memodifikasi waktu/ruangan. Jika data dosen, mata kuliah, atau jadwal yang dicari pengguna tidak ada di dalam daftar, sampaikan bahwa "Jadwal tersebut tidak ditemukan pada data Semester Genap 2025/2026."

🐛 Troubleshooting

API Key Error

• Pastikan file .env sudah ada dan berisi GEMINI_API_KEY
• Verify API key dari https://ai.google.dev/

CORS Error

• Server sudah dikonfigurasi dengan CORS enabled
• Pastikan frontend mengakses http://localhost:3000

Chat tidak terhubung

• Pastikan server running dengan npm start
• Buka browser console (F12) untuk melihat error details
• Check network tab untuk melihat API request

📝 Catatan Penting

1. Chat Memory - Setiap percakapan menyimpan history untuk konteks yang lebih baik
2. Markdown Support - Bot merespons dengan formatting Markdown yang akan di-render
3. Responsive - Chat modal responsive untuk mobile devices
4. Floating Icon - Icon always visible dan accessible di mana pun user berada di halaman

🎨 Customization

Mengubah Warna Chat Icon

Edit di public/style.css:

.chat-icon {
  background-color: #0d6efd; /* Ubah warna sini */
}

Mengubah System Instruction Bot

Edit di index.js, bagian systemInstruction di dalam request config.

Mengubah Posisi Chat Icon

Edit di public/style.css:

.chat-icon {
  bottom: 30px;  /* Jarak dari bawah */
  right: 30px;   /* Jarak dari kanan */
}

📞 Support

Untuk pertanyaan atau issues, silakan buat issue di repository ini.

---

Dibuat untuk Final Project RevoU Hacktivi Mini Project ✨