Tytuł oryginału: Write Modern Web Apps with the MEAN Stack: Mongo, Express...

Tytuł oryginału: Write Modern Web Apps with the MEAN Stack: Mongo, Express, AngularJS, and Node.js

Tłumaczenie: Robert Górczyński

ISBN: 978-83-283-1758-1

Authorized translation from the English language edition, entitled: WRITE MODERN WEB APPS WITH THE MEAN STACK: MONGO, EXPRESS, ANGULARJS, AND NODE.JS; ISBN 0133930157; by Jeff Dickey; published by Pearson Education, Inc, publishing as Peachpit Press. Copyright © 2015 by Jeff Dickey.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.

Polish language edition published by HELION S.A. Copyright © 2015.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/noapinMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/noapin

http://helion.pl/rf/noapin

http://helion.pl/ro/noapin

http://helion.pl

http://ebookpoint.pl/r/4CAKF

SPIS TREŚCI

PRZEDMOWA .....................................................................................................................................9

WPROWADZENIE ........................................................................................................................... 10

ROZDZIAŁ 1 JAK ZMIENIA SIĘ NOWOCZESNA ARCHITEKTURA SIECI? ...................................................... 12Powstanie aplikacji statycznych .........................................................................................................14Poznaj grubego klienta ........................................................................................................................17

ROZDZIAŁ 2 DLACZEGO JAVASCRIPT JEST DOBRYM WYBOREM DLA NOWOCZESNYCH APLIKACJI? ..... 20Co to jest AngularJS? ...........................................................................................................................22Co to jest Node.js? ................................................................................................................................25Co to jest Express? ...............................................................................................................................33Co to jest MongoDB? ..........................................................................................................................35

ROZDZIAŁ 3 ROZPOCZYNAMY PRACĘ NAD PROJEKTEM APLIKACJI SPOŁECZNOŚCIOWEJ ................. 40Utworzenie statycznej imitacji strony wyświetlającej najnowsze posty .......................................42Użycie AngularJS w aplikacji .............................................................................................................43Dodawanie nowych postów ................................................................................................................46Co dalej? ................................................................................................................................................49

ROZDZIAŁ 4 UTWORZENIE API NODE.JS .......................................................................................................... 50Punkt wyjścia ........................................................................................................................................52Utworzenie postów za pomocą API ..................................................................................................54Obsługa modeli MongoDB za pomocą Mongoose .........................................................................55Użycie modeli Mongoose wraz z API ...............................................................................................56Co dalej? ................................................................................................................................................59

ROZDZIAŁ 5 INTEGRACJA NODE.JS I ANGULARJS ......................................................................................... 60Komponent $http .................................................................................................................................62Użycie $http do odczytu postów z API .............................................................................................63Udostępnianie pliku posts.html za pomocą Node.js ......................................................................64Użycie $http do zapisu postów w API ..............................................................................................65Zmiana kolejności wyświetlania postów ..........................................................................................66Uporządkowanie pliku server.js ........................................................................................................67Uporządkowanie kodu AngularJS .....................................................................................................71Co dalej? ................................................................................................................................................75

Poleć książkęKup książkę



6 SPIS TREŚCI

ROZDZIAŁ 6 AUTOMATYZACJA ZA POMOCĄ GULP .......................................................................................76Wprowadzenie do Grunt i Gulp ........................................................................................................ 78„Witaj, świecie” w Gulp ...................................................................................................................... 79Przygotowanie kodu JavaScript za pomocą Gulp ........................................................................... 80Kompilacja CSS za pomocą Gulp ...................................................................................................... 87Zadanie dev w Gulp ............................................................................................................................. 89Inne wtyczki Gulp ................................................................................................................................ 91Co dalej? ................................................................................................................................................ 92

ROZDZIAŁ 7 UTWORZENIE UWIERZYTELNIANIA W NODE.JS .......................................................................94Wprowadzenie uwierzytelniania na podstawie tokenu ................................................................. 96JSON Web Token (JWT) .................................................................................................................... 97Użycie BCrypt ....................................................................................................................................101Uwierzytelnianie z użyciem MongoDB ..........................................................................................103Co dalej? ..............................................................................................................................................106

