1
Lo scenario: Web 2.0 - I• Web 2.0 = termine introdotto per la prima volta nel 2004 come
titolo di una conferenza promossa dalla casa editrice O’Reilly: l'idea era che ci si stesse avviando verso una nuova concezionedel Web ("versione" 2.0), in contapposizione con la "vecchia"
i (" i " 1 0)concezione ("versione" 1.0)
• E' il Web come lo conosciamo oggi
• E' stato (ed in parte continua ad essere) un concetto confuso e sfaccettato è difficile darne una definizione, generalmente si indicano una serie di concetti che caratterizzano questa evoluzione
( diff i l b )
a.a. 2018/19 Tecnologie Web 1
• Caratteristiche (soprattutto differenze rispetto al Web 1.0):
1. Aumenta l'interattivtà: non ci si limita più a "navigare", ma si "fanno cose" (si compra, si gioca, si discute, ecc.), attraverso un'esperienza interattiva complessa
Lo scenario: Web 2.0 - II2. le applicazioni web si sostituiscono a quelle installate sul
proprio computer (es. word-processors, strumenti di gestione, ecc.) i programmi (software) non sono più "prodotti", ma diventano "servizi" (sono erogati e pagati come tali), i è i di ibili W b Scioè sono resi disponibili su un Web Server e possono essere
utilizzati attraverso un normale Web Browser
Principale strumento tecnologico: AJAX
3. le applicazioni web sono spesso costruite aggregandocontenuti e servizi offerti da terze parti aggregazione di contenuti es. RSS e Atom
a.a. 2018/19 Tecnologie Web 2
aggregazione di servizi (mashup) Open API,
servizi RESTful, SOAP Web Services
2
Principali tecnologie per costruire applicazioni web:
AJAX - I
Client-side• Javascript
Server-side• PHP
rispetto alle distinzioni viste prima, queste soluzioni:
• Javascript(e jQuery)
PHP• JSP e Java ServletInoltre:ASP.NET Ruby, Python e Perl (Javascript)
Approcci ibridi• AJAX (jQuery)
a.a. 2018/19 Tecnologie Web 3
p p , q utilizzano linguaggi di programmazione alcune sono tecnologie client-side (il codice è elaborato sul
client, dal browser), altre sono server-side (il codice è elaborato sul server), altre sono miste
AJAX - II
• AJAX permette di rendere la user experience esperita nell'interazione con le applicazioni web simile a quella esperita nell'interazione con applicazioni stand-alone(installate in locale) [www.html.it/guide/guida-ajax/]( ) [ g g j ]
• AJAX = Asynchronous JavaScript and XML, coniato nel febbraio del 2005 da Jasse James Garrett, per descrivere un modo di utilizzare congiuntamente diverse tecnologie esistenti:– HTML (e CSS) client-side– Javascript + DOM client-side
XMLHttpRequest (oggetto Javascript) client side
a.a. 2018/19 Tecnologie Web 4
– XMLHttpRequest (oggetto Javascript) client-side– Programmi (o script) server-side (PHP, Servlet, ...)
AJAX è una nuova etichetta per riassumere l'utilizzo congiunto di tecnologie preesistenti
3
AJAX - III
Applicazioni Web tradizionali (con tecnologie server-side) funzionamento sincrono:• per ogni interazione con l'utente (per es. click su un link) inviano
al server una richiesta (HTTP request) per una nuova pagina• il client aspetta la risposta del server (e l'utente anche!)• la risposta del server (HTTP response) contiene l'intera nuova
pagina• ciò comporta uno spreco di banda e un'interfaccia utente molto
più lenta di quanto potrebbe essere
Applicazioni AJAX funzionamento asincrono:• sono in grado di inviare al Web Server richieste asincrone
a.a. 2018/19 Tecnologie Web 5
• sono in grado di inviare al Web Server richieste asincrone(mentre l'utente può continuare ad interagire con la pagina) e parziali (relative solo ai dati necessari)
• di conseguenza consentono un'interazione più veloce (la quantità di dati che è necessario inviare al/ricevere dal server è minore) e in modalità asincrona (senza attesa)
AJAX - IV(a)
(b)
a.a. 2018/19 Tecnologie Web 6
4
AJAX - VPer passare da (a) a (b):1) approccio "tradizionale"
a. il Browser (client) invia al Web Server l'informazione sul Dip. scelto
b. il Web Server genera una nuova pagina, con il Dip. selezionato nel primo menu e l'elenco dei CdL afferenti a quel Dip. nel secondo menu, e la invia al Browser
c. il Browser mostra la (nuova) pagina
2) approccio AJAXa. il Browser (client) invia al Web Server l'informazione sul Dip.
scelto
a.a. 2018/19 Tecnologie Web 7
sceltob. il Web Server genera un nuovo menu per la scelta del CdL
(contenente i CdL afferenti a quel Dip.) e lo invia al Browserc. il Browser lo inserisce nel punto opportuno della pagina (senza
ricaricarla)
AJAX - VI
Funzionamento tipico di un'applicazione AJAX:
• carichiamo nel browser una pagina web (.html) che contiene degli script client-side (Javascript) che intercettano eventirelativi a parti della pagina (mediante il DOM)relativi a parti della pagina (mediante il DOM)
• in risposta ad un qualche evento (es: click), Javascript chiede all'oggetto XMLHttpRequest di inviare al server una richiesta (HTTP request), con l'indicazione di una risorsa server-side(es. PHP)
• sul server, un programma (o uno script) server-side elabora la risposta e la invia all'oggetto XMLHttpRequest da cui lo
a.a. 2018/19 Tecnologie Web 8
risposta e la invia all oggetto XMLHttpRequest, da cui lo script client-side la preleva e modifica di conseguenza una parte di pagina (mediante il DOM)
5
AJAX - VIIin altre parole, è l'oggetto XMLHttpRequest che agisce da Client HTTP nei confronti del Web Server, cioè:– invia la richiesta (HTTP request) al Web Server– riceve la risposta (HTTP response) del Web Server
NB1: Il Web Server "non si accorge di niente"! Riceve infatti una "normale" HTTP request da parte di un HTTP Client (rappresentato dall'oggetto XMLHttpRequest)
NB2: AJAX non è una via di mezzo tra client-side e server-side (la computazione non può mai avvenire... "a metà strada"!)... ma l'uso congiunto di tecnologie client-side e server side
a.a. 2018/19 Tecnologie Web 9
NB3: "XMLHttpRequest is the worst named object in the history of JavaScript" !!! [D. Cameron. A Software Engineer Learns HTML5, JavaScript & jQuery. Cisdal Pub, 2014, p.223]
Qualunque altro nome sarebbe andato meglio... compresopippo !!! (se preferite, chiamatelo l'innominato...)
AJAX - VIII
ServerB
HTTP request(pag.html)
HTTP response(pag.html)
1
2
Browser
HTML + AJAX(Javascript con
XMLHttpRequest)elaborazione
(interpretazione del codice Javascript)
"richiesta"[*](rif. risorsa server-side)
XML
HTTPrequest
HTTPresponse
HTTP Client3
54
a.a. 2018/19 Tecnologie Web 10
visualizzazione
richiesta asincrona (non "blocca" l'interazione con l'utente)
XMLHttp
Request"risposta"[*]
(txt/HTML/XML)
[*] l'oggetto XMLHttpRequestviene gestito all'interno dello script Javascript (client-side)
[*] l'oggetto XMLHttpRequestviene gestito all'interno dello script Javascript (client-side)
6
6
AJAX - IX
IndirizzoCittà
Esempio 1:
l'utente digita città, via e numero…
ViaCAP
IndirizzoCittàViaCAP
TorinoPianezza
n.
n. 5
a.a. 2018/19 Tecnologie Web 11
IndirizzoCittàViaCAP
TorinoPianezza10149
il sistema scrive automaticamente il CAPn. 5
AJAX - X
In un'applicazione Web tradizionale (PHP, Servlet, ...):• impossibile (o quasi...)
In un'applicazione AJAX:d l' di i i à i i li id• quando l'utente digita città, via e numero uno script client-side
(Javascript) se ne accorge e invia (attraverso l'oggetto XMLHttpRequest) una richiesta asincrona al server nella quale si chiede il CAP associato a quella città/via
• l'utente può continuare ad interagire con la pagina• sul server, un programma (o uno script server-side) recupera il
CAP (probabilmente da un database) e lo invia all'oggetto XMLHttpRequest da cui lo script client side lo preleva e lo
a.a. 2018/19 Tecnologie Web 12
XMLHttpRequest, da cui lo script client-side lo preleva e lo inserisce nella pagina
• viene effettuata una connessione asincrona con il server; la pagina non viene ricaricata (reinviata dal Web Server nell'HTTP response)
7
AJAX - XIEsempio (senza via e numero)
Script Javascript:function callServerCity(c) {var innominato = new XMLHttpRequest();innominato.onreadystatechange = function {innominato.onreadystatechange function {if (innominato.readyState == 4) {document.getElementById("cap").value =
innominato.responseText; }
}; innominato.open("GET", "getCap.php?city="+c, true); innominato.send(null);
}
Codice HTML:
a.a. 2018/19 Tecnologie Web 13
<FORM ...>... <INPUT TYPE="text" ID="citta"
onChange="callServerCity(this.value);"><INPUT TYPE="text" ID="cap">...
</FORM>
AJAX - XIEsempio 2:
Tratto da: L. Borgognoni, Scidecom.org: un nuovo progetto e una nuova implementazione, Tesi di Laurea in Scienze della Comunicazione, Università di Torino, a.a. 2006/2007
scidecom.orgInserimento risorse
informaticamarketingpsicologia
scidecom.orgInserimento risorse
argomento. . . . . .
argomento. . . . . .
psicologiasemioticasociologiaaltro
inizialmente vuoto...
informatica l'utente seleziona un argomento...
a.a. 2018/19 Tecnologie Web 14
scidecom.orgInserimento risorse
argomentoesame
informatica
informatica generaleprogrammazione webweb designinformatica applicata: basi di datiinformatica applicata: reti
il sistema popola il secondo menu
8
AJAX - XII
In un'applicazione Web tradizionale (PHP, Servlet, ...):• impossibile (o quasi...)
In un'applicazione AJAX:• quando l'utente seleziona l'argomento uno script client side• quando l'utente seleziona l'argomento uno script client-side
(Javascript) intercetta l'evento e invia (attraverso l'oggetto XMLHttpRequest) una richiesta asincrona al server nella quale si chiede l'elenco degli esami associati a quell'argomento
• sul server, un programma (o uno script server-side) recupera la lista di esami (da un database), la inserisce negli opportuni tag (<OPTION>) e la invia all'oggetto XMLHttpRequest, da cui loscript client-side lo preleva e lo crea così il secondo menu
a.a. 2018/19 Tecnologie Web 15
p p(<SELECT>)
• viene effettuata una connessione asincrona con il server; la pagina non viene ricaricata (reinviata dal Web Server nell'HTTP response)
AJAX - XIII
clickEsempio 3:
a.a. 2018/19 Tecnologie Web 16
9
AJAX - XIVIn un'applicazione Web tradizionale (PHP, Servlet, ...):• quando l'utente clicca su acquista parte una richiesta (HTTP
request) al Web Server• sul server, un programma (o uno script server-side) aggiorna il
carrello, inserendo i nuovi dati nella pagina che invierà al clientcarrello, inserendo i nuovi dati nella pagina che invierà al client• la (nuova) pagina viene inviata al client (in HTTP response)
In un'applicazione AJAX:• quando l'utente clicca su acquista uno script client-side
(Javascript) intercetta l'evento e invia (attraverso l'oggetto XMLHttpRequest) una richiesta asincrona al server nella quale si chiede di aggiornare i dati del carrello
l ( i t id ) i il
a.a. 2018/19 Tecnologie Web 17
• sul server, un programma (o uno script server-side) aggiorna il contenuto del carrello e lo invia all'oggetto XMLHttpRequest, da cui lo script client-side lo preleva e lo inserisce nella pagina
• viene effettuata una connessione asincrona con il server; la pagina non viene ricaricata (reinviata dal Web Server nell'HTTP response)
AJAX - XVEsempio 4:
è ormai molto usato costruire applicazioni web single page: costruisco un'unica pagina HTML e gestiosco tutte le interazioni con il server attraverso chiamate AJAX
i i i l'i i non ricarico mai l'intera pagina[https://www.codeschool.com/beginners-guide-to-web-development/single-page-applications]
Server
Brow
HTML +
XMLHttpReq
HTTP
cl
a.a. 2018/19 Tecnologie Web 18
Attenzione! L'approccio single page non è privo di problemi (es. performance, SEO, ...)
Server ser
AJAXReqlient
10
AJAX - XVILa risposta del server può essere codificata in diversi formati:
1. testo semplice, per es:10100
2. JSON, per es:, p{ city: Torino,cap: 10100,districts: [Aurora, Cenisia, Vanchiglia, ...] }
3. XML, per es:<?xml version="1.0" encoding="UTF-8"?><city><name>Torino</name><cap>10100</cap>
a.a. 2018/19 Tecnologie Web 19
<cap>10100</cap><districts><d circ="7">Aurora</d><d circ="3">Cenisia</d><d circ="7">Vanchigia</d></districts></city>
Cosa sono JSON e XML?Cos'è JSON (JavaScript Object Notation)?[www.json.org; www.html.it/articoli/introduzione-a-json-1/]
• è un formato testuale molto usato per lo scambio di dati in applicazioni client-serverè b t d t tt i i i di i l ( li t• è basato su due strutture insiemi di coppie nome-valore (e liste ordinate di valori)
Cos'è XML (eXtensible Markup Language )?[www.html.it/pag/16214/introduzione26/]
• è un formato testuale standard, definito dal W3C e utilizzato per la rappresentazione di dati e di contenuti strutturati
iù i è li i i l
a.a. 2018/19 Tecnologie Web
• più precisamente, è un meta-linguaggio, in quanto consente la definizione di nuovi tag, attributi, ecc., cioè la definizione di nuovi linguaggi di mark-up (vedremo vari esempi: RSS, Atom, WSDL, SOAP)
20
11
AJAX e jQuery - ICome abbiamo già visto parlando di Javascript, jQuery(jquery.com) è una libreria Javascript che• "nasconde" la complessità dell'interazione diretta con il
DOM e con XMLHttpRequest (AJAX)p q ( )
Inoltre, abbiamo detto, con jQuery è possibile:• interagire con il DOM...• inviare richieste (e ricevere risposte) asincrone e parziali
(d)al Web Server, secondo il modello AJAX
possiamo scrivere chiamate AJAX utilizzando jQuery al posto di Javascript! [www html it/pag/18403/jquery ajax/]
a.a. 2018/19 Tecnologie Web 21
posto di Javascript! [www.html.it/pag/18403/jquery-ajax/]
Per esempio...
AJAX e jQuery - IIL'esempio precedente riscritto con jQueryScript jQuery:$("input#citta").change(function(){ var c = $("#citta").value; $.ajax({$.ajax({type: "GET",dataType: "html",url: "getCap.php",data: "city="+c,success: function(cap){$("#cap").value = cap;
}});
}
C di HTML
a.a. 2018/19 Tecnologie Web 22
Codice HTML:<FORM ...>... <INPUT TYPE="text" ID="citta"><INPUT TYPE="text" ID="cap">...
</FORM>
12
Suggerimenti bibliografici – I
• Innanzi tutto i link segnalati nelle slide !!!
• V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione Web Lato Server (seconda edizione aggiornata), Apogeo, 2011Disponibile e-book (PDF) nella collana Apogeo Spicchi: è
possibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.9
a.a. 2018/19 Tecnologie Web 23
Aggregare contenuti
RSS: RDF Site Summary o Really Simple Syndication– Syndication: diffusione di notizie tramite un'agenzia di stampa
Web syndication: diffusione di contenuti (tipicamente news)
Aggregare contenuti: RSS - I
– Web syndication: diffusione di contenuti (tipicamente news) tramite i canali Web
NOTA: RDF Site Summary si riferisce alle versioni di RSS basate su RDF (Resource Description Framework), un modello dati esprimibile in un linguaggio XML [www.w3.org/TR/rdf-primer]; Really Simple Syndication si riferisce a quelle versioni di RSS direttamente basate su XML
• RSS = formato (linguaggio di markup) standard, basato su XML utilizzato per la distribuzione di contenuti sulsu XML, utilizzato per la distribuzione di contenuti sul Web [www.html.it/articoli/introduzione-a-rss-3/]
• RSS definisce la struttura di una "notizia" (contenuto informativo), articolandola in vari campi (es. autore, titolo, categoria, data di pubblicazione, ...)
a.a. 2018/19 24Tecnologie Web
13
Aggregare contenuti: RSS - II
• Un sito può pubblicare i propri contenuti in formato RSS e altri siti/applicazioni possono leggerli automaticamente
• Pubblicazione: – per pubblicare contenuti in formato RSS occorre
costruire un RSS feed ("flusso") [vedi slide successive] e poi metterlo a disposizione sul server
– un RSS feed è un file accessibile attraverso un URL(quindi attraverso il protocollo HTTP)
• Lettura: – un RSS feed può essere letto:
o da un RSS reader o feed readero da un'applicazione (sito web) che aggrega contenuti
(per es. notizie)
a.a. 2018/19 25Tecnologie Web
Aggregare contenuti: RSS - III
RSS reader o feed reader: applicazione client a cui vengono forniti gli URL dei feed che si vogliono "sottoscrivere" (a cui ci si vuole "abbonare") e che periodicamente scaricano tali feed e li visualizzano
Applicazione (sito web) che aggrega contenuti: app che si connette all'URL di uno o più feed, legge le informazioni e, tipicamente, le visualizza = mashup di contenutiPer es, in PHP:<?php$xmldom=new DOMDocument();$xmldom->load("http://www.yourSite.it/blog/feed.xml");
a.a. 2018/19 26Tecnologie Web
$nodo=$xmldom->getElementsByTagName("item");for ($i=0; $i<=$nodo->length-1; $i++) {$titolo=$nodo->item($i)->getElementsByTagName("title")...;$des=$nodo->item($i)->getElementsByTagName("description")...;
?><h1><?= $titolo ?></h1><p><?= $des ?></p>
<?php } ?>[http://www.lukeonweb.net/leggi/491/leggere_un_feed_rss_con_php.asp]
14
Esempio di feed reader
Aggregare contenuti: RSS - IV
NB: Diverse sorgenti di informazione (ANSA.it, Repubblica>Politica, Repubblica>Scienze, Torino Cultura-Musica-oggi)
a.a. 2018/19 27Tecnologie Web
L'insieme di fonti da cui scaricare le news è configurabile
Esempio di sito che integra notizie provenienti da varie fonti: http://news.google.it
Aggregare contenuti: RSS - V
a.a. 2018/19 28Tecnologie Web
15
Esempio (un frammento di RSS feed):<?xml version="1.0" encoding="UTF-8"?><rss ... version="2.0"><channel> <title>Repubblica it > Politica</title>
Aggregare contenuti: RSS - VI
<title>Repubblica.it > Politica</title> <link>http://www.repubblica.it/politica</link> <description><![CDATA[Repubblica.it: articoli dalla sezione Politica]]>
</description> <language>it-IT</language> <copyright>Copyright 2012 - Gruppo Ed. l'Espresso</copyright> <pubDate>Thu, 22 Mar 2012 20:54:26 +0100</pubDate>...[lista di item: vedi prossima slide]
</channel></rss>
a.a. 2018/19 29Tecnologie Web
il feed contiene: la descrizione del canale (sezione di un sito
che pubblica notizie) Repubblica>Politica una sequenza di notizie (item) pubblicate
su quel canale
<item><title><![CDATA[Articolo 18...]]>
</title><author>
Aggregare contenuti: RSS - VII
ogni notizia è racchiusa fra i tag <item> e <item>
<![CDATA[[email protected] (Redaz. Repubblica.it)]]></author><category domain="http://www.repubblica.it"><![CDATA[politica]]>
</category><pubDate>Thu, 22 Mar 2012 09:35:00 +0100</pubDate><description>Domani la riforma arriva al Cdm; il governo si impegna "a evitare abusi", ma esclude passi indietro...
</description></description></item><item>...</item>...
a.a. 2018/19 30Tecnologie Web
E' un esempio di markup "semantico": i tag caratterizzano il "contenuto", specificando il "significato" delle varie porzioni di informazione
16
Un formato alternativo per i feed, più recente di RSS, èAtom
• Atom Syndication Format = formato (linguaggio di
Aggregare contenuti: Atom - I
markup) standard, basato su XML, utilizzato per la distribuzione di contenuti sul Web (Atom feed)
• W3C Feed Validation Service: servizio online gratuito del W3C che controlla la validità (sintattica) di feed RSS e Atom: validator.w3.org/feed
• Un articolo: www html it/articoli/rss-vs-atom-1/Un articolo: www.html.it/articoli/rss vs atom 1/
a.a. 2018/19 31Tecnologie Web
Esempio (un frammento di Atom feed – da Wikipedia):<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom">
<title>Feed di esempio</title><subtitle>Testo del sotto-titolo qui</subtitle>
Aggregare contenuti: Atom - II
<subtitle>Testo del sotto titolo qui</subtitle><link href="http://example.org/"/><updated>2003-12-13T18:30:02Z</updated><author>
<name>jonny doe</name><email>[email protected]</email>
</author><id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id><entry>
<title>I robots Atom usano Amok</title><link href="http://example.org/2003/12/13/atom03"/><id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id><updated>2003-12-13T18:30:02Z</updated><summary>Testo del sommario.</summary>
</entry></feed>
a.a. 2018/19 32Tecnologie Web
17
Suggerimenti bibliografici - II
• Innanzi tutto i link segnalati nelle slide !!!
• V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione Web Lato Server (seconda edizione aggiornata), Apogeo, 2011Disponibile e-book (PDF) nella collana Apogeo Spicchi: è
possibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.1 e 6.2
a.a. 2018/19 Tecnologie Web 33
Aggregare servizi: mashup - I
Aggregare servizi Mashup ("rimescolamento") = applicazioni web che riutilizzano funzionalità offerte in rete da altri per creare servizi nuovi
MashupMashup [https://it.wikipedia.org/wiki/Mash-up_(informatica)]:
In informatica un mash-up è un sito o un'applicazione web di tipo ibrido, cioè tale da includere dinamicamente informazioni o contenuti provenienti da più fonti. Un esempio potrebbe essere un programma che, acquisendo da un sito web una lista di appartamenti, ne mostra l'ubicazione utilizzando il servizio Google Maps per evidenziare il luogo in cui gli stessi appartamenti sono localizzati.
a.a. 2018/19 Tecnologie Web
Mash-up (letteralmente: "poltiglia"), in termini informatici, indica un'applicazione che usa contenuti [e servizi!] da più sorgenti per creare un servizio completamente nuovo. Il contenuto dei mash-up è normalmente preso da terzi via API, tramite feed (es. RSS e Atom) o JavaScript.
34
18
Aggregare servizi: mashup - II
servizio di mappe
previsioni del tempo
tassi di cambio valute
condivi-sione di foto
calen-dario
...
Mashup: frontend (User Interface)
mappetempo valute foto
bla blabla blabla
a.a. 2018/19 Tecnologie Web
bla, blabla, blabla, bla, bla, bla, bla, bla, bla, bla bla, bla bla bla bla bla bla, blabla, blabla, blablabla, bla, bla.
35
Aggregare servizi: mashup - III
API or WS (servizio di mappe)
API or WS (previsioni del tempo)
API or WS (tassi di cambio)
API or WS (condivisio-ne foto)
API or WS (calendario)
Mashup: backend ("dietro le quinte")
mappe)del tempo) cambio) ne foto)
...
<script type="text/javascript">var map = new GMap2(document.getElementById("map"));map.setCenter(new GLatLng(45.069,7.688), 14);map.addControl(new GSmallMapControl());map.addControl(new GMapTypeControl());map.addControl(new GScaleControl());
invocazioni di funzioni remote
a.a. 2018/19 Tecnologie Web
var iconUt = new GIcon();iconUt.image = "http://labs.google.com/.../mm_20_green.png";iconUt.shadow = "http://labs.google.com/.../mm_20_shadow.png";iconUt.iconSize = new GSize(12,20);iconUt.shadowSize = new GSize(22,20);iconUt.iconAnchor = new GPoint(6,20);iconUt.infoWindowAnchor = new GPoint(5,1);GEvent.addListener(map, 'click', function(overlay, point) {...
36
19
Aggregare servizi: mashup - IVDal punto di vista di chi offre un servizio...• realizzo un software che fa cose interessanti (es. data una
città e una data, restituisce dei dati relativi alle previsioni del tempo per quella città in quella data)
• lo metto a disposizione come servizio (in rete), accessibile in remoto da altri programmi (web app, siti, es agenzie turistiche, che vogliono dare all'utente la possibilità di scegliere città e data e mostrare le previsioni)
Per farvi un'idea dei servizi disponibili...www programmableweb com/
a.a. 2018/19 Tecnologie Web
www.programmableweb.com/apis/directory
37
Aggregare servizi: mashup - V
La definizione delle modalità di invocazione dei servizi (delle funzioni remote) può seguire approcci diversi, più o meno standardizzati:
1 O API meno formale (meno standard)1. Open API
2. servizi RESTful
3. SOAP Web Services
Servizio = applicazione (web) progettata per essere accessibile attraverso una User Interface oppure da un'altra applicazione (attraverso protocolli standard) che ne utilizza
meno formale (meno standard)
più formale (più standard)
a.a. 2018/19 Tecnologie Web
applicazione (attraverso protocolli standard) che ne utilizza le funzionalità
Vediamo di cosa si tratta...
38
20
Aggregare servizi: Open API - I
Open API• API = Application Programming Interface (Interfaccia di
Programmazione di un'Applicazione) = strumento ("insieme di istruzioni") per rendere disponibili ad altri programmatori le funzionalità di un programma
• Open = "aperte", disponibili a tutti
UI (User Interface)
a.a. 2018/19 Tecnologie Web 39
web appgeocoder=new google.maps.Geocoder();var ll=new google.maps.LatLng(45,7);var myOptions = {zoom: 12,center: ll,mapTypeId: ROADMAP} ...
API (Application Programming Interface)
web app(mashup)
Aggregare servizi: Open API - IIUn'applicazione web, oltre ad avere una User Interface, può offrire delle Open API, cioè delle API disponibili sul Web (che sfruttano le tecnologie del Web, per es. i protocolli come HTTP) un programmatore può includere nel suo programma (per es. i ' l li i b) f i li à ff d l iin un'altra applicazione web) funzionalità offerte da altri programmi (applicazioni web) invocando API in remoto (cioè via Web/HTTP)
Un esempio: le Google Maps
UI (User Interface)
a.a. 2018/19 Tecnologie Web 40
GoogleMaps
API (Application Programming Interface)geocoder=new google.maps.Geocoder();var ll=new google.maps.LatLng(45,7);var myOptions = {zoom: 12,center: ll,mapTypeId: ROADMAP} ...
web app(mashup)
21
Aggregare servizi: Open API - III[da: www.programmableweb.com/api/google-maps]
Esistono Open API delle Google Maps diponibili inGoogle Maps diponibili in diversi linguaggi, tra cui Javascript; per es:nella pag. HTML:<div id="map"></div><script>map = new google.maps.Map (document.getElementById("map"),
i )
a.a. 2018/19 Tecnologie Web 41
options );</script>
invocazione della "funzione" predefinita ( GMaps API) per creare una nuova mappa
inseriscila nell'elemento del DOM con id="mappa"
variabile che contiene le proprietà della nuova mappa (es. stradale, centrata su Torino, ...)
Aggregare servizi: Open API - IV
La variabile che contiene le proprietà della nuova mappa (es. stradale, centrata su Torino, ...) è un oggetto JSON !!map = new google.maps.Map(document.getElementById("map"),
options);options = {zoom: 14,center: new google.maps.LatLng(45.06...,7.68...),mapTypeId: google.maps.MapTypeId.ROADMAP
};
a.a. 2018/19 Tecnologie Web 42
22
Esempio di mashup (applicazione web) con Google Maps:www.cyclingthealps.com
Aggregare servizi: Open API - V
a.a. 2018/19 Tecnologie Web 43
NOTA sulla differenza tra Open API e Open Source
Benché condividano la filosofia di fondo ("apertura"), sono due concetti diversi:• API = interfaccia (funzionalità)
Aggregare servizi: Open API - VI
• API = interfaccia (funzionalità)es: le Open API di Google Maps mi mettono a disposizione una funzione per centrare una mappa su un punto geografico (es. Torino):map.setCenter(point, zoom);
io posso usare ("invocare") questa funzione, ma non ho accesso al sorgente (non so come è fatta… devo fidarmi!)
• Source = il codice sorgente
a.a. 2018/19 Tecnologie Web 44
• Source il codice sorgente
Open Source: scarico il programma (codice sorgente) eposso modificarlo
Open API: non scarico nulla, ma posso solo usare("invocare") le funzioni disponibili
23
Suggerimenti bibliografici - III
• Innanzi tutto i link segnalati nelle slide !!!
• V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione Web Lato Server (seconda edizione aggiornata), Apogeo, 2011Disponibile e-book (PDF) nella collana Apogeo Spicchi: è
possibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.14
a.a. 2018/19 Tecnologie Web 45
Aggregare servizi: Web ServicesWeb Services (REST e SOAP/WSDL)[www.html.it/pag/19595/introduzione-ai-web-service/ lezione 1]
• i servzi che mettono a disposizione Open API dipendono da uno specifico linguaggio di programmazione (per es, per utilizzare GMaps API devo usare Javascript)utilizzare GMaps API, devo usare Javascript)
• idea alla base dei Web Services che utilizzano interfacce basate su REST o su SOAP/WSDL: offrire la possibilità di interagire con il servizio indipendentemente dal linguaggio di programmazione utilizzato per implementare quel servizio
possibilità di far interagire in modo "trasparente" applicazionisviluppate con linguaggi di programmazione eterogenei (e che
a.a. 2018/19
girano su piattaforme o sistemi operativi diversi)
46
ServiceConsumerService
ConsumerServiceConsumer
messaggio di richiesta
messaggio di risposta
ServiceProvider
inte
rfac
cia
(RE
ST
o
SO
AP
/W
SD
L)
Tecnologie Web
24
Aggregare servizi RESTful - I
Servizi RESTful[www.html.it/pag/19595/introduzione-ai-web-service/ lezioni 1 - 4]
• servizi la cui interfaccia di accesso (da programma) è basata sul paradigma REST (REpresentational State Transfer)paradigma REST (REpresentational State Transfer)
• REST = insieme di principi "architetturali" per la progettazione e realizzazione di interfacce di accesso ai servizi (non è né uno standard, né una tecnologia, né un linguaggio, ...)
• idea alla base del paradigma REST: il Web ha già gli strumenti sufficienti per realizzare l'idea di Web Services, basta utilizzarli in modo adeguato e non è necessario introdurre
a.a. 2018/19 Tecnologie Web
utilizzarli in modo adeguato e non è necessario introdurre nuovi protocolli o linguaggi (un po' in polemica con i servizi basati su SOAP/WSDL...??? ;-) ) interfaccia RESTful = utilizza, sostanzialmente,
URL e HTTP !!47
Aggregare servizi RESTful - II
[da: www.programmableweb.com/api/twitter]
Esempio 1Invocazione del servizio:
a.a. 2018/19 Tecnologie Web
Invocazione del servizio: https://api.twitter.com/1.1/search/tweets.json?q=%40BigData
NB: l'invocazione del servizio (search/tweets) è un URL con parametri ( metodo GET di HTTP) !!
48
25
Aggregare servizi RESTful - IIIEsempio di risultato (NB: è un oggetto JSON){ "statuses": [
{ ..."created_at": "Mon Sep 24 03:35:21 +0000 2012","id_str": "250075927172759552","entities": { ...
"hashtags": [as tags : [{ "text": "BigData, ... }
],},"in_reply_to_user_id_str": null,"contributors": null,"text": "...","metadata": {
"iso_language_code": "en","result_type": "recent"
},"retweet_count": 0,
a.a. 2018/19 Tecnologie Web
..."user": { ...
"name": "Sean Cummings","profile_image_url": "...","created_at": "Mon Apr 26 06:01:55 +0000 2010","location": "LA, CA", ...
}, ...}, ...]}
49
Aggregare servizi RESTful - IV
Esempio 2Invocazione del servizio: http://www.meteoService.it/getForecast?city=TO&date=12022017
NB: l'invocazione del servizio (getForecast) è un URL conNB: l invocazione del servizio (getForecast) è un URL con parametri ( metodo GET di HTTP) !!
Esempio di risultato (NB: è un oggetto JSON){city: Torino,date: 12022017temperature: 10,forecast: cloudy}
d i ili i i f l il h li
a.a. 2018/19 Tecnologie Web
NB Quando si utilizzano servizi RESTful, il programmatore che li utilizza dovrà consultare la documentazione per vedere in che modo deve essere fatta la chiamata REST (es. parametri), ma a differenza degli Open API "semplici" NON deve preoccuparsi del linguaggio di programmazione in cui è scritto il servizio
50
26
Aggregare servizi RESTful - V
Principi architetturali del paradigma REST:
1. Identificazione delle risorse: "risorsa" = qualsiasi elemento oggetto di elaborazionex es: un cliente un libro un prodotto (qualsiasi oggetto sux es: un cliente, un libro, un prodotto (qualsiasi oggetto su cui è possibile effettuare operazioni)Ogni risorsa deve essere identificata univocamente attraverso un URI[*]; x es:
http://www.myapp.com/clienti/1234http://www.myapp.com/ordini/2011/98765http://www.myapp.com/prodotti?colore=rosso
a.a. 2018/19 Tecnologie Web
[*]URI = Uniform Resource Identifier = stringa che identifica univocamente una risorsa (es. un documento, un'immagine, un servizio, ecc.); un URL è un tipo di URI.
51
Aggregare servizi RESTful - VI2. Utilizzo esplicito dei metodi HTTP:
utilizzare i metodi (le operazioni) definiti nel protocollo HTTP per interagire con il servizio: GET, POST, PUT, DELETE
x es: quando inseriamo un URL (URI) nella barra degli indirizzi chiediamo al browser di inviare una HTTP request con indicati
a.a. 2018/19 Tecnologie Web
(tra le altre cose) una risorsa e un metodo, GET l'effetto dell'esecuzione di GET è l'accesso alla risorsa identificata questo rende uniforme l'invocazione di operazioni sulle risorse (il client non ha bisogno di conoscere gli API, es: getCustomer())
52
27
Aggregare servizi RESTful - VII3. Risorse autodescrittive:
il formato dei dati che il servizio invierà al programma "chiamante" (client) è indicato nella HTTP response stessa (MIME type[*]); x es: HTML, XML, JSON
[*]MIME type = Internet Media type = standard per identificare il formato dei dati contenuti in un filex es, è usato dai client di posta elettronica per indicare il formato degli allegati, dai browser per determinare come visualizzare il contenuto della HTTP response (body)Un Internet Media type è composto da un tipo, un sotto-tipo, d i i i li fil HTML il MIME
a.a. 2018/19 Tecnologie Web
dei parametri opzionali; x es, per un file HTML, il MIME type può essere text/html; charset=UTF-8 e cioè:
– tipo: text– sotto-tipo: html– parametro: charset=UTF-8
53
Aggregare servizi RESTful - VIII4. Collegamenti tra risorse:
tutto quello che un client deve sapere su una risorsa, e sulle risorse ad essa correlate, deve essere contenuto nella risposta stessa (HTTP response) o accessibile tramite link (in questo modo il client può accedere alle risorse correlate seguendo imodo il client può accedere alle risorse correlate seguendo i link) – principio "facilitato" dal principio 1...x es:<ordine><numero>12345678</numero><data>01/07/2011</data><cliente rif="http://www.myapp.com/clienti/1234" /><articoli>
a.a. 2018/19 Tecnologie Web
<articolo rif="http://www.myapp.com/prodotti/98765" /><articolo rif="http://www.myapp.com/prodotti/43210" /></articoli></ordine>
54
28
Aggregare servizi RESTful - IX
5. Comunicazione senza stato (stateless):il principio della comunicazione stateless (= una richiesta non ha alcuna relazione con le richieste precedenti né con quelle successive) è una delle caratteristiche principali delquelle successive) è una delle caratteristiche principali del protocollo HTTP [slide 01_InternetWeb_parteI.pptx] lo stesso principio vale per la comunicazione con servizi RESTful
NB comunicazione stateless non significa che un'applicazione non possa mantenere informazioni sullo stato, ma solo che la responsabilità della gestione dello stato
a.a. 2018/19 Tecnologie Web
, p gnon deve essere demandata al server (ma rientra nei compiti del client)
55
Aggregare servizi SOAP/WSDL - I
Web Services basati su SOAP/WSDL[www.html.it/guide/guida-web-service/ lezioni 2 – 5 + 9 + 13]• servizi la cui interfaccia di accesso è definita in WSDL• per comunicare con un Web Service si utilizza il protocollo di
i i SOAPcomunicazione SOAP
WSDL (Web Services Description Language)• linguaggio di mark-up basato su XML• definisce l'interfaccia del servizio (dice cosa fa il servizio, di
quali dati ha bisogno, ...)• è una W3C Recommendation: www.w3.org/standards/techs/wsdl
a.a. 2018/19 Tecnologie Web
NB Il programmatore che utilizza un Web Service dovrà consultare la documentazione (le specifiche WSDL) per vedere com'è definito l'accesso al servizio (quali operations, quali input/output, ecc.), ma NON deve preoccuparsi del linguaggio di programmazione in cui è scritto il servizio
56
29
Aggregare servizi SOAP/WSDL - II
Esempio di interfaccia diaccesso ad un Web Service definita in WSDL
definitionselement
typeselement
<?xml version="1.0"?><definitions name="StockQuote"
targetNamespace="http://example.com/stockquote.wsdl"xmlns:tns="http://example.com/stockquote.wsdl"xmlns:xsd1="http://example.com/stockquote.xsd"xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"xmlns="http://schemas.xmlsoap.org/wsdl/">
<types><schema targetNamespace="http://example.com/stockquote.xsd"
xmlns="http://www.w3.org/2000/10/XMLSchema"><element name="TradePriceRequest">
<complexType><all>
<message>elements
<portType>l t
messageelement
portTypeelement
bindingelement
<element name="tickerSymbol" type="string"/></all>
</complexType></element>
</schema>
</types><message name="GetLastTradePriceInput">
<part name="body" element="xsd1:TradePriceRequest"/>
</message><portType name="StockQuotePortType">
<operation name="GetLastTradePrice"><input message="tns:GetLastTradePriceInput"/><output message="tns:GetLastTradePriceOutput"/>
</operation>
</portType><binding name="StockQuoteSoapBinding">
<soap:binding style="document" transport="http://schemas.xmlsoap.org/soap/http"/>
<operation name="GetLastTradePrice"><soap:operation soapAction="http://example.com/GetLastTradePrice"/>
<input>operation
a.a. 2018/19 Tecnologie Web 57
element
serviceelement
<input><soap:body use="literal"/>
</input><output>
<soap:body use="literal"/></output>
</operation></binding><service name="StockQuoteService">
<documentation>My first service</documentation>
<port name="StockQuotePort" binding="tns:StockQuoteBinding">
<soap:address location="http://example.com/stockquote"/>
</port></service>
</definitions>
operationelement
portelement
Aggregare servizi SOAP/WSDL - III
SOAP (Simple Object Access Protocol)• protocollo di comunicazione basato su XML• definisce la comunicazione tra Service Consumer ("client") e
Service Provider ("server")Service Provider ( server )• "si appoggia" (sfrutta) il protocollo HTTP (non lo sostituisce
HTTP, ma si "aggiunge" ad esso)• è una W3C Recommendation: www.w3.org/standards/techs/soap
ServiceConsumerServicei di i hi
Service acci
a
a.a. 2018/19 Tecnologie Web 58
ConsumerServiceConsumerService
Consumer
messaggio di richiesta
messaggio di risposta
ServiceProvider
inte
rfa
30
Aggregare servizi SOAP/WSDL - IV
• formato dei messaggi SOAP (SOAP Envelope):
SOAP Headercontiene i dati opzionalicontiene i dati opzionalisull'invocazione stessa (autenticazione, pagamento, …)
SOAP Bodycontiene i dati necessari per l'invocazione del servizioe/o i risultati di ritorno
a.a. 2018/19 Tecnologie Web 59
Aggregare servizi SOAP/WSDL - V
• In pratica il programmatore che vuole utilizzare un Web Service deve implementare un SOAP client per invocare il SOAP server del servizio
• Per costruire la chiamata SOAP il programmatore può usare il p g plinguaggio di programmazione che preferisce (molto usato Java, ma possibile anche PHP, Python, ecc...); x es: ...GetForecast request = new GetForecast();request.set(city, date);GetForecastResponse response = ...http://www.meteoService.it/getForecast,request,new SoapActionCallback(...)
a.a. 2018/19 Tecnologie Web
...
NB Il servizio (il SOAP server) riceve solo la SOAP request (NON vede il linguaggio di programmazione usato per costruirla)
60
31
Aggregare servizi SOAP/WSDL - VI
Web Service Composition: backend ("dietro le quinte")
ServiceProvider Service
Provider
ServiceProvider
ServiceProvider
Service Consumer
interfacciaWSDL
(previsionidel tempo)
interfacciaWSDL
Provider(mappe)
interfacciaWSDL
(cambiovalute)
interfacciaWSDL
(calenda-rio)
interfaccia
ServiceProvider
(...)SOAP messages
Tecnologie Weba.a. 2018/19
Service Consumer...public class WSservlet extends HttpServlet {@WebServiceRef(wsdlLocation = "WEB-INF/wsdl/localhost_8080/WShello/WShello.wsdl")private WShello_Service service;...private String bigHello(java.lang.String destination, java.lang.String message) {web.WShello port = service.getWShelloPort();return port.bigHello(destination, message);}... 61
interfacciaWSDL
• Molto spesso la definizione di un'interfaccia WSDL viene utilizzata per "impacchettare" (to wrap) un'applicazione (magari scritta in un linguaggio obsoleto: legacy software) e renderla interoperabile (accessibile con protocolli standard,
Aggregare servizi SOAP/WSDL - VII
renderla interoperabile (accessibile con protocolli standard, quali SOAP)
interfaccia
Sistema legacy
ancora in uso, ma costruito con linguaggi, tecnologie, architetture obsolete
a.a. 2018/19 62Tecnologie Web
WSDL
accesso alle funzionalità del sistema (tramite SOAP)
32
Esempio:
Aggregare servizi SOAP/WSDL - VIII
[da: www.programmableweb.com/api/magento]
• Magento = CMS per e commerce (= software web based per• Magento = CMS per e-commerce (= software web-based per costruire siti web di e-commerce)
• interfaccia di accesso (operazioni disponibili): definita in WSDL• per utilizzarlo (per es. per usare le sue funzionalità all'interno di un
sito) lo si deve invocare tramite il protocollo SOAP
a.a. 2018/19 63Tecnologie Web
Suggerimenti bibliografici - IV
• Innanzi tutto i link segnalati nelle slide !!!
• V. Roberto, M. Frailis, A. Gugliotta, P. Omero, Introduzione alle Tecnologie Web, McGraw-Hill, 2005 [NB: fate " tt i " hé è ' hi tt !]"attenzione" perché è un po' vecchiotto...!]
Frammenti suggeriti:– Cap. 6 (Architetture web): sez. 6.9.1 e 6.9.2
• V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione Web Lato Server (seconda edizione aggiornata), Apogeo, 2011[www.apogeoeducation.com/9788838786938-programmazione-web-
lato-server-seconda-edizione-aggiornata.html]
a.a. 2018/19 Tecnologie Web 64
gg ]
Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.5