Vytvoření vícejazyčného webu na objednávání turistických aktivit

O projektu

Byl jsem osloven klientem ohledně vytvoření webových stránek s nabídkou různých aktivit pro turisty v Praze. Poté, co jsme společně upřesnili jeho představy a požadavky na projekt, tak jsem v několika iteracích navrhl vhodný design.

Následně jsem webové stránky naprogramoval s použitím Reactu, Gatsby.js a SCSS na frontendu a Node.js s Express.js na backendu. Po vytvoření webu jsem se postaral o jeho nasazení a příležitostnou údržbu a aktualizaci. Také jsem později přidal několik menších vylepšení, jako například možnost filtrovat aktivity podle kategorií.

Mezi zajímavé části projektu patří třeba responzivní rozložení webu, podpora pro více jazyků (i když tato funkčnost zatím není využita, protože zatím chybí texty v dalších jazycích), nebo rezervační formulář, jehož vstupní pole lze individuálně přizpůsobit pro každou aktivitu.

Výsledek

Výsledkem projektu je fungující web, který používají skuteční zákazníci k ob­jed­ná­vá­ní aktivit. Můžete se sami podívat na hotové webové stránky, jenom v současnosti bohužel není možné si vyzkoušet podporu pro vícejazyčnost, protože obsah webu ještě nebyl přeložen a je zatím pouze v angličtině.

Můj přístup

Analýza požadavků

Po spolupráci s klientem na vyjasnění jeho potřeb a představ ohledně webových stránek jsme dospěli k následujícím hlavním požadavkům:

• Webové stránky by měly mít podporu pro více jazyků.
• Design by měl být jednoduchý a soustředit se na prezentaci aktivit.
• Web by měl být svižný, rychle se načítat a fungovat dobře na mobilních zařízeních.
• Mělo by být snadné funkčnost webových stránek v budoucnosti dále rozšířit, například integrací platební brány, která zákazníkům umožní provádět platby přímo na webu.
• Obsah webu bude aktualizován spíše zřídka.

S ohledem na tyto požadavky se jevily dva možné přístupy k vytvoření webových stránek: buď použít existující nástroj na tvorbu webu, nebo vyvinout web na míru. Bohužel bylo množství nástrojů na tvorbu webových stránek, které měly zároveň podporu pro více­ja­zyč­nost a umož­ňo­va­ly v budoucnu případně přidat možnost online plateb velmi omezené a žádný z nich plně neodpovídal představám klienta. Proto jsme se nakonec rozhodli jít cestou jed­no­du­ché­ho webu na míru. Výhodou tohoto řešení byla také možnost objednávkový formulář přizpůsobit přesně svým potřebám a celkově větší kontrola nad vzhledem a funkčností webu.

Také jsme se shodli na tom, že prozatím není potřeba, aby obsah webu byl editovatelný kli­en­tem, protože k aktualizacím textů nebude docházet často a nestálo by za to im­ple­men­to­vat administrační rozhraní nebo integrovat některý z existujících systémů pro správu obsahu.

Návrh designu

Po ujasnění celkové organizace webu a struktury jednotlivých stránek jsem vytvořil několik návrhů nastiňujících možné směřování designu. Podle požadavků klienta měl web mít jed­no­du­chý a minimalistický vzhled a klást důraz především na samotné aktivity.

V několika iteracích jsme došli k relativně čistému a mi­ni­ma­lis­tic­ké­mu designu, který klade důraz na fotografie aktivit, aby si návštěvník mohl udělat lepší představu o tom, jaké to je se jich zúčastnit. Stránka s popisem aktivity kromě fotografií obsahuje také další typy médií, jako například videa či mapy.

Součástí designu bylo také vytvoření jednoduchého loga, které zapadá do zbytku designu a má několik variací pro užití v různých kontextech, jako je například ikonka v záložce webu.

Vývoj webových stránek

Pro frontend webových stránek jsem se rozhodl použít React a framework Gatsby.js. Web neobsahuje žádný dynamický obsah a může díky tomu být staticky ge­ne­ro­ván, což zrychluje jeho načítání a snižuje nároky na server. Backend webu běží na Node.js s fra­me­wor­kem Ex­press.js a kromě dalšího poskytuje API pro odesílání formulářů. Použití Ja­va­Scrip­tu jak na front­en­du, tak na backendu umožňuje mezi nimi část kódu sdílet, například je možné po­u­žít stejný kód pro validaci formulářů jak v prohlížeči, tak na straně serveru.