ROZDZIAŁ 8 DODANIE ROUTINGU I UWIERZYTELNIANIA KLIENTA ......................................................... 108Routing ................................................................................................................................................110Utworzenie formularza logowania ..................................................................................................113Uwierzytelnianie Express .................................................................................................................116Zdarzenia AngularJS .........................................................................................................................119Uwierzytelnianie postów aplikacji społecznościowej ...................................................................121HTML5 pushstate ..............................................................................................................................123Rejestracja ...........................................................................................................................................124Wylogowanie ......................................................................................................................................125Zapamiętaj mnie ................................................................................................................................126Klucz zewnętrzny użytkownika .......................................................................................................127Co dalej? ..............................................................................................................................................128

ROZDZIAŁ 9 OBSŁUGA POWIADOMIEŃ ZA POMOCĄ WEBSOCKET ......................................................... 130Wprowadzenie do WebSocket .........................................................................................................132Jak działa WebSocket? .......................................................................................................................133Do czego można wykorzystać WebSocket? ...................................................................................134WebSocket w budowanej aplikacji społecznościowej ..................................................................135WebSocket w AngularJS ...................................................................................................................139Architektura WebSocket ..................................................................................................................141Dynamiczna nazwa hosta WebSocket ............................................................................................146Co dalej? ..............................................................................................................................................147




SPIS TREŚCI 7

ROZDZIAŁ 10 WYKONYWANIE TESTÓW E2E ................................................................................................... 148Konfiguracja narzędzia Protractor ..................................................................................................150Frameworki testowania w JavaScript ..............................................................................................151Utworzenie prostego testu Protractor ............................................................................................152Przygotowanie w narzędziu Protractor definicji oczekiwanego zachowania ...........................162Wtyczka chai-as-promised ...............................................................................................................164Kiedy należy wykonywać testy typu E2E? ......................................................................................165Co dalej? ..............................................................................................................................................166

ROZDZIAŁ 11 TESTOWANIE SERWERA NODE.JS ............................................................................................. 168To nie całkiem są testy jednostkowe ...............................................................................................170Framework Mocha dla Node.js ........................................................................................................171Kontroler Post ....................................................................................................................................173SuperTest .............................................................................................................................................174Router bazowy ....................................................................................................................................175Użycie routera bazowego wraz z SuperTest ...................................................................................176Modele w testach kontrolerów .........................................................................................................177Testowanie kontrolera z uwierzytelnieniem ..................................................................................179Pokrycie kodu .....................................................................................................................................181Polecenie npm test .............................................................................................................................183JSHint ...................................................................................................................................................184Co dalej? ..............................................................................................................................................185

ROZDZIAŁ 12 TESTOWANIE KODU ANGULARJS ............................................................................................. 186Użycie narzędzia Karma ...................................................................................................................188Bower ...................................................................................................................................................189Konfiguracja narzędzia Karma ........................................................................................................191Podstawowy test usługi .....................................................................................................................193Testowanie HTTP za pomocą narzędzia Karma ...........................................................................194Użycie narzędzia Karma do przetestowania kontrolera ..............................................................196Testowanie za pomocą komponentów spy ....................................................................................200Co dalej? ..............................................................................................................................................202

ROZDZIAŁ 13 WDROŻENIE W HEROKU ............................................................................................................. 204Platforma jako usługa ........................................................................................................................206Jak działa Heroku? .............................................................................................................................20712 czynników w aplikacji ..................................................................................................................208Wdrożenie aplikacji w Heroku ........................................................................................................209




8 SPIS TREŚCI

MongoDB w Heroku .........................................................................................................................211Redis w Heroku ..................................................................................................................................212Kompilacja zasobów ..........................................................................................................................214Klaster Node.js ...................................................................................................................................216Co dalej? ..............................................................................................................................................217

