Ve spolupráci s brněnskou firmou Procontent s. r. o. vyvíjíme webový portál Vybero, který zákazníkům napomáhá při výběru produktů. Jedná se o online rádce, který nesrovnává cenu produktů, ale jejich parametry a vlastnosti a na jejich základě je i hodnotí. Kromě samotných produktů nabízí Vybero i nespočet doporučení, jak si vybrat ten správný produkt včetně detailního popisu samotných parametrů, které mohou být pro nezasvěceného zákazníka matoucí. 

Vývoj

Ač se na první pohled může zdát, že Vybero je pouze jednou aplikací, není tomu tak. Během vývoje vznikly celkem tři aplikace, ze kterých se výsledné Vybero skládá. Jedná se o frontendovou aplikaci, kterou využívají zákazníci, backendovou aplikaci, která je mozkem celého systému a v neposlední řadě správcovskou aplikaci, která slouží k upravování obsahu dostupného zákazníkům, přidávání produktů či správě filtrací apod. Jedná se tak o komplexní systém s více různými typy uživatelů a různými pohledy na data, která obsahuje.

Optimalizace pro vyhledávače

Jedním z důležitých aspektů frontendové uživatelské aplikace bylo kvalitní SEO (Search engine optimalization - Optimalizace pro vyhledávače), aby bylo Vybero správně nabízeno ve výsledcích internetových vyhledávačů. Kromě doporučených SEO praktik, jako je např. používání správných sémantických HTML tagů při tvorbě webové aplikace, jsou definována i pravidla, podle kterých jsou některé části aplikace zahrnuty nebo vyloučeny z další analýzy webových crawlerů. 

Vybero je implementováno jako SPA (single-page application), a není tak defaultně zpracovatelné webovými crawlery, které se podílejí např. na indexaci stránek či náhledů na sociálních sítích. Disponuje tak funkcí SSR (server-side rendering), která způsobí, že webová stránka je sestavena na serveru, doručena a hydratována u klienta (prohlížeč) a následně již dynamicky běží na straně klienta.

Stránky na míru

Každá kategorie Vybera, např. pračky, je reprezentována stránkou. Redaktoři Vybera mají možnost konfigurovat obsah jednotlivých stránek aplikace co nejpřesněji k aktuální filtraci kategorie, díky čemuž lze například poskytnout detailnější popis vybraného výrobce daného produktu namísto obecného popisu. Kromě textového obsahu nabízí Vybero redaktorům možnost vytvářet karty s textem či tabulkami obsahujícími hodnocení parametrů produktu.

Technologie

Frontendové aplikace využívají framework Angular 2 s jazykem TypeScript. Interní komunikace jednotlivých aplikací probíhá asynchronně na základě principů reaktivního programování RxJs. Pro state management byla použita technologie NgRx. Správcovská aplikace využívá navíc Firebase pro autentizaci redaktorů a její uživatelské rozhraní je postaveno za pomoci knihovny Angular Material. 

Backendová část Vybera je implementovaná v jazyce Go a poskytuje API pro obě frontendové aplikace. Jelikož data Vybera obsahují velké množství produktů s různorodými parametry, byla pro ukládání dat zvolena dokumentová databáze Elastic Search.

Transformace procesů a projektový management

Tento projekt si z procesního hlediska prošel velkou transformací, a to k lepšímu. Na začátku byl veden neagilně (určitě jste slyšeli o tzv. Waterfall modelu vývoje) a cítili jsme, že je tam velký prostor pro zlepšení. Postupně jsme našemu klientu Jakubovi představili Scrum a s jeho pomocí jsme nastavili jasné a udržovatelné pracovní procesy. Klíčové v této fázi byly denní standupy a retrospektivy, kde jsme se po několika takovýchto iteracích dostali k čistě agilnímu vývoji. Jakub momentálně zastává roli Product Ownera, kdy si sám určuje priority vyvíjených features a představuje nám nové elementy a vize pro budoucnost tohoto projektu. Všichni tak jsme na stejné vlně a díky časté komunikaci dokážeme reagovat na jakékoliv změny či problémy daleko efektivněji než dříve.

Vývoj webových aplikací na míru

Chci vědět víc

Detaily projektu