A přesně tak vznikl BUMeetGram.
Co se stane, když se setká Google Tabulka s Gemini?
Představte si to: pořádáte konferenci, máte nějakých 250+ účastníků, organizátorů a lektorů. To je spousta informací, vzkazů a starostí. Proto potřebujete nějakou sdílenou nástěnku. Můžeme mít papírové lepíky, můžeme využít hotová placená řešení, můžeme si ohnout něco volně dostupného.
Pokud jste skuteční programátoři, jistě vás napadne mnoho “lepších a profesionálnějších” řešení a napíšete si vše sami. Já chtěl tentokrát vyzkoušet sílu Gemini v kombinaci s Formuláři Google a Tabulkami. Tak, aby to zvládl i netechnicky zaměřený učitel nebo student.
Ano, to bylo podmínkou. Jednoduché řešení, které zvládne i žák základní školy. Tedy žádné nástroje typu Make, Zapier či N8N.
Místo papírků s hodnocením nebo složitého programování tu vznikl jednoduchý, vizuálně chytlavý feed jako na Instagramu nebo Pinterestu, který v reálném čase sbírá všechny ty skvělé AHA momenty a vzkazy od účastníků konference.
Nápad a účel
Aplikace by měla být jednoduchá na používání. Uživatel vyplní formulář se vzkazem, obsah se propíše na webovou stránku v podobě nekonečného feedu. Nebudeme řešit složité databáze. Vše bude responzivní a vizuálně hezké.
Žádná databáze, pouze jedno CSV
Proč se trápit s databázemi, když už máme něco, co všichni známe a používáme? Základem je Google Formulář a pár jednoduchých otázek, které se propisují do Google Tabulky.
- Vytvořte si Google Formulář s otázkami, které se pak budou zobrazovat ve vaší aplikaci.
- Odpovědi formuláře nechejte zaznamenávat do Tabulky.
- Tabulka musí být sdílená jako webový obsah (Soubor - Sdílet - Publikovat na web) ve formátu CSV. Nezapomeňte nastavit přístupová práva na veřejná. A to je náš zdroj dat, který si Gemini hravě stáhne a zpracuje.
- Pomocí Gemini napromptujte kód této aplikace.
- Publikujte kód.
Magie vibe codingu s Gemini
Představte si komunikaci s Gemini jako rozhovor s parťákem programátorem. Stačilo mu v režimu Canvas říct:
- Potřebuju, aby to vypadalo jako Instagram grid.
- Všechno chci mít v jednom souboru.
- Data mám v CSV, načti odpovědi a proměň na kartičky!
Prompt
Vytvoř jednostránkovou HTML aplikaci nazvanou BUMeet Gram.
Stránka musí používat Tailwind CSS pro stylování a mít responzivní rozvržení založené na dlaždicích (grid), podobně jako třeba Instagram nebo Pinterest.
Stránka musí dynamicky načíst data z Tabulky Google (adresa URL): https://docs.google.com/spreadsheets/… (sem doplňte adresu svého CSV souboru).
Tato CSV data musí být parsována a každý řádek zobrazen jako karta v mřížce. Příspěvky musí být seřazeny tak, aby se nejnovější (nejnovější časové razítko) zobrazovaly nahoře.
Každá karta by měla být stylována se zaoblenými rohy a stínem a zobrazovat následující informace z CSV:
- Pro koho: z pole „Komu posíláte virtuální pozdrav?“
- Vzkaz: z pole „Jaký je váš vzkaz?”
- Stručně a výstižně: z pole „Jedno výstižné slovo”
- Odesílatel: z pole „Vaše jméno (volitelné)”. Pokud je toto pole prázdné, mělo by se zobrazit „Od: Anonym“ nebo by se pole mělo skrýt.
Nesmí být zahrnut žádný zástupný text nebo upozornění s natvrdo zadanými daty.
Zápatí (Footer) — nakonec přidej na spodek stránky jednoduché zápatí, které říká: „Vytvořeno s láskou k novým věcem od Pavla Hodála na BUMeeting 2025.”
Vyvěste to do světa
Máme hotový super-responzivní feed. A teď to nejlepší, jak to dostat do světa, aniž bychom museli řešit hosting? Vezměte ten jeden HTML soubor a vložte ho na Google Sites pomocí funkce „Vlastní kód“ (Embed).
Jednoduché, funkční, boží!
Poznámka
BUMeetGram jsem zprovoznil pouze pro účely konference a v současné době nepřijímá veřejné vzkazy. Přijďte 8. 11. 2025 na konferenci nebo si napromptujte vlastní.