ROZDZIAŁ 14 WDROŻENIE W DIGITAL OCEAN ............................................................................................... 218Co to jest Digital Ocean? ..................................................................................................................220Architektura jeden kontra wiele serwerów ....................................................................................221Fedora 22 .............................................................................................................................................222Utworzenie serwera ...........................................................................................................................223Instalacja Node.js ...............................................................................................................................225Instalacja MongoDB ..........................................................................................................................226Instalacja Redis ...................................................................................................................................227Uruchomienie aplikacji społecznościowej .....................................................................................229Uruchomienie aplikacji społecznościowej za pomocą systemd ..................................................230Wdrożenie bez przestoju serwera ....................................................................................................231Migracja do architektury wieloserwerowej ....................................................................................235Co dalej? ..............................................................................................................................................237Podsumowanie ...................................................................................................................................238

SKOROWIDZ ................................................................................................................................. 239




ROZDZIAŁ 3.

Rozpoczynamy pracęnad projektemaplikacji społecznościowej




UTWORZENIE STATYCZNEJ IMITACJI STRONY WYŚWIETLAJĄCEJ NAJNOWSZE POSTY 41

Skoro poznałeś już komponenty tworzące stos MEAN, w tym rozdzialewykorzystamy je do zbudowania praktycznej aplikacji.

Wspomniana aplikacja będzie podobna do serwisu Twitter.Na głównej stronie będą wyświetlane najnowsze posty. Ponadto każdyużytkownik otrzyma stronę profilu, na której zostaną wyświetloneutworzone przez niego posty. Gdy będziesz poznawać różne elementyaplikacji, będę omawiać jej kolejne funkcje, takie jak uaktualnianiena żywo za pomocą WebSocket.

Pracę rozpoczniemy od przygotowania strony wyświetlającejnajnowsze posty. Posty te pozostaną anonimowe aż do chwilizaimplementowania pewnego mechanizmu uwierzytelniania.




42 ROZDZIAŁ 3. ROZPOCZYNAMY PRACĘ NAD PROJEKTEM APLIKACJI SPOŁECZNOŚCIOWEJ

