Tutorial: Yuk, Bikin Chatbot Pelayanan Sendiri Bareng Dzarel!

byDzarelDeveloper -
0
Screenshot Project Web

Kenalan Dulu Sama Proyek Chatbot Kita Ini

Halo semuanya! Selamat datang di panduan lengkap untuk membuat chatbot pelayanan yang interaktif. Proyek ini saya rancang supaya kita semua bisa punya asisten otomatis yang siap menjawab pertanyaan umum dan bantu pengguna kapan saja. Kita pakai teknologi web dasar yang seru: HTML buat kerangka halamannya, CSS biar tampilannya cantik dan rapi, plus JavaScript biar chatbot-nya bisa "ngomong" sama kita. Gampang banget kok diintegrasikan ke website mana pun. Intinya, chatbot ini tujuannya biar pelayanan jadi lebih cepat, efisien, dan bikin pengguna makin senang!

⚙️ Apa Saja yang Kalian Butuhkan?

Tenang, persyaratannya enggak ribet kok. Cukup siapkan ini:

  • Editor teks, seperti VS Code (ini yang paling saya rekomendasikan!)
  • Git (kalau kalian mau ambil kodenya langsung dari GitHub)
  • Browser modern (Chrome, Firefox, Edge, Safari, bebas pilih yang mana saja)

🚀 Cara Mendapatkan Kodenya (Instalasi)

Ada dua cara gampang buat kalian mendapatkan dan mencoba proyek ini di komputer kalian:

1. Ambil Langsung dari GitHub (Clone Repo)

Kalau kalian sudah akrab dengan Git, cara ini paling cepat. Buka terminal atau Command Prompt kalian, lalu ketik perintah ini:

git clone https://github.com/dzareldeveloper/BIMA.git
cd BIMA
code .

2. Unduh Manual (Download ZIP)

Kalau kalian belum pakai Git, tidak masalah! Kalian bisa unduh langsung file proyeknya:

  1. Kunjungi halaman GitHub repository proyek ini (link-nya ada di bagian bawah postingan ini).
  2. Cari tombol "Code" yang warna hijau, lalu klik dan pilih "Download ZIP".
  3. Setelah terunduh, ekstrak file ZIP yang telah diunduh ke folder mana saja yang kalian mau di komputer kalian.

🚀 Mau Lebih Cepat? Gabung Komunitas Telegram Kita!

Buat kalian yang ingin akses kode proyek ini lebih cepat tanpa perlu buka GitHub lagi, atau mau diskusi langsung, tanya-tanya, dan dapat update terbaru, yuk gabung komunitas Telegram kita! Di sana, kalian bisa langsung download kode, dapat tips & trik, dan kenalan dengan sesama developer.

Gabung Komunitas Telegram Sekarang!

📂 Mari Kita Lihat Struktur Proyeknya

Ini dia gambaran isi folder proyek kita:

.
├── README.md
├── assets/
│   └── Logo.jpeg
├── chat.html
├── data.json
├── index.html
├── landing.css
├── script.js
└── style.css

Penjelasan Singkat File-file Penting:

  • index.html: Ini halaman utama atau halaman pembuka aplikasi kita.
  • chat.html: Nah, ini halaman utama tempat chatbot kita berinteraksi.
  • script.js: Semua "otak" atau logika JavaScript untuk chatbot ada di sini.
  • style.css: File ini mengatur tampilan umum aplikasi kita biar enak dilihat.
  • landing.css: Khusus untuk mempercantik halaman pembuka (landing page).
  • data.json: Ini file sangat penting! Di sini kalian bisa menyimpan data atau pengaturan untuk chatbot, misalnya daftar pertanyaan dan jawabannya. Dengan file ini, chatbot kita bisa membalas pesan yang user kirimkan dengan lebih cerdas dan terstruktur.
  • assets/: Folder ini tempat kita menyimpan gambar, logo, atau aset lainnya.

💡 Cuplikan Kode Penting: File data.json (Sumber Jawaban Chatbot Kalian!)

File data.json ini adalah "kamus" atau "database" sederhana untuk chatbot kalian. Di sinilah kalian akan mendefinisikan pertanyaan apa yang bisa dijawab chatbot dan apa jawabannya. Ini sangat penting agar chatbot bisa membalas pesan yang dikirimkan pengguna!

Strukturnya gampang banget, kalian bisa membuat kategori (misalnya "Informasi Umum") lalu di dalamnya ada daftar objek. Setiap objek punya:

  • "keyword": Kata kunci utama yang dicari dari pertanyaan pengguna.
  • "synonyms": Kata-kata lain yang mirip atau bisa juga berarti sama dengan keyword. Ini biar chatbot lebih fleksibel.
  • "answer": Jawaban yang akan diberikan chatbot kalau keyword atau sinonimnya ditemukan.

