w Praktyce
10 godz. 44 min · Node.js · Full-stack i Programowanie
Piotr PalarzWeb DeveloperW kursie tym poznasz platformę Node.js od podstaw, aż po bardziej zaawansowane koncepcje. Zaczniemy od omówienia czym jest Node, a także jakie może być zastosowanie tej technologii. Następnie przejdziemy przez proces instalacji i napisanie swojego pierwszego skryptu. Już na samym początku dokładnie omówimy tworzenie własnych modułów, gdyż jest to wiedza niezbędna, by dobrze zrozumieć funkcjonowanie Node. Następnie dowiesz się czym są zdarzenia, jak działa model “publish / subscribe”, a także czym jest “event-driven development”. Chwilę później omówimy pracę z buforami, stream’ami, a także ze standardowym wejściem i wyjściem. Ta wiedza pozwoli Ci zrozumieć jak tworzone aplikacje mogą otrzymywać od użytkownika dane oraz jak je wyświetlają.
Niezwykle ważnym rozdziałem będzie ten, poświęcony pracy z systemem plików. Szczególnie dla dewelopera, pracującego dotychczas z językiem JavaScript wyłącznie w środowisku przeglądarki internetowej. Node pozwala bowiem tworzyć nowe pliki, zapisywać w nich dane oraz odczytywać i usuwać pliki i katalogi. Przy wszystkich tych operacjach, niezwykle ważna jest jednak asynchroniczna natura Node. Dowiesz się jak działa, a także jakie są jej zalety. Na tym etapie nie zabraknie oczywiście praktycznego projektu, którym będzie aplikacja typu CLI (Command Line Interface). Pozwoli nam ona grupowo zmienić nazwy wielu plików, według podanego wzorca.
W kolejnym rozdziale poruszymy fundamentalną dla Node kwestię, mianowicie tworzenie serwerów sieciowych. Zaczniemy od najniższego poziomu, tworząc prosty serwer bazujący na protokole TCP/IP. Wiedza w jaki sposób Node radzi sobie z takim zadaniem, pozwoli później lepiej zrozumieć wyższe warstwy, takie jak np. HTTP czy WebSockets. Chwilę później stworzymy swój pierwszy serwer HTTP, do którego będzie można wysyłać zapytania wprost z przeglądarki internetowej. Omówimy również jak w Node wykorzystać bezpieczne szyfrowanie HTTPS.Na tym etapie będziesz już miał solidną wiedzę jak pracować z Node, jednak zanim przejdziemy dalej, zatrzymamy się, by omówić jak dokładnie działa Node.js, a także jak ta platforma została zbudowana. Dwie dość obszerne lekcje, będą być może jednymi z najważniejszych w tym kursie. Dowiesz się w nich czym jest, a także jak działa jednowątkowa pętla zdarzeń, czym jest proces i wątek, a także zobaczysz kod źródłowy Node.js i wszystkie bloki budulcowe, z jakich Node się składa. To naszym zdaniem niezwykle ważny temat, często jednak pomijany w wielu materiałach. Dzięki dogłębnemu zrozumieniu jednowątkowej natury języka JavaScript i asynchroniczności Node, będziesz mógł tworzyć dużo lepsze aplikacje.
Node.js posiada kilkanaście wbudowanych modułów, z których w dowolnej chwili można skorzystać. Wszystkie jednak dają nam dużą, niskopoziomową kontrolę, ale czasami sporo kodu należy napisać, by zrealizować jakieś zadanie. Jest to jednak świadomy wybór twórców Node, gdyż całą resztę świetnych rozwiązań, dopisuje nieustannie ogólnoświatowa społeczność deweloperów. Zdecydowana większość z modułów ląduje w rejestrze npm. Jest to genialny package manager, który pozwoli nam wyszukiwać, pobierać i aktualizować niezliczoną ilość modułów. Dowiesz się zatem jak korzystać z npm, a chwilę później zaczniemy wykorzystywać zgromadzone tam moduły w dalszej pracy.Jednym z najpopularniejszych modułów jest express.js, który pozwala w bardzo prosty sposób tworzyć serwery HTTP. Grzechem byłoby zatem z niego nie skorzystać. Dowiesz się wszystkiego co niezbędne, by zacząć tworzyć własne aplikacje bazujące na protokole HTTP z użyciem express.js, a także kilku dodatków do tego systemu. Zobaczysz jak routować zapytania, jak korzystać z middleware czy serwować statyczne pliki. Następnie omówimy współpracę z bazą danych MongoDB i z jej wykorzystaniem stworzymy API typu REST. Stworzona aplikacja pozwoli odczytywać dane z bazy i przesyłać je do klienta w formacie JSON, a także dodawać nowe dane, aktualizować i usuwać je. Wszystko to zgodnie z dobrymi praktykami pracy z REST.
Chwilę później czeka Cię kolejny praktyczny projekt - skracacz linków. Stworzymy wspólnie aplikację, która pozwoli skrócić dowolny adres URL do krótkiej formy. Oczywiście będzie działać również w drugą stronę! Kiedy przejdziemy pod skrócony adres, przekieruje nas do odpowiedniej witryny. Node.js to platforma wręcz stworzona do tworzenia aplikacji typu real-time, dlatego w kolejnym rodziale podejmiemy temat technologii WebSockets. Dowiesz się jakie są jej zalety, a także jak pracować z nią po stronie serwera i klienta. Tutaj czeka nas kolejny praktyczny, niezwykle ciekawy projekt. Wykonamy bowiem czat grupowy. Aplikacja ta pozwoli dowolnej ilości użytkowników podłączyć się do czatu podając swój nick, a następnie wysyłać widoczne dla wszystkich wiadomości. Zaimplementujemy nawet takie rozwiązania jak wyświetlanie statusów o dołączeniu kogoś do czatu, a także o jego opuszczeniu.W przedostatnim rodziale tego kursu podejmiemy tematykę dobrych praktyk pracy z Node.js. Na początku omówimy najważniejsze konstrukcje nowej specyfikacji EcmaScript 2015, które są znakomicie wspierane w Node. Chwilę później omówimy jak korzystanie z Promises uprości, a także ulepszy nasz kod. Wśród dobrych praktyk nie zabraknie również informacji o debugowaniu aplikacji. Zobaczysz sprawdzone sposoby, by znaleźć błędy lub lepiej, krok po kroku, zrozumieć jak działa napisany wcześniej kod. Dowiesz się również jak pracować z błędami, by Twoje aplikacje działały w sposób przewidywalny.
Ostatni rozdział w całości został poświęcony temu, co zwykle jest pomijane w innych materiałach, mianowicie wdrażaniu aplikacji do produkcji. Przez cały ten kurs pracować będziemy lokalnie, lecz kiedy aplikacje są już gotowe, wypadałoby udostępnić je światu. Wdrażanie aplikacji napisanych z użyciem Node.js nie jest jednak tak oczywiste, jak np. wgrywanie WordPress’a u wybranego hostingodawcy. Ty będziesz miał jednak możliwość zobaczyć, jak wdrożyć napisany przez nas grupowy czat na platformie Heroku. Jest to bardzo popularny serwis działający jako PaaS (Platform as a Service). Za darmo będziesz mógł w ciągu kilku chwil uruchomić swoją aplikację.Zobaczysz o co należy zadbać, by wszystko poszło gładko. Serwisy typu PaaS dbają o bardzo wiele aspektów wdrażania i serwowania naszych aplikacji, takich jak bezpieczeństwo oraz nieustanną dostępność. Mają jednak pewne ograniczenia. Z tego powodu, dowiesz się również jak wdrożyć swoją aplikację na serwerze wirtualnym VPS z systemem Ubuntu Server. Takie rozwiązanie daje nam całkowitą kontrolę, ale także obarczone jest większą odpowiedzialnością. Zaczniemy od instalacji na serwerze platformy Node.js, systemu kontroli wersji GIT, a także innych niezbędnych modułów
Następnie zobaczysz jak skonfigurować swoje lokalne środowisko tak, by za pomocą GIT’a wysyłać kod do zdalnego serwera, a potem jednym poleceniem wdrażać go do produkcji. Dowiesz się również jak jednocześnie serwować wersję produkcyjną oraz developmencką. W rodziale tym poruszymy również inne kwestie, takie jak procesy potomne czy tworzenie klastrów. Dzięki tej wiedzy, będziesz mógł maksymalnie wykorzystać dostępne zasoby serwera. Na sam koniec tego kursu rzucimy okiem również na inne, nie przedstawione wcześniej zastosowania Node, a także nakreślimy dalszą drogę nauki w tym zakresie.
Kurs ten jest dla wszystkich osób, które dobrze czują się w technologiach frontendowych, tj. HTML, CSS i JavaScript, a teraz chcą rozpocząć swoją przygodę z back-endem. Im zatem lepiej znasz język JavaScript, tym więcej wyciśniesz z Node, natomiast nie jest wymagana bardzo zaawansowana wiedza z zakresu tego języka.
Być może się ze mną zgodzisz, że im dalej, tym ciekawiej. A w tej lekcji pokażę ci, jak możemy korzystać z
szablonów, kiedy korzystamy z Express.js.
Brzmi ciekawie.
No właśnie, zobaczmy, o co chodzi. Jesteśmy w katalogu 30 i na początek poleceniem npm install zainstalujemy
sobie po prostu Expressa, bo tylko to mamy wylistowane w dependencies
w package.json. Jest ok. Więc teraz nodemonem uruchomimy index.js, a ja pokażę ci, co mamy tutaj. Nie mamy tutaj nic szczególnego.
Serwujemy sobie dla wszystkich połączeń pod stronę główną Hello World.
No i mamy jeszcze tutaj użycie dla public, czyli chcemy serwować z katalogu public to, co tutaj się znajduje.
A mamy w tym momencie
tutaj na razie tylko plik CSS.
Teraz będę chciał ci pokazać, jak możemy korzystać ze specjalnych templating engines w połączeniu z tym
Expressem. Więc przejdziemy na specjalną stronę, którą tutaj wkleję.
Jest to taki długi adres. I na tejże stronie będziemy mogli zobaczyć, jakie template engines współpracują
dobrze z Expressem.
Jest ich tutaj wiele.
Jednym z najbardziej popularnych, wcześniej nazywanym Jade - i pod tą nazwą można często się z nim spotkać, jest Pug.
Natomiast on wygląda w ten sposób. Chcę ci pokazać, na czym rzecz polega. Możemy sobie tworzyć stronę internetową,
wpisując ją w taki sposób. Czyli nie tworzymy standardowych tagów HTML, ale właśnie takie oto tagi i one
zostaną odpowiednio później na kod HTML zamienione.
Ja osobiście nie przepadam za czymś takim.
Tak to będzie wyglądać. Aczkolwiek wiele osób z tego korzysta,
no i prawdopodobnie dobrze byłoby się tym zainteresować, jeżeli ci się to podoba,
jeżeli chciałbyś z tego korzystać. Ja natomiast będę chciał skorzystać z express handlebars, bo najbardziej
lubię korzystać właśnie z handlebars,
również po stronie klienta.
Dlatego tutaj sobie klikniemy i będziemy chcieli sobie taki moduł zainstalować.
Oczywiście żeby to zrobić, to wystarczy wpisać npm install express-handlebars. Więc zróbmy to teraz.
Żeby to zrobić, to będziemy musieli serwer zatrzymać na razie. Express-handlebars i dopiszemy sobie save, żeby
to zapisać do pliku package.json. Zaraz to wszystko się rozjaśni.
Na razie jeżeli robisz razem ze mną, to po prostu róbmy to krok po kroku.
Teraz gdybyśmy zobaczyli package.json, to widzisz, że mamy tutaj express-handlebars w wersji 3.0. Jest
wszystko w porządku na razie. No i to nam wystarczy w tej lekcji, więc możemy nodemonem uruchomić nasz serwer i
teraz przejść do pliku w Sublime Text.
Ja pokażę ci, co będziemy chcieli zrobić. Mianowicie na początek musimy sobie ten moduł tutaj pobrać, skoro go
zainstalowaliśmy. Więc nazwę go sobie może hbs = require("express-handlebars").
Kiedy już go tutaj pobierzemy, to musimy jeszcze dać znać naszej aplikacji ekspressowej, że będzie z niego
korzystać.
I teraz bardzo ważne jest to, że jeżeli wróciłbyś sobie tutaj i wybrałbyś jakiś inny template engine, to na stronie
każdego z nich zerkaj na przykłady, bo czasami wygląda to inaczej.
Więc to, co ja ci pokazuję, będzie działać wyłącznie z express-handlebars, ale zasada jest podobna.
Dlatego teraz w tym miejscu na samej górze odwołamy się do app i następnie do engine.
Taką metodę znajdziesz oczywiście w dokumentacji Expressa. I napiszemy handlebars,
czyli ustawiamy jakby opcje dla tego silnika, a za moment ten silnik przypiszemy.
Jedną z takich opcji jest defaultLayout - będziemy musieli to zaraz podać. Ale właśnie musimy się teraz odwołać
do funkcji hbs, którą tutaj zapisałem. Czyli wywołuję tę funkcję, przekazując jej obiekt konfiguracyjny.
Jakie dane tu można podać z kolei znajdziesz na stronie tego projektu express-handlebars. Jedną z nich
jest defaultLayout i podam tutaj main.
Zaraz się rozjaśni, o co chodzi.
Natomiast druga rzecz ważniejsza - i to występuje przy wszystkich tego typu silnikach -
to jest ustawienie poprzez app.set view.engine na handlebars w tym przypadku. Przy innych będzie to wyglądać
inaczej, ale taka linijka pojawi się zawsze - taka niekoniecznie - gdzie ustawiamy te opcje. W tym przypadku
obie są konieczne. Te dwie linijki zobaczysz, że na razie nie sprawią, że coś tutaj się specjalnie zmieni.
Mamy dalej Hello World.
Ale teraz możemy korzystać zamiast z res.send
z metody res.render, która wygląda następująco. Tutaj musimy podać nazwę widoku, który chcemy wyrenderować.
Napiszemy home, a zaraz go utworzymy. I to, co jest super ważne i super świetne,
jako drugi parametr możemy przekazać obiekt, który w tym widoku będzie dostępny. I będziemy mogli ze zmiennych
z niego korzystać. Znowu - za chwilę to się zrobi jasne. Chciałbym w tym obiekcie wpisać sobie title i następnie
Strona główna.
Jako drugą właściwość podamy sobie tutaj content i wpiszę: To jest treść strony głównej.
Jak zatem widzisz, tutaj możemy przekazać cokolwiek, co sobie gdzieś tutaj wyłuskamy, czy z bazy danych,
czy z parametrów, które możemy mieć gdzieś tutaj.
Dlatego tak będziemy chcieli to zrobić. Ale na chwilę obecną pojawi się nam błąd, bo musimy sobie taki widok
utworzyć.
No i teraz gdzie te widoki będą? Można ten katalog zmienić.
Jak to zrobić
możesz znaleźć na stronie Expressa, ale ja tego robił nie będę, bo domyślnie będą te widoki w katalogu
views. Czyli tak jak tutaj mamy katalog public, tak teraz musimy utworzyć katalog views.
Czyli będąc w 30 katalogu, tworzę katalog views.
Pojawił nam się. Teraz w tym katalogu views utworzymy home. handlebars. Czyli znowu 30/views/home/
handlebars.
To rozszerzenie również można zmienić, jeżeli byśmy nie chcieli, trzeba odpowiednie ustawienia zapisać,
ale to nie jest konieczne.
Zrobię to w ten sposób i mój edytor Sublime Text ma zainstalowane podświetlanie syntaksów dla handlebars. To od razu
tutaj się ustawiło.
Więc z tego powodu tutaj będę miał ładne kolorowanie składni.
Gdybyś nie miał tego w swoim edytorze, to musisz poszukać odpowiedniego kolorowania.
I to, co jest ważne, to teraz tutaj możemy pisać z użyciem handlebars.
Ja będę tutaj chciał wkleić gotowy kod, żeby nie tracić czasu.
Kod jest bardzo prosty. Jak widzisz, pokazałam ci wcześniej w przypadku tego Jade, że tam pisaliśmy takie dziwne divy
nie divy itd.
To było kompilowane.
Natomiast ja wolę handlebars, bo tutaj mogę pisać normalny HTML, jaki znam i lubię, a tam, gdzie chcę, podstawić
coś z handlebars czy skorzystać z jakiejś logiki, to wykorzystujemy właśnie takie oto nawiasy klamrowe.
Zauważ, co tutaj się dzieje.
Otóż powiedzieliśmy w tym momencie res.render("home"), czyli z katalogu views ten plik zostanie jakby załadowany
i przekaż mu obiekt, w którym mamy title i content.
Jak się łatwo domyślić, te dwa klucze z tego obiektu trafią pod te oto zmienne i zostaną tutaj podstawione,
a to wszystko zostanie odesłane do przeglądarki. Więc teraz sprawdźmy, czy to nam zadziała. Odświeżam.
No i pojawił nam się kolejny błąd. Bardzo istotny z tego powodu, że nie mamy pliku main.handlebars, a powiedzieliśmy
tutaj, w index, że główny layout ma to być main. Dlatego teraz musimy go sobie utworzyć.
Pokażę ci, na czym sprawa polega i dlaczego tego nie zrobiłem od razu. Przejdziemy sobie do katalogu 30, do views.
I w tym katalogu views utworzymy katalog layouts. Layoutów może być wiele, ale my będziemy mieli jeden i będzie
to main.handlebars. I teraz też wkleję gotowy kod. Ok. Tak będzie wyglądał gotowy kod. Zauważ, co tutaj się dzieje.
Otóż title sobie podstawiam w tym miejscu i tutaj wpadnie nam to, co przekazaliśmy do home. Następnie
body. I ważne jest, żeby tutaj podać takie trzy pary z tego powodu, żeby nam nie wycinał HTML-a. Jeżeli mamy dwie
pary, to jest robione domyślnie strip html, czyli wycinany jest HTML, a tutaj chcemy podstawić to, co mamy
w tym miejscu. Czyli musimy to przejrzeć od tej strony. Mianowicie powiedziałem res.render("home"), więc home
zostanie jakby wyrenderowany.
I to wszystko zostanie wstawione do domyślnego szablonu w miejsce body, czyli tutaj, i cała ta treść
dopiero zostanie odesłana.
Jeżeli teraz sobie odświeżymy, to okaże się, że wszystko działa i to, co sobie podstawiłem, również jest
tutaj odpowiednio wstawiane. Aby jeszcze łatwiej tworzyć takie szablony, to możemy to, co mamy tutaj u
góry, wyciąć i wstawić do osobnego pliku.
Będę chciał teraz tutaj wstawić takie oto odwołanie - header. Zapiszę. A w katalogu views, który mieliśmy, utworzymy
katalog partials. Nazwę to header, bo tak u góry zainkludowałem i wkleję sobie ten kod w tym miejscu. Więc main header
mówi nam po prostu: Pobierz mi taki partial z katalogu partials, który nazywa się header.handlebars.
On zostanie tutaj zainkludowany. To samo będę chciał sobie zrobić z footerem.
Więc tutaj napiszę footer i w katalogu views/partials utworzę footer. Wklejam resztę. Mam nadzieję, że to jest
jasne. Jeżeli odświeżymy, to powinno wszystko działać jak należy i oczyściliśmy sobie troszkę nasz główny main handlebars.
Pamiętaj jednak że pod body wpadnie dokładnie to, co powiemy tutaj, czyli res.render("home").
Jeżeli bym tutaj nie powiedział home, ale coś innego, to też by to zadziałało, ale musimy sobie w views utworzyć
kolejny taki layout. To będę chciał zrobić teraz. Aby zbędnie nie przedłużać, bo nie ma tutaj tak naprawdę co tłumaczyć
już dalej, to wkleję gotowy kod.
Mówię, że nie ma co tłumaczyć, dlatego że widziałeś to już w lekcji o routowaniu zapytań.
Wygląda to w ten sposób, czyli będziemy mieli date i id.
I dokładnie to sobie chcę przekazać tutaj, ale muszę jeszcze utworzyć blog w katalogu views.
Dlatego teraz w katalogu 30/views utworzę blog.handlebars i wkleję gotowy kod.
I to, co może rzucić się w oczy, to to, że nie tylko możemy podstawiać w handlebars takie zmienne, ale również
możemy korzystać np. z instrukcji warunkowych.
I co ciekawe również np. z pętli. Jeszcze w tym kursie to robić będziemy. Czyli sprawdzam - jeżeli id jest
podane, to chcę je wyświetlić. Jeżeli nie, to nie, bo zauważ, że id w tym przypadku zrobiłem ze znakiem zapytania,
czyli opcjonalne.
Więc tutaj może mieć ono wartość undefined.
Zobaczmy teraz, jak to wygląda.
Przejdziemy sobie tutaj i najpierw była data, czyli jakąkolwiek sobie wpiszmy.
Bez tego. Blog nam się wyświetli i mamy identyfikator wpisu, ale to objąłem if,
gdyby to nie było podane. To wtedy nam się nie wyrenderuje.
Gdybyśmy cały ten kod chcieli podejrzeć w przeglądarce, to, jak widzisz, jest on poprawnie tutaj sklejony
z wszystkich tych kawałków. Style CSS są poprawnie serwowane, bo wcześniej w katalogu public je umieściłem
i na samej górze
powiedziałem tutaj express.static("public").
Jak zatem widzisz, korzystanie z szablonów jest bardzo proste.
Zależy z jakich ty chcesz korzystać.
Ja korzystam z handlebars, bo najbardziej przypadły mi już dawno temu do gustu.
Korzystam z nich również po stronie klienta i w tym kursie jeszcze robić to będziemy.
Natomiast gdybyś chciał dowiedzieć się, jak działają handlebars bardzo dokładnie, to na blogu eduweb.pl możesz
znaleźć kompendium, które napisałem już jakiś czas temu - pod takim adresem.
I tutaj od A do Z
opisałem, w jaki sposób działają handlebars po stronie klienta, ale po stronie serwera działa to dokładnie tak
samo. Więc jeżeli chciałbyś się dowiedzieć, w jaki sposób korzystać np. z tych instrukcji, o których mówiłem,
np. If - zobaczmy to gdzieś niżej - albo z instrukcji each, która pozwoli nam iterować jak pętla, to wszystko to
możesz sobie tutaj przeczytać. Polecam ci się z tym artykułem zapoznać.
Ok. W tej lekcji to by było na tyle.
Kontynuujmy w lekcji kolejnej poznawanie Express.js.