UTWORZENIE STATYCZNEJ IMITACJI STRONYWYŚWIETLAJĄCEJ NAJNOWSZE POSTYPierwszym krokiem jest utworzenie za pomocą HTML i Bootstrap (http://getbootstrap.com/)statycznej imitacji strony. Utwórz więc nowy katalog dla aplikacji, a następnie umieść w nim pliko nazwie posts.html zawierający przedstawiony poniżej kod HTML.

<!DOCTYPE html><html><head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/ css/bootstrap.min.css"></head><body> <div class='container'> <h1>Najnowsze posty</h1> <ul class='list-group'> <li class='list-group-item'> <strong>@dickeyxxx</strong> <span>Node rz dzi!</span> </li> <li class='list-group-item'> <strong>@jeffdickey</strong> <span>Testujemy AngularJS...</span> </li> </ul> </div></body></html>

Teraz wyświetl ten dokument HTML w przeglądarce internetowej. Powinieneś otrzymać wynikpokazany na rysunku 3.1. Lubię rozpoczynać budowę wszystkich aplikacji AngularJS, stosującpowyższe podejście — najpierw umieszczam na stronie statyczny kod HTML, a następnie zastępujęgo dynamicznym kodem AngularJS.

RYSUNEK 3.1.Strona wyświetlającanajnowsze posty




UŻYCIE ANGULARJS W APLIKACJI 43

UŻYCIE ANGULARJS W APLIKACJIFramework AngularJS pozwala na dołączanie obiektów JavaScript do modelu DOM (czyli po prostuelementów HTML). W kontrolerze przeprowadzasz połączenie obiektów z tak zwanym $scopeoraz definiujesz sposób jego wyświetlenia w kodzie HTML.

Przed znacznikiem zamykającym </body> umieść polecenie dołączające framework AngularJS:

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script>

Teraz możesz zadeklarować element <body> jako aplikację AngularJS:

<body ng-app='app'>

Pozostało już tylko zdefiniowanie dopasowanego modułu. Operację tę przeprowadzamyw znaczniku <script> umieszczonym po znaczniku importującym framework AngularJS:

<script> angular.module('app', [])</script>

W tej części książki będziemy tworzyć kod wewnątrz znacznika <script> znajdującego sięw dokumencie HTML, zamiast odwoływać się do zewnętrznych plików JavaScript. Takie rozwiązaniemoże wydawać się niechlujne, ale to tylko stan przejściowy, który ulegnie zmianie, gdy wykorzystamyNode.js do obsługi kodu HTML.

Moduły pozwalają na rozdzielenie kodu AngularJS. Powyżej mamy deklarację modułu.Pierwszy argument to nazwa modułu, natomiast drugi to tablica wymieniająca moduły, od którychzależy działanie modułu właśnie tworzonego. Moduły wykorzystujemy w celu uzyskania dostępudo komponentów, takich jak ngAnimate (narzędzia animacji), ngRoute (działający po stronie klientarouter dla aplikacji w postaci pojedynczej strony), lub własnych modułów. Do modułów jeszczewrócimy. Teraz zapamiętaj, że tworzona aplikacja musi być zadeklarowana jako moduł.

W celu zadeklarowania kontrolera wywołujemy metodę .controller() w egzemplarzumodułu. Metoda ta pobiera dwa argumenty: nazwę i funkcję używaną do zbudowania egzemplarzakontrolera. We wszystkich komponentach AngularJS stosowany jest ten sam wzorzec.

Zmodyfikuj znacznik <script>, aby przedstawiał się następująco:

<script> var app = angular.module('app', []) app.controller('PostsCtrl', function ($scope) { $scope.posts = [ { username: 'dickeyxxx', body: 'Node rz dzi!' }, { username: 'jeffdickey', body: 'Testujemy AngularJS...' } ] })</script>





Moduł aplikacji jest przechowywany w zmiennej app. Utworzyliśmy w nim kontroler o nazwiePostsCtrl, który zawiera tablicę przedstawiającą posty wyświetlone na stronie HTML.

Podczas zadeklarowania kontrolera wykonaliśmy operację, która w świecie AngularJS jestokreślana mianem wstrzyknięcia zależności $scope.

Utworzenie kontrolera (lub innego komponentu AngularJS) wymaga zadeklarowania funkcji,podobnie jak to zrobiliśmy wcześniej. Kiedy deklarujesz argumenty, AngularJS wyszukuje je napodstawie podanych nazw. W przypadku zmiany $scope na $foobar może się pojawić komunikato błędzie (choć jeszcze nie w utworzonym dotąd kodzie, ponieważ kontroler nie został wczytany).Według mnie wstrzykiwanie zależności to jedna z najważniejszych możliwości oferowanychprzez AngularJS.

Czym jest $scope? Jest to po prostu obiekt, do którego masz dostęp zarówno w kodzie HTML,jak i kontrolerze.

Więcej przykładów zależności poznasz w dalszej części książki. W tym momencie zawartośćtablicy $scope.posts po prostu wyświetlimy na stronie. Przedstawiony poniżej kod HTMLumieść na stronie (istniejący statyczny kod HTML pozostaw w celach porównawczych):

<div ng-controller='PostsCtrl'> {{ posts }}</div>

Gdy dodasz powyższy kod, na stronie powinieneś otrzymać dane w formacie JSON przedstawiającezawartość tablicy $scope.posts zdefiniowanej w kontrolerze. Wewnątrz nawiasów klamrowychmożna umieścić kod JavaScript, więc jeśli chcesz wyświetlić jedynie treść pierwszego postu,to zmodyfikuj kod w następujący sposób:

<div ng-controller='PostsCtrl'> {{ posts[0].body }}</div>

Pamiętaj, że podczas współdzielenia danych kontrolera z widokiem używamy $scope.Z kolei podczas odwoływania się z poziomu widoku do danych kontrolera opuszczamy $scope.

Skoro dotarliśmy tak daleko, możemy zakończyć „angularyzację” strony, przynajmniej jejstatycznej wersji. Oto kod źródłowy ukończonej strony:

<!DOCTYPE html><html><head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/ bootstrap.min.css"></head><body ng-app='app'> <div ng-controller='PostsCtrl' class='container'> <h1>Najnowsze posty</h1> <ul class='list-group'> <li ng-repeat='post in posts' class='list-group-item'> <strong>@{{ post.username }}</strong> <span>{{ post.body }}</span> </li> </ul>




UŻYCIE ANGULARJS W APLIKACJI 45

</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script> <script> var app = angular.module('app', []) app.controller('PostsCtrl', function ($scope) { $scope.posts = [ { username: 'dickeyxxx', body: 'Node rz dzi!' }, { username: 'jeffdickey', body: 'Testujemy AngularJS...' } ] }) </script></body></html>





DODAWANIE NOWYCH POSTÓWNa obecnym etapie pracy połączyliśmy kod z AngularJS w taki sposób, aby kontroler mógłdostarczać dane, które następnie będą wyświetlone przez widok. Jednak teraz dane pozostajądokładnie takie same jak w przygotowanej na początku statycznej wersji strony.

Potrzebny jest nam element na stronie pozwalający użytkownikom dodawać nowe posty.Jeżeli nowy element zostanie umieszczony w tablicy $scope.posts, AngularJS automatycznie

uaktualni widok w celu wyświetlenia tego elementu. Dlatego też gdy umieścimy na stronie element<input> i przycisk pozwalający na dodanie nowego postu, wprowadzone przez użytkownika danetrzeba dodać do tablicy.

Aby zilustrować tę koncepcję, dodamy przycisk na stronie. Umieść go przed znacznikiem <ul>o klasie list-group:

<button ng-click='addPost()' class='btn btn-default'>Dodaj post</button>

Dyrektywa ng-click jest zwykle używana do wywoływania funkcji w $scope. W tym momenciekliknięcie przycisku nie powoduje żadnej reakcji, ale po zdefiniowaniu funkcji będzie można dodaćnowe posty do już istniejących. W kontrolerze umieść następujący kod:

$scope.addPost = function () { $scope.posts.unshift({ username: 'dickeyxxx', body: 'Tre nowego postu!' })}

Wykorzystana metoda unshift() to metoda JavaScript, która powoduje umieszczenie nowegoelementu na początku tablicy. Po wprowadzonych zmianach kliknięcie przycisku Dodaj postspowoduje dodanie elementów do listy (patrz rysunek 3.2).

RYSUNEK 3.2.Oparta na AngularJSstrona wyświetlającanajnowsze posty




DODAWANIE NOWYCH POSTÓW 47

Ponieważ nie utworzyliśmy żadnego kodu odpowiedzialnego za uaktualnienie listy po zmianietablicy $scope.posts, zastosowane podejście niewątpliwie pozwala na wyraźne oddzielenie logikiuaktualniającej dane od logiki widoku. Jeżeli posty zostaną uaktualnione przez operację usunięciapostu, wywołanie Ajax lub informacje WebSocket, to zajdzie potrzeba uaktualnienia $scope.posts,a AngularJS samodzielnie zajmie się uaktualnieniem widoku.

Na stronie musimy jeszcze umieścić znacznik <input> pozwalający użytkownikowi na dodanie treścinowego postu. W tym celu dodajemy znacznik <input>, dołączamy jego dane do obiektu $scope, którynastępnie powiązujemy z funkcją addPost(). Przed przyciskiem Dodaj post umieść następujący kod HTML:

<input ng-model='postBody' class='form-control' />

Dyrektywa ng-model powoduje powiązanie danego elementu z podaną właściwością w $scope.Jeżeli teraz w kontrolerze uzyskasz dostęp do $scope.postBody, to otrzymasz dane wprowadzonew nowo dodanym polu tekstowym.

Aby wykorzystać dane, które zostały wprowadzone przez użytkownika, zamiast danych na stałezdefiniowanych wcześniej w kodzie, w następujący sposób uaktualnij funkcję addPost():

$scope.addPost = function () { $scope.posts.unshift({ username: 'dickeyxxx', body: $scope.postBody })}

Dane wprowadzone przez użytkownika w nowo dodanym znaczniku <input> będą stanowiłytreść postu.

Niedogodność przygotowanego rozwiązania wiąże się z faktem, że zawartość pola tekstowegonie jest zerowana po dodaniu postu. Można to łatwo naprawić przez przypisanie w funkcji addPost()wartości null właściwości $scope.postBody:

$scope.postBody = null

Ponieważ dołączanie danych jest dwukierunkowe, przypisanie dowolnej wartoścido $scope.postBody spowoduje uaktualnienie elementu <input>, i na odwrót.

Jedyny problem zastosowanego podejścia polega na tym, że użytkownik może tworzyć pusteposty. Rozwiązaniem tego problemu jest opakowanie wywołania funkcji addPost() następującymwyrażeniem warunkowym:

if ($scope.postBody) {

Poniżej przedstawiam pełny kod źródłowy aplikacji wraz z dodanym kodem Bootstrap w celunadania stylu stronie:

<!DOCTYPE html><html><head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/ bootstrap.min.css"></head><body ng-app='app'> <div ng-controller='PostsCtrl' class='container'> <h1>Najnowsze posty</h1>





<form role='form'> <div class='form-group'> <div class='input-group'> <input ng-model='postBody' class='form-control' /> <span class='input-group-btn'> <button ng-click='addPost()' class='btn btn-default'> Dodaj post</button> </span> </div> </div> </form> <ul class='list-group'> <li ng-repeat='post in posts' class='list-group-item'> <strong>@{{ post.username }}</strong> <span>{{ post.body }}</span> </li> </ul> </div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script> <script> // Utworzenie modułu app. var app = angular.module('app', []) // Utworzenie modułu PostsCtrl. // Wstrzyknięcie zależności $scope. app.controller('PostsCtrl', function ($scope) { // Wykonanie funkcji nastąpi po kliknięciu przycisku "Dodaj post". $scope.addPost = function () { // Dodany będzie jedynie post zawierający treść. if ($scope.postBody) { // Umieszczenie nowego postu na początku tablicy $scope.posts. $scope.posts.unshift({ username: 'dickeyxxx', body: $scope.postBody // Treścią postu będzie tekst wprowadzony przez użytkownika. }) // Usunięcie zawartości pola. $scope.postBody = null } } // Dane początkowe. $scope.posts = [ { username: 'dickeyxxx', body: 'Node rz dzi!' }, { username: 'jeffdickey', body: 'Testujemy AngularJS...' } ] }) </script></body></html>




CO DALEJ? 49

CO DALEJ?W tym momencie masz w pełni funkcjonującą aplikację przeznaczoną do publikowania pewnychinformacji. Na pewno masz pełną świadomość największego problemu utworzonej aplikacji, czylibraku możliwości zapisania danych. Posty zostaną trwale utracone po zamknięciu przeglądarkiinternetowej przez użytkownika. Wprawdzie posty można zapisać w lokalnym magazynie danychprzeglądarki, ale wówczas nie będzie można współdzielić danych z innymi użytkownikami.(Współdzielenie jest niezwykle ważnym aspektem w aplikacjach społecznościowych).

W następnym rozdziale opracujemy więc API, które pozwoli aplikacji na zapisywanie danych.Z kolei w rozdziale 5. zintegrujemy zbudowaną aplikację AngularJS z API Node.js, które równieżprzygotujemy.




SKOROWIDZ

AAjax, 14algorytm

BCrypt, 101algorytm hash, 101

AMQP, 143AngularJS, 22

testowanie kodu, 186WebSocket, 139

API, 16API Node.js, 50aplikacje

MEAN, 9statyczne, 14

architekturaoparta na zdarzeniach, 28sieciowa, 12

infrastruktura, 17modularność, 18prototypowanie, 18ustandaryzowane narzędzia, 17wydajność, 17

WebSocket, 141wieloserwerowa, 235

automatyczny sharding, 37automatyzacja, 76

Bbaza danych MongoDB, 37bazy danych, 34

centralne, 236oparte na dokumentach, 35

BCrypt, 101BDD, 171błąd o kodzie 404, 115Bootstrap, 42Bower, 189

Ccentralne bazy danych, 236chmura, 220ciągła integracja, continuous integration, 183CommonJe, 29CSS, 87

Ddebuger Protractor, 159demon mongod, 38Digital Ocean, 218, 220

tworzenie konta, 223dodawanie postów, 46dokumenty, 35dołączanie narzędzia Uglifier, 83DOM, 22droplet, 224dynamiczna nazwa hosta, 146dyrektywa

ng-click, 46ng-controller, 120ng-model, 47ng-repeat, 23

działaniearchitektury sieciowej, 17Heroku, 207

Eelement

<body>, 43<input>, 47<li>, 23<ul>, 23

Express, 33




240 SKOROWIDZ

FFedora 22, 222filtr beforeEach, 197format

BSON, 36JSON, 24JWT, 97

formularz logowania, 113, 159framework

AngularJS, 22Express, 52Jasmine, 151jQuery, 22Mocha, 151, 171QUnit, 151

frameworki testowania, 151funkcja

.login(), 114addPost(), 47create(), 200createUser(), 124encode(), 97fetch(), 200inject(), 193publish(), 143

Ggruby klient, thick client, 17Grunt, 78Gulp, 76, 78

kompilacja CSS, 87przygotowanie kodu, 80wtyczki, 91zadanie dev, 89

gulp-nodemon, 89

Hhasło, 99Heroku, 204

12 czynników, 208MongoDB, 211panel administracyjny, 207Redis, 212wdrożenie aplikacji, 209

HTML, 42HTML5 pushstate, 123

Iimitacja strony, 42informacje

o błędzie, 155o zalogowanym użytkowniku, 118

instalacjaBower, 189gulp-nodemon, 89Karmy, 191MongoDB, 38, 226Node.js, 30, 225pakietu Express, 33Redis, 227

integracja Node.js i AngularJS, 60

JJasmine, 151język JavaScript, 14jQuery, 22JSHint, 184

Kklaster Node.js, 216klient $http, 62klucz zewnętrzny użytkownika, 127kod Redis, 212kolekcje, 35kompilacja, 84

CSS, 87zasobów, 214

komponent $http, 62komponenty

spy, 200stosu MEAN, 21

komunikat o błędzie, 83konfiguracja narzędzia

Karma, 191Protractor, 150, 153

kontrolerApplicationController, 126Post, 173PostsCtrl, 44




SKOROWIDZ 241

LLinux, 222logowanie, 113lokalizator Protractor, 157

Łłącze logowania, 157

Mmapa źródła, 85MEAN, 9

AngularJS, 22Express, 33MongoDB, 36Node.js, 25

mechanizm cookies, 96menedżer npm, 29migracja do architektury wieloserwerowej, 235mobilne API, 16Mocha, 151model DOM, 22modele

MongoDB, 55Mongoose, 56w testach kontrolerów, 177

MongoDB, 35baza danych, 38dokument, 38hierarchia danych, 38instalacja, 38kolekcja, 38uwierzytelnianie, 103wstawianie dokumentów, 39wykonywanie zapytań, 39

Mongoose, 55

Nnarzędzie

Heroku, 210JSHint, 184Karma, 188Protractor, 150SuperTest, 174Uglifier, 82

Node.js, 25bazy danych, 34framework Mocha, 171instalacja, 30integracja z AngularJS, 60serwer WWW, 31środowisko produkcyjne, 26testowanie serwera, 168tworzenie API, 50udostępnianie pliku, 64uwierzytelnianie, 94użycie modułów, 29wydajność, 27

nowoczesne aplikacje, 20

Oobiekt

$scope, 44mockPostsSvc, 198

obietnica, 62obsługa

modeli MongoDB, 55powiadomień, 130pushstate, 123uwierzytelniania, 104wątków, 28żądań API, 54żądań GET, 179żądań POST, 179

odczyt postów, 63

PPaaS, platform as a service, 206pakiet

blanket, 181body-parser, 52jwt-simple, 97

paneladministracyjny, 207dropletu, 224

panoramowanie, 14platforma jako usługa, PaaS, 206plik

.jshintrc, 184api.js, 176




242 SKOROWIDZ

plikapp.js, 80, 84app-express.js, 33config.js, 116css.js, 88foo.js, 29gulpfile.js, 88making_a_post.spec.js, 152, 158module.js, 81package.json, 52post.js, 55posts.html, 42, 64posts.js, 173posts.svc.js, 81protractor.conf.js, 153routes.js, 110server.js, 55, 58, 67user.js, 116websockets.js, 136

pokrycie kodu, 181polecenia systemd, 228polecenie

curl, 54, 104ensureIndex, 38heroku logs, 210mongo, 38npm test, 183

ponowna kompilacja, 84posty

kolejność wyświetlania, 66odczyt, 63powiadamianie o publikacji, 136zapis, 65

preprocesor CSSLess, 87Sass, 87Stylus, 87

programowanie w stylu BDD, 171projekt aplikacji społecznościowej, 40protokół WebSocket, 134Protractor

konfiguracja, 150, 153lokalizator, 157oczekiwane zachowania, 162tworzenie testu, 152uruchomienie Node.js, 155

usunięcie zawartości bazy danych, 160utworzenie postu, 160

przeniesienie koduAngularJS, 72API, 68

przestrzenie nazw, 69publikowanie zdarzeń, 145

QQUnit, 151

Rrejestracja, 124repozytorium Git, 214router bazowy, 175routing, 108, 110równoważenie obciążenia, 235

SSass, 87serwer

chmury, 220Redis, 212

sharding, 37sieć prywatna, 236skalowanie

pionowe, 37poziome, 37

spaghetti JavaScript, 15startup, 25statyczna imitacja strony, 42stos MEAN, 9, 21styl strony, 47Stylus, 87

Śśrodowisko

open source, 25produkcyjne, 25typu startup, 25




SKOROWIDZ 243

Ttestowanie

HTTP, 194kodu AngularJS, 186kontrolera z uwierzytelnieniem, 179kontrolerów, 196serwera Node.js, 168usługi, 193

testyE2E, 148, 152, 165funkcjonalne, 152jednostkowe, 170

tęczowa tablica, rainbow table, 101token, 96, 97

JWT, 97trasy, 69tworzenie

API Node.js, 50dropletu, 224formularza logowania, 113postów, 54serwera, 223serwera WWW, 31statycznej imitacji strony, 42testu protractor, 152tokenów, 97uwierzytelniania, 94

typ ObjectId, 36

Uudostępnienie zasobów statycznych, 71Uglifier, 82układ graficzny, 70uporządkowanie kodu, 71uruchomienie aplikacji społecznościowej, 229, 230usunięcie zawartości bazy danych, 160uwierzytelnianie, 94

klienta, 108mechanizm cookies, 96postów, 121token, 96z użyciem MongoDB, 103

użycie$http, 63, 65AngularJS, 43BCrypt, 101

JWT, 98klastra Node.js, 216modeli Mongoose, 56MongoDB, 38narzędzia Karma, 188, 196routera bazowego, 176

Wwartość null, 197wdrożenie aplikacji, 209

bez przestoju, 231w Digital Ocean, 218w Heroku, 204

WebSocket, 130, 132architektura, 141dynamiczna nazwa hosta, 146nawiązanie połączenia, 135w AngularJS, 139zapewnienie bezpieczeństwa, 141

weryfikacja hasła, 99wstrzyknięcie zależności $http, 63wtyczka

chai-as-promised, 164Redis To Go, 212

wtyczki Gulp, 91wydajność w Node.js, 27wylogowanie, 125wyświetlanie postów, 66wywołania zwrotne, 29

Zzapis postów, 65zarejestrowanie błędu, 85zasoby statyczne, 71zdarzenia, 28

AngularJS, 119ZeroMQ, 143zmienna NODE_ENV, 116znacznik, Patrz elementznak $, 62

Żżądanie

GET, 68POST, 68




244 SKOROWIDZ




http://program-partnerski.helion.pl

Tytuł oryginału: Write Modern Web Apps with the MEAN Stack: Mongo, Express...

Documents

Transcript of Tytuł oryginału: Write Modern Web Apps with the MEAN Stack: Mongo, Express...