Z prvního dílu máme hrubou představu o tom, jak vypadá společnost SkvělejMobil, pro kterou e-shop stavíme. Známe základní požadavky, víme, co by měl měl budoucí e-shop umět. Od klienta máme také souhlas s navrhovaným designem a z minulého dílu máme naplánovanou strukturu budoucího e-shopu a komunikaci s API. Můžeme se tedy směle pustit do tvorby uživatelské části. Nejdřív však musíme připravit rozhraní v Apiary.

Apiary a ngMockE2E

Nástroj Apiary byl podrobněji představen v 9. díle seriálu o Node.js, takže pokud slyšíte o Apiary poprvé, nejprve si přečtěte zmíněný článek.

S Apiary se pracuje velice snadno. První verze dokumentace k projektu je vidět na docs.zdrojak.apiary.io a samotný zápis v syntaxi apiary si lze prohlédnout na Githubu projektu v souboru apiary.apib.

Celá dokumentace je přehledně rozdělena do několika sekcí, které dále uvozují jednotlivá pravidla pro REST API. Každé pravidlo začíná jednoduchou větou, která popisuje význam pravidla. Později zde dodáme přehlednější popis a také seznam všech možností, které je možné v URL zadat a seznam všech případných odpovědí.

Pro každé pravidlo se vytváří odpověď s testovacími daty. Vytvářená aplikace v AngularJS pracuje zatím právě s těmito daty. Jakmile zjistíme, že v uživatelské části potřebujeme nějakou další hodnotu, stačí jen lehce upravit jeden řádek dokumentace v Apiary. Stejně tak můžeme zjistit, že potřebujeme třeba získávat data v trochu jiném formátu, i v tomto případě stačí drobná úprava na straně Apiary. Pokud budeme mít třeba dvě šablony detailu produktu a každá potřebuje trochu jiná data, vytvoříme v Apiary dva pravidla, která budou tato testovací data poskytovat. Je zřejmé, že tento způsob práce umožňuje velmi snadné úpravy šablon ve chvíli, kdy klient požaduje změny.

Jako příklad si lze uvést detail produktu. Zapsáno v Apiary vypadá pravidlo takto:

Detail produktu podle URL.
GET /products?url={url}
< 200
< Content-Type: application/json
{"name": "iPhone 4 32GB",
"url": "iphone-4-32gb",
"code": "AZ007",
"perex": "perex...",
"text": "text...",
"photos": [
  {"src": "/img/350x300.gif"},
  {"src": "/img/350x300.gif"}
],
"parameters": [
  {"name": "Operační systém", "values": ["iOS"]},
  {"name": "Barva", "values": ["černá", "bílá"]},
  {"name": "Digitální fotoaparát", "values": ["ano"]},
  {"name": "Rozlišení fotoaparátu", "values": ["8 Mpx"]},
  {"name": "Pohotovostní doba", "values": ["225 hodin"]},
  {"name": "MP3", "values": ["ano"]},
  {"name": "FM rádio", "values": ["ne"]},
  {"name": "HD video", "values": ["ano"]},
  {"name": "Rozměry", "values": ["115,2 x 58,6 x 9,3 mm"]},
  {"name": "Hmotnost", "values": ["137 g"]}
],
"variants": [
  {"name": "Černá barva"},
  {"name": "Bílá barva"}
],
"producer": "Apple",
"availability": "skladem",
"price": "15000",
"dph": "20"
}

Celou uživatelskou část programujeme bez serverové technologie pouze s klientským frameworkem a Apiary. Jakmile je uživatelská část dokončena a jsou v ní zaneseny všechny změny od klienta, dostaneme jednak přehlednou dokumentaci, ale hlavně máme k dispozici testovací data, která poté využijeme pro end2end testy.

V předposledním díle seriálu o Node.js bylo taky podrobně popsáno, jak je možné testovací data z Apiary použít pro lokální testování v AngularJS přes ngMockE2E. Tímto způsobem jsme se stali nezávislí na internetovém připojení a dostupnosti Apiary.io.

Implementace uživatelské části v AngularJS

Máme-li vytvořeno API v Apiary, můžeme pokročit k tvorbě uživatelské části. V první fázi vytvoříme a propojíme všechny šablony, které v uživ. části budeme používat.

