Tutorial

Tahap 3 - Membangun Frontend (The Body)

· 2 min read
Frontend Programming AI Javascript
Tahap 3 - Membangun Frontend (The Body)

🎨 1. Kerangka Struktur (frontend/index.html)

Kita buat sesederhana mungkin. Sebuah input, sebuah tombol, dan area untuk menampilkan jawaban si Agent.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Architect Dashboard | Fadam24</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>AI ARCHITECT</h1>
            <p class="subtitle">Autonomous Research Agent v1.0</p>
        </header>

        <main>
            <div class="input-group">
                <input type="text" id="topicInput" placeholder="Masukkan topik riset (misal: Masa Depan Web 3.0)...">
                <button id="searchBtn" onclick="startResearch()">MINTA RISET</button>
            </div>

            <div id="loading" class="hidden">
                <div class="spinner"></div>
                <p>Agen sedang menelusuri data...</p>
            </div>

            <div id="resultArea" class="result-box hidden">
                <h3>Hasil Riset:</h3>
                <div id="resultContent"></div>
            </div>
        </main>

        <footer>
            <p>&copy; 2026 fadam24.my.id - Built with AI & Python</p>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>

🖋️ 2. Desain Monokrom & Line-Art (frontend/style.css)

Di sini kita masukkan "jiwa" desain kamu. Kita pakai border tipis, warna hitam-putih-abu, dan font yang bersih.

:root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --border: #e0e0e0;
    --accent: #555555;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    justify-content: center;
    padding: 50px 20px;
}

.container {
    max-width: 700px;
    width: 100%;
}

h1 { font-weight: 800; letter-spacing: -1px; margin-bottom: 5px; }
.subtitle { color: var(--accent); font-size: 0.9rem; margin-bottom: 40px; }

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

input {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border);
    outline: none;
    font-size: 1rem;
}

button {
    background: var(--text);
    color: white;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

button:hover { opacity: 0.8; }

.result-box {
    border: 1px solid var(--text);
    padding: 20px;
    line-height: 1.6;
    white-space: pre-wrap; /* Jaga format teks dari AI */
}

.hidden { display: none; }

/* Animasi sederhana */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-top: 2px solid var(--text);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

⚡ 3. Logika Penghubung (frontend/script.js)

Inilah "Jembatan" yang mengirim apa yang kamu ketik ke server FastAPI di 8000.

async function startResearch() {
    const input = document.getElementById('topicInput');
    const btn = document.getElementById('searchBtn');
    const loading = document.getElementById('loading');
    const resultArea = document.getElementById('resultArea');
    const resultContent = document.getElementById('resultContent');

    if (!input.value) return alert("Isi dulu topiknya, Kay!");

    // UI Feedback
    loading.classList.remove('hidden');
    resultArea.classList.add('hidden');
    btn.disabled = true;

    try {
        const response = await fetch('http://127.0.0.1:8000/research', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ topic: input.value })
        });

        const data = await response.json();
        
        // Tampilkan Hasil
        resultContent.innerText = data.data;
        resultArea.classList.remove('hidden');
    } catch (error) {
        alert("Gagal konek ke Backend. Pastikan uvicorn sudah jalan ya!");
    } finally {
        loading.classList.add('hidden');
        btn.disabled = false;
    }
}

💡 Cara Mencoba Proyekmu

  1. Pastikan Backend (Uvicorn) masih jalan di terminal.
  2. Buka file index.html di browser (cukup klik kanan -> Open with Browser).
  3. Ketik sesuatu, klik tombol, dan lihat Agen kamu bekerja langsung di website buatanmu!

Lebih lanjut dari seri ini:

Materi Sebelumnya

Tahap 2: Membangun Backend (The Brain)

Share this article

Twitter/X LinkedIn