PROJEKTOWANIE APLIKACJI INTERNETOWYCH (WFAIS.IF-N016) dr inż. Marcin Zieliński Wykład dla kierunku: Informatyka Stosowana I rok, II stopień Rok akademicki: 2016/2017 - semestr letni WYKŁAD 3
Przypomnienie Protokół HTTP Synchroniczna i Asynchroniczny model komunikacji Architektura Model-Widok-Kontroler (MVC) Przypomnienie podstawowych technologii: HTML, CSS
Protokół HTTP(S) Hyper Text Transfer Protocol (HTTP/1.1) [Protokół przesyłania dokumentów Hiper-Tekstowych] Oparty na TCP, Komendy tekstowe, Transmisja 8-bitowa, Bezstanowy i bezsesyjny. RFC 2616 (czerwiec 1999) RFC (Request for Comments) Bezstanowość (ang. stateless), co oznacza że nigdzie nie istnieje zapis stanu poprzednio wykonanych operacji, a kolejne transakcje są wykonywane niezależnie. Najważniejsze metody protokołu HTTP: HEAD - wysyła żadanie przesłania nagłówka zawierającego meta-dane (informację), bez przesyłania samego zasobu. GET - wysyła żądanie pobrania konkretnego zasobu URI (np. strony internetowej napisanej w języku HTML). POST - wysyła żądanie do serwera akceptacji zasobu dołączonego do żądania. pozostałe: PUT, DELETE, TRACE, OPTIONS, CONNECT. Zakres kodów Znaczenie 100-199 Informacyjne. 200-299 Żądanie (od klienta) powiodło się 300-399 Żądanie klienta zostało przekazane, wymagane są dalsze działania. 400-499 Żądanie klienta nie powiodło się. 500-599 Błąd serwera.
Podstawowa architektura: klient-serwer Klasyczny model komunikacji synchronicznej HTTP: Serwer Żądanie HTTP Komunikacja bazodanowa Dane Klient Odpowiedź HTTP: HTML, CSS etc Jest to model synchronicznej komunikacji HTTP, gdzie klient wysyła żądanie, serwer je odbiera następnie przetwarza (np. komunikuje się z bazą danych) i na końcu generuje odpowiedź. W sytuacji takiej klient musi czekać z kolejnym żądaniem do momentu kiedy nie dostanie odpowiedzi od serwera. W modelu synchronicznym mamy bardzo mały poziom aktywności oraz interaktywności strony, strona musi być przeładowana (pobrana) po każdym żądaniu klienta, jeżeli strony są złożone to proces ten jest długi.
Podstawowa architektura: klient-serwer Klasyczny model komunikacji synchronicznej HTTP:
Podstawowa architektura: klient-serwer Model komunikacji asynchronicznej HTTP: Serwer Żądanie HTTP JavaScript Klient Dane AJAX HTML, CSS Komunikacja bazodanowa Odpowiedź HTTP: XML Jest to model asynchronicznej komunikacji HTTP, gdzie klient (przeglądarka) nie czeka na przyjście odpowiedzi na żądanie serwera, a wykonuje dalsze żądania. Pośredniczy w tym wbudowany w przeglądarkę mechanizm silnika AJAX. W takim modelu nie ma konieczności przeładowania strony przy każdej operacji klienta, wystarczy, że zostaną odczytane brakujące dane, a dzięki odpowiednim narzędziom zmodyfikowana zostanie zawartość strony.
Podstawowa architektura: klient-serwer Model komunikacji asynchronicznej HTTP:
Podstawowa architektura: klient-serwer Architektura klient-serwer w modelu WWW: Serwer HTTP Użytkownik Serwer aplikacji Sieć Aplikacja Sieć Dane Interfejs użytkownika Widok danych Logika biznesowa Logika danych VIEW CONTR OLLER MODEL
Wzorce projektowe - MVC Model-View-Controller (MVC) [Model-Widok-Kontroler] - jest to wzorzec projektowy (podejście które jest bazą w oparciu o którą tworzymy aplikację), dzielący projektowaną aplikację na trzy warstwy: - Model (dane / logika) Widok (prezentacja danych) Kontroler (interakcja z użytkownikiem + sterowanie aplikacją) MODEL VIEW CONTR OLLER Można go zaimplementować bez użycia bibliotek czy specjalistycznych platform programistycznych, stosując jasne reguły podziału na konkretne komponenty w kodzie źródłowym. W ten sposób każdy komponent aplikacji można niezależnie od siebie rozwijać, implementować i testować.
Wzorce projektowe - MVC Jak działa MVC? 1. 2. 3. 4. Użytkownik wykonuje (określoną) czynność w aplikacji. Wyzwalana jest procedura obsługi zdarzenia (wywołanego przez użytkownika) w kontrolerze. Kontroler pozyskuje dane z modelu i następuje przekazuje je do widoku. W widoku dane są prezentowane użytkownikowi. Przykład synchroniczny czat: 1. 2. 3. 4. 5. Użytkownik wpisuje wiadomość na czacie. Wyzwalana jest procedura obsługi przekazania wiadomości. Kontroler komunikuje się z modelem i zapisuje nową wiadomość. Kontroler uaktualnia widok Użytkownik widzi nową wiadomość w oknie czatu. M V C
Serwery WWW (web-serwery) WebServer - komputer (serwer) - a najczęściej klaster komputerowy obsługujący żądania HTTP/HTTPS, za pomocą odpowiedniego oprogramowania. Główną a jednocześnie podstawową funkcjonalnością WebServerów jest przechowywanie, przetwarzanie i dostarczanie stron internetowych zapisanych za pomocą języka HTML, oraz obrazów, multimediów i skryptów, o które dodatkowo wzbogacone są strony internetowe. Najpopularniejsze oprogramowanie WebServerowe: APACHE Microsoft Internet Information Services (IIS) Nginx Google Web Server (GWS)
Serwery WWW (web-serwery) Całkowita liczba stron internetowych i aplikacji
Serwery WWW (web-serwery) Udział web serwerów w rynku
HTML i CSS <!DOCTYPE html> <html> <head> <title> Tytuł strony </title> </head> <body> <p>treść strony</p> </body> </html> deklaracja typu dokumentu początek dokumentu hipertekstowego sekcja nagłówkowa tytuł strony sekcja zawartości strony koniec dokumentu hipertekstowego MODEL PUDEŁKOWY
HTML i CSS CSS (Cascading Style Sheets) [Kaskadowe Arkusze Stylu] - pozwalają na przeniesienie a jednocześnie oddzielenie warstwy formatowania (prezentacji) od treści/danych. Dzięki temu kod strony jest jasny prosty i przejrzysty, a streść strony jest niezależna od jej wyglądu. Same arkusze CSS nie wprowadzają nowych elementów w języku HTML natomiast pozwalają na jego optymalizację i lepszego wykorzystanie. Standard CSS został opracowany przez organizację W3C w 1996 roku, jednak jego początki sięgają roku 1994 kiedy został zaproponowany przez Håkon Wium Lie. Strona projektu: http://www.w3.org/style/css/ CSS 2.1 wersja rekomendowana od 7 lipca 2011 Håkon Wium Lie CSS 3.0 w trakcie standaryzacji CSS 4.0 w przygotowaniu RFC 2318 (marzec 1998) RFC (Request for Comments)
HTML i CSS Kaskadowy arkusz stylu (CSS) zawiera definicję zestawu specyficznych własności jakie mają zostać nadane przez przeglądarkę wybranemu znacznikowi HTML, a nastepnie wyświetlone użytkownikowi. Reguły w CSS polegają na określeniu dla jakiego znacznika ma zostać nadana specyficzna własność oraz jaka ta własność ma być. W języku CSS znacznik jest określany mianem selektora natomiast własność mianem cechy. Ogólny zapis formatu CSS wygląda następująco: selektor1, selektor2,... { cecha1: wartość; cecha2: wartość; cecha3: wartość;... ; } Selektor Początek deklaracji CSS Cecha / Własność Koniec deklaracji Wartość CSS Separator cecha/wartość Separator deklaracji Przykładowa deklaracja powoduje ustawienie koloru tła dla wszystkich hiperłączy na kolor żółty: <a href= http://www.onet.pl >Onet</a>
HTML i CSS KASKADOWOŚĆ (DZIEDZICZENIE) Linked-Style Embedded-Style Inline-Style <body> <a href= http://www.uj.edu.pl > Uniwersytet Jagielloński </a> Plik </body>.html a { background-color: green; Plik }.css <head> <style> Plik a { background-color: red;.html } </style> <body> <a href= http://www.uj.edu.pl >Uniwersytet Jagielloński</a> </body> <a style= background-color:yellow; href= http://www.uj.edu.pl > Uniwersytet Jagielloński </a> Plik.html
HTML i CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="strona testowa"> <meta name="keywords" content="pierwsza strona, html, css"> <title>tytuł strony</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> Tytuł strony http://localhost <h1>treść strony</h1> </body> </html> Treść strony
HTML i CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="strona testowa"> <meta name="keywords" content="pierwsza strona, html, css"> <title>tytuł strony</title> <link rel="stylesheet" type="text/css" href="style.css"> <style> a { background-color: yellow; } </style> </head> <body> <h1>treść strony</h1> <a href="http://uj.edu.pl">uniwersytet Jagielloński</a> </body> </html>
HTML i CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="strona testowa"> <meta name="keywords" content="pierwsza strona, html, css"> <title>tytuł strony</title> <link rel="stylesheet" type="text/css" href="style.css"> <style> a { Tytuł strony http://localhost background-color: yellow; } </style> </head> <body> Treść strony Uniwersytet Jagielloński <h1>treść strony</h1> <a href="http://uj.edu.pl">uniwersytet Jagielloński</a> </body> </html>
HTML i CSS W ogólności selektorem w CSS nie musi być sam znacznik HTML. CSS umożliwia wprowadzenie oznaczeń dla znaczników za pomocą atrybutów tzw. klas oraz identyfikatorów, które pozwalają na odróżnienie od siebie elementów strony: Klasa:.content { <div class= content > <p>tekst rozdziału</p> </div> <div class= foot > <p>prawa zastrzeżone</p> </div> font-family: Verdana; color: blue;.foot } { color: red; } Identyfikator: #content { <div id= content > <p>tekst rozdziału</p> </div> <div id= foot > <p>prawa zastrzeżone</p> </div> font-family: Verdana; color: blue; #foot } { color: red; }
HTML i CSS
HTML i CSS
JavaScript (JS) - przypomnienie ECMA5 W latach 1994-1995 podstawy języka JavaScript zostały stworzone przez firmę Netscape, a następnie w kolejnym etapie był rozwijany we współpracy z firmą SUN. Twórcą standardu jest Brendan Eich. Język ten pozwala na rozszerzenie funkcji oferowanych przez HTML oraz CSS w celu zwiększenia funkcjonalności stron internetowych. JavaScript posiada wszystkie podstawowe elementy poprawnego języka programowania: zmienne, instrukcje warunkowe, pętle, instrukcje wejścia/wyjścia, tablice, funkcje, a zwłaszcza obiekty. Język ten jest oparty na obiektach (ang. object-based) i jest sterowany zdarzeniami (ang. event-driven).
JavaScript (JS) - przypomnienie ECMA5 Do tej pory JavaScript najczęściej kojarzy się z kodem używanym w przeglądarce w celu podniesienia jakości odbioru strony internetowej i wprowadzeniu do niej nowych funkcjonalności. Np. funkcji wbudowanej alert(), która umożliwia wyświetlanie komunikatów na stronie w formie wyskakującego okienka. <head> <script> function Komunikat() { alert( Hello World! ); } </script> </head> <body> <h1 onclick= Komunikat() >Tytuł</h1> </body> Definicja funkcji w sekcji HEAD (lub osobnym pliku js) Wywołanie funkcji
JavaScript (JS) - przypomnienie ECMA5 JavaScript jest językiem który nie obsługuje statycznych typów zmiennych, a więc nie możemy zadeklarować że dana zmienna jest np. typu całkowitego, znakowego lub zmiennoprzecinkowego. Może to powodować liczne błędy ale jako że JS nie jest językiem kompilowanym nie powoduje tak dużych trudności. W języku JavaScript zmienne deklaruje się przez słowo kluczowe var : var var var var var moja_zmienna_1; // brak typu moja_zmienna_2 = 2; // typ całkowity moja_zmienna_3 = a ; // typ znakowy moja_zmienna_4 = Jan ; // typ łańcuchowy moja_zmienna_5 = 3.1415 ; // Typ zmiennej jest ustalany w momencie przypisania wartości.
JavaScript (JS) - przypomnienie ECMA5 Najprostszą i jednocześnie najpopularniejszą instrukcją warunkową jest instrukcja if, która po obliczeniu wartości wyrażenia wykonuje dany ciąg instrukcji lub nie: var liczba = 7; if( liczba < 6) { alert(liczba); } var liczba = 7; if( liczba > 6) { alert(liczba); } var liczba = 7; if( liczba > 6) // warunek niespełniony // warunek spełniony alert(liczba);
JavaScript (JS) - przypomnienie ECMA5 Podobnie jak w językach kompilowanych do wykonania wielokrotnie tej samej czynności można zastosować pętle. W JavaScript pętla ma postać identyczną jak w języku C++: for( var i=0; i < 5; i++) { alert( To jest komunikat nr + i); } Wynik: To To To To To jest jest jest jest jest komunikat komunikat komunikat komunikat komunikat nr nr nr nr nr 0 1 2 3 4
JavaScript (JS) - przypomnienie ECMA5 W JavaScript tablice definiujemy jako nowe instancje obiektu typu Array: // pusta tablica - niezadeklarowana var tablica = new Array(); // tablica 5 elementów bez zadeklar. wartości var tablica = new Array(5); // tablica 3 elementów zadeklarowanych var tablica = new Array(2,3,5); var tablica = new Array( a, b, c ); var tablica = new Array(2, a,3.14 ); // dodawanie kolejnych elementów tablicy tablica.push( b,10,12.2); // dostęp do elementu nr 2 tablicy alert(tablica[2]);
JavaScript (JS) - przypomnienie ECMA5 W języku JavaScript wszystkie wartości poza prostymi typami liczbowymi, łańcuchowymi lub logicznymi są obiektami. Typy proste Są to liczby, łańcuchy oraz wartości logiczne, posiadające metody, ale są niezmienne. Obiekty vs. W języku JavaScript: - tablice są obiektami, wyrażenia regularne są obiektami, funkcje są obiektami, obiekty są obiektami. Są to asocjacyjne kolekcje klucz-wartość, które można dowolnie modyfikować.
JavaScript (JS) - przypomnienie ECMA5 Jedną z podstawowych umiejętności w JavaScript jest tworzenie własnych obiektów reprezentujących logicznie powiązane kolekcje danych. Obiekt a w zasadzie literał obiektowy jest zapisywany za pomocą nawiasów klamrowych który zawiera zero lub więcej par klucz (nazwa)-wartość: var obj1 = {}; var obj2 = { // obiekt pusty imie: Jan, nazwisko: Kowalski }; var obj3 = { log: function(){ console.log( Hello World ); } }; var obj4 = { imie: Anna, nazwisko: Nowak, Wypisz: function(){ console.log(this.imie + this.nazwisko); } }
JavaScript (JS) - przypomnienie ECMA5 Dostęp do pól składowych literałów obiektowych uzyskujemy w sposób obiektowy console.log(obj1); // {} console.log(obj2.imie + obj2.nazwisko); // JanKowalski obj3.log(); // Hello World obj4.wypisz(); // AnnaNowak
Nowoczesne aplikacje internetowe FrontEnd
Nowoczesne aplikacje internetowe - FrontEnd Czym jest nowoczesna strona (aplikacja) internetowa? Łączy w sobie przemyślaną strukturę oraz nowoczesne technologie: HTML 5, CSS 3, JavaScript, jquery, Bootstrap, RWD oraz technologie serwerowe.
Nowoczesne aplikacje internetowe - FrontEnd Desktop >1220 px Tablet > 768 px Smartphone < 768 px
Nowoczesne aplikacje internetowe - FrontEnd RWD Responsive Web Design [Reaktywne Projektowanie Stron] - jest to nowoczesne podejście do projektowania stron internetowych, w którym programista zapewnia, że niezależnie od tego na jakie urządzenie strona zostanie podana wyświetli się ona prawidłowo. W tym kontekście programista zapewnia dostosowanie się wyglądu strony, rozmiaru oraz układu strony do rozmiaru okna przeglądarki w którym będzie wyświetlana. Jak to osiągnąć? Na przykład:
Nowoczesne aplikacje internetowe - FrontEnd ZASADA: W ogólności zasada jaka powinna przyświecać tworzeniu stron zgodnie z metodologią RWD jest utworzenie jednego pliku HTML, a dla formatowania jego wyglądu wiele layoutów w CSS które będą zawierać odpowiednie reguły wyświetlania strony w zależności od rozdzielczości ekranu. n x CSS
Nowoczesne aplikacje internetowe - FrontEnd Filozofia Mobile-First Zgodnie z filozofią MobileFirst tworzenie strony powinno być rozpoczęte od najmniejszych ekranów czyli dla urządzeń mobilnych.
Nowoczesne aplikacje internetowe - FrontEnd Zgodnie z tymi zasadami CSS-y powinniśmy układać mniej więcej wg takiego schematu:
Nowoczesne aplikacje internetowe - FrontEnd Chcąc zaprojektować "elastyczną" stronę dopasowującą się do całego ekranu powinniśmy zrezygnować z jednostek bezwzględnych wyrażonych np. w px i zastąpić je jednostkami względnymi w procentach %. Pozwoli to uzyskać dopasowany układ do różnych szerokości ekranów. Atrybuty max-width powinny być używane często zwłaszcza w przypadku elementów, które mogą nam rozpychać layout tj. obrazów, osadzonych odtwarzaczy video etc. 940 px 720 px 100 % 220 px 76 % 24 %
Nowoczesne aplikacje internetowe BackEnd
Nowoczesne aplikacje internetowe - BackEnd Model statyczny: Serwer HTTP Użytkownik Żądanie HTTP Serwer aplikacji Aplikacja Sieć Dane Interfejs użytkownika HTML CSS 1. 2. 3. 4. 5. 6. Przeglądarka (użytkownik poprzez GUI) wysyła żądanie do adresu URL. Serwer HTTP otrzymuje żądanie i przekazuje go do serwera aplikacji. Serwer aplikacji pobiera żądane dane z modelu danych (np. bazy SQL). Serwer aplikacji wykorzystuje uzyskane informacje do wygenerowania strony HTML. Strona HTML jest przesyłana do przeglądarki przez serwer HTTP. Przeglądarka interpretuje otrzymany kod HTML i wyświetla dane użytkownikowi.
Aplikacja internetowa: model dynamiczny Model dynamiczny: JavaScript Serwer HTTP Żądanie HTTP AJAX Użytkownik Interfejs użytkownika HTML CSS 1. 2. 3. 4. 5. 6. Serwer aplikacji Aplikacja Sieć Dane Odpowiedź HTTP: XML JSON Przeglądarka (użytkownik poprzez GUI) wysyła żądanie wyświetlenia treści HTML. Strona zawiera skrypt JavaScript który jest odpowiedzialny za wyświetlenie podstawowej struktury HTML. JavaScript wykonuje żądanie AJAX do serwera HTTP, w celu pobrania zawartości za pomocą API serwera aplikacji. Serwer aplikacji pobiera żądane dane z modelu danych (np. bazy SQL). Następnie serwer aplikacji odsyła dane do klienta w formacie np. JSON lub XML. Silnik AJAX otrzymuje te informacje, skrypt JavaScript wykorzystując te informacje, modyfikuje DOM strony HTML w celu wyświetlenia pobranej zawartości.
Aplikacja internetowa: model dynamiczny Zalety modelu dynamicznego: Uproszczona infrastruktura Większa wydajność Do zbudowania GUI aplikacji na kilka platform wystarczy tylko jedno API. Łatwiejsze przesyłanie danych JSON (mniej obciążające) niż HTML. Serwer jest odciążony z konieczności wielokrotnego generowania kodu HTML. Sam klient nie musi wielokrotnie pobierać kodu HTML i wyświetlać tracić czasu na jego wyrenderowanie. Źródła danych mogą być te same np. poprzez serwery CDN (Content Delivery Network). Standardowe technologie Łatwe do opanowania technologie statyczne HTML, CSS oraz biblioteki JavaScript. Uniwersalność Brak konieczności budowanie niezależnych aplikacji dla rozwiązania tej samej potrzeby biznesowej - wspólne uniwersalne API. Modularność Aplikacja składa się się z modułów (w gruncie rzeczy niezależnych) można je niezależnie rozbudowywać lub zmieniać.
Node.js Node.js - nowoczesne środowisko uruchomieniowe języka JavaScript, działające na serwerze (poza przeglądarką). Jest dystrybuowane na zasadzie otwartego oprogramowania (OpenSource). http://nodejs.org/ Jego podstawową funkcją (nie jedyną) jest możliwość tworzenia serwerów aplikacji internetowych opartych protokole HTTP. Sterowany zdarzeniami wykorzystując system wejścia/wyjścia (I/O) który jest asynchroniczny.
Node.js Podstawą działania Node.js jest Silnik V8, który został stworzony przez firmę Google na potrzeby przeglądarki Chrome, do obsługi skryptów napisanych w języku JavaScript. Jest to program napisany w języku C++, który kompiluje skrypty do kodu maszynowego, a dopiero następnie wykonuje. Dzięki takiej procedurze uzyskano wzrost wydajności i szybkości wykonywania skryptów JS.
Node.js http://nodejs.org/ Wersja bieżąca 7.7.2 lub LTS: 6.10.0 (Long Term Support) Alternatywnie mamy dostęp do wersji na różne systemy operacyjne oraz wersje skompilowane w postaci plików wykonywalnych.
Node.js
Node.js Powstanie Node.js było zainspirowane przez funkcjonalności push jakie oferuje np. poczta GMAIL... Co to jest push? Usługi push działają w oparciu o przekazane przez klienta wcześniej informacje, na podstawie których serwer dostarcza klientowi nowych danych w zależności od tego czy są one dostępne. Przykład synchroniczny czat: 1. 2. 3. 4. 5. Użytkownik wpisuje wiadomość na czacie. Wyzwalana jest procedura obsługi przekazania wiadomości. Kontroler komunikuje się z modelem i zapisuje nową wiadomość. Kontroler uaktualnia widok Użytkownik widzi nową wiadomość w oknie czatu.
Node.js Zalety (cechy) Node.js: 1. Wbudowana asynchroniczność. 2. Sterowany zdarzeniami. 3. non-blocking I/O (wykorzystanie jednego wątku). 4. Praca w czasie rzeczywistym. 5. Skalowalność. 6. Duża biblioteka gotowych modułów (NPM). 7. Język JavaScript.
Node.js Serwer aplikacji Klient (przeglądarka) HTTP, AJAX
Node.js MODEL TRADYCYJNY KLIENCI Żądanie HTTP Żądanie HTTP Żądanie HTTP... Żądanie HTTP SERWER Wątek Wątek Wątek Oczekiwanie Wątek Przykład: Dla systemu z 8GB pamięci RAM przydzielającego 2MB pamięci na wątek możemy obsłużyć maksymalnie w tym samym czasie 4000 żądań (w rzeczywistości jest to mniej ponieważ zużywamy jeszcze pamięć na inne operacje).
Node.js MODEL ZDARZENIOWY KLIENCI Żądanie HTTP Żądanie HTTP Żądanie HTTP... Żądanie HTTP SERWER Wątek W modelu zdarzeniowym Node.js wykorzystuje tylko jeden wątek do obsługi wielu zadań, oraz pętlę zdarzeń co powoduje że aplikacja taka jest bardzo wydajna i skalowalna. W praktyce przy żądaniach które nie wymagają złożonych operacji obliczeniowych można obsłużyć nawet do 1 miliona żądań jednocześnie.
Node.js Rejestracja funkcji zwrotnej (callback) Żądanie HTTP Żądanie HTTP... Żądanie HTTP Pętla zdarzeń (Event Loop) Pojedynczy wątek Request (req) Response (res) Wysłanie odpowiedzi w postaci wcześniej zarejestrowanej funkcji zwrotnej (callback). Zakończenie wykonania żądanej operacji przez serwer Serwer wykonuje np. : - operacje na plikach, - operacje bazodanowe, - obliczenia
Node.js Koncepcja działania aplikacji Node.js: Rejestracja funkcji zwrotnej (callback) Podejście klasyczne: var user = User.findById(1); console.log(user); Event Loop W podejściu klasycznym wykonanie zapytania metodą findbyid(), wstrzyma wątek aż do zakończenia operacji odpytania bazy danych, następnie dopiero po uzyskaniu danych wątek zostanie zwolniony. Podejście przez wywołanie zwrotne (callback): User.findById(1, function(user){ console.log(user); }); Zakończenie wykonania żądanej operacji przez serwer Serwer Wywołanie zwrotne będzie wykonane po zakończeniu operacji bazodanowej, ale w czasie tego wątek będzie wolny i może obsługiwać inne operacje. Funkcja callback to tak naprawde funkcja czekająca.
Node.js Koncepcja działania aplikacji Node.js: Rejestracja funkcji zwrotnej (callback) Podejście klasyczne: var user = User.findById(1); console.log(user); Event Loop W podejściu klasycznym wykonanie zapytania metodą findbyid(), wstrzyma wątek aż do zakończenia operacji odpytania bazy danych, następnie dopiero po uzyskaniu danych wątek zostanie zwolniony. Podejście przez wywołanie zwrotne (callback): User.findById(1,(user) => { console.log(user); }); Zakończenie wykonania żądanej operacji przez serwer Serwer Wywołanie zwrotne będzie wykonane po zakończeniu operacji bazodanowej, ale w czasie tego wątek będzie wolny i może obsługiwać inne operacje. Funkcja callback to tak naprawde funkcja czekająca.
Node.js Prosty serwer HTTP utworzony w Node.js: const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createserver((req, res) => { res.statuscode = 200; res.setheader('content-type', 'text/plain'); res.end('hello World\n'); }); server.listen(port, hostname, () => { console.log(`server running at http://${hostname}:${port}/`); }); Po uruchomieniu tej aplikacji powstał serwer http oczekujący na żądania na porcie 3000. Po otrzymaniu żądania http serwer zwraca odpowiedź OK przesyłając do wyświetlenia zwykły tekst: Hello World, który jest widoczny w przeglądarce.
Node.js Uruchamianie aplikacji za pomocą Node.js app.js Jeśli Node.js został zainstalowany globalnie na komputerze, jego uruchomienie polega na wywołaniu z konsoli polecenia: > node Hello World app.js
Node.js Prosty serwer HTTP utworzony w Node.js: const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createserver((req, res) => { res.statuscode = 200; res.setheader('content-type', 'text/plain'); res.end('hello World\n'); }); server.listen(port, hostname, () => { console.log(`server running at http://${hostname}:${port}/`); });
Node.js Struktura modułowa aplikacji: const module = require('module_name'); Nazwa obiektu odnoszącego się do modułu Nazwa modułu Dzięki modułom można tworzyć zestawy metod (biblioteki), mogą być wykorzystane wielokrotnie w różnych aplikacjach. Powstały w ten sposób obiekt (stały) jest niejako wskaźnikiem na dany moduł przez który możemy wywoływać z moduły dostępne metody i własności: module.zrobcos();
KONIEC WYKŁADU 3