Demo celé uživatelské části si můžete prohlédnout zde. K dispozici jsou i zdrojové kódy na Githubu v repozitory Zdroják v tagu eshop03 (jak stáhnout aktuální verzi přes Git k sobě bylo popsáno ve 4. díle seriálu o Node.js).

Nepočítám-li komentáře, tak pro propojení 10 šablon a jejich napojení na data z Apiary stačilo pouhých 50 řádků JavaScriptu (https://github.com/JakubMrozek/Zdrojak/blob/eshop03/public/js/controllers.js):

//layout - formular pro vyhledávání
function MenuSearchCtrl($scope, $location) {
  $scope.search = function() {
    $location.path('/vyhledavani/' + $scope.query);
  }
}

//layout - menu stránek
function MenuPagesCtrl($scope, api) {
  $scope.pages = api.page.index({fields: ['name', 'url']});
}

//layout - menu kategorií
function MenuCategoriesCtrl($scope, api) {
  $scope.categories = api.category.index();
}

//layout - nákupní košík
function MenuBasketCtrl($scope, basket) {
  $scope.price = basket.price();
}

//úvodní stránka
function IndexCtrl($scope, api) {
  $scope.products = api.product.index({homepage: true});
}

//vyhledávání
function SearchCtrl($scope, $routeParams, api) {
  $scope.query = $routeParams.query;
  $scope.products = api.product.index({query: $scope.query});
}

//detail stránky
function PageCtrl($scope, $routeParams, api) {
  $scope.page = api.page.show({url: $routeParams.page});
}

//detail kategorie
function CategoryCtrl($scope, $routeParams, api) {
  $scope.category = api.category.show({url: $routeParams.category});
  $scope.products = api.product.index({category: $routeParams.category});
}

//detail produktu
function ProductCtrl($scope, $routeParams, $location, api) {
  $scope.addToBasket = function(){
    $location.path('/kosik');
  }
  $scope.product = api.product.show({url: $routeParams.product});
}

//nákupní košík (1. krok objednávky)
function BasketCtrl($scope, $location, basket) {
  $scope.next = function() {
    $location.path('/zakaznicke-udaje');
  }
  $scope.products = basket.products();
}

//vyplnění údajů zákazníka (2. krok objednávky)
function CustomerCtrl($scope, $location) {
  $scope.next = function() {
    $location.path('/potvrzeni');
  }
}

//shrnutí (3. krok objednávky)
function SummaryCtrl($scope, basket) {
  $scope.price = basket.price();
  $scope.products = basket.products();
}

Zbytek aplikace tvoří šablony, pro které se použije Twitter Bootstrap (v praxi bychom samozřejmě použili zakázkový unikátní design, v rámci tohoto seriálu ale budeme používat právě framework od Twitteru). Zdrojový kód controllerů v AngularJS byl podrobněji rozebrán v posledních dílech seriálu o Node.js.

Nově zde používáme filter currency, který správně naformátuje ceny pro koruny. AngularJS obsahuje pravidla lokalizace pro mnoho jazyků a jedním z nich je i čeština. Pro aktivaci češtiny stačí načíst soubor i18n/angular-locale_cs-cz.js, který je součástí standardní distribuce.

Je e-shop vhodná aplikace pro AngularJS?

V reakci na seriál se občas objevují názory, zda bylo vhodné použít AngularJS i pro aplikace typu e-shop, které musí být indexovatelné vyhledávači. Tento typ aplikace jsem vybíral záměrně, abych ukázal, že aplikace v AngularJS automaticky neznamená, že je pro vyhledávače nepřístupná. Konec seriálu se bude věnovat její optimalizaci, a to včetně optimalizace aplikace i pro vyhledávače. Ukážeme si několik způsobů, jak to lze udělat.

Co dále

Řekněme, že je v tuto chvíli web připraven pro prezentaci u zákazníka. Ten se na ně podívá a přidá připomínky. Společně uživatelskou část vyladíme, jak to jen půjde. Jakmile dojdeme ke shodě, přidáme do uživatelské části logiku. To bude také tématem příštího dílu, kde budeme implementovat nákupní košík pomocí HTML5 Web Storage (samozřejmě včetně pokrytí jednotkovými testy).