Chat asszisztens építése MI segítségével
January 29, 2026 · View on GitHub
Emlékszel a Star Trek-re, amikor a legénység lazán beszélgetett a hajó számítógépével, bonyolult kérdéseket tett fel neki, és átgondolt válaszokat kapott? Ami a 1960-as években tiszta sci-fi-nek tűnt, ma már olyan dolog, amit ismert webes technológiákkal megépíthetsz.
Ebben a leckében egy MI chat asszisztenst hozunk létre HTML, CSS, JavaScript és némi backend integráció segítségével. Megtudhatod, hogyan kapcsolhatók össze azok a készségek, amelyeket már tanulsz, olyan hatalmas MI szolgáltatásokkal, amelyek megértik a kontextust és értelmes válaszokat generálnak.
Gondolj az MI-re úgy, mint egy hatalmas könyvtárhoz való hozzáférésre, amely nemcsak megtalálja az információkat, hanem szintetizálja is azokat koherens válaszokká, a te konkrét kérdéseidhez igazítva. Ez helyettesíti a több ezer oldal átgörgetését, így közvetlen, kontextuális válaszokat kapsz.
Az integráció ismert webes technológiák együttműködésével történik. A HTML készíti a csevegőfelületet, a CSS kezeli a vizuális megjelenést, a JavaScript a felhasználói interakciókat, a backend API pedig összeköti az egészet az MI szolgáltatásokkal. Ez hasonló ahhoz, ahogy egy zenekar különböző szekciói együtt dolgoznak egy szimfónia létrehozásán.
Lényegében hidat építünk az emberi természetes kommunikáció és a gépi feldolgozás között. Megtanulod mind az MI szolgáltatás integráció technikai megvalósítását, mind pedig azokat a tervezési mintákat, amelyek az interakciókat intuitívvá teszik.
A lecke végére az MI integráció kevésbé fog titokzatos folyamatnak tűnni, inkább egy újabb API lesz, amivel dolgozhatsz. Meg fogod érteni azokat az alapmintákat, amelyek olyan alkalmazásokat működtetnek, mint a ChatGPT vagy Claude, a már ismert webfejlesztési alapelvekkel.
⚡ Amit az elkövetkező 5 percben megtehetsz
Gyors kezdő útvonal elfoglalt fejlesztők számára
flowchart LR
A[⚡ 5 perc] --> B[GitHub token beszerzése]
B --> C[AI játszótér tesztelése]
C --> D[Python kód másolása]
D --> E[AI válaszok megtekintése]
- 1. perc: Látogass el a GitHub Models Playground oldalra, és hozz létre egy személyes hozzáférési tokent
- 2. perc: Teszteld az MI interakciókat közvetlenül a playground felületén
- 3. perc: Kattints a "Code" fülre, és másold ki a Python kódrészletet
- 4. perc: Futtasd a kódot helyileg a tokeneddel:
GITHUB_TOKEN=your_token python test.py - 5. perc: Nézd meg, hogyan generálódik az első MI válasz a saját kódodból
Gyors tesztkód:
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)
Miért fontos ez: 5 perc alatt megtapasztalod a programozott MI interakció varázsát. Ez az alapköve minden MI alkalmazásnak, amit használsz.
Így fog kinézni a kész projekted:
🗺️ Tanulási utad az MI alkalmazásfejlesztésben
journey
title A webfejlesztéstől az MI integrációig
section Az MI alapjainak megértése
Fedezd fel a generatív MI koncepciókat: 4: You
Fedezd fel a GitHub Models platformot: 6: You
Sajátítsd el az MI paramétereket és promptokat: 8: You
section Backend integráció
Építs Python API szervert: 5: You
Valósítsd meg az MI függvényhívásokat: 7: You
Kezeld az aszinkron műveleteket: 8: You
section Frontend fejlesztés
Hozz létre modern chat felületet: 6: You
Sajátítsd el a valós idejű interakciókat: 8: You
Építs reszponzív felhasználói élményt: 9: You
section Professzionális alkalmazás
Telepítsd a teljes MI rendszert: 7: You
Optimalizáld a teljesítmény mintákat: 8: You
Hozz létre éles használatra kész alkalmazást: 9: You
Úticélod: A lecke végére teljes értékű, MI által vezérelt alkalmazást építesz a modern MI asszisztensek, például ChatGPT, Claude és Google Bard működését meghajtó technológiákkal és mintákkal.
Az MI megértése: A rejtélytől a mesterségig
Mielőtt belevágnánk a kódba, értsük meg, mivel dolgozunk. Ha már használtál API-kat, tudod az alap mintát: elküldesz egy kérést, kapsz egy választ.
Az MI API-k ugyanilyen struktúrát követnek, de ahelyett, hogy előre tárolt adatokat kérnének le egy adatbázisból, újszerű válaszokat generálnak, a hatalmas mennyiségű szövegből tanult minták alapján. Olyan ez, mint a különbség egy könyvtári katalógus között és egy tudós könyvtáros között, aki több forrásból származó információkat tud szintetizálni.
Mi is az a "Generatív MI"?
Gondolj arra, hogyan segítette a Rosetta-kő a tudósokat az egyiptomi hieroglifák megértésében, azáltal, hogy mintákat találtak az ismert és ismeretlen nyelvek között. Az MI modellek hasonlóan működnek – óriási szövegmennyiségekben keresnek mintákat, hogy megértsék a nyelvet, majd ezeket a mintákat használják új kérdések megfelelő válaszainak generálására.
Egyszerű összehasonlításban:
- Hagyományos adatbázis: Olyan, mint amikor a születési anyakönyvi kivonatodat kéred – mindig ugyanazt a dokumentumot kapod meg
- Keresőmotor: Olyan, mintha megkérnél egy könyvtárost, hogy keressen neked könyveket macskákról – megmutatja, mi elérhető
- Generatív MI: Olyan, mintha megkérdeznél egy tájékozott barátot a macskákról – saját szavaival mond érdekes dolgokat, az alapján, amit tudni szeretnél
graph LR
A[Az Ön Kérdése] --> B[AI Modell]
B --> C[Minta Felismerés]
C --> D[Tartalom Generálás]
D --> E[Kontextusfüggő Válasz]
F[Képzési Adatok<br/>Könyvek, Cikkek, Web] --> B
Hogyan tanulnak az MI modellek (Egyszerű verzió)
Az MI modellek hatalmas szövegállományokat tartalmazó adatbázisokat dolgoznak fel, könyvekből, cikkekből, beszélgetésekből. Ennek során mintákat azonosítanak:
- Hogyan épülnek fel a gondolatok írott kommunikációban
- Milyen szavak gyakran fordulnak elő együtt
- Hogyan zajlik általában egy beszélgetés
- A formális és informális kommunikáció kontextuális különbségei
Ez hasonló az archeológusokhoz, akik ősi nyelveket fejtettek meg: ezernyi példát elemeztek, hogy megértsék a nyelvtant, szókincset és kulturális kontextust, végül képesek új szövegeket megfejteni a tanult minták alapján.
Miért GitHub Models?
A GitHub Modelseket egy elég praktikus okból használjuk – hozzáférést ad nekünk vállalati szintű MI-hez anélkül, hogy saját MI infrastruktúrát kellene kiépítenünk (őszintén, ezt most nem akarod!). Olyan, mintha egy időjárás API-t használnál ahelyett, hogy mindenhová saját meteorológiai állomásokat telepítenél.
Ez alapvetően „MI-szolgáltatásként”, és a legjobb az egészben: ingyenesen kezdheted el, így kísérletezhetsz anélkül, hogy hatalmas számláktól kellene tartanod.
graph LR
A[Frontend Chat UI] --> B[A háttér API-d]
B --> C[GitHub Modellek API]
C --> D[MI modell feldolgozás]
D --> C
C --> B
B --> A
A backend integrációnkhoz a GitHub Modelseket fogjuk használni, amely professzionális MI képességeket biztosít fejlesztőbarát felületen keresztül. A GitHub Models Playground egy tesztkörnyezet, ahol különböző MI modellek kipróbálhatók, és felfedezhető, mire képesek, mielőtt kodban megvalósítanánk őket.
🧠 MI alkalmazásfejlesztési ökoszisztéma
mindmap
root((AI Fejlesztés))
Understanding AI
Generative Models
Minta Felismerés
Tartalom Generálás
Kontextus Megértés
Válasz Szintézis
AI Parameters
Hőmérséklet Szabályozás
Token Korlátok
Top-p Szűrés
Rendszer Parancsok
Backend Architecture
API Integration
GitHub Modellek
Hitelesítés
Kérés Kezelés
Hibakezelés
Python Infrastructure
FastAPI Keretrendszer
Aszinkron Műveletek
Környezet Biztonság
CORS Konfiguráció
Frontend Experience
Chat Interface
Valós Idejű Frissítések
Üzenet Előzmények
Felhasználói Visszajelzés
Betöltési Állapotok
Modern Web Tech
ES6 Osztályok
Async/Await
DOM Manipuláció
Esemény Kezelés
Professional Patterns
Security Best Practices
Token Kezelés
Bemenet Érvényesítés
XSS Megelőzés
Hiba Határok
Production Readiness
Teljesítmény Optimalizálás
Reszponzív Dizájn
Akadálymentesség
Tesztelési Stratégiák
Alapelv: Az MI alkalmazásfejlesztés a hagyományos webfejlesztési készségeket ötvözi MI szolgáltatás integrációval, így olyan intelligens alkalmazásokat hoz létre, amelyek természetesnek és reagálónak érződnek a felhasználók számára.
Ez teszi a playgroundot olyan hasznossá:
- Próbálj ki különböző MI modelleket, mint a GPT-4o-mini, Claude és mások (mind ingyen!)
- Teszteld ötleteidet és promptjaidat mielőtt kódot írnál
- Szerezz kész kódrészleteket a kedvenc programozási nyelveden
- Állítsd be a kreativitás mértékét és a válasz hosszát, hogy lássad, miként befolyásolják az eredményt
Miután játszottál egy kicsit, csak kattints a "Code" fülre, és válaszd ki a programozási nyelved, hogy megkapd a szükséges implementációs kódot.
Python backend integráció beállítása
Most valósítsuk meg az MI integrációt Python segítségével. A Python kiváló MI alkalmazásokhoz egyszerű szintaxisa és erős könyvtárai miatt. A playgroundból vett kóddal indulunk, majd átalakítjuk újrahasznosítható, éles használatra alkalmas függvénnyé.
Az alap implementáció megértése
Amikor megkapod a Python kódot a playgroundból, valami ilyesmit kapsz. Ne aggódj, ha először soknak tűnik – nézzük át lépésről lépésre:
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# A modellel való hitelesítéshez személyes hozzáférési tokent (PAT) kell létrehoznia a GitHub beállításaiban.
# Hozza létre PAT tokenjét az itt található utasításokat követve: 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)
Ez történik a kódban:
- Importáljuk a szükséges eszközöket:
oskörnyezeti változók olvasásához ésOpenAIaz MI-vel való beszélgetéshez - Beállítjuk az OpenAI klienset, hogy a GitHub MI szerverein fusson, ne az OpenAI-n
- Hitelesítünk egy speciális GitHub tokennel (erről hamarosan többet!)
- Felépítjük a beszélgetésünket különböző "szerepekkel" – gondolj rá úgy, mint egy színdarab jelenetének megadása
- Elküldjük kérésünket az MI-nek némi finomhangolási paraméterrel
- Kinyerjük a tényleges válasz szövegét a visszakapott adathalmazból
Üzenet szerepek megértése: Az MI beszélgetési keretrendszere
Az MI beszélgetések speciális struktúrával dolgoznak különböző "szerepekkel", amelyek különböző funkciókat töltenek be:
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
Gondolj rá úgy, mint egy színdarabra:
- Rendszer szerep: Olyan, mint a színpadi utasítás egy színésznek – megmondja az MI-nek, hogyan viselkedjen, milyen személyisége legyen, hogyan válaszoljon
- Felhasználó szerep: A tényleges kérdés vagy üzenet a te alkalmazásodat használó személytől
- Asszisztens szerep: Az MI válasza (ezt nem küldöd be, de megjelenik a beszélgetés előzményeiben)
Gyakorlati példa: Képzeld el, hogy bemutatod a barátodat valakinek egy bulin:
- Rendszer üzenet: „Ez a barátom, Sarah, ő orvos, és kiválóan magyarázza el az orvosi fogalmakat egyszerűen”
- Felhasználó üzenet: „El tudnád magyarázni, hogyan működnek a vakcinák?”
- Asszisztens válasz: Sarah barátságos orvosként válaszol, nem ügyvédként vagy séfként
Az MI paraméterek megértése: A válasz viselkedés finomhangolása
Az MI API hívások numerikus paraméterei irányítják, hogyan generálja a modell a válaszokat. Ezekkel a beállításokkal szabályozhatod az MI viselkedését különböző felhasználási esetekhez:
Hőmérséklet (0.0-tól 2.0-ig): A kreativitás szabályzója
Mit tesz: Szabályozza, milyen kreatív vagy kiszámítható lesz az MI válasza.
Gondolj rá úgy, mint egy jazz zenész improvizációs szintjére:
- Hőmérséklet = 0.1: Minden alkalommal ugyanazt a dallamot játssza (nagyon kiszámítható)
- Hőmérséklet = 0.7: Ízléses variációkat ad hozzá, miközben felismerhető marad (kiegyensúlyozott kreativitás)
- Hőmérséklet = 1.5: Teljesen kísérleti jazz váratlan fordulatokkal (nagyon kiszámíthatatlan)
# Nagyon kiszámítható válaszok (jó tényszerű kérdésekhez)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Szinte mindig "4"-et fog mondani
)
# Kreatív válaszok (jó ötleteléshez)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Egyedi, váratlan történeteket fog generálni
)
Max Tokenek (1-től 4096+-ig): A válasz hosszának szabályozója
Mit tesz: Limitálja, mennyi lehet a válasz hossza.
A tokenek nagyjából a szavakkal egyenértékűek (kb. 1 token = 0,75 szó angolul):
- max_tokens=50: Rövid és tömör (mint egy SMS)
- max_tokens=500: Egy szép bekezdés vagy kettő
- max_tokens=2000: Részletes magyarázat példákkal
# Rövid, tömör válaszok
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Rövid magyarázatot kényszerít
)
# Részletes, átfogó válaszok
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Részletes magyarázatot enged példákkal
)
Top_p (0.0-tól 1.0-ig): A fókusz paraméter
Mit tesz: Szabályozza, mennyire koncentrál az MI a legvalószínűbb válaszokra.
Képzeld el, hogy az MI-nek hatalmas szókincse van, amelyek valószínűség szerint rangsorolva vannak:
- top_p=0.1: Csak a legvalószínűbb 10%-ot veszi figyelembe (nagyon fókuszált)
- top_p=0.9: A szavak 90%-át figyelembe veszi (kreatívabb)
- top_p=1.0: Mindent figyelembe vesz (maximális változatosság)
Például: Ha azt kérdezed: "Az ég általában..."
- Alacsony top_p: Szinte biztosan "kék"-et mond
- Magas top_p: Mondhatja, hogy „kék”, „felhős”, „tágas”, „változó”, „szép”, stb.
Összerakva: Paraméter kombinációk különböző felhasználási esetekre
# Tényfeltáró, egyértelmű válaszokhoz (például dokumentációs bot)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# Kreatív írássegítéshez
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# Beszélgetős, segítőkész válaszokhoz (kiegyensúlyozott)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
quadrantChart
title MI Paraméteroptimalizálási Mátrix
x-axis Alacsony Kreativitás --> Magas Kreativitás
y-axis Rövid Válasz --> Hosszú Válasz
quadrant-1 Kreatív Tartalom
quadrant-2 Részletes Elemzés
quadrant-3 Gyors Ténytár
quadrant-4 Beszélgető MI
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]
Miért fontosak ezek a paraméterek: A különböző alkalmazások különböző válaszfajtákat igényelnek. Egy ügyfélszolgálati botnak következetesnek és tényszerűnek kell lennie (alacsony hőmérséklet), míg egy kreatív íróasszisztensnek képzeletgazdagnak és változatosnak (magas hőmérséklet). Ezeknek a paramétereknek a megértése lehetőséget ad az MI személyiségének és válaszstílusának szabályozására.
**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))
Ez a javított függvény mit tud:
- Két paramétert fogad: a felhasználó promptját és opcionálisan a rendszer üzenetet
- Alapértelmezett rendszerüzenetet ad az általános asszisztens viselkedéshez
- Használja a Python típusannotációkat a jobb dokumentáció érdekében
- Részletes docstring magyarázza a függvény célját és paramétereit
- Csak a válasz tartalmát adja vissza, így könnyen használható a web API-ban
- Megőrzi ugyanazokat a modellparamétereket a következetes MI viselkedésért
A rendszer promptok varázsa: az MI személyiség programozása
Ha a paraméterek az MI gondolkodását szabályozzák, a rendszer promptok azt irányítják, hogy az MI minek képzeli magát. Ez az MI-vel való munka egyik legmenőbb része – gyakorlatilag teljes személyiséget, szakértelmi szintet és kommunikációs stílust adsz az MI-nek.
Gondolj a rendszer promptokra úgy, mint különböző színészek szereposztására: Egyetlen általános asszisztens helyett szakosodott szakértőket hozhatsz létre különböző helyzetekre. Szükséged van türelmes tanárra? Kreatív ötletelőtársra? Egy üzleti tanácsadóra, aki nem kertel? Csak változtasd meg a rendszer promptot!
Miért ilyen erőteljesek a rendszer promptok?
Az érdekes rész: az MI modelleket rengeteg beszélgetéssel képezték, ahol az emberek különböző szerepeket és szakértelmi szinteket vettek fel. Ha egy adott szerepet adsz az MI-nek, az olyan, mintha kapcsolót kapcsolnál, ami aktiválja az összes tanult mintát.
Ez olyan, mint a színész módszeres alakítása: Mondd azt egy színésznek, hogy „te egy bölcs öreg professzor vagy”, és nézd meg, hogyan állítja be automatikusan a testtartását, szókincsét és modorát. Az MI valami hasonlót tesz a nyelvi mintákkal.
Hatékony rendszer promptok alkotása: művészet és tudomány
Egy jól működő rendszer prompt anatómiája:
- Szerep/Identitás: Ki az MI?
- Szakértelem: Mit tud?
- Kommunikáció stílusa: Hogyan beszél?
- Specifikus utasítások: Mire fókuszáljon?
# ❌ Homályos rendszerutasítás
"You are helpful."
# ✅ Részletes, hatékony rendszerutasítás
"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."
Rendszer prompt példák kontextussal
Nézzük, hogyan hoznak létre teljesen eltérő MI személyiségeket különböző rendszer promptok:
# Példa 1: A türelmes tanár
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.
"""
# Példa 2: A kreatív együttműködő
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.
"""
# Példa 3: A stratégiai üzleti tanácsadó
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.
"""
Rendszer promptok kipróbálása
Teszteljük ugyanazt a kérdést különböző rendszer promptokkal, hogy lássuk a drámai eltéréseket:
Kérdés: „Hogyan kezeljem a felhasználói hitelesítést a webalkalmazásomban?”
# Tanári felszólítással:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Tipikus válasz: "Remek kérdés! Nézzük meg az azonosítást egyszerű lépésekre bontva.
# Gondolj rá úgy, mint egy éjszakai klub kapusára, aki ellenőrzi a személyi igazolványokat..."
# Üzleti felszólítással:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Tipikus válasz: "Stratégiai szempontból az azonosítás kulcsfontosságú a felhasználói
# bizalom és a szabályozási megfelelés szempontjából. Hadd vázoljak egy keretrendszert, amely figyelembe veszi a biztonságot,
# a felhasználói élményt és a skálázhatóságot..."
Haladó rendszer prompt technikák
1. Kontextus beállítása: Adj az MI-nek háttérinformációt
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. Kimenet formázása: Mondd meg a mesterséges intelligenciának, hogyan strukturálja a válaszokat
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. Korlátozások beállítása: Határozd meg, mit NEM szabad a mesterséges intelligenciának tennie
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.
"""
Miért fontos ez a chat asszisztensed számára
A rendszerparancsok megértése hihetetlen hatalmat ad ahhoz, hogy specializált AI asszisztenseket hozz létre:
- Ügyfélszolgálati bot: Segítőkész, türelmes, szabályzat-tudatos
- Tanulási tutor: Bátorító, lépésről lépésre, ellenőrzi a megértést
- Kreatív partner: Képzelőerős, ötletekre épít, kérdezgeti: „mi lenne, ha?”
- Technikai szakértő: Precíz, részletes, biztonságtudatos
A kulcsmegfigyelés: Nem csak egy AI API-t hívsz meg – te egy testreszabott AI személyiséget hozol létre, amely az adott használati esetet szolgálja. Ez az, ami miatt a modern AI alkalmazások személyre szabottabbnak és hasznosabbnak érződnek, nem pedig általánosnak.
🎯 Pedagógiai ellenőrzés: AI személyiség programozás
Állj meg és gondolkodj: Most tanultad meg, hogyan programozz AI személyiségeket rendszerparancsok segítségével. Ez alapvető képesség a modern AI alkalmazásfejlesztésben.
Gyors önértékelés:
- El tudod magyarázni, miben különböznek a rendszerparancsok a rendes felhasználói üzenetektől?
- Mi a különbség a temperature és a top_p paraméterek között?
- Hogyan hoznál létre rendszerparancsot egy adott használati esethez (például kódolási tanárhoz)?
Valós összefüggés: A megtanult rendszerparancs-technika minden jelentős AI alkalmazásban használatos – a GitHub Copilot kódíró segédjétől a ChatGPT beszélgetési felületéig. Ugyanazokat a mintákat sajátítod el, amelyeket a nagy tech cégek AI fejlesztő csapatai is alkalmaznak.
Kihívás kérdés: Hogyan terveznél különböző AI személyiségeket különböző felhasználói típusok számára (kezdő vs szakértő)? Gondolkodj el azon, hogyan szolgálhatná ugyanaz az AI modell különböző közönségeket a prompt mérnökségen keresztül.
Web API építése FastAPI-vel: A magas teljesítményű AI kommunikációs központod
Most építsük meg a backendet, amely összeköti a frontendet az AI szolgáltatásokkal. A FastAPI-t fogjuk használni, egy modern Python keretrendszert, amely kiváló AI alkalmazások API-jainak építéséhez.
A FastAPI számos előnyt kínál ehhez a projekthez: beépített async támogatás párhuzamos kérések kezelésére, automatikus API dokumentáció generálás, és kiváló teljesítmény. A FastAPI szervered közvetítőként működik, amely fogadja a frontend kéréseit, kommunikál az AI szolgáltatásokkal, és formázott válaszokat ad vissza.
Miért pont FastAPI AI alkalmazásokhoz?
Lehet, hogy azt kérded: „Nem hívhatnám meg az AI-t közvetlenül a frontend JavaScriptből?” vagy „Miért FastAPI Flask vagy Django helyett?” Remek kérdések!
Ezért tökéletes a FastAPI arra, amit építünk:
- Alapból async: Több AI kérést tud egyszerre kezelni akadálymentesen
- Automatikus dokumentáció: Látogasd meg a
/docsoldalt, és ingyen kapsz egy gyönyörű, interaktív API dokumentációt - Beépített validáció: Hibákat elkap, mielőtt problémát okoznának
- Villámgyors: Az egyik leggyorsabb Python keretrendszer
- Modern Python: Használja a Python legújabb és legjobb funkcióit
És miért van egyáltalán szükség backendre:
Biztonság: Az AI API kulcsod olyan, mint egy jelszó – ha beteszed a frontend JavaScriptbe, bárki, aki megnézi a webhely forráskódját, ellophatja és használhatja a AI krediteidet. A backend biztonságban tartja az érzékeny hitelesítő adatokat.
Kéréskorlátozás és vezérlés: A backend lehetővé teszi a felhasználói kérések gyakoriságának szabályozását, felhasználói hitelesítés bevezetését, és naplózás hozzáadását a használat nyomon követésére.
Adatfeldolgozás: Előfordulhat, hogy beszélgetéseket szeretnél menteni, nem megfelelő tartalmat szűrni vagy több AI szolgáltatást kombinálni. A backendben él ez az üzleti logika.
Az architektúra egy kliens-szerver modellre emlékeztet:
- Frontend: Felhasználói felület az interakcióhoz
- Backend API: Kérés feldolgozási és irányítási réteg
- AI Szolgáltatás: Külső számítás és válaszgenerálás
- Környezeti változók: Biztonságos konfiguráció és hitelesítő adattárolás
A kérés-válasz folyamat megértése
Nézzük meg, mi történik, amikor egy felhasználó üzenetet küld:
sequenceDiagram
participant User as 👤 Felhasználó
participant Frontend as 🌐 Frontend
participant API as 🔧 FastAPI szerver
participant AI as 🤖 AI szolgáltatás
User->>Frontend: Beírja "Hello AI!"
Frontend->>API: POST /hello {"message": "Hello AI!"}
Note over API: Ellenőrzi a kérést<br/>Hozzáadja a rendszer üzenetet
API->>AI: Formázott kérést küld
AI->>API: Visszaküldi az AI választ
Note over API: Feldolgozza a választ<br/>Naplózza a beszélgetést
API->>Frontend: {"response": "Hello! Hogyan segíthetek?"}
Frontend->>User: Megjeleníti az AI üzenetet
Az egyes lépések megértése:
- Felhasználói interakció: A személy beír a chat felületbe
- Frontend feldolgozás: A JavaScript elfogja a bemenetet és JSON-ként formázza
- API validáció: A FastAPI automatikusan ellenőrzi a kérelmet Pydantic modellek segítségével
- AI integráció: A backend hozzáadja a kontextust (rendszerparancs), és meghívja az AI szolgáltatást
- Válasz kezelése: Az API megkapja az AI választ, és szükség esetén módosíthatja
- Frontend megjelenítés: A JavaScript megjeleníti a választ a chat felületen
Az API architektúra megértése
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Helló MI!"}
FastAPI->>AI Function: call_llm(message, system_prompt)
AI Function->>GitHub Models: API kérés
GitHub Models->>AI Function: MI válasz
AI Function->>FastAPI: válasz szöveg
FastAPI->>Frontend: {"response": "Szia! Miben segíthetek?"}
flowchart TD
A[Felhasználói Bemenet] --> B[Frontend Érvényesítés]
B --> C[HTTP POST Kérés]
C --> D[FastAPI Útválasztó]
D --> E[Pydantic Érvényesítés]
E --> F[AI Függvény Hívás]
F --> G[GitHub Modellek API]
G --> H[Válasz Feldolgozás]
H --> I[JSON Válasz]
I --> J[Frontend Frissítés]
subgraph "Biztonsági Réteg"
K[CORS Köztesréteg]
L[Környezeti Változók]
M[Hibakezelés]
end
D --> K
F --> L
H --> M
A FastAPI alkalmazás létrehozása
Építsük fel az API-t lépésről lépésre. Hozz létre egy api.py nevű fájlt a következő FastAPI kóddal:
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Naplózás konfigurálása
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# FastAPI alkalmazás létrehozása
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# CORS konfigurálása
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Megfelelő konfiguráció éles környezethez
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic modellek kérés/válasz érvényesítéshez
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:
# Üzenet kinyerése és érvényesítése
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]}...")
# AI szolgáltatás meghívása (megjegyzés: a call_llm-nek aszinkronnak kell lennie a jobb teljesítmény érdekében)
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)
A FastAPI implementáció megértése:
- Importálja a FastAPI-t a modern webes keretrendszer funkcióihoz és a Pydanticot adatvalidációhoz
- Létrehozza az automatikus API dokumentációt (a szerverindítás után elérhető a
/docsalatt) - Engedélyezi a CORS köztes szoftvert, hogy a frontend kérések különböző eredetűekről is érkezzenek
- Definiálja a Pydantic modelleket az automatikus kérés/válasz validációhoz és dokumentációhoz
- Használ async végpontokat a jobb teljesítményért párhuzamos kérések esetén
- Megvalósítja a megfelelő HTTP státuszkódokat és hibakezelést HTTPException segítségével
- Tartalmaz strukturált naplózást a szolgáltatás figyeléséhez és hibakereséshez
- Biztosít egészségügyi ellenőrző végpontot a szolgáltatás állapotának monitorozásához
A FastAPI fő előnyei a hagyományos keretrendszerekkel szemben:
- Automatikus validáció: A Pydantic modellek biztosítják az adat integritását feldolgozás előtt
- Interaktív dokumentáció: Látogasd meg a
/docsoldalt az automatikusan generált, tesztelhető API dokumentációért - Típusbiztonság: Python típusjelölések megakadályozzák a futásidejű hibákat és javítják a kód minőségét
- Async támogatás: Több AI kérést kezel egyszerre blokkolás nélkül
- Teljesítmény: Jelentősen gyorsabb kérésfeldolgozás valós idejű alkalmazásokhoz
A CORS megértése: A web biztonsági őre
A CORS (Cross-Origin Resource Sharing) olyan, mint egy biztonsági őr egy épületnél, aki ellenőrzi, hogy a látogatók bejöhetnek-e. Nézzük meg, miért fontos, és hogyan befolyásolja az alkalmazásodat.
Mi az a CORS és miért létezik?
A probléma: Képzeld el, hogy bármely weboldal kérdéseket intézhetne a bankod weboldalához a nevedben engedély nélkül! Ez egy biztonsági rémálom lenne! A böngészők ezt alapértelmezetten megakadályozzák az „Egyező eredet szabály” („Same-Origin Policy”) révén.
Egyező eredet szabály: A böngészők csak olyan domainre, portról és protokollról engedélyezik a kéréseket, ahonnan a weboldalt betöltötték.
Valós világ analógia: Olyasmi, mint a lakóépület biztonság – alapértelmezésben csak a lakók (egyező eredetűek) léphetnek be. Ha barátot szeretnél beengedni (más eredetű), azt külön meg kell engedned a biztonságnak.
CORS a fejlesztői környezetedben
Fejlesztés alatt többnyire a frontend és a backend külön porton futnak:
- Frontend:
http://localhost:3000(vagy file://, ha közvetlenül HTML-t nyitsz meg) - Backend:
http://localhost:5000
Ezeket „különböző eredetűnek” tekintik, még akkor is, ha ugyanazon a gépen vannak!
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # Ez azt mondja a böngészőknek: "Rendben van, ha más eredetek kérdéseket intéznek ehhez az API-hoz"
Mit csinál a CORS konfiguráció a gyakorlatban:
- Hozzáad speciális HTTP fejlécet az API válaszokhoz, hogy a böngésző tudja: „ez a cross-origin kérés engedélyezett”
- Kezeli az előzetes „preflight” kéréseket (a böngészők néha előzetes engedélyt kérnek, mielőtt a tényleges kérést elküldenék)
- Megakadályozza a rettegett „blokk a CORS szabály miatt” hibát a böngésző konzoljában
CORS biztonság: fejlesztés vs éles környezet
# 🚨 Fejlesztés: Minden forrást engedélyez (kényelmes, de nem biztonságos)
CORS(app)
# ✅ Éles üzem: Csak a saját frontend domained engedélyezése
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Haladó: Különböző források a különböző környezetekhez
if app.debug: # Fejlesztői mód
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Éles üzem mód
CORS(app, origins=["https://yourdomain.com"])
Miért fontos ez: Fejlesztés során a CORS(app) olyan, mintha nyitva hagynád a bejárati ajtót – kényelmes, de nem biztonságos. Éles környezetben pontosan meg akarod adni, mely weboldalak kommunikálhatnak az API-dal.
Gyakori CORS helyzetek és megoldások
| Eset | Probléma | Megoldás |
|---|---|---|
| Helyi fejlesztés | A frontend nem éri el a backendet | Add hozzá a CORSMiddleware-t a FastAPI-hez |
| GitHub Pages + Heroku | Az éles frontend nem éri el az API-t | Add hozzá a GitHub Pages URL-t a CORS eredetekhez |
| Egyedi domain | CORS hibák éles környezetben | Frissítsd a CORS eredeteket, hogy megfeleljenek a domainnek |
| Mobilalkalmazás | Az app nem éri el a web API-t | Add hozzá az app domainjét vagy használj * karaktert körültekintően |
Tipp: Megnézheted a CORS fejléceket a böngésződ Fejlesztői eszközeiben a Hálózat (Network) fül alatt. Keresd az Access-Control-Allow-Origin szerű fejlécet a válaszokban.
Hibakezelés és validáció
Figyeld meg, hogyan kezeli megfelelően az API a hibákat:
# Ellenőrizze, hogy kaptunk-e üzenetet
if not message:
return jsonify({"error": "Message field is required"}), 400
Fontos validációs alapelvek:
- Ellenőrzi a kötelező mezőket a kérés feldolgozása előtt
- Visszaad értelmes hibaüzeneteket JSON formátumban
- Használ megfelelő HTTP státuszkódokat (400 a hibás kérelmekhez)
- Nyújt egyértelmű visszacsatolást a frontend fejlesztőknek a hibakereséshez
A backend beállítása és futtatása
Most, hogy készen áll az AI integrációnk és a FastAPI szerverünk, indítsuk el mindezt. A telepítési folyamat a Python függőségek telepítéséből, a környezeti változók konfigurálásából, és a fejlesztői szerver indításából áll.
Python környezet beállítása
Állítsd be a Python fejlesztői környezetedet. A virtuális környezetek olyanok, mint a Manhattan Projekt elkülönített részei – minden projekt megkapja a saját izolált terét a speciális eszközökkel és függőségekkel, megakadályozva az összeütközéseket a projektek között.
# Navigálj a backend könyvtáradba
cd backend
# Hozz létre egy virtuális környezetet (mint egy tiszta szoba létrehozása a projektednek)
python -m venv venv
# Aktiváld azt (Linux/Mac)
source ./venv/bin/activate
# Windows esetén használd:
# venv\Scripts\activate
# Telepítsd a fontos cuccokat
pip install openai fastapi uvicorn python-dotenv
Mit csináltunk most:
- Létrehoztuk a saját kis Python buborékunkat, ahol telepíthetünk csomagokat anélkül, hogy bármi mást befolyásolnánk
- Aktiváltuk azt, hogy a terminál tudja, ezt a környezetet használja
- Telepítettük az alapvetőket: OpenAI az AI varázshoz, FastAPI a web API-hoz, Uvicorn hogy futtassa, és python-dotenv a biztonságos titkok kezeléséhez
Fontos függőségek magyarázata:
- FastAPI: Modern, gyors web keretrendszer automatikus API dokumentációval
- Uvicorn: Villámgyors ASGI szerver FastAPI alkalmazások futtatásához
- OpenAI: Hivatalos könyvtár a GitHub modellekhez és OpenAI API integrációhoz
- python-dotenv: Biztonságos környezeti változó betöltés
.envfájlokból
Környezeti konfiguráció: Titkok biztonságban tartása
Mielőtt elkezdenénk az API-t, beszélnünk kell az egyik legfontosabb leckéről a webfejlesztésben: hogyan tartsd titkaidat tényleg titokban. A környezeti változók olyanok, mint egy biztonságos páncélszekrény, amelyhez csak az alkalmazásod férhet hozzá.
Mik azok a környezeti változók?
Gondolj a környezeti változókra, mint egy értékmegőrző széf: – beleteszed az értékeidet, és csak te (és az appod) tudják kivenni őket. Ahelyett, hogy az érzékeny adatokat közvetlenül a kódodba írnád (ahol bárki láthatja), biztonságosan tárolod a környezetben.
Ez a különbség:
- Helytelen mód: Írod a jelszavad egy cetlire, és kiragasztod a monitorodra
- Helyes mód: Egy biztonságos jelszókezelőben tartod a jelszavad, amit csak te érhetsz el
Miért fontosak a környezeti változók
# 🚨 SOHA NE EZT - API kulcs mindenki számára látható
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Bárki ellophatja ezt!
base_url="https://models.github.ai/inference"
)
# ✅ EZZEL CSINÁLD - API kulcs biztonságosan tárolva
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Csak az alkalmazásod férhet hozzá ehhez
base_url="https://models.github.ai/inference"
)
Mi történik, ha keménykódolod a titkokat:
- Verziókezelés kitettsége: Bárki, akinek hozzáférése van a Git repóhoz, látja az API kulcsot
- Nyilvános repók: Ha Githubra tolod, a kulcsod látja az egész internet
- Csapatmegosztás: Más fejlesztők a projekten hozzáférnek a személyes API kulcsodhoz
- Biztonsági incidensek: Ha valaki ellopja az API kulcsot, használhatja az AI kreditjeidet
A környezeti fájl beállítása
Hozz létre egy .env fájlt a backend könyvtáradban. Ebben a fájlban tárolódnak helyileg a titkaid:
# .env fájl - Ezt SOHA nem szabad Git-be feltölteni
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
Az .env fájl megértése:
- Egy titok soronként
KEY=értékformátumban - Nincsenek szóközök az egyenlőségjel körül
- Nem kell idézőjel az értékek köré (általában)
- Kommentek
#karakterrel kezdődnek
GitHub személyes hozzáférési token létrehozása
A GitHub tokened olyan, mint egy speciális jelszó, amely engedélyt ad az appodnak a GitHub AI szolgáltatásainak használatához:
Token létrehozás lépésről lépésre:
- Menj a GitHub Beállításokhoz → Fejlesztői beállítások → Személyes hozzáférési tokenek → Tokenek (klasszikus)
- Kattints az „Új token generálása (klasszikus)” gombra
- Állítsd be a lejáratot (30 nap teszteléshez, hosszabb az éleshez)
- Válaszd ki a jogosultságokat: Jelöld be a „repo” és más szükséges engedélyeket
- Generáld a tokent, és azonnal másold ki (többet nem fogod látni!)
- Illeszd be az .env fájlodba
# Példa arra, hogyan néz ki a tokened (ez hamis!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
Környezeti változók betöltése Pythonban
import os
from dotenv import load_dotenv
# Környezeti változók betöltése a .env fájlból
load_dotenv()
# Most már biztonságosan hozzáférhetsz hozzájuk
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"
)
Mit csinál ez a kód:
- Betölti az
.envfájlt és elérhetővé teszi a változókat Pythonban - Ellenőrzi, hogy a szükséges token létezik-e (jó hibakezelés!)
- Világos hibát dob, ha a token hiányzik
- Biztonságosan használja a tokent anélkül, hogy kódba építené
Git biztonság: A .gitignore fájl
A .gitignore fájl megmondja a Gitnek, mely fájlokat ne kezeljen vagy töltsön fel:
# .gitignore - Add hozzá ezeket a sorokat
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
Miért fontos ez: Ha hozzáadod az .env-t a .gitignore-hoz, a Git figyelmen kívül hagyja a környezet fájlt, így véletlenül sem töltheted fel a titkaidat GitHubra.
Különböző környezetek, különböző titkok
A professzionális alkalmazások különböző API kulcsokat használnak különböző környezetekhez:
# .env.fejlesztés
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.termelés
GITHUB_TOKEN=your_production_token
DEBUG=False
Miért fontos ez: Nem akarod, hogy a fejlesztési kísérleteid befolyásolják az éles AI használati kvótádat, és eltérő biztonsági szinteket akarsz különböző környezetekhez.
Fejlesztői szerver indítása: Élesítsd a FastAPI-dat
Most jön a izgalmas pillanat – indítsd el FastAPI fejlesztői szervered, és nézd meg, ahogy az AI integrációd életre kel! A FastAPI az Uvicorn-t használja, ami egy villámgyors ASGI szerver, kifejezetten aszinkron Python alkalmazásokhoz tervezve.
A FastAPI szerver indítási folyamatának megértése
# Módszer 1: Közvetlen Python végrehajtás (tartalmazza az automatikus újratöltést)
python api.py
# Módszer 2: Uvicorn közvetlen használata (nagyobb irányítás)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
Amikor ezt a parancsot futtatod, a háttérben a következők történnek:
1. A Python betölti a FastAPI alkalmazásodat:
- Importálja az összes szükséges könyvtárat (FastAPI, Pydantic, OpenAI stb.)
- Betölti a környezeti változókat a
.envfájlból - Létrehozza a FastAPI alkalmazás példányát automatikus dokumentációval együtt
2. Az Uvicorn konfigurálja az ASGI szervert:
- A 5000-es porthoz kötődik aszinkron kérések kezelésére
- Beállítja a kérések útvonalát automatikus validációval
- Engedélyezi a hot reload-ot fejlesztéshez (fájlváltozás esetén újraindul)
- Interaktív API dokumentációt generál
3. A szerver elkezd figyelni:
- A terminálban ez látható:
INFO: Uvicorn running on http://0.0.0.0:5000 - A szerver képes több párhuzamos AI kérést kezelni
- Az API készen áll az automatikus dokumentációval a
http://localhost:5000/docscímen
Amit látnod kell, ha minden működik
$ 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.
A FastAPI kimenetének megértése:
- Figyelni fog változásokat: A fejlesztéshez automatikus újratöltés engedélyezve
- Uvicorn fut: Magas teljesítményű ASGI szerver aktív
- Elindult az újratöltő folyamat: Fájlfigyelő automatikus újraindításokhoz
- Alkalmazás indítása sikeres: FastAPI alkalmazás sikeresen inicializálva
- Interaktív dokumentáció elérhető: Látogasd meg a
/docsoldalt az automatikus API dokumentációért
A FastAPI tesztelése: Több erőteljes lehetőség
A FastAPI több kényelmes módot kínál az API tesztelésére, többek között automatikus interaktív dokumentációt:
1. Módszer: Interaktív API dokumentáció (Ajánlott)
- Nyisd meg a böngészőt és menj a
http://localhost:5000/docscímre - Megjelenik a Swagger UI az összes végponttal dokumentálva
- Kattints a
/hellovégpontra → "Try it out" → Írj be egy tesztüzenetet → "Execute" - Nézd meg a választ közvetlenül a böngészőben megfelelő formázással
2. Módszer: Egyszerű böngészős teszt
- Menj a
http://localhost:5000gyökér végpontra - Menj a
http://localhost:5000/healthcímre a szerver állapotának ellenőrzéséhez - Ez megerősíti, hogy a FastAPI szerver megfelelően fut
2. Módszer: Parancssoros teszt (Haladó)
# Teszt curl-lel (ha elérhető)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Várt válasz:
# {"response": "Helló! Én vagyok az AI asszisztensed. Miben segíthetek ma?"}
3. Módszer: Python teszt szkript
# test_api.py - Hozd létre ezt a fájlt az API teszteléséhez
import requests
import json
# Teszteld az API végpontot
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)
Gyakori indítási problémák elhárítása
| Hibaüzenet | Mit jelent | Hogyan javítsd |
|---|---|---|
ModuleNotFoundError: No module named 'fastapi' | FastAPI nincs telepítve | Futtasd a pip install fastapi uvicorn parancsot a virtuális környezetben |
ModuleNotFoundError: No module named 'uvicorn' | ASGI szerver nincs telepítve | Futtasd a pip install uvicorn parancsot a virtuális környezetben |
KeyError: 'GITHUB_TOKEN' | Környezeti változó nem található | Ellenőrizd a .env fájlt és a load_dotenv() hívást |
Address already in use | A 5000-es port foglalt | Állítsd le a portot használó folyamatokat vagy válts portot |
ValidationError | A kérés adatai nem egyeznek a Pydantic modellel | Ellenőrizd, hogy a kérés formátuma megfelel-e a várt sémának |
HTTPException 422 | Feldolgozhatatlan entitás | Kérés validáció sikertelen, nézd meg a /docs oldalt a helyes formátumért |
OpenAI API error | AI szolgáltatás hitelesítés sikertelen | Ellenőrizd, hogy a GitHub token helyes és megfelelő jogosultságokkal rendelkezik |
Fejlesztési legjobb gyakorlatok
Hot Reloading: A FastAPI Uvicorn-nal automatikusan újratölti az alkalmazást, amikor elmented a változtatásokat a Python fájlokban. Ez azt jelenti, hogy módosítás után azonnal tesztelhetsz újra manuális újraindítás nélkül.
# Hot reload explicite engedélyezése
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True engedélyezi a hot reloadot
Fejlesztési naplózás hozzáadása: Így láthatod, mi történik:
import logging
# Naplózás beállítása
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
Miért hasznos a naplózás: Fejlesztés közben pontosan látod, milyen kérések érkeznek, mit válaszol az AI, és hol vannak hibák. Ez jelentősen felgyorsítja a hibakeresést.
GitHub Codespaces konfigurálása: Felhőalapú fejlesztés egyszerűen
A GitHub Codespaces olyan, mintha egy erős fejlesztői géped lenne a felhőben, amit bármilyen böngészőből elérsz. Ha Codespaces-ben dolgozol, van néhány extra lépés, hogy a backend elérhető legyen a frontend számára.
Codespaces hálózat megértése
Helyi fejlesztési környezetben minden ugyanazon a gépen fut:
- Backend:
http://localhost:5000 - Frontend:
http://localhost:3000(vagy file://)
Codespaces-ben a fejlesztési környezet a GitHub szerverein fut, így a "localhost" mást jelent. A GitHub automatikusan létrehoz nyilvános URL-eket a szolgáltatásaidhoz, de ezeket megfelelően kell konfigurálnod.
Lépésről lépésre Codespaces konfigurálás
1. Indítsd el a backend szervert:
cd backend
python api.py
Ismerős FastAPI/Uvicorn indítási üzenetet fogsz látni, de észre fogod venni, hogy a Codespace környezeten belül fut.
2. Állítsd be a port láthatóságát:
- Keresd meg a "Ports" fület a VS Code alsó paneljén
- Találd meg az 5000-es portot a listában
- Jobb klikk az 5000-es portr
- Válaszd a "Port Visibility" → "Public" opciót
Miért állítsd nyilvánosra? Alapértelmezés szerint a Codespace portok privátak (csak neked elérhetők). A nyilvánossá tétel lehetővé teszi, hogy a frontend (ami a böngészőben fut) kommunikáljon a backenddel.
3. Szerezd meg a nyilvános URL-t: A port nyilvánossá tételét követően egy ilyen URL jelenik meg:
https://your-codespace-name-5000.app.github.dev
4. Frissítsd a frontend konfigurációját:
// A frontend app.js fájlodban frissítsd a BASE_URL-t:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Codespace URL-ek megértése
A Codespace URL-ek előre látható minta szerint alakulnak:
https://[codespace-name]-[port].app.github.dev
Magyarázat:
codespace-name: Egyedi azonosító a Codespace-hez (általában tartalmazza a felhasználóneved)port: A szolgáltatás futtatott portja (nálunk 5000 a FastAPI alkalmazás)app.github.dev: A GitHub domaine Codespaces alkalmazásokhoz
A Codespace beállítás tesztelése
1. Teszteld közvetlenül a backend-et: Nyisd meg a nyilvános URL-t egy új böngészőfülön. Ezt kell látnod:
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
2. Teszteld a böngésző fejlesztői eszközeivel:
// Nyissa meg a böngésző konzolját, és tesztelje az API-ját
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 helyi fejlesztés
| Szempont | Helyi fejlesztés | GitHub Codespaces |
|---|---|---|
| Beállítási idő | Hosszabb (Python, függőségek telepítése) | Azonnali (előre konfigurált környezet) |
| URL elérés | http://localhost:5000 | https://xyz-5000.app.github.dev |
| Port konfiguráció | Automatikus | Manuális (portokat nyilvánossá kell tenni) |
| Fájlmegőrzés | Helyi gépen | GitHub tárolóban |
| Együttműködés | Nehéz megosztani a környezetet | Könnyű megosztani a Codespace linket |
| Internet függőség | Csak AI API hívásokhoz | Mindenhez szükséges |
Codespace fejlesztési tippek
Környezeti változók Codespaces-ben:
A .env fájl ugyanúgy működik a Codespaces-ben, de állíthatsz környezeti változókat közvetlenül is a Codespace-ben:
# Környezeti változó beállítása az aktuális munkamenetre
export GITHUB_TOKEN="your_token_here"
# Vagy add hozzá a .bashrc fájlodhoz a tartósság érdekében
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
Port kezelés:
- A Codespaces automatikusan érzékeli, mikor kezd a alkalmazás porton figyelni
- Egyszerre több portot is továbbíthatsz (pl. ha adatbázist is hozzáadsz később)
- A portok elérhetőek maradnak, amíg a Codespace fut
Fejlesztési munkafolyamat:
- Módosítsd a kódot VS Code-ban
- FastAPI automatikusan újratölt (köszönhetően az Uvicorn reload módjának)
- Azonnal teszteld a változtatásokat a nyilvános URL-en
- Commitolj és push-olj ha készen állsz
💡 Szakértői tipp: Használj könyvjelzőt a Codespace backend URL-re fejlesztés közben. Mivel a Codespace nevek stabilak, az URL nem fog változni, amíg ugyanazt a Codespace-et használod.
Frontend chat felület létrehozása: ahol az emberek találkoznak az AI-val
Most megépítjük a felhasználói felületet – azt a részt, amely meghatározza, hogyan kommunikálnak az emberek az AI asszisztenseddel. Ahogy az eredeti iPhone felületének dizájnjánál, itt is arra koncentrálunk, hogy a bonyolult technológia intuitív és természetes legyen.
A modern frontend architektúra megértése
A chat felületünk egy úgynevezett „Single Page Application” vagy SPA lesz. Az öreg stílusú megközelítés helyett, ahol minden kattintás új oldalt tölt be, az appunk zökkenőmentesen és azonnal frissül:
Régi weboldalak: Olyan, mint egy fizikai könyv olvasása – teljesen új oldalra lapozol
A mi chat appunk: Olyan, mint a telefonod használata – minden folyamatosan frissül és áramlik
graph TD
A[Felhasználó Üzenetet Ír] --> B[JavaScript Rögzíti a Bemenetet]
B --> C[Adatok Ellenőrzése és Formázása]
C --> D[Backend API-nak Küldés]
D --> E[Betöltési Állapot Megjelenítése]
E --> F[AI Válasz Fogadása]
F --> G[Chat Felület Frissítése]
G --> H[Kész a Következő Üzenetre]
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(szöveg, szerep)
+escapeHtml(szöveg)
+scrollToBottom()
+setLoading(betöltésFolyamatban)
}
ChatApp --> DOM : manipulálja
ChatApp --> FastAPI : kéréseket küld
A frontend fejlesztés három pillére
Minden frontend alkalmazás – az egyszerű weboldalaktól a komplex appokig, mint a Discord vagy Slack – három alapvető technológián alapul. Gondolj rájuk úgy, mint a minden látott és használt dolog alapjára a weben:
HTML (Struktúra): Ez az alap
- Meghatározza, milyen elemek vannak (gombok, szövegmezők, konténerek)
- Jelentést ad a tartalomnak (ez fejléc, ez űrlap stb.)
- Létrehozza az alapvető struktúrát, amire minden más épül
CSS (Megjelenés): Ez a belsőépítész
- Szép megjelenést ad mindennek (színek, betűk, elrendezés)
- Kezeli a különböző képernyőméreteket (telefon, laptop, tablet)
- Létrehozza a sima animációkat és vizuális visszacsatolást
JavaScript (Viselkedés): Ez az agy
- Reagál, amit a felhasználók tesznek (kattintás, gépelés, görgetés)
- Kommunikál a backenddel és frissíti az oldalt
- Mindent interaktívvá és dinamikussá tesz
Gondolj rá, mint építészeti tervezésre:
- HTML: A szerkezeti tervrajz (helyiségek és kapcsolatok meghatározása)
- CSS: Az esztétikai és környezeti tervezés (látvány és felhasználói élmény)
- JavaScript: A mechanikai rendszerek (funkcionalitás és interaktivitás)
Miért fontos a modern JavaScript architektúra
A chat alkalmazásunk korszerű JavaScript mintákat használ, amiket professzionális alkalmazásokban is látni fogsz. Ezek megértése segít fejlesztőként fejlődni:
Osztály alapú architektúra: A kódot osztályokba fogjuk szervezni, ami olyan, mintha tervrajzokat készítenél az objektumokhoz
Async/Await: Modern módszer az időigényes műveletek kezelésére (pl. API hívások)
Eseményvezérelt programozás: Az app a felhasználói műveletekre (kattintás, billentyűleütés) reagál, nem pedig folyamatos ciklusban fut
DOM manipuláció: Dinamikusan frissíti az oldal tartalmát a felhasználói interakciók és API válaszok alapján
Projekt struktúra kialakítása
Hozz létre egy frontend könyvtárat ezzel a szervezett struktúrával:
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
Az architektúra megértése:
- Szétválasztja a struktúrát (HTML), viselkedést (JavaScript) és megjelenést (CSS)
- Egyszerű fájlstruktúrát tart fenn, amely könnyen navigálható és módosítható
- Követi a webfejlesztés legjobb gyakorlatait a szervezettség és fenntarthatóság érdekében
Az HTML alap megépítése: szemantikus struktúra az akadálymentességért
Kezdjük az HTML struktúrával. A modern webfejlesztés hangsúlyozza a „szemantikus HTML”-t – olyan HTML elemek használatát, amelyek egyértelműen leírják a funkciójukat, nem csak a kinézetüket. Ez elérhetővé teszi az alkalmazásodat képernyőolvasók, keresőmotorok és egyéb eszközök számára.
Miért fontos a szemantikus HTML? Képzeld el, hogy telefonon írod le a chat appodat valakinek. Azt mondanád: „Van egy fejléc a címmel, egy fő terület a beszélgetéseknek, és egy űrlap alul az üzenetek gépeléséhez.” A szemantikus HTML olyan elemeket használ, amik ezt a természetes leírást tükrözik.
Hozd létre az index.html fájlt ezzel a gondosan strukturált markupkal:
<!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>
Minden HTML elem jelentése és célja:
Dokumentum szerkezete
<!DOCTYPE html>: Jelzi a böngészőnek, hogy modern HTML5 dokumentum<html lang="en">: Meghatározza az oldal nyelvét képernyőolvasók és fordító eszközök számára<meta charset="UTF-8">: Biztosítja a megfelelő karakterkódolást nemzetközi szövegekhez<meta name="viewport"...>: Mobilra optimalizált nézet beállítása (nagyítás és méretezés szabályozása)
Szemantikus elemek
<header>: Egyértelműen az oldal tetejét jelöli a címmel és leírással<main>: A fő tartalmi területet jelöli (ahol a beszélgetések zajlanak)<form>: Helyes szemantikai elem a felhasználói bevitelhez, támogatja a billentyűzetes navigációt
Akadálymentességi funkciók
role="log": Jelzi a képernyőolvasónak, hogy ez egy kronologikus üzenetnaplóaria-live="polite": Új üzeneteket jelenti be a képernyőolvasón megszakítás nélkülaria-label: Leíró címkék az űrlap vezérlőihezrequired: Böngésző ellenőrzi, hogy a felhasználó üzenetet adott-e meg küldés előtt
CSS és JavaScript integráció
classattribútumok: Stílusolási pontokat biztosítanak a CSS-nek (pl.chat-container,input-group)idattribútumok: JavaScript képes megtalálni és manipulálni adott elemeket- Script elhelyezése: JavaScript fájl a végén töltődik be, így először az HTML töltődik be
Miért működik ez a struktúra:
- Logikus folyamat: Fejléc → Fő tartalom → Bemeneti űrlap illeszkedik a természetes olvasási sorrendhez
- Billentyűzet-barát: A felhasználók tabulátorral végigjárhatják az összes interaktív elemet
- Képernyőolvasó-barát: Egyértelmű tájékozódási pontok és leírás a látássérült felhasználók számára
- Mobilra optimalizált: A viewport meta tag támogatja a reszponzív dizájnt
- Progresszív fejlesztés: Működik akkor is, ha CSS vagy JavaScript nem töltődik be
Interaktív JavaScript hozzáadása: modern webalkalmazás logika
Most építsük meg azt a JavaScriptet, amely életre kelti a csevegőfelületünket. Modern JavaScript mintákat fogunk használni, amelyekkel a professzionális webfejlesztésben is találkozhatsz, beleértve az ES6 osztályokat, async/await-et és eseményvezérelt programozást.
A modern JavaScript architektúra megértése
Ahelyett, hogy procedurális kódot írnánk (egy sor függvényt, amelyek sorban futnak le), egy osztály-alapú architektúrát hozunk létre. Gondolj úgy az osztályra, mint egy tervrajzra az objektumok létrehozásához – mint ahogy az építész tervrajzából több házat is lehet építeni.
Miért használjunk osztályokat webalkalmazásokhoz?
- Szervezettség: Minden kapcsolódó funkció együtt van csoportosítva
- Újrafelhasználhatóság: Több csevegőpéldányt is létrehozhatsz ugyanazon az oldalon
- Karbantarthatóság: Könnyebb hibakeresés és egyes funkciók módosítása
- Professzionális szabvány: Ezt a mintát használják olyan keretrendszerekben, mint a React, Vue és Angular
Hozd létre az app.js fájlt ezzel a modern, jól strukturált JavaScripttel:
// app.js - Modern chat alkalmazás logika
class ChatApp {
constructor() {
// Hivatkozások lekérése a manipulálni kívánt DOM elemekre
this.messages = document.getElementById("messages");
this.form = document.getElementById("chatForm");
this.input = document.getElementById("messageInput");
this.sendButton = document.getElementById("sendBtn");
// Állítsd be itt a backend URL-jét
this.BASE_URL = "http://localhost:5000"; // Frissítsd ezt a környezetednek megfelelően
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
// Eseményfigyelők beállítása a chat alkalmazás létrehozásakor
this.initializeEventListeners();
}
initializeEventListeners() {
// Figyelj a űrlap beküldésére (amikor a felhasználó a Küldésre kattint vagy Entert nyom)
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Figyelj az Enter gombra a beviteli mezőben is (jobb felhasználói élmény)
this.input.addEventListener("keypress", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.handleSubmit(e);
}
});
}
async handleSubmit(event) {
event.preventDefault(); // Megakadályozza, hogy az űrlap frissítse az oldalt
const messageText = this.input.value.trim();
if (!messageText) return; // Ne küldj üres üzeneteket
// Nyújts visszajelzést a felhasználónak, hogy történik valami
this.setLoading(true);
// Azonnal add hozzá a felhasználó üzenetét a csevegéshez (optimista UI)
this.appendMessage(messageText, "user");
// Töröld a beviteli mezőt, hogy a felhasználó írni tudja a következő üzenetet
this.input.value = '';
try {
// Hívd meg az AI API-t és várd meg a választ
const reply = await this.callAPI(messageText);
// Add hozzá az AI válaszát a csevegéshez
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 {
// Engedélyezd újra a felületet siker vagy hiba esetén is
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";
}
}
// Inicializáld a chat alkalmazást az oldal betöltődésekor
document.addEventListener("DOMContentLoaded", () => {
new ChatApp();
});
Minden egyes JavaScript koncepció megértése
ES6 osztályszerkezet:
class ChatApp {
constructor() {
// Ez fut, amikor létrehozol egy új ChatApp példányt
// Olyan, mint a "beállítás" funkció a csevegésedhez
}
methodName() {
// A metódusok osztályhoz tartozó függvények
// Hozzáférhetnek az osztály tulajdonságaihoz a "this" használatával
}
}
Async/Await minta:
// Régi mód (callback pokol):
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Modern mód (async/await):
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
Eseményvezérelt programozás: Ahelyett, hogy folyamatosan ellenőriznénk, történt-e valami, "hallgatunk" az eseményekre:
// Amikor az űrlapot elküldik, futtassa a handleSubmit-et
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Amikor az Enter billentyűt lenyomják, szintén futtassa a handleSubmit-et
this.input.addEventListener("keypress", (e) => { /* ... */ });
DOM manipuláció:
// Új elemek létrehozása
const messageElement = document.createElement("div");
// Tulajdonságaik módosítása
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";
// Hozzáadás az oldalhoz
this.messages.appendChild(messageElement);
Biztonság és legjobb gyakorlatok
XSS megelőzés:
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text; // Ez automatikusan kimenti az HTML-t
return div.innerHTML;
}
Miért fontos ez: Ha a felhasználó beírja, hogy <script>alert('hack')</script>, ez a függvény biztosítja, hogy szövegként jelenjen meg, ne futtasson kódot.
Hibakezelés:
try {
const reply = await this.callAPI(messageText);
this.appendMessage(reply, "assistant");
} catch (error) {
// Barátságos hibát jelenítsen meg ahelyett, hogy összeomlana az alkalmazás
this.appendMessage("Sorry, I'm having trouble...", "error");
}
Felhasználói élmény szempontok:
- Optimista UI: Azonnal hozzáadja a felhasználó üzenetét, nem vár a szerver válaszára
- Betöltési állapotok: Letiltja a gombokat és megjeleníti a "Küldés..." állapotot várakozás közben
- Automatikus görgetés: Az új üzenetek mindig láthatóak maradnak
- Bemenet validáció: Nem küld üres üzeneteket
- Billentyűparancsok: Az Enter gomb küld üzenetet (mint a valódi csetalkalmazásokban)
Az alkalmazás folyamata
- Az oldal betöltődik →
DOMContentLoadedesemény lefut →new ChatApp()példány jön létre - A konstruktor fut → Betölti a DOM elem hivatkozásokat → Beállítja az eseménykezelőket
- A felhasználó gépel → Entert nyom vagy a Küldés gombra kattint → lefut a
handleSubmit - A
handleSubmit→ Ellenőrzi a bemenetet → Megjeleníti a betöltő állapotot → Meghívja az API-t - Az API válaszol → Hozzáadja az AI üzenetet a csethez → Újra engedélyezi a felületet
- Készen áll a következő üzenetre → A felhasználó folytathatja a csevegést
Ez az architektúra skálázható – könnyedén hozzáadhatsz funkciókat, mint üzenet szerkesztés, fájl feltöltés vagy több beszélgetési szál anélkül, hogy az egész szerkezetet újra kellene írni.
🎯 Pedagógiai ellenőrzőpont: Modern frontend architektúra
Architektúra megértése: Teljes, egyoldalas alkalmazást valósítottál meg modern JavaScript mintákkal. Ez a professzionális frontend fejlesztés szintjét képviseli.
Mesteri fogalmak:
- ES6 osztály architektúra: Szervezett, karbantartható kódszerkezet
- Async/Await minták: Modern aszinkron programozás
- Eseményvezérelt programozás: Reaktív felhasználói felület tervezés
- Biztonsági legjobb gyakorlatok: XSS megelőzés és bemenet validáció
Iparági kapcsolat: Az elsajátított minták (osztály alapú architektúra, aszinkron műveletek, DOM manipuláció) a modern keretrendszerek, mint a React, Vue és Angular alapjai. Ugyanazzal a gondolkodásmóddal építesz, mint amit a termelési alkalmazásokban használnak.
Reflektáló kérdés: Hogyan bővítenéd ezt a csevegőalkalmazást több beszélgetés vagy felhasználói hitelesítés kezelésére? Gondold át az architektúrális módosításokat és az osztálystruktúra fejlődését.
A csevegőfelület stílusozása
Most hozzunk létre egy modern, látványos csevegőfelületet CSS segítségével. A jó stílus professzionális érzetet kölcsönöz az alkalmazásnak, és javítja a felhasználói élményt. Modern CSS funkciókat fogunk alkalmazni, mint a Flexbox, CSS Grid és egyedi tulajdonságok egy reszponzív, akadálymentes dizájnért.
Hozd létre a styles.css fájlt ezekkel az átfogó stílusokkal:
/* 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;
}
}
A CSS architektúra megértése:
- Használ CSS egyéni tulajdonságokat (változókat) az egységes téma és könnyű karbantartás érdekében
- Alkalmaz Flexbox elrendezést a reszponzív dizájn és megfelelő igazítás érdekében
- Tartalmaz sima animációkat az üzenetek megjelenítéséhez anélkül, hogy zavaró lenne
- Biztosít vizuális megkülönböztetést a felhasználói üzenetek, AI válaszok és hibaállapotok között
- Támogat reszponzív kialakítást asztali és mobil eszközökön egyaránt
- Figyelembe vesz akadálymentességi szempontokat, mint a mozgáscsökkentés preferencia és megfelelő kontrasztarányok
- Kínál sötét mód támogatást a felhasználó rendszerbeállításai alapján
Háttér URL konfigurálása
Az utolsó lépés a BASE_URL frissítése a JavaScriptben, hogy megfeleljen a háttérszervered URL-jének:
// Helyi fejlesztéshez
this.BASE_URL = "http://localhost:5000";
// GitHub Codespaces-hez (cseréld le a tényleges URL-edre)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Hogyan határozd meg a háttér URL-jét:
- Lokális fejlesztés: Használd a
http://localhost:5000címet, ha a frontend és a backend is helyben fut - Codespaces: A Portok fülön keresd meg a háttér URL-jét, miután a 5000-es portot nyilvánossá tetted
- Éles üzem: Cseréld le a tényleges domain nevedre, amikor hosztolási szolgáltatáshoz telepítesz
💡 Tesztelési tipp: Közvetlenül is tesztelheted a backendet, ha meglátogatod a gyökér URL-t a böngésződben. Látnod kell a FastAPI szerver üdvözlő üzenetét.
Tesztelés és telepítés
Most, hogy megvannak a frontend és backend komponensek, teszteljük, hogy minden együtt működik-e, és fedezzük fel a telepítési lehetőségeket, hogy megoszthasd a csevegő asszisztenst másokkal.
Lokális tesztelési munkafolyamat
Kövesd az alábbi lépéseket, hogy teszteld a teljes alkalmazásod:
graph TD
A[Backend szerver indítása] --> B[Környezeti változók beállítása]
B --> C[API végpontok tesztelése]
C --> D[Frontend megnyitása a böngészőben]
D --> E[Chat funkció tesztelése]
E --> F[Hibák hibakeresése]
Lépésről lépésre tesztelési folyamat:
-
Indítsd el a háttér szervered:
cd backend source venv/bin/activate # vagy venv\Scripts\activate Windows rendszeren python api.py -
Ellenőrizd az API működését:
- Nyisd meg a
http://localhost:5000címet a böngésződben - Látni fogod az üdvözlő üzenetet a FastAPI szerveredtől
- Nyisd meg a
-
Nyisd meg a frontendet:
- Navigálj a frontend könyvtáradba
- Nyisd meg az
index.htmlfájlt a böngészőben - Vagy használd a VS Code Live Server kiterjesztését jobb fejlesztési élményért
-
Teszteld a csevegő funkciót:
- Írj be egy üzenetet a beviteli mezőbe
- Kattints a "Küldés" gombra vagy nyomj Entert
- Ellenőrizd, hogy az AI megfelelő választ ad-e
- Nézd meg a böngésző konzolját esetleges JavaScript hibákért
Gyakori problémák elhárítása
| Probléma | Tünetek | Megoldás |
|---|---|---|
| CORS hiba | A frontend nem éri el a backendet | Ellenőrizd, hogy a FastAPI CORSMiddleware megfelelően van-e beállítva |
| API kulcs hiba | 401 Jogosulatlan válaszok | Ellenőrizd a GITHUB_TOKEN környezeti változót |
| Kapcsolat elutasítva | Hálózati hibák a frontenden | Ellenőrizd a backend URL-t és hogy a Flask szerver fut-e |
| Nincs AI válasz | Üres vagy hibás válaszok | Ellenőrizd a backend naplókat API kvóta vagy hitelesítési problémák miatt |
Általános hibakeresési lépések:
- Nézd meg a böngésző fejlesztői eszközök Konzol fülét JavaScript hibákért
- Ellenőrizd a Hálózat fület, hogy sikeres API kérések és válaszok látszanak-e
- Vizsgáld át a backend terminál kimenetét Python hibák vagy API problémák miatt
- Győződj meg arról, hogy a környezeti változók megfelelően betöltődtek és elérhetők
📈 Az AI alkalmazásfejlesztési tudásod idővonala
timeline
title Teljes AI Alkalmazásfejlesztési Út
section AI Alapok
Generatív AI Megértése
: Mintafelismerési fogalmak elsajátítása
: AI paramétervezérlés mesterfokon
: Prompt tervezési technikák elsajátítása
GitHub Modellek Integrációja
: AI szolgáltatás platformok navigálása
: Biztonságos hitelesítés kezelése
: Modell paraméterek optimalizálása
section Backend Fejlesztés
Python API Architektúra
: FastAPI alkalmazások építése
: Aszinkron műveletek megvalósítása
: Biztonságos végpontok létrehozása
AI Szolgáltatás Integráció
: Külső AI API-khoz kapcsolódás
: Sebességkorlátozás kezelése
: Hibahatárok megvalósítása
section Frontend Mesterség
Modern JavaScript Minták
: ES6 osztályarchitektúra mesterfok
: Aszinkron/await folyamatok megvalósítása
: Reszponzív felületek létrehozása
Valós idejű Felhasználói Élmény
: Dinamikus csevegőfelületek készítése
: Betöltési állapotok kezelése
: Felhasználói interakciók optimalizálása
section Produkcióra Kész
Biztonság & Teljesítmény
: Biztonságos tokenkezelés megvalósítása
: XSS sebezhetőségek megelőzése
: API teljesítmény optimalizálása
Professzionális Telepítés
: Skálázható architektúrák építése
: Fenntartható kód létrehozása
: Fejlesztési folyamatok dokumentálása
🎓 Diploma mérföldkő: Sikeresen építettél egy teljes AI-meghajtású alkalmazást a modern technológiákat és architektúrális mintákat felhasználva, amelyek az élvonalbeli AI asszisztenseket működtetik. Ezek a készségek a hagyományos webfejlesztés és a korszerű AI integráció metszéspontját képviselik.
🔄 Következő szintű képességek:
- Készen állsz haladó AI keretrendszerek felfedezésére (LangChain, LangGraph)
- Fel vagy készülve többmodalitású AI alkalmazások építésére (szöveg, kép, hang)
- Fel vagy szerelve vektoradatbázisok és visszakereső rendszerek megvalósítására
- Alapot adtál gépi tanulás és AI modell finomhangolás számára
GitHub Copilot Agent kihívás 🚀
Használd az Agent módot a következő kihívás teljesítéséhez:
Leírás: Fejleszd tovább a csevegő asszisztenst úgy, hogy beszélgetési előzményeket és üzenettárolást adj hozzá. Ez a kihívás segít megérteni, hogyan kezeljük az állapotot csevegőalkalmazásokban, és hogyan implementáljunk adatmentést jobb felhasználói élményért.
Feladat: Módosítsd a csevegőalkalmazást úgy, hogy tartalmazzon beszélgetés előzményeket, amelyek megmaradnak a munkamenetek között. Adj funkciót az üzenetek helyi tárolásba mentésére, a beszélgetési előzmények megjelenítésére az oldal betöltésekor, és egy "Előzmények törlése" gombot is. Valamint valósíts meg gépelés-jelzőket és üzenet időbélyegeket, hogy a csevegés élménye valósághűbb legyen.
További információért a agent mód-ról kattints ide.
Feladat: Építsd meg a saját személyes AI asszisztensedet
Most saját AI asszisztensedet valósítod meg. Nem csupán a bemutató kódját ismétled meg, hanem lehetőség nyílik arra, hogy alkalmazd a koncepciókat és valami saját érdeklődési körödnek és használati eseteidnek megfelelőt hozz létre.
Projekt követelmények
Állítsd be a projekted egy tiszta, rendezett struktúrával:
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
Alapvető megvalósítási feladatok
Backend fejlesztés:
- Vedd át a FastAPI kódunkat és tedd egyedivé
- Alkoss egy egyedi AI személyiséget – talán egy segítőkész főzési segédet, kreatív írási partnert vagy tanulótársat?
- Adj hozzá megbízható hibakezelést, hogy az app ne omoljon össze hiba esetén
- Írj tiszta dokumentációt bárki számára, aki érteni szeretné az API működését
Frontend fejlesztés:
- Építs egy intuitív és barátságos csevegőfelületet
- Írj tiszta, modern JavaScriptet, amit büszkén mutathatsz más fejlesztőknek
- Tervezd meg a stílust egyedi módon, amely tükrözi az AI személyiségét – vidám és színes? Tiszta és minimalista? Teljesen rád van bízva!
- Győződj meg arról, hogy telefonon és számítógépen is jól működik
Személyre szabási követelmények:
- Válassz egy egyedi nevet és személyiséget az AI asszisztensednek – talán olyat, ami tükrözi az érdeklődési köreidet vagy azokat a problémákat, amiket meg akarsz oldani
- Személyre szabjad a vizuális dizájnt az asszisztensed hangulatának megfelelően
- Írj egy vonzó üdvözlő üzenetet, ami arra ösztönöz, hogy elkezdjenek csevegni veled
- Teszteld az asszisztenst különféle kérdésekkel, hogy lásd, hogyan válaszol
Fejlesztési ötletek (opcionális)
Szeretnéd továbbvinni a projektedet? Íme néhány szórakoztató ötlet a bővítéshez:
| Funkció | Leírás | Gyakorolt készségek |
|---|---|---|
| Üzenet előzmények | Megőrzi a beszélgetéseket oldalfrissítés után is | localStorage használat, JSON kezelés |
| Gépelési jelzők | Megjeleníti, hogy „AI gépel...” várakozás alatt | CSS animációk, async programozás |
| Üzenet időbélyegek | Megmutatja, mikor küldték az egyes üzeneteket | Dátum/idő formázás, UX tervezés |
| Csevegés exportálás | A felhasználók letölthetik a beszélgetést | Fájlfeldolgozás, adat exportálás |
| Téma váltás | Világos/sötét mód kapcsoló | CSS változók, felhasználói preferenciák |
| Hangalapú beviteli lehetőség | Beszéd-szöveg funkció hozzáadása | Web API-k, akadálymentesség |
Tesztelés és dokumentáció
Minőségbiztosítás:
- Teszteld az alkalmazást különféle bemenetekkel és szélsőséges esetekkel
- Ellenőrizd a reszponzív dizájn működését különböző képernyőméreteken
- Vizsgáld meg az akadálymentességet billentyűzettel és képernyőolvasóval
- Validáld az HTML és CSS szabványkövetésének megfelelését
Dokumentáció követelmények:
- Írj README.md-et, amely elmagyarázza a projektedet és hogy hogyan kell futtatni
- Tartsd benne a csevegőfelületed képernyőképeit működés közben
- Dokumentáld bármilyen egyedi funkciót vagy személyre szabást, amit hozzáadtál
- Adj meg világos telepítési útmutatót más fejlesztők számára
Beküldési irányelvek
Projekt leadandók:
- Teljes projekt könyvtár az összes forráskóddal
- README.md a projekt leírásával és telepítési útmutatóval
- Képernyőképek, amelyek bemutatják a csevegő asszisztenst működés közben
- Rövid reflexió arról, mit tanultál és milyen kihívásokkal szembesültél
Értékelési szempontok:
- Funkcionalitás: Működik-e a csevegő asszisztens a vártak szerint?
- Kódminőség: Jól szervezett, kommentált és karbantartható-e a kód?
- Dizájn: Vonzó és felhasználóbarát a felület?
- Kreativitás: Mennyire egyedi és személyre szabott a megvalósítás?
- Dokumentáció: Világosak és teljesek a telepítési instrukciók?
💡 Siker tipp: Kezdd az alapkövetelményekkel, majd adj hozzá fejlesztéseket, amikor minden működik. Először egy kifinomult magélményt hozz létre, aztán jöhetnek a haladó funkciók.
Megoldás
Bónusz kihívások
Készen állsz arra, hogy a következő szintre emeld az AI asszisztensed? Próbáld ki a haladó kihívásokat, amelyek elmélyítik az AI integráció és a webfejlesztés ismereteidet.
Személyiség testreszabás
Az igazi varázslat akkor történik, amikor az AI asszisztensed egyedi személyiséget kap. Kísérletezz különböző rendszerüzenetekkel, hogy speciális asszisztenseket hozz létre:
Professzionális asszisztens példa:
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
Kreatív írás segéd példa:
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
Technikai mentor példa:
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
Frontend fejlesztések
Alakítsd át a csevegőfelületet ezekkel a vizuális és funkcionális fejlesztésekkel:
Haladó CSS funkciók:
- Valósíts meg sima üzenet animációkat és átmeneteket
- Adj hozzá egyedi csevegő buborék dizájnokat CSS formákkal és gradiensekkel
- Készíts gépelő jelző animációt az AI „gondolkodik” állapotához
- Tervezd meg az emoji reakciókat vagy az üzenet értékelési rendszert
JavaScript fejlesztések:
- Adj hozzá billentyűparancsokat (Ctrl+Enter küldéshez, Escape a bevitel törléséhez)
- Implementálj üzenet kereső és szűrő funkciót
- Készíts beszélgetés exportáló funkciót (letöltés szövegként vagy JSON-ként)
- Add hozzá az automatikus mentést localStorage-ba az üzenetvesztés elkerülésére
Haladó AI integráció
Több AI személyiség:
- Hozz létre egy legördülő menüt az AI személyiségek közti váltáshoz
- Mentsd el a felhasználó kedvenc személyiségét localStorage-ban
- Valósíts meg kontextus váltást, amely megőrzi a beszélgetés folyamatosságát
Intelligens válaszfunkciók:
- Adj hozzá beszélgetési kontextus tudatosságot (az AI emlékszik korábbi üzenetekre)
- Valósíts meg intelligens javaslatokat a beszélgetés témája alapján
- Hozz létre gyors válasz gombokat gyakori kérdésekhez
🎯 Tanulási cél: Ezek a bónusz kihívások segítenek megérteni a fejlett webfejlesztési mintákat és a mesterséges intelligencia integrációs technikáit, amelyeket termelési alkalmazásokban használnak.
Összefoglalás és következő lépések
Gratulálunk! Sikeresen felépítettél egy teljesen AI-vezérelt chat asszisztenst a semmiből. Ez a projekt kézzel fogható tapasztalatot adott a modern webfejlesztési technológiákkal és az AI integrációval kapcsolatban – olyan készségeket, amelyek egyre értékesebbek a mai technológiai környezetben.
Amit elértél
A tanfolyam során elsajátítottál több kulcsfontosságú technológiát és koncepciót:
Backend fejlesztés:
- Integráltad a GitHub Models API-t az AI funkciókhoz
- Felépítettél egy RESTful API-t Flask segítségével megfelelő hibakezeléssel
- Megvalósítottál biztonságos hitelesítést környezeti változókkal
- Beállítottad a CORS-t frontend és backend közötti cross-origin kérésekhez
Frontend fejlesztés:
- Készítettél reszponzív chat felületet szemantikus HTML használatával
- Megvalósítottál modern JavaScript-et async/await és osztály alapú architektúrával
- Megterveztél egy vonzó felhasználói felületet CSS Grid, Flexbox és animációk használatával
- Hozzáadtál hozzáférhetőségi funkciókat és reszponzív dizájn elveket
Full-stack integráció:
- Összekapcsoltad a frontend és backend részeket HTTP API hívásokon keresztül
- Kezelted valós idejű felhasználói interakciókat és aszinkron adatfolyamot
- Megvalósítottad a hibakezelést és a felhasználói visszajelzést az egész alkalmazásban
- Letesztelted az alkalmazás teljes munkafolyamatát a felhasználói bemenettől az AI válaszig
Fő tanulási eredmények
mindmap
root((AI Csevegőalkalmazás Készségek))
API Integráció
Hitelesítés
Hibakezelés
Aszinkron Programozás
Webfejlesztés
HTML5 Szemantika
Modern CSS
ES6+ JavaScript
Felhasználói Élmény
Reszponzív Dizájn
Hozzáférhetőség
Valós idejű Interakció
AI Megértés
Prompt Mérnökség
Modell Paraméterek
Beszélgetés Menete
Ez a projekt bevezetést nyújtott az AI-vezérelt alkalmazások építésének alapjaiba, amelyek a webfejlesztés jövőjét képviselik. Most már érted, hogyan lehet AI-képességeket integrálni hagyományos webalkalmazásokba oly módon, hogy vonzó és intelligens, érzékeny felhasználói élmények jöjjenek létre.
Szakmai alkalmazások
Az ebben a leckében megszerzett készségek közvetlenül alkalmazhatók a modern szoftverfejlesztési karrierekben:
- Full-stack webfejlesztés modern keretrendszerekkel és API-kkal
- AI integráció webalkalmazásokban és mobilalkalmazásokban
- API tervezés és fejlesztés mikroszolgáltatási architektúrákhoz
- Felhasználói felület fejlesztés hozzáférhetőség és reszponzív dizájn szempontokkal
- DevOps gyakorlatok, beleértve a környezet konfigurálását és telepítését
Folytasd az AI fejlesztői utadat
Következő tanulási lépések:
- Fedezd fel az ennél fejlettebb AI modelleket és API-kat (GPT-4, Claude, Gemini)
- Tanulj prompt tervezési technikákról a jobb AI válaszokért
- Ismerkedj meg a beszélgetés tervezéssel és chatbot felhasználói élmény elveivel
- Vizsgáld meg az AI biztonságát, etikáját és a felelős AI fejlesztési gyakorlatokat
- Építs komplexebb alkalmazásokat beszélgetési memória és kontextusérzékenység használatával
Fejlett projekt ötletek:
- Többfelhasználós chat szobák AI moderációval
- AI-vezérelt ügyfélszolgálati chatbotok
- Oktatási tutor asszisztensek személyre szabott tanulással
- Kreatív írói kollégák különféle AI személyiségekkel
- Műszaki dokumentációs asszisztensek fejlesztőknek
A GitHub Codespaces használata
Szeretnéd kipróbálni ezt a projektet egy felhő alapú fejlesztői környezetben? A GitHub Codespaces teljes fejlesztői környezetet biztosít a böngésződben, ideális az AI alkalmazásokkal való kísérletezéshez helyi beállítási követelmények nélkül.
Fejlesztői környezet beállítása
1. lépés: Készítés sablonból
- Navigálj a Web Dev For Beginners repository oldalra
- Kattints a jobb felső sarokban a "Use this template" gombra (győződj meg róla, hogy be vagy jelentkezve GitHub-ra)
2. lépés: Codespaces indítása
- Nyisd meg az újonnan létrehozott repository-t
- Kattints a zöld "Code" gombra, és válaszd a "Codespaces" lehetőséget
- Válaszd a "Create codespace on main" opciót a fejlesztői környezet indításához
3. lépés: Környezet beállítása Amint betölt a Codespace, hozzáférést kapsz:
- Előre telepített Python, Node.js és minden szükséges fejlesztői eszköz
- VS Code felület bővítményekkel webfejlesztéshez
- Terminál hozzáférés backend és frontend szerverek futtatásához
- Port továbbítás az alkalmazások teszteléséhez
Mit nyújt a Codespaces:
- Megszünteti a helyi környezet telepítési és konfigurációs problémákat
- Konzisztens fejlesztői környezetet biztosít különféle eszközök között
- Előre konfigurált eszközök és bővítmények webfejlesztéshez
- Zökkenőmentes integrációt nyújt a GitHub verziókezelés és együttműködés céljából
🚀 Pro Tipp: A Codespaces tökéletes az AI alkalmazások tanulásához és prototípus készítéséhez, mert automatikusan kezeli a bonyolult környezetbeállításokat, így te az építésre és a tanulásra koncentrálhatsz ahelyett, hogy konfigurációs problémákkal bajlódnál.
Jogi nyilatkozat:
Ez a dokumentum az AI fordítási szolgáltatás, a Co-op Translator segítségével készült. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti, anyanyelvi dokumentum tekintendő hiteles forrásnak. Fontos információk esetén javasolt szakmai, emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy hibás értelmezésekért.