Projekt 1: Osobní tracker přečtených knih v Lovable za hodinu, krok za krokem

Tohle je první projekt ze série, ve které stavíme skutečné aplikace od zadání po nasazení. Cíl je jediný: mít na konci běžící věc. Screenshoty záměrně nepřikládáme, rozhraní Lovable se mění každý měsíc, a prompty jsou důležitější.

Co postavíme a proč zrovna tohle

Osobní tracker přečtených knih: seznam knih s autorem, hodnocením 1 až 5 hvězdiček, datem přečtení a krátkou poznámkou. Umí přidávat, upravovat, mazat, řadit podle data nebo hodnocení a filtrovat podle hvězdiček. Data se ukládají v prohlížeči, takže žádné přihlášení a žádná databáze.

Proč knihy? Protože je to nápad, který se vejde do jedné věty, a proto ho dokončíte. Stejný postup funguje pro návyky, výdaje, filmy, sbírku vína nebo tréninky. Stačí vyměnit slovo „kniha" za to, co chcete sledovat.

Co budete potřebovat

• Účet na lovable.dev. Free tarif stačí.
• Účet na GitHubu (zdarma), kvůli záloze kódu. Dá se udělat až v kroku 6.
• Hodinu v kuse.

Důležitá věc k free tarifu: Lovable na něm dává 5 kreditů denně a každá zpráva, kterou pošlete, stojí zhruba jeden. Tenhle návod má proto přesně pět zpráv. Když pošlete šestou, čekáte do zítřka. Není to překážka, je to disciplína: nutí vás každou zprávu promyslet, což je přesně to, co chceme naučit.

Krok 1: Jedna věta (5 minut, ještě bez Lovable)

Napište si na papír: „Aplikace, ve které si zapisuju přečtené knihy, hodnotím je a vidím je seřazené." Když vaše vlastní varianta nejde do jedné věty, škrtejte, dokud nejde. Vše, co jste vyškrtli, může přijít ve verzi dvě.

Když si nejste jistí obrazovkami a daty, použijte před Lovable prompt Z nápadu na seznam obrazovek a dat v libovolném chatu. Nestojí kredit.

Krok 2: První zpráva, celé zadání najednou (10 minut)

Přihlaste se do Lovable. Na úvodní obrazovce je pole „Ask Lovable to create…". Vložte do něj tuhle zprávu beze změn (nebo s vyměněným tématem):

Postav jednoduchou webovou aplikaci „Moje knihovna" pro jednoho uživatele, bez přihlášení a bez databáze. Data ukládej v prohlížeči (localStorage), aby po obnovení stránky zůstala.

CO APLIKACE UMÍ
- Přidat knihu: název (povinné), autor, hodnocení 1 až 5 hvězdiček, datum přečtení (výchozí dnešek), krátká poznámka.
- Upravit a smazat knihu. Před smazáním se zeptej.
- Seznam knih jako karty: název, autor, hvězdičky, datum, poznámka zkrácená na dva řádky.
- Řazení: podle data přečtení (výchozí, nejnovější nahoře) a podle hodnocení.
- Filtr podle hodnocení: tlačítka „Vše, 5★, 4★ a lepší, 3★ a horší".
- Nahoře jednoduchá statistika: počet knih celkem a počet za tento rok.

VZHLED
- Čistý, světlý, hodně bílého místa, jedna akcentová barva (tmavě zelená).
- Funguje na mobilu i na počítači. Na mobilu karty pod sebou.
- Prázdný stav: když nejsou žádné knihy, ukaž přátelskou zprávu a tlačítko „Přidat první knihu".
- Vše česky.

CO NEDĚLAT
- Žádné přihlášení, žádné účty, žádná databáze, žádné sdílení, žádné obrázky obálek.
- Nepřidávej funkce, o které jsem nežádal.

Až to postavíš, napiš mi ve třech větách, co jsi udělal, a řekni mi tři věci, které si mám vyzkoušet.

Lovable několik minut pracuje, vpravo se objeví náhled. Zatím na nic neklikejte, dokud nedoběhne.

Krok 3: Kontrola, bez kreditů (10 minut)

Teď nejdůležitější část, kterou začátečníci přeskakují. Klikejte v náhledu na všechno:

• Přidejte tři knihy s různým hodnocením a datem.
• Obnovte stránku (F5). Knihy musí zůstat. Když zmizí, je to první věc k opravě.
• Zkuste upravit knihu a smazat jednu. Zeptalo se to před smazáním?
• Přepněte řazení a všechny filtry. Sedí počty?
• Přepněte náhled na mobil (ikona telefonu nad náhledem). Vejde se to? Jdou stisknout tlačítka palcem?
• Smažte všechny knihy a podívejte se na prázdný stav.

Všechno, co nefunguje, si zapište do seznamu. Neposílejte každou chybu zvlášť, to by vás stálo pět kreditů za pět drobností.

Krok 4: Druhá zpráva, všechny opravy najednou (5 minut)

Pošlete jednu zprávu se seznamem. Šablona:

Našel jsem tyhle problémy. Oprav je všechny v jednom kroku, nic dalšího neměň:

1. [např. Po obnovení stránky knihy zmizí.]
2. [např. Na mobilu je tlačítko „Přidat" schované pod klávesnicí.]
3. [např. Filtr „3★ a horší" ukazuje i čtyřhvězdičkové knihy.]

Po opravě mi ke každému bodu napiš jednu větu, co bylo příčinou.

Pokud jste žádnou chybu nenašli (stává se), zprávu přeskočte a kredit si nechte na krok 7.

Krok 5: Třetí zpráva, jedna nová funkce (5 minut)

Teď, když základ funguje, přidáme jednu věc. Jednu, ne tři. Doporučujeme export, protože řeší nejčastější obavu: „co když o data přijdu".

Přidej jednu funkci: tlačítko „Exportovat" v horní liště, které stáhne všechny knihy jako soubor CSV (sloupce: název, autor, hodnocení, datum, poznámka) s českými hlavičkami a kódováním, které otevře Excel i Google Sheets bez rozbité diakritiky.

Vedle něj tlačítko „Importovat", které načte takový CSV soubor zpět. Před importem se zeptej, jestli existující knihy přepsat, nebo přidat.

Nic jiného neměň. Po dokončení mi napiš, jak si to mám vyzkoušet.

Vyzkoušejte: exportujte, smažte knihy, importujte. Data jsou zpátky? Výborně, právě jste si vyrobili zálohu.

Krok 6: Uložení a verze (5 minut, bez kreditů)

Lovable ukládá každou změnu jako verzi, ke které se dá vrátit. Najdete to v historii projektu (ikona hodin nebo položka „History" u chatu). Podívejte se tam teď, ať víte, kde to je, až něco rozbijete.

Pak připojte GitHub: v nastavení projektu (Project settings) položka Git, tlačítko „Connect" u GitHubu. Lovable vytvoří soukromý repozitář a od té chvíle do něj posílá každou změnu. To je vaše záloha mimo Lovable a zároveň cesta, jak projekt jednou převzít do Cursoru nebo Claude Code, až budete chtít víc.

Krok 7: Publikování (5 minut, bez kreditů)

Tlačítko „Publish" vpravo nahoře. Lovable aplikaci nasadí na adresu ve tvaru něco.lovable.app. Adresu si otevřete na mobilu, přidejte na plochu a máte aplikaci, kterou používáte.

Dvě věci, které je dobré vědět: publikovaná verze je snímek. Když pak v Lovable něco změníte, náhled se změní hned, ale živá adresa až po dalším „Publish → Publish changes". A data v localStorage jsou vázaná na konkrétní prohlížeč. Knihy zapsané na mobilu neuvidíte na počítači. Přesně proto jsme přidali export, a přesně to je hranice, kde jednou budete chtít backend.

Když se něco rozbije: pátá zpráva

Poslední kredit si nechte na chybu. Když aplikace přestane fungovat, nepište „oprav to". Použijte zkrácenou verzi našeho promptu na diagnostiku:

Aplikace se chová takhle: [POPIS, CO SE DĚJE A CO JSI ČEKAL]. Než něco změníš, napiš mi tři nejpravděpodobnější příčiny a u každé, jak ji ověřit. Pak oprav jen tu nejpravděpodobnější, nejmenší možnou změnou, a řekni mi, jak ověřím, že je to pryč.

Pokud oprava nezabere, vraťte se v historii na poslední fungující verzi. Je to rychlejší než další kolo záplat.

Co jsme se naučili

• Zadání s hranicemi („co nedělat") dá lepší první verzi než popis vysněné aplikace.
• Kontrola bez kreditů před opravou s kreditem. Seznam chyb, jedna zpráva.
• Jedna funkce na jednu zprávu. Tři funkce v jedné zprávě znamenají tři místa, kde se to může rozbít, a nevíte které.
• Verze a GitHub od začátku, ne až „to bude fungovat".
• Publikovaná verze je snímek, náhled ne.

Kde to rozbít a jak to opravit

• Vymazání dat prohlížeče smaže knihy. Řešení: export jednou za čas, nebo backend (další projekt).
• Dlouhé názvy rozhodí karty na mobilu. Zpráva: „Zkrať zobrazení názvu na dva řádky s trojtečkou."
• Duplicitní knihy při opakovaném importu. Zpráva: „Při importu přeskoč knihy, které mají stejný název i autora."
• Přidávání na mobilu je nepohodlné, když je formulář nahoře. Zpráva: „Otevírej formulář pro přidání jako spodní panel, který vyjede zdola."

Kam dál

Chcete stejná data na telefonu i na počítači, nebo aplikaci sdílet s partnerem? To je přesně projekt 3 (rezervační formulář s backendem), kde přidáme Lovable Cloud a přihlášení. Do té doby vám tracker s exportem poslouží. A jestli vás to chytlo, zkuste prompt Vysvětli mi, co jsi právě udělal při každé další zprávě. Za dva týdny budete své aplikaci rozumět.

Zdroje a další čtení

1. Getting started (Lovable Docs)
2. GitHub integration (Lovable Docs)
3. Pricing (Lovable)