MEAN Stack - Node.js, express

Transkrypt

1 EAN Stack - Node.js, express 1/78 MEAN Stack - Node.js, express Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 27 lutego 2017

2 MEAN Stack - Node.js, express 2/78 Plan prezentacji 1 Wprowadzenie do MEAN Stack 2 Node.js npm Wywołania zwrotne 3 Express.js Obsługa formularzy, GET i POST Przesyłanie plików REST API express-generator Silniki szablonów mongoose 4 Tutoriale 5 Źródła

3 MEAN Stack MEAN Stack - Node.js, express 3/78

4 MEAN Stack - Node.js, express 4/78 MEAN Stack MongoDB darmowa, otwarta baza NoSQL, przechowuje dokumenty w formacie JSON (BSON), dostarcza wsłasny język zapytań, Express.js framework JavaScript wspierający tworzenie aplikacji MVC po stronie serwera, pozwala użytkownikom tworzyć trasy (routes) i wykorzystywać szablony, Angular.js otwarty framework JavsScript wykorzystujący MVC do tworzenia aplikacji internetowych działających po stronie klienta w technologi SPA, wspierany i firmowany przez Google, obecnie występuje w dwóch zupełnie odmiennych wersjach (1.5 i 2.0), Node.js środowisko JavaScript obsługujące operacje wejścia/wyjścia sterowane zdarzeniami, działające po stronie serwera, bazujące na silniku Google V8.

5 MEAN Stack MEAN Stack - Node.js, express 5/78

6 MEAN Stack - Node.js, express 6/78 Zalety MEAN Stack Jeden język do wszystkiego - cały zespół używa tylko JavaScript (na serwerze jak i po stronie klienta), obiekty JavaScript po prostu zapisujemy w MongoDB. Można uruchomić niemal na każdym urządzeniu czy platformie - duża przenośność kodu. Technologia ta jest prawie zupełnie darmowa. Bardzo dobre wsparcie dla przetwarzania w chmurze czy pojedynczych funkcjonalności jako usług sieciowych, np. baz danych NoSQL (compose.io czy mongolab.com). Można łatwo wykorzystać dostępne usługi hostingowe, np.

7 MEAN Stack - Node.js, express 7/78 Node.js platforma działająca po stronie serwera na bazie silnika Google Chrome V8, zaprojektowany przez Ryana Dahl w 2009 roku, ma służyć prostemu tworzeniu szybkich i skalowalnych aplikacji internetowych, open source, całkowicie darmowe, aplikacje napisane w Node.js działają na OS X, MS Windows i Linux ie, używane przez tysiące programistów na całym świecie. /* Program Hello World w Node.js */ console.log("hello World!");

8 MEAN Stack - Node.js, express 8/78 Node.js zalecany do tworzenia aplikacji: z dużą liczbą operacji wejścia/wyjścia, strumieniowania danych, np. video, Single Page Applications (SPA), udostępniających API w formacie JSON, z intensywną wymianą danych w czasie rzeczywistym na wielu urządzeniach, np. portale społecznościowe, nie zalecany przy aplikacjach intensywnie wykorzystujących procesor (CPU), npm - system pakietów Node.js - największy zbiór bibliotek open source na świecie (260000) łatwa produkcja aplikacji internetowych, Node.js = środowisko uruchomieniowe + biblioteki JavaScript wykorzystuje biblioteki libuv

9 MEAN Stack - Node.js, express 9/78 Cechy Node.js Asynchroniczność i sterowanie zdarzeniami Serwer wywołuje kolejne API, jedno po drugim. Nie czeka na zakończenie wywołanej funkcji aby zwrócić dane. Za wszystko odpowiada mechanizm obsługi zdarzeń. Duża szybkość - silnik Chrome V8 zapewnia dużą szybkość w wykonywaniu kodu. Jednowątkowość z zachowaniem dużej skalowalności Node.js używa modelu jednowątkowego z pętlą zdarzeń. Potrafi obsłużyć znacznie więcej żądań niż tradycyjne serwery (np. Apache). Mechanizm zdarzeń pomaga serwerowi na udzielanie odpowiedzi w sposób nieblokujący, pozwala to na wysoką skalowalność. W klasycznych serwerach jest tworzona ograniczona liczba wątków obsługujących żądania. Licencja - Node.js jest tworzony na licencji MIT. Projekty, aplikacjie, firmy - długa lista wykorzystywania Node.js: ebay, General Electric, GoDaddy, Microsoft, PayPal, Uber, Wikipins, Yahoo, Yammer...

10 MEAN Stack - Node.js, express 10/78 libuv międzyplatformowa biblioteka skupiająca się na asynchronicznych operacjach wejścia/wyjścia, stworzona pierwotnie dla Node.js, używana obecnie przez: Luvit, Julia, pyuv i inne, niektóre cechy: wydajna pętla obsługująca zdarzenia, asynchroniczna obsługa gniazd TCP i UDP, asynchroniczna obsługa plików i systemu plików, obsługa sygnałów, obsługa zdarzeń systemu plików, zegar wysokiej rozdzielczości

11 MEAN Stack - Node.js, express 11/78 Najważniejsze części Node.js Najważniejsze części Node.js przedstawiono na rysunku:

12 MEAN Stack - Node.js, express 12/78 Pełna lista modułów Node.js Dokumentacja Node.js, v Assertion Testing Buffer C/C++ Addons Child Processes Cluster Command Line Options Console Crypto Debugger DNS Domain Errors Events File System Globals HTTP HTTPS Modules Net OS Path Process Punycode Query Strings Readline REPL Stream String Decoder Timers TLS/SSL TTY UDP/Datagram URL Utilities V8 VM ZLIB

13 MEAN Stack - Node.js, express 13/78 Obiekty globalne w Node.js Obiekty globalne w Node.js są dostępne we wszystkich modułach, nie trzeba ich w żaden sposób dołączać. filename - nazwa pliku, którego kod jest wykonywany, zawra całą ścieżkę, dirname - nazwa katalogu wraz z całą ścieżką, w którym znajduje się wykonywany plik, settimeout(cb, ms) - uruchamianie funkcji zwrotniej po określonej liczbie ms, cleartimeout(t) - zatrzymywanie licznika czasu utworzonego wcześniej funkcją settimeout(), setinterval(cb, ms) -uruchamianie funkcji zwrotnej co określoną liczbę ms. function printhello(){ console.log( "Hello, World!"); } // Wywołanie funkcji po upływie 2 s var t = settimeout(printhello, 2000); // Usunięcie licznika czasu cleartimeout(t);

