Tahap 1: Persiapan Arsitektur (Struktur Folder)

📂 Langkah 1: Membuat Struktur Folder

Buka terminal (atau File Explorer) dan buat folder utama dengan struktur sebagai berikut. Pastikan kamu berada di dalam folder proyek ini sebelum lanjut ke tahap koding.

/ai-research-dashboard
├── /backend
│   ├── app.py              # Server Utama (FastAPI)
│   ├── agents.py           # Logika AI Agent & Tools
│   └── .env                # API Keys (Jangan di-upload ke GitHub!)
├── /frontend
│   ├── index.html          # Kerangka Dashboard
│   ├── style.css           # Desain Monokrom fadam24
│   └── script.js           # Penghubung ke AI
└── requirements.txt        # Daftar "Bahan Baku" (Library)

🐍 Langkah 2: Menyiapkan Virtual Environment (Venv)

Agar library AI kita tidak bentrok dengan proyek lain, kita wajib pakai venv. Di dalam folder /ai-research-dashboard, jalankan perintah berikut di terminal:

# Membuat environment
python -m venv venv

# Mengaktifkan environment
# Jika di Windows:
venv\Scripts\activate
# Jika di Mac/Linux:
source venv/bin/activate

📦 Langkah 3: Mengisi requirements.txt

Buka file requirements.txt dan masukkan daftar library yang kita butuhkan. Kita akan menggunakan FastAPI untuk server, Uvicorn untuk menjalankannya, dan Google Generative AI sebagai otaknya.

Isi file requirements.txt:

fastapi
uvicorn
google-generativeai
python-dotenv
pandas

Setelah itu, instal semuanya dengan satu perintah:

pip install -r requirements.txt

🔐 Langkah 4: Mengamankan API Key

Buat file bernama .env di dalam folder /backend (atau di root folder juga boleh). Masukkan kunci rahasia kamu di sana:

GOOGLE_API_KEY=AIzaSyAxxxxxxxxxxxxxxxxxxxxxx

💡 Tips Arsitek: Kenapa Struktur Ini?

Kita memisahkan Backend dan Frontend.

• Jika suatu saat kamu ingin mengganti tampilan webnya (Frontend), logikanya (Backend) tidak akan rusak.
• Sebaliknya, kalau kamu mau ganti dari Gemini ke GPT, kamu cuma perlu utak-atik folder /backend tanpa menyentuh tampilan web.