Může fungovat aplikace napsaná přes vibecode v reálném provozu? Zkusili jsme to za vás

Vibecode (neboli programování pomocí přirozeného jazyka a AI) už jsme v našem blogu několikrát zmínili. Naposledy jsme testovali nástroje pro vytváření mobilních aplikací v článku „Jak vytvořit mobilní aplikaci zdarma? Využijte tyto chytré nástroje“. Zkoušeli jsme si napromptovat počítadlo vypitých káv. Tentokrát pro vás mám ale příklad z reálného světa – navibecodovali jsme systém půjčovny fotoaparátů.

Tento článek je hlavně pro ty z vás, kteří přemýšlíte nad vývojem vlastní aplikace nebo třeba modernizace vašeho systému. Stále ale platí, že z generativní AI získáte jen tak dobré výstupy, jako jí poskytnete dobré vstupy.

Pojďme ale popořadě k našemu příkladu. Systém pro půjčovnu (čehokoliv) je poměrně specifická záležitost, protože – i když by se to tak mohlo zdát – nejedná se o klasický prodej jako v prodejně nebo v eshopu a je tak mnohem složitější se ‚napasovat‘ do krabicového řešení. V našem příkladě se jedná o půjčovnu instantních fotoaparátů, které si získaly oblibu v posledních letech zejména na svatbách nebo firemních večírcích. V tomto případě tak kromě vypůjčení samotného fotoaparátu firma řeší i prodej filmů nebo třeba dopravu na adresu zákazníka a zpět.

Zkoumejte procesy

Při vibevývoji rezervačního systému jsem začínal podobně jako začínají projekty v Koale – důkladnou analýzou procesu. V praxi to znamenalo projít celý koloběh rezervace ze dvou pohledů – zákazníka a pracovníka, který výpůjčky připravuje. Tuto fázi doporučuji nepodcenit, protože – stejně jako u klasického vývoje – se vám později může prodražit. 

Během zkoumání a zkoušení jsem například zjistil, že na expedici je potřeba vždy pořídit dvě fotografie krabice s výpůjčkou. Jednu pro případ kontroly, že zákazník obdržel vše co má (objednaný foťák, filmy, ale třeba i návod na použití a náhradní baterie) a druhou pro případ ztráty zásilky dopravcem, který vyžaduje snímek s nalepeným štítkem. Nebo vyvstala potřeba ze strany zákazníka si opakovaně stáhnout zpětný zasílací štítek. To vše zjistíte jen tehdy, věnujete-li čas důkladné přípravě.

Jak postupovat při vibevývoji

Vyzkoušel jsem několik nástrojů, abyste vy už nemuseli. Vibecode nástroje zažívají stejný boom jako AI chatboti, proto se jich na trhu objevilo opravdu hodně. Namátkou vybírám známé Lovable, Replit, Bolt.new, v0 nebo české Macaly a akcelerátorem Y Combinator podpořený Floot. Tím výčet ale samozřejmě nekončí.

Na začátku se zřejmě nevyhnete spálení několika kreditů za obyčejné vyzkoušení daného nástroje. Spousta z těchto platforem ale nabízí do startu nějaké kredity, které na osahání obvykle stačí.

Než se pustíte do „vývoje“ prvním promptem, je dobré ho zkonzultovat s jiným LLM. Já jsem stavěl úvodní prompt tak, aby nástroj získal co možná nejširší kontext toho, jak má finální aplikace vypadat. Nezacházel jsem do příliš velkého detailu, ale zároveň jsem jasně popsal strukturu.

Vývoj rozsáhlého rezervačního systému s prezentačním webem zabral přes dva týdny čistého času. Po několika měsících je na něm stále dost práce a zkonzumoval přes 300 tisíc tokenů v hodnotě přes $400.

První úpravy