14 MEAN Stack - Node.js, express 14/78 Obiekty globalne w Node.js Inne często wykorzystywane obiekty globalne to: console - drukowanie wiadomości w różnych poziomach błędu na stdout albo stderr, zawiera metody: log(), info(), warn(), error(), dir(), trace(), assert() - wyświetlanie wiadomości informacyjnych w różny sposób, console.time(label) - zapamiętuje punkt czasowy związany z etykietą, console.timeend(label) - koniec przedziału czasowego z wiązanego z podaną etykietą, wyświetla przedział czasu, process - obiekt może emitować następujące zdarzenia: exit - emitowane tuż przed zakończeniem procesu, beforeexit - emitowane kiedy Node opróżnił już pętle zdarzeń i nie ma innych zadań, uncaughtexception - emitowane, kiedy eskalacja wyjątków wróci aż do pętli zdarzeń, zdarzenia konkretnych sygnałów - emitowane, kiedy system otrzyma konkretne zdarzenia, np. SIGINT, SIGHUP,... Procesy mają też szereg użytecznych właściwości: stdout, stderr, stdin, argv, execpath, execargv, env, exitcode, version, versions, config, pid, title, arch, platform, mainmodule, metod: abort(), chdir(directory), cwd(), exit([code]), getgid(), setgid(id), getuid(), setuid(id), getgroups(), setgroups(groups), initgroups(user, extra group), kill(pid[, signal]), memoryusage(), nexttick(callback), umask([mask]), uptime(), hrtime().

15 MEAN Stack - Node.js, express 15/78 Użyteczne moduły w Node.js Najbardziej powszechnie i często używane moduły Node.js: moduł os (Operating System) - podstawowe infomacje związane z systemem operacyjnym (pamięć, procesor,...) moduł path - przechowywanie i przetwarzanie ścieżek plików i katalogów, moduł net - pozwala na tworzenie zarówno serwerów jak i klientów, łączenie się, przesyłanie informacji w postaci strumieniowej, moduł dns - pozwala na obsługę DNS (sprawdanie adresów, różne typy adresów DNS, kody błędów), moduł domain - pozwala na wychwytywanie nieobsłużonych błędów. var os = require("os"); console.log('endianness : ' + os.endianness()); console.log('type : ' + os.type()); console.log('platform : ' + os.platform()); console.log('total memory : ' + os.totalmem() + " bytes."); console.log('free memory : ' + os.freemem() + " bytes."); endianness : LE type : Linux platform : linux total memory : bytes. free memory : bytes.

16 MEAN Stack - Node.js, express 16/78 REPL Terminal Read Eval Print Loop (REPL) - środowisko komputerowe, np. Linux Shell, w którym polecenia są automatycznie przetwarzane i wyniki są wyświetlane w trybi interakcyjnym. Node.js też ma takie środowisko: Read - wczytuje dane od użytkownika, parsuje do struktur JavaScript i przechowuje w pamięci, Eval - bierze wprowadzone dane i je oblicza, wyznacza wartości, Print - wyświetla wyniki, Loop - trzy powyższe przetwarza w pęltli aż do dwukrotnego nacieśnięcia Ctrl+c. $ node > 1 + ( 2 * 3 ) > a = 12 // zachowane w zmiennej i wyswietlone 12 > var b = 12 // zachowane w zmiennej ale nie wyswietlone (var) undefined > (a+b)*2 48 > console.log(a+b) 24 undefined

17 MEAN Stack - Node.js, express 17/78 REPL Terminal - wiele linii i mamy możliwość pisania wyrażeń składających się z wielu linii, symbol podkreślenia ( ) zwraca ostatni wynik: > x = 5 5 > while(x>0) {... --x;... console.log(x);... } undefined > x+8 8 > _ 8

18 MEAN Stack - Node.js, express 18/78 REPL Terminal - polecenia Ctrl+c - przerywanie aktualnego polecenia, Ctrl+c dwa razy - zamykanie Node REPL, Ctrl+d - zamykanie Node REPL, Klawisze Góra/Dół - historia polecenie, potrzednie/następne polecenie, klawisz Tab - lista aktualnych komend,.help - lista wszystkich komend,.break albo.clear - wyjście z wieloliniowego wyrażenia,.save nazwapliku - zapis sesji Node REPL do pliku,.load nazwapliku - wczytanie zawartości pliku do bieżącej sesji.

19 MEAN Stack - Node.js, express 19/78 npm npm - menadżer pakietów dla node.js (dla JavaScript). zbiór pakietów/modułów dla Node.js dostępnych online: narzędzie do instalacji pakietów Node.js, zarządza wersjami i zależnościami pakietów Node.js dokumnetacja - najczęściej instalowane pakiety: npm, express, less, browserify, pm2,... $ npm --version $ sudo npm install npm -g $ npm install <Nazwa Modułu> $ npm install express

20 MEAN Stack - Node.js, express 20/78 npm - globalna i lokalna instalacja modułów Pakiety lokalne: domyślnie pakiety instalowane są lokalnie w katalogu node modules w folderze, w którym jest aplikacja Node.js, lokalne pakiety są dostępne poprzez metodę require(), lista lokalnych pakietów/modułów: npm ls. Pakiety globalne: globalne pakiety znajdują się w strukturze systemu plików komputera, nie można ich wczytać używając require(), instalacja pakietu globalnie: npm install express -g, lista globalnych pakietów: npm ls -g.

21 MEAN Stack - Node.js, express 21/78 Tworzenie pakietu Tworzenie pakietu: npm init { } polecenie pyta o najważniejsze dane pakietu (proponując domyślne wartości), tworzony jest plik package.json, np.: "name": "rest", "version": "1.0.0", "description": "hello world restfull api", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "restfull" ], "author": "rperlinski", "license": "ISC"

22 MEAN Stack - Node.js, express 22/78 Plik package.json package.json - plik odpowiedzialny za zarządzanie lokalnie zainstalowanymi pakietami: przechowuje informacje o zależnościach w naszym projekcie, pozwala określić wersje pakietów, których używa nasz projekt, pozwala na odtworzenie naszej aplikacji - łatwość w dzieleniu się naszym projektem Minimum pliku package.json to nazwa i wersja: { } "name": "moj-pakiet", "version": "1.0.0"

