AI di server

Mengapa kami tidak memanggil AI langsung dari browser

Layanan AI (OpenAI, Anthropic, dan lainnya) memerlukan kunci API – kode rahasia yang mengidentifikasi kamu dan digunakan untuk penagihan. Dan inilah hasil tangkapannya:

Apa pun yang kamu masukkan ke dalam JavaScript di browser dapat dibaca oleh siapa saja (F12 → kode sumber). Jika kunci kamu ada di sana, siapa pun dapat menghubungi AI menggunakan uang kamu.

kamu sudah mengetahui solusi dari Master: server kamu sendiri. Kuncinya tetap berada di server, dan browser hanya berbicara ke server kamu:

Browser  →  your server (the key is here!)  →  AI service
Browser  ←  your server                     ←  AI service

Tunjukkan pada saya: titik akhir /zeptat-se

Kami akan membangun server Express dari Master. Kami akan menyimpan kunci dalam file .env (ini tidak pernah terjadi di GitHub – tambahkan ke .gitignore!):

AI_KLIC=sk-your-secret-key-here

Dan server mendapatkan titik akhir baru:

require('dotenv').config();
const express = require('express');
const app = express();
app.use(express.json());
app.use(express.static('public'));

app.post('/zeptat-se', async (req, res) => {
  const { otazka } = req.body;

  const odpoved = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.AI_KLIC}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [
        { role: 'system', content: 'You are a friendly helper. Answer briefly in English.' },
        { role: 'user', content: otazka },
      ],
    }),
  });

  const data = await odpoved.json();
  res.json({ text: data.choices[0].message.content });
});

app.listen(3000, () => console.log('Server running at http://localhost:3000'));

Apa yang baru di sini:

• fetch juga dapat mengirim data: metode: 'POST' dan body.
• Header dengan Otorisasi – di situlah kunci ditampilkan.
• role: 'system' – itulah perintah kamu dari pelajaran terakhir! Ini mendefinisikan bagaimana AI berperilaku.
• process.env.AI_KLIC – kuncinya dibaca dari .env, bukan ditulis dalam kode.

Giliran kamu 💪

1. Tambahkan baris .env ke .gitignore – periksa dengan perintah git status (file .env tidak boleh muncul).
2. Buat titik akhir /zeptat-se dengan mengikuti contoh.
3. Tidak punya kunci? Tidak masalah – cukup kembalikan respons tes untuk saat ini dan lanjutkan ke pelajaran berikutnya:

app.post('/zeptat-se', (req, res) => {
  res.json({ text: `Test answer to: "${req.body.otazka}"` });
});

4. Coba titik akhir dari browser (konsol F12):

const r = await fetch('/zeptat-se', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ otazka: 'Hi, who are you?' }),
});
console.log(await r.json());

Apa yang bisa diambil dari pelajaran ini

• Kunci rahasia ada di server di .env, tidak pernah ada di browser atau di Git.
• fetch dapat melakukan POST – mengirimkan data dalam body, dan kunci dalam headers.
• Perintah sistem membentuk kepribadian pembantu AI kamu.

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten