Cara Membuat Chatbot Pintar Untuk website Powered by Ai

Dokumentasi Lengkap: Aplikasi Chatbot AI Pintar

1. Deskripsi Aplikasi

Chatbot AI Cerdas adalah sebuah asisten virtual yang dirancang untuk diintegrasikan ke dalam website. Tidak seperti chatbot biasa, aplikasi ini memiliki "otak" yang ditenagai oleh model AI generatif canggih (Google Gemini) dan memiliki kemampuan untuk menjawab pertanyaan pengguna berdasarkan basis pengetahuan yang spesifik dari data yang dimasukan dan dari konten website Anda.

Aplikasi ini mampu memahami pertanyaan dalam bahasa alami dan memberikan jawaban yang relevan dan kontekstual, yang diambil dari dua sumber utama:

1. Database Pengetahuan Khusus: Sebuah file Google Sheets yang berisi daftar tanya-jawab (FAQ) atau informasi prioritas lainnya.

2. Konten Website (Blog): Chatbot secara otomatis membaca dan memahami semua artikel atau halaman di website Anda untuk memberikan jawaban yang komprehensif.

Tujuannya adalah untuk meningkatkan interaksi pengguna, menyediakan dukungan pelanggan 24/7, dan mengurangi beban kerja tim support dengan menjawab pertanyaan-pertanyaan umum secara otomatis.

2. Teknologi yang Dipakai

Aplikasi ini dibangun menggunakan tumpukan teknologi modern yang andal dan skalabel.

Backend (Otak Operasi)

• Bahasa Pemrograman: Python

• Framework Web: Flask

• Model AI: Google Generative AI (Gemini 2.5 Flash) untuk pemahaman bahasa dan pembuatan jawaban.

• Database Vektor: Scikit-learn & Numpy untuk membuat dan mencari embeddings (representasi numerik dari teks) agar dapat menemukan konten yang paling relevan dengan pertanyaan pengguna.

• Integrasi Data: Google Sheets API untuk mengambil data dari spreadsheet secara dinamis.

Frontend (Tampilan Pengguna)

• Struktur: HTML5

• Gaya & Desain: CSS3 (termasuk media queries untuk desain responsif di desktop dan mobile).

• Interaktivitas: JavaScript (untuk menangani input pengguna, mengirim permintaan ke backend, dan menampilkan respons).

Infrastruktur & Deployment

• Hosting Backend: Google Cloud Run, sebuah platform serverless yang secara otomatis menyesuaikan skala berdasarkan lalu lintas, sehingga efisien dan hemat biaya.

3. Untuk Siapa Aplikasi Ini?

Aplikasi ini sangat ideal untuk:

• Pemilik Blog & Website Konten: Untuk membantu pembaca menemukan informasi yang relevan dari puluhan atau ratusan artikel dengan cepat.

• Bisnis Kecil & Menengah (UKM): Untuk menyediakan layanan pelanggan dasar, menjawab pertanyaan tentang produk, layanan, atau jam operasional di luar jam kerja.

• Portolio Pribadi & Profesional: Untuk memberikan cara interaktif bagi pengunjung untuk mempelajari lebih lanjut tentang keahlian dan proyek Anda.

• Penyelenggara Acara (Event Organizer): Untuk menjawab pertanyaan umum seputar jadwal, lokasi, dan tiket acara.

4. Cara Pemasangan (Step-by-Step)

Karena aplikasi ini menggunakan kode API Gemini, maka agar kode rahasia tersebut tersimpan aman tidak terekspos di barisan kode, maka Chatbot ini menggunakan file koding Frontend dan Backend. Kode frontend untuk menyimpan tampilan Chatbot dan kode backend untuk menyimpan kode API Gemini dan memproses jawaban dari Ai. 

Dalam contoh yang dibuat ini, untuk kode frontend disimpan di server Blogger (Google) karena www.isparmo.com itu adalah Blogspot custom domain.

Sedangkan kode backend dihosting di Google Cloud (cara mendaftar Google Cloud tidak dijelaskan detail dalam posting ini).

Untuk mempermudah pengembangan Chatbot ini, saya menggunakan aplikasi VS Code, yang bisa di download gratis di https://code.visualstudio.com/download 

Bagian 1: Konsep dan Perancangan Awal

Sebelum menulis satu baris kode pun, kita harus memiliki konsep yang jelas.

Konsep Inti: Kita akan membuat chatbot yang bisa di-embed di website mana pun. Chatbot ini memiliki dua sumber pengetahuan:

1. Pengetahuan Umum (Website): Kemampuan untuk membaca dan memahami semua konten dari sitemap sebuah website.

2. Pengetahuan Khusus (FAQ): Kemampuan untuk menjawab pertanyaan spesifik berdasarkan data yang kita masukkan ke dalam Google Sheet.

