Az építkezés elindítása – Next.js skeleton és az első eredmények
Ez a lecke azt mutatja be, hogyan indul el a tényleges alkalmazásépítés bypass módban, mit csinál a rendszer a háttérben, milyen környezeti függőségek merülnek fel, és hogyan néz ki az elkészült landing oldal dizájnja. Megismered, hogy miért nem lesz egyből kész minden, és mire számíthatsz egy ilyen komplexebb, AI-vezérelt fejlesztési folyamat során.
Az építkezés elindítása bypass módban
A tervünk már megvan, így az egyetlen feladatunk az, hogy rányomjunk az építés gombra bypass módban. Fontos azonban előre tudni, hogy az applikáció nem lesz egyből kész – ez nem meglepetés, hanem a folyamat természetes velejárója. Ennek oka, hogy más, külső szoftverek is szükségesek lesznek a teljes működéshez, de a lényeg az, hogy elindítsuk az építkezést, és megnézzük, mi történik közben.
A Next.js projekt skeleton felállítása
Az építés elindítása után a rendszer azonnal nekiáll egy úgynevezett Next.js projekt skeleton felállításának. Ez az alap projektváz, amire az egész alkalmazás épülni fog.
Az első kérdés: Node.js és PNPM telepítése
Szinte azonnal megjelenik az első kérdés: Node.js és PNPM szükséges – hogyan telepítsük ezeket?
A lényeg: ezeket nem kell mélyen érteni ahhoz, hogy haladj. Nem kell tudni, hogy pontosan mi mit csinál – de ha érdekel a téma és használni fogod, mindig érdemes mellékkereséseket végezni, hogy megértsd, mi is történik a háttérben.
Fontos gondolat ezzel kapcsolatban:
- Minél több tudásod van a fejlesztői környezetekről, a különböző programozási nyelvekről és a csomagkezelőkről, annál jobban fogod érteni, hogy mit ír neked a rendszer.
- Több megoldási lehetőséged is lesz, ha valami nem működik.
- Ez egy több hónapos folyamat – senki sem érti meg egyből az egészet, és ez teljesen rendben van.
Jogosultsági hiba a Homebrew-val
A telepítés során megjelenik egy jogosultsági hiba a Homebrew-val kapcsolatban. Ez egy tipikus környezeti probléma – ilyen és hasonló akadályok előfordulhatnak, különösen akkor, ha egy gépen még nincsenek feltelepítve a szükséges eszközök. A rendszer megpróbálja ezeket maga megoldani, és szépen felépíti a szükséges környezeti elemeket.
A fájlrendszer és a munka nyomon követése
A mappastruktúra megjelenítése
Érdemes a kis mappánkat látható helyre kirakni, mert folyamatosan jönnek bele az újabbnál újabb fájlok. Így egy kvázi fájlkezelő nézetet kapunk, ahol nyomon követhető, hogy mi épül fel.
Mit látunk a háttérben?
Ahogy az építkezés halad, egyre több és furcsább nevű mappa és fájl jelenik meg az alap mappában. Ha valaki nem fejlesztő, ezek a nevek teljesen idegennek tűnhetnek – és ez teljesen normális.
Nem azt mondom, hogy ez így van jól, de így is lehet közel teljes értékű munkát végezni.
Érdemes figyelni a futtatott parancsokat is, amelyeket a rendszer visszajelez. Ezekből ugyan sokszor nem sokat lehet érteni, de:
- Folyamatosan érdemes utánaolvasni az ismeretlen fogalmaknak.
- Ez egy folyamatos fejlődési folyamat – nem lehet mindent egyszerre megérteni.
- Ha valamilyen nyelvet vagy környezetet nem tanulsz meg a nulláról, csak kis részleteket fogsz érteni belőle, de ezek a kis részletek is segítenek a jövőben.
Az első vizuális eredmény: a landing oldal
Screenshot és dizájn értékelés
Hamarosan megjelenik az első screenshot – és az eredmény meglepően jó. Mobil nézetben már rögtön jól néz ki az oldal. A rendszer teszteli a különböző nézeteket is, és az eredmény alapján egyértelműen látszik, hogy a dizájn brutálisan jó lett.
Ilyen dizájnt dizájnerként sem lenne egyszerű elkészíteni – és ez fotók nélkül is megállja a helyét.
A landing oldal elemei
Az elkészült oldal egyelőre egy landing oldal – hasonlóan ahhoz, mintha egy sima HTML oldalt raktunk volna össze, csak sokkal szebben. Az oldal tartalmaz:
- Logót
- Bejelentkezés és regisztráció gombot
- Főcímet és alcímet
- Kártyás dizájnelemeket lekerekített formákkal és ikonokkal
- Kis animációkat
- Jó betűtípust és mintatörést a szövegben
A szövegek egyelőre placeholder (dummy) szövegek, mivel semmit nem adtunk meg konkrétan – de a vizuális megjelenés ettől függetlenül nagyon erős.
A Supabase infrastruktúra megírása
Miközben a landing oldalt nézzük, a rendszer már dolgozik a következő fázison: megírja a Supabase infrastruktúrát. Ehhez egyelőre még nem kell megadni a hitelesítő adatokat (credential-öket) – azt majd egy külön lépésben fogjuk megcsinálni, amikor létrehozzuk a Supabase projektet.
A rendszer eközben a következőket készíti el:
- Server action-ök
- Auth oldalak
- Autentikációs logika
Közben az oldalt nem lehet nézegetni, mert aktívan dolgozik rajta a rendszer.
A README fájl
Ha a mappában lévő README fájlra kattintunk, elvileg szépen olvasható dokumentációt kellene látnunk – de ez még nincs teljesen kész ebben a fázisban.
A folyamat összefoglalása és a hátramaradt feladatok
Amit a rendszer elvégzett
A rendszer a különböző fázisokat, amelyeket maga alakított ki, szépen végigjárta. Le is írja, hogy pontosan mit csinált – van, ami könnyen érthető, van, ami kevésbé. Az egész folyamat körülbelül 20 perc alatt zajlott le, ami fejlesztői munkával nagyon sok időt vett volna igénybe.
Ami hátramaradt
Egy komplexebb projektnél mindig maradnak olyan részek, amelyeket nekünk kell elvégeznünk, mert a rendszer maga nem tudja megcsinálni. Ezek jellemzően külső szoftverekhez kapcsolódó beállítások. Ebben a projektben a következők maradtak hátra:
- Supabase projekt létrehozása (ezt ingyenesen fogjuk megcsinálni)
- Egyéb külső integrációk beállítása
Ezeket külön leckékben fogjuk részletesen megnézni.
A regisztráció tesztelése
Mit látunk az elkészült oldalon?
Az oldal frissítése után megnézhetjük az elkészült dizájnt. Az elemek nem képként, hanem valódi ikonokkal és alakzatokkal vannak megcsinálva. Kiemelendő elemek:
- Jó alcímek
- Kis animációk
- Egyszerű, de hatásos kártyás dizájn
- Kiváló betűtípus-választás
- Mintatörés a szövegben
> Kezdésnek ritkán van, hogy ennyire jól létrejöjjön valami.
A regisztráció kipróbálása
Megpróbáljuk a regisztrációs funkciót is – beírunk egy tesztes e-mail címet () és egy jelszót, majd megnyomjuk a regisztráció gombot. Az eredmény: hiba jelenik meg, ami várható volt, hiszen ez a rész még nincs kész – ehhez kell majd a Supabase integráció.
Ha ilyen helyzetbe kerülsz a saját projekted építése közben, a megoldás egyszerű:
- Készíts egy screenshotot a hibáról.
- Küldd el, és magyarázatot kapsz, hogy hogyan lehet kijavítani.
Mit tanultunk és mi következik?
Az építkezés elindítása után kb. 20 perc alatt egy komplett fájlrendszer és egy vizuálisan nagyon erős landing oldal jött létre. Ez fejlesztői munkával sokkal több időt vett volna igénybe. Ugyanakkor fontos látni, hogy ez még nem egy azonnal kiadható szoftver – sok részlete van még, amit meg kell oldani.
A következő leckékben:
- Megnézzük a hátramaradt feladatokat egyenként.
- Átnézzük azokat a területeket, amelyekkel még foglalkoznunk kell.
- Megértjük, hogy egy átlagos szoftverfejlesztési folyamatban mik szoktak előjönni.
A cél nem feltétlenül az, hogy ez a konkrét szoftver tökéletes legyen, hanem hogy a hátramaradt feladatokon keresztül ötleteket és megközelítéseket adj ahhoz, hogyan érdemes ezekbe belemenni – és mit tapasztalhatsz te is, amikor saját projektet építesz.