Jak naprogramovat web pomocí ChatGPT

Jakub Zelenka

4. čvn 2023 • 3 min read

Generováno v Midjourney

Tento návod pro práci s AI vyšel v newsletteru Mimo agendu. Nejaktuálnější příspěvky + další témata v něm vychází každé pondělí v 7:00.

Odebírat newsletter

Tento článek vznikl díky podpoře komunity. Pokud oceňujete mou práci a chcete přispět k růstu projektu, můžete se stát placeným členem a získat tak přístup k exkluzivnímu obsahu. Vaše podpora je klíčová. Děkuji a doufám, že se vám článek líbí.

Vždy jsem miloval jistou neotesanost podcastu Kecy a politika. V roce 2022 měli už tisíce podporovatelů a jejich úvodní stránka vypadala jako z devadesátých let. Pár tlačítek, obří logo a kontaktní údaje.

Teď už jsou na tom mnohem lépe, protože si nejspíše najali profesionály. Vnuklo mi to nápad napodobit jejich retro stránku jen za pomoci umělé inteligence, konkrétně nástroje ChatGPT. Ten se ukázal jako skvělý pomocník k tvoření raných prototypů projektů. Potřebujete rychle spustit web? Zvládnete to pár příkazy.

Využil jsem verzi ChatGPT 4, ke které se dostanete jen s předplatným. Verze 3.5 bohužel není v tom, co jsem chtěl vyzkoušet, tak spolehlivá a dělá chyby.

První test měl za cíl vytvořit úvodní stránku projektu s logem o velikosti 500x200, tlačítkem pro vstup, pod ním měl červeně a modře blikat text: „Vstupte jen na vlastní nebezpečí.“ A aby to bylo ještě zajímavější, přidal jsem tlačítko: „Zkusím štěstí“, které vás náhodně přesměruje na jednu z pěti předem připravených adres.

Začneme tím, že přepíšeme trochu polopaticky předchozí odstavec a uvidíme, co se stane:

🙍‍♂️

Ahoj, potřeboval bych vytvořit jednoduchou stránku. Nahoře bude logo o velikosti 500x200. Pod ním zelené tlačítko s nápisem „Vstupte“. To odkáže na stránku https://mimo-agendu.ghost.io. Pod tlačítkem „Vstupte“ bude nápis: „Vstupte na vlastní nebezpečí!“. Ten bude blikat červeně a modře. Pod tímto nápisem udělej červené tlačítko s nápisem: „Zkusím štěstí“. To povede náhodně na jednu z těchto pěti adres: denikn.cz, idnes.cz, e15.cz, aktualne.cz, seznam.cz. Děkuji.

ChatGPT vyplivne kód. Ten sem kopírovat nebudu, protože je to zhruba 74 řádků. Dodá vám také jasné instrukce a poznámky, co máte kde přepsat. K editaci kódu jsem pro MacOSX využil software Sublime Text. Měl by fungovat i starý dobrý Notepad ve Windows. Kód prostě nakopírujte do nového dokumentu a pak soubor uložte pod názvem index.html. Do stejné složky dejte ještě soubor logo.png. A máte hotovo. Můžete zkusit soubor spustit v prohlížeči. Vše by vám mělo fungovat a výsledek bude vypadat nějak takto:

Teď se zkusíme trochu víc přiblížit designu staré úvodní stránky Keců a politiky. Opět zkusíme přesně popsat, co na ní vidíme. Dole nalezneme kontaktní údaje a černý pruh s informacemi o autorských právech. Výsledek si můžete interaktivně prohlédnout na tomto ODKAZU.

ChatGPT je v prototypování velmi mocný nástroj. Během krátké chvíle vám vytvoří velmi funkční stránku, do které vložíte třeba přehrávač Spotify a seznam odkazů na další epizodu. Pokud příkazy dobře formulujete, může to vypadat TAKHLE.

V tomto případě jsem ChatGPT požádal, aby zvolil originální a moderní písmo. Ladit jen pomocí příkazů se dá hodiny. Fungovalo mi také poslat odkaz na jinou webovou stránku, aby se AI inspirovala.

Děkuji za přečtení. Nejnovější tipy a návody naleznete v newsletteru Mimo agendu.

Odebírat newsletter