Hybrydowe aplikacje webowe

Aplikacje webowe klasyczne i mashups Architektura Technologie 2

Etap zero: Document- centric, statyczny Etap (- )1 Pojawiają się języki skryptowe, applety Java Wodotryski wykonywane po stronie klienta Etap 2 Powiązania z bazą danych dostęp do aplikacji za pomocą przeglądarki Etap 3 Dołączanie semantyki do danych (XML) Rozpraszanie przetwarzania Etap 4 Asynchroniczna komunikacja (Ajax) Rich Internet Applications (RIA) on- screen- applications Adobe Flash, Adobe Air, GWT, Microsoft Silverlight, JavaFX, Web 2.0 Etap 5 Mashup Etap Cloud Computing? 3

HTML, JavaScript, CSS, DOM, Ajax, Action Script, PHP, Java,.NET, Python, Ruby, Groovy, XSLT, Perl, Protokoły: HTTP, SOAP, REST, Atom, RSS, Formaty: HTML, XML, JSON, 4

Java Platform, Enterprise Edition Platforma programowania po stronie serwera w języku Java Uzupełnia platformę Java SE o biblioteki umożliwiające budowanie aplikacji: wielowarstwowych, rozproszonych, odpornych na awarie Które bazują na komponentach działających w obrębie Serwera aplikacji Zdefiniowana jako specyfikacja 6

W ramach JEE istnieje wiele specyfikacji API JDBC (Java Database Conectivity), RMI (Remote Method Invocation), JMS (Java Message Service), WS (Web Services), XML EJB (Enterprise Java Bean), servlet, portlet, JSP (Java Server Pages), JSF (Java Server Faces), JPA (Java Persistence API), JTA (Java Transaction API) CDI (Context and Dependency Injection) 7

Całość specyfikacji GlassFish (GlassFish Community) JBoss (Red Hat) Oracle WebLogic (Oracle) Apache Geronimo (Apache Software Foundation) IBM WebSphere (IBM) ColdFusion (Adobe) Kontenery webowe (servletów) Apache Tomcat (Apache Software Foundation) Jetty (Eclipse Foundation) 8

Plik WAR (web archive) Deployment descriptor 10

Kontener tworzy instancję servletu (przy pierwszym odwołaniu lub przy starcie) Konfiguracja ładowana z pliku web.xml Jedna instancja servletu współdzielona przez klientów Request uruchamia metodę service(), która wywołuje metodę dopost() lub doget() Pomiędzy kontenerem a servletem mogą znajdować się filtry (transformacja requestu) Servlet może przekazać request innemu servletowi (forward) Servlet tworzy obiekt odpowiedzi (response) Podczas usuwanie servletu wołana jest metoda destroy() 11

