Tvorba moderního e-shopu: Bower, Yeoman a Gemnasium

Po krátké odmlce se vrací seriál o tvorbě e-shopu. Tento díl bude věnován především nástroji Bower, který složí jako balíčkovací systém pro uživatelskou část, a také nástroji Yeoman pro scaffolding.

Seriál: E-shop pomocí moderních technologií (15 dílů)

  1. Úvodní analýza pro moderní e-shop 4.1.2013
  2. Návrh uživatelské části e-shopu 11.1.2013
  3. Tvorba uživatelské části e-shopu 18.1.2013
  4. Nákupní košík pomocí HTML5 Web Storage 25.1.2013
  5. Tvorba moderního eshopu: kategorie a parametrické hledání 1.2.2013
  6. Tvorba moderního e-shopu: dokončení uživatelské části 8.2.2013
  7. Tvorba moderního e-shopu: plánování administrace 15.2.2013
  8. Tvorba moderního e-shopu: správa objednávek 22.2.2013
  9. Tvorba moderního e-shopu: nahrávání obrázků k produktu 1.3.2013
  10. Tvorba moderního e-shopu: Bower, Yeoman a Gemnasium 15.7.2013
  11. Tvorba moderního e-shopu: HTML5 drag & drop a kategorie 29.7.2013
  12. Tvorba moderního e-shopu: zpracování chyb 12.8.2013
  13. Tvorba moderního e-shopu: Rich-Text Editing a dokončení administrace 26.8.2013
  14. Autentizace v single-page aplikacích 9.9.2013
  15. Autentizace v single-page aplikacích – serverová část 7.10.2013

Úvod

Zdrojové kódy tohoto dílu si můžete projít nebo stáhnout přes git příkazem git checkout -f eshop010.

Než budeme pokračovat v seriálu dále, seznámíme se s třemi nástroji, které nám výrazně pomohou při vývoji.

Bower

První z nich je balíčkovací systém Bower od Twitteru. Již známe systém npm, ten je však jen pro serverovou část. Bower v podstatě to samé, ale pro klientskou část. Přes tento nástroj nyní budeme spravovat všechny externí knihovny u klientského JavaScriptu. K dispozici je také adresář všech knihoven, které lze přes Bower instalovat (jsou zde téměř všechny, Bower je už standard).

Podobně jako snad všechny nástroje tohoto druhu je i Bower dostupný jako npm balíček a instaluje se takto:

npm install bower -g

Dále je jeho používání v podstatě identické jako používání nástroje npm, tedy např. instalace AngularJS bude vypadat takto:

bower install angular

V takové případě by se však AngularJS nainstaloval do rootu webu o úroveň níže, než je adresář public. Proto existuje konfigurační soubor .bowerrc, do kterého uvedeme informaci, kam chceme závislosti instalovat. Jeho obsah bude pro naše účely takový:

{ "directory": "public/components" }

Všechny závislosti jsou uvedeny v souboru bower.json, který plní stejnou funkci jako package.json pro npm. Od dnešního dílu kdykoliv si tedy budete chtít stáhnout zdrojové kódy daného dílu, musíte zavolat následně dva příkazy:

npm install
bower install

Pro tento projekt vypadá bower.json takto:

{
 "name": "Zdrojak",
 "version": "0.0.0",
 "appPath": "public",
 "dependencies": {
   "angular": "~1.0.7",
   "angular-bootstrap": "~0.4.0",
   "angular-i18n": "~1.0.7",
   "angular-resource": "~1.0.7"
 },
 "devDependencies": {
   "angular-mocks": "~1.0.7",
   "angular-scenario": "~1.0.7"
 }
}

K nástroji Bower i npm ještě jeden tip. Pokud chcete instalovat novou knihovnu z příkazové řádky, je dobré zadávat parametr –save, čímž se aktualizuje i soubor bower.json, resp. package.json.

Nyní již nepotřebujeme adresář public/lib a všechny závislosti externích knihoven se nainstalují do adresáře public/components.

Yeoman

Yeoman je mladý projekt, za nímž stojí několik známých osobností světa JavaScriptu, mimo jiné Addy Osmani či Paul Irish. Yeoman měl původně zajišťovat vše, co souvisí s workflow vývoje projektu, později však došlo k oddělení Yeomana od Boweru a Gruntu.

