Sesi 2 — Setup Lingkungan R&D

1. Menyiapkan Peralatan R&D

Seorang developer yang baik punya workspace yang rapi dan tools yang tepat. Ini seperti tukang yang tidak mungkin membangun rumah tanpa palu dan meteran. Berikut empat tools utama yang wajib kamu install:

🖥️

VS Code

Code Editor Utama

Editor gratis dari Microsoft. Ringan, powerful, dan punya ribuan extension. Download di code.visualstudio.com

🐍

Python 3.10+

Bahasa Scripting & AI

Bahasa favorit dunia AI. Wajib untuk manipulasi data dan memanggil API. Download di python.org

🟩

Node.js LTS

Runtime JavaScript

Agar JavaScript bisa dijalankan di luar browser. Dibutuhkan untuk tools frontend modern. Download di nodejs.org

🐘

XAMPP / PHP

Backend Server Lokal

Menjalankan server PHP + MySQL di laptop kamu. Semua kode PHP di MK ini butuh ini. Download di apachefriends.org

Tools di atas ibarat dapur lengkap seorang chef: VS Code adalah meja kerjamu, Python adalah pisau serba guna, Node.js adalah kompor listrik modern, dan XAMPP adalah oven yang mengolah kode PHP menjadi halaman web. Tanpa salah satu, kamu tidak bisa masak dengan optimal!

✅ Extension VS Code yang Direkomendasikan

Install extension ini di VS Code: PHP Intelephense (autocomplete PHP), Python (oleh Microsoft), REST Client (untuk uji coba API langsung dari editor), dan Thunder Client (alternatif Postman yang ringan).

2. Mendapatkan API Key — Kunci Masuk ke Otak AI

API key adalah seperti kartu anggota eksklusif — tanpanya, kamu tidak bisa memesan menu dari "restoran AI". Setiap platform punya cara yang sedikit berbeda, tapi prosesnya selalu mirip: daftar → verifikasi → generate key.

⚠️ Keamanan API Key

API key adalah rahasia! Jangan pernah commit ke GitHub, jangan tampilkan di frontend HTML yang bisa dilihat publik, dan jangan bagikan ke siapapun. Anggap seperti password kartu ATM — kalau bocor, tagihan API bisa meledak!

Cara Mendapatkan API Key dari 3 Platform

G

Groq — Gratis & Tercepat (Rekomendasi Utama MK Ini)

Daftar akun → login → klik "API Keys" di sidebar kiri → klik "Create API Key" → salin dan simpan. Tidak perlu kartu kredit. Rate limit cukup longgar untuk eksperimen mahasiswa.

↗ console.groq.com

Ge

Google AI Studio — Gemini API Gratis

Login dengan akun Google → klik "Get API key" → "Create API key in new project" → salin key. Free tier sangat murah hati: 15 request/menit gratis!

↗ aistudio.google.com

O

OpenAI Platform — GPT-4 (Berbayar)

Daftar di platform.openai.com → tambahkan payment method → beli credit → buka "API keys" → "Create new secret key". Perlu modal awal sekitar $5 untuk mulai eksperimen.

↗ platform.openai.com

API key itu seperti nomor pelanggan di warung langganan. Ketika kamu datang, kamu sebut nomormu, dan si warung tahu siapa kamu, berapa "kredit" yang kamu punya, dan apakah kamu sudah bayar tagihan. Kalau nomor salah atau kredit habis — pesananmu ditolak!

3. Anatomi Request API LLM

Setiap kali kamu memanggil API LLM, kamu mengirim sebuah "paket data" yang mengikuti format standar. Mari bedah satu per satu apa saja isi paket itu:

📦 Struktur Request ke Groq / OpenAI-Compatible API

endpoint

URL tujuan — alamat server yang menerima permintaanmu. Contoh: https://api.groq.com/openai/v1/chat/completions

Authorization

API Key kamu dikirim di header: Bearer gsk_xxx... — ini seperti menunjukkan kartu anggota

model

Model LLM yang ingin dipakai. Contoh: llama-3.1-8b-instant, llama3-70b-8192, gemma2-9b-it

messages

Array percakapan — berisi riwayat chat antara system, user, dan assistant. Ini adalah "ingatan" si AI dalam konteks saat ini

temperature

Tingkat kreativitas jawaban. Angka 0.0–1.0. Nilai rendah → jawaban konsisten dan faktual. Nilai tinggi → jawaban lebih variatif dan kreatif

max_tokens

Batas panjang jawaban. 1 token ≈ 0.75 kata Bahasa Inggris. Kalau set 512, AI tidak akan menjawab lebih dari ~380 kata

Peran System, User, dan Assistant

Role	Fungsi	Analogi
system	Instruksi awal kepada AI — membentuk "kepribadian" dan batasan AI. Dikirim sekali di awal.	Seperti job description untuk karyawan baru — memberitahu si AI perannya, cara bicara, dan apa yang boleh/tidak boleh dia lakukan
user	Pesan dari pengguna / pengguna akhir aplikasimu. Inilah pertanyaan atau instruksi nyata.	Seperti pelanggan yang memesan menu di restoran
assistant	Balasan dari AI di putaran sebelumnya. Disertakan untuk menjaga konteks percakapan.	Seperti catatan jawaban sebelumnya agar AI "ingat" sudah ngobrol apa tadi