23 MEAN Stack - Node.js, express 23/78 Tworzenie pakietu, instalacja Instalacja pakietów } mkdir rest; cd rest npm init - inicjalizacja, tworzy plik package.json npm install express, albo lepiej npm install --save express - dodaje zależności do pliku package.json:... "license": "ISC", "dependencies": { "express": "^4.13.4" }

24 MEAN Stack - Node.js, express 24/78 Atrybuty w pliku package.json name - nazwa pakietu, atrybut obowiązkowy, tylko małe litery, jedno słowo - nie ma spacji, dopuszczalne myślniki (-) i podkreślenia ( ), version - wersja pakietu, atrybut obowiązkowy, description - opis pakietu, homepage - strona domowa pakietum, author - autor pakietu, contributors - współautorzy pakietu, dependencies - lista zależności, npm automatycznie instaluje wszystkie podane zależności w katalogu node modules naszego pakietu, repository - typ repozytorium i URL pakietu, main - punkt wejściowy pakietu, keywords - słowa kluczowe.

25 MEAN Stack - Node.js, express 25/78 Inne polecenia npm npm uninstall express - odinstalowanie modułu express, npm update express - wywoływane po zmianach w pliku package.json, autoamtycznie aktualizuje zależności, npm search express - wyszukiwanie pakietów korzystając z polecenia npm, npm init - generowanie pliku package.json co tworzy nowy moduł/pakiet, npm adduser - dodanie użytkownika do repozytorium npm (nazwa i poprawny ) i następnie można npm publish - publikowanie naszego pakietu, będzie można go instalować poleceniem npm install :)

26 Podwójne API Node.js File System - metody asynchroniczne fs.access(path[, mode], callback) fs.close(fd, callback) fs.exists(path, callback) fs.read(fd, buffer, offset, length, position, callback) fs.unlink(path, callback)... File System - metody synchroniczne fs.accesssync(path[, mode]) fs.closesync(fd) fs.existssync(path) fs.readsync(fd, buffer, offset, length, position) fs.unlinksync(path)... MEAN Stack - Node.js, express 26/78

27 MEAN Stack - Node.js, express 27/78 Wywołania zwrotne - odczyt z pliku, przykład wywołanie synchroniczne var fs = require("fs"); var data = fs.readfilesync('dane.txt'); console.log(data.tostring()); console.log("koniec programu"); Litwo, Ojczyzno moja! ty jesteś jak zdrowie; Ile cię trzeba cenić, ten tylko się dowie,... Koniec programu wywołanie asynchroniczne var fs = require("fs"); fs.readfile('dane.txt', function (err, data) { if (err) return console.error(err); console.log(data.tostring()); }); console.log("koniec programu"); Koniec programu Litwo, Ojczyzno moja! ty jesteś jak zdrowie; Ile cię trzeba cenić, ten tylko się dowie,...

28 MEAN Stack - Node.js, express 28/78 Wywołania zwrotne I Wywołanie zwrotne (ang. callback) - technika programowania będąca odwrotnością wywołania funkcji. Użytkownik rejestruje funkcję do późniejszego wywołania. Funkcje biblioteki wywołają ją w stosownym czasie. Zwykle to programista sam wywołuje funkcje dostarczane przez bibliotekę. Wywołanie zwrotnie: asynchroniczny odpowiednik funkcji, jest wykonywane kiedy zakończy się pewne zadanie, kawałek wykonywalnego kodu, który przekazywany jako argument do innego kodu, od którego oczekujemy, że wywoła przekazany kod w odpowiednim czasie. Node używa tego bardzo intensywnie. Duża część API do Node jest tak napisana, aby wspierać wywołania zwrotne.

29 MEAN Stack - Node.js, express 29/78 Wywołania zwrotne II Programy z funkcjami synchronicznymi: wykonują się sekwencyjnie, z punktu widzenia programisty łatwiej implementować logikę aplikacji. Programy działające asynchronicznie: nie wykonują się sekwencyjnie, jeśli fragment kodu potrzebuje określonych danych powinien być umieszczony w tym samym bloku kodu, żeby wykonanie tych zależnych od siebie instrukcji było sekwencyjne.

30 MEAN Stack - Node.js, express 30/78 Wywołania zwrotne na przykładzie Odczyt z pliku może być: synchroniczny - czekamy na zwrócenie danych zawartych w pliku, asynchroniczny: funkcja zaczyna czytać plik ale... od razu zwraca sterowanie, wykonywane są kolejne instrukcje; zakończenie odczytywania danych z pliku wykonuje wywołanie zwrotne, jako parametr przekazywana jest zawartość pliku, nie ma tutaj blokowania. Wniosek: wysoka skalowalność Node.js, przetwarzanie dużej liczby żądań bez oczekiwania na zwrócone wyniki.

