Vibe Coding - Programování s AI

Automatický přepis, může obsahovat chyby.

1. 0:00Ahoj, vítám vás u další lekce, a dneska se podíváme, troufnu si tvrdit, na jednu z nejzajímavějších věcí, jenom hlavně alespoň pro mě, a tou je tzv.
2. 0:09vibe coding, což je programování pomocí umělé inteligence.
3. 0:13A nebojte se toho slova programování, nemusíte totiž znát ani řádku kódu, nemusíte vůbec ani vědět, co programování je, a můžete pomocí umělé inteligence tvořit jednoduchý programy.
4. 0:25Tak pojďme na to.
5. 0:25Začneme úplně nejjednoduším způsobem, a to je pomocí ChatGPT.
6. 0:29Takže si otevřete klasický ChatGPT, můžete i tu verzi zdarma a zadejte tenhle ten jednoduchý prompt.
7. 0:35Naprogramujeme jednoduchou hru chytání padajících emoji.
8. 0:38Hra bude postupně zrychlovat a cílem je pochytat co nejvíc bodů.
9. 0:42Pak už jenom kliknete odeslat a budete koukat, jak se před váma ta webová stránka s tou hrou sama vytvoří.
10. 0:48Vidíte, že model chvilku zapřemýšlal, začíná nám tady tvořit tu hru.
11. 0:54A teďka taková zásadní chyba, kterou jsem udělal a na kterou vás chci upozornit, je ta, Teď vidíte, že tady generuje nějaký spletitý kódy, kterým třeba nerozumíte.
12. 1:06A vy chcete použít tzv.
13. 1:07kanvas.
14. 1:08To je ta pracovní plocha, kterou jsme si ukazovali.
15. 1:11Já ji tady někde najdu.
16. 1:13Abyste nemuseli si tady ten soubor stahovat.
17. 1:16Takže já ho to nechám dogenerovat, protože tohle je běžná věc, která se vám může stát, když to do ChatGPT zadáte.
18. 1:22a musel byste si to ukládat a spouštět někde u sebe, což je zbytečně komplikovaný, to nechcem.
19. 1:27Tak ChatGPT už nám to dogenerovalo a teď vidíte, že tady mám nějaký kód a vůbec nevím, co s ním.
20. 1:32Tak my jsme to mohli udělat tady už na začátku, při tomhletom promptu, ale my to zvolíme tady a řekneme, že to chceme dát do pracovní plochy.
21. 1:41Normálně mu jenom takhle řeknu, přidej to do pracovní plochy a on vezme tady ten kód a přidá to tady do toho, aby si to budete moct rovnou tu hru spustit a zahrát přímo v ChatGPT A vidíte, že už to tady máme a máme tady tlačítko náhled.
22. 1:57Tak si na něj kliknem, přepínáme se do rozhraní, kterými velice věrně známe a máme tady ten kód.
23. 2:03A to pořád není ale to, co my jsme chtěli.
24. 2:05My si to chceme zahrát.
25. 2:06No tak znova kliknu tady náhled.
26. 2:08Už vidíte, že se mi ta hra tady spustila.
27. 2:11Teďka tlačítkem myši tady musím takhle chytat ty emoji.
28. 2:14Nahoře se mi počítá score.
29. 2:16a mám naprogramovanou tu hru.
30. 2:19Teďka se tady nechám umřít.
31. 2:20Dokážu, že tady nemáme tu funkci, že umřem.
32. 2:22Tak ji jednoduše přidáme.
33. 2:24Přidej i funkci, že když uživatel nechytí, dvě emoji, tak hra končí.
34. 2:34A normálně mu můžete říct, aby to upravil, tak já to tady můžu zastavit a budeme se koukat, že on začne za nás tady upravovat ten kód.
35. 2:42A vy nemusíte vůbec tady tomu rozumět, nemusíte vůbec vědět, co se tady děje.
36. 2:47A už tady udělal nějaký změny, tak si to pojďme pustit a uvidíme, jestli umřem.
37. 2:52Tak necháme tady jednu si chytneme a necháme spadnout jednu, druhou, třetí a ona ta byla ta druhá, ona se to asi vyhodnocovala trošku později a vidíte konec hry, můžu restartovat a začínám teďka úplně od začátku.
38. 3:05Takže vy si tady můžete vytvořit nejenom hru, ale můžete si tady vytvořit nějaký třeba webový formulář nebo něco takovýho a vlastně vytvořit si nějaký jednoduchý programek.
39. 3:15Tady tu hru pak můžete třeba pomocí odkazů sdílet s kamarádama nebo s dětma, takže pro ně si tady můžete vytvořit třeba nějakou interaktivní hru.
40. 3:23To byla taková jako jednoduchá ukázka, ale jste schopní tady vytvořit poměrně jako komplikovaný věci.
41. 3:27Teď se přesuneme do takzvaného AI Studio od Google.
42. 3:30Najdete ho na adrese aistudio.google.com a i v tom zdarma plánu tak vy můžete si vytvořit nějaký program.
43. 3:38My použijeme tady tu záložku Build A to nám pomůže nebo respektive umožní pomocí Gemini vytvořit nějaký program.
44. 3:47To, proč je vlastně tadyto lepší než třeba GPT, tak je v tom, že vám třeba umožňuje tvořit komplexnější weby, Pokud třeba kódu trošku víc rozumíte, tak s tím můžete líp pracovat.
45. 3:58Můžete je publikovat třeba i veřejně, aby se k ním dostali všichni.
46. 4:02Ale co je na tom nejvíc super, tak vy tady můžete zapojit i model NanoBanana, nebo jazykový modely od Google.
47. 4:09Takže vlastně vy si můžete pomocí umělé inteligence naprogramovat aplikaci s umělou inteligencí.
48. 4:15Tak to pojďme zkusit.
49. 4:16Já zvolím takovýhle jednoduchý prompt.
50. 4:18Naprogramuji ve web, kde zadám prompt a vygeneruje se mi kreslený obrázek podle toho promptu pomocí NanoBanana.
51. 4:24A už jenom kliknu Build a budu koukat, jak umělá inteligence tady ten jednoduchý webík postaví za mě.
52. 4:30Tady vidíte, že na rozdíl od GPT, tak tady vytváří mnohem víc souborů, protože ten program už je komplexnější, není to prostě jenom jednoduchá webová stránka, už tam je i nějaké volání třeba nějakého takzvaného API.
53. 4:42což je vlastně to napojení na to nanobanana.
54. 4:44Ale pardon, zabíhám do technikálí, tohle nechme stranou.
55. 4:47Zkrátka, pojďme si počkat na ten výsledek.
56. 4:50Tak, a máme tady výsledek.
57. 4:52Banana Art Generator.
58. 4:54Takže řekněme kočka hrající na kytaru, co jsme tady měli v té nápovědě.
59. 4:59Kliknu generovat.
60. 5:01A teďka mi to tady píše, že AI tvoří veledílo, tak počkáme.
61. 5:05co se tady stane.
62. 5:06No a už to tady máme, máme tady vygenerovaný obrázek kočky, která hraje na kytaru a je vlastně takhle kreslenej.
63. 5:14Vy byste třeba tady ten program mohli rozšířit, že si tam nahrajete vlastní obrázek a vygeneruje se to v nějakém stylu.
64. 5:20Ta obrovská výhoda je v tom, že vy tohle byste dokázali v rozhraní Gemini, ale vy pak tady ten web můžete vzít a můžete ho i publikovat veřejně na nějakou vlastní doménu a vytvořit tak třeba nějakou jednoduchou aplikaci.
65. 5:32A nebo prostě můžete si tady nechat ten prompt vytvořený a vytvořit třeba svým dětem nějaký generování třeba příběhů, že prostě večer jim chcete vyprávět nějakou pohádku, tak si tady necháte vytvořit nějaký program, kde mu řeknete, že tam bude vstupem třeba nějaký textový popis, děti vám řeknou,
66. 5:50o čem by chtěly, abyste jim vyprávili, a vy to napojíte ne na Gemini Nano Banana, ale třeba i na klasický Gemini model, tím to normálně řeknete a ono vám to vygeneruje ten příběh.
67. 6:01A víte co, pojďme si to vyzkoušet, tady ten nápad, co jsem právě popsal.
68. 6:05Takže vytvořil jsem tady jednoduchý prompt, že chci vygenerovat aplikaci, která má vygenerovat nějaký příběh pomocí toho, co já tam zadám a pomocí Gemini se mi vygeneruje dětská pohádka a ta pohádka bude mít několik částí a každá ta část bude mít i obrázky.
69. 6:20Ještě tady doplním, že obrázky chci vygenerovat.
70. 6:24A já mezi těmi částmi budu listovat jako v knížce.
71. 6:27Tak a necháme si to postavit.
72. 6:29Tak máme náš generátor pohádek hotovej, tak řekněme, že chceme pohádku o medvědovi, jak jde pro med a cestou a překazí mu to včely.
73. 6:44a dáme si vygenerovat pohádku.
74. 6:46Chvilku to zabere, protože se tam používají ty AI modely, takže musíme počkat.
75. 6:51Je to podobné, jako byste tu pohádku generovali s Gemini.
76. 6:55Ale koukám, že to bylo poměrně rychle, tak se pojďme podívat, jak to vypadá.
77. 6:59Medvídek a vzteklé včely.
78. 7:01Otevřu si tu knížku a můžu mezi tím číst medvídek.
79. 7:05Brumla měl ze všeho na světě nejraději med jednoho slunečného dne.
80. 7:09Blá, blá, blá.
81. 7:10A mám tady vlastně tu pohádku a můžu pokračovat dál.
82. 7:13Dám další.
83. 7:14Chodil sem a tam, čenichal ke každému kmenu stromu a až najednou ucítil medovou vůni.
84. 7:19A takhle můžu pokračovat dál a můžu si tu pohádku číst.
85. 7:23Vidíte, že tady mám ty ilustrace toho méďi, který leze na ten strom.
86. 7:27Tady teďka si ho všimly včely, takže dělají bzzz a letějí na něj.
87. 7:32A vidíte, máte tady takovýhle vtipný ilustrace, máte vlastní pohádku na to, co to vaše dítě třeba chtělo a máte to i takhle krásně v tomto obalu knížkovém.
88. 7:44Velice jednoduchý.
89. 7:46Teď si třeba všimnete, že ten méďa je po každý jiný, takže byste mohli tady ten program upravovat, abyste řekli, použij vždycky předchozí obrázek, aby se z něj inspiroval, jak vypadá ta daná postava nebo ty daný scény a pokračuj v tom dál a mohli byste to takhle upravovat, mohli byste třeba tu kapitolu
90. 8:04nechat mít delší, přidat nějakou animaci, to je otočení té stránky, ale to už je na vás.
91. 8:10Zkrátka, té kreativitě se meze nekladou, A jste schopní tady v Gemini si vytvořit takové velice hezké programy se zapojeným umělé inteligence, třeba právě pro vaše děcka, nebo pro nějaké i třeba firmní využití.
92. 8:23To nemusí být takovéhle věci.
93. 8:24Můžete si vytvořit landing page, kde budete sbírat e-maily nebo prezentovat vaši firmu.
94. 8:29Zkrátka takovéhle jednoduché věci v tom jdou vytvořit velice dobře.
95. 8:32Tohle byl takovej rychlej sneak peek do vibe codingu.
96. 8:36Je to obrovská disciplína.
97. 8:38Možná máte třeba pocit, že dneska už programátory nepotřebujete a vytvoříte takovýhle věci velice jednoduše pomocí vibe codingu a jako do jistý míry ano, na takovýhle jednoduchý hračičky, tak si je opravdu dokážete udělat sami a nemusíte platit nějaký drahý produkt někde.
98. 8:53Na druhou stranu, ta realita je mnohem složitější.
99. 8:57Pokud chcete vytvořit nějaký složitej software, tak pořád tam ta komplexita je obrovská a Zkrátka ten vibe coding pořád ještě nedostačuje a potřebujete znát ty základy toho programování a obecně, jak k tomu přistupovat, protože je obrovský téma, je třeba i bezpečnost a další věci, ale pro takovýhle malý programky, který
100. 9:15třeba generují takovýhle obsah, který jsme si ukázali, tak je to naprosto ideální.
101. 9:19Kdyby to vás o Vibe Codingu zajímá trošku víc, tak vás odkážu na svůj YouTube kanál, kde o Vibe Codingu mluvím trošku víc.
102. 9:25A ještě na závěr, vám dám takový jenom sneak peek pro ty z vás, který třeba už umíte trošku programovat, tak vám doporučím aplikaci Cursor nebo pak Claude Code a vy tam jste schopní dělat vlastně podobné věci jako v tom AI Studio, akorát, že je to už takový víc programátorsky zaměřený.
103. 9:40Máte tady ty zdrojové kódy, můžete tady s jazykovým modelem si povídat a nechat ho udělat ty úpravy, takže vy mu řek On si sám načte ten kontext, ty věci, co potřebuje, udělá ty úpravy a vy si je pak můžete zkontrolovat.
104. 9:54A můžete používat jak Cursor, tak třeba i Claude Code, pokud používáte od Anthropicu Claude Sonnet modely, tak můžete používat Claude Code a ten umí vlastně to samý.
105. 10:04Ale to se mě tak nastínil pro to malé procento z vás, který už třeba programování trošku víc jako hověj, ale pro nás ostatní, tak AI Studio.
106. 10:13Skvělej nástroj, ve kterém jste schopni vygenerovat Skvělý věci.
107. 10:17A co je nejlepší, tak to AI Studio je do velký míry zadarmo.
108. 10:20Takže to, co jsme si třeba ukázali, tady to generování tý interaktivní pohádky, no, tak pomocí AI Studio jste schopni to udělat zadarmo.
109. 10:28Stačí mít jenom Google účet.
110. 10:29To bylo pro dnešní lekci o vibe codingu všechno.
111. 10:31Doufám, že vám přišla zajímavá a budu rád, když se mi třeba pochlubíte v komentářích u videa, když se ho rozkliknete a dostanete se na YouTube, tam můžete napsat a třeba se mi pochlubíte, co jste vytvořili.
112. 10:42A můžete takhle třeba vytvořit i nějaký zajímavý vánoční dárek, nebo dárek k narozeninám, kdy prostě tam třeba uděláte nějaké okýnko, ten člověk si na něj klikne, zobrazí se mu jeho fotka, pak se ta fotka třeba vygeneruje v nějakém jako vtipném stylu a zkrátka ta kreativita, ta je jenom na vás.
113. 11:00Doufám, že si s tím užijete, hodně srandy, úkol je za mě úplně jasnej, běžte do AI Studio, zkuste něco vytvořit a já se na vás budu těšit u další lekce
114. Kliknutím na řádek přeskočíš ve videu na to místo.