Na začátku byl celkem jednoduchý prompt pro AI agenta JetBrains Junie. Něco ve smyslu „udělej single-page webovou stránku pro firmu vyvíjející software na míru postavenou na platformě Next.js a složenou z komponent MUI“. AI agent nějakou dobu pochroupal a záhy skutečně vyplivnul kód jednostránkového webu splňující moje požadavky. Měl vytvořené sekce, texty, stylování,...

A je tím pádem hotovo? No, k tomu ještě pořádný kus zbývá. Mám jasno v tom, pro co chci AI použít: především vygenerování základní kostry projektu. Návrh designu, rozložení stránky a textace jsou spíš startovní čára a inspirace.

Úpravy toho co vygenerovala AI

Čekal jsem od AI popravdě trochu modernější design. Na webech je dnes spíš k vidění čisté bílé pozadí a jednoduché prvky. Místo toho jsem dostal pozadí tmavé se zvláštními barevnými přechody. Po troše experimentování se vzhledem barevných přechodů, aby web nevypadal jako z roku 2000, jsem se jich rozhodl raději zbavit. Tmavé pozadí a celkový vizuální styl se mi ale nakonec zalíbil. Přeci jen odlišnost od ostatních někdy není na škodu. Ve vygenerovaných stylech jsem musel ještě doladit barevnost některých prvků, hlavně kvůli dostatečnému kontrastu a určité barevné sjednocenosti. Při použití vizuální knihovny MUI jsou tyto úpravy pěkně na jednom místě a přehledně po jednotlivých komponentách. Snadno se díky MUI dělaly i drobné úpravy odsazení a rozložení prvků.

Ve vygenerovaných sekcích hlavní stránky webu jsem pak spíš promazával než přidával. Nejsem příznivcem nekonečných jednostránek na kterých je úúúplně všechno... Sekce, které po této čistce zůstaly, jsem pak naplnil vlastními texty. Jasnovidná AI ještě není, takže pochopitelně nemůže vědět co já chci mít na webu napsané.

Tím se dostáváme ke složitějším otázkám. Jak spravovat obsah webu? A s tím související - jakým způsobem web publikovat? O druhé otázce jsem měl celkem jasno dopředu. Web bude exportovaný jako statická stránka, bez nějakého backendu. I z toho důvodu jsem na začátku zvolil jako platformu Next.js, který tento způsob přímočaře umožňuje.

Správa obsahu

Protože jsem nechtěl mít veškerý textový obsah nakódovaný napevno v javascriptu, poohlížel jsem se po metodách jak do řešení zakomponovat nějaký systém pro správu obsahu (CMS). Nakonec jsem objevil Decap CMS, který je možné nastavit přesně tak jak jsem si představoval. Jde v podstatě o hybridní model, kdy CMS není publikován s webem, ale je spustitelný pouze na lokálním prostředí ze zdrojových kódů webu.

Soubory s konfigurací CMS a vstupem do jeho uživatelského rozhraní jsou v adresáři zdrojového kódu, který není součástí publikace webu. Při spuštění lokálního Next.js serveru pro vývoj jsou zároveň vygenerovaným skriptem zmíněné soubory zkopírovány do adresáře „/public“ a tím je možné uživatelské rozhraní CMS na vlastním počítači otevřít. Při vypnutí Next.js serveru skript soubory CMS opět „uklidí", aby se nedostaly do publikace. Zároveň s Next.js serverem se také spouští lokální Decap CMS server, který zprostředkovává uložení obsahu vytvořeného v uživatelském rozhraní do Markdown souborů v určeném adresáři zdrojových kódů webu. Vytvořený obsah je pak uložen se zdrojovými kódy do GIT repozitáře.

concurrently "pnpm exec decap-server" "node ./scripts/cms-sync.mjs --watch & next dev"

Blog

Samotná konfigurace CMS nemusí být nijak složitá. Její rozsah záleží na různorodosti obsahu, který chceme tímto systémem spravovat. Například pro sekci blogu stačilo definovat kolekci obsahu určitého typu, určit položky metadat (název, datum, autor, fotka autora) a samotný text. Decap CMS podporuje i možnost lokalizace do více jazyků (vznikne buď více Markdown souborů v oddělených adresářích nebo jeden Markdown soubor obsahuje textové položky pro více jazyků, podle nastavení).