<servlet> <servlet-name>securityservlet</servlet-name> <servlet-class>pl.lodz.p.kis.ksoir.servlet.securityservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>securityservlet</servlet-name> <url-pattern>/*</url-pattern> </servlet-mapping> <servlet> <servlet-name>imageservlet</servlet-name> <servlet-class>pl.lodz.p.kis.ksoir.servlet.imageservlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>imageservlet</servlet-name> <url-pattern>/images/*</url-pattern> </servlet-mapping> 13

Aplikacja oparta o servlet może korzystać z innych technologii (API), niekoniecznie związanych z API definiowanymi w ramach JEE. Mechanizmy generacji widoku np. JSP, JSF - > Apache Struts, Apache Wicket, Spring MVC Mechanizmy implementacji modelu EJB - > Spring Framework Servlet może do generowania widoku użyć np. JSP, robiąc do niego forward requestu 14

Cykl życia aplikacji webowej Opracowanie kodu komponentu Opracowanie deskryptora rozmieszczenia (deployment) Kompilacja aplikacji Pakowanie kodu aplikacji (WAR) Rozmieszczenie na serwerze aplikacji Dostęp z wykorzystaniem URL 16

RFC 2616 Komunikaty HTTP- message = Request Response Request (żądanie) Method Request- URI HTTP- Version Response (odpowiedź) HTTP- Version Status- Code Reason- Phrase 18

Metody żądania (request): OPTIONS HEAD GET PUT POST DELETE TRACE CONNECT 19

GET pobieranie danych wskazywanych przez Request- URI implementacja nie powinna generować efektów ubocznych 20

POST informuje serwer, że dane zawarte w komunikacie powinny zostać dodane jako pod- zasób w stosunku do zasobu wskazywanego przez Request- URI (jak plik w stosunku do katalogu). POST miał w swoim zamyśle być jednolitą metodą dla operacji typu: Adnotowanie istniejących zasobów, Wysłanie wiadomości do forum, grupy/listy dyskusyjnej, itp. Przesłanie bloku danych (przesłanie formularza) do procesu obsługi Dodanie rekordu do bazy danych 21

PUT Informuje serwer, że zawarte dane powinny być zachowane pod wskazanym URI (referencja?). Jeśli identyfikator Request- URI odnosi się do zasobów już istniejących, przesłane dane należy uznać za ich zmodyfikowaną wersję. Jeśli Request- URI nie wskazuje na istniejący zasób, oraz URI może zostać zdefiniowane jako nowy zasób, serwer może utworzyć zasób z przesłanym URI 22

DELETE Żądanie usunięcia zasobu wskazywanego przez Request- URI Klient nie ma gwarancji usunięcia, pomimo potwierdzenie sukcesu przez serwer odpowiednim kodem statusu 23

POST vs. PUT Wg RFC 2616 podstawowa różnica pomiędzy POST a PUT związana jest ze znaczeniem URI Request- URI w metodzie POST identyfikuje zasób, który obsługuje załączone dane. Zasobem może być np. proces, protokół,. Dane są parametrem zasobu (np. metody). Request- URI w metodzie PUT identyfikuje sam zasób (którego dane są przesłane w komunikacie). Serwer nie może zastosować tego komunikatu do innych danych niż wskazywane przez Request- URI. 24

Aplikacja może samodzielnie decydować, jak reaguje na poszczególne metody żądania, zachowując się wbrew zaleceniom zawartym w RFC 2616 25

HTTP jest bezstanowy GET - > otwórz połączenie, pobierz dane, porzuć połączenie Sesja nie jest częścią specyfikacji HTTP, jednak aplikacje webowe nie mogą pracować w sposób bezstanowy: Aplikacje webowe muszą zarządzać sesją (np. koszyk w sklepie internetowym) Sesja przechowywana na serwerze (obiekty sesji, baza danych długie sesje) Sesja przechowywana na kliencie (ciasteczka, ukryte pola formularza) 26

Aplikacja webowa łącząca dane, kod i inną zawartość z różnorodnych źródeł w integralną całość W czystej postaci mashup wykonywany jest całkowicie na kliencie (client- side mashup), jednak możliwa jest także integracja po stronie serwera (server- side mashup) 28

2. Pobranie danych 1. Żądanie 4. Odpowiedź Utrzymywanie własnych baz danych dla wszystkich usług składowych 3. Przetwarzanie Wszystkie usługi hostowane lokalnie (i zazwyczaj napisane samodzielnie) Kompletny kod strony (HTML) w końcowej postaci 29

Minimalna liczba własnych usług (optymalnie - brak) Przeglądarka (klient) komunikuje się z dostawcami usług 3a. 1. Żądanie 3b. 2. Odpowiedź 3c. Podstawowy HTML zawierający fragmenty JS odpowiedzialne za komunikację z usługami zewnętrznymi Odpowiedzi zawierają dane przetwarzane przez JS na kliencie lub dynamicznie budowane skrypty JS odpowiedzialne za dalsze akcje 30

2a. Część usług jest integrowana już po stronie serwera (kwestie bezpieczeństwa, ukrycia implementacji, CORS, ) 1. Żądanie 4a. 4b. 3. Odpowiedź 2b. Kod strony może być całkowicie kompletny lub odwoływać się przez JS do kolejnych usług 4c. 31

Mashupy serwerowe są znacznie prostsze w implementacji w porównaniu z klienckimi Aspekty prawne i licencyjne Z własnej woli oddajemy swoje dane stronom trzecim, nie mając informacji dotyczących ich bezpieczeństwa i składowania Często dostęp do danych niemożliwy poza interfejsami webowymi 32

Podstawowe ograniczenie stanowi polityka jednego źródła (same origin policy) Ograniczenie wynikające z reguł bezpieczeństwa w klientach HTTP (głównie chodzi o historię i cookies), uniemożliwiając łączenie klienta z zasobami znajdującymi się na innych serwerach 33

Przykładowy adres strony: http://www.example.com/dir/page.html URL Wynik Powód http://www.example.com/dir/page.html OK Ten sam host, port I protokół http://www.example.com/dir2/other.html OK Ten sam host, port I protokół http://www.example.com:81/dir/other.html BŁĄD Inny port https://www.example.com/dir/other.html BŁĄD Inny protokół http://en.example.com/dir/other.html BŁĄD Inny host http://example.com/dir/other.html BŁĄD Inny host http://v2.www.example.com/dir/other.html BŁĄD Inny host 34

CORS (cross- origin resource sharing) Dołączanie do odpowiedzi HTTP specjalnego nagłówka Access- Control- Allow- Origin Może zawierać listę dozwolonych domen lub pozwalać na wszystkie (*) Obsługa nagłówka nie jest zaimplementowana w starszych przeglądarkach 35

Własność document.domain Jeżeli dwie ramki (okna) zawierają JavaScript określające tę samą domenę, reguła zostaje zniesiona Na przykład, współpracujące skrypty załadowane z hostów orders.example.com i catalog.example.com mogą określić wspólną domenę na example.com Sposób użycia ukryty iframe osadzony na stronie 36

Cross- document messaging Skrypty z oddzielnych ramek mogą wysyłać do siebie komunikaty poprzez Window.postMessage() Skrypt nasłuchujący musi subskrybować zdarzenia obiektu Window poprzez handler onmessage Skrypty nadal nie mogą odczytywać własności drugiej ramki Sposób użycia ukryty iframe osadzony na stronie 37

JSONP (JSON with padding) Ograniczenie polityki jednego źródła nie dotyczy znacznika <script> przeglądarka może korzystać ze statycznych zasobów (skrypty, obrazki, CSS) znajdujących się na różnych maszynach Wynik działania zdalnego skryptu to JSON opakowany w funkcję dostępną na kliencie Dzięki obsłudze DOM przez JS, takie skrypty mogą być wstrzykiwane na stronę dynamicznie Działa wyłącznie z HTTP GET 38

Asynchronous JavaScript and XML Pozwala klientom na asynchroniczne wysyłanie i pobieranie danych Komunikacja strony z serwerem przebiega w tle, nie wpływając na jej odbiór przez użytkownika 40

Zalety Osiągnięcie bardziej dynamicznej interakcji bez konieczności przeładowywania całej strony internetowej Kod skryptowy po stronie klienta może zostać wykorzystany do pobierania danych z serwera poprzez API, bez konieczności przeładowywania całej strony 41

Wady i problemy Problem z historią przeglądarki (kiedy cała strona ładowana jest dynamicznie, np. przez Dojo) Zakładki (kiedy cała strona ładowana jest dynamicznie, np. przez Dojo) Zależności czasowe Indeksowanie Możliwy brak obsługi JavaScript w przeglądarce Polityka tego samego źródła (same origin policy) Zwiększenie liczby requestów JAWS - Job Access With Speech 42

System synchroniczny System asynchroniczny 43

Do komunikacji używany jest obiekt XMLHttpRequest (XHR) XMLHttpRequest podlega same origin policy Wbrew nazwie (wynikającej z początkowych założeń standardu), AJAX pozwala na użycie innych tekstowych formatów danych, np. JSON, HTML, plain text 45

Dostęp do obiektu: function gethttprequest() { var xhr = null; if (window.xmlhttprequest) { // normalne przeglądarki xhr = new XMLHttpRequest(); } else if (window.activexobject) { // IE < 7 try { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("your browser does not support Ajax."); } } } if (xhr.overridemimetype) { xhr.overridemimetype("text/xml"); } // możliwość wymuszenia typu MIME } return xhr; 46

Wysłanie żądania: var xhr = gethttprequest(); var url = "http://my.host/my/service/url"; var async = true; var postcontent = param1=value1&param2=value2&... ; xhr.open("post", url, async); // dozwolone inne metody HTTP xhr.setrequestheader("content-type", "application/x-www-form-urlencoded"); // xhr.setrequestheader("nazwa", "wartość"); - nagłówki w miarę potrzeby xhr.send(postcontent); xhr.onreadystatechange = function() { try { if (xhr.readystate == 4) { if (xhr.status == 200) { // mamy odpowiedź, możemy jej użyć } else { // inny kod odpowiedzi HTTP co się stało? } } } catch (exception) { // obsługa błędu } } 47

Własności XMLHttpRequest: readystate status żądania (od 0 do 4), responsetext tekst odpowiedzi (plain text), responsexml obiekt XML sparsowanej odpowiedzi (responsetext musi być prawidłowym XML), status kod odpowiedzi HTTP (np. 404), statustext opis statusu HTTP (np. not found ) 48

http://api.jquery.com/jquery.ajax/ Uproszczone metody HTTP: http://api.jquery.com/jquery.get/ http://api.jquery.com/jquery.post/ 49

http://dojotoolkit.org/reference- guide/1.8/ dojo/xhr.html Uproszczone metody HTTP: http://dojotoolkit.org/reference- guide/1.8/dojo/ xhrget.html#dojo- xhrget http://dojotoolkit.org/reference- guide/1.8/dojo/ xhrpost.html#dojo- xhrpost 50

JavaScript Object Notation Standardowy format tekstowego zapisu obiektów w JavaScript Dostęp do zawartości znacznie łatwiejszy niż w przypadku XML (bezpośrednia konwersja tekstu do obiektu): JSON.parse(xhr.responseText); 52

var person = { "firstname": "John", "lastname": "Smith", "age": 25, "address": { "streetaddress": "21 2nd Street", "city": "New York", "state": "NY", "postalcode": "10021" }, "phonenumber": [ { "type": "home", "number": "212 555-1234" }, { "type": "fax", "number": "646 555-4567" } ] }; <person> <firstname>john</firstname> <lastname>smith</lastname> <age>25</age> <address> <streetaddress>21 2nd Street</streetAddress> <city>new York</city> <state>ny</state> <postalcode>10021</postalcode> </address> <phonenumbers> <phonenumber type="home">212 555-1234</phoneNumber> <phonenumber type="fax">646 555-4567</phoneNumber> </phonenumbers> </person> lub: <person firstname="john" lastname="smith" age="25"> <address streetaddress="21 2nd Street" city="new York" state="ny" postalcode="10021" /> <phonenumbers> <phonenumber type="home" number="212 555-1234"/> <phonenumber type="fax" number="646 555-4567"/> </phonenumbers> </person> 53

Web services Niezależna od platformy metoda komunikacji między urządzeniami lub programami Standard W3C WSDL (Web Services Description Language) UDDI (Universal Description Discovery and Integration) 56

Simple Object Access Protocol Używa formatu XML i protokołu warstwy aplikacji (np. HTTP lub SMTP) Wysłużony i ciężki w użyciu standard (np. konieczność ciągłego utrzymywania WSDL zgodnego z kodem) POST /InStock HTTP/1.1 Host: www.example.org Content-Type: application/soap+xml; charset=utf-8 Content-Length: nnn <?xml version="1.0"?> <soap:envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingstyle="http://www.w3.org/2001/12/soap-encoding"> <soap:body xmlns:m="http://www.example.org/stock"> <m:getstockprice> <m:stockname>ibm</m:stockname> </m:getstockprice> </soap:body> </soap:envelope> 57

Representational State Transfer Luźniejszy typologicznie od SOAP Nie stanowi protokołu, a raczej styl architektoniczy Nie wymaga XML (wspiera dowolny typ MIME) Nie wymaga nagłówka HTTP od dostawcy usługi RESTful web services 58

Brak jednolitego standardu Każdy zasób jest definiowany przez: URI Typ danych (MIME) Wspierane operacje (GET, PUT, POST, DELETE) 59

Zasób (URI) GET PUT POST DELETE http://example.com/resources/ (wskazuje całą kolekcję) http://example.com/resources/item17 (identyfikuje konkretny element) http://example.com/parents/132/children/17 Pobierz całą kolekcję Pobierz element (zgodnie z typem MIME) Pobierz dziecko o ID=17 rodzica o ID=132 Zastąp całą kolekcję Zastąp (lub utwórz) element Utwórz/zastąp dziecko rodzica o ID=132 nadając mu ID=17 Utwórz nowy element Utwórz nowy element wewnątrz wskazanego Utwórz pod- dziecko http://example.com?parent=132&child=17 j.w. j.w. j.w. j.w. http://example.com/parents/132?child=17 j.w j.w j.w j.w Usuń całą kolekcję Usuń wskazany element Usuń dziecko ID=17 z rodzica o ID=132 60

http://jersey.java.net/ Biblioteka Java dla RESTful Web services 61

Przykładowa struktura pakietów projektu 62

Klasa oferująca interfejs RESTful @Path("/voting") public class VotingRest { @POST @Path("/vote/{userId}/{objectId}/{value}") @Produces(MediaType.APPLICATION_JSON) public JSONObject vote(@pathparam( userid") String userid, @PathParam("objectId") String objectid, @PathParam( value") int value) throws JSONException { // pominięty kod odpowiedzialny za znalezienie obiektu i zarejestrowanie głosu JSONObject result = new JSONObject(); result.put( vote, object.getvote()); } return result; @GET @Path("/getVote") @Produces(MediaType.APPLICATION_JSON) public JSONObject getvote(@queryparam("objectid") String objectid) throws JSONException { // pominięty kod odpowiedzialny za znalezienie obiektu JSONObject result = new JSONObject(); result.put( vote, object.getvote()); } } return result; 63

Definicja servletu Jersey w web.xml <servlet> <servlet-name>jersey</servlet-name> <servlet-class>com.sun.jersey.spi.container.servlet.servletcontainer</servlet-class> <init-param> <param-name>com.sun.jersey.config.property.packages</param-name> <param-value>pl.lodz.p.kis.ksoir.rest</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>jersey</servlet-name> <url-pattern>/rest/*</url-pattern> </servlet-mapping> 64

Kod JS zwracający głosy na obiekt (jquery) function getvote(objectid) { var vote = null; var resturl = "http://my.host/voting-ws/rest/voting/getvote?objectid=" + escape(objectid); $.ajax({ url: resturl, async: false, success: function(votejsonstring, textstatus, jqxhr) { vote = JSON.parse(voteJsonString); } }); } return vote; 65