Architektura chmur i wirtualizacja Wykład 7 Mashups hybrydowe aplikacje webowe
Zawartość Aplikacje webowe podstawy Aplikacje klasyczne i mashupy Architektura mashupu Technologie 2
Aplikacje webowe
Historia Etap 0: Statyczne dokumenty. Etap (- )1 Skrypty, applety Java, Wodotryski po stronie klienta. Etap 2 Dostęp do baz danych z przeglądarki (dynamiczne strony serwerowe). Etap 3 Dodanie do danych semantyki (XML), Przetwarzanie rozproszone. Etap 4 Komunikacja asynchroniczna (AJAX) Rich Internet Applications (RIA) aplikacje w przeglądarce, Adobe Flash, Adobe Air, GWT, Microsoft Silverlight, JavaFX, Web 2.0. Etap 5 Mashupy. Etap Cloud Computing? 4
Kanoniczna architektura aplikacji webowej 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, 5
Java EE
Java EE Java Platform, Enterprise Edition Platforma programowania Java po stronie serwera, Uzupełnia Java SE bibliotekami do budowania bardziej złożonych (wielowarstwowych, rozproszonych, odpornych na błędy) aplikacji, które są oparte na komponentach działających w ramach serwera aplikacji, Zdefiniowana jako specyfikacja. 7
Specyfikacje JEE wprowadza wiele oddzielnych specyfikacji API, np.: JDBC (Java Database Connectivity), 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) 8
Serwery aplikacji Kompletna specyfikacja: GlassFish (GlassFish Community), JBoss (Red Hat), Oracle WebLogic (Oracle), Apache Geronimo (Apache Software Foundation), IBM WebSphere (IBM), ColdFusion (Adobe). Tylko kontenery webowe (serwletów): Apache Tomcat (Apache Software Foundation), Jetty (Eclipse Foundation). 9
Architektura aplikacji webowej w JEE 10
Struktura aplikacji webowej opartej na Plik WAR (Web ARchive) : serwletach w JEE Deskryptor wdrożenia (deployment descriptor) 11
Cykl życia serwletu Kontener tworzy instancję serwletu (przy pierwszym wołaniu lub przy starcie), Konfiguracja zostaje załadowana z web.xml, Pojedyncza instancja serwletu jest współdzielona pomiędzy klientami, Żądanie (request) woła metodę service(), która z kolei woła dopost() lub doget(), Można użyć filtrów odpowiedzialnych za transformację żądania pomiędzy serwletem a kontenerem, Serwlet może przekazać (forward) żądanie do innego serwletu, Serwlet tworzy obiekt odpowiedzi (response), Kiedy serwlet jest usuwany, wołana jest jego metoda destroy(). 12
Kod prostego serwletu 13
Definicja w web.xml <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> 14
Technologie serwletowe Aplikacja oparta na serwletach może korzystać z innych technologii (API), nie koniecznie zdefiniowanych w ramach JEE, np.: Mechanizmów generowania widoku: JSP, JSF - > Apache Struts, Apache Wicket, Spring MVC. Mechanizmów implementacji modelu: EJB - > Spring Framework. Serwlet może używać dla generowania widoku np. JSP, przekazując do niego żądanie Każdy plik JSP jest transformowany do Javy, kompilowany i działa jak niezależny serwlet. 15
JSP jako generowany serwlet 16
Cykl życia aplikacji JEE Kod komponentu, Deskryptor wdrożenia, Kompilacja, Pakowanie (packaging) do WAR, Wdrożenie do serwera aplikacji, Dostęp przez URL. 17
HTTP
HTTP RFC 2616 Komunikat (message): HTTP- message = Request Response Żądanie (request): Method Request- URI HTTP- Version Odpowiedź (response): HTTP- Version Status- Code Reason- Phrase 19
Metody żądań OPTIONS, HEAD, GET, PUT, POST, DELETE, TRACE, CONNECT. 20
GET Tylko pobiera dane wskazane przez użytkownika w Request- URI, Implementacja nie powinna wprowadzać żadnych efektów ubocznych. 21
POST Informuje serwer, że dane w komunikacie powinny zostać dodanie jako pod- zasób względem zasobu wskazanego przez Requet- URI (jak plik do katalogu). Początkowo POST była przewidziana jako jednorodna metoda do operacji w rodzaju: Adnotowania istniejących zasobów, Publikowania na forach, grupach dyskusyjnych, itp., Przesyłania bloków danych (formularzy webowych) do przetwarzania, Dodawania rekordów baz danych. 22
PUT Informuje serwer, że dane powinny zostać zachowane we wskazanym URI Jeżeli identyfikator Request- URI wskazuje na istniejący zasób, dane powinny być zinterpretowane jako aktualizacja, Jeżeli URI odnosi się do nieistniejącego zasobu, serwer może utworzyć nowy zasób, który będzie dostępny pod tym URI. 23
DELETE Żądanie usunięcia zasobu wskazanego przez Request- URI. Klient nie ma gwarancji, że zasób został usunięty, nawet jeżeli serwer poinformował o tym przez odpowiedni kod odpowiedzi. 24
POST a PUT Zgodnie z RFC 2616, podstawową różnicą miedzy POST a PUT jest rozumienie URI: W POST Request- URI identyfikuje zasób, który obsługuje wysłane dane Zasobem może być proces lub protokół, Dane stanowią parametr zasobu (jak parametry metody). W PUT Request- URI identyfikuje sam zasób (zasób, którego dane są przesyłane w komunikacie) Serwer nie musi stosować komunikatu do żadnego innego zasobu niż ten wskazany przez Request- URI. 25
Specyfikacja kontra życie Aplikacja (programista) może samodzielnie decydować, jak zareagować na poszczególne metody żądania, zachowując się całkowicie wbrew wskazaniom w RFC 2616. 26
Sesje HTTP jest bezstanowy GET - > otwórz połączenie, pobierz dane, porzuć połączenie. Sesja nie stanowi części specyfikacji HTTP, ale aplikacje webowe nie mogą pracować bezstanowo: Aplikacja potrzebuje zarządzania sesją (przykład koszyk w sklepie on- line), Sesja może być przechowywana na: Serwerze (ulotne obiekty sesji lub baza danych dla dłuższych sesji), Kliencie (cookies, ukryte pola formularzy, parametry URL). 27
Mashupy
Definicja Aplikacja webowa łącząca dane, kod i inną zawartość z różnych źródeł w integralną całość Czysty mashup jest wykonywany całkowicie na kliencie (client- side mashup), jednak integrowanie zasobów po stronie serwera jest także możliwe (server- side mashup). Lub dowolna kombinacja tych podejść. 29
Architektura klasyczna 2. Pobieranie danych 1. Żądanie 4. Odpowiedź Własne bazy danych dla wszystkich usług utrzymywane lokalnie 3. Przetwarzanie Wszystkie usługi hostowane lokalnie (i zazwyczaj samodzielnie napisane) Kompletny kod strony (HTML) w ostatecznej formie 30
Architektura mashupu Minimalna liczba własnych usług (możliwie brak) Przeglądarka (klient) komunikuje się z dostawcami usług 3a. 1. Żądanie 3b. 2. Odpowiedź Podstawowy HTML z fragmentami JS odpowiedzialnymi za komunikację z usługami zewnętrznymi Odpowiedzi zawierają dane przetwarzane przez JS na kliencie lub dynamicznie budowane skrypty JS odpowiedzialne za dalsze działania. 3c. 31
Alternative mashup architecture Some services are integrated already on the server- side (security issues, hiding implementation, the same origin policy, etc.) 4a. 2a. 1. Request 4b. 3. Response 2b. Page code can be complete or request other services with JS 4c. Also, some locally hosted services can be used, like in classing webapps 32 32
Dylematy Mashupy serwerowe są znacznie łatwiejsze w implemetacji w porównaniu z klienckimi. Kwestie prawne i licencyjne. Świadomie oddajemy nasze dane stronie trzeciej, nawet nie wiedząc niczego o ich przechowywaniu i bezpieczeństwie Bardzo często dostęp do danych nie jest możliwy poza interfejsami webowymi, Administrowanie danymi może być niedostępne. 33
Problem same origin Polityka jednego źródła (same origin policy) jest fundamentalnym ograniczenie mashupów klienckich. Ograniczenie wynika wprost z reguł bezpieczeństwa klienta HTTP (głównie chodzi o ciasteczka i historię), które zapobiegają łączeniu klienta z zasobami na serwerach innych niż bieżąca strona. 34
Problem same origin URL Wynik Powód h"p://www.example.com/dir/page.html OK Ten sam protokół i host h"p://www.example.com/dir2/other.html OK Ten sam protokół i host h"p://www.example.com:81/dir/other.html ERROR Inny port h:ps://www.example.com/dir/other.html ERROR Inny protokół h"p://en.example.com/dir/other.html ERROR Inny host h"p://example.com/dir/other.html ERROR Inny host h"p://v2.www.example.com/dir/other.html ERROR Inny host Wikipedia, Same origin policy, http://en.wikipedia.org/wiki/same_origin_policy 35
Rozwiązania same origin CORS (cross- origin resource sharing) Dodanie do odpowiedzi HTTP specjalnego nagłówka Access- Control- Allow- Origin, Może zawierać listę dozwolonych domen lub wszystkie (*), Obsługa nagłówka nie jest zaimplementowana w starszych przeglądarkach. 36
Rozwiązania same origin Właściwość document.domain Jeżeli dwie ramki (okna) zawierają JavaScript definiujący tę samą domenę, regułą same origin zostaje zniesiona Na przykład współpracujące skrypty z orders.example.com i catalog.example.com mogą określić wspólną domenę jako example.com. Sposób użycia : Ukryty iframe osadzony na stronie. 37
Rozwiązania same origin Komunikacja międzydokumentowa (cross- document messaging) Skrypty z oddzielnych ramek mogą wysyłać komunikaty do siebie nawzajem przez Window.postMessage(), Skrypt nasłuchujący musi subskrybować zdarzenia obiektu Window poprzez handler onmessage, Skrypty nadal nie mogą odczytywać właściwości z innych ramek, Sposób użycia : Ukryty iframe osadzony na stronie. 38
Rozwiązania same origin JSONP (JSON with padding) Ograniczenie same origin nie ma wpływu na znacznik <script> przeglądarka może pobrać i używać zasobów statycznych (skryptów, obrazów, styli) z różnych serwerów, Wynik zdalnego skryptu to JSON (właściwy rezultat) opakowany w funkcję dostępną na kliencie, Dzięki obsłudze DOM w JS, taki skrypt może zostać dynamicznie wstrzyknięty na stronę, Ograniczenie: Działa tylko z HTTP GET. 39
AJAX
AJAX Asynchronous JavaScript and XML Pozwala klientowi asynchronicznie wysyłać i odbierać dane, Komunikacja strony z serwerem przebiega w tle, nie wpływając na odbiór strony przez użytkownika. 41
Korzyści Bardziej dynamiczna interakcja bez potrzeby przeładowywania całej strony Kod skryptu klienckiego może zostać użyty do pobrania danych z serwera i uaktualnienia strony (lub jej fragmentów) bez konieczności przeładowania. 42
Wady i problemy Historia przeglądarki nie zawiera zmian kiedy kompletna strona jest ładowana dynamicznie (np. przez Dojo), nie są wykrywane żadne zmiany URL. Nie można tworzyć zakładek (bookmarks) dla całkowicie dynamicznych stron. Zależności czasowe (działania użytkownika kontra działania skryptu). Indeksowanie zazwyczaj roboty (web crawlers) nie rozpoznają JS, a nawet jeśli nie wspierają AJAXa. Przeglądarka może nie wspierać JavaScriptu (obecnie mało prawdopodobne). Polityka same origin. Zwiększona liczba małych żądań i pochłaniające czas uzgodnienia (handshakes). JAWS - Job Access With Speech. 43
Systemy synchroniczne i asynchroniczne W systemie asynchronicznym akcje użytkownika (jak kliknięcia) skutkują wołaniami HTTP do serwera i przeładowaniem strony W systemie asynchronicznym akcje użytkownika nie koniecznie odpowiadają przetwarzaniu przez silnik AJAX. 44
Komunikacja synchroniczna i asynchroniczna 45
XmlHttpRequest XMLHttpRequest (XHR) jest klasą używaną przez AJAX do komunikacji. XMLHttpRequest respektuje politykę same origin. Pomimo nazwy (wynikające z początkowych założeń), AJAX obsługuje dowolny format tekstowy, np. JSON, HTML, plain text. 46
Ręczne użycie XHR Dostęp do obiektu: function gethttprequest() { var xhr = null; if (window.xmlhttprequest) { xhr = new XMLHttpRequest(); } // normal browsers 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"); // a possiblity to enforce MIME } return xhr; 47
Ręczne użycie XHR Wysłanie żądania: var xhr = gethttprequest(); var url = "http://my.host/my/service/url"; var async = true; var postcontent = param1=value1¶m2=value2&... ; xhr.open("post", url, async); // allowed other HTTP methods xhr.setrequestheader("content-type", "application/x-www-form-urlencoded"); // xhr.setrequestheader( name", value"); - add other headers, if needed xhr.send(postcontent); xhr.onreadystatechange = function() { } try { if (xhr.readystate == 4) { if (xhr.status == 200) { // we have a valid response let s use it } } else { // other HTTP response code what s happened? } } catch (exception) { // handle the error } 48
Ręczne użycie XHR Właściwości XHR: readystate stan żądania (od 0 do 4), responsetext treść odpowiedzi (plain text), responsexml sparsowany XML odpowiedzi (responsetext musi być poprawnym XML), status kod odpowiedzi HTTP (np. 404), statustext opis odpowiedzi HTTP (np. not found ). 49
XHR z jquery http://api.jquery.com/jquery.ajax/ Uproszczone metody HTTP: http://api.jquery.com/jquery.get/ http://api.jquery.com/jquery.post/ 50
XHR z Dojo http://dojotoolkit.org/reference- guide/1.9/dojo/xhr.html Uproszczone metody HTTP: http://dojotoolkit.org/reference- guide/1.9/dojo/ xhrget.html#dojo- xhrget http://dojotoolkit.org/reference- guide/1.9/dojo/ xhrpost.html#dojo- xhrpost 51
JSON
JSON JavaScript Object Notation Standard tekstowego zapisu obiektów w JavaScript. Dostęp do zawartości jest znacznie prostszy niż w przypadku XML (bezpośrednia konwersja tekstu na obiekt): JSON.parse(xhr.responseText); 53
JSON a XML 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> 54
Dostęp do danych z JSON 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" } ] }; var person = JSON.parse(xhr.responseText); var firstname = person.firstname; // or: person["firstname"] var homephone = person.phonenumber[0].number; // or: person["phonenumber ][0]["number ] 55
Dostęp do danych z JSON <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> var person = xhr.responsexml.getelementsbytagname("person")[0]; var firstname = person.getelementsbytagname("firstname")[0].firstchild.data; var homephone = person.getelementsbytagname("phonenumbers")[0].firstchild.firstchild.data; 56
Usługi sieciowe
Usługi sieciowe Usługi sieciowe (web services) to niezależna od platformy metoda komunikacji pomiędzy urządzeniami lub programami Standard W3C, WSDL (Web Services Description Language), UDDI (Universal Description Discovery and Integration). 58
SOAP Simple Object Access Protocol Oparty na XML i protokole warstwy aplikacji (np. HTTP lub SMTP), Zużyty i trudny w użyciu standard (na przykład manifest WSDL musi być ciągle uaktualniany aby pasował do kodu). 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> 59
REST Representational State Transfer Znacznie luźniejszy typologicznie od SOAP, Nie jest protokołem, raczej stylem architektonicznym, Nie wymaga XML (obsługuje dowolny typ MIME), Nie wymaga nagłówka HTTP od dostawcy usługi. RESTful web services. 60
RESTful web services Nie istnieje jednoznaczny standard. Każdy zasób jest identyfikowany przez: URI, Typ danych (MIME), Obsługiwane operacje (GET, PUT, POST, DELETE). 61
RESTful web services 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 Create (or replace) a child of a parent with ID=132 giving it ID=17 Utwórz nowy element Utwórz nowy element wewnątrz wskazanego Utwórz pod- dziecko Usuń całą kolekcję Usuń wskazany element Usuń dziecko ID=17 z rodzica o ID=132 h"p://example.com?parent=132&child=17 j.w. j.w. j.w. j.w. h"p://example.com/parents/132?child=17 j.w. j.w. j.w. j.w. 62
Jersey Biblioteka Java do RESTful web services http://jersey.java.net/ 63
Jersey Przykładowa struktura pakietów: 64
Jersey Klasa oferujące 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 { // skipped code responsible for finding an object and registering a vote 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 { // skipped code responsible for finding an object JSONObject result = new JSONObject(); result.put( vote, object.getvote()); } } return result; 65
Jersey Definicja serwletu 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> 66
Jersey Kod JavaScript 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; 67