W poprzedniej części tego poradnika (dostępnej pod tym linkiem) pokazałem Ci jak poprawnie skonfigurować Node’a na Twojej maszynie i jak napisać pierwszy, banalny program. W tej części przeprowadzę Cię przez proces tworzenia statycznego serwera www, który będzie w stanie prawidłowo odpowiadać na wysłane do niego zapytania.

Wpis zrobił się trochę długi, ale to dlatego, że nie chciałem dzielić go już niepotrzebnie na kolejne części. Zalecam jednak uzbrojenie się w cierpliwość i robienie sobie krótkich przerw. Zaczynajmy 😎.

 

pierwsze kroki

 

Zacząć musisz od utworzenia folderu, w którym umieścisz nowy projekt. Jeżeli chcesz podążać dokładnie za moimi instrukcjami to utwórz na Pulpicie nowy folder o nazwie ‘webserver_node’. Na razie tyle wystarczy 😉. Oczywiście możesz utworzyć swój projekt w dowolnym miejscu i o dowolnej nazwie, pamiętaj tylko, że instrukcje w tym poradniku będą odnosiły się do domyślnych ustawień.

Następnym korkiem będzie zrozumienie jak Node Packge Manager, czyli npm działa w praktyce. Jak już wspomniałem w pierwszej części poradnika, npm jest odpowiedzialny za utrzymywanie porządku w bibliotekach, z których będziesz korzystał w swoim projekcie. A ich wykorzystanie to rzecz pewna.

Można oczywiście każdą funkcjonalność napisać samemu zupełnie od podstaw, ale zwykle lepiej będzie skupić się na unikalnych właściwościach Twojej aplikacji, a tam gdzie to możliwe skorzystać z gotowych rozwiązań. Oczywiście jeżeli możesz poświęcić czas na stworzenie własnej implementacji danej biblioteki to gorąco do tego zachęcam. Rozwiniesz w ten sposób swoje umiejętności i lepiej zrozumiesz dany problem. Zwykle jednak czasu tego będzie brakowało.

Npm jest instalowany w pakiecie z Node, więc jest już gotowy do użycia na Twoim komputerze. Zanim jednak będziesz mógł skorzystać z niego w swoim projekcie, musisz przeprowadzić wstępną konfigurację. Uruchom teraz terminal i udaj się za jego pomocą do folderu z projektem (pustego na ten moment). Wpisz teraz następujące polecenie:

Za jego pomocą potwierdzisz poprawność instalacji pakietu oraz sprawdzisz z jakiej wersji aktualnie korzystasz. Okno terminala powinno wyglądać mniej więcej tak (nie przejmuj się jeżeli pokazuje Ci inną wersję):

 

 

Możesz teraz skonfigurować npm w Twoim projekcie. W tym celu wpisz w terminalu poniższe polecenie:

Instalator zada Ci teraz kilka pytań związanych z projektem. Przy pierwszej próbie proponuję pozostawić wartości domyślne naciskając enter po wyświetleniu każdego z pytań:

 

 

Na samym końcu instalator wyświetli podsumowanie i zapyta się, czy chcesz potwierdzić. Wpisz w terminalu ‘yes’ i naciśnij enter:

 

 

W tym momencie w katalogu głównym projektu został utworzony plik package.json, który będzie wykorzystywany przez npm do pobierania informacji o bibliotekach z jakich będziesz korzystał. Możesz to potwierdzić otwierając w przeglądarce folder z projektem. Tak naprawdę polecenie npm init wykonuje tylko tę jedną, prostą czynność – tworzy właściwy plik konfiguracyjny.

Otwórz teraz plik package.json w edytorze Atom lub dowolnym innym, z którego zdecydowałeś się skorzystać. Jego zawartość powinna prezentować się mniej więcej tak:

Przeznaczenie większości z pól da się wywnioskować z samej nazwy, ale bliższego wyjaśnienia wymagają dwa z nich – main oraz scripts. Pole main określa punkt startowy aplikacji, czyli w plik, w którym umieszczony zostanie kod uruchamiający nasz serwer. W tej chwili plik ten jeszcze nie istnieje, ale za chwilę to zmienimy.