Jakmile vám nástroj vytvoří první verzi požadované aplikace, nevěšte hlavu. Obvykle to nebývá příliš kvalitní výsledek, ale pouze wow efekt. Postupujte organizovaně, ne chaoticky. Pokud vám nefunguje tlačítko Zpět, vyřešíte to později. (Tyto bugy si někam pište.) Pokračujte po jednotlivých sekcích vaší aplikace. Já jsem po prvním promptu začal pracovat na správě jednotlivých fotoaparátů. Jakmile byly funkční všechny formuláře pro správu fotoaparátů, pokračoval jsem na sekci správy produktů. A tak dále. Až jsem se dostal do fáze, že jsem mohl ladit design a trochu sáhnout na UX/UI.

Prompty pro velké sekce popisujte stejným způsobem jako úvodní prompt. Nebojte se natáhnout příkaz klidně na 4000 znaků. Využijte vestavěných „discuss“ módů a připojte za váš prompt kouzelnou větu: „Ask me the questions you need to ask me in order to fully understand what I want from this feature and how I envision it.“ (volně přeloženo – zeptej se mě na co potřebuješ, abys plně pochopil, čeho chci dosáhnout).

Na druhou stranu prompty menších úprav udržujte stručné a maximálně konkrétní. Pokud vám nefunguje tlačítko Tisknout fakturu, napište: Tlačítko Tisknout fakturu nefunguje, neotevře se dialogové okno pro tisk. Oprav pouze související kód. Model pak zbytečně nepřemýšlí, jak vám aplikaci „refaktorovat“ nebo designově upravit vlastním přičiněním.

Napojení na třetí strany

Poslední verze platforem už umí dohledávat informace z internetu. Pokud tedy potřebujete – jako já – napojit například Fakturoid, dejte do promptu i odkaz na API dokumentaci a přesně popište co se má stát. Toto už vyžaduje trochu orientace, ale jistě si na konzultaci můžete vzít třeba ChatGPT.

Některé platformy už mají integrace dokonce vestavěné. Můžete tak na pár kliknutí propojit služby jako Stripe, Supabase nebo třeba Resend. Na výslunní se samozřejmě dostávají i různé integrátory, například PicaOS.

Pozor, u napojení je potřeba dbát na bezpečnost. Veškeré autentizační tokeny, kódy a klíče uchovávejte výhradně v tzv. variables. Nikdy nedávejte klíče a tokeny přímo do promptovacího okna.

Než to pustíte na produkci

Jakmile se do vytváření vibecode aplikace pustíte, pravděpodobně vám to začne brát nejen čas, ale i tokeny. Musíte mít ale stále na paměti, že se jedná o vygenerovaný kód, který je předpovězený. Neprošel žádným programátorem, a tak je dost pravděpodobné, že bude mít dost bugů, bezpečnostní rizik a nebo dokonce děr.

Já jsem si toho při vytváření systému byl vědom, přeci jen u každé rezervace uchováváte spoustu cenných údajů. Začněte tedy tak, že se zeptáte například Gemini, jaké jsou nejčastější bezpečnostní chyby ve vibecode nástrojích. Potom výsledek vezměte a do vibecode nástroje napište, že chcete vyřešit všechna tato bezpečnostní rizika.

A potom kód vezměte a nechte ho projít nějakého programátora. Nebude vás mít v lásce, ale vy budete mít klidnější spaní.

Když toto neuděláte, riskujete, že se vám do systému někdo dostane. A to kolikrát i třeba nechtěně. A věřte nám, v Koale už jsme takové vibecode projekty viděli.

Závěrem je potřeba dodat, že než se systém půjčovny pustil do ostrého provozu, testoval se paralelně se starým systémem, aby se odhalily případné nedostatky. Tak byste to měli udělat i vy, i když časový rámec od nápadu po launch je lákavě krátký.

Disclaimer: Tento článek je především pro uživatele-neprogramátory. Zároveň je psán pro úplné začátečníky a není zaručeným návodem na úspěch. Autor nenese odpovědnost za špatné výsledky vibecode nástrojů.