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.
W tej lekcji powiem ci jeszcze o innych zastosowaniach Node.js, o których nie mówiliśmy w tym kursie. Są one naprawdę
bardzo szerokie. i teraz zamiast opowiadać, to po prostu ci pokażę. Mianowicie pokażę ci, jak działa Gulp.
I później jeżeli będziesz chciał się dowiedzieć więcej, pokażę ci, gdzie możesz takie informacje znaleźć.
Mamy w katalogu 48 stronę internetową, taką zwykłą stronę internetową, ale mam w niej pliki SASS.
To jest bardzo ważne, że mamy tutaj pliki SASS i możemy z tych SASS robić sobie CSS.
Działa to w ten sposób, że SASS jest preprocesorem i pozwala mi pisać taki oto kod CSS, ale taki zmodyfikowany.
Ten kod jest dużo wygodniejszy do pisania, możemy korzystać ze zmiennych itd.
Na eduweb.pl jest cały kursy poświęcony preprocesorom - mojego autorstwa.
Natomiast mogę pisać w SASS, mogę tutaj tworzyć JavaScript itd. Mam to wszystko w katalogu source i teraz
wystarczy, że tutaj, będą w tym katalogu, mając skonfigurowanego Gulpa, o którym powiem za sekundę piszemy,
wpiszemy sobie gulp i to wystarczy.
Natomiast gdybyś ty u siebie chciał uruchomić wszystkie te przykłady, które ja ci teraz pokazuję, bo chciałbyś
to potestować, to wpisz sobie najpierw npm install -g gulp-cli - w ten sposób. Kiedy to zrobisz, to będziesz
miał dostęp do gulp.
Do takiego polecenia. I w tym katalogu wpiszmy jeszcze npm install, aby zainstalować wszystko, co jest
w package.json i zaraz zobaczysz, jaka magia będzie działa się na ekranie. Moduły się zainstalowały i
teraz wpiszę po prostu gulp.
Poczekamy chwilę i zobaczysz - niczego nie dotykam,
wszystko będzie działo się automatycznie. Zaraz otworzy mi się przeglądarka moja domyślna w systemie,
w której będzie otwarta strona internetowa.
Ta, którą ci przed momentem pokazałem. Ale to nie jest wszystko. Ustawię ją sobie z lewej strony i przejdę
do kodu. Ten kod ustawię sobie z prawej strony i powiedzmy, że chcę pracować na tym kodzie. Mianowicie
nic nie będę zmieniał w katalogu css, będę pisał w sass. No i powiedzmy, że chcę zmienić sobie kolor tego
przycisku. No to przejdę tam, gdzie go zdefiniowałem, do components > buttons.
I tutaj zdefiniowałem sobie kolor tego przycisku. Będę chciał go zmienić, więc wybiorę sobie tutaj np. kolor
zielony i nic jeszcze nie zrobiłem.
Teraz prawdopodobnie usłyszysz, kiedy stuknę w Cmd+S,
aby zapisać ten plik i zobacz, co stanie się w przeglądarce. Tylko ten plik po prostu zapiszę. Automatycznie
w przeglądarce
zostało to odświeżone.
Jeżeli chciałbym sobie tutaj nad tym pracować, np. na tą h1, to przejdę sobie w swojej strukturze, która jest
dowolna - ja sobie ją tak utworzyłem - do typography i zwiększę sobie tutaj tę wartość np. do 46.
Zapisuję. Strona jest automatycznie odświeżana.
Co ciekawe nawet nie jest odświeżana tutaj, ale style są wstrzykiwane na stronę.
Ale wcześniej stało się jeszcze to, że te pliki SASS zostały skompilowane do CSS, tutaj do poprawnego pliku i
zminifikowane.
I ten plik dopiero został wstrzyknięty do przeglądarki.
Natomiast co by było, gdybym chciał zmienić coś w HTML-u? Zmienię coś w moim HTML-u, czyli tutaj. Na przykład
ten nagłówek Witaj świecie.
Dodam do niego trzy wykrzykniki. Zapisuję. I przeglądarka automatycznie się odświeżyła. Tu już kod nie został
wstrzyknięty, bo tak się nie da, ale ona się odświeżyła.
Ok. No to może przejdźmy sobie do JavaScript. Mam tutaj skrypt, w którym nic nie ma. Chciałbym zrobić sobie alert na
początku. Jeżeli tutaj napiszę Witaj świecie!,
zapiszę, przeglądarka automatycznie się odświeżyła i możesz zobaczyć, że alert się pojawił.
Czyli mogę tworzyć swoją stronę internetową, pisząc w SASS.
SASS jest kompilowany do CSS, wstrzykiwany na stronę.
A jeśli zmienię coś w skryptach lub w HTML-u, to strona jest odświeżana i to wszystko jest tutaj odzwierciedlane.
Mało tego, mogę jeszcze przejść tutaj do terminala i wkleić sobie to, co zostało skopiowane w tym miejscu.
I pod tym adresem będziemy mogli zarządzać wszystkimi podłączonymi do Browser Sync klientami. Bo to, co
widziałeś przed momentem - moją stronę -
mogę ją sobie otworzyć na 10 ekranach, w 10 różnych przeglądarkach.
Jeżeli będę coś zmieniał tutaj w kodzie, to automatycznie będzie to zmieniane we wszystkich przeglądarkach.
Jeżeli będę na którejkolwiek stronie wpisywał coś w jakimś formularzu, żeby sobie przetestować moją aplikację,
będzie to wpisywane we wszystkich otwartych przeglądarkach. Może to być Chrome, Opera, Firefox.
Nie ma znaczenia. Fajna magia, prawda?
I teraz gdybym chciał się dowiedzieć, jak to wszystko działa, no to znajduje się to w pliku gulpfile,
który jest tutaj.
Jest to plik node'owy. I dlaczego w tej lekcji mówimy o innych zastosowaniach Node?
No właśnie dlatego, że to wszystko, co teraz się działo, działo się za pomocą Node.js. W pliku gulpfile.js jest
to zdefiniowane.
A gdybyś zerknął do package.json, to tutaj całkiem sporo modułów sobie załadowałem, aby to wszystko mogło
działać poprawnie.
Nie mam teraz czasu, żeby ci to wszystko wytłumaczyć.
Dlatego odeślę cię do warsztatu mojego autorstwa, który znajdziesz tutaj, na eduweb.pl.
Dokładnie w nim tłumaczę, w jaki sposób automatyzować sobie takie zadania.
Do tego dochodzi jeszcze minifikacja plików JavaScript, łączenie tych plików, minifikacja HTML, optymalizacja obrazków.
Wszystko to możemy wykonywać prostymi poleceniami
później w terminalu. To sobie mogę zatrzymać i zamiast gulp mógłby wpisać np. gulp minify i
zminifikować wszystkie pliki.
Ale takie zadanie musiałbym wcześniej utworzyć.
To wszystko tłumaczę w tym warsztacie. Jak widzisz, jest to jeszcze jedno z zastosowań Node. Samego Gulpa znajdziesz pod
adresem gulpjs.com.
Ten przykład, który ci pokazałem, u siebie możesz uruchomić, właśnie instalując gulp-cli globalnie i potem w tym folderze
npm install oraz gulp. Będziesz mógł się z nim pobawić i potestować, co tam się znajduje.
Natomiast jeszcze jednym ciekawym zastosowaniem Node jest taki projekt, który nazywa się NW.js.
Wcześniej był nazywany node-webkit.
Tutaj z kolei możemy wykorzystać naszą wiedzę z zakresu HTML i CSS, a także Node, czyli JavaScript, do tworzenia
aplikacji desktopowych.
Możesz napisać program komputerowy działający na Macu, na Windowsie czy na Linuksie, który będzie stworzony
w tych technologiach webowych i tutaj wykorzystasz swoją wiedzę, którą do tej pory już nabyłeś.
Polecam ci zajrzeć tutaj do dokumentacji i zobaczyć, jak mniej więcej wygląda.
Jeżeli będziesz ciekaw, możesz poeksperymentować.
Jak zatem widzisz, w tej lekcji pokazałem ci jeszcze dwa zupełnie inne zastosowania Node.js niż te, które poznałeś
do tej pory w tym kursie.
To od ciebie zależy, co będziesz chciał robić w Node.js - czy pisać aplikacje webowe, czy aplikacje typu
command line, a nawet możesz tworzyć programy desktopowe.