Pole scripts wykorzystywane jest do określania skryptów, które mają zostać wykonane podczas procesu publikacji biblioteki. Jeżeli masz tylko ochotę i jakiś dobry pomysł na bibliotekę to możesz ją opublikować w ramach repozytorium npm. Oczywiście musi ona spełniać określone wymogi, ale jej opublikowanie jest jak najbardziej możliwe. W przypadku projektu z tego poradnika, pole scripts nie będzie Ci do niczego potrzebne, ponieważ aplikację tworzysz na własny użytek.

 

Dodanie pierwszej biblioteki

 

Na stronie www.npmjs.com możesz sprawdzić jakie biblioteki są dostępne z poziomu Node Package Manager. W dalszej części tego poradnika będziemy korzystali z framework’a Express, więc poświęć teraz chwilę, aby wyszukać go w wyszukiwarce npm:

 

 

Nie musisz czytać teraz całej dokumentacji. Chodzi tylko o to, żebyś zaznajomił się ze stroną. Do samego Express’a za chwilę wrócimy.

Zanim jednak przedstawię trochę teorii z nim związanej, to pokażę Ci jak dodać moduł z kolekcji npm do własnego projektu. Jeżeli okno terminala masz zamknięte, to zacznij od uruchomienia konsoli w głównej lokalizacji Twojego projektu. Następnie wpisz w konsoli następujące polecenie i naciśnij enter:

Rozbijmy je na poszczególne elementy:

  • Npm install – za pomocą tej instrukcji uruchamiany jest proces instalacji nowego pakietu, którego nazwę podajemy jako kolejny argument.
  • express@4.16.3 – tutaj podajesz nazwę biblioteki, z której chcesz skorzystać oraz dokładną jej wersję – w tym wypadku 4.16.3. Możesz też pominąć podawanie numeru i w takim wypadku zostanie zainstalowana najnowsza, dostępna wersja paczki. Na potrzeby tego poradnika polecam skorzystać jednak z wersji 4.16.3.
  • — save – dodatkowa flaga (argument), która pozwala na automatyczne zapisane naszej zależności w pliku package.json w sekcji dependencies. Bez jej użycia zawartość modułu zostałyby dodana do Twojego projektu, ale plik package.json musiałbyś edytować ręcznie. W tej chwili zawartość pliku powinna prezentować się tak:

Natomiast okno terminala powinno wyglądać mniej więcej tak:

 

 

Jeżeli wszystko się zgadza, oznacza to, że właśnie dodałeś do projektu swoją pierwszą bibliotekę. Została ona umieszczona w folderze o nazwie node_modules, który znajduje w katalogu głównym. Będą w nim umieszczane także moduły, które dodasz w przyszłości.

Jeżeli wejdziesz teraz do tego folderu to zauważysz, że znajduje się w nim całkiem pokaźna liczba katalogów. Jest to związane z faktem, że biblioteka Express do działania potrzebuje innych modułów i to właśnie one zostały dodane obok katalogu express. To bardzo powszechna praktyka – jedna bibliotek tworzy nowe funkcjonalności w oparciu o już istniejące rozwiązania.

Express jest tak dużą i popularną biblioteką, że została dla niego utworzona osobna strona z dokumentacją (oprócz tej na stronie npm), która znajduje się pod adresem https://www.expressjs.com. Jest ona niemal nierozerwalną częścią Node.js. Ułatwia w znacznym stopniu tworzenie aplikacji webowych (w tym własnych API), a także stanowi integralną część wielu innych modułów. Jej opanowanie jest kluczowe dla pracy z platformą Node.js.

 

Tworzymy Prosty serwer

 

Poznałeś już trochę teorii, dokonałeś wstępnej konfiguracji, więc możemy zabrać się w końcu za tworzenie właściwej aplikacji.

Zacznij od uruchomienia edytora Atom, a następnie otwórz za jego pomocą folder główny projektu webserver_node. Dodaj do hierarchii nowy plik o nazwie server.js. To w nim będziesz przechowywał kod odpowiedzialny za funkcjonowanie serwera. W tej chwili struktura Twojego projektu powinna wyglądać tak:

 

 