Bower jsme si představili před chvílí. O Gruntu v tomto seriálu již také hovořili (psali jsme si v něm task pro převod apiary.apib do JSON formátu). Jedná se o nástroj, který umožňuje vytvářet tasky pro různé časté operace, se kterými se programátoři setkávají, např. minifikace CSS, JavaScriptu, sloučení souborů, kombilace CoffeeScriptu, TypeScriptu, CSS preprocesorů atd. K dispozici je repozitář se stovkami pluginů pro snad všechny úlohy, které vás jen napadnou. Ke Gruntu se vrátíme ještě v závěru seriálu, až budeme náš e-shop posílat do produkce.

No a třetí nástroj je Yeoman. Ten se stará o scaffolding, tedy generování kódu podle předpřipravených šablon. Vzpomeňte na to, kolik úkolů byste udělali, když chcete vytvořit nový controller Product a následně pravidla pro URL /product:

  1. Vytvořit nový soubor s názvem controlleru Product.js, vložit ho do struktury aplikace.

  2. Vložit do souboru kód controlleru.

  3. Nějak soubor načíst, takže přidat ho třeba do index.html do elementu script.

  4. Přidat nové pravidlo do souboru public/js/app.js pro URL /product.

  5. Vytvořit novou šablonu product.html.

To je mnoho úkolů, které se neustále opakují. Díky Yeomanu tohle vše uděláte jedním příkazem:

yo zdrojak:route product

A to je vše! Pak už jen upravíte controller a šablonu podle toho, co v ní chcete mít, a je to.

Instalace Yeomana je triviální jako vše ostatní v tomto díle. Nainstaluje se jako balíček yo:

npm install yo -g

K tomu ještě potřebujeme tzv. generátor. Ten říká, co se má podle jakého příkazu vygenerovat. Generátory si samozřejmě můžete vytvořit sami podle podrobného návodu, ale mnohem jednodušší je využít už některý z generátorů, které jsou k dispozici. Takže zde naleznete generátory pro aplikaci nad AngularJS, Backbone, EmberJS a mnoho, mnoho dalších.

Pro náš projekt jsem si vytvořil generátor, jehož základem je oficiální generátor pro AngularJS. V dokumentaci najdete příkazy pro generování controlleru, routy, view, filteru, direktivy a servisy.

Jak vše vypadá můžete vidět zde (obsah vygenerovaných souborů je vidět v dokumentaci):

yeoman

Gemnasium

Na závěr zmíním ještě jeden velmi šikovný nástroj Gemnasium, který složí ke kontrole aktuálnosti používaných modulů.

V souboru package.json se definují moduly a jejich verze. Moduly se však neustále vyvíjejí, opravují se jejich chyby a přidávají se nové vlastnosti. Proto bychom měli používat co nejaktuálnější verze. Místo verze je možné použít hvězdičku a stáhne se tak vždy nejaktuálnější verze, nicméně takový přístup může celý projekt rozbít. Proto je lepší uvádět vždy první dvě číslice z verze a dále hvězdičku (např. 1.3.x), případně minimální podporovanou verzi s vlnovkou (např. ~1.3.3). Poslední číslice označení verze se totiž mění jen při opravách chyb.

Projekt Gemnasium právě řeší to, že nás upozorní, pokud je k dispozici nová verze. V případě tohoto e-shopu byla polovina balíčků neaktuálních, takže stačilo upravit verze v package.json, spustit testy a ověřit, že se nic nerozbilo. Takto vypadá projekt Zdroják na Gemnasium. Kromě Gemnasia existuje ještě podobný projekt David.

To však není vše. Pokud je balíček neaktuální a autor se o něj stará pečlivě a udržuje changelog, pak Gemnasium nabídne seznam změn mezi verzí v package.json a aktuální verzí. Např. framework pro testování Mocha od TJ Holowaychuka se změnil z verze 1.6 na verzi 1.12 a já si mohu pohodlně zkontrolovat, co se změnilo:

changelog

Co dále

Příště budeme pokračovat v tvorbě e-shopu. Dokončíme sekci produkty a budeme pracovat s kategoriemi, na kterých si ukážeme další novinky v HTML5, třeba jak na drag & drop.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 7

Přehled komentářů

honzamarek88 Chybové hlášky Angularu
Jakub Mrozek Re: Chybové hlášky Angularu
honzamarek88 Re: Chybové hlášky Angularu
vaclav.sir Díky za oba seriály
Jakub Mrozek Re: Díky za oba seriály
Igor Hlina Re: Díky za oba seriály
Jakub Mrozek Re: Díky za oba seriály
Zdroj: https://www.zdrojak.cz/?p=9223