31 MEAN Stack - Node.js, express 31/78 Pierwszy projekt w Node.js Większość aplikacji Node.js składa się z 3 części: import wymaganych modułów - używa się dyrektywy require, utworzenie serwera - serwer będzie oczekiwał na żadania klientów i zwracał odpowiedzi, odczytywanie żądań i zwracanie odpowiedzi - podstawowe działanie serwera. var http = require("http"); var server = http.createserver(function (request, response) { // Wysyłanie nagłówków protokołu HTTP // Status HTTP: 200 : OK, Content Type: text/plain response.writehead(200, {'Content-Type': 'text/plain'}); // Wysyłanie ciała odpowiedzi, niezależnie od rodzaju żądania response.end('pierwszy projekt w Node.js\n'); }); server.listen(5000); console.log('server działa na

32 MEAN Stack - Node.js, express 32/78 Serwer sieciowy Serwer sieciowy: aplikacja obsługująca żądania HTTP przesyłane od klientów, np. przeglądarki, w odpowiedzi zwracająca strony internetowe, zwykle dostarczane są dokumenty HTML razem z obrazkami, stylami CSS i skryptami, większość serwerów obsługuje skrypty po stronie serwera w jednym z wielu języków, serwery wykonują określone zadania, pobierają dane z bazy, przetwarzają skomplikowaną logikę... przykładem może być serwer Apache.

33 MEAN Stack - Node.js, express 33/78 Architektura aplikacji internetowej Klasyczny podział aplikacji internetowej na cztery warstwy: Klient - przeglądarki internetowe (w tym z urządzeń mobilnych) i aplikacje wykonujące żądania HTTP, Serwer internetowy - przechwytuje żadania od klientów i zwraca im odpowiedzi, Warstwa biznesowa - zawiera aplikację serwerową wykorzystywaną przez serwer internetowy; komunikuje się z warstwą danych, Dane - zawiera dane w bazie danych albo dostępnych z innego źródła.

34 MEAN Stack - Node.js, express 34/78 Tworzenie serwera z użyciem Node.js i http var http = require('http'); var fs = require('fs'); var url = require('url'); http.createserver( function (request, response) { // Parsuje żądanie zawierające nazwę pliku var pathname = url.parse(request.url).pathname; // Wyświetlanie nazwy pliku, którego dotyczyło żądanie console.log("request for " + pathname + " received."); fs.readfile(pathname.substr(1), function (err, data) { if (err) { console.log(err); response.writehead(404, {'Content-Type': 'text/html'}); } else { response.writehead(200, {'Content-Type': 'text/html'}); response.write(data.tostring()); // zwracanie treści wybranego pliku } response.end(); // wysyłanie odpowiedzi }); }).listen(5000); console.log('serwer uruchomiony na

35 MEAN Stack - Node.js, express 35/78 Tworzenie serwera z użyciem Node.js index.html <html> <head> <title>pierwszy projekt</title> </head> <body> Pierwszy projekt w Node.js </body> </html> $ node server.js Serwer uruchomiony na Otwieramy w przeglądarce: Narzędzie nodemon pozwala na wygodniejszą pracę, automatycznie przeładowuje serwer po zmianach, instalacja: sudo npm install -g nodemon Uruchomienie serwera: nodemon server.js

36 MEAN Stack - Node.js, express 36/78 Tworzenie klienta z użyciem Node.js i http var http = require('http'); // Opcje użyte w żądaniu var options = { host: 'localhost', port: '5000', path: '/index.html' }; // Funkcja zwrotna obsługująca zwrócone dane var callback = function(response){ // Dopisywanie napływających danych do strunienia var body = ''; response.on('data', function(data) { body += data; }); response.on('end', function() { // Wypisanie danych po ich otrzymaniu w pełni console.log(body); }); } // Wysłanie żądania do seerwera var req = http.request(options, callback); req.end();

37 MEAN Stack - Node.js, express 37/78 Tworzenie klienta z użyciem Node.js Wywołanie aplikacji klienta w innym terminalu, wynik działania: $ node client.js <html> <head> <title>pierwszy projekt</title> </head> <body> Pierwszy projekt w Node.js </body> </html>

38 MEAN Stack - Node.js, express 38/78 Express Express to szybki, elastyczny (nie wymuszający konkretnych rozwiązań), minimalistyczny szablon aplikacji internetowych i mobilnych dla Node.js. Express: udostępnia solidną funkcjonalność do budowania aplikacji, pozwala na szybkie budowanie aplikacji bazujących na Node.js, pozwala na utworzenie warstw pośredniczących odpowiadających na żądania HTTP, dostarcza mechanizm trasowania (ang. routing) - różne akcje dla różnych metod i adresów URL, pozwala na dynamiczne renderowanie stron HTML poprzez przekazywanie argumentów do szablonów.

39 MEAN Stack - Node.js, express 39/78 Express.js i warstwy pośrednie Instalacja: npm install express ExpressJS to komplenty framework. Działa z szablonami (jade, ejs, handlebars, hogan.js) i kompilatorami CSS (less, stylus, compass). Dzięki wartstwom pośredniczącym (oprogramowanie pośredniczące) obsługuje również: ciasteczka, sesje, buforowanie, CSRF, kompresję i wiele innych. Oprogramowanie pośredniczące: łańcuch/stos programów przetwarzających każde żądanie do serwera. Takich programów w stosie może być dowolna liczba, przetwarzanie odbywa się jeden po drugim. Niektóre z nich mogą zmieniać żądanie, tworzyć logi czy inne dane, przekazywać je do następnych (next()) programów w strumieniu.

40 MEAN Stack - Node.js, express 40/78 Express-middlewares Warstwy pośredniczące dodajemy do ExpressJS używając app.use dla dowolnej metody albo app.verb (np. app.get, app.delete, app.post, app.update,...)

41 MEAN Stack - Node.js, express 41/78 Express - instalacja $ npm install express --save Inne ważne moduły, które warto od razu zainstalować: body-parser - warstwa pośrednia obsługująca JSON, Raw, Text i dane formularza przekazane w URL, cookie-parser - przetwarza nagłówki ciasteczek (cookie header) i dodaje obiekt do req.cookies, w którym klucze to nazwy przesłanych ciasteczek, multer - warstwa pośrednia w Node.js do obsługi multipart/form-data (kodowanie danych z formularza), mongoose - połączenie z bazą MongoDB, praca na schematach i obiektach.

42 MEAN Stack - Node.js, express 42/78 Express, Hello World hello.js var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('hello World'); }) var server = app.listen(5000, function () { var host = server.address().address var port = server.address().port console.log("przykładowa aplikacja nasłuchuje na host, port) }) Wynik: $ node hello.js Otwieramy w przeglądarce: Przykładowa aplikacja nasłuchuje na Express używa funkcji zwrotnych z argumentami req i res (obiekty request i response), które zawierają bardzo dużo informacji i żądaniu i odpowiedzi.

43 MEAN Stack - Node.js, express 43/78 Express, trasowanie I Reakcje na żądania użytkowników w punktach końcowych (URI, metody protokołu HTTP). var express = require('express'); var app = express(); app.get('/', function (req, res) { console.log("otrzymano żądanie GET dla strony głównej"); res.send('hello GET'); }) app.post('/', function (req, res) { console.log("otrzymano żądanie POST dla strony głównej"); res.send('hello POST'); }) app.delete('/usun', function (req, res) { console.log("otrzymano żądanie DELETE dla strony /usun"); res.send('hello DELETE'); }) app.get('/user_list', function (req, res) { console.log("otrzymano żądanie GET dla strony /user_list"); res.send('lista użytkowników'); }) app.get('/ab*cd', function(req, res) { // wzorzec strony: abcd, abxcd, ab123cd,... console.log("otrzymano żądanie GET dla strony /ab*cd"); res.send('wzorzec strony dopasowany'); }) var server = app.listen(5000, function () { var host = server.address().address var port = server.address().port console.log("przykładowa aplikacja nasłuchuje na host, port) })

44 MEAN Stack - Node.js, express 44/78 Express, trasowanie II Kolejne żądania: GET - // Hello GET POST - // Hello POST DELETE - // Hello DELETE GET - // Lista użytkowników GET - // Wzorzec strony dopasowany GET - // Wzorzec strony dopasowany GET - // Wzorzec strony dopasowany GET - // Cannot GET /abcdef Reakcja serwera: - Przykładowa aplikacja nasłuchuje na Otrzymano żądanie GET dla strony głównej Otrzymano żądanie POST dla strony głównej Otrzymano żądanie DELETE dla strony /usun Otrzymano żądanie GET dla strony /user_list Otrzymano żądanie GET dla strony /ab*cd Otrzymano żądanie GET dla strony /ab*cd Otrzymano żądanie GET dla strony /ab*cd

45 MEAN Stack - Node.js, express 45/78 Express, statyczne pliki Express posiada wbudowaną warstwę pośrednią express.static, która pozwala na udostępnianie statycznych plików (obrazy, CSS, HTML, JavaScript,...) Wystarczy przekazać nazwę katalogu, z którego pliki będą dostępnę poprzez serwer: app.use(express.static( public )); var express = require('express'); var app = express(); app.use(express.static('public')); app.get('/', function (req, res) { res.send('hello World'); }) var server = app.listen(5000, function () { var host = server.address().address var port = server.address().port console.log("przykładowa aplikacja nasłuchuje na host, port) }) Wywołanie: wyświetli odpowiedni plik znajdujący się w katalogu public.

46 MEAN Stack - Node.js, express 46/78 Formularze, metoda GET form get.js var express = require('express'); var app = express(); app.get('/get.html', function (req, res) { res.sendfile( dirname + "/" + "get.html" ); }) app.get('/form_get', function (req, res) { response = { imie:req.query.imie, nazwisko:req.query.nazwisko }; console.log(response); res.end(json.stringify(response)); }) app.listen(5000); get.html <html> <body> <form action=" method="get"> Imie: <input type="text" name="imie"> <br> Nazwisko: <input type="text" name="nazwisko"> <input type="submit" value="wyślij"> </form> </body> </html>

47 MEAN Stack - Node.js, express 47/78 Formularze, metoda POST form post.js var express = require('express'); var app = express(); var bodyparser = require('body-parser'); var urlencodedparser = bodyparser.urlencoded({ extended: false }) // application/x-www-form-urlencoded app.use(express.static('public')); app.post('/form_post', urlencodedparser, function (req, res) { response = { imie:req.body.imie, nazwisko:req.body.nazwisko }; console.log(response); res.end(json.stringify(response)); }) app.listen(5000); post.html <html> <body> <form action=" method="post"> Imie: <input type="text" name="imie"> <br> Nazwisko: <input type="text" name="nazwisko"> <input type="submit" value="wyślij"> </form> </body> </html>

48 MEAN Stack - Node.js, express 48/78 Formularze, przesyłanie plików I file upload.js var express = require('express'); var bodyparser = require('body-parser'); var multer = require('multer'); var app = express(); app.use(express.static('public')); app.use(bodyparser.urlencoded({ extended: false })); var upload = multer({ dest: 'uploads/' }).single('file'); app.post('/file_upload', function(req, res) { upload(req, res, function (err) { if (err) { // błąd przy wczytywaniu/przesyłaniu pliku return } // wszystko poszło dobrze console.log(req.file); // req.file zawiera opis przesyłanego pliku console.log(req.body); // req.body przechowuje pola tekstowe, jeśli takie były response = { message:'plik wczytany poprawnie', filename:req.file.filename, originalname:req.file.originalname, mimetype:req.file.mimetype, size:req.file.size }; res.end( JSON.stringify( response ) ); }) }) var server = app.listen(5000);

49 MEAN Stack - Node.js, express 49/78 Formularze, przesyłanie plików II file.html <html> <head> </head> <body> Wybierz plik do wysłania: <br /> <form action=" method="post" enctype="multipart/form-data"> <input type="file" name="file" size="50" /> <br> <input type="submit" value="wyślij plik" /> </form> </body> </html>

50 EAN Stack - Node.js, express 50/78 Express, cookie-parser $ npm install cookie-parser cookies.js var express = require('express') var cookieparser = require('cookie-parser') var app = express() app.use(cookieparser()) app.get('/', function(req, res) { console.log("cookies: ", req.cookies) }) app.listen(5000); Wynik: $ curl --cookie "name=jan;pozd=hello" Cookies: { name: 'Jan', pozd: 'Hello' }

51 MEAN Stack - Node.js, express 51/78 API, metoda GET server.js var express = require('express'); var app = express(); var fs = require("fs"); app.get('/listusers', function (req, res) { fs.readfile( dirname + "/" + "users.json", 'utf8', function (err, data) { console.log( data ); res.end( data ); }); }) app.listen(5000); Żądanie: { "user1" : { "name" : "johnw", "password" : "dogville321", "profession" : "film_director", "id": 1 }, "user2" : { "name" : "Halina", "password" : "MojeHaslo123", "profession" : "pisarka", "id": 2 }, "user3" : { "name" : "jnowak", "password" : "wiosna2016", "profession" : "malarz", "id": 3 } }

52 MEAN Stack - Node.js, express 52/78 API, metoda GET, konkretny użytkownik server.js var express = require('express'); var app = express(); var fs = require("fs"); app.get('/:id', function (req, res) { fs.readfile( dirname + "/" + "users.json", 'utf8', function (err, data) { users = JSON.parse( data ); var user = users["user" + req.params.id] console.log( user ); res.end( JSON.stringify(user)); }); }) app.listen(5000); Żądanie: { "name":"johnw", "password":"dogville321", "profession":"film_director", "id":1 }

53 MEAN Stack - Node.js, express 53/78 API, metoda POST server.js... var user = { "user4" : { "name" : "kim2l", "password" : "a2vxzh45xr", "profession" : "programmer", "id": 4 } } app.get('/adduser', function (req, res) { fs.readfile( dirname + "/" + "users.json", 'utf8', function (err, data) { data = JSON.parse( data ); data["user4"] = user["user4"]; console.log( data ); res.end( JSON.stringify(data)); }); })... Żądanie: {... "user4" : { "name" : "kim2l", "password" : "a2vxzh45xr", "profession" : "programmer", "id": 4 } }

54 MEAN Stack - Node.js, express 54/78 API, metoda DELETE server.js... var id = 2; app.get('/deleteuser', function (req, res) { fs.readfile( dirname + "/" + "users.json", 'utf8', function (err, data) { data = JSON.parse( data ); delete data["user" + id]; console.log( data ); res.end( JSON.stringify(data)); }); })... Żądanie: { "user1" : { "name" : "johnw", "password" : "dogville321", "profession" : "film_director", "id": 1 }, "user3" : { "name" : "jnowak", "password" : "wiosna2016", "profession" : "malarz", "id": 3 } }

55 MEAN Stack - Node.js, express 55/78 express-generator express-generator narzędzie generujące szkielet aplikacji do frameworka express. instalacja: npm install express-generator -g Użycie: express [opcje] [katalog], opcje: -V, --version - sprawdzenie wersji Domyślny silnik szablonów to jade -e, --ejs - silnik szablonów ejs --hbs - silnik szablonów handlebars -H, --hogan - silnik szablonów hogan.js Domyślnie style css wprowadzamy bezpośrednio w plikach CSS, -c, --css <silnik> - wsparcie dla silnika stylów (less, stylus, compass, sass) --git - tworzy plik.gitignore -f, --force - wymusza działanie na niepustym katalogu

56 MEAN Stack - Node.js, express 56/78 express-generator Tworzenie struktury aplikacji: express hello Następnie: instalacja zależności: uruchimienie aplikacji: cd hello && npm install DEBUG=hello:* npm start

57 MEAN Stack - Node.js, express 57/78 express-generator, silniki CSS Inne silniki szablonów: hello/views/index.ejs ("ejs": "2.5.5") hello/views/error.ejs hello/views/index.hbs (handlebars - "hbs": "4.0.1") hello/views/layout.hbs hello/views/error.hbs hello/views/index.hjs (hogan.js - "hjs": "0.0.6") hello/views/error.hjs Inne silniki do obsługi stylów: hello/public/stylesheets/style.styl ("stylus": "0.54.5") hello/public/stylesheets/style.sass ("node-sass-middleware": "0.9.8") hello/public/stylesheets/style.less ("less-middleware": "2.2.0") hello/public/stylesheets/style.scss ("node-compass": "0.2.3")

58 express-generator, jak to działa? Plik wejściowy jest w bin/www. DEBUG=hello:* npm start - uruchamia skrypt start z pliku package.json czyli:... "scripts": { "start": "node./bin/www" }, W pliku bin/www jest: obsługa całej aplikacji w../app.js wczytanie modułu http uruchomienie serwera na porcie 3000, rejestracja dwóch funkcji: do obsugi błędów i nasłuchiwania W app.js mamy 6 innych modułów: express, path, serve-favicon, morgan, cookie-parser, body-parser. Mamy też użycie dwóch plików JS: var routes = require('./routes/index'); var users = require('./routes/users'); Dokładnie tak samo jest generowany projekt przez WebStorm. MEAN Stack - Node.js, express 58/78

59 MEAN Stack - Node.js, express 59/78 express-generator, jak to działa? II Rooting ze strony głównej i dla adresu /users: app.use('/', index); app.use('/users', users); // ten jest dla stron // ten jest pod API W pliku app.js jest podpięcie trasowania z index.js i users.js. Ścieżki trasowania są podzielone na dwa pliki, najpierw początek adresu jest ustalony w app.js, reszta jest w index.js i users.js. Następnie jest sporo warstw pośredniczących (matoda app.use()) do obsługi JSONa, wysyłania formularzy metodą POST, obsługi ciasteczek, dostarczania statycznych stron,... Jest też obsługa błędów, przekazywanie ich do wyświetlenia. Trochę powyżej jest obsługa widoków: // view engine setup app.set('views', path.join( dirname, 'views')); app.set('view engine', 'jade');

60 Node.js - eksportowanie modułów Moduły w Node.js są związane z plikami - jeden plik to jeden moduł. Wczytywanie modułów odbywa się za pomocą polecenia require(), np.: kolo.js var PI = Math.PI; exports.pole = function (r) { return PI * r * r; }; module.exports.obwod = function (r) { return 2 * PI * r; }; main.js var kolo = require('./kolo.js'); console.log('pole koła wynosi ' + kolo.pole(2)); console.log('obwód koła wynosi ' + kolo.obwod(3)); Pole koła wynosi Obwód koła wynosi Zmienna PI jest prywatna, widoczna tylko w zakresie modułu. MEAN Stack - Node.js, express 60/78

61 MEAN Stack - Node.js, express 61/78 Node.js - eksportowanie modułów Moduł jako funkcja (np. konstruktor) albo kompletny obiekt: kwadrat.js // przypisanie do exports nie zmieni modułu, trzeba użyć module.exports module.exports = function(a) { return { pole: function() { return a * a; } }; } main.js var kwadrat = require('./kwadrat.js'); var mojkwadrat = kwadrat(4); console.log('pole kwadratu wynosi ' + mojkwadrat.pole()); Pole kwadratu wynosi 16

62 MEAN Stack - Node.js, express 62/78 Ustawienia aplikacji Tworzymy właściwości przypisując wartości do nazw zmiennych (nazwa, wartość), których nazwy są ustalone przez express. Można tworzyć też własne zmienne, np.: app.set('tytul', 'Moja stronka'); // utworzenie zmiennej tytul var zmienna = app.get('tytul'); // odczyt zmiennej console.log(zmienna); // wypisanie wartość, Moja stronka Niektóre zmienne pozwalające ustawić działanie aplikacji express: view - nazwa katalogu (String) albo tablicy katalogów (Array) gdzie mieszczą się szablony widoków. W przypadku tablicy katalogi są przeglądanie w kolejności występowania w tablicy. Domyślna wartość to: process.cwd() + /views view engine - nazwa określa domyślny silnik, który będzie użyty jeśli nie określono jawnie później. // ustawienie silnika dla widoków app.set('views', path.join( dirname, 'views')); app.set('view engine', 'jade');

63 MEAN Stack - Node.js, express 63/78 Silniki szablonów Zarówno express-generator jak i WebStorm oferują do wyboru jeden z kilku silników szablonów: ejs hbs hjs jade pug twig vash Domyślnym silnikiem szablonów jest Jade. Jade, obecnie Pug - EJS - Handlebars - Hogan.js -

64 MEAN Stack - Node.js, express 64/78 Silniki szablonów - Jade (Pug) Pug, wcześniej Jade (zastrzeżony znak towarowy) tutorial - Cechy Pug/Jade: słowo Pug to mops :) silnik szablonów wysokiej wydajności, zaimplementowany w JavaScript dla Node.js i dla przeglądarek, pełna integracja z Express.js jako jeden z wspieranych silników szablonów, zespół pracował nad niekompatybilną wersją Jade kiedy zmieniono nazwę na Pug, instalacja Pug oznacza używanie nowej wersji (ciągle jeszcze beta), nazwa jade jest ciągle wspierana w repozytoriach npm.

65 MEAN Stack - Node.js, express 65/78 Silniki szablonów - Pug/Jade Możliwości szablonów Jade/Pug: są wrażliwe na liczbę spacji określających wcięcia dla zagnieżdżonych znaczników, pozwalają na różne rodzaje dołączania treści ze zmiennych czy obiektów do szablonu, zawierają: instrukcje warunkowe, instrukcję case, obsługę pętli (each, while), do szablonów można dołączać kod JavaScript, posiadają komentarze jednoliniowe i blokowe, przenoszące się lub nie do wynikowego kodu HTML, można dołączyć jeden szablon wewnątrz innego - include, wsparcie dla dziedziczenia poprzez bloki (block) albo zwyczajne dziedziczenie (extends), można tworzyć bloki z określoną nazwą i wielokrotnie ich używać.

66 MEAN Stack - Node.js, express 66/78 Silniki szablonów - EJS EJS - <% Effective JavaScript %> Cechy: wyrażenia umieszczanie w znacznikach <% %> modyfikacja znaczników HTML: <%= %> (możliwość konfiguracji funkcji zastępowania znaczników) brak modyfikacji znaczników, wyjście nieprzetworzone: <%- %> tryb usuwania znaków nowej linii, kończy się znacznikiem -%> tryb usuwania białych znaków, oganieczniki: <% %> dwolne ograniczniki, np. użycie <??> zamiast <% %> wspiera dziedziczenie szablonów, wsparcie szablonów po stronie serwera i klienta (przeglądarka), statyczne buforowanie pośredniego JavaScriptu, statyczne buforowanie szablonów, kompiluje się z systemem widoków Expressa.

67 MEAN Stack - Node.js, express 67/78 Silniki szablonów - Handlebars Handlebars - Cechy: w dużej mierze kompatybilny z Mustache ( zawiera dodatkową funkcjonalność wyrażenia umieszczamy w parze znaków {{... }} komentarze w szablonie: {{!-- --}} albo {{! }} kompilacja szablonu w przeglądarce albo wcześniejsza prekompilacja (szybsze działanie strony) zawiera przekształcanie znaczników HTML (dla bezpieczeństwa, {{napis}}), można je wyłączyć korzystając z zapisu {{{napis}}}, przy użyciu bloku rozszerzeń można dodać obsługę pętli, instrukcji warunkowych, itp. w znaczniku szablonu można używać ścieżek, dostępu do zagnieżdżonych pól obiektu, pozwala na używanie literałów, pozwala na tworzenie szablonów cześciowych wielokrotnego użytku.

68 MEAN Stack - Node.js, express 68/78 Silniki szablonów - Hogan.js Cechy: kompilator dla silnika szablonów Mustache ( zintegrowany z Express - pakiet hogan-express, wspiera podział szablonów na cześci (działa podobnie do include), pozwala na tworzenie układów (layout) często występujących na stronie - coś jak szablon rodzica, wspiera buforowanie - aplikacja działa szybciej unikając niepotrzebnego renderowania, inaczej niż Handlebars, Hogan.js nie zawiera dodatkowych funkcjonalności, np. pętli czy instrukcji warunkowych, pozwala na tworzenie własnych filtrów.

69 MEAN Stack - Node.js, express 69/78 mongoose Mongoose: biblioteka dla Node.js udostępniająca mapowanie obiektowe (podobne do ORM) z interfejsem znanym z Node.js, opiera się na Object Data Mapping (ODM) - zmiana danych z bazy do obiektów JavaScript, którch można użyć w aplikacji, dostarcza gotowe rozwiązanie do modelowania danych aplikacji, zawiera wbudowane rzutowanie typów, walidację, budowanie zapytań, gotowe, praktyczne rozwiązania dla logiki biznesowej i wiele innych.

70 MEAN Stack - Node.js, express 70/78 mongoose - sposób działania I Trzeba zainstalować mongoose w projekcie: npm install mongoose Dołączamy mongoose do projektu i łączymy się z bazą danych, np. test (zostanie utworzona jeśli takiej nie było): var mongoose = require('mongoose'); mongoose.connect('mongodb://localhost/test'); Sprawdzamy czy połączenie się udało: var db = mongoose.connection; db.on('error', console.error.bind(console, 'błąd połączenia...')); db.once('open', function() { // połączenie udane! }); W mongoose wszystko zaczyna się od schematu: var friendschema = mongoose.schema({ nazwa: String }); Mając schemat, na jego bazie tworzymy model var Friend = mongoose.model('friend', friendschema);

71 MEAN Stack - Node.js, express 71/78 mongoose - sposób działania II Na bazie modelu tworzymy dokumenty (zawierają pola i typy jak w schemacie): var franek = new Friend({ nazwa: 'Franek' }); console.log(franek.nazwa); // 'Franek' Przyjaciele mogą się witać - zobaczmy, jak dodać funkcjonalność do naszych dokumentów: // metody należy dodać do schematu ZANIM utworzy się z niego model friendschema.methods.sayhello = function () { var powitanie = this.nazwa? "Cześć, mam na imię " + this.nazwa : "Witaj, nie wiem jak się nazywam..."; console.log(powitanie); } Funkcja dodana do pola methods schematu i wykorzystana w modelu jest dostępna w każdym utworzonym dokumencie var jola = new Friend({ nazwa: 'Jolanta' }); jola.sayhello(); // "Cześć, mam na imię Jolanta"

72 MEAN Stack - Node.js, express 72/78 mongoose - sposób działania III Zapis dokumentów w bazie odbywa się dzięki metodzie save(): // pierwszy argument odpowiada za błędy jola.save(function (err, jola) { if (err) return console.error(err); jola.sayhello(); }); Odczyt dokumentów zapisanych w bazie, metoda find(): Friend.find(function (err, przyjaciele) { if (err) return console.error(err); for(var i=0; i<przyjaciele.length; i++) { console.log('%s', przyjaciele[i].nazwa); } }) Wyszukiwanie można prowadzić, np. po nazwie: find({ nazwa: /ˆJol/ } Friend.find({ nazwa: /^Jol/ }, function (err, przyjaciele) { if (err) return console.error(err); console.log("====================\n"); for(var i=0; i<przyjaciele.length; i++) { console.log('%s', przyjaciele[i].nazwa); } }); // lista przyjaciół nazywających sie Jol*

73 MEAN Stack - Node.js, express 73/78 mongoose - schematy Jak tego używać? mongoose - Resource (URI) POST (create) GET (read) PUT (update) DELETE (destroy) /dokument nowy dok. lista dok. błąd błąd /dokument/:id błąd dok. o :id aktualizacja :id usuń 1 dok. o ID server.js var mongoose = require('mongoose'); var TodoSchema = new mongoose.schema({ name: String, completed: Boolean, note: String, updated_at: { type: Date, default: Date.now }, }); module.exports = mongoose.model('todo', TodoSchema); Typy danych w mongoose: String, Boolean, Date, Array, Number, ObjectId, Mixed, Buffer.

74 EAN Stack - Node.js, express 74/78 Tutoriale I Creating RESTful APIs With NodeJS and MongoDB Tutorial (Part II) Dobry tutorial, jest wprowadzenie teoretyczne, dalej jest instalacja (express-generator), następnie jest dość dużo o Mongoose CRUD i dalej dobra i ważna teoria, na koniec jest konkretnie działający przykład z listą TODO (jest generowanie wnętrza aplikacji na serwerze z express), obsługa CRUD - każda funkcja obsługiwała inną metodę HTTP. MEAN Tutorial (Part 3) : Build REST API s with node express and mongo. Tutaj widzę, że w każdej funkcji obsługującej CRUD są zapisane konkretne, szczegółowe zapytania do mongodb. Czyli jest to bardzo szczegółowe podejście - chyba w dużej części przypadków nie potrzebne. Tutaj nie ma mongoose, wszystko robimy ręcznie, na kolekcjach! Nie będę przerabiał ale ważny tutorial!

75 EAN Stack - Node.js, express 75/78 Tutoriale II Express.js 4, Node.js and MongoDB REST API Tutorial Mamy tutaj takie technologie: Node.js, MongoDB poprzez Mongoskin, Express.js. Biblioteki: express, body-parser, mongoskin (obsługa MongoDB), expect.js, mocha i superagent (do testowania). Testowanie odbywa się z Mocha i Superagent. Robimy zwykłe REST API z JSON. Tutorial ma strukturę: 1. Node.js and MongoDB REST API Overview 2. REST API Tests with Mocha and Superagent - trochę o pisaniu automatycznych testów 3. NPM-ing Node.js Server Dependencies - o mongoskin (lżejszy niż mongoose i bez schematów) 4. Express.js 4.x Middleware Caveat 5. Express.js and MongoDB (Mongoskin) Implementation - podłączenie MongoDB, użycie API 6. Running The Express.js 4 App and Testing MongoDB Data with Mocha - testowanie 7. Conclusion and Further Express.js and Node.js Reading - podsumowanie Wartościowy tutorial ze względu na użycie innej biblioteki do mongo: mongoskin. Instalacja express jest wewnątrz katalogu, nie ma tworzenia struktry frameworka poleceniem express-generator. Czyli to prostsze podejście. Każda z metod HTTP obsługiwana w osobnej funkcji. Generalnie bardzo podobnie sie używa jak mongoose.

76 EAN Stack - Node.js, express 76/78 Tutoriale III Build a RESTful API using Node and MongoDB Standard: Node.js, mongodb, express, mongoose, body-parser. Każda metoda HTTP obsługiwana oddzielnie. Schemat zawiera dwa pola: mail i zakodowane hasło. To ostanie warto wykorzystać. API: GET /users Return all Users from MongoDB POST /users Add new user in MongoDB GET /users/:id Return User with matched ID PUT /users/:id Update users information DELETE /users/:id Delete particular user Nie ma tutaj jednak uwierzytelnienia. Nie ma też wcale teroii. Jest też bliźniaczy tutorial do zrobienia takiego API na MySQLu.

77 MEAN Stack - Node.js, express 77/78 Tutoriale IV CREATING A SIMPLE RESTFUL WEB APP WITH NODE.JS, EXPRESS, AND MONGODB Jest mongodb i Node.js. Jest express, łącznie ze strukturą wewnętrzną. Użyto biblioteki JADE do tworzeina i zarządzania szablonami ( oraz biblioteki monk ( do obsługi MongoDB. monk jest malutką biblioteką, prostszą niż mongoose i mongoskin. Wykorzystano AJAX i jquery do działania w HTMLu... Jak dla mnie to chyba za duże wchodzenie w szczegóły... Building your first application with MongoDB: Creating a REST API using the MEAN Stack - Part 2 Jest MEAN Stack, standardowo. W pierwszej części tutoriala jest trochę teori. Są cztery kolekcje: użytkowników, kanałów RSS, przeczytanych kanałów RSS oraz kanałów RSS przypisanych do konkretnych użytkowników. To jest w takim razie chyba najbardziej rozbudowany tutorial... Tutaj jest uwierzytelnienie ale dużo tego i skomplikowane... zostawiam na razie uwierzytelnienie.

78 MEAN Stack - Node.js, express 78/78 Źródła