Kódování s umělou inteligencí, prakticky a na míru
V naši digitální agentuře se zabýváme celým spektrem digitálního světa – od tvorby jednoduchých webových stránek až po náročnější webové platformy a software na míru.
V práci používáme sofistikované nástroje jako jsou Anthropic Claude, OpenAI ChatGPT a Google Gemini. Tyto technologie jemně zaplétáme do naší každodenní rutiny, aby byly přínosem pro kvalitu a efektivitu našich procesů.
Přinášíme vám pohled do kuchyně naší agentury, kde sdílíme reálné příklady AI promptů.
Přečtěte třetí příspěvek z naší série o aplikacích AI.
První díl od CEO: o využití AI v řízení firmy a operativě
Druhý díl: Ukázky promptů od vývojáře
Umělá inteligence je už nějakou dobu horké téma a v blizké době se věci jen tak nezmění. Hlavním bodem jsou velké jazykové modely neboli LLM, konkrétně ChatGPT, Claude, Gemini a spousta dalších. Nejen ve světě softwarového vývoje dochází k velkým a rychlým změnám v pracovních postupech a nástrojích, které mají i malé firmy či dokonce jednotlivci k dispozici za velmi dostupných podmínek. Technologický vývoj je tak stále rychlejší, ale i to má svá úskalí, především v tom, jak rychle se firmy a vývojáři dokáží adaptovat a nové nástroje efektivně využívat.
Důležité je rozumět výhodám, nevýhodám a hlavně omezením, které nová technologie nabízí. V tomto článku nebudu rozebírat obecnou teorii o LLM nebo nepraktické prompty, kterých je plný internet, ale ukážu jednoduchou konverzaci s ChatGPT, který mi pomohl a urychlil zpracování požadavku od klienta, včetně jeho realizace. Jednalo se o slider s referencemi v již existující šabloně WordPress webu.
Veškerý kontext, který LLM potřebovalo stačilo dodat v rámci konverzace a nedošlo k použití Copilota ani jiných LLM integrací do vývojového prostředí. Tyto nástroje mají také své výhody i nevýhody, ale to je zase jiné téma na jiný článek. Nyní se chci soustředit především na jednotlivé výměny v konverzaci a možnosti, které mi umělá inteligence nabízela a tím poukázat na případy, kdy se na AI můžete spolehnout a stejně tak, kdy už máte být raději opatrní.
Před
Po
Mohl jsem si vybrat, jestli půjde cestou obrázku nebo přímo kódu. Tzn. mohl jsem konverzaci s ChatGPT začít přiložením obrázku jaký vidíme výše, před úpravou, umělá inteligence by rozeznala strukturu layoutu, barvy, typ obsahu a podle instrukce a požadavku by mi mohla vygenerovat kód. To by byl dobrý postup, pokud začínám budovat od začátku něco, co je navržené graficky, ale není nakódované. V našem případě bylo vhodnější vzít již existující kód pro slider a vložit ho do konverzace, včetně požadavku, co chceme, aby se stalo.
Zkopíroval jsem tedy HTML/PHP a JS kód tvořící slider a sdělil požadavky, které jsme měli od klienta:
- vypnout auto skrolování
- zobrazit šipky (fixně) pro posun recenzí
- tak ať mohou být vidět i sousední recenze a jít malinko do ztracena
- drag&drop nijak NEaplikovat
Na první dobrou jsem dostal relativně přesnou odpověď a návrh na úpravy kódu.
ChatGPT z mého kódu rozeznal, že se jedná o Swiper slider a jelikož jej zná, ví jaké parametry použít jakým způsobem, aby vyhověl požadavkům, které jsme mu sdělili. Musíme si akorát dávat pozor na verzi s jakou AI pracuje, protože mohla být trénovaná ještě na starší verzi dané knihovny, než je ta aktuální v našem projektu.
Nicméně dnes všechny přední jazykové modely od velkých firem bývají častěji aktualizovány a stejně tak si většina softwaru snaží zachovat zpětnou kompatibilitu a spousta postupů a parametrizací je dnes už standardizována, tzn. v praxi jako vývojáři víme, jak často a moc se mění knihovny se kterými pracujeme a podle toho můžeme odhadovat a rychle zjistit, jak se na dané AI můžeme spolehnout. Například zde, pokud by ChatGPT nepracovalo se stejnou verzí Swiper knihovny jakou používám já v projektu, nevadí mi to, protože vím, že parametry pro nastavení jako SlidesPerView, Loop, Autoplay a další už existují mnoho verzí a s největší pravděpodobností existovat budou i nadále.
Jelikož potřebujeme ve slideru začít používat šipky na posuv, ChatGPT ví, že je potřebujeme doplnit v HTML části a pomocí JS parametrů na ně jen odkázat, což udělal v předchozím bloku. Zároveň rozeznává, že pravděpodobně používáme Tailwind na stylizaci, ale není si jistý. V kódu používáme Tailwind třídy, ale ze samotných názvů použítých tříd to ještě nemusí být jisté, mohli bychom mít jiný custom framework s podobnými názvy tříd.
Pokud bych se v tento okamžik nacházel v integrovaném prostředí s AI, věděl by, že mám Tailwind skutečně v projektu použitý. Nicméně i tak pořád existuje více možností implementací, mohli bychom chtít tvořit šipky přes pseudo třídy i když používáme Tailwind.
Nicméně pro nás bylo žádoucí standardně Tailwind využít dle všech možností pro minimální psaní extra CSS kódu, požádal jsem jej tedy o tuto variantu. Rozumí kontextu, přesně tomu, co potřebuje, chápe strukturu a zbytečně se už neopakuje. A správně Tailwindem nakódoval přechody do ztracena z obou stran.
Vše bylo již v tuto chvíli funkční a relativně předělané, ale po nasazení kódu a kontrole jsem se rozhodl ještě upravit vycentrování slidů, pro lepší vizuál. ChatGPT mi pomohl i s tímto.
Nakonec jsem ještě chtěl doladit některé styly u prvků slideru, které nešlo přepsat klasickými Tailwind třídami. Požádal jsem ChatGPT o řešení tohoto problému s konkrétními hodnotami pro velikosti a barvu šipek a nabídl mi krásně dvě možnosti, ideální je samozřejmě ta druhá, přepsání CSS proměnných v CSS souboru.
Nějakou dobu jsem si ještě hrál s detaily,které se mi líbily nebo nelíbily, ale to už byla víceméně jen změna hodnot. Funkčnost a požadavky byly splněny samotným AI na základě několika požadavků.
Jazykové modely velmi dobře znají většinu programovacích jazyků, většinu jejich typických frameworků či knihoven. Tvůrci LLM se snaží pravidelnými aktualizacemi vynahradit jiné nedostatky této technologie, především, že ne vždy vám statisticky vypočítá to, co potřebujete a přesnost konečného výstupu se může značně lišit, takže ještě nám zbývá kus cesty, než budeme moci jako vývojáři odpočívat a nechat vše řešit umělou inteligenci.
Nicméně už v tuto chvíli je umělá inteligence v podobě velkých jazykových modelů přelomová, co se tvorby digitálního obsahu týče. Nejen vývojáři, ale všichni kdo se podílejí na tvorbě digitálního obsahu by měly rychle hledat možnosti, jak AI využít v jejich konkrétním oboru pro konkrétní workflow.
Konverzací s ChatGPT v tomto článku jsem chtěl ukázat na úplně tu základní metodu v menším rozsahu, jak každý vývojář může začít s umělou inteligencí pracovat a usnadnit si život. V budoucích článcích se podíváme na další metody a možnosti, jak AI v praxi využít.
Každý nový článek
u vás v emailu
Užitečné tipy z oblasti využití webu a online světa pro váš byznys a firmu.