ZAAWANSOWANE TECHNIKI WWW (zajęcia 18.11.2017 r. i 17.12.2017 r.) 1. Przygotowanie środowiska pracy back-end (Node.js) NodeJS (wersja LTS: 8.9.1) jest zaawansowanym środowiskiem do tworzenia skalowalnych i bardzo wydajnych aplikacji webowych. Aplikacje oparte o środowisko node działają w asynchronicznym systemie wejścia/wyjścia sterowane za pomocą zdarzeń i pozwala na uruchomienie kodu JavaScript poza przeglądarką internetową. System posiada bardzo dobrze rozbudowany system wtyczek dostępnych w repozytorium on-line (npn) które można instalować w zależności od potrzeb. Instalacja środowiska uruchomieniowego Node.js 0) Wchodzimy na stronę: http://nodejs.org 1) Pobrać najnowsza wersję platformy node.js, a następnie rozpakować do katalogu domowego i zmienić nazwę powstałej kartoteki na nodejs. 2) W utworzonej kartotece znajduje się kartoteka bin w której zlokalizowany jest główny plik wykonywalny o nazwie node, stanowiący interpreter kodu JS. 3) Domyślnie powinniśmy używać powłoki terminala bash. Jeśli nie jest to domyślna powłoka należy się do niej przełączyć wpisując w terminalu polecenie: > bash 4) Definiujemy tworzymy następujące linki symboliczne w głównej kartotece nodejs: > ln -s./bin/node node > ln -s./bin/npm npm 5) W pliku.bashrc (jeśli nie istnieje tworzymy taki w sowjej głównej kartotece domowej) dodajemy następującą zmienną środowiskową: export PATH=$PATH: /home/username /nodejs/bin gdzie username - oznacza nazwę użytkownika nodejs - oznacza nazwę kartoteki instalacji nodejs 6) Następnie w głównej kartotece domowej wykonujemy polecenie: > source.bashrc 7) Jeśli w kartotece mamy np. plik.js, zawierający skrypt w języku JS, to aby go wykonać należy uruchomić go następującym poleceniem: > node plik.js 8) W celu sprawdzenia czy poprawnie zainstalowaliśmy środowisko node można wykonać polecenie: > node -v Zadanie 1 Dla przetestowania poprawnej instalacji środowiska uruchomieniowego Node.js proszę uruchomić aplikację serwerową dostępna na stronie: https://nodejs.org/en/about/ Kod proszę wpisać kod dostępny na stronie do pliku app.js i uruchomić poleceniem: > node app.js
Proszę zmodyfikować skrypt tak aby w ostatecznej odpowiedzi renderowana była prosta strona internetowa z kodu hipertekstowego (HTML). Instalacji i praca z pakietem Express.js (aplikacja samodzielna nie MVC) Node.JS umożliwia tworzenie złożonych i zaawansowanych aplikacji internetowych o architekturze MVC (Model-View-Controller). Dziś poznamy kompletne narzędzia i metody do tworzenia aplikacji w tej architekturze w środowisku NODE.JS. Do tworzenia aplikacji w architekturze MVC w środowisku NODE.JS służy pakiet Express (strona projektu: https://expressjs.com/ ). Jest to bardzo rozbudowane narzędzie ułatwiające budowanie aplikacji internetowych w NODE.JS opierających swoją komunikację na protokole HTTP. 0) Tworzymy np. Kartotekę o nazwie test, a następnie do niej przechodzimy > mkdir test && cd test 1) Następnie inicjalizujemy kartotekę zakładając nowy projekt w Node.js > npm init Polecenie to przeprowadzi nas przez proces tworzenia pliku package.json który będzie zawierał wszystkie informację o naszym nowym projekcie. W szczególności przy wyborze nazwy tzw. Entry point proszę wpisać zamiast proponowanej nazwy index.js, nazwę app.js. Plik po utworzeniu powinien wyglądać następująco: About to write to /home/marcin/test/package.json: { } "name": "test", "version": "1.0.0", "description": "Moja pierwsza aplikacja Node.js / Express.js", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "aplikacja", "web", "node" ], "author": "Jan Kowalski", "license": "ISC" 2 ) W kolejnym kroku należy zainstalować pakiet express.js: > npm install express --save Proszę zwrócić uwagę, że modyfikacji uległ plik package.json 1
3) Proszę utworzyć plik app.js w który prosze umieścić nasępujący kod aplikacji: const express = require('express'); const app = express(); app.get('/', function (req, res) { res.send('hello World!'); app.listen(3000, function () { console.log('example app listening on port 3000!'); 4) Proszę uruchomić aplikację poleceniem: > node app.js a w pasku adresu przeglądarki wpisać adress http://localhost:3000 Zadanie 2 Proszę omówić metody natywne HTTP i sposób trasowania w aplikacjach Express.js. Zadanie 3 Proszę spróbować użyć kodu przedstawionej aplikacji do wysłania do użytkownika statycznego kody strony internetowej HTML zapisanego w pliku index.html 2. Praca z generatorem Express.js (aplikacja samodzielna z szablonem MVC) 0) Domyślnie używamy powłoki terminala bash. Jeśli nie jest to domyślna powłoka należy się do niej przełączyć wpisując w terminalu polecenie: > bash 1) Za pomocą standardowej metody instalacji pakietów należy zainstalować w środowisku node.js moduł express : > npm install express 2) Dodoatkowo musimy doinstalować pakiet generatora express: > npm install -g express-generator Na tym etapie środowisko NODE.JS jest gotowe do tworzenie aplikacji w architekturze MVC. Tworzenie nowego projektu MVC: Aby utworzyć nowy projekt należy wykonać następujące kroki: 1) Utworzyć w kartotece głównej NODE.JS nowy katalog np.: > mkdir hello 2
2) Wygenerować strukturę aplikacji: > express hello 3) Wejść do kartoteki hello: > cd hello/. 4) Doinstalować standardowe pakiety: > npm install 5) Na tym etapie aplikacja jest gotowa do uruchomienia. Serwer uruchamiamy wydając polecenie: > npm start 6) W przeglądarce, po wpisaniu adresu localhost:3000 powinniśmy ujrzeć domyślną stronę projektu express. 7) Dodatkowo w konsoli w której uruchomiliśmy serwer dostajemy logi np.: GET / 200 607ms - 270b GET /stylesheets/style.css 200 8ms - 110b które mówią o czasach wykonywania przychodzących żadań do serwera i pobieranych plikach. Zgodnie podziałem na trójwarstwową strukturę aplikacji (Model-View-Controller) poszczególne moduły aplikacji są rozproszone w różnych kartotekach. Podstawowa struktura kartotek jest następująca: -rw-r--r-- 05-26 10:52 app.js drwxr-xr-x 05-26 10:52 bin drwxr-xr-x 05-26 10:52 node_modules -rw-r--r-- 05-26 10:52 package.json drwxr-xr-x 05-26 10:52 public drwxr-xr-x 05-26 10:52 routes drwxr-xr-x 05-26 10:52 views // główny plik aplikacji // katalog z serwerem // dodatkowe moduły node.js // pliki publiczne np. css // kontroler // widok Kartoteka models nie jest standardowo tworzona. Zadanie 4 Proszę zbudować w oparciu o infrastrukturę Express.js (MVC), aplikację która będzie obsługiwać formularz przez który dane będą przesyłane za pomocą metody POST, a następnie dane te będą wyświetlane na stronie która jest wyświetlona po wysłaniu formularza. Może to być prosty formularz kontaktowy. 3. Komunikacja HTTP (POST, GET) Architektura trójwarstwowa wymusza podział na akcje i widoki. Gdzie akcje (znajdujące się kontrolerze) są odpowiedzialne za wykonywanie operacji i obsługę żądań przychodzących do serwera, a widoki za wyświetlanie danych przychodzących z kontrolera. Standardowo akcje przechowywane są w kartotece routes, a widoki w kartotece views. Rozpocznijmy od kontrolera: w kartotece routes znajdują się dwa plik jeden o nazwie index.js drugi user.js. Zajmijmy się tym pierwszym, który odpowiada za obsługę strony głównej w naszej aplikacji. Jego struktura jest bardzo prosta i zawiera tylko jedną funkcję obsługującą żądania GET przychodzące do serwera. 3
W ogólności w tym kontrolerze (oraz każdym innym dowolnym) moga znaleźć się akcje operujące na metodach natywnych protokołu HTTP. Najczęściej używanymi są dwie metody: GET -> nasŧepuje kiedy żądamy pobrania danego zasobu (za pomoca adresu URL stanowiący jednoznaczny lokalizator zasobu). Serwer w odpowiedz na żądanie GET kiedy użytkownik ma do tego prawo oraz zasób istnieje. zwraca żądany zasób. Przykładem żądania GET jest np. zwykłe wyświetlenie strony HTML. POST -> następuje kiedy chcemy do serwera przesłać dane lub te dane uaktualnić. W zasadzie jest to to samo co żądanie GET, poza tym że w ciele tego żądanie możemy przesłać dodatkowe dane. Przeanalizujmy funkcję która znajduje się w pliku routes/index.js : /* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' W tej funkcji obsługujemy żądanie GET przychodzące od klienta (z przeglądarki), wymuszające wyświetlenie strony głównej aplikacji. W odpowiedzi na przychodzące żądanie req formowana jest odpowiedź res, która renderuje stronę index.html na podstawie widoku znajdującego się w kartotece views. Przeanalizujmy, jakie wartości przyjmuje metoda render : - Jako pierwszy argument podajemy nazwę pliku widoku który ma zostać wyświetlony w wyniku realizacji tego zadania, - drugi parametr to obiekt z danymi przekazywanymi do widoku które mają zostać wyświetlone ostatecznie na stronie. Można to porównać do funkcji która zwraca wartość (tu w postaci złożonego obiektu) do innej funkcji. Metody które mogą zostać wykorzystane do zwrócenia odpowiedzi do klienta: res.download() - zwracamy plik którego pobrania żąda użytkownik. res.end() - zakończenie formowania odpowiedzi (argumentem może być tekst) res.json() - zwrócenie do klienta pliku JSON. res.jsonp() - zwrócenie do plikenta odpowiedzi JSONP. res.redirect() - przekierowanie żądania (np. Na inny addres). res.render() - wyrenderowanie strony z szablonu (np. JADE lub EJS). res.send() - wysłanie odpowiedzi do klienta np. tekstu res.sendfile() - odesłanie odpowiedzieć jako application/octet-stream res.sendstatus() - odesłanie kodu odpowiedzi HTTP i jego reprezentacji tekstowej. Zadanie 5 Proszę przetestować metody zwrotu odpowiedzi kontrolera zaznaczone na niebiesko w tabeli powyżej. Proszę dla każdej metody napisać osobną akcję kontrolera z użyciem metody GET. Każda akcja powinna być wykonana przez osobny adres URL. 4
4. Przekazywanie zmiennych przez adres - metoda GET w node.js. W kilku sytuacjach niezbędne jest jawne przekazanie wartości zmiennych przez adres (metoda GET), podobanie jak to było w PHP. Jako, że w tym przypadku metoda wysyłamy zmienne to GET możemy posłużyć się funkcją: router.get(). Jak już wiemy w metodzie.get() pierwszym parametrem jest adres obsługiwanego żądania. W tym miejscu możemy również przekazywać wartości zmiennych. Przykład: Chcemy przekazać 4 następujące zmienne o wartościach całkowitych: a=4, b=5, c=6, d=7. Aby to uczynić musimy w odpowiedni sposób spreparować maskę adresu dla metody.get(). Zakładamy że nasz funkcja będzie obsługiwała docelowo adres /test oraz w odpowiedzi będzie renderować stronę widoku o nazwie testowy.jade. W standardowym wypadku szablon naszej funkcji będzie następujący: router.get('/test, function(req, res){ var obj = 0; res.render('testowy', obj); Teraz musimy tak zmodyfikować maskę obsługiwanego adresu aby można było podać zmienne (oczywiście nie wpisujemy ich na sztywno w adresie!). Zmianę w adresie są symbolizowane przez: :nazwa_zmiennej // dwukropek i nazwa zmiennej przykładowo: router.get('/test/:a, function(req, res) gdzie :a jest nazwą naszej zmiennej którą będziemy mogli posługiwać się do odebrania wartości. Jesteśmy mamy tych zmiennych więcej oddzielamy je przecinkami: router.get('/test/:a,:b,:c,:d, function(req, res) Możliwe są również, inne kombinacje np: router.get('/test/:a/:b,:c/:d, function(req, res) router.get('/test/:a/:b/:c/:d, function(req, res) router.get('/test/:a/:b,:c,:d/:e/:f/:g,:h, function(req, res) W adresach można przesyłać dowolne wartości tj. liczby, znaki etc. Aby odebrać wartości ze zmiennych adresowych należy posługiwać się obiektem żądania i nazwą zmiennej zdefiniowanej w adresie: np: req.params.nazwa_zmiannej; req.params.a; 5
Req.params.b; Wykorzystanie tej funkcjonalności najczęściej polega na wpisaniu na sztywno np. odnośnikach wartości zmiennych. W widoku ma to np następującą postać: a(href= /test/4,5,6,7 ) kliknij mnie Po kliknięciu w link zostanie wywołana metoda get obsługująca wywołany adres. 5. Przekazywanie zmiennych przez formularz - metoda POST w node.js. Zacznijmy od zdefiniowania w routes/index.js nowej funkcji która będzie odpowiadała za wyświetlanie naszej strony oraz przetworzenie danych wpisanych do formularza. Standardowo w tym pliku mamy obiekt który obsługuje nam zapytania do serwera żądające wyświetlanie danej strony: /* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' W tym wypadku w odpowiedzi renderowany jest szablon zapisany w pliku views/index.jade, będący rozszerzeniem domyślnego wyglądu strony. Aby obsłużyć formularz obsługujący dane musimy posłużyć się do tego celu metodą odbierającą dane z formularza czyli POST (wyjaśnienie różnicy pomiędzy GET a POST było przedstawione w poprzednich materiałach). Szkielet funkcji jest następujący: router.post( [link-wyswietlany], function(req,res){ res.render(' [nazwa.jade] ',{ } ); W naszym przypadku chcielibyśmy utworzyć formularz który posiada jedno pole typu text do którego wpisujemy dane, a następnie te dane są wyświetlane jak tytuł strony ( w nagłówku h1) strony wyświetlonej po przeładowaniu. Załóżmy że strona po przeładowaniu będzie się nazywać studentów, a do szablonu jade przekazywana będzie wartość pola z formularza. Do pobierania danych z pól formularza, posługujemy się obiektem req który jest generowany w momencie wysłania żądania do serwera. Dostęp do wszystkich pól formularza jest możliwy przez obiekt body i podanie nazwy danego pola w formularzu np:. req.body.student. Pełny kod funkcji renderującej stronę na podstawie danych z formularza jest następujący: router.post('/studentuj',function(req,res) { var student = { name: req.body.student //nazwa pola }; res.render('index', {title: req.body.student Musimy odpowiednio zmodyfikować plik szablonu, tak aby zawierał sam formularz. Dla języka JADE/PUG miałby on postać: 6
extends layout block content h1= title p Welcome to #{title} form(method="post" action="/studentuj") input(type="text" name="student") input(type="submit") Formularz ten POSTuje (czyli wysyła dane) pod adres /studentuj który właśnie jest obsługiwany w kontrolerze przez wcześniej napisaną funkcję. Zadanie 6 Proszę przetestować przesyłanie danych obiema metodami GET i POST. Proszę przygotować przykład w którym będzie pokazane odbieranie danych obiema metodami. 6. Silnik szablonów JADE/(PUG) oraz EJS Express umożliwia użycie kilku silników szablonów dzięki którym możemy przygotowywać widoki aplikacji internetowych m.in. ejs, hbs, hjs, jade, pug, twig, vash. Dla wygodny można wybrać jeden z nich. Wśród twórców aplikacji Express/Node najczęściej używanymi są JADE/PUG oraz EJS. Domyślnie aplikacja wygenerowana w Express.js działa z użyciem silnika JADE/PUG. Przy inicjowaniu nowego projektu możemy wybrać typ silnika na którym ma działać nowa aplikacja: JADE : express nowy_projekt EJS : express --view=ejs -e nowy_projekt Jade jest uproszczoną formą szablonu HTML pozbawioną właściwych znaczników, zawierającą elementy logiki wyświetlania. Przykład: doctype html html head script(src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js') title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content Natomiast EJS jest zwykłym szablonem HTML wzbogaconym o annotacje które służa np. so osadzania zmiennych wewnątrz szablonu. <!DOCTYPE html> <html> <head> 7
<title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <p>welcome to <%= title %></p> </body> </html> Gdzie notacja jest zapisana jako znacznik: <%= title %> Jak widać Jade, jest pozbawiony znaków określających znaczniki oraz jest również samo uzupełniający się ponieważ nie ma znaczników zamykających!!!! Przykład widoku wyświetlającego stronę główną jest umieszczony w pliku index.jade : extends layout block content h1= title p Welcome to #{title} Polecenie extends layout mówię serwerowi, że ten plik rozszerza funkcjonalność głównego widoku umieszczonego w pliku layout. Dodatkowo w obu przypadkach widoku głównego, jak i widoku rozszerzającego widać również jak należy odbierać zmienne przekazywane przez w obiekcie funkcji render. Jak pamiętamy przekazaliśmy w kontrolerze objekt: { title: Express } Jest on teraz wyświetlany w dwóch miejscach w elemencie <h1> oraz <p>. W obu przypadkach dostęp do obiektu jest inny, jednak są to dwie równoważne metody. Z doświadczenie polecam metodę drugą czyli #{ nazwa zmiennej }. Przykład 1. (który już znamy): Zapisywanie znaczników w JADE: <div> Element blokowy </div> div Element blokowy Przykład 2. <html> <head> <title> Jade </title> </head> <body> <p> JADE html... head... title Jade... body... p... JADE 8
</p> </body> </html> W przykładzie powyżej kropki oznaczają wcięcia zrobione za pomocą spacji. Alternatywnie można używać tabulatora (stałego odstępu). Należy jednak w pojedynczym pliku.jade używać spacji lub tabulacji (nigdy obu). Powyższy przykład pokazuje również niezwykłą zwięzłość tego typu kodowania. Wewnątrz tekstu języka JADE można używać znaczników HTML!!!!! Przykład 3. Plain text can include <strong>html</strong> <p> It must always be on its own line </p> Plain text can include <strong>html</strong> p It must always be on its own line Znaczniki HTML zostaną przesłane do przeglądarki gdzie zostaną zinterpretowane Przykład 4 - Lista <ul> <li>item A</li> <li>item B</li> </ul> ul li Item A li Item B li Item C Tworzenie atrybutów znaczników: <a href="google.com">google</a> <a href="google.com" class="button">google</a> a(href='google.com') Google a(class='button', href='google.com') Google Klasy: <a class="button"></a> <div class="content"></div> a.button.content Identyfikatory: <a id="main-link"></a> <div id="content"></div> a#main-link #content Prosta logika w JADE: JADE umożliwia wykonywanie bardzo prostych operacji wyliczeniowych: 9
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> ul each val in [1, 2, 3, 4, 5] li= val Możliwe jest wykonywanie prostych zadań które mają być wykonane w pętli: <li>item</li> <li>item</li> <li>item</li> - for (var x = 0; x < 3; x++) li item Dostęna jest również instrukcja warunkowa wyboru: <p>you have 10 friends</p> - var friends = 10 case friends when 0 p you have no friends when 1 p you have a friend default p you have #{friends} friends 7. Tworzenia projektów MVC w oparciu o Node.js/Express.js Środowisko Node.js w połączeniu z modułem Express.js umożliwia tworzenie aplikacji internetowych bazujących na trójwarstwowej architekturze o podziale na następujące komponenty: - Logika danych (Model) - Logika biznesowa (Kontroler) - Logika prezentacji (Widok) Express.js pozwala na utworzenie szkieletu aplikacji opartego na w/w wzorcu.. Aplikacja internetowa oparta na module Express.js wykorzystuje wbudowane w protokół HTTP natywne metody komunikacji pomiędzy klientem a serwerem tj. GET, POST, PUT, DELETE itp. Służą one do przyjęcia przez serwer żądania (req) od klienta oraz odesłania do niego stosownej odpowiedzi (res). Podejście te bazuje na tzw. trasowaniu oraz tworzeniu end-pointów do wykonywania określonych czynności przez aplikację. Ogólna postać End-pointa w Express.js ma to: app.metoda( TRASA, CALLBACK ); Przykładem end-pointa jest następująca funkcja znajdująca się w pliku./routes/index.js /* GET home page. */ router.get('/', function(req, res) { 10
res.render('index', { title: 'Express' Ten konkretny end-point pozwala na obsłużenie żądania GET w wyniku wpisania przez użytkownika do przeglądarki następującego adresu URL: localhost:3000/ Następnie w wyniku tego wywołania endpoint realizuje określoną operację która jest zapisana w ciele funkcji wywołania zwrotnego tzw. callbacka. W przykładzie funkcja renderuje stronę HTML bazując na szablonie o nazwie index (pierwszy argument metody res.render()) oraz danych które są przekazywane w postaci obiektu w drugim argumencie. W ogólności funkcja Callback nie musi renderować widoku w postaci pliku HTML, może np. zwracać dane w postaci obiektu JSON który następnie jest przesyłany do przeglądarki klienta poprzez metodę: res.json(data); Jednym z typowych zachowań aplikacji internetowych w celu poprawy wydajności ich działania jest renderowanie wszystkich elementów widoku (strony) HTML w momencie przyjścia pierwszego żądania klienta, natomiast uaktualnienie wszystkich danych prezentowanych w tym widoku w wyniku operacji wykonywanych asynchronicznie za pomocą podejścia AJAX (czyli wymieniając obiekt JSON). Drugim bardzo istotnym aspektem tworzenia aplikacji w oparciu o Node.js/Express.js jest umiejętności tworzenia własnych modułów (modelu) aplikacji, które realizują określone funkcjonalności lub potrzeby biznesowe. W standardowym szkielecie aplikacji Express.js nie ma miejsca na model, i należy stworzyć go samodzielnie. Najwygodniej jest utworzyć kartotekę o określonej nazwie np. Modules i w niej przechowywać wszystkie pliki autorskich modułów. W ramach tej kartotek należy organizować poszczególne funkcjonalności (modele) w odrębnych plikach i następnie zgodnie z podejściem CommonJS udostępniać je innym obiektom za pomocą: Module.exports = NAZWA-MODELU; A następnie w pliku w którym chcemy użyć tego modułu dodać go za pomocą dyrektywy: const MODEL = require(../modules/mojmodul.js ); (przykład z utworzeniem modułu opartego o klasę Kalkulator podany jest w wykładzie 6 oraz stanowił zadanie na poprzednich zajęciach). 7. Tworzenie modularnej struktury aplikacji opartej o obiekt module.exports W środowisku Node.js we współpracy z Express.js możemy tworzyć własne lgiczne moduły aplikacji realizujących określone funkcjonalności (zadania). Jednym z popularnych metod enkapsulowanie funkcjonalności w JavaScript są moduły tworzone w postaci osobnych plików i dołączony do głównego programu za pomocą dyrektywy require() np. : const http = require( http ); Dyrektywa ta tworzy obiekt będą bezpośrednim odwołaniem do obiektu modułu http i dającym dostęp do jego metod. 11
W przypadku gdy chcemy sami stworzyć taki moduł robimy to najczęściej poprzez stworzenie literału obiektowego składującego odpowiednie dane oraz metody wykonywane na tych danych. Przykład prostego modułu stanowiącego kalkulator: // w pliku kalkulator.js var kalkulator = { dodaj: function(a,b){ return a + b; }, odejmij: function(a,b){ return a - b; }; module.exports = kalkulator; Każdy obiekt (zatem również literał obiektowy) posiada obiekt module.exports, dzięki któremu możemy udostępnić zawartość dowolnej funkcji lub obiektu do innego obiektu. Dla przykładu stworzonego modułu kalkulatora, jego dołączenie do programu głownego będzie wyglądać następująco: // w pliku app.js const kalkulator = require('./kalkulator.js'); console.log(kalkulator.dodaj(4,5)); console.log(kalkulator.odejmij(4,5)); console.log(kalkulator.pomnoz(4,5)); console.log(kalkulator.podziel(4,5)); Podobnie możemy utworzyć nowy moduł w oparciu o klasy języka JavaScript: // w pliku kalkulator.js class Kalkulator { constructor(a,b){ this.x = a; this.y = b; } Dodaj() { return this.x + this.y; } }; module.exports = Kalkulator; Oraz plik głównej aplikacji: // w pliku app.js const Kalkulator = require('./kalkulator.js'); var k = new Kalkulator(4,5); console.log(k.dodaj()); Zadanie 7 Proszę zaadoptować przygotowany przykład nowego modułu (stworzonego jako literał obiektowy lub klasa - do wyboru jedno lub drugie) do aplikacji uruchamianej za pomocą 12
Express.js. Proszę również o przygotowanie uproszczonego interfejsu klienta GUI który będzie umożliwiał użycie w/w modułu kalkulator. Prosze posłużyć się struktura aplikacji utworzoną za pomocą generatora Express.js. Interfej powinien umożliwiać wprowadzenie dwóch liczb przez formularz, następnie za pomocą metody POST dane te powinny zostać przesłane do serwera gdzie powinny zostać odebrane i na ich podstawie powinna zostać wykonana odpowiednia operacja dostępna w kalkulatorze. Do modułu proszę również dodać pozostałe operacje matematyczne oraz spróbować zaimplementować operację silnia (rekurencja!!). 13