Sesi 5 — Chatbot Domain Spesifik

1. Kenapa Chatbot Domain Spesifik Lebih Bernilai?

Chatbot generik seperti ChatGPT sudah ada dan gratis. Nilai produkmu ada pada spesialisasi — AI yang benar-benar ahli di satu bidang, dengan konteks dan persona yang tepat untuk pengguna spesifikmu. Itulah yang membuat orang mau membayar!

Bayangkan kamu pergi ke dokter umum vs dokter spesialis jantung. Keduanya dokter, tapi untuk masalah jantung kamu pasti pilih spesialis. Chatbot domain spesifik itu seperti dokter spesialis AI — hanya fokus pada satu bidang, tapi jauh lebih dalam, relevan, dan dapat dipercaya untuk topik tersebut dibanding chatbot generik.

Contoh chatbot domain spesifik yang bernilai tinggi: chatbot hukum perdata Indonesia, chatbot diagnosa tanaman padi, chatbot konsultasi gizi ibu hamil, chatbot peraturan perpajakan UMKM, atau chatbot FAQ produk e-commerce tertentu.

2. Alur Membangun Chatbot PHP Step-by-Step

Membangun chatbot PHP bisa dipecah menjadi 5 langkah berurutan. Kuasai tiap langkah, dan kamu bisa membangun chatbot apa pun:

1

Buat Form Input + Tampilan Percakapan (HTML/CSS)

Desain UI: kolom input teks, tombol kirim, dan area tampilan bubble chat. Bubbles kiri untuk AI, kanan untuk user. Gunakan JavaScript untuk menambah bubble baru tanpa reload halaman.

2

JavaScript Kirim AJAX ke PHP Backend

Saat user klik "Kirim", JavaScript mengambil isi input, mengirimnya via fetch() ke file PHP (chat_handler.php), dan menunggu respons JSON. Jangan reload halaman!

3

PHP Terima Pesan → Bangun Array Messages

PHP menerima pesan dan history percakapan dari JavaScript. Susun array messages: [system prompt, ...history, pesan baru]. System prompt mendefinisikan domain chatbot.

4

PHP Panggil Groq API via cURL

Kirim array messages ke Groq API menggunakan fungsi groq_chat() dari api.php. Tangani error: cURL error, HTTP 401 (key invalid), HTTP 429 (rate limit), response kosong.

5

Kembalikan JSON → JavaScript Tampilkan Bubble

PHP encode jawaban AI sebagai JSON dan echo. JavaScript terima, parse, lalu append bubble baru di area chat. Scroll otomatis ke bawah agar bubble terbaru selalu terlihat.

3. Kode Lengkap Chatbot PHP + JavaScript

Berikut implementasi chatbot domain spesifik lengkap dalam dua file. Klik tab untuk berganti:

<?php // chatbot.php — Backend chatbot domain spesifik require_once 'api.php'; // ── Hanya proses jika POST request ── if ($_SERVER['REQUEST_METHOD'] === 'POST') { $input = groq_get_post_input(); $userMsg = $input['message']; $history = $input['history']; // max 10 pesan terakhir if (empty($userMsg)) { header('Content-Type: application/json'); echo json_encode(['reply' => 'Silakan ketik pesan terlebih dahulu.']); exit; } // ── SYSTEM PROMPT: Definisikan domain chatbot ── $system = <<; // ── Bangun array messages dengan history ── $messages = [['role' => 'system', 'content' => $system]]; foreach ($history as $h) { if (isset($h['role'], $h['content'])) $messages[] = ['role' => $h['role'], 'content' => $h['content']]; } $messages[] = ['role' => 'user', 'content' => $userMsg]; // ── Panggil Groq API ── $reply = groq_chat($messages, 0.6, 512); // ── Kembalikan JSON ke frontend ── header('Content-Type: application/json'); echo json_encode(['reply' => $reply]); exit; } ?>

