Tutorial Membuat Chatbot dengan ChatGPT API untuk Pemula

Chatbot berbasis AI kini menjadi alat penting untuk meningkatkan interaksi pengguna. Pada tutorial ini, kami akan membimbing Anda membuat chatbot sederhana menggunakan ChatGPT API, lalu mengintegrasikannya ke situs WordPress.

Persiapan Awal

• Akun OpenAI: Daftar di platform.openai.com dan dapatkan API key.
• Server Node.js: Pastikan Node.js versi 18+ terinstal.
• WordPress: Instalasi aktif dengan akses admin.

Langkah 1 Membuat Backend dengan Express

Buat folder baru chatbot-api dan inisialisasi npm:

mkdir chatbot-api
cd chatbot-api
npm init -y
npm install express axios dotenv cors

Selanjutnya, buat file server.js:

require('dotenv').config();
const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

app.post('/api/chat', async (req, res) => {
  const userMessage = req.body.message;
  try {
    const response = await axios.post('https://api.openai.com/v1/chat/completions', {
      model: 'gpt-3.5-turbo',
      messages: [{ role: 'user', content: userMessage }]
    }, {
      headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` }
    });
    const botReply = response.data.choices[0].message.content;
    res.json({ reply: botReply });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Failed to get response from OpenAI' });
  }
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Simpan API key di file .env:

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx

Jalankan server:

node server.js

Langkah 2 Membuat Frontend Mini dengan HTML & JavaScript

Di dalam folder WordPress, buat halaman baru bernama Chatbot. Tambahkan blok HTML Custom dengan kode berikut:

<div id="chat-container" style="max-width:600px;margin:auto;padding:20px;border:1px solid #ddd;border-radius:8px;">
  <h3 style="text-align:center;">Chat dengan AI</h3>
  <div id="messages" style="height:300px;overflow-y:auto;margin-bottom:10px;background:#f9f9f9;padding:10px;border-radius:4px;"></div>
  <input type="text" id="user-input" placeholder="Ketik pertanyaan..." style="width:80%;padding:8px;">
  <button id="send-btn" style="padding:8px 12px;">Kirim</button>
</div>
<script>
  const apiUrl = 'https://yourdomain.com/api/chat'; // ganti dengan URL server Anda
  const messagesDiv = document.getElementById('messages');
  const input = document.getElementById('user-input');
  const btn = document.getElementById('send-btn');

  function appendMessage(sender, text) {
    const msg = document.createElement('div');
    msg.style.marginBottom = '8px';
    msg.innerHTML = `${sender}: ${text}`;
    messagesDiv.appendChild(msg);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
  }

  btn.addEventListener('click', async () => {
    const userText = input.value.trim();
    if (!userText) return;
    appendMessage('Anda', userText);
    input.value = '';
    try {
      const res = await fetch(apiUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: userText })
      });
      const data = await res.json();
      appendMessage('AI', data.reply);
    } catch (e) {
      appendMessage('AI', 'Maaf, terjadi kesalahan.');
    }
  });
</script>

Pastikan apiUrl mengarah ke server Express yang Anda jalankan.

Langkah 3 Mengamankan Endpoint

Untuk produksi, tambahkan middleware autentikasi (misalnya token JWT) dan aktifkan HTTPS melalui sertifikat SSL. Anda juga dapat meng‑host backend di layanan cloud seperti Vercel atau Render agar mudah di‑scale.

Langkah 4 Mengoptimalkan SEO Chatbot

• Gunakan schema.org/Question dan Answer pada percakapan untuk meningkatkan peluang rich snippets.
• Pastikan halaman memiliki meta description yang menjelaskan fungsi chatbot.
• Optimalkan kecepatan dengan loading script secara async.

Tips Penggunaan Lanjutan

• Prompt Engineering: Tambahkan instruksi khusus pada messages untuk menyesuaikan gaya bahasa.
• Rate Limiting: Batasi permintaan per IP untuk menghindari penyalahgunaan.
• Logging: Simpan percakapan ke database untuk analisis feedback.

Kesimpulan

Dengan langkah di atas, Anda dapat memiliki chatbot berbasis ChatGPT yang terintegrasi dengan mudah ke situs WordPress. Chatbot meningkatkan interaksi, mengurangi bounce rate, dan memberikan nilai tambah bagi pengunjung yang mencari penjelasan cepat.

Jika Anda membutuhkan bantuan lebih lanjut, tim APA ITU siap membantu mengimplementasikan solusi AI yang lebih kompleks.