diff --git a/snippets/1042_SnippetManager/image-1.png b/snippets/1042_SnippetManager/image-1.png new file mode 100644 index 0000000..cedae5c Binary files /dev/null and b/snippets/1042_SnippetManager/image-1.png differ diff --git a/snippets/1042_SnippetManager/image-2.png b/snippets/1042_SnippetManager/image-2.png new file mode 100644 index 0000000..4d9473c Binary files /dev/null and b/snippets/1042_SnippetManager/image-2.png differ diff --git a/snippets/1042_SnippetManager/image-3.png b/snippets/1042_SnippetManager/image-3.png new file mode 100644 index 0000000..fa4348f Binary files /dev/null and b/snippets/1042_SnippetManager/image-3.png differ diff --git a/snippets/1042_SnippetManager/image-4.png b/snippets/1042_SnippetManager/image-4.png new file mode 100644 index 0000000..31998bc Binary files /dev/null and b/snippets/1042_SnippetManager/image-4.png differ diff --git a/snippets/1042_SnippetManager/image-5.png b/snippets/1042_SnippetManager/image-5.png new file mode 100644 index 0000000..4251381 Binary files /dev/null and b/snippets/1042_SnippetManager/image-5.png differ diff --git a/snippets/1042_SnippetManager/image.png b/snippets/1042_SnippetManager/image.png new file mode 100644 index 0000000..48986de Binary files /dev/null and b/snippets/1042_SnippetManager/image.png differ diff --git a/snippets/1042_SnippetManager/index.md b/snippets/1042_SnippetManager/index.md new file mode 100644 index 0000000..f75081b --- /dev/null +++ b/snippets/1042_SnippetManager/index.md @@ -0,0 +1,359 @@ +--- +layout: default +codename: SnippetManager +title: Vágólap-kezelő applikáció kkészítése esettanulmány +tags: snippets mieset +authors: Honvéd Péter +--- + +# MI esettanulmány – Vágólap-kezelő applikáció kkészítése esettanulmány + +A kész projekt elérhető [itt](https://github.com/peterz0ne/snippet-manager). + +## Tartalomjegyzék + +* [Célkitűzések](#célkitűzések) +* [Kiindulás és Architektúra](#kiindulás-és-architektúra) +* [Környezet kialakítása](#környezet-kialakítása) +* [Core Funkcionalitás](#core-funkcionalitás) +* [UI](#ui) +* [Funkciók](#funkciók) +* [Tanulságok össszefoglalva](#tanulságok-össszefoglalva) + +## Célkitűzések + +A mindennapok során gyakran előjön, hogy szeretnék valamit gyorsan lejegyezni, és eddig erre az operációs rendszer által kínált alkalmazások, bár gyakran elégnek tűnnek, könnyen visszakereshetetlenné válnak és összekeverednek egymással. + +Az alkalmazás a gyorsan lementendő szöveges tartalmak minél egyszerűbb kezelésére a következő funkciókkal igyekszik a használóját segíteni: +- új snippet gyors rögzítése, elsősorban gyorsbillentyűk segítségével +- a snippetek rendszerezése +- hatékony keresési lehetőség biztosítása +- VS Code-integráció + +Az alkalmazást, a fejlesztés során ágensek használata helyett promptok segítségével készítettem el. Ennek fő oka az volt, hogy ne legyen teljesen idegen az elkészült kódbázis, az egyes lépéseket követni tudjam az aktuális fejlesztési lépések során, illetve hogy a fejlesztés folyamán feltehessem a kérdéseimet, ahol esetleg nem értettem a javaslatot. Erre a ChatGPT ingyenesen elérhető modelljét használtam fel. + +Igyekeztem egy kontextusban kezelni a teljes applikációt. +Ennek oka az egységes kontextusra való törekvés, hogy megspóroljam a kontextusváltáskori hatalmas promptokat, illetve a váltásból történő inkompatibilitást. + +## Kiindulás és Architektúra + +Igyekeztem egy minél egyszerűbb és általánosabb kezdőprompttal indítani, hogy apró részfeladatok megoldása helyett az LLM egy nagyobb terjedelmű tervet tudjon kidolgozni és abból származtatni az alfeladatokat. + +A következő prompttal indítottam a kontextust: +```txt +Szeretnék készíteni egy Snippet manager applikációt, ahol +- az általam gyakran használt snippet-eket tudom kategorizálni +- tárolni +- paraméterezni +- keresni gyorsbillentyűkkel +sőt akár integrálni is VSCode-al. +Milyen megvalósítási architektúrát, eszközöket javasolsz? +``` + +A válaszban egy aránylag egyértelmű és tálátható architektúrális tervet vázolt fel a modell + +```txt +... + ┌──────────────────────────┐ + │ UI / Desktop │ + │ React + TypeScript │ + │ │ + │ Search / Editor / Tags │ + │ Variables / Categories │ + └────────────┬─────────────┘ + │ + Application Layer + │ + ┌────────────▼─────────────┐ + │ Core Domain │ + │ │ + │ Snippet │ + │ Category / Tag │ + │ Variable / Parameter │ + │ Templates │ + │ Search │ + └────────────┬─────────────┘ + │ + ┌──────────────────┼──────────────────┐ + │ │ │ + ┌──────▼──────┐ ┌──────▼──────┐ ┌──────▼──────┐ + │ Persistence │ │ Integrations│ │ Import / │ + │ │ │ │ │ Export │ + │ SQLite │ │ VS Code │ │ JSON/YAML │ + │ Repository │ │ Git │ │ Markdown │ + └─────────────┘ │ Clipboard │ └─────────────┘ + └─────────────┘ +... +``` +A magasszintű leírásra a következő válaszokat kaptam. + +Megtervezte a `Snippet` osztályt és hozott példát annak sémájára: + +```txt +... +Snippet { + id: string + title: string + description?: string + + content: string + + language?: string +... + +Például egy snippet: + +const {{name}} = await fetch("{{url}}", { + method: "{{method}}" +}); + +``` + +Megtervezte magas szinten a template nyelvet +```txt +... +function {{functionName}}({{parameters}}) { + {{body}} +} +... +``` + +Az adattárolásnak SQLite-ot ajánlott, a futtatáshoz Tauri-t, a megjelenítéshez pedig Reactot. +Továbbá a keresés mikéntjére is hozott ötleteket. +A végén pedig egy összefoglaló roadmap-et kaptam, hogy mit milyen sorrendben lenne érdemes lefejleszteni:: +```txt + ┌──────────────┐ + │ React │ + │ Desktop │ + └──────┬───────┘ + │ + ┌──────▼───────┐ + │ Application │ + │ Core │ + └──────┬───────┘ + │ + ┌───────────────┼────────────────┐ + │ │ │ + ┌────▼────┐ ┌─────▼─────┐ ┌────▼────┐ + │ SQLite │ │ Template │ │ Search │ + │ │ │ Engine │ │ FTS5 │ + └─────────┘ └───────────┘ └─────────┘ + ▲ + │ + ┌─────────┴──────────┐ + │ │ + ┌──────▼──────┐ ┌──────▼──────┐ + │ VS Code │ │ CLI │ + │ Extension │ │ │ + └─────────────┘ └─────────────┘ +``` + +Összességében tehát egy *brainstorm* eredményét állította elő nekem, ahol az egyes modulok, azok eszközei, illetve az egyes funkciókra példák szerepeltek. A tervekkel elégedett voltam, így el is kezdtem generáltatni vele a kódot. + +## Környezet kialakítása + +Az első lépésben a fejlesztői környezet kialakításában segített. Ehhez lépésről lépésre végigvezetett, hogy melyik eszközöket honnan és hogyan tudom feltelepíteni, hogy ez működhessen, illetve PowerShell-kódokkal elkészítette a mappastruktúrát is. +Meglehetősen kevés hibával sikerült is megadnia. + +A válaszok ebben az esetben főként npm install és mkdir parancsokból álltak: +```txt +npx shadcn@latest add button +npx shadcn@latest add input +npx shadcn@latest add textarea +... +``` + +## Core Funkcionalitás + +A következőkben nekilátott az alapfunkcionalitás implementálásának, amelyre a következőkben a funkciók épülnek majd. +Itt egymás alatt `.tsx` fájlokat készített el, ahol csak annyit fűzött főként hozzá, hogy mit, illetve hova hozzam azt létre. +```txt +... +6. Header + +src/components/layout/Header.tsx + +import { Search, Plus } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; + + +interface HeaderProps { + onCreateSnippet?: () => void; +} + + +export function Header({ onCreateSnippet }: HeaderProps) { + return ( +
Result, String> { + let mut statement = connection + .prepare( + " + SELECT + id, +``` + +Ez meglehetősen gyors volt, viszont sajnos a Rust-alapú kódbázishoz egyáltalán nem értettem. + +Végül el kellett készíteni a VS Code extensiont, amely szintén meglehetősen egyszerű volt. Itt egyedül a template-ek esetén volt némi probléma, de a tünetek alapján gyorsan ki tudta javítani. + +Előfordult, hogy kisebb módosításokat kellett végezni a már korábbi TypeScript-kódbázisban, azonban érdekes módon, annak ellenére, hogy még mindig ugyanazon kontextusban dolgoztam, a modell emlékezete romlott a korábbi kódbázissal kapcsolatban, pl.: az SQLite-táblát más sémával akarta elérni, mint korábban használta. +Itt, miután bepromptoltam a korábbi fájlokat, a modell képes volt helyesen kiegészíteni azokat. + +A kész extension a következő képpen működik: +1. `Ctrl + P` > `Snippet Manager` + + ![alt text](image-3.png) +2. Rákerseni majd kiválasztani a megfelelő snippetet + + ![alt text](image-4.png) +3. Kitölteni a template elemeket, amelyek között `tab`-al lehet lépkedni + ![alt text](image-5.png) + + + + +## Tanulságok össszefoglalva + +* **Nehezíti a kódbázis megértését.** + + Ha a kódolást az AI-ra szeretnénk kiszervezni, akkor jobban járunk kódoló ágensek használatával, amelyek hatékonyabbak és pontosabbak, ebben az esetben azonban tisztában kell lennünk azzal, hogy egy közel teljesen ismeretlen kódbázissal fogunk szemben állni. + + Ugyanakkor, ha csupán debugolás céljából vagy kisebb javításokra, minimális fejlesztésekre szeretnénk felhasználni, nagyon résen kell lennünk és végig kell elemeznünk a kapott megoldást, különben könnyen elveszítjük a kontrollt a saját kódbázisunk felett. +* **Nem véd a refaktorálás ellen.** + + Kezdetben elegánsnak tűnő, egyszerű kódokat generált, azonban ahogyan jöttek be az új funkciók és javultak meg az egyes hibák, a kód is egyre inkább átláthatatlanná vált. Sok ilyen lépést követve az AI által generált kód is spagettikóddá válik. Erre megoldás tud lenni a refaktorálás. Ezt a lépést szintén végezheti az AI, viszont a hatékony eredmény érdekében egy olyan modellel vagy ágenssel érdemes dolgozni, amelynek rálátása van a teljes kódázisra és pontos módosításokat tud javasolni. +* **A mai modellek kontextusablaka hatalmas, azonos doménen belül.** + + A teljes alkalmazást csupán egy chatablak igénybevételével fejlesztettem le, közel 60 prompt segítségével, amely tartalmazza a debugolást is. Ez azonban csupán azért volt lehetséges, mivel ugyanazon a doménen belül maradtam. A kész alkalmazást követően, az extension fejlesztésekor, a domén változása esetén már megkérdőjelezhető pontossággal emlékezett vissza a korábbi részekre. +* **Képes elveszni a részletekben és nem kért funkcionalitást javasolni.** + + A funkciók fejlesztése során olyan egyebekkel próbálta kiegészíteni a kódot, amelyek nem voltak a kezdeti scope-ban. Számomra a kész termék jelentette az értéket, számára viszont a funkciók felhalmozása és a kontextus duzzasztása. (Gyakran észrevehető, hogy a modell nem egzakt megoldásokkal vagy nem kért extrákkal válaszol, amelynek oka egyesek szerint a felhasznált token-ek és ezzek a számla duzzasztására irányul a tervezők részéről.) Ennek következtében gyakran vissza kell téríteni a modellt a kiinduló célokra. \ No newline at end of file