<div class="chat-container"> <div id="messages" class="messages-area">  </div> <div class="input-area"> <input type="text" id="userInput" placeholder="Tanya soal pertanian..."/> <button onclick="sendMessage()">Kirim</button> </div> </div> <script> // Simpan history percakapan di sisi client let chatHistory = []; function appendBubble(text, role) { const msgs = document.getElementById('messages'); const bubble = document.createElement('div'); bubble.className = `bubble ${role}`; // CSS: .bubble.user / .bubble.bot bubble.textContent = text; msgs.appendChild(bubble); msgs.scrollTop = msgs.scrollHeight; // auto-scroll ke bawah } async function sendMessage() { const input = document.getElementById('userInput'); const msg = input.value.trim(); if (!msg) return; input.value = ''; // Kosongkan input appendBubble(msg, 'user'); // Tampilkan bubble user chatHistory.push({role:'user', content:msg}); appendBubble('⏳ Mengetik...', 'typing'); // Typing indicator try { const res = await fetch('chatbot.php', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ message: msg, history: chatHistory.slice(-10) // Kirim 10 pesan terakhir }) }); // Hapus typing indicator document.querySelector('.bubble.typing')?.remove(); const data = await res.json(); const reply = data.reply || 'Maaf, terjadi kesalahan.'; appendBubble(reply, 'bot'); chatHistory.push({role:'assistant', content:reply}); } catch (err) { document.querySelector('.bubble.typing')?.remove(); appendBubble('❌ Koneksi gagal. Periksa server PHP-mu.', 'error'); } } // Kirim dengan tekan Enter document.getElementById('userInput') .addEventListener('keydown', e => { if (e.key === 'Enter') sendMessage(); }); </script>

4. Menangani Error API dengan Elegan

Produk yang baik tidak crash saat terjadi error — ia memberikan pesan yang informatif kepada pengguna. Berikut error yang paling sering terjadi saat bekerja dengan API LLM dan cara menanganinya:

Error Code	Penyebab	Cara Tangani
[ERROR-401]	API key tidak valid atau sudah dihapus	Tampilkan pesan "Layanan sedang bermasalah, coba lagi nanti" — jangan ekspos detail teknis ke user
[ERROR-429]	Rate limit tercapai (terlalu banyak request)	Tampilkan "Asisten sedang sibuk, mohon tunggu beberapa saat" + tombol coba lagi setelah 5 detik
[ERROR-CURL]	Koneksi gagal (server down, timeout)	Tampilkan "Gagal terhubung ke server AI. Periksa koneksi internet" + saran hubungi admin
[ERROR-404]	Response kosong atau format tidak dikenal	Tampilkan pesan generik "Maaf, saya tidak bisa memproses permintaan ini saat ini"
Input Kosong	User klik kirim tanpa mengetik apapun	Validasi di JavaScript sebelum mengirim ke server: if (!msg) return;

⚠️ Jangan Tampilkan Error Teknis ke Pengguna

Pesan seperti "cURL error 7: Failed to connect" atau "[ERROR-401] Unauthorized" hanya boleh tampil di log server atau console browser — bukan di UI produkmu. Pengguna tidak butuh tahu detail teknis; mereka hanya butuh tahu apa yang harus dilakukan selanjutnya.

Menjaga Konteks Percakapan

Salah satu "kekuatan super" chatbot yang baik adalah bisa mengingat percakapan sebelumnya. Caranya: kirim array history bersama setiap request. Tapi batasi maksimal 10 pesan terakhir agar tidak membuang token (dan biaya) untuk context yang sudah tidak relevan.

💡 Mengapa Batasi History ke 10 Pesan?

Setiap token yang dikirim ke API dihitung biayanya. Mengirim seluruh history percakapan dari awal bisa membuat cost melonjak dan response melambat. Praktik terbaik: kirim 5–10 pesan terakhir yang masih relevan. Untuk percakapan panjang, pertimbangkan menyimpan summary di database.

5. Lab: Bangun Chatbot Domain Spesifikmu Sendiri!

Pilih preset domain atau tulis system prompt sendiri di kolom kiri, lalu langsung uji chatbot-mu di kolom kanan. Ini adalah simulasi nyata dari chatbot yang akan kamu bangun untuk proyek kelompok:

🔬 Chatbot Domain Builder

Powered by Groq · llama-3.1-8b-instant

Preset Domain Cepat

System Prompt

Domain Chatbot — Aktif

Halo! Atur system prompt di kiri dan mulai chat. Saya akan menjawab sesuai domain yang kamu definisikan. 🤖