Tato sekce blogu byla jedním z prvních rozšíření původně jednostránkového webu. Celý princip je díky použitým technologiím velmi jednoduchý. V Next.js jsem definoval dvě cesty - přehled článků a jednotlivý článek. Obě cesty načtou všechny Markdown soubory v určeném adresáři zdrojových kódů. Přehled („/blog") z nich vygeneruje HTML stránku s odkazy na jednotlivé články. Druhá cesta („/blog/[nazev-clanku]") vygeneruje pro každý soubor HTML stránku a URL adresu daného blogového článku.

Kontaktní formulář

Další funkcionalitou, kterou chci zmínit je kontaktní formulář. Ten využívá moderní náhradu CAPTCHA ověření proti spamování roboty. Použil jsem systém Cloudflare Turnstile, který je možné nastavit na různou úroveň toho jak moc uživatele „otravuje". Já jsem pro kontaktní formulář zvolil nejméně invazivní metodu, kdy ověření jestli uživatel není robot probíhá jenom na pozadí. Uživatel nemusí nic potvrzovat a dokonce se mu nezobrazuje ve formuláři vůbec nic navíc. Když je uživatel vyhodnocen jako důvěryhodný, vygeneruje Cloudflare token, který přidá do skrytého pole ve formuláři.

O zpracování zaslaných dat se u webu, který nemá žádný backend server, stará tzv. serverless funkce. Jde o javascriptovou funkci hostovanou v cloudu, která se aktivuje jen při příchozím požadavku (v tomto případě z webového prohlížeče). Tato funkce ověří u služby Cloudflare, že token zaslaný s daty formuláře je platný a data nepocházejí z nedůvěryhodného zdroje. Data z formuláře jsou pak pomocí knihovny „nodemailer“ zaslaná přes e-mailový server služby GMail na kontaktní adresu firmy.

Provoz

Tím se blížím ke kýženému závěru a webová stránka má konečně obsahovou a funkční podobu jakou jsem zamýšlel. Nakonec napojím GIT repozitáře s kódy webu i obsluhou kontaktního formuláře na službu Renovate, aby všechny použité komponenty a knihovny dostávaly průběžné aktualizace a bezpečnostní záplaty.

A teď kam s tím? Já jsem se rozhodl pro provoz webu použít cloudové služby DigitalOcean. Pod jednou střechou tam můžu spravovat jak samotný statický obsah webu tak i serverless funkci pro obsluhu kontaktního formuláře. Obojí je propojeno přímo s repozitáři na GitHubu a změny v repozitářích jsou okamžitě automaticky a bez výpadku nasazeny do provozu. Třešničkou na dortu pak je fakt že celý web je hostován bezplatně. DigitalOcean umožňuje zdarma provoz 3 statických webů a určité množství strojového času běhu serverless funkcí, do kterého se obsluha kontaktního formuláře bez problému vejde.

Výhody a nevýhody

Celý popsaný způsob řešení firemního webu má pěknou řádku výhod. Všechna funkcionalita, správa i vzhled jsou podle mých představ nebo naprosto přizpůsobitelné bez často složitého ohýbání nějakého již hotového řešení. Velkým plusem je pro mě bezpečnost. Díky tomu, že publikovaný web nemá žádnou dostupnou administraci nebo databázi a jde pouze o statické stránky na CDN serverech, tak není příliš napadnutelný. Bonusem pak je bezplatný provoz. Jediný pravidelný náklad je poplatek za doménu.

Nakonec jsou tu i dvě nemalé nevýhody. Správa obsahu webu lokálně přes GIT repozitář rozhodně není pro laiky. A na rozdíl od existujících kompletních CMS řešení bylo potřeba web vytvořit od základu a každé další rozšíření funkcionality vyžaduje vývojářskou kapacitu. S tvorbou i rozšiřováním nicméně do určité míry pomáhá AI.

Jako vždy je tedy výsledné řešení vyvážením přínosů a nákladů podle důkladně promyšlených priorit a cílů.