W pliku server.js umieść na samej górze następujący fragment kodu:

Za jego pomocą tworzysz stałą, która będzie odwoływała się do zasobów modułu Express. Dzięki niej będziesz mógł korzystać z dobrodziejstw tej biblioteki.

Funkcja require jest częścią standardowej biblioteki Node. Jej zadaniem jest umożliwienie korzystania z danego modułu w pliku, w którym została użyta. W pierwszej kolejności będzie ona sprawdzała, czy dana biblioteka znajduje się w podstawowych zasobach Node, a jeżeli jej tam nie znajdzie to sprawdzi folder node_modules. Argument przekazany do funkcji jest pisany z małej litry, ponieważ właśnie w taki sposób został nazwa biblioteki została zapisana w pliku package.json.

Wpisz teraz podany kod tuż pod pierwszą deklaracją:

Za pomocą obiektu app będziesz mógł ustawić dla swojej aplikacji odpowiednie ścieżki http, które będą prowadziły do poszczególnych zasobów na serwerze. Na przykład po wpisaniu w przeglądarce adresu strony ‚about’ (‚o mnie’) zostaną do klienta zwrócone odpowiednie dane w postacie strony utworzonej za pomocą html’a.

Poniżej deklaracji stałej app dodaj poniższy kod:

Za pomocą funkcji get() jesteś w stanie zdefiniować sposób w jaki zostanie obsłużone żądanie wysłane na dany adres http. Jako pierwszy parametr funkcji przekazujesz końcówkę adresu. Znak ‘/’ oznacza, że odwołujesz się do root’a Twojej aplikacji, czyli w tym wypadku strony głównej.

Drugi argument stanowi fuknkcja, za pomocą której określisz dokładnie co ma otrzymać klient wysyłający żądanie. Możesz określić m.in. kod HTTP oraz typ danych, które zostaną przesłane.

Na początku w odpowiedzi wyślemy prosty tekst. Wykorzystamy do tego celu obiekt respond. Zaktualizuj teraz funkcję get zgodnie z poniższym listingiem:

W takiej konfiguracji każdy kto odwiedzi Twoją stronę dostanie w odpowiedzi prosty tekst ‘Hello Node!’, który zostanie umieszczony wewnątrz bloku message-body wchodzącego w skład odpowiedzi http. // dopisz coś o tym jak wygląda całe zapytanie http

Brakuje jednak jeszcze jednego elementu, który sprawi, że Twoja aplikacja faktycznie zacznie odpowiadać na zapytanie innych użytkowników. Musisz określić na jakim porcie ma ona nasłuchiwać przychodzących połączeń. Do tego celu wykorzystywana jest funkcja listen() obiektu app, która wiąże aplikację w z wybranym portem na Twojej maszynie. Do zastosowań lokalnych wykorzystuje się zwykle port o numerze 3000. Na samy dole pliku server.js dodaj następujący kod:

 

Pierwsze uruchomienie aplikacji

 

Teraz aplikacja w jest gotowa do uruchomienia. Wpisz w konsoli (otwartej w folderze głównym projektu) następujące polecenie:

Okno Twojej konsoli powinno wyglądać mniej więcej tak:

 

 

Może Ci się wydawać, że nic się nie wydarzyło, ale brak informacji ze strony terminala oznacza tak naprawdę, że Twoja aplikacja uruchomiła się poprawnie i jest w trakcie nasłuchiwania przychodzących zapytań. Możesz to potwierdzić uruchamiając dowolną przeglądarkę internetową, a następnie wpisując adres http://localhost:3000/. Jeżeli nie zrobiłeś żadnej literówki w pliku server.js to Twoim oczom powinien ukazać się poniższy widok:

 

 

