Sesi 4 — Merancang Produk

1. Arsitektur Dasar Aplikasi Berbasis LLM

Semua aplikasi berbasis LLM — dari yang sederhana sampai sekompleks ChatGPT — punya struktur dasar yang sama. Ada empat lapisan utama yang harus kamu pahami sebelum mulai coding:

🖥️

Frontend

UI / Tampilan

→

⚙️

Backend

Logic + API Call

→

🧠

LLM API

Groq / OpenAI / Gemini

→

💬

Response

Kembali ke User

Arsitektur ini seperti sistem pemesanan ojek online. Kamu (pengguna) pesan lewat aplikasi (Frontend) → aplikasi kirim pesanan ke server Gojek (Backend) → server tanya ke sistem AI pemetaan untuk cari driver terdekat (LLM API) → hasilnya dikirim balik ke layar HP kamu (Response). Setiap lapisan punya tugasnya sendiri!

Mengapa API Key Harus di Backend?

Perhatikan bahwa API call ke LLM dilakukan di Backend, bukan di Frontend. Ini karena API key harus dirahasiakan. Jika kamu panggil API langsung dari JavaScript di browser, siapa saja bisa lihat API key-mu di source code HTML — dan menyalahgunakannya!

⚡ Pengecualian: Client-Side untuk Demo Cepat

Ada satu pengecualian: untuk prototyping super cepat atau demo internal, boleh memanggil API langsung dari JavaScript. Tapi jangan pernah deploy ke publik dengan cara ini. Di Pola 1 kita akan pelajari kapan ini boleh dilakukan.

2. Tiga Pola Arsitektur yang Digunakan di MK Ini

Bergantung pada kebutuhan produkmu, kamu bisa memilih salah satu dari tiga pola arsitektur berikut. Masing-masing punya kelebihan dan trade-off tersendiri:

Cocok untukDemo cepat, prototyping awal

Keamanan API KeyRendah — jangan deploy publik

KompleksitasMudah

<script> const GROQ_KEY = 'gsk_xxxxx'; // ⚠️ Terlihat di browser! async function kirimPesan(pesan) { const res = await fetch('https://api.groq.com/openai/v1/chat/completions', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${GROQ_KEY}` }, body: JSON.stringify({ model: 'llama-3.1-8b-instant', messages: [{ role: 'user', content: pesan }], max_tokens: 256 }) }); const data = await res.json(); return data.choices[0].message.content; } // Panggil: kirimPesan("Halo AI!").then(console.log) </script>

Cocok untukProduk PHP / XAMPP, mayoritas proyek MK ini

Keamanan API KeyAman — key di server

KompleksitasSedang

<?php // chat_handler.php — Pola 2: PHP Server-Side require_once 'api.php'; // load konfigurasi Groq // Terima pesan dari AJAX request $input = groq_get_post_input(); $userMsg = $input['message']; $history = $input['history']; // Susun messages dengan system prompt $messages = [['role'=>'system', 'content'=>'Kamu asisten helpdesk IT yang ramah.']]; foreach ($history as $h) $messages[] = $h; $messages[] = ['role'=>'user', 'content'=>$userMsg]; // Panggil API via fungsi helper di api.php $reply = groq_chat($messages, 0.7, 512); // Kembalikan sebagai JSON ke frontend header('Content-Type: application/json'); echo json_encode(['reply' => $reply]);

Cocok untukAPI backend, integrasi kompleks, microservices

Keamanan API KeyAman — environment variable

KompleksitasSedang-Tinggi

# app.py — Pola 3: Python Flask Backend # pip install flask requests python-dotenv from flask import Flask, request, jsonify import requests, os from dotenv import load_dotenv load_dotenv() # Load API key dari file .env app = Flask(__name__) GROQ_KEY = os.getenv("GROQ_API_KEY") GROQ_URL = "https://api.groq.com/openai/v1/chat/completions" @app.route("/chat", methods=["POST"]) def chat(): data = request.json user_msg = data.get("message", "") history = data.get("history", []) messages = [{"role": "system", "content": "Kamu asisten helpdesk IT."}] messages += history messages.append({"role": "user", "content": user_msg}) resp = requests.post(GROQ_URL, headers={ "Authorization": f"Bearer {GROQ_KEY}", "Content-Type": "application/json" }, json={"model": "llama-3.1-8b-instant", "messages": messages}) reply = resp.json()["choices"][0]["message"]["content"] return jsonify({"reply": reply}) if __name__ == "__main__": app.run(debug=True, port=5000)

Perbandingan Tiga Pola

Pola	Bahasa	API Key Aman?	Cocok Untuk	Deploy
HTML + JS	JavaScript	Tidak	Demo cepat, eksperimen lokal	GitHub Pages
PHP Backend	PHP + JS	Ya	Proyek web tradisional, XAMPP	InfinityFree, Hosting PHP
Python Flask	Python + JS	Ya	API service, integrasi kompleks	Railway, Render, PythonAnywhere

3. Merancang System Prompt yang Efektif

System prompt adalah instruksi rahasia yang kamu berikan kepada AI sebelum percakapan dimulai. Ini yang membedakan chatbot generalmu dari produk yang fokus dan berguna. System prompt yang baik mendefinisikan tiga hal: persona, batasan, dan cara output.

System prompt itu seperti briefing kepada karyawan baru sebelum menemui pelanggan. Kamu beritahu dia: "Namamu Budi, kamu staf layanan bank kami, kamu hanya boleh menjawab soal tabungan dan pinjaman, selalu sopan, dan jangan pernah sebutkan nama pesaing." Semakin jelas briefingnya, semakin konsisten si karyawan melayani!

Klik tab untuk melihat contoh system prompt dengan tingkat kedetailan berbeda:

Contoh System Prompt

System Prompt — Buruk

Kamu asisten yang membantu.

❌ Terlalu generik. AI tidak tahu topik apa yang boleh dijawab, bagaimana nada bicaranya, format apa yang diharapkan, atau apa yang harus dilakukan saat ada pertanyaan di luar topik. Hasilnya: AI akan menjawab apa saja, termasuk hal yang tidak relevan dengan produkmu.

System Prompt — Cukup

Kamu adalah asisten untuk toko online kami. Bantu pelanggan dengan pertanyaan seputar produk dan pesanan. Jawab dalam Bahasa Indonesia.

⚠️ Lebih baik — sudah ada domain (toko online) dan bahasa. Tapi masih kurang: belum ada persona yang kuat, belum ada instruksi cara menangani pertanyaan di luar topik, dan belum ada format output yang diharapkan.

System Prompt — Baik (Gunakan Template Ini!)

Kamu adalah "Rani", asisten belanja online dari TokoBaju.id yang ramah dan profesional. TUGASMU: - Bantu pelanggan dengan pertanyaan seputar: produk, ketersediaan stok, harga, cara pemesanan, status pengiriman, dan kebijakan pengembalian. CARA MENJAWAB: - Gunakan Bahasa Indonesia yang hangat dan mudah dimengerti. - Jangan pernah menyebut atau membandingkan dengan kompetitor. - Jika tidak tahu jawabannya, katakan "Saya akan cek dulu untuk Anda" dan sarankan hubungi CS di cs@tokobaju.id. LARANGAN: - Jangan jawab pertanyaan di luar topik toko kami. - Jangan pernah menyebut bahwa kamu adalah AI atau model bahasa.

✅ Sangat baik! Ada nama persona (Rani), domain yang jelas, cara menjawab yang spesifik, dan instruksi eksplisit untuk kasus edge case. AI yang dibriefing seperti ini akan sangat konsisten dan profesional.

Prompt Engineering Dasar: 3 Teknik Utama

🔧 Teknik 1 — Few-Shot Examples

Berikan contoh input–output di dalam prompt agar AI paham format yang kamu inginkan. Contoh: "Jika user bertanya tentang harga, jawab seperti ini: 'Harga produk X adalah Rp 150.000, sudah termasuk ongkir ke seluruh Indonesia.'" — AI akan meniru pola ini untuk pertanyaan serupa.

🔧 Teknik 2 — Instruction Clarity

Instruksi yang ambigu menghasilkan output yang ambigu. Ganti "jawab dengan baik" menjadi "jawab dalam maksimal 3 kalimat, gunakan angka jika ada data, dan selalu akhiri dengan pertanyaan 'Ada lagi yang bisa saya bantu?'". Semakin spesifik instruksimu, semakin terprediksi hasilnya.

🔧 Teknik 3 — Output Formatting (JSON)

Minta AI mengeluarkan jawaban dalam format JSON agar mudah diolah programatik. Contoh instruksi: "Analisis sentimen teks berikut dan kembalikan HANYA JSON dengan format: {\"sentimen\": \"positif/negatif/netral\", \"skor\": 0-100, \"alasan\": \"...\"} tanpa teks tambahan apapun."

4. Lab: Uji System Prompt-mu Langsung!

Tulis system prompt kamu sendiri di bawah, masukkan pesan test, dan lihat bagaimana AI bereaksi. Ini adalah cara terbaik untuk memvalidasi apakah system prompt produkmu sudah efektif:

⚗️ System Prompt Live Tester — Powered by Groq

System Prompt (Instruksi untuk AI)

Pesan Test (dari sudut pandang user)

5. Merancang UI/UX Sederhana: Wireframe & User Flow

Wireframe adalah sketsa kasar tampilan aplikasimu — seperti denah rumah sebelum bangun. Tidak perlu indah, cukup menggambarkan letak elemen-elemen utama. Di bawah ini adalah wireframe sederhana untuk aplikasi chatbot berbasis LLM:

📐 Wireframe — Halaman Chatbot Produk LLM

[ NAMA PRODUK + TAGLINE ]

①Header — nama produk, logo, tagline singkat

②Area chat — bubble kiri (AI) dan kanan (user)

③Input bar — kolom ketik pesan + tombol kirim

Untuk merancang user flow, tanyakan: "Apa yang terjadi dari pertama kali user membuka halaman sampai mereka mendapat nilai dari produkmu?" Gambarkan setiap langkah di kertas atau di tools seperti Figma (gratis), draw.io, atau bahkan Google Slides.

✏️ Tools Wireframing yang Direkomendasikan

Figma (figma.com) — gratis, berbasis web, paling populer di industri. Whimsical — bagus untuk user flow diagram. draw.io / diagrams.net — gratis, bisa offline, cocok untuk arsitektur sistem. Atau yang paling cepat: kertas dan pulpen — jangan remehkan ini, banyak produk besar dimulai dari sketsa di kertas!

Merancang Produk: ArsitekturSederhana Aplikasi Berbasis LLM