{"id":16,"date":"2026-05-09T00:13:01","date_gmt":"2026-05-09T00:13:01","guid":{"rendered":"https:\/\/peaceful-peacock.10web.cloud\/tutorial-membuat-chatbot-dengan-chatgpt-api-untuk-pemula\/"},"modified":"2026-05-09T00:13:01","modified_gmt":"2026-05-09T00:13:01","slug":"tutorial-membuat-chatbot-dengan-chatgpt-api-untuk-pemula","status":"publish","type":"post","link":"https:\/\/apaituai.web.id\/?p=16","title":{"rendered":"Tutorial Membuat Chatbot dengan ChatGPT API untuk Pemula"},"content":{"rendered":"<p>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.<\/p>\n<h2>Persiapan Awal<\/h2>\n<ul>\n<li><strong>Akun OpenAI:<\/strong> Daftar di platform.openai.com dan dapatkan API key.<\/li>\n<li><strong>Server Node.js:<\/strong> Pastikan Node.js versi 18+ terinstal.<\/li>\n<li><strong>WordPress:<\/strong> Instalasi aktif dengan akses admin.<\/li>\n<\/ul>\n<h2>Langkah 1 Membuat Backend dengan Express<\/h2>\n<p>Buat folder baru <code>chatbot-api<\/code> dan inisialisasi npm:<\/p>\n<pre><code>mkdir chatbot-api\ncd chatbot-api\nnpm init -y\nnpm install express axios dotenv cors<\/code><\/pre>\n<p>Selanjutnya, buat file <code>server.js<\/code>:<\/p>\n<pre><code>require('dotenv').config();\nconst express = require('express');\nconst axios = require('axios');\nconst cors = require('cors');\n\nconst app = express();\napp.use(cors());\napp.use(express.json());\n\napp.post('\/api\/chat', async (req, res) =&gt; {\n  const userMessage = req.body.message;\n  try {\n    const response = await axios.post('https:\/\/api.openai.com\/v1\/chat\/completions', {\n      model: 'gpt-3.5-turbo',\n      messages: [{ role: 'user', content: userMessage }]\n    }, {\n      headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}` }\n    });\n    const botReply = response.data.choices[0].message.content;\n    res.json({ reply: botReply });\n  } catch (error) {\n    console.error(error);\n    res.status(500).json({ error: 'Failed to get response from OpenAI' });\n  }\n});\n\nconst PORT = process.env.PORT || 5000;\napp.listen(PORT, () =&gt; console.log(`Server running on port ${PORT}`));\n<\/code><\/pre>\n<p>Simpan API key di file <code>.env<\/code>:<\/p>\n<pre><code>OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx<\/code><\/pre>\n<p>Jalankan server:<\/p>\n<pre><code>node server.js<\/code><\/pre>\n<h2>Langkah 2 Membuat Frontend Mini dengan HTML &amp; JavaScript<\/h2>\n<p>Di dalam folder WordPress, buat halaman baru bernama <code>Chatbot<\/code>. Tambahkan blok HTML Custom dengan kode berikut:<\/p>\n<pre><code>&lt;div id=\"chat-container\" style=\"max-width:600px;margin:auto;padding:20px;border:1px solid #ddd;border-radius:8px;&quot;&gt;\n  &lt;h3 style=\"text-align:center;&quot;&gt;Chat dengan AI&lt;\/h3&gt;\n  &lt;div id=\"messages\" style=\"height:300px;overflow-y:auto;margin-bottom:10px;background:#f9f9f9;padding:10px;border-radius:4px;&quot;&gt;&lt;\/div&gt;\n  &lt;input type=\"text\" id=\"user-input\" placeholder=\"Ketik pertanyaan...\" style=\"width:80%;padding:8px;&quot;&gt;\n  &lt;button id=\"send-btn\" style=\"padding:8px 12px;&quot;&gt;Kirim&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;script&gt;\n  const apiUrl = 'https:\/\/yourdomain.com\/api\/chat'; \/\/ ganti dengan URL server Anda\n  const messagesDiv = document.getElementById('messages');\n  const input = document.getElementById('user-input');\n  const btn = document.getElementById('send-btn');\n\n  function appendMessage(sender, text) {\n    const msg = document.createElement('div');\n    msg.style.marginBottom = '8px';\n    msg.innerHTML = `<strong>${sender}:<\/strong> ${text}`;\n    messagesDiv.appendChild(msg);\n    messagesDiv.scrollTop = messagesDiv.scrollHeight;\n  }\n\n  btn.addEventListener('click', async () =&gt; {\n    const userText = input.value.trim();\n    if (!userText) return;\n    appendMessage('Anda', userText);\n    input.value = '';\n    try {\n      const res = await fetch(apiUrl, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify({ message: userText })\n      });\n      const data = await res.json();\n      appendMessage('AI', data.reply);\n    } catch (e) {\n      appendMessage('AI', 'Maaf, terjadi kesalahan.');\n    }\n  });\n&lt;\/script&gt;<\/code><\/pre>\n<p>Pastikan <code>apiUrl<\/code> mengarah ke server Express yang Anda jalankan.<\/p>\n<h2>Langkah 3 Mengamankan Endpoint<\/h2>\n<p>Untuk produksi, tambahkan middleware autentikasi (misalnya token JWT) dan aktifkan HTTPS melalui sertifikat SSL. Anda juga dapat meng\u2011host backend di layanan cloud seperti Vercel atau Render agar mudah di\u2011scale.<\/p>\n<h2>Langkah 4 Mengoptimalkan SEO Chatbot<\/h2>\n<ul>\n<li>Gunakan <code>schema.org\/Question<\/code> dan <code>Answer<\/code> pada percakapan untuk meningkatkan peluang rich snippets.<\/li>\n<li>Pastikan halaman memiliki <code>meta description<\/code> yang menjelaskan fungsi chatbot.<\/li>\n<li>Optimalkan kecepatan dengan loading script secara async.<\/li>\n<\/ul>\n<h2>Tips Penggunaan Lanjutan<\/h2>\n<ul>\n<li><strong>Prompt Engineering:<\/strong> Tambahkan instruksi khusus pada <code>messages<\/code> untuk menyesuaikan gaya bahasa.<\/li>\n<li><strong>Rate Limiting:<\/strong> Batasi permintaan per IP untuk menghindari penyalahgunaan.<\/li>\n<li><strong>Logging:<\/strong> Simpan percakapan ke database untuk analisis feedback.<\/li>\n<\/ul>\n<h2>Kesimpulan<\/h2>\n<p>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.<\/p>\n<p>Jika Anda membutuhkan bantuan lebih lanjut, tim <a href=\"https:\/\/apaitu.web.id\">APA ITU<\/a> siap membantu mengimplementasikan solusi AI yang lebih kompleks.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Panduan langkah demi langkah membuat chatbot berbasis ChatGPT API, lengkap dengan integrasi ke website WordPress.<\/p>\n","protected":false},"author":1,"featured_media":37,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,9],"tags":[22,23,24],"class_list":["post-16","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","category-tutorial","tag-chatbot-tutorial","tag-chatgpt-api","tag-wordpress-integration"],"_links":{"self":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":0,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/posts\/16\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/media\/37"}],"wp:attachment":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}