V dnešní době už pro vytvoření webu nebo aplikace nemusíte umět programovat. Tatam jsou doby, kdy to bylo potřeba. Ale stále se ještě hodí umět základy programování.
Google Play: https://play.google.com/store/apps/details?id=cz.skytrack.app
Původně jsem si chtěl jen na něčem ozkoušet vibecoding, proto jsem vybral něco mne blízkého, a to vytvoření mapy letů. Postupně jsem přidával další a další funkce, až z toho vznikla aplikace SkyTrack pro Android a rozhodl jsem se, že to vyzkouším se vším všudy - dostanu ji do Google Play, a to jako demo a placenou verzi. Výši ceny jsem nastavil jako jedno levnější pivo. S tím, že to bude buď propadák (to spíš) nebo virální senzace.
Co je vibecodování (anglicky vibecoding)? Vytváření aplikací bez programování pomocí některého z AI nástrojů. Mezi populární AI nástroje v současnosti patří Claude Code, Codex od ChatGPT, Cursor, Antigravity nebo AI Studio od Google.
AI Studio od Google jsem vybral já pro své první experimenty. Není potřeba ho nijak instalovat ani nastavovat - běží v prohlížeči. Pro tvoru aplikací dokonce nepotřebujete ani prémiové předplatné. Vystačíte si se základním Google účtem. Kódoval jsem v něm hodně a na limity bezplatné verze jsem narazil výjimečně a když už, tak nepochopitelně u modelu Gemini Flash a nikoliv u lepšího Gemini Pro.
Umělá inteligence při vibecodování je jako váš autistický brácha. Nikdy nevíš, co vymyslí. Je neúnavná, ale velmi líná. Má tendence komplexnější aplikace zjednodušovat (AI Studio), v případě chatbotů při delších skriptech (cca nad 500 řádků), vynechávat pasáže (a nenapsat to) nebo také nevyžádaně zjednodušovat.
AI Studio umí programovat v Reactu, Next.js a Angularu. Ostatní programovací jazyky nezvládá/neumí jejich náhled. Naštěstí aplikace v Reactu se dá zabalit pomocí Capacitoru i pro Android / iOS. Pokud chcete HTML stránku / jakýkoliv jiný programovací jazyk, musíte sáhnout po klasickém chatbotovi nebo jiném AI nástroji.
Kód z AI Studia bývá lidsky těžko čitelný. Používá moře Tailwind tříd pro jednotlivé prvky, nespojuje je do větších celků (například jednu třídu pro tlačítko menu, pro levý sloupec, ale nechá 10 jednotlivých tříd pro jeden prvek skriptu)... Co jsem vypozoroval, CSS framework od Tailwind bývá první volba od AI Studia.
Kvůli úpravě jednoho nadpisu umí omylem překopat půl aplikace. Od aktualizace na konci února se při úpravě občas ztratí půlka aplikace a opravdu platí heslo zálohovat, zálohovat a znovu zálohovat (po každé úspěšné úpravě).
Úvodní prompt
Základem je dobrý úvodní prompt obsahující co nejvíce vašich požadavků ohledně ovládacích prvků, logiky a formulářových polí. Později se to předělává těžko. Pokud detailnost přeženete, AI to nedá, půlhodinu se snaží něco vytvořit a buďto se sekne úplně nebo vytvoří nějakou blbost vytrženou z kontextu.
Ukázka promptu:
Role: Jsi špičkový Full-stack vývojář se specializací na React.js, algoritmy a mobilní herní UX.
Úkol: Navrhni českou hru Boggle (hledání slov v mřížce) podle zadání.
Aplikaci pojmenuj "Mnohosměrka"
Nastavení:
- Mřížky: Podpora 3x3, 4x4 a 5x5
Tlačítka: hrát nyní, načíst hru, nastavení
- časový limit: 60s, 120s, 180s, neomezený
Načíst hru: zadání ID hry
Slovník: jako slovník použiješ slova z mnou přiloženého souboru. Na každém řádku je jedno platné slovo
(...)
Čleňte jednotlivé funkce do modulů (čili skriptů) tak, aby žádný modul nebyl delší než cca 1000 řádků. To se přestává AI Studio chytat a ani chatbot vám s tím dost často už nepomůže (má příliš malé kontextové okno).
Aplikaci formujete pomocí následných promptů. Jakmile už začne vypadat a fungovat přibližně tak, jak chcete, ocitáte se na rozcestí. Chcete ji stále upravovat pomocí promptů v AI Studiu a riskovat, že umělá inteligence vám např. kvůli úpravě formuláře rozbije celou aplikaci nebo zase komplet překope její vzhled...? Pokud ne, nastávají ruční úpravy s vaší znalostí programování (různé textové změny, posunutí tlačítek, změna barev) nebo komplikovanější úpravy jednotlivých skriptů s pomocí chatbota. Když se např. Gemini nechytá, zkusit ChatGPT nebo DeepSeek. Ten podává kupodivu skvělé výsledky.
Pomocí vibecodování je velmi snadné vytvořit koncept moderního ajaxového webu nebo aplikace, ale dotáhnout ho k finálnímu výsledků je už mnohem těžší. K tomu už dost často musíte pochopit, jak to funguje pod kapotou, a upravit to, co nefunguje tak, jak má. Ve SkyTracku byla ohromná výzva propojit různá místa, kde se pracuje se zeměmi, aby využívala jejich seznam z jednoho místa a pracovala s nimi všude stejně. To samé pro letiště nebo aerolinky v rámci našeptávačů.
Tím nejtěžším u aspoň trochu komerčně laděných webů nebo aplikací nebude kód samotný, ale použité komponenty. AI má tendence použít cokoliv, na čem se učilo nebo najde na webu, nezávisle na licenci, a tak autorská práva můžou být vaší noční můrou. Mně samotnému do SkyTracku použil rastrové mapy od CartoDB a satelitní od ArcGIS, které se musí licencovat a OpenStreetMaps, které se zase nesmí načítat z jejich serveru jindy, než při vývoji. AI Studio mi k dané licenční problematice nedalo nijak vědět. Nenapsalo k tomu ani ň.
Co mi prakticky nikdy nefungovalo, jsou system instructions. Nikdy mi nepsal lidsky čitelný kód, vždy chtěl upravovat víc, než měl, nepoužíval sdružování kaskádových stylů ani se neptal, když nevěděl, a vždy si domýšlel, ačkoliv vše toto bylo v různých formách v systémových instrukcích... Evergreenem je ignorance mých ručních úprav, které po dalším promptu tvrdohlavě přepíše zpět podle sebe. Věřím, že zrovna toto může fungovat lépe v jiných prostředích než v AI Studiu.
Tipy pro vibecodování v AI Studiu
- od únorové aktualizace od Googlu se občas ztratí část projektu během ukládání nebo obnovování starších verzí, proto se vyplatí po každém úspěšném promptu stáhnout zálohu kódu
- čleňte funkce do modulů a výslovně o to požádejte při psaní promptu, kdy chcete přidat něco nového
- na textové změny nebo jednoduché změny vzhledu nepoužívejte prompty, ale upravte si to sami v kódu - je to rychlejší a nehrozí riziko nechtěné změny v jiných částech aplikace
- na úpravy/ladění/opravy jednotlivých funkcionalit se mi osvědčilo stáhnout dotčený skript a nahrát ho spolu s promptem do chatbota - výsledek bývá rychleji a spolehlivěji. Sám jsem byl překvapen, jak chatbot nemá problémy s tím, že jsem mu vyzobl pouze část aplikace a opravdu ji zvládl takto izolovaně upravit nebo opravit.
- zakažte AI Studiu používat Gemini API. Věčně přes něj chce všechno řešit. Takové řešení vyžaduje použití placeného API v produkční verzi, ale hlavně takové řešení bývá znatelně pomalejší a prakticky nikdy není nezbytné (např. chtěl mi takto řešit blbůstku pro logování navštívených ostrovů, kdy si jméno ostrova prostě chtěl hledat přes Gemini API jako chatbot).
Limity hledání v Obchodu Play
Název jsem vybíral přes webovou verzi Obchodu Play. Zadal jsem pár tipů a spojeně seznal, že SkyTrack nevrací žádný výsledek a vybral ho jako název. Až o pár dnů později ho zadal v aplikaci pro Android a vysypala se na mě celá řádka výsledků... Netušil jsem, že Google tak moc degradoval použitelnost webové verze...
Vytvoření Android aplikace
Při vytváření androidí aplikace si už nevystačíte jen s AI Studiem nebo jiným AI nástrojem, ale budete muset do příkazové řádky a vývojového IDE, v mém případě Android Studia, plus upravit pár XML souborů.
Tím vším vás zvládne celkem bez problémů provést umělá inteligence. Stačí zadat prompt stylem "Připrav mou aplikaci pro portování na Android. Vytvoř soubor android.md s popisem nutných manuálních kroků potřebných pro úspěšné vytvoření Android aplikace. Nevynechej žádné potřebné detaily a předpokládej, že s vývojem Android aplikací nemám žádné zkušenosti". Současná umělá inteligence miluje psaní *.md souborů (čili texťáků v módním markdownu). V nich zvládá dodat instrukce pro různé manuální kroky nebo psát readme.
Bude verze pro iOS? V nejbližší době nebude. Musí se kompilovat na Macu a především je potřeba vývojářský účet u Apple za 99 babek na rok. Ani jedno nemám.
V rámci Android aplikace jsem si vyzkoušel vytvoření notifikací pro upozornění na nacházející let 3 a 24 hodin předem. Zprovoznění a testování bylo náročnější, ačkoliv jsem nemusel měnit žádný nativní java kód v části pro Android. Bylo potřeba pořád zadávat nové a nové lety a ladit do doby, než to bylo v pořádku (nebo se to tak aspoň zdá). Posléze jsem vyzkoušel i přidání widgetů přímo na homescreen. To se už nedalo vytvořit v rámci AI Studia, protože se musí upravit přímo soubory v rámci Android Studia, ale umělá inteligence mě zvládla tím procesem úspěšně provést.
Play Console
Vytvoření Android aplikace (apk souboru) zvládnete sami celkem snadno v AI Studiu, ale pokud ji chcete přidat i do Obchodu Play (Play Store), je to běh na mnohem delší trať. V prvé řadě potřebujete získat vývojářský účet u Googlu. Jeho vytvoření stojí 25 $ a jeho platnost je doživotní. Během vytváření je potřeba ověřit identitu. Doporučuje si kvůli tomu vytvořit nový účet a nepřipojovat to ke svému už existujícímu osobnímu nebo pracovnímu účtu.
Když máte účet, můžete vytvořit novou aplikaci. Testování má celkem tři kola - interní, uzavřené a otevřené. Povinné kolo je jen uzavřené testování, a to je vaše vývojářská noční můra. Abyste jím úspěšně prošli, potřebujete mít aspoň 12 testerů, kteří aplikaci budou mít aspoň 14 dnů v kuse nainstalovanou a budou ji používat. Pokud toto kritérium nesplníte, nikdy nemůžete požádat o vydání aplikace na Obchodu Play. Google totiž předpokládá, že toto je měřítko kvalitní aplikace. Jakoby si kambodžský scammer nezvládl koupit tucet čórknutých lowend smartphonů, ty připojit na wifi a stáhnout si své podvodné zkušební appky a po 2 týdny je spouštět... Nebo si zaregistrovat firemní účet, kde můžete zveřejnit aplikace hned a bez testování.
 |
| Co položka, to aspoň jeden formulář |
Proto, abyste mohli vůbec spustit to uzavřené testování, musíte vyplnit víc jak desítku různých formulářů, dodat různé ikonky a grafiky, nastavit cenu skoro ve dvou stovkách regionů (a formulář si nejde v mezikroku uložit) a teprve poté můžete distribuovat aplikaci mezi testery. K tomu samotná Play Console není podle mého příliš intuitivní. Věčně googlím co tam, kde najdu. Nebo se na to ptám chatbotů, kteří jsou stejně zmatení jako já. Dokonce i samotný Gemini od Google v tom má solidní hokej a tvrdil mi, že testerů je třeba 20 místo 12.
Co vás může dost zbrzdit je požadavek na URL s privacy policy. Tu vám v současnosti zvládne za pár sekund vygenerovat chatbot nebo lecjaká online služba. Ta pravá záludnost je, že Play Console od vás nechce text privacy policy, ale rovnou URL, kde bude text. Samozřejmě, dá se to hostovat u nějaké třetí strany, ale vypadá to blbě. Proto víceméně potřebujete nějaký vlastní jednodušší web pro aplikaci, kam tu policy dáte.
- Web aplikace SkyTrack, kde najdete i privacy policy: https://skytrack-app.blogspot.com/
 |
| Takhle si občas budete přidat při snaze publikovat svou aplikaci... |
Poté, co aplikace byla aspoň 14 dnů v používání u aspoň 12 testerů, můžete Google požádat o přístup k produkční verzi. Ano, přístup není nárokový a musíte vyplnit ještě jeden formulář... Schválení/zamítnutí může trvat až několik dnů. Po něm můžete přemigrovat stávající verzi z uzavřeného testování nebo nahrát novou.
K tomu se zdá, že kritéria na kód pro ostrou verzi jsou přísnější jak pro testovací verzi, protože tu samou verzi kódu mi to odmítlo při prvním pokusu s výmluvou na oprávnění READ_MEDIA_IMAGES. Hodil jsem zoufalý pohled, co to zase je, naštval se a poslal jsem to znovu ke kontrole a k mému překvapení to přes ní tentokrát prošlo...
Co mě u Androidu potrápilo
- Oprávnění pro přístup k souborům u API ve verzi 33 avyší (tedy od Androidu 13 výše) se změnilo a AI to ne úplně reflektovala a zdá se, že ani teď to nemám úplně správně a že se to dělá ještě složitěji.
- Od Androidu verze 15 (API 35) je povinný immersive mód čili zobrazení od jednoho okraje displeje už po druhý a vývojář si už musí vyřešit sám, aby mu nelezly ovládací prvky a obsah aplikace pod ovládací tlačítka, systémovou lištu nebo průstřel s fotoaparátem. Uhlídat se to prakticky nedá, pokud má aplikace fungovat při obou orientacích displeje.
- Pro zobrazení mapy mi AI vybrala knihovnu Leaflet. Značně mě potrápila se zobrazování nechtěných linií mezi rastrovými dlaždicemi mapy, které je objevily po aplikace safe areas kvůli immersive módu. Jedná o x let známý a dosud neopravený bug. Pomohl mi kousek CSS kódu metodou pokus omyl.
- Shánění testerů mi pomyslně vyluxovalo československý trh leteckých nadšenců, co by si aplikaci nejspíš pořídili...
Během vývoje jsem na začátku března chtěl aplikaci přemigrovat z problémového AI Studia do Antigravity (taky AI nástroje), ale nezprovoznil jsem to. Nezvládl jsem naimportovat projekt tak, aby fungoval náhled aplikace. Ohlasy na diskuzích zněly, že snad jediný funkční způsob je importovat projekt z Githubu.
Nakonec jsem na počítači po instalaci Node.JS a v terminálu po zadání příkazu "npm run dev" provozoval webový náhled a v něm ladil většinu funkcí. Nové moduly a funkce designoval skrz prompty v AI Studiu, ty stávající upravoval přes různé chatboty, textové změny, úpravy lokalizace, stylů nebo CSS dělal sám ručně. Nativní funkce Androidu testoval přímo na mobilu. Protože ač ajťák, nebyl jsem schopný rozchodit emulátor v Android Studiu na ani ne dvouročním business notebooku od HP s nativní podporou virtualizace.
Jak se vám aplikace líbí? Je na ní poznat, že vznikla pomocí vibecodování? Každopádně při vývoji spolkla elektřiny jako menší město za pár dnů...
Google Play: https://play.google.com/store/apps/details?id=cz.skytrack.app
Webová verze: https://skytrack-beta.netlify.app/ (není funkčnost při vyšším trafficu)