Zajímavou částí tohoto projektu byla implementace podpory pro více jazyků (i když zatím tato funkčnost není využita, protože klient ještě nedodal přeložené texty). Podpora ví­ce­ja­zyč­nos­ti vyžadovala mimo jiné přizpůsobení způsobu načítání obsahu do Gatsby.js, rozšíření vestavěného routingu o podporu lokalizovaných URL a implementaci systému pro překlad textů, které jsou součástí rozložení webu.

Protože rezervační a kontaktní formulář jsou možná tou nejdůležitější částí webu, věnoval jsem jim obzvláštní pozornost. Součástí formulářů je například uživatelsky přívětivá validace zadaných hodnot, tlačítko pro odeslání reagující na aktuální status formuláře a ukládání neodeslaných dat formulářů do localStorage (aby uživatel nepřišel o zadaná data v případě nechtěného zavření nebo znovunačtení stránky).

Objednávkové formuláře jednotlivých aktivit jsou kon­fi­gu­ro­va­tel­né a umožňují přidávat rozdílná vstupní políčka pro každou aktivitu. Všechny formuláře také obsahují základní opatření pro omezení spamu, která na jednu stranu zbytečně neobtěžují uživatele se zapnutým JavaScriptem (což je naprostá většina), ale zároveň až překvapivě dobře brání v odeslání formuláře spambotům.

Nasazení a údržba

Poté, co byl web naprogramován, bylo ještě potřeba zřídit a na­kon­fi­gu­ro­vat webhosting, doménu a emailové schránky. Jako webhosting jsem vybral Roští.cz, který za slušnou cenu poskytuje SSH přístup do před­při­pra­ve­né­ho kontejneru s NGINX a Node.js. Nová pro mě byla problematika správného nastavení všeho okolo zasílání emailů, aby maily působily dů­vě­ry­hod­ně a pokud možno nekončily ve spamu (těm, kteří se tímto tématem již někdy zabývali, asi nebudou cizí pojmy jako SPF, DKIM nebo DMARC).

Po spuštění webových stránek jsem se dále staral o příležitostné aktualizace a přidal jsem několik menších vylepšení, jako například možnost filtrovat aktivity podle kategorie.

Co jsem se naučil

Díky tomuto projektu jsem měl možnost projít si všemi fázemi tvorby webových stránek, od prvotního nápadu klienta, přes analýzu požadavků, návrh designu, naprogramování webu, až po jeho nasazení a údržbu.

Při zpětném pohledu na projekt jsem měl na sebe vzít ještě aktivnější roli v úvodních fázích projektu. I když mým úkolem byl zejména design a vývoj webu, mohl jsem si nejspíše ušetřit část práce a poskytnout klientovi ještě větší hodnotu, kdybych před zjišťováním konkrétních funkcionálních a designových požadavků napřed pomohl s vytvořením alespoň rámcového business plánu a přesnější definicí hlavních cílů a podoby projektu.

Během vývoje webu jsem se naučil mnohé o tom, co obnáší vytvoření vícejazyčných we­bo­vých stránek v Reactu, jako je například implementace vícejazyčného routování a odkazování. I když framework Gatsby.js neměl vestavěnou podporu pro vícejazyčnost a bylo nutné strávit nějaký čas implementací vlastního řešení, tak jsem si velmi cenil jeho flexibilního rozhraní, které umožňovalo téměř na každém místě zasáhnout do výchozího chování a při­způ­so­bit jej potřebám projektu.

Další věc, kterou jsem si díky projektu uvědomil je, jak rychle se vyvíjí a mění některé Ja­va­Scrip­to­vé frameworky a knihovny. Už jenom během vývoje webových stránek jsem si prošel upgradem na novou verzi Gatsby.js, nemluvě o aktualizacích dalších závislostí projektu. Co si z toho odnáším je vždy dobře zvážit, zda je určitá závislost opravdu nutná a zda přináší do projektu dostatečnou hodnotu, aby to stálo za rizika, která jsou s jejím použitím spojená.

V neposlední řadě jsem se také naučil pár věcí ohledně vytváření responzivních webových stránek a organizace CSS stylů, o čemž také svědčí fakt, že už teď vidím některé věci, které bych příště udělal jinak.