Okno przeglądarki wyświetla prosty tekst, który zdefiniowałeś wewnątrz funkcji send. Tekst ten jest odpowiedzią serwera na zapytanie wysłane przez klienta. W tym przypadku może trudno jest dostrzec różnicę, ponieważ Twoja maszyna jest jednocześnie klientem (poprzez przeglądarkę) oraz serwerem. W środowisku produkcyjnym serwer znajduje się oczywiście na osobnym, dedykowanym komputerze, ale na potrzeby tego poradnika aktualna konfiguracja w zupełności wystarczy.

Z pomocą Express’a możesz także tworzyć dodatkowe końcówki względem ścieżki głównej. Dobrym przykładem może być adres prowadzący do podstrony „O mnie”.  W pliku server.js dodaj następujący kod, zaraz po funkcji app.get():

Konstrukcja jest identyczna jak w przypadku pierwszej implementacji, jednak tym razem dodałeś nową ścieżkę ‘/about’. Zapisz zmiany, zatrzymaj serwer z poziomu konsoli za pomocą kombinacji klawiszy CTRL + C, a następnie uruchom ponownie serwer za pomocą polecenia node server.js. Wpisz w przeglądarce adres http://localhost:3000/about, a na ekranie powinien pojawić się poniższy widok:

 

 

Za pomocą app.get możesz zdefiniować dowolną ilość ścieżek na Twoim serwerze. Jak sam pewnie zdążyłeś już zauważyć, Express może w znacznym stopniu ułatwić Ci zbudowanie w pełni funkcjonalnej strony internetowej. Oczywiście będziesz do tego potrzebował jeszcze kilku składników (jak na przykład baza danych) ale Express daje bardzo solidne podstawy.

 

Statyczny serwer

 

Statyczny serwer to w pewny sensie taki mały, wyspecjalizowany program działający w ramach serwera głównego. Pozwala on na udostępnianie zasobów (zdjęcia, strony HTML) serwerowi głównemu bez konieczności definiowania osobnej ścieżki do każdego z elementów.

Żebyś mógł zobaczyć jak to działa na przykładzie, dokonasz małej zmiany w sposobie w jaki serwer główny uzyskuje dostęp do strony „O mnie”. Zacznij od utworzenia w katalogu głównym projektu nowego folderu o nazwie public, w którym to z kolei utwórz plik o nazwie about.html. W pliku tym umieść poniższy kod html, za pomocą którego wygenerujesz bardzo prostą stronę:

Tak przygotowaną stronę będziesz mógł udostępniać za pomocą serwera statycznego, który skonfigurujesz w następnym kroku.

Serwer statyczny możesz uruchomić z wykorzystaniem funkcji ‘middleware’ – jednej z wielu, w które został wyposażony Express. Funkcje middleware mają bezpośredni dostęp do obiektów request oraz respond, których używałeś w funkcji app.get(). Stąd też wywodzi się ich nazwa – funkcje te działają „pomiędzy” zapytaniem wysłanym od klienta a odpowiedzią z serwera. Funkcja app.get(), której używałeś do tej pory także określana jest mianem funkcji middleware.

Dodaj poniższy kod tuż nad funkcją app.listen(3000):

Za pomocą powyższej funkcji informujesz serwer, że pliki z zasobami będziesz umieszczał w folderze public. Zmienna __driname jest stałą wskazującą po prostu katalog główny na serwerze. W tej chwili w folderze public umieszczony jest plik about.html, który dostępny jest dla użytkownika po wpisaniu w przeglądarce adresu http://localhost:3000/about.html. Oznacza to, że nie będziesz już potrzebował funkcji app.get() do wyświetlania zawartości podstrony about. Usuń z pliku server.js następujący fragment kodu:

Aby sprawdzić jak serwer statyczny działa w praktyce zapisz zmiany i uruchom serwer z poziomu konsoli. Następnie w przeglądarce wpisz adres http://localhost:3000/about.html. Na ekranie powinien pojawić się taki widok:

 

 

W folderze public możesz umieścić dowolny zasób, który ma być udostępniony użytkownikom. Możesz na przykład umieścić tam plik graficzny lub dźwiękowy. Pobierz teraz dowolną grafikę w formacie jpg za pomocą przeglądarki Google i nazwij ją photo.jpg. Następnie umieść ją w folderze public. Zapisz zmiany, zrestartuj serwer i w przeglądarce wpisz adres http://localhost:3000/photo.jpg. Tym razem na ekranie powinieneś ujrzeć pobrany przez Ciebie obrazek. W moim przypadku wygląda to tak:

 

 