Untuk mewujudkan ini, kita akan meminta Gemini untuk membuat dua komponen utama: sebuah backend (otak) dengan Python dan sebuah frontend (tampilan) dengan HTML/CSS/JS.

Bagian 2: Membuat Kode dengan Gemini (Nge-Prompt)

Buka antarmuka AI Anda (misalnya, Gemini Pro dalam mode Canvas) dan berikan perintah yang detail dan spesifik. Prompt yang baik adalah kunci untuk mendapatkan hasil yang baik.

Prompt Awal untuk Backend dan Frontend

Berikut adalah contoh prompt yang bisa Anda gunakan untuk menghasilkan kode dasar main.py dan frontend.html

Buatkan saya aplikasi chatbot cerdas dalam dua bagian:

1. Backend (Python & Flask):

• Gunakan Flask sebagai framework.

• Buat endpoint /chat yang menerima permintaan POST dengan JSON berisi query dari pengguna.

• Backend harus bisa mencari jawaban dari dua sumber: a. Google Sheet: Buat fungsi untuk mencari jawaban berdasarkan keyword di Google Sheet. b. Database Vektor: Buat fungsi untuk mencari konten yang relevan dari database file embeddings.json dan index_to_content.json

• Gabungkan kedua hasil pencarian tersebut, lalu buat prompt yang terstruktur untuk dikirim ke model AI generatif (Gemini).

• Tambahkan logika rotasi untuk menggunakan beberapa API key Gemini secara bergantian. 

• Pastikan ada endpoint /wakeup untuk mengatasi cold start.

• Atur CORS agar bisa diakses dari semua domain.

2. Frontend (HTML, CSS, JS dalam satu file):

• Buat tampilan antarmuka chatbot yang modern, dengan tombol "Tanya Saya" yang melayang.

• Saat tombol diklik, muncul jendela chat yang responsif untuk desktop dan mobile.

• Saat jendela chat pertama kali dibuka, panggil endpoint /wakeup di backend.

• Buat fungsi JavaScript untuk mengirim pertanyaan pengguna ke endpoint /chat di backend dan menampilkan jawaban dari AI.

• Tambahkan indikator "mengetik..." saat menunggu jawaban.

• Pastikan semua kode (HTML, CSS, JS) berada dalam satu file agar mudah dipasang.

Setelah Anda memberikan prompt ini, AI akan menghasilkan dua blok kode utama yang menjadi fondasi aplikasi Anda.

Bagian 3: Membangun Basis Pengetahuan

Chatbot tidak akan tahu apa-apa tentang website Anda tanpa "membacanya" terlebih dahulu. Di sinilah peran skrip create_index.py

Prompt untuk Skrip create_index.py

Buatkan saya skrip Python bernama create_index.py Skrip ini harus:

1. Menerima input URL sitemap dari sebuah website.

2. Mengunjungi setiap URL di dalam sitemap.

3. Mengambil teks utama dari setiap halaman dan membersihkannya dari tag HTML.

4. Memecah teks menjadi potongan-potongan kecil (chunks).

5. Menggunakan model embedding dari Google Generative AI untuk mengubah setiap potongan teks menjadi vektor angka (embedding).

6. Menyimpan semua vektor embedding ke dalam file embeddings.json

7. Menyimpan pemetaan antara setiap embedding dengan konten teks aslinya dan URL sumbernya ke dalam file index_to_content.json

Menjalankan Skrip

1. Simpan kode yang dihasilkan sebagai create_index.py

2. Buka terminal kompter atau VS Code, navigasi ke folder proyek Anda.

3. Jalankan perintah: python create_index.py

4. Setelah selesai, Anda akan memiliki dua file .json yang menjadi "otak" kedua chatbot Anda.

Bagian 4: Menyiapkan Deployment

Sebelum aplikasi bisa di-hosting, kita perlu menyiapkan dua file konfigurasi penting.

1. requirements.txt : Daftar semua library Python yang dibutuhkan.

   Flask==2.3.2
   Flask-Cors==4.0.0
   google-generativeai==0.5.4
   google-api-python-client==2.110.0
   google-auth-httplib2==0.2.0
   google-auth-oauthlib==1.2.0
   requests==2.31.0
   beautifulsoup4==4.12.3
   gunicorn==21.2.0
   lxml
   scikit-learn
   numpy
   
   

2. Dockerfile : "Resep" bagi Google Cloud untuk membangun aplikasi Anda.

   # Gunakan base image Python
   FROM python:3.9-slim
   
   # Tetapkan direktori kerja
   WORKDIR /app
   
   # Salin semua file proyek
   COPY . .
   
   # Instal semua dependensi
   RUN pip install --no-cache-dir -r requirements.txt
   
   # Perintah untuk menjalankan aplikasi saat container dimulai
   CMD ["gunicorn", "--bind", "0.0.0.0:8080", "main:app"]
   
   

