martinproxy0 / repository

Zadanie_17_5

17. ExpressJS - ekspresowe tworzenie aplikacji w NodeJS Wyzwania: Dowiesz się czym jest ExpressJS Nauczysz się korzystać z routingu Poznasz czym są szablony 17.1. Wprowadzenie do Expressa Express jest jednym z najpopularniejszych frameworków dla aplikacji pisanych w Node.js. Jest bardzo lekki i pozwala na lepszą organizację aplikacji w modelu MVC. Ok, zwolnijmy. Już na samym starcie pojawiły się dwa pojęcia, których do tej pory nie omówiliśmy zbyt dokładnie: framework i MVC. Na początku przypomnijmy sobie czym jest framework. Czym są frameworki? Framework to swego rodzaju szkielet, na którym opieramy budowę naszej aplikacji. Jest pewnym poziomem abstrakcji, na której konstruujemy naszą aplikację. Czym jest abstrakcja? Abstrakcja w inżynierii oprogramowania to technika, dzięki której jesteśmy w stanie zapanować nad złożonością systemu. Najzwyczajniej w świecie nie da się myśleć na wielu płaszczyznach na raz, dlatego programiści dzielą problemy na pewne poziomy i to na nich rozwiązują mniejsze problemy. Przykładowo - programista korzystający z Reacta nie martwi się o niższy poziom abstrakcji, z którego nieświadomie korzysta używając Reacta. Korzystając z komputera także nie zastanawiamy się za bardzo co dzieje się w środku procesora czy też w jaki sposób jest skonstruowany. Tym poziomem abstrakcji po prostu nie zawracamy sobie głowy. Używając JavaScriptu nie myślimy w jaki sposób parser analizuje składnię języka. Jeśli nie jest to nam potrzebne, to możemy zająć się tym, co jest dla nas naprawdę istotne - pisaniem aplikacji internetowych! Express to właśnie kolejny, wyższy poziom abstrakcji, dzięki któremu możemy skupić się na właściwym problemie. Zawiera zbiór generycznych (możliwych do zastosowania w wielu miejscach / uniwersalnych) funkcjonalności, które powtarzają się w obrębie każdej aplikacji. Cały zamysł frameworka opiera się na zasadzie - nie wymyślaj koła na nowo, bo można budować na podstawie dobrych, uniwersalnych rozwiązań. Po wykonaniu tego samego zadania wiele razy, człowiek instynktownie szuka sposobu na automatyzację problemu - szczególnie leniwy programista. :) Framework ma niestety jedną wadę, która bywa momentami również zaletą - narzuca programiście sposób w jaki należy rozwiązać problem. Takie podejście z jednej strony nieco nas ogranicza, bo nie pozwala nam 'grzebać' w rozwiązaniu, a z drugiej strony zmniejsza ilość miejsc, w których moglibyśmy popełnić jakiś błąd. Zaletą takiego podejścia jest też to, że programiści korzystający z frameworków często borykają się z podobnymi problemami, przez co łatwo jest znaleźć rozwiązania, bo ktoś już na pewno zetknął się z czymś, co sprawia nam kłopot :) Wracając do Expressa - jest on niewielkim frameworkiem, który daje programiście przyjemną podstawkę do tworzenia aplikacji, ale nie narzuca żadnych praktyk - może o tym świadczyć chociażby fakt, że wiele znanych frameworków opiera swoją budowę na Express. Można do nich zaliczyć przykładowo Loopbacka, Sailsa czy Krakena. Model-View-Controller Ok, wiemy już czym jest framework - pora na pojęcie MVC :) Jest to skrót od ang. Model View Controller (Model Widok Kontroler). Jest jednym z najczęściej przewijających się wzorców architektonicznych w internecie. Popularnością pomału wypiera go architektura Flux, o której coraz częściej słychać (szczególnie w środowisku Reacta), ale o tym wzorcu powiemy sobie jeszcze przy okazji omawiania Reduxa - wróćmy do MVC. Głównym założeniem przyjętym podczas projektowania MVC było oddzielenie warstwy prezentacji od logiki biznesowej aplikacji. To podejście umożliwia tworzenie narzędzi działających bez graficznego interfejsu (zastępuje go wtedy tzw. Command Line Interface, a.k.a. CLI) i jest dalej popularne w środowisku Unixowym. Tak więc: Model jest reprezentacją logiki aplikacji / problemu z jakim się zmagamy / domeną. Widok opisuje w jaki sposób coś wyświetlić. W React są to komponenty (szczególnie te prezentacyjne). Kontroler przyjmuje dane od użytkownika aplikacji i reaguje na jego działania w obrębie widoku. Aktualizuje widok i model aplikacji. O samej architekturze można napisać osobny moduł tym bardziej, że jak już wcześniej wspomnieliśmy bardzo często przewija się on w środowisku front-end developerów i jest częścią składową wielu frameworków. Sama implementacja MVC wymaga wiedzy na temat programowania obiektowego i wzorców projektowych. Zainteresowanych zapraszam do przeczytania tej książki na temat wzorców projektowych stosowanych w JavaScripcie. Express dostarcza wielu funkcjonalności do tworzenia aplikacji webowych. Jak już wspomniałem, ułatwia on przede wszystkim szybki rozwój aplikacji opartych na Node.js. Podstawowymi cechami tego frameworka są: serwowanie plików statycznych za pomocą jednej komendy konfigurowanie middleware, czyli pośrednika między żądaniem a odpowiedzią w momencie, kiedy użytkownik wykonuje jakieś akcje, np. wysyła formularz, middleware może wykonać pewne czynności zanim dane zostaną zapisane. Nie sprowadza się to oczywiście tylko do zapisu danych, ale szerzej na temat tego zagadnienia powiemy sobie w dalszym rozdziale definiowanie tablicy routingu, czyli ścieżek (adresów), które wyświetlają odpowiednie treści, przyjmują i zapisują dane, bądź odpytane o dane zwracają je. Bazują na protokole HTTP oraz URI (ang. Uniform Resource Identifier) pozwala na dynamiczne tworzenie stron HTML bazujących na argumentach przekazanych do istniejących szablonów Nie przejmuj się, jeśli powyższe opisy wydają się być nieco zagmatwane. Kolejne rozdziały rozjaśnią sprawę! Zanim jednak przejdziemy do omawiania poszczególnych funkcjonalności Expressa, przeprowadzimy proces instalacji. Jeśli masz wątpliwości do powyższego materiału, to - zanim zatwierdzisz - zapytaj na czacie :) Zapoznałe(a)m się! 17.2. Instalacja ExpressJS Framework Express instalujemy używając npm, analogicznie do innych pakietów, które dodawaliśmy już we wcześniejszych modułach. Dla przypomnienia, wystarczy, że zainicjujesz swój projekt - npm init, a następnie użyjesz komendy npm install express --save, która zapisze zainstalowany pakiet w katalogu node_modules/ i doda go do sekcji dependencies w pliku package.json. Razem z Expressem należy zainstalować jeszcze jeden ważny moduł - body-parser, który jest pakietem pozwalającym na obsługę różnych formatów danych w middleware takich jak JSON, text czy tzw. surowe dane (ang. raw data). Aby go zainstalować, wpisz npm install body-parser --save. Pierwsza aplikacja w ExpressJS Sprawdźmy teraz, czy wszystko działa tak jak powinno. Testowa aplikacja, jaką stworzymy przy użyciu Expressa, będzie przedstawiała podstawową zasadę działania tego frameworka. Aplikacja uruchomi serwer oraz będzie nasłuchiwać na porcie 3000 w oczekiwaniu na połączenie - dokładnie w taki sam sposób, jak w przypadku serwera HTTP napisanego w “czystym" Node.js. Nasłuchiwanie oznacza nic innego jak oczekiwanie na połączenie - po wystąpieniu żądania, serwer odpowie nam klasycznym “Hello world". Zanim zaczniemy tworzyć aplikację, musimy wytłumaczyć sobie pewne pojęcia. Opis pojęcia routingu Routing to sposób określania jak aplikacja będzie odpowiadać na żądania klienta na dane endpointy przy użyciu konkretnych metod HTTP. Przypomnijmy sobie w jaki sposób wyglądały metody HTTP: GET - najprostsza z metod HTTP - służy do pobierania zasobów z serwera. Pobranymi zasobami mogą być np. pliki HTML, CSS, JavaScript czy obiekty JSON / XML. POST - ta metoda jest używana do wysyłania danych do serwera. Stosuje się ją np. przy formularzach lub przy wstawianiu zdjęć i wysyłaniu ich jako załącznik. Zwykle dane te wysyłane są jako para klucz-wartość. PUT - działa podobnie jak POST, czyli również służy do wysyłania danych. Różnicą jest ograniczenie do wysłania tylko jednej porcji danych - np. jednego pola. Metoda ta najczęściej używana jest do aktualizacji istniejących danych DELETE - metoda, która służy do usuwania danych z serwera. Chodzi oczywiście o dane, które zostały wskazane przy wysyłaniu żądania. Kolejnym pojęciem jest URI (nazywane również PATH) - jest to właśnie wspomniany wcześniej endpoint, który zawiera polecenia do wykonania gdy zostanie wywołany przez żądanie. Czas start! Na początek stwórzmy plik server.js w katalogu z projektem. Po zainstalowaniu powyższych zależności, drzewo projektu powinno wyglądać w następujący sposób: Aby mieć możliwość skorzystania z zainstalowanych zależności, na początku należy zadeklarować zmienną, w której będziemy przechowywać funkcjonalności pakietu Expressa. var express = require('express'); Jak widzisz, każda paczka JS'a działa dokładnie w taki sam sposób. Koncepcja modułów będzie przewijać się aż do końca tego kursu. Następnym krokiem będzie stworzenie aplikacji Express: var app = express(); Naszą aplikację przypisaliśmy do zmiennej app. Teraz możemy sprawić, aby odpowiadała prostym Hello world w momencie, w którym odbierzemy wysłane zapytanie GET na adres strony domowej: app.get('/', function(req, res) { res.send('Hello world'); }); Powyższy kod rejestruje pierwszy routing (proces przetwarzania otrzymanego adresu żądania i na jego podstawie decydowanie, co powinno zostać uruchomione) na wysłane żądanie GET po wejściu na stronę główną ( http://localhost:3000/ ). Jako callback na wystąpienie tego zdarzenia wywoływana jest funkcja, która w przypadku udanej odpowiedzi wyśle wiadomość Hello world. To jednak jeszcze nie koniec. Zarejestrowaliśmy obsługę pierwszego routingu, ale należy zainicjować nasłuchiwanie serwera na to i inne zdarzenia. Dopiszmy więc: var server = app.listen(3000, function() { console.log('Przykładowa aplikacja nasłuchuje na http://localhost:3000'); }); Po zapisaniu powyższego kodu, należy uruchomić go komendą node server.js (lub za pomocą Nodemona, którego poznaliśmy w pierwszym module) - teraz po ponownym wejściu na adres http://localhost:3000/ powinniśmy zobaczyć następujący widok: Jest to znak, że nasza aplikacja działa! Jeśli masz wątpliwości do powyższego materiału, to - zanim zatwierdzisz - zapytaj na czacie :) Zapoznałe(a)m się! 17.3. Route, czyli ścieżka wyznaczona dla użytkownika aplikacji Wykorzystanie endpointów Rozwińmy teraz trochę aplikację stworzoną w poprzednim podrozdziale. Aktualnie kod w pliku server.js wygląda następująco: var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello world'); }); var server = app.listen(3000, function() { console.log('Przykładowa aplikacja nasłuchuje na http://localhost:3000'); }); Endpointy statyczne Na początek zmodyfikujemy lekko żądanie GET i do strony głównej zamiast Hello world! wpiszmy Hello GET! oraz dodamy linijkę drukującą otrzymane żądanie (po stronie serwera) jak poniżej: app.get('/', function (req, res) { console.log('Otrzymałem żądanie GET do strony głównej'); res.send('Hello GET!'); }); Warto w tym miejscu wspomnieć o narzędziu Postman - możesz pobrać je ze strony https://www.getpostman.com/. Używa się go do testowania endpointów. Postman jest prosty i intuicyjny w obsłudze - wystarczy, że podasz adres oraz metodę HTTP, jakiej chcesz użyć w odpowiednich polach i… już :) Pozostaje tylko wysłanie requesta i sprawdzenie czy response zgadza się z naszymi oczekiwaniami. Dodajmy też inne metody HTTP do naszej aplikacji. Zacznijmy od POST. Dla tej i kolejnej metody wykonamy podobne operacje. Chodzi tutaj o to, aby zaobserwować działanie zarejestrowanych endpointów. app.post('/', function (req, res) { console.log('Otrzymałem żądanie POST do strony głównej'); res.send('Hello POST!'); }); Do tego czasu oba nasze zapytania kierowaliśmy do strony domowej. Dodajmy teraz obsługę żądania z metodą DELETE oraz inną ścieżką: app.delete('/del_user', function (req, res) { console.log('Otrzymałem żądanie DELETE do strony /del_user'); res.send('Hello DELETE!'); }); DLA CHĘTNYCH: Przetestuj powyższe zapytanie w Postmanie! :) Dla praktyki, dodajmy jeszcze kilka innych endpointów, a następnie przejdźmy do testowania. app.get('/list_user', function (req, res) { console.log('Otrzymałem żądanie GET do strony /list_user'); res.send('Strona z listą użytkowników!'); }); app.get('/ab*cd', function(req, res) { console.log('Otrzymałem żądanie GET do strony /ab*cd'); res.send('Wzór pasuje'); }); Po dodaniu powyższych fragmentów kodu zapisz plik server.js, a następnie ponownie użyj komendy node server.js chyba, że używasz Nodemona :) Zerknijmy na endpoint /list_user Otrzymaliśmy to, czego oczekiwaliśmy. Sprawdźmy jeszcze inne. Jeśli jednak użyliśmy endpointa, którego nie zdefiniowaliśmy, otrzymamy odpowiedź jak na ostatnim obrazku. Endpointy dynamiczne Istnieje również inny typ endpointów, które nazywa się dynamicznymi. Używanie ich pozwala na przekazywanie parametrów i bazowanie na nich. Wróćmy na moment do kodu stworzonego na samym początku: var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello world'); }); var server = app.listen(3000, function() { console.log('Przykładowa aplikacja nasłuchuje na http://localhost:3000'); }); Najpierw zmodyfikujemy trochę bazowy kod. Usuńmy linijki 8-10, które miały nam tylko pokazać podstawowe informacje na temat serwera. Zamiast tego napiszmy po prostu: app.listen(3000); Tworzenie dynamicznego routingu pozwala na przekazywanie parametrów, więc spróbujmy najpierw z przykładowym id. Zamiast odwołać się do strony domowej ('/'), odwołajmy się do zmiennego parametru id. Parametr zmienny od statycznego rozróżnia się poprzez dodanie dwukropka (:) przed nazwę. W naszym przykładzie endpoint będzie więc wyglądał następująco: /:id Zmieńmy jeszcze odpowiedź z Hello world na 'Identyfikator, który został dopisany to ' + req.params.id. Czym jest req.params.id? req jest obiektem reprezentującym zapytanie HTTP (ang. request). Posiada on różne parametry, jak na przykład body (czyli ciało zapytania), nagłówki HTTP oraz parametry (params), które mamy zamiar odczytać. Parametr, który wstawiliśmy jako część adresu w metodzie GET, przekazujemy jako id. W poniższym przypadku wyświetli się komunikat Identyfikator który został dopisany to 123, o ile zapytanie wysłano na adres http://localhost:3000/123. Popróbuj z różnymi innymi parametrami i sprawdź czy aplikacja działa tak, jak tego oczekujesz. Obsługa błędu 404 za pomocą ExpressJS Co jeśli serwer nie rozpozna żądania? W Expressie odpowiedź 404 nie jest wynikiem błędu, więc nie jest wyłapywany w trakcie działania aplikacji. Spowodowane jest to tym, że 404 zwykle oznacza brak możliwości wykonania danej czynności, a nie błąd występujący z powodu jakiejś 'wpadki' programisty. Innymi słowy, Express wykonał wszystkie funkcje middleware (które poznamy w kolejnym rozdziale) oraz route'y i dopiero wtedy dowiedział się, że żaden z nich nie odpowiedział na żądanie - taki przypadek możemy obsłużyć poprzez dodanie funkcji middleware na samym końcu (poniżej pozostałych funkcji), aby obsługiwała status 404. Powróćmy znów do poprzedniego szablonu z metodą GET na stronę domową ('/'), która zwraca nam Hello world!. Dopiszmy teraz metodę middleware, która obsłuży nam błąd 404. Na samym końcu, poniżej fragmentu z nasłuchiwaniem dodajmy obsługę odpowiedzi 404: app.use(function (req, res, next) { res.status(404).send('Wybacz, nie mogliśmy odnaleźć tego, czego żądasz!') }); Po ponownym uruchomieniu skryptu, w przeglądarce powinieneś zobaczyć Hello world!. Spróbuj teraz dopisać coś na koniec adresu (tak jak w poprzednim rozdziale dopisaliśmy id). Powinieneś otrzymać następujący komunikat: Parametr next, który przekazujemy do funkcji jest funkcją, która pozwala “iść dalej" do kolejnej funkcji middleware lub zakończenia żądania. Można w ten sposób stworzyć także obsługę pozostałych błędów. Najczęściej obsługiwane błędy to: 400 - bad request - występuje gdy serwer nie może przetworzyć zapytania 401 - unauthorized - występuje gdy wymagane jest uwierzytelnienie, a nie zostało dostarczone 403 - forbidden - żądanie jest poprawne, jednak serwer odmawia odpowiedzi, może to wystąpić w przypadku gdy np. użytkownik jest zalogowany ale nie ma uprawnień do wykonania żądania 404 - not found - zasoby nie zostały znalezione 500 - internal server error - występuje gdy występują nieznane warunki i nie ma żadnej konkretnej wiadomości Zadanie: Operacje CRUD na pliku JSON Stwórzmy teraz aplikację, która będzie otwierać zewnętrzne pliki .json oraz edytować je. Zanim zaczniemy, w folderze projektu stwórz plik server.js, a następnie zainicjalizuj projekt poprzez wpisanie npm init w konsoli. Przejdźmy do pobrania potrzebnych zależności - tym razem będzie nam potrzebny Express oraz body-parser. Jak się zapewne domyślasz, możesz zainstalować je za pomocą komendy npm install --save express body-parser. Po pobraniu paczek, możemy śmiało przejść do pisania kodu - na początek przypisz zależności do zmiennych w pliku server.js. Dodaj także linijkę var fs = require('fs') - fs będzie nam potrzebny do operacji na plikach. Nie musimy go instalować, bo jest on wbudowany w Node :) Skoro zależności mamy już załatwione, zadeklaruj zmienną app, która wywoła funkcję express() oraz zmienną stringifyFile (na razie bez zadeklarowanej wartości). Tuż pod deklaracją zmiennych dodaj także linijkę app.use(bodyParser.json()); - to pozwoli Ci wykorzystać middleware body-parser, które zainstalowaliśmy przed chwilą. body-parser jest nam potrzebny, aby korzystać z formatu application/json - póki co nie przejmuj się pojęciem middleware, zajmiemy się nim nieco dalej w tym kursie :) Stwórz teraz endpoint GET /getNote, gdzie po wywołaniu zostanie wczytany Twój zewnętrzny plik JSON oraz wyświetlona zostanie jego zawartość. Przykłądowy plik test.json: {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} Metoda która pozwoli nam na odczytanie pliku to readFile, którą można wywołać z zadeklarowanego wcześniej fs. Jako parametry przyjmuje ona najpierw plik, następnie opcje (np. kodowanie) i funkcję, która wywoła się po załadowaniu. W naszym przypadku będzie to więc następujący kod: fs.readFile('./test.json', 'utf8', function(err, data) { if (err) throw err; stringifyFile = data res.send(data); }); Teraz pora na stworzenie endpointa, który po wywołaniu nadpisze nam podany plik. Stworzymy do tego dynamiczny endpoint, który dopisze do pliku string, który przekażemy jako parametr. Stwórz tym razem POST na /updateNote/:note. Po jego wywołaniu tekst, który znajduje się w miejscu /:note powinniśmy dopisać do wczytanego pliku poprzez dodanie req.params.note do zmiennej stringifyFile, która przechowuje aktualną zawartość pliku. Po przypisaniu powyższej zmiennej, należy ponownie odwołać się do modułu fs tym razem używając metody writeFile. Pomoże nam w tym następujący fragment kodu: fs.writeFile('./test.json', stringifyFile, function(err) { If (err) throw err; console.log('file updated'); }); Na końcu pliku dodaj nasłuchiwanie na porcie 3000. Zapisz plik i uruchom aplikację wpisując node server.js w konsoli. Otwórz Postmana, ustaw metodę zapytania na GET, a w pole adresu wpisz http://localhost:3000/getNote. Jako response powinieneś otrzymać Twój stworzony wcześniej plik JSON. Po zmianie z GET na POST oraz wpisaniu /updateNote/test zamiast /getNote oraz wysłaniu requesta, Twój plik JSON powinien zostać zaktualizowany o słowo test :) Po ukończeniu zadania, wrzuć swój kod na Githuba i przekaż link do repozytorium mentorowi :) Podgląd zadania https://github.com/martinproxy0/Zadanie_17_3.git Wyslij link 17.4. Serwowanie plików statycznych Express posiada wbudowaną możliwość serwowania plików statycznych - takimi plikami są na przykład obrazki, pliki CSS czy JS. Aby serwować te pliki statycznie, wystarczy użyć express.static. Pliki statyczne to pliki, które zostają dostarczone do klienta bez generowania, modyfikacji czy przetwarzania - jedyne, co trzeba z nimi zrobić, to przekazać nazwę katalogu, w którym są przetrzymywane, do express.static - to wystarczy aby zacząć je serwować. Spróbujmy przedstawić to sobie na przykładzie. Załóżmy, że przetrzymujesz swoje zdjęcia i pliki CSS w katalogu assets/. Aby zacząć je serwować, możesz więc użyć następującej linijki: app.use(express.static('assets')); Zmodyfikujmy więc całkowicie naszą aplikację. Najpierw stwórzmy w katalogu projektu nowy katalog o nazwie assets/. Wrzućmy do niego jakiekolwiek zdjęcie/obrazek. W pliku server.js wróćmy do poprzedniego stanu (zanim zaczęliśmy zajmować się routingiem): var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello world'); }); var server = app.listen(3000, 'localhost', function() { var host = server.address().address; var port = server.address().port; console.log('Przykładowa aplikacja nasłuchuje na http://' + host + ':' + port); }); W tym przykładzie sami definiujemy port i adres, ale w prawdziwej aplikacji moglibyśmy tych wartości nie znać. Częstym przykładem jest sytuacja w której adres i port są zdefiniowane w osobnym pliku konfiguracyjnym. Ten plik byłby inny na naszym komputerze niż na serwerze na którym będziemy publikować aplikację - ale nasz kod ma działać w obu lokalizacjach. Dlatego do wyświetlenia linka potrzebowalibyśmy pobrania tych danych za pomocą metody .address(). Pozostaje teraz jedynie w linii nr 3 dodać to, o czym powiedzieliśmy sobie chwilkę temu, czyli linijkę app.use(express.static('assets')); Dla przypomnienia, w nawiasach do express.static przekazujemy katalog, w którym znajdują się pliki, które chcemy serwować. Po zapisaniu pliku server.js, możemy uruchomić aplikację. Teraz, aby zobaczyć nasz obrazek, wystarczy że po http://localhost:3000/ podamy nazwę pliku z rozszerzeniem - u mnie wygląda to tak: Stwórz sobie teraz prosty plik index.html, który będzie miał formularz z dwoma inputami typu text (o nazwach first_name i last_name) oraz jednym typu submit. Element <form> posiada atrybuty takie jak action oraz method. Atrybut action pozwala określić, gdzie wysłać dane z formularza w momencie, gdy zostanie on zatwierdzony. W naszym przypadku będzie to http://localhost:3000/userform. Atrybut method określa metodę, jakiej chcemy użyć - w naszym przypadku niech będzie to GET. Przykładowo, Twój index.html może wyglądać tak: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Node Hello world example</title> </head> <body> <form action="http://localhost:3000/userform" method="GET"> <p> First Name: <input type="text" name="first_name"> </p> <p> Last Name: <input type="text" name="last_name"> </p> <input type="submit" value="Submit"> </form> </body> </html> Gdy już będzie gotowy, wrzuć go do katalogu /assets. Teraz czas na modyfikację pliku server.js. Najpierw zmieńmy to, co chcemy wysyłać, gdy zostanie wysłane żądanie do strony domowej. Zamień więc res.send('Hello world') na res.sendFile('/index.html') - jak się zapewne domyślasz, res.sendFile() wysyła w odpowiedzi plik zamiast wiadomości. Musimy również dodać obsługę żądania na endpoint, do którego będziemy kierować nasz formularz. app.get('/userform', function (req, res) { const response = { first_name: req.query.first_name, last_name: req.query.last_name }; res.end(JSON.stringify(response)); }); W czasie przetwarzania żądania, tworzymy nowy obiekt response, który ma klucze first_name oraz last_name. Do poszczególnych właściwości przypisujemy dane, które otrzymujemy w obiekcie req (od ang. request), czyli w obiekcie z żądaniem. Na koniec wyświetlamy nasz obiekt przetworzony na typ string za pomocą metody JSON.stringify. Po zapisaniu pliku server.js, aplikacja powinna pokazywać formularz, jak poniżej. Po wpisaniu wartości do inputów i wysłaniu ich, powinieneś zostać przekierowany do strony /userform, a po znaku zapytania powinny zostać wyświetlone parametry umieszczone przez Ciebie w inputach. Zadanie: Żonglujemy danymi pomiędzy endpointami Napisz kod obsługujący formularz zgodnie z wskazówkami z tego submodułu, a następnie wyślij swój kod na repozytorium oraz przekaż go do sprawdzenia mentorowi. Podgląd zadania https://github.com/martinproxy0/Zadanie_17_4.git Wyslij link 17.5. Middleware - pośrednik między żądaniem a odpowiedzią