Od nápadu k živé webové aplikaci (Lovable)

Proč to děláme#

Cílem prvního workshopu je postavit něco funkčního. Ukázat si, jak snadné to dnes je. Půjdeme tou nejjednodušší cestou - přes Vibe coding platformy. Vysvětlíme si co platformy umí, v čem jsou silné a jaké je jejich omezení. Také si nastíníme možnosti dalšího rozvoje, když platformy přestanou stačit.

flowchart LR
  N([Nápad]) --> C[Claude]
  C -->|prompt| L[Lovable]
  L -->|publish| URL([Veřejná URL])

Co budeme potřebovat#

Účet na Lovable nebo kterékoliv jiné Vibecoding platformě - nejrychlejší je registrace přes Gmail (můžeš použít svůj soukromý) - při registraci přes linky uvedené zde dostaneš pár kreditů na vyzkoušení navíc.
Jasný (i když jednoduchý) nápad: jednou větou, co aplikace dělá a pro koho.
Doporučuji i účet na GitHub

Co jsou Vibe coding platformy a proč s nimi začínáme?#

Jde o specializované služby jejichž účelem je co nejvíce zjednodušit proces tvorby webových aplikací. V principu jde o to, že uživatel má k dispozici chatovací okno podobně jako v Claude, do kterého zadává svoje požadavky. Výstupem ale není odpověď v chatu, ale přímo postavený web či aplikace. Se samotným kódem uživatel vůbec nepřijde do kontaktu - jednoduše popíše jakou má představu a platforma tuhle představu zhmotní. Pokud chce uživatel něco přidat nebo změnit, jednoduše svůj požadavek napíše a projekt se mění podle tohoto požadavku.

Platformy jsou stěžejním tématem prvního workshopu z toho důvodu, že jde o nejrychlejší cestu k funkčnímu prototypu, přičemž uživatel potřebuje pouze email a prohlížeč. Nejsou potřeba žádné instalace ani dodatečné registrace.

Jaké typy projektů jsou vhodné?#

Pomocí platforem můžeme postavit celou řadu projektů. Od jednoduchých statických webových stránek, po komplexnější projekty typu Steve. Pro první workshop je vhodné začít s něčím jednodušším:

Informační webová stránka (nevyžaduje žádné integrace)
Landing page s formulářem
Tipovačky, kalkulačky - poznej poslance, jaká jsi persona apod. (databáze)
nástroj pro veřejné ankety (databáze + přihlášení uživatelů)
Time-tracker na projektech (clockify)
Plánovač rodinných prací - gamifikace
Různé dashboardy
Jednoduché hry (snake)

Proč nechceme něco složitějšího? Není to kvůli tomu, že by to platformy nezvládly. Budeme ale pracovat pouze s Free verzemi platforem a ty umožňují jen několik iterací zdarma denně.

Postup krok za krokem#

Přihlas se do Lovable a klikni na New project.
Do prvního promptu napiš jednou až třemi větami, co chceš vytvořit. Zmiň cíl, typ uživatele a vizuální tón.
Počkej, až Lovable vygeneruje první verzi, a podívej se na náhled.
Iteruj — postupně doplňuj funkce a vzhled v krátkých promptech.
Když jsi spokojený/á, klikni na Publish v pravém horním rohu.
Zkopíruj veřejnou URL a otevři ji v jiném prohlížeči pro kontrolu.

Tip

Nesnaž se v prvním promptu popsat celou aplikaci. Začni jednoduše a stav po vrstvách.

Druhá fáze - napojení na GitHub + Claude#

U jednoduchých projektů můžeme skončit u kroku č. 6. Pokud ale pracujeme na něčem složitějším, k čemu se chceme postupně vracet, je vhodné projekt si napojit na GitHub.
Každá platforma má propojení s Github na různých místech. V Lovable je to teď např. skryté a je potřeba se proklikat - Project -> Settings -> Git. Emergent má možnost propojení vlevo dole v místech, kde se zadává prompt. Base44 pak zase vpravo nahoře :) Obecně hledej tuto ikonu:

Pro propojení je potřeba přihlásit se svým GitHub účtem, povolit přístup k dané aplikace a případně další oprávnění.

Když dostaneme úspěšně náš projekt na GitHub, můžeme si také propojit GitHub s naším Claudem. Proč to chceme? Umožňuje nám to konzultovat projekt s Claudem, plánovat další rozvoj, případně hledat chyby. Zároveň nám to umožní také v budoucnosti pracovat v Claude Code na daném projektu. Otevři si tedy URL https://claude.ai/customize/connectors - tady si vyber konektor pro Github a opět projdi kolečkem přihlašování a povolování přístupu. Občas se to nepovede hned napoprvé a je potřeba to zkusit znovu.

Když máme repozitář propojený, doporučuju si založit Claude Projekt a nahrát tam přes github konektor váš repozitář - tím dáte Claudovi přístup k vašemu kódu a můžete s ním řešit možnosti rozvoje apod.

Otestuj se#

Kvíz

Co je nejlepší strategie pro první prompt v Lovable?