96 KiB
Membangun Asisten Chat dengan AI
Ingat dalam Star Trek ketika kru berbicara santai dengan komputer kapal, menanyakan pertanyaan kompleks dan mendapatkan jawaban yang bijaksana? Apa yang tampak seperti fiksi ilmiah murni di tahun 1960-an sekarang adalah sesuatu yang bisa Anda bangun menggunakan teknologi web yang sudah Anda kenal.
Dalam pelajaran ini, kita akan membuat asisten chat AI menggunakan HTML, CSS, JavaScript, dan beberapa integrasi backend. Anda akan menemukan bagaimana keterampilan yang sama yang telah Anda pelajari dapat terhubung dengan layanan AI yang kuat yang dapat memahami konteks dan menghasilkan jawaban yang bermakna.
Pikirkan AI seperti memiliki akses ke perpustakaan besar yang tidak hanya dapat menemukan informasi tetapi juga menyusunnya menjadi jawaban yang koheren yang disesuaikan dengan pertanyaan spesifik Anda. Alih-alih mencari melalui ribuan halaman, Anda mendapatkan jawaban langsung yang kontekstual.
Integrasi terjadi melalui teknologi web yang sudah dikenal yang bekerja bersama. HTML menciptakan antarmuka chat, CSS menangani desain visual, JavaScript mengelola interaksi pengguna, dan API backend menghubungkan semuanya ke layanan AI. Ini mirip dengan bagaimana bagian-bagian berbeda dari orkestra bekerja bersama untuk menciptakan simfoni.
Pada dasarnya, kita sedang membangun jembatan antara komunikasi manusia alami dan pemrosesan mesin. Anda akan mempelajari implementasi teknis integrasi layanan AI dan pola desain yang membuat interaksi terasa intuitif.
Pada akhir pelajaran ini, integrasi AI akan terasa kurang seperti proses misterius dan lebih seperti API lain yang dapat Anda gunakan. Anda akan memahami pola dasar yang mendukung aplikasi seperti ChatGPT dan Claude, menggunakan prinsip pengembangan web yang sama yang telah Anda pelajari.
⚡ Apa yang Bisa Anda Lakukan dalam 5 Menit Berikutnya
Jalur Cepat untuk Pengembang Sibuk
flowchart LR
A[⚡ 5 minutes] --> B[Get GitHub token]
B --> C[Test AI playground]
C --> D[Copy Python code]
D --> E[See AI responses]
- Menit 1: Kunjungi GitHub Models Playground dan buat token akses pribadi
- Menit 2: Uji interaksi AI langsung di antarmuka playground
- Menit 3: Klik tab "Code" dan salin cuplikan kode Python
- Menit 4: Jalankan kode secara lokal dengan token Anda:
GITHUB_TOKEN=your_token python test.py - Menit 5: Saksikan respons AI pertama Anda dihasilkan dari kode Anda sendiri
Kode Uji Cepat:
import os
from openai import OpenAI
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key="your_token_here"
)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Hello AI!"}],
model="openai/gpt-4o-mini"
)
print(response.choices[0].message.content)
Mengapa Ini Penting: Dalam 5 menit, Anda akan merasakan keajaiban interaksi AI secara programatik. Ini mewakili blok bangunan fundamental yang mendukung setiap aplikasi AI yang Anda gunakan.
Berikut adalah tampilan proyek akhir Anda:
🗺️ Perjalanan Belajar Anda Melalui Pengembangan Aplikasi AI
journey
title From Web Development to AI Integration
section Understanding AI Foundations
Discover generative AI concepts: 4: You
Explore GitHub Models platform: 6: You
Master AI parameters and prompts: 8: You
section Backend Integration
Build Python API server: 5: You
Implement AI function calls: 7: You
Handle async operations: 8: You
section Frontend Development
Create modern chat interface: 6: You
Master real-time interactions: 8: You
Build responsive user experience: 9: You
section Professional Application
Deploy complete AI system: 7: You
Optimize performance patterns: 8: You
Create production-ready app: 9: You
Tujuan Perjalanan Anda: Pada akhir pelajaran ini, Anda akan membangun aplikasi lengkap yang didukung AI menggunakan teknologi dan pola yang sama yang mendukung asisten AI modern seperti ChatGPT, Claude, dan Google Bard.
Memahami AI: Dari Misteri ke Penguasaan
Sebelum masuk ke kode, mari kita pahami apa yang sedang kita kerjakan. Jika Anda pernah menggunakan API sebelumnya, Anda tahu pola dasarnya: kirim permintaan, terima respons.
API AI mengikuti struktur serupa, tetapi alih-alih mengambil data yang sudah tersimpan dari database, mereka menghasilkan respons baru berdasarkan pola yang dipelajari dari sejumlah besar teks. Pikirkan ini seperti perbedaan antara sistem katalog perpustakaan dan pustakawan yang berpengetahuan luas yang dapat menyusun informasi dari berbagai sumber.
Apa Itu "Generative AI" Sebenarnya?
Pertimbangkan bagaimana Batu Rosetta memungkinkan para sarjana memahami hieroglif Mesir dengan menemukan pola antara bahasa yang dikenal dan yang tidak dikenal. Model AI bekerja dengan cara yang sama – mereka menemukan pola dalam sejumlah besar teks untuk memahami bagaimana bahasa bekerja, lalu menggunakan pola tersebut untuk menghasilkan respons yang sesuai dengan pertanyaan baru.
Mari saya jelaskan dengan perbandingan sederhana:
- Database tradisional: Seperti meminta akta kelahiran Anda – Anda mendapatkan dokumen yang sama persis setiap kali
- Mesin pencari: Seperti meminta pustakawan menemukan buku tentang kucing – mereka menunjukkan apa yang tersedia
- Generative AI: Seperti meminta teman yang berpengetahuan tentang kucing – mereka memberi tahu Anda hal-hal menarik dengan kata-kata mereka sendiri, disesuaikan dengan apa yang ingin Anda ketahui
graph LR
A[Your Question] --> B[AI Model]
B --> C[Pattern Recognition]
C --> D[Content Generation]
D --> E[Contextual Response]
F[Training Data<br/>Books, Articles, Web] --> B
Bagaimana Model AI Belajar (Versi Sederhana)
Model AI belajar melalui paparan dataset besar yang berisi teks dari buku, artikel, dan percakapan. Melalui proses ini, mereka mengidentifikasi pola dalam:
- Bagaimana pemikiran disusun dalam komunikasi tertulis
- Kata-kata apa yang biasanya muncul bersama
- Bagaimana percakapan biasanya mengalir
- Perbedaan kontekstual antara komunikasi formal dan informal
Ini mirip dengan bagaimana arkeolog menguraikan bahasa kuno: mereka menganalisis ribuan contoh untuk memahami tata bahasa, kosakata, dan konteks budaya, akhirnya mampu menafsirkan teks baru menggunakan pola yang telah dipelajari.
Mengapa GitHub Models?
Kami menggunakan GitHub Models karena alasan yang cukup praktis – ini memberi kami akses ke AI tingkat perusahaan tanpa harus mengatur infrastruktur AI kami sendiri (yang, percayalah, Anda tidak ingin melakukannya sekarang!). Pikirkan ini seperti menggunakan API cuaca daripada mencoba memprediksi cuaca sendiri dengan mendirikan stasiun cuaca di mana-mana.
Ini pada dasarnya adalah "AI-as-a-Service," dan bagian terbaiknya? Gratis untuk memulai, sehingga Anda dapat bereksperimen tanpa khawatir tentang biaya yang besar.
graph LR
A[Frontend Chat UI] --> B[Your Backend API]
B --> C[GitHub Models API]
C --> D[AI Model Processing]
D --> C
C --> B
B --> A
Kami akan menggunakan GitHub Models untuk integrasi backend kami, yang menyediakan akses ke kemampuan AI tingkat profesional melalui antarmuka yang ramah pengembang. GitHub Models Playground berfungsi sebagai lingkungan pengujian di mana Anda dapat bereksperimen dengan berbagai model AI dan memahami kemampuannya sebelum mengimplementasikannya dalam kode.
🧠 Ekosistem Pengembangan Aplikasi AI
mindmap
root((AI Development))
Understanding AI
Generative Models
Pattern Recognition
Content Generation
Context Understanding
Response Synthesis
AI Parameters
Temperature Control
Token Limits
Top-p Filtering
System Prompts
Backend Architecture
API Integration
GitHub Models
Authentication
Request Handling
Error Management
Python Infrastructure
FastAPI Framework
Async Operations
Environment Security
CORS Configuration
Frontend Experience
Chat Interface
Real-time Updates
Message History
User Feedback
Loading States
Modern Web Tech
ES6 Classes
Async/Await
DOM Manipulation
Event Handling
Professional Patterns
Security Best Practices
Token Management
Input Validation
XSS Prevention
Error Boundaries
Production Readiness
Performance Optimization
Responsive Design
Accessibility
Testing Strategies
Prinsip Inti: Pengembangan aplikasi AI menggabungkan keterampilan pengembangan web tradisional dengan integrasi layanan AI, menciptakan aplikasi cerdas yang terasa alami dan responsif bagi pengguna.
Inilah yang membuat playground sangat berguna:
- Coba berbagai model AI seperti GPT-4o-mini, Claude, dan lainnya (semuanya gratis!)
- Uji ide dan prompt Anda sebelum menulis kode apa pun
- Dapatkan cuplikan kode siap pakai dalam bahasa pemrograman favorit Anda
- Sesuaikan pengaturan seperti tingkat kreativitas dan panjang respons untuk melihat bagaimana mereka memengaruhi output
Setelah Anda mencoba-coba sedikit, cukup klik tab "Code" dan pilih bahasa pemrograman Anda untuk mendapatkan kode implementasi yang Anda butuhkan.
Menyiapkan Integrasi Backend Python
Sekarang mari kita implementasikan integrasi AI menggunakan Python. Python sangat baik untuk aplikasi AI karena sintaksnya yang sederhana dan pustaka yang kuat. Kita akan mulai dengan kode dari playground GitHub Models dan kemudian merombaknya menjadi fungsi yang dapat digunakan kembali dan siap produksi.
Memahami Implementasi Dasar
Ketika Anda mengambil kode Python dari playground, Anda akan mendapatkan sesuatu yang terlihat seperti ini. Jangan khawatir jika tampaknya banyak pada awalnya – mari kita bahas bagian demi bagian:
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings.
# Create your PAT token by following instructions here: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
Inilah yang terjadi dalam kode ini:
- Kita mengimpor alat yang kita butuhkan:
osuntuk membaca variabel lingkungan danOpenAIuntuk berbicara dengan AI - Kita mengatur klien OpenAI untuk menunjuk ke server AI GitHub alih-alih langsung ke OpenAI
- Kita mengautentikasi menggunakan token GitHub khusus (lebih lanjut tentang ini sebentar lagi!)
- Kita menyusun percakapan kita dengan berbagai "peran" – pikirkan ini seperti mengatur adegan untuk sebuah drama
- Kita mengirim permintaan kita ke AI dengan beberapa parameter penyetelan
- Kita mengekstrak teks respons aktual dari semua data yang kembali
Memahami Peran Pesan: Kerangka Percakapan AI
Percakapan AI menggunakan struktur spesifik dengan berbagai "peran" yang memiliki tujuan berbeda:
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
Pikirkan ini seperti mengarahkan sebuah drama:
- Peran sistem: Seperti arahan panggung untuk aktor – ini memberi tahu AI bagaimana berperilaku, kepribadian apa yang dimiliki, dan bagaimana merespons
- Peran pengguna: Pertanyaan atau pesan sebenarnya dari orang yang menggunakan aplikasi Anda
- Peran asisten: Respons AI (Anda tidak mengirim ini, tetapi muncul dalam riwayat percakapan)
Analogi dunia nyata: Bayangkan Anda memperkenalkan seorang teman kepada seseorang di sebuah pesta:
- Pesan sistem: "Ini teman saya Sarah, dia seorang dokter yang pandai menjelaskan konsep medis dengan cara yang sederhana"
- Pesan pengguna: "Bisakah Anda menjelaskan bagaimana vaksin bekerja?"
- Respons asisten: Sarah merespons sebagai dokter yang ramah, bukan sebagai pengacara atau koki
Memahami Parameter AI: Menyetel Perilaku Respons
Parameter numerik dalam panggilan API AI mengontrol bagaimana model menghasilkan respons. Pengaturan ini memungkinkan Anda menyesuaikan perilaku AI untuk berbagai kasus penggunaan:
Temperature (0.0 hingga 2.0): Pengatur Kreativitas
Apa yang dilakukan: Mengontrol seberapa kreatif atau dapat diprediksi respons AI.
Pikirkan ini seperti tingkat improvisasi musisi jazz:
- Temperature = 0.1: Memainkan melodi yang sama persis setiap kali (sangat dapat diprediksi)
- Temperature = 0.7: Menambahkan beberapa variasi yang menarik sambil tetap dapat dikenali (kreativitas seimbang)
- Temperature = 1.5: Jazz eksperimental penuh dengan tikungan tak terduga (sangat tidak dapat diprediksi)
# Very predictable responses (good for factual questions)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Will almost always say "4"
)
# Creative responses (good for brainstorming)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Will generate unique, unexpected stories
)
Max Tokens (1 hingga 4096+): Pengontrol Panjang Respons
Apa yang dilakukan: Menetapkan batas seberapa panjang respons AI.
Pikirkan token sebagai kira-kira setara dengan kata (sekitar 1 token = 0,75 kata dalam bahasa Inggris):
- max_tokens=50: Pendek dan padat (seperti pesan teks)
- max_tokens=500: Satu atau dua paragraf yang bagus
- max_tokens=2000: Penjelasan rinci dengan contoh
# Short, concise answers
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Forces a brief explanation
)
# Detailed, comprehensive answers
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Allows for detailed explanations with examples
)
Top_p (0.0 hingga 1.0): Parameter Fokus
Apa yang dilakukan: Mengontrol seberapa fokus AI tetap pada respons yang paling mungkin.
Bayangkan AI memiliki kosakata besar, diurutkan berdasarkan seberapa mungkin setiap kata:
- top_p=0.1: Hanya mempertimbangkan 10% kata yang paling mungkin (sangat fokus)
- top_p=0.9: Mempertimbangkan 90% kemungkinan kata (lebih kreatif)
- top_p=1.0: Mempertimbangkan semuanya (variasi maksimum)
Sebagai contoh: Jika Anda bertanya "Langit biasanya..."
- Top_p rendah: Hampir pasti mengatakan "biru"
- Top_p tinggi: Mungkin mengatakan "biru", "berawan", "luas", "berubah", "indah", dll.
Menggabungkan Semuanya: Kombinasi Parameter untuk Berbagai Kasus Penggunaan
# For factual, consistent answers (like a documentation bot)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# For creative writing assistance
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# For conversational, helpful responses (balanced)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
quadrantChart
title AI Parameter Optimization Matrix
x-axis Low Creativity --> High Creativity
y-axis Short Response --> Long Response
quadrant-1 Creative Content
quadrant-2 Detailed Analysis
quadrant-3 Quick Facts
quadrant-4 Conversational AI
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
Memahami mengapa parameter ini penting: Aplikasi yang berbeda membutuhkan jenis respons yang berbeda. Bot layanan pelanggan harus konsisten dan faktual (temperature rendah), sementara asisten penulisan kreatif harus imajinatif dan bervariasi (temperature tinggi). Memahami parameter ini memberi Anda kendali atas kepribadian dan gaya respons AI.
**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
### Creating a Reusable AI Function
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
```python
import asyncio
from openai import AsyncOpenAI
# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
"""
Sends a prompt to the AI model asynchronously and returns the response.
Args:
prompt: The user's question or message
system_message: Instructions that define the AI's behavior and personality
Returns:
str: The AI's response to the prompt
"""
try:
response = await client.chat.completions.create(
messages=[
{
"role": "system",
"content": system_message,
},
{
"role": "user",
"content": prompt,
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
return response.choices[0].message.content
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return "I'm sorry, I'm having trouble processing your request right now."
# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
"""Synchronous wrapper for async AI calls."""
return asyncio.run(call_llm_async(prompt, system_message))
Memahami fungsi yang ditingkatkan ini:
- Menerima dua parameter: prompt pengguna dan pesan sistem opsional
- Menyediakan pesan sistem default untuk perilaku asisten umum
- Menggunakan petunjuk tipe Python yang tepat untuk dokumentasi kode yang lebih baik
- Menyertakan docstring terperinci yang menjelaskan tujuan dan parameter fungsi
- Mengembalikan hanya konten respons, membuatnya mudah digunakan dalam API web kami
- Mempertahankan parameter model yang sama untuk perilaku AI yang konsisten
Keajaiban Prompt Sistem: Memprogram Kepribadian AI
Jika parameter mengontrol bagaimana AI berpikir, prompt sistem mengontrol siapa AI berpikir dirinya. Ini adalah salah satu bagian paling keren dari bekerja dengan AI – Anda pada dasarnya memberikan AI kepribadian lengkap, tingkat keahlian, dan gaya komunikasi.
Pikirkan prompt sistem seperti memilih aktor untuk peran tertentu: Alih-alih memiliki satu asisten generik, Anda dapat menciptakan ahli khusus untuk berbagai situasi. Butuh guru yang sabar? Mitra brainstorming yang kreatif? Penasihat bisnis yang tegas? Cukup ubah prompt sistem!
Mengapa Prompt Sistem Sangat Kuat
Inilah bagian yang menarik: Model AI telah dilatih pada banyak percakapan di mana orang mengadopsi berbagai peran dan tingkat keahlian. Ketika Anda memberikan AI peran tertentu, itu seperti menyalakan saklar yang mengaktifkan semua pola yang dipelajari tersebut.
Ini seperti metode akting untuk AI: Beri tahu seorang aktor "Anda adalah profesor tua yang bijaksana" dan lihat bagaimana mereka secara otomatis menyesuaikan postur, kosakata, dan gaya bicara mereka. AI melakukan sesuatu yang sangat mirip dengan pola bahasa.
Membuat Prompt Sistem yang Efektif: Seni dan Ilmu
Anatomi prompt sistem yang hebat:
- Peran/Identitas: Siapa AI itu?
- Keahlian: Apa yang mereka ketahui?
- Gaya komunikasi: Bagaimana mereka berbicara?
- Instruksi spesifik: Apa yang harus mereka fokuskan?
# ❌ Vague system prompt
"You are helpful."
# ✅ Detailed, effective system prompt
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
Contoh Prompt Sistem dengan Konteks
Mari kita lihat bagaimana prompt sistem yang berbeda menciptakan kepribadian AI yang sepenuhnya berbeda:
# Example 1: The Patient Teacher
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students.
You break down complex concepts into simple steps, use analogies from everyday life,
and always check if the student understands before moving on. You're encouraging
and never make students feel bad for not knowing something.
"""
# Example 2: The Creative Collaborator
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're
enthusiastic, imaginative, and always build on the user's ideas rather than
replacing them. You ask thought-provoking questions to spark creativity and
offer unexpected perspectives that make stories more interesting.
"""
# Example 3: The Strategic Business Advisor
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience
helping startups scale. You think in frameworks, provide structured advice,
and always consider both short-term tactics and long-term strategy. You ask
probing questions to understand the full business context before giving advice.
"""
Melihat Prompt Sistem dalam Aksi
Mari kita uji pertanyaan yang sama dengan prompt sistem yang berbeda untuk melihat perbedaan dramatis:
Pertanyaan: "Bagaimana cara menangani autentikasi pengguna dalam aplikasi web saya?"
# With teacher prompt:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Typical response: "Great question! Let's break authentication down into simple steps.
# Think of it like a nightclub bouncer checking IDs..."
# With business prompt:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Typical response: "From a strategic perspective, authentication is crucial for user
# trust and regulatory compliance. Let me outline a framework considering security,
# user experience, and scalability..."
Teknik Lanjutan Prompt Sistem
1. Pengaturan Konteks: Berikan informasi latar belakang kepada AI
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
2. Format Output: Beritahu AI bagaimana menyusun respons
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
3. Menetapkan Batasan: Tentukan apa yang TIDAK boleh dilakukan oleh AI
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
Mengapa Ini Penting untuk Asisten Chat Anda
Memahami sistem prompt memberi Anda kekuatan luar biasa untuk menciptakan asisten AI yang khusus:
- Bot layanan pelanggan: Membantu, sabar, memahami kebijakan
- Tutor pembelajaran: Mendukung, langkah demi langkah, memeriksa pemahaman
- Mitra kreatif: Imajinatif, mengembangkan ide, bertanya "bagaimana jika?"
- Ahli teknis: Akurat, rinci, sadar keamanan
Wawasan utama: Anda tidak hanya memanggil API AI – Anda menciptakan kepribadian AI khusus yang melayani kebutuhan spesifik Anda. Inilah yang membuat aplikasi AI modern terasa disesuaikan dan berguna daripada generik.
🎯 Pemeriksaan Pedagogis: Pemrograman Kepribadian AI
Berhenti dan Renungkan: Anda baru saja belajar memprogram kepribadian AI melalui sistem prompt. Ini adalah keterampilan mendasar dalam pengembangan aplikasi AI modern.
Penilaian Diri Cepat:
- Bisakah Anda menjelaskan bagaimana sistem prompt berbeda dari pesan pengguna biasa?
- Apa perbedaan antara parameter temperature dan top_p?
- Bagaimana Anda akan membuat sistem prompt untuk kasus penggunaan tertentu (seperti tutor coding)?
Koneksi Dunia Nyata: Teknik sistem prompt yang Anda pelajari digunakan dalam setiap aplikasi AI utama - dari bantuan coding GitHub Copilot hingga antarmuka percakapan ChatGPT. Anda menguasai pola yang sama yang digunakan oleh tim produk AI di perusahaan teknologi besar.
Pertanyaan Tantangan: Bagaimana Anda merancang kepribadian AI yang berbeda untuk tipe pengguna yang berbeda (pemula vs ahli)? Pertimbangkan bagaimana model AI yang sama dapat melayani audiens yang berbeda melalui rekayasa prompt.
Membangun Web API dengan FastAPI: Hub Komunikasi AI Berperforma Tinggi Anda
Sekarang mari kita bangun backend yang menghubungkan frontend Anda ke layanan AI. Kita akan menggunakan FastAPI, kerangka kerja Python modern yang unggul dalam membangun API untuk aplikasi AI.
FastAPI menawarkan beberapa keuntungan untuk jenis proyek ini: dukungan async bawaan untuk menangani permintaan bersamaan, pembuatan dokumentasi API otomatis, dan kinerja yang sangat baik. Server FastAPI Anda bertindak sebagai perantara yang menerima permintaan dari frontend, berkomunikasi dengan layanan AI, dan mengembalikan respons yang diformat.
Mengapa FastAPI untuk Aplikasi AI?
Anda mungkin bertanya: "Apakah saya tidak bisa langsung memanggil AI dari JavaScript frontend saya?" atau "Mengapa FastAPI daripada Flask atau Django?" Pertanyaan yang bagus!
Inilah mengapa FastAPI sempurna untuk apa yang kita bangun:
- Async secara default: Dapat menangani beberapa permintaan AI sekaligus tanpa macet
- Dokumentasi otomatis: Kunjungi
/docsdan dapatkan halaman dokumentasi API interaktif yang indah secara gratis - Validasi bawaan: Menangkap kesalahan sebelum menyebabkan masalah
- Sangat cepat: Salah satu kerangka kerja Python tercepat
- Python modern: Menggunakan semua fitur Python terbaru dan terbaik
Dan inilah mengapa kita membutuhkan backend sama sekali:
Keamanan: Kunci API AI Anda seperti kata sandi – jika Anda meletakkannya di JavaScript frontend, siapa pun yang melihat kode sumber situs web Anda dapat mencurinya dan menggunakan kredit AI Anda. Backend menjaga kredensial sensitif tetap aman.
Pembatasan & Kontrol: Backend memungkinkan Anda mengontrol seberapa sering pengguna dapat membuat permintaan, menerapkan autentikasi pengguna, dan menambahkan logging untuk melacak penggunaan.
Pemrosesan Data: Anda mungkin ingin menyimpan percakapan, menyaring konten yang tidak pantas, atau menggabungkan beberapa layanan AI. Backend adalah tempat logika ini berada.
Arsitektur menyerupai model client-server:
- Frontend: Lapisan antarmuka pengguna untuk interaksi
- Backend API: Lapisan pemrosesan dan pengalihan permintaan
- Layanan AI: Komputasi eksternal dan pembuatan respons
- Variabel Lingkungan: Penyimpanan konfigurasi dan kredensial yang aman
Memahami Alur Permintaan-Respons
Mari kita telusuri apa yang terjadi ketika pengguna mengirim pesan:
sequenceDiagram
participant User as 👤 User
participant Frontend as 🌐 Frontend
participant API as 🔧 FastAPI Server
participant AI as 🤖 AI Service
User->>Frontend: Types "Hello AI!"
Frontend->>API: POST /hello {"message": "Hello AI!"}
Note over API: Validates request<br/>Adds system prompt
API->>AI: Sends formatted request
AI->>API: Returns AI response
Note over API: Processes response<br/>Logs conversation
API->>Frontend: {"response": "Hello! How can I help?"}
Frontend->>User: Displays AI message
Memahami setiap langkah:
- Interaksi pengguna: Pengguna mengetik di antarmuka chat
- Pemrosesan frontend: JavaScript menangkap input dan memformatnya sebagai JSON
- Validasi API: FastAPI secara otomatis memvalidasi permintaan menggunakan model Pydantic
- Integrasi AI: Backend menambahkan konteks (sistem prompt) dan memanggil layanan AI
- Penanganan respons: API menerima respons AI dan dapat memodifikasinya jika diperlukan
- Tampilan frontend: JavaScript menampilkan respons di antarmuka chat
Memahami Arsitektur API
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Hello AI!"}
FastAPI->>AI Function: call_llm(message, system_prompt)
AI Function->>GitHub Models: API request
GitHub Models->>AI Function: AI response
AI Function->>FastAPI: response text
FastAPI->>Frontend: {"response": "Hello! How can I help?"}
flowchart TD
A[User Input] --> B[Frontend Validation]
B --> C[HTTP POST Request]
C --> D[FastAPI Router]
D --> E[Pydantic Validation]
E --> F[AI Function Call]
F --> G[GitHub Models API]
G --> H[Response Processing]
H --> I[JSON Response]
I --> J[Frontend Update]
subgraph "Security Layer"
K[CORS Middleware]
L[Environment Variables]
M[Error Handling]
end
D --> K
F --> L
H --> M
Membuat Aplikasi FastAPI
Mari kita bangun API kita langkah demi langkah. Buat file bernama api.py dengan kode FastAPI berikut:
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Create FastAPI application
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Configure CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Configure appropriately for production
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic models for request/response validation
class ChatMessage(BaseModel):
message: str
class ChatResponse(BaseModel):
response: str
@app.get("/")
async def root():
"""Root endpoint providing API information."""
return {
"message": "Welcome to the AI Chat API",
"docs": "/docs",
"health": "/health"
}
@app.get("/health")
async def health_check():
"""Health check endpoint."""
return {"status": "healthy", "service": "ai-chat-api"}
@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
"""Main chat endpoint that processes messages and returns AI responses."""
try:
# Extract and validate message
message = chat_message.message.strip()
if not message:
raise HTTPException(status_code=400, detail="Message cannot be empty")
logger.info(f"Processing message: {message[:50]}...")
# Call AI service (note: call_llm should be made async for better performance)
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
logger.info("AI response generated successfully")
return ChatResponse(response=ai_response)
except HTTPException:
raise
except Exception as e:
logger.error(f"Error processing chat message: {str(e)}")
raise HTTPException(status_code=500, detail="Internal server error")
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
Memahami implementasi FastAPI:
- Mengimpor FastAPI untuk fungsionalitas kerangka kerja web modern dan Pydantic untuk validasi data
- Membuat dokumentasi API otomatis (tersedia di
/docssaat server berjalan) - Mengaktifkan middleware CORS untuk memungkinkan permintaan frontend dari asal yang berbeda
- Mendefinisikan model Pydantic untuk validasi dan dokumentasi permintaan/respons otomatis
- Menggunakan endpoint async untuk kinerja lebih baik dengan permintaan bersamaan
- Mengimplementasikan kode status HTTP yang tepat dan penanganan kesalahan dengan HTTPException
- Menyertakan logging terstruktur untuk pemantauan dan debugging
- Menyediakan endpoint pemeriksaan kesehatan untuk memantau status layanan
Keunggulan utama FastAPI dibandingkan kerangka kerja tradisional:
- Validasi otomatis: Model Pydantic memastikan integritas data sebelum diproses
- Dokumentasi interaktif: Kunjungi
/docsuntuk dokumentasi API yang dihasilkan secara otomatis dan dapat diuji - Keamanan tipe: Petunjuk tipe Python mencegah kesalahan runtime dan meningkatkan kualitas kode
- Dukungan async: Menangani beberapa permintaan AI secara bersamaan tanpa memblokir
- Kinerja: Pemrosesan permintaan yang jauh lebih cepat untuk aplikasi real-time
Memahami CORS: Penjaga Keamanan Web
CORS (Cross-Origin Resource Sharing) seperti penjaga keamanan di sebuah gedung yang memeriksa apakah pengunjung diizinkan masuk. Mari kita pahami mengapa ini penting dan bagaimana pengaruhnya terhadap aplikasi Anda.
Apa itu CORS dan Mengapa Ada?
Masalahnya: Bayangkan jika situs web mana pun dapat membuat permintaan ke situs web bank Anda atas nama Anda tanpa izin Anda. Itu akan menjadi mimpi buruk keamanan! Browser mencegah ini secara default melalui "Kebijakan Asal yang Sama."
Kebijakan Asal yang Sama: Browser hanya mengizinkan halaman web membuat permintaan ke domain, port, dan protokol yang sama dari mana mereka dimuat.
Analogi dunia nyata: Ini seperti keamanan gedung apartemen – hanya penghuni (asal yang sama) yang dapat mengakses gedung secara default. Jika Anda ingin membiarkan teman (asal yang berbeda) berkunjung, Anda harus secara eksplisit memberi tahu keamanan bahwa itu diperbolehkan.
CORS di Lingkungan Pengembangan Anda
Selama pengembangan, frontend dan backend Anda berjalan di port yang berbeda:
- Frontend:
http://localhost:3000(atau file:// jika membuka HTML langsung) - Backend:
http://localhost:5000
Ini dianggap "asal yang berbeda" meskipun berada di komputer yang sama!
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # This tells browsers: "It's okay for other origins to make requests to this API"
Apa yang dilakukan konfigurasi CORS dalam praktiknya:
- Menambahkan header HTTP khusus ke respons API yang memberi tahu browser "permintaan lintas asal ini diizinkan"
- Menangani permintaan "preflight" (browser terkadang memeriksa izin sebelum mengirimkan permintaan sebenarnya)
- Mencegah kesalahan "diblokir oleh kebijakan CORS" yang ditakuti di konsol browser Anda
Keamanan CORS: Pengembangan vs Produksi
# 🚨 Development: Allows ALL origins (convenient but insecure)
CORS(app)
# ✅ Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Advanced: Different origins for different environments
if app.debug: # Development mode
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Production mode
CORS(app, origins=["https://yourdomain.com"])
Mengapa ini penting: Dalam pengembangan, CORS(app) seperti membiarkan pintu depan Anda tidak terkunci – nyaman tetapi tidak aman. Dalam produksi, Anda ingin menentukan dengan tepat situs web mana yang dapat berbicara dengan API Anda.
Skenario dan Solusi CORS Umum
| Skenario | Masalah | Solusi |
|---|---|---|
| Pengembangan Lokal | Frontend tidak dapat mengakses backend | Tambahkan CORSMiddleware ke FastAPI |
| GitHub Pages + Heroku | Frontend yang diterapkan tidak dapat mengakses API | Tambahkan URL GitHub Pages Anda ke asal CORS |
| Domain Kustom | Kesalahan CORS di produksi | Perbarui asal CORS agar sesuai dengan domain Anda |
| Aplikasi Seluler | Aplikasi tidak dapat mengakses web API | Tambahkan domain aplikasi Anda atau gunakan * dengan hati-hati |
Tips profesional: Anda dapat memeriksa header CORS di Alat Pengembang browser Anda di tab Jaringan. Cari header seperti Access-Control-Allow-Origin dalam respons.
Penanganan Kesalahan dan Validasi
Perhatikan bagaimana API kita menyertakan penanganan kesalahan yang tepat:
# Validate that we received a message
if not message:
return jsonify({"error": "Message field is required"}), 400
Prinsip validasi utama:
- Memeriksa bidang yang diperlukan sebelum memproses permintaan
- Mengembalikan pesan kesalahan yang bermakna dalam format JSON
- Menggunakan kode status HTTP yang sesuai (400 untuk permintaan buruk)
- Menyediakan umpan balik yang jelas untuk membantu pengembang frontend memecahkan masalah
Menyiapkan dan Menjalankan Backend Anda
Sekarang kita memiliki integrasi AI dan server FastAPI yang siap, mari kita jalankan semuanya. Proses pengaturan melibatkan menginstal dependensi Python, mengonfigurasi variabel lingkungan, dan memulai server pengembangan Anda.
Pengaturan Lingkungan Python
Mari kita siapkan lingkungan pengembangan Python Anda. Lingkungan virtual seperti pendekatan terkompartementalisasi Proyek Manhattan – setiap proyek mendapatkan ruang terisolasi sendiri dengan alat dan dependensi tertentu, mencegah konflik antar proyek.
# Navigate to your backend directory
cd backend
# Create a virtual environment (like creating a clean room for your project)
python -m venv venv
# Activate it (Linux/Mac)
source ./venv/bin/activate
# On Windows, use:
# venv\Scripts\activate
# Install the good stuff
pip install openai fastapi uvicorn python-dotenv
Apa yang baru saja kita lakukan:
- Membuat gelembung Python kita sendiri di mana kita dapat menginstal paket tanpa memengaruhi apa pun
- Mengaktifkannya sehingga terminal kita tahu untuk menggunakan lingkungan spesifik ini
- Menginstal kebutuhan dasar: OpenAI untuk keajaiban AI, FastAPI untuk web API kita, Uvicorn untuk menjalankannya, dan python-dotenv untuk manajemen rahasia yang aman
Penjelasan dependensi utama:
- FastAPI: Kerangka kerja web modern dan cepat dengan dokumentasi API otomatis
- Uvicorn: Server ASGI yang sangat cepat yang menjalankan aplikasi FastAPI
- OpenAI: Perpustakaan resmi untuk integrasi Model GitHub dan API OpenAI
- python-dotenv: Memuat variabel lingkungan secara aman dari file .env
Konfigurasi Lingkungan: Menjaga Rahasia Tetap Aman
Sebelum kita memulai API kita, kita perlu membahas salah satu pelajaran terpenting dalam pengembangan web: bagaimana menjaga rahasia Anda tetap benar-benar aman. Variabel lingkungan seperti brankas aman yang hanya dapat diakses oleh aplikasi Anda.
Apa Itu Variabel Lingkungan?
Pikirkan variabel lingkungan seperti kotak deposit aman – Anda meletakkan barang berharga Anda di sana, dan hanya Anda (dan aplikasi Anda) yang memiliki kunci untuk mengeluarkannya. Alih-alih menulis informasi sensitif langsung di kode Anda (di mana siapa pun dapat melihatnya), Anda menyimpannya dengan aman di lingkungan.
Inilah perbedaannya:
- Cara yang salah: Menulis kata sandi Anda di catatan tempel dan meletakkannya di monitor Anda
- Cara yang benar: Menyimpan kata sandi Anda di pengelola kata sandi yang aman yang hanya dapat Anda akses
Mengapa Variabel Lingkungan Penting
# 🚨 NEVER DO THIS - API key visible to everyone
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Anyone can steal this!
base_url="https://models.github.ai/inference"
)
# ✅ DO THIS - API key stored securely
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Only your app can access this
base_url="https://models.github.ai/inference"
)
Apa yang terjadi ketika Anda menyematkan rahasia:
- Paparan kontrol versi: Siapa pun yang memiliki akses ke repositori Git Anda melihat kunci API Anda
- Repositori publik: Jika Anda mendorong ke GitHub, kunci Anda terlihat oleh seluruh internet
- Berbagi tim: Pengembang lain yang bekerja pada proyek Anda mendapatkan akses ke kunci API pribadi Anda
- Pelanggaran keamanan: Jika seseorang mencuri kunci API Anda, mereka dapat menggunakan kredit AI Anda
Menyiapkan File Lingkungan Anda
Buat file .env di direktori backend Anda. File ini menyimpan rahasia Anda secara lokal:
# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
Memahami file .env:
- Satu rahasia per baris dalam format
KEY=value - Tidak ada spasi di sekitar tanda sama dengan
- Tidak perlu tanda kutip di sekitar nilai (biasanya)
- Komentar dimulai dengan
#
Membuat Token Akses Pribadi GitHub Anda
Token GitHub Anda seperti kata sandi khusus yang memberi aplikasi Anda izin untuk menggunakan layanan AI GitHub:
Langkah-langkah pembuatan token:
- Pergi ke Pengaturan GitHub → Pengaturan pengembang → Token akses pribadi → Token (klasik)
- Klik "Buat token baru (klasik)"
- Tetapkan masa berlaku (30 hari untuk pengujian, lebih lama untuk produksi)
- Pilih cakupan: Centang "repo" dan izin lain yang Anda butuhkan
- Buat token dan salin segera (Anda tidak dapat melihatnya lagi!)
- Tempelkan ke file .env Anda
# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
Memuat Variabel Lingkungan di Python
import os
from dotenv import load_dotenv
# Load environment variables from .env file
load_dotenv()
# Now you can access them securely
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
raise ValueError("GITHUB_TOKEN not found in environment variables!")
client = OpenAI(
api_key=api_key,
base_url="https://models.github.ai/inference"
)
Apa yang dilakukan kode ini:
- Memuat file .env Anda dan membuat variabel tersedia untuk Python
- Memeriksa apakah token yang diperlukan ada (penanganan kesalahan yang baik!)
- Mengangkat kesalahan yang jelas jika token hilang
- Menggunakan token dengan aman tanpa mengeksposnya dalam kode
Keamanan Git: File .gitignore
File .gitignore Anda memberi tahu Git file mana yang tidak boleh dilacak atau diunggah:
# .gitignore - Add these lines
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
Mengapa ini penting: Setelah Anda menambahkan .env ke .gitignore, Git akan mengabaikan file lingkungan Anda, mencegah Anda secara tidak sengaja mengunggah rahasia Anda ke GitHub.
Lingkungan yang Berbeda, Rahasia yang Berbeda
Aplikasi profesional menggunakan kunci API yang berbeda untuk lingkungan yang berbeda:
# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.production
GITHUB_TOKEN=your_production_token
DEBUG=False
Mengapa ini penting: Anda tidak ingin eksperimen pengembangan Anda memengaruhi kuota penggunaan AI produksi Anda, dan Anda menginginkan tingkat keamanan yang berbeda untuk lingkungan yang berbeda.
Memulai Server Pengembangan Anda: Menghidupkan FastAPI Anda
Sekarang saat yang ditunggu-tunggu – memulai server pengembangan FastAPI Anda dan melihat integrasi AI Anda hidup! FastAPI menggunakan Uvicorn, server ASGI yang sangat cepat yang dirancang khusus untuk aplikasi Python asinkron.
Memahami Proses Startup Server FastAPI
# Method 1: Direct Python execution (includes auto-reload)
python api.py
# Method 2: Using Uvicorn directly (more control)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
Saat Anda menjalankan perintah ini, berikut adalah yang terjadi di belakang layar:
1. Python memuat aplikasi FastAPI Anda:
- Mengimpor semua pustaka yang diperlukan (FastAPI, Pydantic, OpenAI, dll.)
- Memuat variabel lingkungan dari file
.envAnda - Membuat instance aplikasi FastAPI dengan dokumentasi otomatis
2. Uvicorn mengonfigurasi server ASGI:
- Mengikat ke port 5000 dengan kemampuan penanganan permintaan asinkron
- Menyiapkan routing permintaan dengan validasi otomatis
- Mengaktifkan hot reload untuk pengembangan (restart saat file berubah)
- Menghasilkan dokumentasi API interaktif
3. Server mulai mendengarkan:
- Terminal Anda akan menampilkan:
INFO: Uvicorn running on http://0.0.0.0:5000 - Server dapat menangani beberapa permintaan AI secara bersamaan
- API Anda siap dengan dokumentasi otomatis di
http://localhost:5000/docs
Apa yang Harus Anda Lihat Ketika Semuanya Berjalan Lancar
$ python api.py
INFO: Will watch for changes in these directories: ['/your/project/path']
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO: Started reloader process [12345] using WatchFiles
INFO: Started server process [12346]
INFO: Waiting for application startup.
INFO: Application startup complete.
Memahami output FastAPI:
- Will watch for changes: Auto-reload diaktifkan untuk pengembangan
- Uvicorn running: Server ASGI berperforma tinggi aktif
- Started reloader process: Pemantau file untuk restart otomatis
- Application startup complete: Aplikasi FastAPI berhasil diinisialisasi
- Interactive docs available: Kunjungi
/docsuntuk dokumentasi API otomatis
Menguji FastAPI Anda: Berbagai Pendekatan yang Kuat
FastAPI menyediakan beberapa cara yang nyaman untuk menguji API Anda, termasuk dokumentasi interaktif otomatis:
Metode 1: Dokumentasi API Interaktif (Direkomendasikan)
- Buka browser Anda dan pergi ke
http://localhost:5000/docs - Anda akan melihat Swagger UI dengan semua endpoint Anda terdokumentasi
- Klik pada
/hello→ "Try it out" → Masukkan pesan uji → "Execute" - Lihat respons langsung di browser dengan format yang tepat
Metode 2: Tes Browser Dasar
- Pergi ke
http://localhost:5000untuk endpoint root - Pergi ke
http://localhost:5000/healthuntuk memeriksa kesehatan server - Ini mengonfirmasi bahwa server FastAPI Anda berjalan dengan baik
Metode 2: Tes Command Line (Lanjutan)
# Test with curl (if available)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Expected response:
# {"response": "Hello! I'm your AI assistant. How can I help you today?"}
Metode 3: Skrip Tes Python
# test_api.py - Create this file to test your API
import requests
import json
# Test the API endpoint
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}
response = requests.post(url, json=data)
if response.status_code == 200:
result = response.json()
print("AI Response:", result['response'])
else:
print("Error:", response.status_code, response.text)
Memecahkan Masalah Startup Umum
| Pesan Error | Artinya | Cara Memperbaiki |
|---|---|---|
ModuleNotFoundError: No module named 'fastapi' |
FastAPI belum diinstal | Jalankan pip install fastapi uvicorn di lingkungan virtual Anda |
ModuleNotFoundError: No module named 'uvicorn' |
Server ASGI belum diinstal | Jalankan pip install uvicorn di lingkungan virtual Anda |
KeyError: 'GITHUB_TOKEN' |
Variabel lingkungan tidak ditemukan | Periksa file .env Anda dan panggilan load_dotenv() |
Address already in use |
Port 5000 sedang digunakan | Matikan proses lain yang menggunakan port 5000 atau ubah port |
ValidationError |
Data permintaan tidak sesuai dengan model Pydantic | Periksa format permintaan Anda sesuai dengan skema yang diharapkan |
HTTPException 422 |
Entitas tidak dapat diproses | Validasi permintaan gagal, periksa /docs untuk format yang benar |
OpenAI API error |
Autentikasi layanan AI gagal | Verifikasi token GitHub Anda benar dan memiliki izin yang sesuai |
Praktik Terbaik Pengembangan
Hot Reloading: FastAPI dengan Uvicorn menyediakan reload otomatis saat Anda menyimpan perubahan pada file Python Anda. Ini berarti Anda dapat memodifikasi kode dan menguji langsung tanpa harus memulai ulang secara manual.
# Enable hot reloading explicitly
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True enables hot reload
Logging untuk Pengembangan: Tambahkan logging untuk memahami apa yang terjadi:
import logging
# Set up logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
@app.route("/hello", methods=["POST"])
def hello():
data = request.get_json()
message = data.get("message", "")
logger.info(f"Received message: {message}")
if not message:
logger.warning("Empty message received")
return jsonify({"error": "Message field is required"}), 400
try:
response = call_llm(message, "You are a helpful and friendly assistant.")
logger.info(f"AI response generated successfully")
return jsonify({"response": response})
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return jsonify({"error": "AI service temporarily unavailable"}), 500
Mengapa logging membantu: Selama pengembangan, Anda dapat melihat dengan tepat permintaan apa yang masuk, respons AI, dan di mana kesalahan terjadi. Ini membuat debugging jauh lebih cepat.
Konfigurasi untuk GitHub Codespaces: Pengembangan Cloud yang Mudah
GitHub Codespaces seperti memiliki komputer pengembangan yang kuat di cloud yang dapat Anda akses dari browser mana pun. Jika Anda bekerja di Codespaces, ada beberapa langkah tambahan untuk membuat backend Anda dapat diakses oleh frontend Anda.
Memahami Jaringan Codespaces
Dalam lingkungan pengembangan lokal, semuanya berjalan di komputer yang sama:
- Backend:
http://localhost:5000 - Frontend:
http://localhost:3000(atau file://)
Di Codespaces, lingkungan pengembangan Anda berjalan di server GitHub, sehingga "localhost" memiliki arti yang berbeda. GitHub secara otomatis membuat URL publik untuk layanan Anda, tetapi Anda perlu mengonfigurasinya dengan benar.
Langkah-Langkah Konfigurasi Codespaces
1. Mulai server backend Anda:
cd backend
python api.py
Anda akan melihat pesan startup FastAPI/Uvicorn yang familiar, tetapi perhatikan bahwa ini berjalan di dalam lingkungan Codespace.
2. Konfigurasi visibilitas port:
- Cari tab "Ports" di panel bawah VS Code
- Temukan port 5000 dalam daftar
- Klik kanan pada port 5000
- Pilih "Port Visibility" → "Public"
Mengapa membuatnya publik? Secara default, port Codespace bersifat privat (hanya dapat diakses oleh Anda). Membuatnya publik memungkinkan frontend Anda (yang berjalan di browser) berkomunikasi dengan backend Anda.
3. Dapatkan URL publik Anda: Setelah membuat port publik, Anda akan melihat URL seperti:
https://your-codespace-name-5000.app.github.dev
4. Perbarui konfigurasi frontend Anda:
// In your frontend app.js, update the BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Memahami URL Codespace
URL Codespace mengikuti pola yang dapat diprediksi:
https://[codespace-name]-[port].app.github.dev
Penjelasan:
codespace-name: Pengidentifikasi unik untuk Codespace Anda (biasanya termasuk nama pengguna Anda)port: Nomor port tempat layanan Anda berjalan (5000 untuk aplikasi FastAPI kita)app.github.dev: Domain GitHub untuk aplikasi Codespace
Menguji Pengaturan Codespace Anda
1. Uji backend secara langsung: Buka URL publik Anda di tab browser baru. Anda seharusnya melihat:
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
2. Uji dengan alat pengembang browser:
// Open browser console and test your API
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({message: 'Hello from Codespaces!'})
})
.then(response => response.json())
.then(data => console.log(data));
Codespaces vs Pengembangan Lokal
| Aspek | Pengembangan Lokal | GitHub Codespaces |
|---|---|---|
| Waktu Pengaturan | Lebih lama (instal Python, dependensi) | Instan (lingkungan yang sudah dikonfigurasi) |
| Akses URL | http://localhost:5000 |
https://xyz-5000.app.github.dev |
| Konfigurasi Port | Otomatis | Manual (buat port publik) |
| Persistensi File | Mesin lokal | Repositori GitHub |
| Kolaborasi | Sulit untuk berbagi lingkungan | Mudah berbagi tautan Codespace |
| Ketergantungan Internet | Hanya untuk panggilan API AI | Diperlukan untuk semuanya |
Tips Pengembangan Codespace
Variabel Lingkungan di Codespaces:
File .env Anda bekerja dengan cara yang sama di Codespaces, tetapi Anda juga dapat mengatur variabel lingkungan langsung di Codespace:
# Set environment variable for the current session
export GITHUB_TOKEN="your_token_here"
# Or add to your .bashrc for persistence
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
Manajemen Port:
- Codespaces secara otomatis mendeteksi saat aplikasi Anda mulai mendengarkan di port
- Anda dapat meneruskan beberapa port secara bersamaan (berguna jika Anda menambahkan database nanti)
- Port tetap dapat diakses selama Codespace Anda berjalan
Alur Kerja Pengembangan:
- Lakukan perubahan kode di VS Code
- FastAPI auto-reload (berkat mode reload Uvicorn)
- Uji perubahan langsung melalui URL publik
- Commit dan push saat siap
💡 Pro Tip: Tandai URL backend Codespace Anda selama pengembangan. Karena nama Codespace stabil, URL tidak akan berubah selama Anda menggunakan Codespace yang sama.
Membuat Antarmuka Chat Frontend: Tempat Manusia Bertemu AI
Sekarang kita akan membangun antarmuka pengguna – bagian yang menentukan bagaimana orang berinteraksi dengan asisten AI Anda. Seperti desain antarmuka iPhone asli, kita fokus pada membuat teknologi kompleks terasa intuitif dan mudah digunakan.
Memahami Arsitektur Frontend Modern
Antarmuka chat kita akan menjadi apa yang disebut "Single Page Application" atau SPA. Alih-alih pendekatan lama di mana setiap klik memuat halaman baru, aplikasi kita akan memperbarui dengan lancar dan instan:
Website lama: Seperti membaca buku fisik – Anda membalik ke halaman baru sepenuhnya Aplikasi chat kita: Seperti menggunakan ponsel Anda – semuanya mengalir dan diperbarui dengan mulus
graph TD
A[User Types Message] --> B[JavaScript Captures Input]
B --> C[Validate & Format Data]
C --> D[Send to Backend API]
D --> E[Display Loading State]
E --> F[Receive AI Response]
F --> G[Update Chat Interface]
G --> H[Ready for Next Message]
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(text, role)
+escapeHtml(text)
+scrollToBottom()
+setLoading(isLoading)
}
ChatApp --> DOM : manipulates
ChatApp --> FastAPI : sends requests
Tiga Pilar Pengembangan Frontend
Setiap aplikasi frontend – dari situs web sederhana hingga aplikasi kompleks seperti Discord atau Slack – dibangun di atas tiga teknologi inti. Anggaplah mereka sebagai fondasi dari semua yang Anda lihat dan interaksi di web:
HTML (Struktur): Ini adalah fondasi Anda
- Menentukan elemen apa yang ada (tombol, area teks, kontainer)
- Memberikan makna pada konten (ini adalah header, ini adalah formulir, dll.)
- Membuat struktur dasar yang menjadi dasar segalanya
CSS (Presentasi): Ini adalah desainer interior Anda
- Membuat semuanya terlihat indah (warna, font, tata letak)
- Menangani berbagai ukuran layar (ponsel vs laptop vs tablet)
- Membuat animasi halus dan umpan balik visual
JavaScript (Perilaku): Ini adalah otak Anda
- Merespons apa yang dilakukan pengguna (klik, mengetik, menggulir)
- Berkomunikasi dengan backend Anda dan memperbarui halaman
- Membuat semuanya interaktif dan dinamis
Anggaplah seperti desain arsitektur:
- HTML: Cetak biru struktural (mendefinisikan ruang dan hubungan)
- CSS: Desain estetika dan lingkungan (gaya visual dan pengalaman pengguna)
- JavaScript: Sistem mekanis (fungsi dan interaktivitas)
Mengapa Arsitektur JavaScript Modern Penting
Aplikasi chat kita akan menggunakan pola JavaScript modern yang akan Anda lihat di aplikasi profesional. Memahami konsep-konsep ini akan membantu Anda berkembang sebagai pengembang:
Arsitektur Berbasis Kelas: Kita akan mengorganisasi kode kita ke dalam kelas, seperti membuat cetak biru untuk objek Async/Await: Cara modern untuk menangani operasi yang memakan waktu (seperti panggilan API) Pemrograman Berbasis Event: Aplikasi kita merespons tindakan pengguna (klik, penekanan tombol) daripada berjalan dalam loop Manipulasi DOM: Memperbarui konten halaman web secara dinamis berdasarkan interaksi pengguna dan respons API
Pengaturan Struktur Proyek
Buat direktori frontend dengan struktur yang terorganisasi ini:
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
Memahami arsitektur:
- Memisahkan perhatian antara struktur (HTML), perilaku (JavaScript), dan presentasi (CSS)
- Mempertahankan struktur file sederhana yang mudah dinavigasi dan dimodifikasi
- Mengikuti praktik terbaik pengembangan web untuk organisasi dan pemeliharaan
Membangun Fondasi HTML: Struktur Semantik untuk Aksesibilitas
Mari kita mulai dengan struktur HTML. Pengembangan web modern menekankan "HTML semantik" – menggunakan elemen HTML yang dengan jelas menggambarkan tujuan mereka, bukan hanya penampilan mereka. Ini membuat aplikasi Anda dapat diakses oleh pembaca layar, mesin pencari, dan alat lainnya.
Mengapa HTML semantik penting: Bayangkan menjelaskan aplikasi chat Anda kepada seseorang melalui telepon. Anda akan mengatakan "ada header dengan judul, area utama tempat percakapan muncul, dan formulir di bagian bawah untuk mengetik pesan." HTML semantik menggunakan elemen yang sesuai dengan deskripsi alami ini.
Buat index.html dengan markup yang terstruktur dengan baik ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chat Assistant</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<header class="chat-header">
<h1>AI Chat Assistant</h1>
<p>Ask me anything!</p>
</header>
<main class="chat-messages" id="messages" role="log" aria-live="polite">
<!-- Messages will be dynamically added here -->
</main>
<form class="chat-form" id="chatForm">
<div class="input-group">
<input
type="text"
id="messageInput"
placeholder="Type your message here..."
required
aria-label="Chat message input"
>
<button type="submit" id="sendBtn" aria-label="Send message">
Send
</button>
</div>
</form>
</div>
<script src="app.js"></script>
</body>
</html>
Memahami setiap elemen HTML dan tujuannya:
Struktur Dokumen
<!DOCTYPE html>: Memberitahu browser bahwa ini adalah HTML5 modern<html lang="en">: Menentukan bahasa halaman untuk pembaca layar dan alat terjemahan<meta charset="UTF-8">: Memastikan pengkodean karakter yang tepat untuk teks internasional<meta name="viewport"...>: Membuat halaman responsif untuk perangkat seluler dengan mengontrol zoom dan skala
Elemen Semantik
<header>: Dengan jelas mengidentifikasi bagian atas dengan judul dan deskripsi<main>: Menunjukkan area konten utama (tempat percakapan terjadi)<form>: Semantik yang benar untuk input pengguna, memungkinkan navigasi keyboard yang tepat
Fitur Aksesibilitas
role="log": Memberitahu pembaca layar bahwa area ini berisi log kronologis pesanaria-live="polite": Mengumumkan pesan baru ke pembaca layar tanpa menggangguaria-label: Memberikan label deskriptif untuk kontrol formulirrequired: Browser memvalidasi bahwa pengguna memasukkan pesan sebelum mengirim
Integrasi CSS dan JavaScript
- Atribut
class: Memberikan kaitan styling untuk CSS (misalnya,chat-container,input-group) - Atribut
id: Memungkinkan JavaScript menemukan dan memanipulasi elemen tertentu - Penempatan Script: File JavaScript dimuat di akhir sehingga HTML dimuat terlebih dahulu
Mengapa struktur ini berhasil:
- Alur logis: Header → Konten utama → Formulir input sesuai dengan urutan membaca alami
- Dapat diakses dengan keyboard: Pengguna dapat menavigasi semua elemen interaktif
- Ramah pembaca layar: Landmark dan deskripsi yang jelas untuk pengguna dengan gangguan penglihatan
- Responsif untuk perangkat seluler: Tag meta viewport memungkinkan desain responsif
- Peningkatan progresif: Berfungsi bahkan jika CSS atau JavaScript gagal dimuat
Menambahkan JavaScript Interaktif: Logika Aplikasi Web Modern
Sekarang mari kita buat JavaScript yang menghidupkan antarmuka obrolan kita. Kita akan menggunakan pola JavaScript modern yang sering ditemui dalam pengembangan web profesional, termasuk kelas ES6, async/await, dan pemrograman berbasis event.
Memahami Arsitektur JavaScript Modern
Alih-alih menulis kode prosedural (serangkaian fungsi yang dijalankan secara berurutan), kita akan membuat arsitektur berbasis kelas. Anggaplah kelas sebagai cetak biru untuk membuat objek – seperti bagaimana cetak biru arsitek dapat digunakan untuk membangun beberapa rumah.
Mengapa menggunakan kelas untuk aplikasi web?
- Organisasi: Semua fungsi terkait dikelompokkan bersama
- Dapat digunakan kembali: Anda dapat membuat beberapa instance obrolan di halaman yang sama
- Kemudahan pemeliharaan: Lebih mudah untuk debug dan memodifikasi fitur tertentu
- Standar profesional: Pola ini digunakan dalam framework seperti React, Vue, dan Angular
Buat app.js dengan JavaScript yang modern dan terstruktur dengan baik:
// app.js - Modern chat application logic
class ChatApp {
constructor() {
// Get references to DOM elements we'll need to manipulate
this.messages = document.getElementById("messages");
this.form = document.getElementById("chatForm");
this.input = document.getElementById("messageInput");
this.sendButton = document.getElementById("sendBtn");
// Configure your backend URL here
this.BASE_URL = "http://localhost:5000"; // Update this for your environment
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
// Set up event listeners when the chat app is created
this.initializeEventListeners();
}
initializeEventListeners() {
// Listen for form submission (when user clicks Send or presses Enter)
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Also listen for Enter key in the input field (better UX)
this.input.addEventListener("keypress", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.handleSubmit(e);
}
});
}
async handleSubmit(event) {
event.preventDefault(); // Prevent form from refreshing the page
const messageText = this.input.value.trim();
if (!messageText) return; // Don't send empty messages
// Provide user feedback that something is happening
this.setLoading(true);
// Add user message to chat immediately (optimistic UI)
this.appendMessage(messageText, "user");
// Clear input field so user can type next message
this.input.value = '';
try {
// Call the AI API and wait for response
const reply = await this.callAPI(messageText);
// Add AI response to chat
this.appendMessage(reply, "assistant");
} catch (error) {
console.error('API Error:', error);
this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
} finally {
// Re-enable the interface regardless of success or failure
this.setLoading(false);
}
}
async callAPI(message) {
const response = await fetch(this.API_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ message })
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data.response;
}
appendMessage(text, role) {
const messageElement = document.createElement("div");
messageElement.className = `message ${role}`;
messageElement.innerHTML = `
<div class="message-content">
<span class="message-text">${this.escapeHtml(text)}</span>
<span class="message-time">${new Date().toLocaleTimeString()}</span>
</div>
`;
this.messages.appendChild(messageElement);
this.scrollToBottom();
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
scrollToBottom() {
this.messages.scrollTop = this.messages.scrollHeight;
}
setLoading(isLoading) {
this.sendButton.disabled = isLoading;
this.input.disabled = isLoading;
this.sendButton.textContent = isLoading ? "Sending..." : "Send";
}
}
// Initialize the chat application when the page loads
document.addEventListener("DOMContentLoaded", () => {
new ChatApp();
});
Memahami Setiap Konsep JavaScript
Struktur Kelas ES6:
class ChatApp {
constructor() {
// This runs when you create a new ChatApp instance
// It's like the "setup" function for your chat
}
methodName() {
// Methods are functions that belong to the class
// They can access class properties using "this"
}
}
Pola Async/Await:
// Old way (callback hell):
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Modern way (async/await):
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
Pemrograman Berbasis Event: Alih-alih terus-menerus memeriksa apakah sesuatu terjadi, kita "mendengarkan" event:
// When form is submitted, run handleSubmit
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// When Enter key is pressed, also run handleSubmit
this.input.addEventListener("keypress", (e) => { /* ... */ });
Manipulasi DOM:
// Create new elements
const messageElement = document.createElement("div");
// Modify their properties
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";
// Add to the page
this.messages.appendChild(messageElement);
Keamanan dan Praktik Terbaik
Pencegahan XSS:
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text; // This automatically escapes HTML
return div.innerHTML;
}
Mengapa ini penting: Jika pengguna mengetik <script>alert('hack')</script>, fungsi ini memastikan itu ditampilkan sebagai teks daripada dieksekusi sebagai kode.
Penanganan Error:
try {
const reply = await this.callAPI(messageText);
this.appendMessage(reply, "assistant");
} catch (error) {
// Show user-friendly error instead of breaking the app
this.appendMessage("Sorry, I'm having trouble...", "error");
}
Pertimbangan Pengalaman Pengguna:
- UI Optimis: Tambahkan pesan pengguna segera, jangan tunggu respons server
- Status loading: Nonaktifkan tombol dan tampilkan "Mengirim..." saat menunggu
- Auto-scroll: Pastikan pesan terbaru tetap terlihat
- Validasi input: Jangan kirim pesan kosong
- Shortcut keyboard: Tombol Enter mengirim pesan (seperti aplikasi obrolan nyata)
Memahami Alur Aplikasi
- Halaman dimuat → Event
DOMContentLoadeddipicu →new ChatApp()dibuat - Konstruktor dijalankan → Mendapatkan referensi elemen DOM → Menyiapkan event listener
- Pengguna mengetik pesan → Menekan Enter atau mengklik Kirim →
handleSubmitdijalankan - handleSubmit → Memvalidasi input → Menampilkan status loading → Memanggil API
- API merespons → Menambahkan pesan AI ke obrolan → Mengaktifkan kembali antarmuka
- Siap untuk pesan berikutnya → Pengguna dapat melanjutkan obrolan
Arsitektur ini dapat diskalakan – Anda dapat dengan mudah menambahkan fitur seperti pengeditan pesan, unggahan file, atau beberapa thread percakapan tanpa menulis ulang struktur inti.
🎯 Pemeriksaan Pedagogis: Arsitektur Frontend Modern
Pemahaman Arsitektur: Anda telah mengimplementasikan aplikasi satu halaman lengkap menggunakan pola JavaScript modern. Ini mewakili pengembangan frontend tingkat profesional.
Konsep Utama yang Dikuasai:
- Arsitektur Kelas ES6: Struktur kode yang terorganisir dan mudah dipelihara
- Pola Async/Await: Pemrograman asinkron modern
- Pemrograman Berbasis Event: Desain antarmuka pengguna yang responsif
- Praktik Keamanan Terbaik: Pencegahan XSS dan validasi input
Koneksi Industri: Pola yang telah Anda pelajari (arsitektur berbasis kelas, operasi asinkron, manipulasi DOM) adalah dasar dari framework modern seperti React, Vue, dan Angular. Anda membangun dengan pemikiran arsitektur yang sama yang digunakan dalam aplikasi produksi.
Pertanyaan Refleksi: Bagaimana Anda akan memperluas aplikasi obrolan ini untuk menangani beberapa percakapan atau autentikasi pengguna? Pertimbangkan perubahan arsitektur yang diperlukan dan bagaimana struktur kelas akan berkembang.
Menata Antarmuka Obrolan Anda
Sekarang mari kita buat antarmuka obrolan yang modern dan menarik secara visual dengan CSS. Penataan yang baik membuat aplikasi Anda terasa profesional dan meningkatkan pengalaman pengguna secara keseluruhan. Kita akan menggunakan fitur CSS modern seperti Flexbox, CSS Grid, dan properti khusus untuk desain yang responsif dan aksesibel.
Buat styles.css dengan gaya yang komprehensif ini:
/* styles.css - Modern chat interface styling */
:root {
--primary-color: #2563eb;
--secondary-color: #f1f5f9;
--user-color: #3b82f6;
--assistant-color: #6b7280;
--error-color: #ef4444;
--text-primary: #1e293b;
--text-secondary: #64748b;
--border-radius: 12px;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.chat-container {
width: 100%;
max-width: 800px;
height: 600px;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-header {
background: var(--primary-color);
color: white;
padding: 20px;
text-align: center;
}
.chat-header h1 {
font-size: 1.5rem;
margin-bottom: 5px;
}
.chat-header p {
opacity: 0.9;
font-size: 0.9rem;
}
.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
background: var(--secondary-color);
}
.message {
display: flex;
max-width: 80%;
animation: slideIn 0.3s ease-out;
}
.message.user {
align-self: flex-end;
}
.message.user .message-content {
background: var(--user-color);
color: white;
border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius);
}
.message.assistant {
align-self: flex-start;
}
.message.assistant .message-content {
background: white;
color: var(--text-primary);
border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px;
border: 1px solid #e2e8f0;
}
.message.error .message-content {
background: var(--error-color);
color: white;
border-radius: var(--border-radius);
}
.message-content {
padding: 12px 16px;
box-shadow: var(--shadow);
position: relative;
}
.message-text {
display: block;
line-height: 1.5;
word-wrap: break-word;
}
.message-time {
display: block;
font-size: 0.75rem;
opacity: 0.7;
margin-top: 5px;
}
.chat-form {
padding: 20px;
border-top: 1px solid #e2e8f0;
background: white;
}
.input-group {
display: flex;
gap: 10px;
align-items: center;
}
#messageInput {
flex: 1;
padding: 12px 16px;
border: 2px solid #e2e8f0;
border-radius: var(--border-radius);
font-size: 1rem;
outline: none;
transition: border-color 0.2s ease;
}
#messageInput:focus {
border-color: var(--primary-color);
}
#messageInput:disabled {
background: #f8fafc;
opacity: 0.6;
cursor: not-allowed;
}
#sendBtn {
padding: 12px 24px;
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;
min-width: 80px;
}
#sendBtn:hover:not(:disabled) {
background: #1d4ed8;
}
#sendBtn:disabled {
background: #94a3b8;
cursor: not-allowed;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive design for mobile devices */
@media (max-width: 768px) {
body {
padding: 10px;
}
.chat-container {
height: calc(100vh - 20px);
border-radius: 8px;
}
.message {
max-width: 90%;
}
.input-group {
flex-direction: column;
gap: 10px;
}
#messageInput {
width: 100%;
}
#sendBtn {
width: 100%;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.message {
animation: none;
}
* {
transition: none !important;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.chat-container {
background: #1e293b;
color: #f1f5f9;
}
.chat-messages {
background: #0f172a;
}
.message.assistant .message-content {
background: #334155;
color: #f1f5f9;
border-color: #475569;
}
.chat-form {
background: #1e293b;
border-color: #475569;
}
#messageInput {
background: #334155;
color: #f1f5f9;
border-color: #475569;
}
}
Memahami arsitektur CSS:
- Menggunakan properti khusus CSS (variabel) untuk tema yang konsisten dan pemeliharaan yang mudah
- Menerapkan tata letak Flexbox untuk desain responsif dan penyelarasan yang tepat
- Menyertakan animasi halus untuk kemunculan pesan tanpa mengganggu
- Memberikan perbedaan visual antara pesan pengguna, respons AI, dan status error
- Mendukung desain responsif yang berfungsi di perangkat desktop dan seluler
- Mempertimbangkan aksesibilitas dengan preferensi pengurangan gerakan dan rasio kontras yang tepat
- Menawarkan dukungan mode gelap berdasarkan preferensi sistem pengguna
Mengonfigurasi URL Backend Anda
Langkah terakhir adalah memperbarui BASE_URL di JavaScript Anda agar sesuai dengan server backend Anda:
// For local development
this.BASE_URL = "http://localhost:5000";
// For GitHub Codespaces (replace with your actual URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Menentukan URL backend Anda:
- Pengembangan lokal: Gunakan
http://localhost:5000jika menjalankan frontend dan backend secara lokal - Codespaces: Temukan URL backend Anda di tab Ports setelah membuat port 5000 publik
- Produksi: Ganti dengan domain Anda yang sebenarnya saat menerapkan ke layanan hosting
💡 Tip Pengujian: Anda dapat menguji backend Anda secara langsung dengan mengunjungi URL root di browser Anda. Anda seharusnya melihat pesan selamat datang dari server FastAPI Anda.
Pengujian dan Penerapan
Sekarang setelah Anda memiliki komponen frontend dan backend yang dibangun, mari kita uji semuanya bekerja bersama dan jelajahi opsi penerapan untuk membagikan asisten obrolan Anda kepada orang lain.
Alur Pengujian Lokal
Ikuti langkah-langkah ini untuk menguji aplikasi lengkap Anda:
graph TD
A[Start Backend Server] --> B[Configure Environment Variables]
B --> C[Test API Endpoints]
C --> D[Open Frontend in Browser]
D --> E[Test Chat Functionality]
E --> F[Debug Any Issues]
Proses pengujian langkah demi langkah:
-
Mulai server backend Anda:
cd backend source venv/bin/activate # or venv\Scripts\activate on Windows python api.py -
Verifikasi API berfungsi:
- Buka
http://localhost:5000di browser Anda - Anda seharusnya melihat pesan selamat datang dari server FastAPI Anda
- Buka
-
Buka frontend Anda:
- Navigasikan ke direktori frontend Anda
- Buka
index.htmldi browser web Anda - Atau gunakan ekstensi Live Server VS Code untuk pengalaman pengembangan yang lebih baik
-
Uji fungsi obrolan:
- Ketik pesan di bidang input
- Klik "Kirim" atau tekan Enter
- Verifikasi AI merespons dengan tepat
- Periksa konsol browser untuk error JavaScript
Pemecahan Masalah Umum
| Masalah | Gejala | Solusi |
|---|---|---|
| Error CORS | Frontend tidak dapat mencapai backend | Pastikan FastAPI CORSMiddleware dikonfigurasi dengan benar |
| Error API Key | Respons 401 Unauthorized | Periksa variabel lingkungan GITHUB_TOKEN Anda |
| Koneksi Ditolak | Error jaringan di frontend | Verifikasi URL backend dan bahwa server Flask berjalan |
| Tidak Ada Respons AI | Respons kosong atau error | Periksa log backend untuk kuota API atau masalah autentikasi |
Langkah debugging umum:
- Periksa Konsol Alat Pengembang browser untuk error JavaScript
- Verifikasi tab Jaringan menunjukkan permintaan dan respons API yang berhasil
- Tinjau output terminal backend untuk error Python atau masalah API
- Pastikan variabel lingkungan dimuat dan dapat diakses dengan benar
📈 Garis Waktu Penguasaan Pengembangan Aplikasi AI Anda
timeline
title Complete AI Application Development Journey
section AI Foundations
Understanding Generative AI
: Grasp pattern recognition concepts
: Master AI parameter control
: Learn prompt engineering techniques
GitHub Models Integration
: Navigate AI service platforms
: Handle authentication securely
: Optimize model parameters
section Backend Development
Python API Architecture
: Build FastAPI applications
: Implement async operations
: Create secure endpoints
AI Service Integration
: Connect to external AI APIs
: Handle rate limiting
: Implement error boundaries
section Frontend Mastery
Modern JavaScript Patterns
: Master ES6 class architecture
: Implement async/await flows
: Build responsive interfaces
Real-time User Experience
: Create dynamic chat interfaces
: Handle loading states
: Optimize user interactions
section Production Readiness
Security & Performance
: Implement secure token management
: Prevent XSS vulnerabilities
: Optimize API performance
Professional Deployment
: Build scalable architectures
: Create maintainable code
: Document development processes
🎓 Tonggak Kelulusan: Anda telah berhasil membangun aplikasi bertenaga AI lengkap menggunakan teknologi dan pola arsitektur yang sama yang mendukung asisten AI modern. Keterampilan ini mewakili persimpangan antara pengembangan web tradisional dan integrasi AI mutakhir.
🔄 Kemampuan Tingkat Lanjut:
- Siap menjelajahi framework AI tingkat lanjut (LangChain, LangGraph)
- Siap membangun aplikasi AI multi-modal (teks, gambar, suara)
- Dilengkapi untuk mengimplementasikan database vektor dan sistem pengambilan
- Dasar yang kuat untuk pembelajaran mesin dan penyempurnaan model AI
Tantangan Agen GitHub Copilot 🚀
Gunakan mode Agen untuk menyelesaikan tantangan berikut:
Deskripsi: Tingkatkan asisten obrolan dengan menambahkan riwayat percakapan dan penyimpanan pesan. Tantangan ini akan membantu Anda memahami cara mengelola state dalam aplikasi obrolan dan mengimplementasikan penyimpanan data untuk pengalaman pengguna yang lebih baik.
Prompt: Modifikasi aplikasi obrolan untuk menyertakan riwayat percakapan yang bertahan antar sesi. Tambahkan fungsi untuk menyimpan pesan obrolan ke penyimpanan lokal, menampilkan riwayat percakapan saat halaman dimuat, dan sertakan tombol "Hapus Riwayat". Juga implementasikan indikator mengetik dan stempel waktu pesan untuk membuat pengalaman obrolan lebih realistis.
Pelajari lebih lanjut tentang mode agen di sini.
Tugas: Bangun Asisten AI Pribadi Anda
Sekarang Anda akan membuat implementasi asisten AI Anda sendiri. Alih-alih hanya meniru kode tutorial, ini adalah kesempatan untuk menerapkan konsep sambil membangun sesuatu yang mencerminkan minat dan kasus penggunaan Anda sendiri.
Persyaratan Proyek
Mari kita atur proyek Anda dengan struktur yang bersih dan terorganisir:
my-ai-assistant/
├── backend/
│ ├── api.py # Your FastAPI server
│ ├── llm.py # AI integration functions
│ ├── .env # Your secrets (keep this safe!)
│ └── requirements.txt # Python dependencies
├── frontend/
│ ├── index.html # Your chat interface
│ ├── app.js # The JavaScript magic
│ └── styles.css # Make it look amazing
└── README.md # Tell the world about your creation
Tugas Implementasi Inti
Pengembangan Backend:
- Ambil kode FastAPI kami dan buat itu milik Anda
- Buat kepribadian AI yang unik – mungkin asisten memasak yang membantu, mitra penulisan kreatif, atau teman belajar?
- Tambahkan penanganan error yang solid sehingga aplikasi Anda tidak rusak saat terjadi kesalahan
- Tulis dokumentasi yang jelas untuk siapa saja yang ingin memahami cara kerja API Anda
Pengembangan Frontend:
- Bangun antarmuka obrolan yang terasa intuitif dan ramah
- Tulis JavaScript modern yang bersih yang akan Anda banggakan untuk ditunjukkan kepada pengembang lain
- Desain gaya khusus yang mencerminkan kepribadian AI Anda – menyenangkan dan penuh warna? Bersih dan minimalis? Sepenuhnya terserah Anda!
- Pastikan itu berfungsi dengan baik di ponsel dan komputer
Persyaratan Personalisasi:
- Pilih nama dan kepribadian unik untuk asisten AI Anda – mungkin sesuatu yang mencerminkan minat Anda atau masalah yang ingin Anda selesaikan
- Sesuaikan desain visual agar sesuai dengan suasana asisten Anda
- Tulis pesan selamat datang yang menarik yang membuat orang ingin mulai mengobrol
- Uji asisten Anda dengan berbagai jenis pertanyaan untuk melihat bagaimana ia merespons
Ide Peningkatan (Opsional)
Ingin membawa proyek Anda ke tingkat berikutnya? Berikut beberapa ide menarik untuk dijelajahi:
| Fitur | Deskripsi | Keterampilan yang Akan Anda Latih |
|---|---|---|
| Riwayat Pesan | Ingat percakapan bahkan setelah halaman di-refresh | Bekerja dengan localStorage, penanganan JSON |
| Indikator Mengetik | Tampilkan "AI sedang mengetik..." saat menunggu respons | Animasi CSS, pemrograman async |
| Stempel Waktu Pesan | Tampilkan kapan setiap pesan dikirim | Format tanggal/waktu, desain UX |
| Ekspor Obrolan | Biarkan pengguna mengunduh percakapan mereka | Penanganan file, ekspor data |
| Pengalihan Tema | Tombol toggle mode terang/gelap | Variabel CSS, preferensi pengguna |
| Input Suara | Tambahkan fungsi pengenalan suara | API Web, aksesibilitas |
Pengujian dan Dokumentasi
Jaminan Kualitas:
- Uji aplikasi Anda dengan berbagai jenis input dan kasus tepi
- Verifikasi desain responsif berfungsi di berbagai ukuran layar
- Periksa aksesibilitas dengan navigasi keyboard dan pembaca layar
- Validasi HTML dan CSS untuk kepatuhan standar
Persyaratan Dokumentasi:
- Tulis README.md yang menjelaskan proyek Anda dan cara menjalankannya
- Sertakan tangkapan layar antarmuka obrolan Anda saat beraksi
- Dokumentasikan fitur atau kustomisasi unik yang Anda tambahkan
- Berikan instruksi pengaturan yang jelas untuk pengembang lain
Panduan Pengiriman
Hasil Proyek:
- Folder proyek lengkap dengan semua kode sumber
- README.md dengan deskripsi proyek dan instruksi pengaturan
- Tangkapan layar yang menunjukkan asisten obrolan Anda saat beraksi
- Refleksi singkat tentang apa yang Anda pelajari dan tantangan yang Anda hadapi
Kriteria Evaluasi:
- Fungsi: Apakah asisten obrolan berfungsi seperti yang diharapkan?
- Kualitas Kode: Apakah kode terorganisir dengan baik, dikomentari, dan mudah dipelihara?
- Desain: Apakah antarmuka terlihat menarik secara visual dan ramah pengguna?
- Kreativitas: Seberapa unik dan personal implementasi Anda?
- Dokumentasi: Apakah instruksi pengaturan jelas dan lengkap?
💡 Tip Sukses: Mulailah dengan persyaratan dasar terlebih dahulu, lalu tambahkan peningkatan setelah semuanya berfungsi. Fokuslah untuk menciptakan pengalaman inti yang halus sebelum menambahkan fitur lanjutan.
Solusi
Tantangan Bonus
Siap membawa asisten AI Anda ke tingkat berikutnya? Coba tantangan lanjutan ini yang akan memperdalam pemahaman Anda tentang integrasi AI dan pengembangan web.
Personalisasi Kepribadian
Keajaiban sesungguhnya terjadi ketika Anda memberikan asisten AI Anda kepribadian yang unik. Bereksperimenlah dengan berbagai prompt sistem untuk menciptakan asisten khusus:
Contoh Asisten Profesional:
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
Contoh Pembantu Penulisan Kreatif:
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
Contoh Mentor Teknis:
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
Peningkatan Frontend
Transformasikan antarmuka obrolan Anda dengan peningkatan visual dan fungsional ini:
Fitur CSS Lanjutan:
- Implementasikan animasi dan transisi pesan yang halus
- Tambahkan desain gelembung obrolan khusus dengan bentuk dan gradien CSS
- Buat animasi indikator mengetik untuk saat AI "berpikir"
- Desain reaksi emoji atau sistem penilaian pesan
Peningkatan JavaScript:
- Tambahkan shortcut keyboard (Ctrl+Enter untuk mengirim, Escape untuk menghapus input)
- Implementasikan fungsi pencarian dan penyaringan pesan
- Buat fitur ekspor percakapan (unduh sebagai teks atau JSON)
- Tambahkan auto-save ke localStorage untuk mencegah kehilangan pesan
Integrasi AI Lanjutan
Beberapa Kepribadian AI:
- Buat dropdown untuk beralih antara berbagai kepribadian AI
- Simpan kepribadian pilihan pengguna di localStorage
- Implementasikan pengalihan konteks yang mempertahankan alur percakapan
Fitur Respons Cerdas:
- Tambahkan kesadaran konteks percakapan (AI mengingat pesan sebelumnya)
- Implementasikan saran pintar berdasarkan topik percakapan
- Buat tombol balasan cepat untuk pertanyaan umum
🎯 Tujuan Pembelajaran: Tantangan bonus ini membantu Anda memahami pola pengembangan web tingkat lanjut dan teknik integrasi AI yang digunakan dalam aplikasi produksi.
Ringkasan dan Langkah Selanjutnya
Selamat! Anda telah berhasil membangun asisten chat berbasis AI dari awal. Proyek ini telah memberikan Anda pengalaman langsung dengan teknologi pengembangan web modern dan integrasi AI – keterampilan yang semakin berharga di dunia teknologi saat ini.
Apa yang Telah Anda Capai
Sepanjang pelajaran ini, Anda telah menguasai beberapa teknologi dan konsep utama:
Pengembangan Backend:
- Mengintegrasikan dengan GitHub Models API untuk fungsi AI
- Membangun API RESTful menggunakan Flask dengan penanganan error yang tepat
- Mengimplementasikan autentikasi yang aman menggunakan variabel lingkungan
- Mengonfigurasi CORS untuk permintaan lintas asal antara frontend dan backend
Pengembangan Frontend:
- Membuat antarmuka chat responsif menggunakan HTML semantik
- Mengimplementasikan JavaScript modern dengan async/await dan arsitektur berbasis kelas
- Merancang antarmuka pengguna yang menarik dengan CSS Grid, Flexbox, dan animasi
- Menambahkan fitur aksesibilitas dan prinsip desain responsif
Integrasi Full-Stack:
- Menghubungkan frontend dan backend melalui panggilan API HTTP
- Menangani interaksi pengguna secara real-time dan aliran data asinkron
- Mengimplementasikan penanganan error dan umpan balik pengguna di seluruh aplikasi
- Menguji alur kerja aplikasi lengkap dari input pengguna hingga respons AI
Hasil Pembelajaran Utama
mindmap
root((AI Chat App Skills))
API Integration
Authentication
Error Handling
Async Programming
Web Development
HTML5 Semantics
Modern CSS
ES6+ JavaScript
User Experience
Responsive Design
Accessibility
Real-time Interaction
AI Understanding
Prompt Engineering
Model Parameters
Conversation Flow
Proyek ini telah memperkenalkan Anda pada dasar-dasar membangun aplikasi berbasis AI, yang mewakili masa depan pengembangan web. Anda sekarang memahami cara mengintegrasikan kemampuan AI ke dalam aplikasi web tradisional, menciptakan pengalaman pengguna yang cerdas dan responsif.
Aplikasi Profesional
Keterampilan yang telah Anda kembangkan dalam pelajaran ini langsung dapat diterapkan pada karir pengembangan perangkat lunak modern:
- Pengembangan web full-stack menggunakan framework dan API modern
- Integrasi AI dalam aplikasi web dan aplikasi seluler
- Desain dan pengembangan API untuk arsitektur mikroservices
- Pengembangan antarmuka pengguna dengan fokus pada aksesibilitas dan desain responsif
- Praktik DevOps termasuk konfigurasi lingkungan dan deployment
Melanjutkan Perjalanan Pengembangan AI Anda
Langkah Pembelajaran Selanjutnya:
- Eksplorasi model AI dan API yang lebih canggih (GPT-4, Claude, Gemini)
- Pelajari teknik rekayasa prompt untuk respons AI yang lebih baik
- Studi desain percakapan dan prinsip pengalaman pengguna chatbot
- Investigasi keamanan AI, etika, dan praktik pengembangan AI yang bertanggung jawab
- Bangun aplikasi yang lebih kompleks dengan memori percakapan dan kesadaran konteks
Ide Proyek Lanjutan:
- Ruang obrolan multi-pengguna dengan moderasi AI
- Chatbot layanan pelanggan berbasis AI
- Asisten pengajar edukasi dengan pembelajaran yang dipersonalisasi
- Kolaborator penulisan kreatif dengan berbagai kepribadian AI
- Asisten dokumentasi teknis untuk pengembang
Memulai dengan GitHub Codespaces
Ingin mencoba proyek ini di lingkungan pengembangan cloud? GitHub Codespaces menyediakan pengaturan pengembangan lengkap di browser Anda, sempurna untuk bereksperimen dengan aplikasi AI tanpa kebutuhan pengaturan lokal.
Menyiapkan Lingkungan Pengembangan Anda
Langkah 1: Buat dari Template
- Arahkan ke repository Web Dev For Beginners
- Klik "Use this template" di sudut kanan atas (pastikan Anda sudah masuk ke GitHub)
Langkah 2: Luncurkan Codespaces
- Buka repository yang baru Anda buat
- Klik tombol hijau "Code" dan pilih "Codespaces"
- Pilih "Create codespace on main" untuk memulai lingkungan pengembangan Anda
Langkah 3: Konfigurasi Lingkungan
Setelah Codespace Anda dimuat, Anda akan memiliki akses ke:
- Python, Node.js, dan alat pengembangan yang sudah terinstal
- Antarmuka VS Code dengan ekstensi untuk pengembangan web
- Akses terminal untuk menjalankan server backend dan frontend
- Penerusan port untuk menguji aplikasi Anda
Apa yang disediakan Codespaces:
- Menghilangkan masalah pengaturan dan konfigurasi lingkungan lokal
- Memberikan lingkungan pengembangan yang konsisten di berbagai perangkat
- Menyertakan alat dan ekstensi yang sudah dikonfigurasi untuk pengembangan web
- Menawarkan integrasi mulus dengan GitHub untuk kontrol versi dan kolaborasi
🚀 Tips Pro: Codespaces sangat cocok untuk pembelajaran dan prototipe aplikasi AI karena menangani semua pengaturan lingkungan yang kompleks secara otomatis, memungkinkan Anda fokus pada pembangunan dan pembelajaran daripada pemecahan masalah konfigurasi.
Penafian:
Dokumen ini telah diterjemahkan menggunakan layanan penerjemahan AI Co-op Translator. Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diketahui bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang otoritatif. Untuk informasi yang penting, disarankan menggunakan jasa penerjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau interpretasi yang salah yang timbul dari penggunaan terjemahan ini.