Bagian 5: Deployment ke Google Cloud Run

Sekarang, saatnya membawa aplikasi Anda online.

1. Buka Google Cloud Console: Pastikan Anda sudah memiliki proyek dan akun penagihan aktif.

2. Aktifkan API: Aktifkan "Cloud Run API" dan "Cloud Build API".

3. Buka Cloud Shell: Klik ikon >_ di pojok kanan atas untuk membuka terminal langsung di browser.

4. Unggah Proyek Anda: Di Cloud Shell, unggah seluruh folder proyek Anda.

5. Jalankan Perintah Deploy: Navigasi ke dalam folder proyek Anda di Cloud Shell, lalu jalankan perintah berikut. Ganti placeholder dengan nilai Anda.

   gcloud run deploy NAMA-LAYANAN-ANDA \
     --source . \
     --region asia-southeast1 \
     --allow-unauthenticated
   
   

6. Konfigurasi Environment Variables (Sangat Penting!):

   • Setelah deployment pertama selesai, pergi ke layanan Cloud Run Anda.

   • Klik "Edit & Deploy New Revision".

   • Buka tab "Variables & Secrets".

   • Tambahkan tiga variabel berikut:

     • GEMINI_API_KEYS : Masukkan API key Gemini Anda.

     • GCP_SA_KEY_JSON : Tempel seluruh isi file JSON dari Service Account Anda.

     • SPREADSHEET_ID : Masukkan ID Google Sheet Anda.

7. Deploy Ulang: Klik "Deploy". Setelah selesai, Cloud Run akan memberikan URL akhir untuk backend Anda. Salin URL ini.

Bagian 6: Pemasangan di Website Anda

Ini adalah langkah terakhir.

1. Buka Kode frontend.html 

2. Cari dan Ganti URL: Temukan baris ini di dalam bagian <script>

   const CHAT_URL = '...';
   
   

3. Tempel URL Anda: Ganti URL yang ada di sana dengan URL dari Cloud Run yang baru saja Anda dapatkan. Pastikan diakhiri dengan  /chat

4. Salin Seluruh Kode: Salin seluruh isi file frontend.html yang sudah diperbarui.

5. Tempel di Website: Masuk ke dasbor website Anda (Blogspot, WordPress, dll.), cari opsi untuk menambahkan "HTML/JavaScript" atau "Custom HTML", lalu tempel seluruh kode di sana.

6. Simpan & Publikasikan.

Selamat! Chatbot AI Cerdas Anda kini sudah aktif dan siap membantu pengunjung website Anda.

6. Cara Menggunakan Chatbot

Penggunaan chatbot ini sangat intuitif bagi pengunjung website:

1. Klik Tombol: Pengguna mengklik tombol "Tanya Saya" yang melayang di pojok kanan bawah.

2. Proses "Wakeup": Jika ini adalah interaksi pertama setelah beberapa saat, sebuah progress bar akan muncul dengan pesan lucu, menandakan server sedang "bangun". Proses ini hanya berlangsung beberapa detik.

3. Ketik Pertanyaan: Setelah progress bar hilang, pengguna bisa langsung mengetik pertanyaannya di kotak input yang tersedia.

4. Kirim Pesan: Pengguna menekan tombol kirim atau tombol Enter.

5. Terima Jawaban: Setelah beberapa saat, chatbot akan menampilkan jawaban yang paling relevan berdasarkan pengetahuannya.

7. Ide Pengembangan Fitur

Untuk membuat chatbot ini lebih canggih di masa depan, berikut 5 ide pengembangan fitur:

1. Riwayat Percakapan (Chat History): Menyimpan percakapan pengguna (misalnya menggunakan Firestore atau Local Storage) sehingga mereka bisa melihat kembali pertanyaan dan jawaban sebelumnya saat kembali ke situs.

2. Sistem Feedback (Jempol Atas/Bawah): Menambahkan tombol jempol naik/turun di setiap jawaban AI. Data ini bisa dikumpulkan untuk menganalisis kualitas jawaban dan melatih ulang model di kemudian hari.

3. Eskalasi ke Agen Manusia: Jika chatbot tidak dapat menjawab pertanyaan setelah 2-3 kali percobaan, tawarkan tombol "Bicara dengan Manusia" yang akan menghubungkan pengguna ke email, WhatsApp, atau platform live chat.

4. Dashboard Analitik: Membuat halaman admin khusus untuk pemilik website yang menampilkan data seperti: pertanyaan yang paling sering diajukan, pertanyaan yang gagal dijawab, dan tingkat kepuasan pengguna (dari sistem feedback).

5. Dukungan Multi-Bahasa: Mengintegrasikan API terjemahan atau menggunakan model AI yang mendukung banyak bahasa agar chatbot bisa melayani pengunjung dari berbagai negara.