Jak widzisz serwer statyczny może udostępniać pliki nie tylko w formacie html.

Zanim zamkniemy tę część, dodasz jeszcze funkcję, która zaloguje w konsoli, że serwer został poprawnie uruchomiony. W tym celu musisz tylko podmienić ostatnią linijkę kodu w pliku server.js. Zamień app.listen(3000) na:

Tym razem do wywołania funkcji app.listen() dodałeś drugi parametr w postaci funkcji anonimowej (czyli takiej bez nazwy 😉), która robi jedną prostą rzecz – wyświetla w oknie terminala informację o tym, że serwer został uruchomiony i będzie nasłuchiwał na porcie 3000. Zapisz zmiany w pliku i uruchom ponownie serwer. W konsoli powinna pojawić się poniższa informacja:

 

 

Dzięki tej prostej sztuczce będziesz otrzymywał w końcu jakąś informację zwrotną od serwera po jego uruchomieniu 😉.

 

Instalacja narzędzia nodemon

 

Do tej pory po każdej wprowadzonej zmianie w pliku server.js musiałeś ręcznie restartować serwer, aby móc zobaczyć zmiany. Istnieje jednak bardzo przydatny pakiet o nazwie nodemon, który umożliwia automatyczny restart serwera po zapisaniu zmian. Jest on dostępny oczywiście za pośrednictwem npm. Instalacja pakietu wymaga jedynie wpisania w terminalu poniższego polecenia (nie musisz znajdować się w folderze głównym projektu):

Zwróć uwagę, że tym razem nie użyłeś na końcu flagi -save, a zamiast tego wstawiłeś -g, które jest skrótem od polecenia global. Nodemon musi być instalowany globalnie, tak aby korzystać z niego mogła każda aplikacja napisana z wykorzystaniem Node.js. Dzieje się tak dlatego, że nodemon jest narzędziem zintegrowanym z terminalem i nie będzie wykorzystywany przez Ciebie bezpośrednio w aplikacji, tak jak na przykład Express.

Użycie nodemon jest banalnie proste. Znajdując się tym razem w folderze głównym Twojego projektu wpisz w terminalu następujące polecenie:

Widok terminala powinien mniej więcej przypominać poniższy obrazek:

 

 

I to wszystko 😉. Teraz nodemon będzie nasłuchiwał zmian wprowadzonych przez Ciebie w pliku server.js i restartował serwer za każdym razem, gdy zapiszesz zmiany. Dla wyjaśnienia – nodemon jest wykorzystywany tylko w trakcie prac nad kodem aplikacji. W środowisku produkcyjny (czyli po publikacji) nie ma on zastosowania.

I to już koniec. Udało Ci dotrwać do końca tego przydługiego poradnika. Moje gratulacje 😎.

 

 

Słowo na drogę

 

W tym dwuczęściowy poradniku zapoznałem Cię chyba ze wszystkim co jest potrzebne, aby zacząć swoją przygodę z Node’em (poza językiem JavaScript oczywiście). Jak sam widzisz nie jest tego aż tak dużo, ale to oczywiście tylko początek drogi. Poniżej podaję kilka źródeł, z których możesz skorzystać na dalszych etapach nauki:

freeCodeCamp

x-team.com

blog risingstack

Zależało mi na tym, aby pokazać Ci jak przyjazna jest platforma Node.js, zwłaszcza dla początkujących programistów. Mam nadzieję, że mi się to udało. Jeżeli będziesz miał jakieś pytanie, to możesz śmiało zadać je w formie komentarza. Postaram się odpowiedzieć jak najszybciej 😉. Do następnego 🧐.


 

Comments

  1. Fajne wprowadzenie. A ten nodemon pozwala na wstrzykiwanie zmian w HTML czy CSS, czy przeładowuje kompletnie strone ?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *