Építsd meg MI-vel az első hasznos alkalmazásodat

Lépés 1: Írd le a problémát a saját szavaiddal

Vásárolni szinte mindenki szokott, ezért a bevásárlólista tökéletes első projekt. Nem kell értened a programozáshoz ahhoz, hogy eldöntsd, működik-e egy bevásárlólista: beírod a kenyeret, a tejet és a tojást, látod a végösszeget, és vásárlás közben kipipálod a tételeket. Az eredményt már ezen a héten tényleg használhatod.

Mielőtt bármilyen MI-eszközt megnyitnál, fejezd be papíron vagy egy jegyzetben ezt a három mondatot. Ez az egész könyv legfontosabb programozói készsége: egy kívánságot konkrét szabályokká alakítani.

1. Fel kell írnom… (például: minden tételt, hány darab kell belőle és egy darab árát).
2. Azt akarom, hogy a program kiszámolja… (például: minden sor árát és a teljes bevásárlás végösszegét).
3. Abból fogom tudni, hogy a program működik, hogy… (például: két tétel darabonként 25 Ft-ért 50 Ft-ot mutat, és egy tétel kipipálása nem változtat a végösszegen).

Lépés 2: Építsd meg az első kis változatot

Az első változat egyetlen fájl, amely a webböngésződben nyílik meg. Nem kell fejlesztőkörnyezetet telepítened, nincs szerver és nincs bejelentkezés. Másold be az alábbi promptot az MI-asszisztensedbe (Claude, ChatGPT vagy hasonló) pontosan úgy, ahogy van.

Segíts megépíteni az első egyszerű alkalmazásomat. Teljesen kezdő vagyok.

Készíts egy bevásárlólistát egyetlen, bevasarlas.html nevű fájlban, amelyet meg tudok nyitni a webböngészőmben. Minden stílust és az összes JavaScriptet tedd ebbe az egy fájlba, külső könyvtárak nélkül.

Szeretném megadni a tétel nevét, a mennyiséget és egy darab árát. Egy gombbal hozzáadom a tételt a listához. Mutasd minden sor árát, alul pedig a teljes bevásárlás végösszegét. Tegyél lehetővé tétel törlését és megvásároltként való megjelölését. Ha egy tételt megvásároltnak jelölök, az nem változtathat a végösszegen.

Utasítsd el az üres nevet, az érvénytelen számokat, a negatív árat és a nulla vagy annál kisebb mennyiséget. Az árban fogadd el a tizedespontot és a tizedesvesszőt is.

Először röviden magyarázd el a tervet. Aztán írd meg a teljes kódot, és add meg a fájl mentésének és megnyitásának pontos lépéseit. Egyelőre ne adj hozzá más funkciót.

1. Másold ki a kódot. Használd az MI válaszában lévő másolás gombot, hogy a teljes kódot megkapd, az első sortól az utolsóig.
2. Mentsd el bevasarlas.html néven. Nyiss meg egy egyszerű szövegszerkesztőt (Windowson a Notepadot, Macen a TextEditet egyszerű szöveges módban), illeszd be a kódot, és mentsd el bevasarlas.html néven. Fájltípusnak a „Minden fájl” lehetőséget válaszd, ne a „Szöveges dokumentum”-ot.
3. Nyisd meg a böngészőben. Kattints duplán a fájlra, vagy húzd be egy böngészőablakba. A bevásárlólistádat kell látnod, nem egy kóddal teli oldalt.

Lépés 3: Ellenőrizd, hogy nem csak egy szép kép

Egy jól kinéző alkalmazás még nem ugyanaz, mint egy működő alkalmazás. Menj végig ezen a táblázaton soronként, és vesd össze, amit látsz, a helyes eredménnyel. Ez az első igazi teszted.

Ha valamelyik sor nem teljesül, még ne javítsd a kódot kézzel. Mondd meg az MI-nek pontosan, melyik sor hibázott, mit írtál be, és mit láttál helyette, és kérd meg, hogy csak ezt az egy problémát javítsa ki.

Lépés 4: Egy módosítást végezz el magad

Most végezd el az első módosítást úgy, hogy nem az MI írja meg helyetted. Kérdezd meg az MI-t: „Hol van a kódomban az alkalmazás címsora?” Egy olyan sorra fog mutatni, amely nagyjából így néz ki: <h1>Bevásárlólista</h1>.

1. Keresd meg a címsort. Nyisd meg a bevasarlas.html fájlt a szövegszerkesztőben, és keresd meg azt a sort, amelyre az MI mutatott.
2. Írd át a szöveget. Cseréld le a <h1> és a </h1> közötti szavakat a saját címedre, például „Szombati bevásárlás”. A kacsacsőröket ne töröld.
3. Mentés és frissítés. Mentsd el a fájlt, menj vissza a böngészőbe, és frissítsd az oldalt. Meg kell jelennie az új címednek.

Ezután kérd meg az MI-t, hogy magyarázza el a saját fájlodat három részben, a te kódodat használva példaként. Látni fogod, hogy minden webalkalmazás ugyanabból a három rétegből épül fel:

Lépés 5: Taníts meg az alkalmazásnak valami újat

Az igazi programok apró lépésekben nőnek. Adj hozzá egy új funkciót, aztán tesztelj újra. Küldd el az MI-nek ugyanabban a beszélgetésben ezt a folytató promptot:

Adj hozzá keretet a bevásárlólistámhoz. Hadd írjam be az összeget, amennyit el akarok költeni. Mutasd, mennyi marad. Ha a végösszeg túllépi a keretet, jeleníts meg egyértelmű figyelmeztetést azzal az összeggel, amennyivel túlléptem. Minden más működjön pontosan ugyanúgy, mint eddig, és mutasd meg a teljes frissített fájlt.

Most megépítettél, futtattál, teszteltél és módosítottál egy valódi alkalmazást. Ez még nem a programozás egésze, de ez az a munkamenet, amelyet minden további leckében megismételsz: világosan leírni, az MI-vel generáltatni, a várt eredményekkel ellenőrizni, és egyszerre csak egy dolgot módosítani.