Apa itu "Informasi Umum" dan Kategori Lainnya?

"Informasi Umum" itu hanyalah sebuah nama kategori yang saya buat sebagai contoh. Kalian bisa membuat kategori lain sesuai kebutuhan chatbot kalian, misalnya "Produk & Layanan", "Pembayaran", "Pengiriman", dan sebagainya. Ini membantu kalian mengorganisir data jawaban agar lebih rapi dan mudah dicari oleh chatbot.

Contoh Struktur Dasar Entri di data.json (Sebelum Diisi):

{
  "Nama Kategori Kalian": [
    {
      "keyword": ["kata kunci utama"],
      "synonyms": ["sinonim1", "sinonim2"],
      "answer": "Ini adalah jawaban yang akan ditampilkan oleh bot."
    }
  ]
}

Contoh Cara Menambahkan Pertanyaan dan Jawaban Baru di data.json (Setelah Diisi):

{
  "Informasi Umum": [
    {
      "keyword": ["jam kerja", "jam layanan", "operasional"],
      "synonyms": ["buka", "tutup", "waktu", "jam buka", "jam tutup"],
      "answer": "Jam layanan kami adalah Senin-Jumat, pukul 08.00 - 15.00 WIB."
    },
    {
      "keyword": ["lokasi", "alamat", "kantor"],
      "synonyms": ["dimana", "tempat"],
      "answer": "Kantor kami berlokasi di Jl. Contoh No. 123, Kota Fiktif."
    }
  ],
  "Produk & Layanan": [
    {
      "keyword": ["produk", "layanan", "jasa"],
      "synonyms": ["apa saja", "daftar"],
      "answer": "Kami menyediakan berbagai produk dan layanan seperti A, B, dan C. Silakan kunjungi website kami untuk detail lebih lanjut."
    }
  ]
}

Kalian bisa terus tambahkan objek-objek baru di dalam kategori yang sudah ada, atau buat kategori baru sesuai kebutuhan chatbot kalian!

💡 Cuplikan Kode Penting: File script.js (Otak Chatbot Kalian!)

File script.js ini adalah tempat semua logika chatbot berjalan. Bagian terpenting yang perlu kalian pahami dan wajib kalian ubah/tambah adalah fungsi getBotResponse(userMessage). Fungsi inilah yang akan "berpikir" dan menentukan balasan apa yang harus diberikan chatbot berdasarkan pesan dari pengguna.

Di dalam fungsi getBotResponse, kalian akan menulis kode untuk membaca pesan pengguna, mencocokkannya dengan `keyword` atau `synonyms` yang ada di `data.json`, lalu mengembalikan `answer` yang sesuai. Contoh di bawah ini masih sederhana, tapi kalian bisa mengembangkannya untuk membaca `data.json` secara dinamis!

// script.js - Ini contoh fungsi utama untuk mengirim pesan
function sendMessage() {
  const userInput = document.getElementById('user-input');
  const message = userInput.value.trim();

  if (message) {
    addMessageToChat('user', message); // Tampilkan pesan kalian di chat
    userInput.value = ''; // Kosongkan kolom input

    // Ini simulasi balasan dari chatbot
    setTimeout(() => {
      const botResponse = getBotResponse(message); // Chatbot memproses pesan kalian
      addMessageToChat('bot', botResponse); // Tampilkan balasan chatbot
      scrollToBottom(); // Otomatis scroll ke bawah biar pesan terbaru kelihatan
    }, 1000); // Ada jeda 1 detik biar kelihatan seperti sedang berpikir
  }
}

// ====================================================================
// === INI BAGIAN YANG WAJIB KALIAN UBAH/TAMBAH SESUAI KEBUTUHAN CHATBOT KALIAN ===
// === FUNGSI INI AKAN MENGAMBIL JAWABAN DARI data.json (JIKA SUDAH DIIMPLEMENTASIKAN) ===
// ====================================================================
function getBotResponse(userMessage) {
  const lowerCaseMessage = userMessage.toLowerCase();

  // Contoh sederhana: Kalian bisa kembangkan ini untuk membaca data.json
  // Misalnya, dengan melakukan fetch('data.json') lalu mencari keyword di sana.
  // Untuk pemula, kita pakai if/else if dulu ya!

  if (lowerCaseMessage.includes('halo') || lowerCaseMessage.includes('hai')) {
    return 'Halo juga! Ada yang bisa saya bantu hari ini?';
  } else if (lowerCaseMessage.includes('bantuan') || lowerCaseMessage.includes('tolong')) {
    return 'Tentu, saya siap membantu kalian. Silakan sampaikan pertanyaan atau masalah kalian.';
  } else if (lowerCaseMessage.includes('jam kerja')) {
    return 'Jam operasional kami adalah Senin-Jumat, pukul 09.00 - 17.00 WIB.';
  } else if (lowerCaseMessage.includes('kontak')) {
    return 'Kalian bisa menghubungi kami melalui email di support@example.com atau telepon di (021) 1234567.';
  }
  // Kalau tidak ada kondisi yang cocok, berikan respons default ini
  return 'Maaf, saya belum mengerti pertanyaan kalian. Bisakah kalian coba dengan kata kunci lain atau jelaskan lebih detail?';
}
// ====================================================================
// === AKHIR DARI BAGIAN WAJIB UBAH/TAMBAH ===
// ====================================================================