4. Praktik Pertama: Memanggil API dari 3 Bahasa

Sekarang kita lihat bagaimana cara nyata memanggil API LLM dari tiga bahasa yang akan kita gunakan sepanjang semester. Klik tab untuk berganti bahasa:

// sessi2_test.php — Panggil Groq API dari PHP <?php define('GROQ_API_KEY', 'gsk_xxxxx_ganti_dengan_key_kamu'); define('GROQ_MODEL', 'llama-3.1-8b-instant'); define('GROQ_URL', 'https://api.groq.com/openai/v1/chat/completions'); // Pesan yang ingin kita kirim ke AI $messages = [ ['role' => 'system', 'content' => 'Kamu asisten yang ramah. Jawab dalam Bahasa Indonesia.'], ['role' => 'user', 'content' => 'Apa itu API? Jelaskan dalam 2 kalimat.'], ]; // Buat payload JSON $payload = json_encode([ 'model' => GROQ_MODEL, 'messages' => $messages, 'temperature' => 0.7, 'max_tokens' => 256, ]); // Kirim request menggunakan cURL $ch = curl_init(GROQ_URL); curl_setopt_array($ch, [ CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true, CURLOPT_POSTFIELDS => $payload, CURLOPT_HTTPHEADER => [ 'Content-Type: application/json', 'Authorization: Bearer ' . GROQ_API_KEY, ], ]); $result = curl_exec($ch); curl_close($ch); // Ambil teks jawaban dari JSON response $json = json_decode($result, true); $answer = $json['choices'][0]['message']['content']; echo "Jawaban AI: " . $answer; ?>

# sessi2_test.py — Panggil Groq API dari Python # Install dulu: pip install requests import requests import json GROQ_API_KEY = "gsk_xxxxx_ganti_dengan_key_kamu" GROQ_MODEL = "llama-3.1-8b-instant" GROQ_URL = "https://api.groq.com/openai/v1/chat/completions" # Susun pesan percakapan messages = [ {"role": "system", "content": "Kamu asisten yang ramah. Jawab dalam Bahasa Indonesia."}, {"role": "user", "content": "Apa itu API? Jelaskan dalam 2 kalimat."}, ] headers = { "Content-Type": "application/json", "Authorization": f"Bearer {GROQ_API_KEY}", } payload = { "model": GROQ_MODEL, "messages": messages, "temperature": 0.7, "max_tokens": 256, } # Kirim POST request response = requests.post(GROQ_URL, headers=headers, json=payload) data = response.json() # Ekstrak jawaban dari response JSON answer = data["choices"][0]["message"]["content"] print(f"Jawaban AI: {answer}")

// sessi2_test.html — Panggil Gemini API dari JavaScript // PERHATIAN: Untuk demo saja. Di produksi nyata, panggil via backend! const GEMINI_API_KEY = "AIzaSy_xxxxx_ganti_dengan_key_kamu"; const GEMINI_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${GEMINI_API_KEY}`; async function tanyaGemini(pertanyaan) { const payload = { contents: [{ parts: [{ text: pertanyaan }] }] }; const response = await fetch(GEMINI_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const data = await response.json(); const answer = data.candidates[0].content.parts[0].text; console.log("Jawaban AI:", answer); return answer; } // Panggil fungsinya tanyaGemini("Apa itu API? Jelaskan dalam 2 kalimat.");

Ketiga kode di atas pada dasarnya melakukan hal yang sama: menulis surat ke AI. PHP pakai cURL sebagai "kurir" surat, Python pakai library requests yang lebih modern, dan JavaScript pakai fetch() yang built-in di browser. Yang berubah hanya "alat kirim suratnya" — isinya (model, messages, temperature) tetap sama!

5. Eksperimen Temperature — Atur Kreativitas AI

Parameter temperature adalah salah satu yang paling menarik untuk dipahami. Ia mengontrol seberapa "bebas" AI dalam memilih kata berikutnya saat menjawab.

Geser slider untuk melihat penjelasan efek temperature:

0.0 1.0 0.7

Temperature 0.7 — Seimbang (Recommended)
Jawaban tetap konsisten namun ada variasi yang menyenangkan. Cocok untuk chatbot umum dan asisten yang perlu responsif tapi tidak "gila-gilaan". Ini default yang digunakan di semua sesi MK ini.

💡 Kapan Pakai Temperature Tinggi vs Rendah?

Gunakan temperature rendah (0.0–0.3) untuk: analisis data, menjawab soal matematika, ekstraksi informasi faktual, atau saat konsistensi penting. Gunakan temperature tinggi (0.7–1.0) untuk: generator nama produk, brainstorming ide, penulisan kreatif, atau chatbot dengan persona unik.

Setup Lingkungan R&Ddan Pengenalan API LLM