A MIPRO rovatban folyamatosan keressük azokat az eszközöket, amikkel a kisvállalkozók is felvehetik a versenyt a nagyokkal. Sokáig úgy tűnt, hogy egy saját webes alkalmazás vagy szoftver fejlesztése milliókba kerül. A Google azonban csendben piacra dobott két eszközt, amelyek teljesen ingyenessé és fájdalommentessé teszik ezt a folyamatot. Bemutatkozik a Google Stitch és a Google AI Studio párosa.
Ebben a gyakorlati útmutatóban nem csak beszélünk a technológiáról. Lépésről lépésre felépítünk egy működő webes alkalmazást. A példánk egy magyar kézműves pékség lesz, akinek szüksége van egy belső „Kenyér árkalkulátor” szoftverre, hogy a folyamatosan változó liszt- és energiaárak mellett is pontosan tudja számolni a haszonkulcsát. Lássuk, hogyan készül el ez a program programozói tudás nélkül.
1. lépés: A látványterv elkészítése a Google Stitch segítségével
A folyamatot a tervezéssel kezdjük. A Google Stitch olyan, mint egy fáradhatatlan grafikus dizájner. Nem a végleges programkódot írja meg, hanem megtervezi a felületet (UI), amit később gombnyomásra életre keltünk.
A folyamat: Látogass el a stitch.withgoogle.com oldalra. A belépéshez csak a meglévő Gmail fiókodra lesz szükséged. A felületen válaszd a App (Webes alkalmazás) opciót. A modell kiválasztásánál érdemes a 3 Flash verziót választani, ami jelenleg a legokosabb elérhető modelljük.
A prompt megadása: Itt a mivagyunk.hu tapasztalatai alapján érdemes nagyon pontosnak lenni. Írd be a következőt.
„Tervezz egy webalapú árkalkulátort egy magyar kézműves pékség számára. Az alkalmazásnak legyen egy letisztult, pékséghez illő (búzasárga és meleg barna) színvilága. Szükségem van beviteli mezőkre a következőkhöz liszt ára, élesztő ára, energia (rezsi) költség, és a pék óradíja. Alul legyen egy nagy 'Profit Számítása' gomb, és egy eredménykijelző doboz.”
Kattints a Generate gombra. A Stitch másodpercek alatt rajzol neked egy komplett, professzionális kinézetű kezelőfelületet. Ha nem tetszik, a Variations gombbal kérhetsz újratervezést.
2. lépés: A dizájn életre keltése a Google AI Studio-ban
A Stitch megrajzolta a képet, de a gombok még nem működnek. Most jön a varázslat. Átküldjük a képet a kódoló robotnak.
A folyamat: A Stitch felületén, ha elégedett vagy a tervvel, kattints a jobb felső sarokban található Export gombra. A legördülő menüből válaszd a Build with AI Studio lehetőséget.
A rendszer automatikusan átirányít a Google AI Studio felületére. Beemeli a Stitch által rajzolt képeket, és felkészül a kódolásra. Itt érdemes az eredeti promptot újra bemásolni a szövegdobozba, hogy az AI Studio is értse a kontextust.
Kattints a Build gombra.
Ekkor a háttérben a Google nyelvi modellje elkezdi megírni a HTML, CSS és JavaScript kódokat. Te ebből semmit nem kell, hogy érts. Csak figyeled, ahogy a képernyőn sorra épül fel az alkalmazásod.
3. lépés: Tesztelés és finomhangolás
Amikor az AI Studio befejezte a munkát, ez általában 1-2 perc, a jobb oldali panelen megjelenik a működő alkalmazásod előnézete.
Teszteld le: Írj be fiktív számokat. Liszt ára 300 Ft, Energia 150 Ft, Óradíj 4000 Ft. Nyomd meg a számolás gombot. Ha a rendszer helyesen adja ki az eredményt, nyert ügyed van.
Módosítások: Ha valamit változtatni szeretnél, nem kell a kódba belenyúlnod. Egyszerűen írj egy új promptot a chat ablakba. Például:
„A Profit számítása gomb feliratát változtasd meg arra, hogy Kenyér árának kalkulálása, és a gomb színe legyen sötétebb barna.”
Az AI Studio azonnal végrehajtja a módosítást a kódon.
4. lépés: Az alkalmazás publikálása
A szoftvered kész, de jelenleg csak a te böngésződben létezik. Ahhoz, hogy a pékmestered a telefonján is tudja használni a pékségben, fel kell töltened az internetre. A Google ezt is megoldja egy kattintással.
A folyamat: Keresd meg a Deploy App (Alkalmazás publikálása) gombot. A rendszer megkérdezi, melyik Google Cloud projekthez szeretnéd csatolni. Kattints a Create Project (Új projekt létrehozása) gombra. Nevezd el a projektet (például Pék-Kalkulátor). A rendszer kérni fogja a számlázási adatok beállítását (Setup Billing). Ettől nem kell megijedni. A Google Cloud alap szintű használata ingyenes, csak a visszaélések elkerülése végett kérik a kártyaadatokat. Pénzt nem fognak levonni.
Kattints a Finish Setup gombra.
Néhány perc múlva megkapod a saját, egyedi URL címedet. Ezt a linket elküldheted a munkatársaidnak, és azonnal használhatják a te saját, egyedi fejlesztésű szoftveredet. Később, ha komolyabbra fordul a dolog, a Google Cloud felületén saját domain nevet (például pek-kalkulator.hu) is kapcsolhatsz hozzá.
A szoftverfejlesztés demokratizálódása
Ami régen hónapokig tartó egyeztetést, drága programozókat és dizájnereket igényelt, az ma egy délutáni projekt a Google eszközeivel. A Stitch és az AI Studio párosa bizonyítja, hogy a mesterséges intelligencia nem elveszi a munkát, hanem képessé tesz minket arra, hogy megvalósítsuk az ötleteinket. Legyen szó egy pékség belső kalkulátoráról vagy a következő nagy startup ötletről, a technikai akadályok elhárultak.