function addMessageToChat(sender, text) {
  const chatBox = document.getElementById('chat-box');
  const messageElement = document.createElement('div');
  messageElement.classList.add('message', sender);
  messageElement.innerHTML = `${text}`;
  chatBox.appendChild(messageElement);
}

function scrollToBottom() {
  const chatBox = document.getElementById('chat-box');
  chatBox.scrollTop = chatBox.scrollHeight;
}

💡 Cuplikan Kode Penting: File HTML (Mengubah Nama Chatbot atau Gambar)

Untuk mengubah nama chatbot atau gambar yang muncul di antarmuka, kalian perlu mengedit file HTML (misalnya chat.html atau index.html, tergantung di mana elemen tersebut berada). Ini adalah bagian yang sangat mudah untuk pemula!

Contoh Mengubah Nama Chatbot:

Cari bagian di HTML yang menampilkan nama chatbot. Biasanya ini ada di dalam tag <h1>, <h2>, atau <div> dengan kelas/ID tertentu. Kalian tinggal ganti teks di dalamnya.

Sebelum Diubah:

<div class="chatbot-header">
  <h2>Chatbot Pelayanan</h2>
</div>

Setelah Diubah:

<div class="chatbot-header">
  <h2>Asisten Pintar Kalian</h2> <!-- Ganti teks ini -->
</div>

Contoh Mengubah Gambar/Logo Chatbot:

Cari tag <img> yang digunakan untuk menampilkan logo atau gambar chatbot. Kalian hanya perlu mengganti nilai atribut src dengan path atau URL gambar baru kalian.

Sebelum Diubah:

<img src="assets/Logo.jpeg" alt="Logo Chatbot" class="chatbot-logo">

Setelah Diubah:

<img src="assets/logo-baru-kalian.png" alt="Logo Chatbot Baru" class="chatbot-logo"> <!-- Ganti nilai src ini -->

Pastikan gambar baru kalian sudah ada di folder assets/ atau di lokasi yang benar, ya!

🛠️ Cara Menjalankan Proyek Ini

Gampang banget kok! Ikuti langkah-langkah ini untuk melihat chatbot kalian beraksi:

  1. Buka Folder Proyek: Setelah kalian mendapatkan kodenya (baik dari clone atau unduh manual), buka folder proyeknya di editor kode kalian (misalnya VS Code).
  2. Jalankan di Browser: Karena proyek ini murni HTML, CSS, dan JavaScript, kalian tidak perlu server khusus. Cukup buka file index.html atau chat.html langsung di browser web kalian. Caranya:
    • Klik kanan pada file index.html atau chat.html, lalu pilih "Open with" dan pilih browser favorit kalian.
    • Atau, kalian bisa seret (drag) file index.html atau chat.html langsung ke jendela browser yang sudah terbuka.
  3. Mulai Ngobrol: Setelah halaman terbuka di browser, kalian akan melihat tampilan chatbot. Coba ketik pesan kalian di kolom input, lalu tekan Enter atau klik tombol kirim untuk mulai berinteraksi!

🎨 Contoh Hasilnya Gimana Sih?

Berikut adalah contoh tampilan chatbot sudah jadinya:

Contoh Hasil Chatbot Contoh Hasil Chatbot

Hasil Chatbot yang sudah saya selesaikan

📣 Yuk, Modifikasi dan Bagikan Hasil Keren Kalian!

Sekarang kalian sudah punya chatbot pelayanan sendiri! Jangan berhenti di sini, coba modifikasi sesuai kebutuhan kalian. Tambahkan fitur-fitur keren, ubah tampilannya, atau integrasikan dengan layanan lain. Kalau sudah selesai, jangan lupa bagikan hasilnya di komunitas Telegram kita atau tag saya di media sosial. Saya tunggu karya keren kalian!

Semoga tutorial ini membantu. Kalau ada pertanyaan, tinggalkan komentar di bawah atau hubungi saya langsung. Happy coding! 🚀

Tags

Anda mungkin menyukai postingan ini

Posting Komentar

Lebih baru Lebih lama