A Habyt alkalmazás tesztelése, iterálása és élesítése
Ez a lecke a Habyt szoftver első verziójának tesztelési és finomítási folyamatát mutatja be, egészen az éles Vercel-deployig. Megvizsgáljuk, hogyan érdemes egy elkészült alkalmazást végigtesztelni, milyen UX-hibákat és szövegproblémákat érdemes észrevenni, hogyan adjunk visszajelzést a Claude AI-nak több fejlesztési ötlettel egyszerre, és végül hogyan tegyük elérhetővé a szoftvert mások számára is.
Az alkalmazás első áttekintése
A tesztelés megközelítése
A Habyt szoftver első verziója nagyjából elkészült. Mielőtt élesítjük, érdemes végigtesztelni az alkalmazást úgy, ahogy egy normál felhasználó tenné. A Claude AI-t is megkérdezzük, hogy hogyan teszteljük az appot, és az alábbi szempontokat javasolja:
- Meglévő tesztfiókkal vagy saját fiókkal a teljes flow végigpróbálása
- Mobilon is ellenőrizni az alkalmazást
- Supabase Confirmation kikapcsolásának ajánlása (a regisztrációs megerősítő e-mail folyamathoz kapcsolódóan)
Tipp: Ha egyszerre szeretnéd látni a kódszerkesztőt és a böngészőben futó alkalmazást, mindenképpen ajánlott a két monitor használata.
Szövegek és marketing tartalom átvizsgálása
Az első dolog, ami szemet szúr, az alkalmazás szövegezése. Bár a lecke nem kizárólag szövegírásról szól, néhány nyilvánvalóan javítandó helyet érdemes megjelölni.
Példa – főoldal szlogen:
Az eredeti szöveg: „Tartsd a jó szokásaidat és hagyd el a rosszat” – ez magyarul kissé természetellenes, ráadásul a „rossz” szó más betűtípussal jelenik meg, mint a többi szó. A javasolt átírás valami ilyesmi legyen: „Tartsd meg a jó szokásaidat, hagyd el a rosszakat” – a pontos megfogalmazás másodlagos, a lényeg, hogy a szöveg természetesebben hangozzon magyarul.
Példa – alcím szöveg:
A „Privát habyt tracker” felirat szintén átírásra szorul. A javasolt változat: „Privát szokáskövető – ahol a pipákból igazi szokások születnek” – vagy valami hasonló, magyarosabb megfogalmazás.
Fontos megjegyzés a szövegszerkesztésről: A Claude preview módban is képes szövegeket módosítani – sőt, ott talán még kényelmesebb, mert közvetlenül rá lehet kattintani a szerkeszteni kívánt elemre, kijelölni, és utasítást adni a javításra.
Funkcionális hibák és UX-problémák azonosítása
Regisztrációs folyamat tesztelése
Létrehozunk egy új fiókot (a „vibe coder” névvel), hogy meggyőződjünk arról, a regisztráció megfelelően működik-e.
Azonosított hiba – sikeres regisztráció visszajelzése:
A sikeres regisztrációt jelző üzenet piros színnel jelenik meg, holott a piros általában hibát jelöl. Ennek oka valószínűleg az, hogy az alkalmazás alapszíne zöld, és a rendszer ehhez képest választott kontrasztszínt. Ezt mindenképpen át kell írni valamilyen pozitív, zöld vagy más sikert jelző színre.
A regisztráció után a Supabase küld egy megerősítő e-mailt – ezt is érdemes majd testre szabni, mivel egy valódi szoftvernél az angol nyelvű alapszövegeket magyarra kell fordítani. Ez jól mutatja, hogy egy igazi, éles szoftver elkészítése lényegesen több munkával jár, mint egy prototípusé.
Szokás hozzáadásának tesztelése és UX-megfigyelések
Miután bejelentkezünk, az első dolog, ami feltűnik: az üres dashboard nem vezeti a felhasználót sehova – nincs semmi, ami megmutatná, mit kellene csinálni. Ez vezet el az onboarding ötletéhez (lásd következő fejezet).
Azonosított UX-hiba – átirányítás szokás hozzáadása után:
Amikor hozzáadunk egy új szokást (pl. „Zöldség az étkezésben”), az alkalmazás azonnal átirányít a szokások listájára. Ez nem ideális, mert a felhasználó esetleg több szokást szeretne egymás után hozzáadni. A javasolt viselkedés: szokás hozzáadása után az alkalmazás maradjon a listanézeten, ne irányítson át máshova, hogy a felhasználó további szokásokat is fel tudjon venni.
Ez már UX-gondolkodást igényel – de a UX nagy részben józan parasztész, nem kell hozzá külön diploma.
Azonosított hiányosság – ikonválasztó:
Egyedi szokás létrehozásakor (pl. „Nem ittam energiaitalt”, típus: negatív) az ikonmező üres, nincs vizuális segítség. Javasolt fejlesztés: egy vizuális ikonlista megjelenítése, amelyből a felhasználó választhat az új szokás létrehozásakor.
Egy még okosabb megoldás lenne, ha a rendszer a beírt szokás neve alapján automatikusan ajánlana ikont (pl. „energiaital” → energiaitalos ikon), de ez már AI-alapú feldolgozást igényelne, és egy következő fejlesztési fázis feladata.
Fejlesztési ötletek összegyűjtése és átadása Claude-nak
Az ötletek listája
Az alkalmazás tesztelése során az alábbi fejlesztési ötletek gyűltek össze, amelyeket egyszerre adunk át a Claude AI-nak:
- Sikeres regisztráció visszajelzésének átszínezése – ne piros, hanem pozitív szín legyen
- Szokás hozzáadása után ne irányítson át – maradjon a listanézeten
- Főoldal szövegének átírása – magyarosabb, természetesebb megfogalmazás
- Onboarding flow létrehozása – friss regisztrációknak szokásprofilok felajánlása (ez a legkomplikáltabb feladat)
- Ikonlista megjelenítése egyedi szokás létrehozásakor
- Privát szokáskövető alcím átírása
Hogyan dolgozza fel Claude a több feladatot?
Amikor egyszerre több feladatot adunk meg, a Claude maga tervezi meg a végrehajtás sorrendjét – mintegy megtervezi, hogyan érdemes az egészet megcsinálni. Az egyszerűbb feladatokat (1-2-3-5-6) gyorsan elvégzi, és maga is jelzi, hogy a 4-es pont (onboarding) funkcionálisan sokkal komplikáltabb, ezért azt külön kezeli.
Megfigyelhető, hogy a Claude:
- Sorrendbe rakja a feladatokat
- Az első kettőt gyorsan elvégzi
- Közben saját maga teszteli, hogy jó-e, amit csinált
- Majd folytatja a következő feladattal
Fontos megjegyzés az iterálásról: Nem mindig a legjobb megoldás, hogy egyszerre sok funkciót adsz meg. Lehet szépen egyenként haladni, vagy előbb egy új tervezési fázist létrehozni. Nincs tökéletes megoldás – rá kell érezni, hogy mi az, amit a Claude könnyen megcsinál, és mi az, ami nehezebb.
Az onboarding flow megvalósítása
Az onboarding ötlete
Az üres dashboard problémájára a megoldás egy onboarding folyamat friss regisztrációknak. Az elképzelés:
- Az alkalmazás felajánl előre összeállított szokásprofilokat, amelyek a leggyakrabban követett szokásokat tartalmazzák
- A felhasználó célokat választhat, például:
- Leszokás (pl. cigarettáról)
- Egészségesebb életmód
- Hatékonyabb munkavégzés
- Karrierfejlesztés
- A kiválasztott profil alapján az alkalmazás automatikusan betölti a releváns szokásokat
- Az onboarding opcionális, nem kötelező
Az onboarding elkészítése
Claude létrehozza a profilokat, majd megkérdezi, hogy mehet-e a profillista, és hogy hol legyen elérhető az onboarding. A válasz: mehet, és opcionális legyen.
Az elkészült onboarding flow működése:
- Belépéskor megjelenik egy célválasztó képernyő
- A felhasználó kiválaszt legalább egy profilt
- A profil alapján az alkalmazás behúzza a javasolt szokásokat
- A felhasználó eldöntheti, hogy melyik kilenc szokással kezdjen, és kiszedhet bármit, ami nem releváns számára
Az egész folyamat nagyjából 15 perc alatt elkészült.
Az eredmények tesztelése és ellenőrzése
Végigpróbálás az összes javítással
A kész verzió tesztelésekor ellenőrizzük az összes korábban jelzett pontot:
- Onboarding: Ha nincs egyetlen szokás sem, megjelenik az indítócsomag (pl. leszokás profil), és a kiválasztott profil alapján szépen betöltődnek a szokások ✅
- Átirányítás javítása: Új szokás hozzáadásakor (pl. „Nyugodtan nyolc pohár víz”) az alkalmazás nem irányít át, hanem a listanézeten marad ✅
- Ikonlista: Egyedi szokás létrehozásakor megjelennek a választható ikonok ✅ (Megjegyzés: lehetne több ikon is, ez egy következő fejlesztési lépés)
- Szövegek átírása: A főoldal szövegei frissültek ✅
- Sikeres regisztráció színe: Átírva pozitív visszajelző színre ✅
Dizájn megjegyzés
Az új szokás hozzáadása után megjelenő visszajelzés dizájnja még nem tökéletes – a szöveg középre igazítva jobban nézne ki. Ez egy következő iteráció feladata.
Mentés és Vercel-deploy
A haladás elmentése
Miután a fejlesztések elkészültek, fontos a haladás elmentése, hogy egy következő session-ben is folytatni lehessen a munkát. Ehhez két dolgot kell tenni:
- A jelenlegi haladás elmentése – utasítás Claude-nak, hogy mentse el a session állapotát
- A fájl frissítése – az onboarding flow leírásával és a folytatáshoz szükséges iránymutatással, hogy a következő session-ben a Claude is értse, hol tartunk és mik a következő lépések
A kód közben már GitHub-ra is push-olódott – ez automatikusan megtörtént, bár nem mindig ez a legjobb megoldás, hogy minden változtatást azonnal push-ol.
Deployment Vercelen
A Vercel-deploy folyamata:
- Bejelentkezés a Vercel-be (már korábban be volt jelentkezve a másoló alkalmazás projektjéből)
- Az új projekt importálása – a habyt repository már látható a listában
- Semmit nem kell módosítani a beállításokon
- Deploy gomb megnyomása
Az alkalmazás sikeresen deployolódik, a preview betölt. Az URL-ben szereplő „habyt-7″ szám azért jelenik meg, mert valószínűleg mások is készítettek hasonló nevű projekteket a Vercelen.
Az alkalmazás mostantól éles szoftverként elérhető bárki számára, aki rendelkezik az URL-lel. Bárki tud regisztrálni és használni.
A tanultak összefoglalása és a következő lépések
Mit tanultunk a Habyt projekt során?
A Habyt szoftver fejlesztésén keresztül számos olyan területet érintettünk, amelyek korábban nem szerepeltek a kurzusban:
- Backend beállítások – a háttérben futó konfigurációk megismerése
- Supabase adatbázis – adatbázis létrehozása és kezelése
- Autentikáció – bejelentkezési rendszer megvalósítása (és a sokféle bejelentkezési lehetőség)
- Biztonság – fájl és API kulcsok kezelése
- Élesítés – Vercel-deploy, ugyanúgy mint a korábbi projekteknél
Mindegyik területnek van még sokkal mélyebb rétege, amelyet a jövőben lehet tovább tanulni.
A következő feladat
A lecke végén egy önálló feladat is elhangzik: készíts el egy hasonló szoftvert, és próbáld ki az összes tanult eszközt és összekötést – mert a tudás csak gyakorlással mélyül el. Elkészítheted a Habyt alkalmazást, vagy megvalósíthatod a saját ötletedet.
A lecke megmutatta, hogy néhány prompt segítségével egy jól kinéző, viszonylag jól működő alkalmazás hozható létre, és az iterálási folyamat – a teszteléstől a visszajelzésen át az élesítésig – hogyan néz ki a gyakorlatban. Az itt megszerzett tudással – backend, adatbázis, autentikáció, biztonság, deploy – már ténylegesen létre lehet hozni saját alkalmazásokat, és olyan készségeket lehet felépíteni, amelyek komoly piaci értékkel bírnak.