PROJEKTOWANIE APLIKACJI INTERNETOWYCH

Podobne dokumenty
Co to jest NODE.JS? Nowoczesne środowisko programistyczne

Express.js i własne API - pomoc do lab02

Zaawansowane Techniki WWW (HTML, CSS i NODE.JS)

ZAAWANSOWANE TECHNIKI WWW (zajęcia r. i r.)

server.listen(port, hostname, () => { console.log(`server running at });

PROJEKTOWANIE APLIKACJI INTERNETOWYCH

Popularne dostępne rozwiązania. Najpopularniejsze środowiska programistyczne:

MEAN Stack - Node.js, express

PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ),

Wykład 8: klasy cz. 4

1 Wprowadzenie do J2EE

Full Stack JavaScript z Angular i Nest. Dni: 5. Opis: Adresaci szkolenia

Tworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)

Temat: Ułatwienia wynikające z zastosowania Frameworku CakePHP podczas budowania stron internetowych

Obiektowy PHP. Czym jest obiekt? Definicja klasy. Składowe klasy pola i metody

Ewolucja projektowania aplikacji w PHP na bazie frameworka Symfony 2

PHP: bloki kodu, tablice, obiekty i formularze

Funkcje i instrukcje języka JavaScript

Programowanie obiektowe

PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ),

Aplikacje webowe z wykorzystaniem Node.js oraz Express

EPI: Interfejs Graficzny Wykład nr 4 Podstawy frameworku Rails

Wprowadzenie. 1. Terminal WebRTC. LABORATORIUM 5: WebRTC komunikacja między terminalami.

Informatyka I. Standard JDBC Programowanie aplikacji bazodanowych w języku Java

REFERAT PRACY DYPLOMOWEJ

Wybrane działy Informatyki Stosowanej

PROJEKTOWANIE APLIKACJI INTERNETOWYCH

PROJEKTOWANIE APLIKACJI INTERNETOWYCH

Przygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)

AJAX. Wykonał: Marcin Ziółkowski, AGH Kraków, AiR rok 5.

Materiały oryginalne: ZAWWW-2st1.2-l11.tresc-1.0kolor.pdf. Materiały poprawione

Budowa aplikacji ASP.NET z wykorzystaniem wzorca MVC

Angular, cz. II. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński

Uwagi dotyczące notacji kodu! Moduły. Struktura modułu. Procedury. Opcje modułu (niektóre)

Technologie obiektowe

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Zrąb JavascriptMVC. Krzysztof Płocharz. 6 kwiecień Uniwersytet Warszawski

TOPIT Załącznik nr 3 Programowanie aplikacji internetowych

Informatyka I. Programowanie aplikacji bazodanowych w języku Java. Standard JDBC.

REFERAT O PRACY DYPLOMOWEJ

WYKŁAD 1 ANGULARJS CZĘŚĆ 1

Należy ściągnąć oprogramowanie Apache na platformę

Plan. Aplikacja. Architektura aplikacji. Architektura aplikacji Tworzenie aplikacji Application Builder podstawy

A Zasady współpracy. Ocena rozwiązań punktów punktów punktów punktów punktów

Kontrola sesji w PHP HTTP jest protokołem bezstanowym (ang. stateless) nie utrzymuje stanu między dwoma transakcjami. Kontrola sesji służy do

JAVA W SUPER EXPRESOWEJ PIGUŁCE

Projektowanie oprogramowania. Warstwa integracji z bazą danych oparta na technologii ORM Platforma Java EE Autor: Zofia Kruczkiewicz

Techniki programowania INP001002Wl rok akademicki 2018/19 semestr letni. Wykład 3. Karol Tarnowski A-1 p.

Produktywne tworzenie aplikacji webowych z wykorzystaniem Groovy i

Podstawy technologii WWW

Język programowania Scala / Grzegorz Balcerek. Wyd. 2. Poznań, cop Spis treści

Spring Web MVC, Spring DI

Informatyka I. Klasy i obiekty. Podstawy programowania obiektowego. dr inż. Andrzej Czerepicki. Politechnika Warszawska Wydział Transportu 2018

Podstawy JavaScript ćwiczenia

Programowanie obiektowe

Zaawansowane aplikacje internetowe

Zaawansowane aplikacje internetowe - laboratorium

1. Które składowe klasa posiada zawsze, niezależnie od tego czy je zdefiniujemy, czy nie?

Programowanie obiektowe. Literatura: Autor: dr inŝ. Zofia Kruczkiewicz

Typy przetwarzania. Przetwarzanie zcentralizowane. Przetwarzanie rozproszone

PHP 5 język obiektowy

PROE wykład 2 operacje na wskaźnikach. dr inż. Jacek Naruniec

Rys.2.1. Trzy warstwy stanowiące podstawę popularnego podejścia w zakresie budowy stron internetowych [2]

Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:

Generated by Foxit PDF Creator Foxit Software For evaluation only. System Szablonów

D:\DYDAKTYKA\ZAI_BIS\_Ćwiczenia_wzorce\04\04_poprawiony.doc 2009-lis-23, 17:44

Architektury Usług Internetowych. Laboratorium 2. Usługi sieciowe

JQuery. $('#pierwszy').css('color','red').hide('slow').show(3000); $(document).ready(function() { //... tutaj nasze skrypty jquery //...

Forum Client - Spring in Swing

TEMAT : KLASY DZIEDZICZENIE

Podstawy Programowania Obiektowego

Programowanie w Sieci Internet Blok 2 - PHP. Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki

Dokumentacja wstępna TIN. Rozproszone repozytorium oparte o WebDAV

Plan. Wprowadzenie. Co to jest APEX? Wprowadzenie. Administracja obszarem roboczym

Informacje ogólne. Karol Trybulec p-programowanie.pl 1. 2 // cialo klasy. class osoba { string imie; string nazwisko; int wiek; int wzrost;

Programowanie obiektowe

Języki i metody programowania Java. Wykład 2 (część 2)

Programowanie obiektowe zastosowanie języka Java SE

Test przykładowy 2 PAI WSB Wrocław /06/2018

Szablony klas, zastosowanie szablonów w programach

Laboratorium 7 Blog: dodawanie i edycja wpisów

Podstawy programowania w języku JavaScript

Tworzenie Stron Internetowych. odcinek 10

Walidacja danych w ASP.NET MVC

Przykład połączenie z bazą danych

Warstwa integracji. wg. D.Alur, J.Crupi, D. Malks, Core J2EE. Wzorce projektowe.

Przewodnik instalacji i rozpoczynania pracy. Dla DataPage+ 2013

Język programowania DELPHI / Andrzej Marciniak. Poznań, Spis treści

Zmienne i stałe w PHP

Wykład 5: Klasy cz. 3

Oprogramowanie i wykorzystanie stacji roboczych. Wykład 4

Programowanie Obiektowe i C++

Backend Administratora

Materiały dla studentów Informatyki WSZiB w Krakowie

10. Programowanie obiektowe w PHP5

Zakres tematyczny dotyczący kursu PHP i MySQL - Podstawy pracy z dynamicznymi stronami internetowymi

Transkrypt:

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 6

Przypomnienie JavaScript 6 (ECMA 6) - c.d. - wyrażenia interpolowane, - operator rozproszenia/reszty, - iteratory, - nowy typ danych: Symbol, - pętla for-of, - moduły, - klasy.

JavaScript (JS) - ECMA6 Wyrażanie interpolowane (literały szablonów łańcuchowych): Wraz z wprowadzeniem ES6, w standardzie języka pojawiły się znane z niektórych języków szablonów np. Jade (Pug), wyrażenia interpolowane. Są to wyrażenia będące stringami w których możemy umieszczać zmienne, których wartość jest ustalana w momencie interpretacji kodu. Przykład (jak było w ES5): var imie = "Jan"; var witaj = "Czesc " + imie + "!"; console.log(witaj); // Czesc Jan! Przykład ES6: var imie = "Jan"; var witaj = `Czesc ${imie!`; console.log(witaj); // Czesc Jan! Szablon wyrażenia interpolowanego umieszczamy w języku JavaScript 6 pomiędzy tzw. apostrofami odwrotnymi: ` ` Zaletą wyrażeń interpolowanych jest to że można zapisywać je w wielu linijkach i będą traktowane jako jedno wyrażenie. Zakres działania wyrażeń interpolowanych zależy tylko o kontekstu wywołania tak jak jest to w przypadku zmiennych.

JavaScript (JS) - ECMA6 Wyrażanie interpolowane (literały szablonów łańcuchowych): var tekst = `To jest naprawde długie tekst pisany w wielu linijkach ale odczytywany w formie jednego wyrażenia.`; console.log(tekst); // To jest naprawde długie tekst pisany w wielu linijkach ale odczytywany w formie jednego wyrażenia. Wewnątrz wyrażeń interpolowanych można umieszczać: zmienne, wywołania funkcji, oraz inne wyrażenia interpolowane. function upper(text){ return text.touppercase(); var imie = "Jan"; var info = `To jest pierwsze ${upper("wywolanie") tej funkcji przez ${upper(`${imiea`)`; // To jest pierwsze WYWOLANIE tej funkcji przez JANA. console.log(info);

JavaScript (JS) - ECMA6 Operator rozproszenia/reszty... (trzech kropek) : Działanie tego operatora zależy od kontekstu: gdy jest używany w stosunku do tablic (a w ogólności każdego obiektu iterowanego), powoduje on rozproszenie wartości tego obiektu na poszczególne składniki. Przykład zastosowania operatora rozproszenia: function foo(a,b,c){ console.log(a,b,c); foo(...[1,2,3]); // 123 var tab1 = [11,12,13]; var tab2 = [10,...tab1,14]; Tu działanie operatora rozproszenia pełni tą samą rolę co metoda concat() dla tablic. console.log(tab2); // [10,11,12,13,14]

JavaScript (JS) - ECMA6 Operator rozproszenia/reszty... (trzech kropek) : Drugim zastosowaniem operatora... jest w zasadzie odwrotne: zbiera wszystkie wartości i umieszcza je w tablicy: Przykład zastosowania operatora reszty: function foo(a,b,...c){ console.log(a,b,c); W tym przypadku operator zbiera wszystkie argumenty przekazane do funkcji poza dwoma pierwszymi i zapisuje je do wspólnej tablicy. foo(10,11,12,13,14); // 10 11 [12,13,14] function foo(...a){ console.log(a); Kiedy nie ma innych argumentów to wszystkie podane parametry zostaną zapisane do tablicy. foo(10,11,12,13,14); // [10,11,12,13,14]

JavaScript (JS) - ECMA6 Pętla wyliczeniowa for of : Jedną z nowości w ES6 jest pętla pozwalająca na wyliczenie wartości z tablic. Do tej pory dostępna była tylko pętla for in : // Deklaracja prostej tablicy var tab = ["a","b","c","d","e","f"]; Pętla for-in for (let i in tab){ console.log( i ); // 0 1 2 3 4 5 Pętla for-of for (let i of tab){ console.log( i ); // a b c d e f Zwykłe obiekty nie nadają się do wykorzystania w pętlach for-of ponieważ nie posiadają Obiekt na którym operuje pętla for-of musi być iterowalny, lub musi być możliwość skonwertowania takiego obiektu do postaci iterowalnej tzn. obiektu domyślnych który jest iteratorów. w stanie wygenerować iterator, który może zostać użyty przez pętlę. W JavaScript są to np. typy wbudowane: tablice, łańcuchy znaków, generatory, kolekcje.

JavaScript (JS) - ECMA6 Nowy typ danych Symbol: Wraz z ES6 do standardu JS wprowadzono nowy prosty typ danych tzw: symbol: var s = Symbol("To jest nowy typ danych"); typeof s; // symbol Cechy typu Symbol: - nie posiada swojej formy literałowej (inne typy proste posiadają). - w deklaracjach Symbol nie można używać operatora new, ponieważ Symbol nie jest konstruktorem, zatem obiekt nie zostanie utworzony. - parametr przekazany w deklaracji Symbol powinien być łańcuchem znakowym (z opisem przeznaczenia symbolu), jest jednak opcjonalny. - dzięki wykorzystaniu metody typeof możemy sprawdzić czy mamy do czynienia z symbolem. - służą do tworzenia łańcuchów znakowych które nie będą kolidowały z innymi wartościami w programie.

JavaScript (JS) - ECMA6 Iteratory: Są to wzorce służące do pobierania danych ze źródła w sposób sekwencyjny na żądanie (jest to wzorzec programowania znany z innych języków). W ES6 został wprowadzony niejawny standaryzowany interfejs iteratorów, który może zostać wykorzystany w wbudowanych strukturach danych JS. var tablica = [1,2,3]; var idx = tablica[symbol.iterator](); Wykonanie Symbol.iterator na rzecz tablicy spowoduje zwrócenie iteratora. console.log(idx.next()); console.log(idx.next()); console.log(idx.next()); console.log(idx.next()); // { value: 1, done: false // { value: 2, done: false // { value: 3, done: false // { value: undefined, done: true Dlaczego iterator dla wartości 3 nie przypisał własności done na true?? Natomiast metoda next() jest składową interfejsu Iteratora która zwraca kolejną wartość z iterowanego obiektu. Przyjęta konwencja dla wbudowanych iteratorów, zakłada że wywołanie metody next() dla zakończonego iteratora nie powoduje zgłoszenia błędu tylko zwrot wartości: {value: undefined, done: true

JavaScript (JS) - ECMA6 Organizacja kodu: Moduły W ES6 tworzenie modułów oparte jest na plikach oraz wykorzystuje się do tego celu dwa słowa kluczowe export i import. Słowo kluczowe export jest wykorzystywane do określenia listy eksportowanych powiązań. Można w zasadzie uznać, że jest operatorem udostępniania modułu. Przykłady: export var a = 5; export function test(){ var tab = [1,2,3]; export { tab ; Eksporty poszczególnych elementów. var a = 5; var b = 7; function test(){ var tab = [1,2,3]; export { a, test, tab ; Eksport wszystkich powiązań jednocześnie. Wszystko co nie zostanie wyeksportowane jest prywatne, a nie jak by się wydawało zmienną globalną.

JavaScript (JS) - ECMA6 Organizacja kodu: Moduły Aby w programie głównym pobrać moduł i móc posługiwać się udostępnionymi przez niego metodami składowymi, musimy dołączyć taki moduł korzystając z operatora import. Podobnie jak w przypadku eksportowania istnieją różnice w użyciu poszczególnych form składniowych. export var a = 5; function komunikat(){ console.log( Witaj ); export { komunikat, a ; import { komunikat, a from plik ; Eksport Import Łańcuch znakowy plik na końcu definicji importu jest tzw. specyfikatorem modułu, określającą lokalizację danego modułu. Może to być adres URL bądź ścieżka dostępu do pliku w lokalnym systemie. Nazwy identyfikatorów podane w imporcie muszą odpowiadać dokładnie nazwą podanym w eksporcie. Uwaga: Specyfikator modułu musi być łańcuchem znakowym i nie może być przekazany jako zwykła zmienna zawierająca łańcuch znakowy! var nazwa = plik ; import { komunikat, a from nazwa; // ERROR / BŁĄD!!!

JavaScript (JS) - ECMA6 Organizacja kodu: Klasy Organizacja kodu w JavaScript do wersji ES6 oparta była o literały obiektowe lub funkcje, które spełniały rolę indywidualnego opakowania na daną funkcjonalność. Można było uznać nawet że dzięki istnieniu operatora new oraz instanceof, te formy przypominały specyficznie funkcjonujące klasy. Wraz z specyfikacją ECMA6, usystematyzowano zagadnienie opakowywania funkcjonalności dzięki wprowadzeniu zakresu określanego słowem kluczowym class. Nowy mechanizm tworzenia klas pozwala określenie bloku kodu, którego zawartość definiuje składowe prototypu funkcji. Przykład: class Komunikat { constructor(a,b){ this.x = a; this.y = b; Wypisz() { console.log( this.x + this.y ); ; Zapis class powoduje utworzenie funkcji, podobnie jak było to robione poprzednio przy określaniu zakresu bloku funkcjonalności. Konstruktor określa sygnaturę stworzonej funkcji. Metody składowe są tworzone tak jak w przypadku tworzenia funkcji w literałach obiektowych. Wewnątrz klasy metod nie oddzielamy przecinkami!!!

JavaScript (JS) - ECMA6 Organizacja kodu: Klasy Porównanie nowego zapisu klasowego z poprzednim standardem literałowym: class Komunikat { constructor(a,b){ this.x = a; this.y = b; Wypisz() { console.log( this.x + this.y ); ; function Komunikat(a,b){ this.x = a; this.y = b; Komunikat.prototype.Wypisz = function(){ console.log( this.x + this.y ); var K = new Komunikat(5,6); K.x; K.y; K.Wypisz(); // 5 // 6 // 56 Przedstawione zapisy funkcjonalnie są tym samym, jednak występują pomiędzy nimi różnice: - w przypadku klasy tworzenie nowej instancji musi odbyć się za pomocą operatora new, w przypadku funkcji nie musi tak być. - użycie zapisu klasowego w zapisie globalnym tworzy w nim leksykalny identyfikator Komunikat, jednak w odróżnieniu od zapisu funkcyjnego nie wtworzy w globalnym obiekcie własności o tej nazwie.

Node.js + Express.js Express.js jest pakietem które pozwala na tworzenie aplikacji internetowych o architekturze MVC (serwisowej). Ułatwia obsługę żądań HTTP i wprowadza szerokie możliwości tworzenia aplikacji internetowych / sieciowych. > npm install express

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 + Express.js //- plik app.js const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('hello World!') ); app.listen(3000, () => { console.log('serwer dziala na porcie 3000!') ); Prosta aplikacja napisana z użyciem Express.js nasłuchująca żądań na porcie 3000 i odsyłająca odpowiedź w postaci tekstu. Przedstawiony kod w zasadzie niczym nie różni się od prostego serwera HTTP. ma jednak kilka zalet.

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 app.js Hello World

Aplikacja internetowa: model dynamiczny Model dynamiczny: Użytkownik JavaScript Żądanie HTTP Serwer HTTP Serwer aplikacji Interfejs użytkownika HTML CSS AJAX Odpowiedź HTTP: XML JSON Aplikacja Sieć Dane 1. Przeglądarka (użytkownik poprzez GUI) wysyła żądanie wyświetlenia treści HTML. 2. Strona zawiera skrypt JavaScript który jest odpowiedzialny za wyświetlenie podstawowej struktury HTML. 3. JavaScript wykonuje żądanie AJAX do serwera HTTP, w celu pobrania zawartości za pomocą API serwera aplikacji. 4. Serwer aplikacji pobiera żądane dane z modelu danych (np. bazy SQL). 5. Następnie serwer aplikacji odsyła dane do klienta w formacie np. JSON lub XML. 6. Silnik AJAX otrzymuje te informacje, skrypt JavaScript wykorzystując te informacje, modyfikuje DOM strony HTML w celu wyświetlenia pobranej zawartości.

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. Użytkownik wykonuje (określoną) czynność w aplikacji. 2. Wyzwalana jest procedura obsługi zdarzenia (wywołanego przez użytkownika) w kontrolerze. 3. Kontroler pozyskuje dane z modelu i następuje przekazuje je do widoku. 4. W widoku dane są prezentowane użytkownikowi. M C V Przykład synchroniczny czat: 1. Użytkownik wpisuje wiadomość na czacie. 2. Wyzwalana jest procedura obsługi przekazania wiadomości. 3. Kontroler komunikuje się z modelem i zapisuje nową wiadomość. 4. Kontroler uaktualnia widok 5. Użytkownik widzi nową wiadomość w oknie czatu.

Node.js + Express.js //- plik app.js const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('hello World!') ); Dołączenie modułu Express.js Wywołanie metody obsługi żądania HTTP app.listen(3000, () => { console.log('serwer dziala na porcie 3000!') ); Uruchomienie serwera nasłuchującego żądań na porcie 3000 Kod powyżej umożliwia uruchomienie serwera HTTP oraz obsługę żądań przychodzących od klientów. Obsługa żądań odbywa się za pomocą tzw. trasowania, tzn. uzależnienie wykonania określonej czynności przez serwer od wprowadzenia poprawnego adresu URL. Każdy adres URL powinien (trasa) powinna obsługiwać jedną czynność. Czynności jakie mogą zostać podjęte w wyniku przyjścia żądania to najczęściej odesłanie klientowi określonego żądanego zasobu w postaci pliku HTML lub danych w postaci pliku JSON.

Generator Express.js Express.js jest modułem pozwalającym na tworzenie aplikacji w oparciu o architekturę MVC. Dla ułatwienia na początku możemy utworzyć (wygenerować) szkielet projektu który następnie możemy samodzielnie rozbudowywać. Do tego celu służy narzędzie zwane: express-generator. Aby wygenerować szkielet nowego projektu należy: 1. Utworzyć nowy katalog projektu: > mkdir test 2. Na utworzonym katalogu wykonać polecenie: > express test 3. Wejść do katalogu i wykonać w nim polecenie: > cd test && npm install 4. Uruchomić aplikację node/express: > npm start W tym kroku tworzona jest struktura kartotek oraz pliki z szkieletem aplikacji. Instalowanie niezbędnych modułów. Uruchomienie serwera HTTP

Generator Express.js Generator po zakończeniu działania tworzy w pełni działającą aplikację MVC gotową do uruchomienia. Struktura kartotek jest następująca: MODEL CONTR OLLER VIEW Uwaga: Brak wyodrębnionego modelu w szkielecie projektu. Logikę biznesową danej aplikacji należy zaprojektować i następnie zaimplementować w ramach szkieletu.

Generator Express.js Generator po zakończeniu działania tworzy w pełni działającą aplikację MVC gotową do uruchomienia. Struktura kartotek jest następująca: Plik zawierający informację o aplikacji oraz wszystkie niezbędne zależności dodatkowych modułów. Główny plik aplikacji app.js Kartoteka plików publicznych (dostępnych dla klienta) Kartoteka z plikami tras Kartoteka z plikami widoku Pliki uruchomieniowe serwera HTTP

Generator Express.js Strona widoczna po uruchomieniu aplikacji 0 Po uruchomieniu aplikacja działa jako serwer HTTP nasłuchujący na adresie IP: 127.0.0.1 oraz standardowym porcie 3000

Generator Express.js Uruchomienie aplikacji Konsola wywołanych żądań przychodzących do serwera HTTP Komunikaty wyświetlane w konsoli serwera HTTP Po uruchomieniu aplikacja działa jako serwer HTTP nasłuchujący na adresie IP: 127.0.0.1 oraz standardowym porcie 3000

Generator Express.js Przykład implementacji modułu w ramach projektu Express: 1. Tworzymy w ramach projektu dodatkową kartotekę np. o nazwie modules w której będziemy przechowywać elementy logiki biznesowej (moduły): > mkdir modules && cd modules 2. Tworzymy odpowiedni plik modułu, który następnie udostępniamy poprzez obiekty exports i modules (użyjmy poprzedniego przykładu z kalkulatorem): class Kalkulator { constructor(a,b){ this.x = a; this.y = b; Dodaj() { return this.x + this.y; Odejmij() { return this.x - this.y; ; module.exports = Kalkulator; Plik o nazwie kalkulator.js" zlokalizowany w katalogu: modules.

Generator Express.js Przykład implementacji modułu w ramach projektu Express: 3. W pliku kontrolera głównego (jeśli to w nim chcemy skorzystać z modułu) importujemy nowy moduł. Następnie w ramach obsługi jednej z tras wykorzystujemy funkcjonalności stworzonego modułu: var express = require('express'); var router = express.router(); const Kalkulator = require(../modules/kalkulator.js ); /* GET home page. */ router.get('/', function(req, res, next) { var k = new Kalkulator(4,5); var d = k.dodaj(); res.render('index', { wynik: d ); ); module.exports = router;

Express.js { "name": "projekt0", "version": "0.0.0", "private": true, "scripts": { "start": "node./bin/www", "dependencies": { "body-parser": "~1.12.0", "cookie-parser": "~1.3.4", "debug": "~2.1.1", "ejs": "~2.3.1", "express": "~4.12.2", "morgan": "~1.5.1", "serve-favicon": "~2.2.0" Plik: package.json Podstawowe informacje o projekcie Skrypt uruchomieniowy aplikacji Informacje o zależnościach (modułach) niezbędnych do działania aplikacji i ich wersjach Plik ten powstaje automatycznie w momencie generowania szkieletu projektu. Plik ten uaktualniany przy każdej instalacji dodatkowego modułu npm przez wydanie polecenia: > npm install nazwa_pakietu --save

Express.js #!/usr/bin/env node // Module dependencies. var app = require('../app'); var debug = require('debug')('projekt0:server'); var http = require('http'); // Get port from environment and store in Express. var port = normalizeport(process.env.port '3000'); app.set('port', port); // Create HTTP server. var server = http.createserver(app); // Listen on provided port, on all network interfaces. server.listen(port); server.on('error', onerror); server.on('listening', onlistening); Plik:./bin/www Plik tworzący serwer i obsługujący nasłuchiwanie żądań za pomocą protokołu HTTP Ustalenie portu na którym nasłuchuje serwer HTTP: domyślnie 3000 lub podany jako zmienna środowiskowa BASH Utworzenie serwera HTTP Uruchomienie nasłuchiwania

Express.js var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieparser = require('cookie-parser'); var bodyparser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); Plik: app.js Pliki tras kontrolera, wszystkie które znajdują się w kartotece routes var app = express(); // view engine setup app.set('views', path.join( dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public app.use(logger('dev')); app.use(bodyparser.json()); app.use(bodyparser.urlencoded({ extended: false )); app.use(cookieparser()); app.use(express.static(path.join( dirname, 'public'))); app.use('/', routes); app.use('/users', users); module.exports = app; Określenie języka szablonów oraz katalogu w którym się znajdują Definicja ścieżki do kartoteki public widocznej dla klienta Związanie plików kontrolerów z odpowiednimi trasami. Odwzorowanie adresów URL na strukturę katalogów

Express.js var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieparser = require('cookie-parser'); var bodyparser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); Plik: app.js Pliki tras kontrolera, wszystkie które znajdują się w kartotece routes var app = express(); // view engine setup app.set('views', path.join( dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public Zmienna przechowująca app.use(logger('dev')); informację o katalogu app.use(bodyparser.json()); projektu. app.use(bodyparser.urlencoded({ extended: false )); app.use(cookieparser()); app.use(express.static(path.join( dirname, 'public'))); app.use('/', routes); app.use('/users', users); module.exports = app; Określenie języka szablonów oraz katalogu w którym się znajdują Definicja ścieżki do kartoteki public widocznej dla klienta Związanie plików kontrolerów z odpowiednimi trasami. Odwzorowanie adresów URL na strukturę katalogów

Express.js var express = require('express'); var router = express.router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' ); ); module.exports = router; Plik: routes/index.js Pojedyncza tras obsługująca określone żądanie przychodzące od klienta. Odpowiedź na żądanie klienta jest formułowana za pomocą mechanizmu funkcji wywołania zwrotnego callback.

Express.js var express = require('express'); Plik: routes/index.js var router = express.router(); req - obiekt żądania przychodzącego od klienta /* GET home page. */ res - obiekt odpowiedzi (do klienta) router.get('/', function(req, res, next) { res.render('index', { title: 'Express' ); ); module.exports = router; Pojedyncza tras obsługująca określone żądanie przychodzące od klienta. Odpowiedź na żądanie klienta jest formułowana za pomocą mechanizmu funkcji wywołania zwrotnego callback. Najważniejszą rolę w kodzie powyżej spełnia obiekt router, który jest odpowiedzialny za trasowanie czyli obsługę wszystkich wywołań adresów URL. Każda trasa może posiadać jedną lub więcej funkcji obsługi trasy. W momencie rejestracji żądania router określa która funkcji obsługi trasy zostanie wykonana. Ogólna postać funkcji obsługi trasy wygląda następująco: router.metoda( TRASA, OBSŁUGA TRASY ) Metoda HTTP np. GET, POST, PUT, DELETE Trasa: adres URL żądania klienta Najczęściej wywołanie zwrotne realizujące określoną funkcjonalność.

Express.js Przykłady funkcji obsługi żądań: router.get('/', function (req, res) { res.send('hello World!'); ); router.post('/', function (req, res) { res.send('żądanie POST'); ); Funkcja obsługująca tą samą Funkcja trasę /, ale dla dwóch różnych możliwych metod HTTP. Bardzo często trasa w postaci adresu URL oraz metoda (np. GET) w literaturze określana jest jako END-POINT. router.put('/user', function (req, res) { ); res.send('żądanie PUT dla URL /user'); Funkcja Podobnie jak poprzednio dwie usługi END-POINT. router.delete('/user', function (req, res) { ); res.send('żądanie DELETE dla URL /user');

Express.js Pojęcie END-POINTU jest bardzo istotne z punktu widzenia tworzenia w przyszłości aplikacji o charakterze API (interfejsów). W typowych aplikacjach internetowych skrypty wykonywane po stronie klienta (w przeglądarce) komunikują się z serwerem asynchronicznie za pomocą wywołań kierowanych do odpowiednich endpointów. W Express.js nazwą trasy może być: (a) łańcuch znakowy, (b) wzorzec, (c) wyrażenie regularne. Znaki? +, * mają takie samo znaczenie jak w przypadku wyrażeń regularnych tj:? - wyrażenie występuje 0 lub 1 raz + - wyrażenie występuje 1 lub więcej razy * - wyrażenie występuje 0 lub więcej razy, albo zaczyna się od danego znaku Natomiast. oraz - są interpretowane jako elementy statyczne łańcuchów. Dodatkowo można używać nawiasów ( ) określania grupy znaków których mają dotyczyć pokazane kwantyfikatory. router.get( '/', function(){ ); router.get( '/test', function(){ ); http://localhost:3000/ http://localhost:3000/test

Koniec wykładu 6