lo scenario: web 2.0 - i - diunitogoy/materiale/1415/04_web20_partei.pdf · utilizzati attraverso...
TRANSCRIPT
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. 2014/15 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. 2014/15 Tecnologie Web 2
aggregazione di servizi (mashup) Open API,
servizi RESTful, SOAP Web Services
2
Lo scenario: Software as a Service - IPrima apriamo una brevissima parentesi su un altro paradigma che sta caratterizzando il Web e le ICT negli ultimi anni e che può essere visto come un'evoluzione nella stessa direzione del Web 2.0... Software-as-a-Service e Cloud Computing
From Wikipedia [en.wikipedia.org/wiki/Software_as_a_service]:Software as a service (SaaS...) is a software licensing and delivery model in which software is licensed on a subscription basis and is centrally hosted. It is sometimes referred to as "on-demand software". SaaS is typically accessed by users using a thin client via a web browser. SaaS has become a common delivery model for many business applications, including office & messaging software, payroll processing
ft DBMS ft t ft [ ] ll b tisoftware, DBMS software, management software, [...] collaboration, customer relationship management (CRM), [...]. SaaS has been incorporated into the strategy of all leading enterprise software companies. One of the biggest selling points for these companies is the potential to reduce IT support costs by outsourcing hardware and software maintenance and support to the SaaS provider.
a.a. 2014/15 3Tecnologie Web
Lo scenario: Software as a Service - IIThe term "software as a service" (SaaS) is considered to be part of the nomenclature of cloud computing, along with infrastructure as a service (IaaS), platform as a service (PaaS) […].
Collaborative (and "social") functionalityInspired by the success of online social networks and other so called webInspired by the success of online social networks and other so-called web 2.0 functionality, many SaaS applications offer features that let its users collaborate and share information.For example, many project management applications delivered in the SaaS model offer [...] collaboration features letting users comment on tasks and plans and share documents within and outside an organization. Several other SaaS applications let users vote on and offer new feature ideas.Whil ll b ti l t d f ti lit i l i t t d i tWhile some collaboration-related functionality is also integrated into on-premises software, (implicit or explicit) collaboration between users or different customers is only possible with centrally hosted software.
a.a. 2014/15 4Tecnologie Web
3
Lo scenario: Cloud Computing e SaaS - ICloud computing = i dati e i programmi non risiedono sul computer dell'utente, ma "nella nuvola" ("in the cloud") e l'utente vi accede e
interagisce attraverso un Web browser (o una app da g ( ppsmartphone e tablet)
• La "nuvola" ("cloud") è un insieme di server e infrastrutture che garantiscono la gestione dei dati e il funzionamento dei programmi, in modo totalmente trasparente per l'utente
• I programmi messi a disposizione come cloud services( i i di ibili " ll l ") di f
a.a. 2014/15 Tecnologie Web 5
(servizi disponibili "nella nuvola") sono di fatto applicazioni web, cioè programmi basati sulle tecnologie Web (HTTP, HTML/CSS, PHP, Javascript, AJAX, ecc...)
NB di Cloud Computing si parlerà (forse) nel lab Nuove tendenze dell'ICT!
Cloud computing tipicamente suddiviso in tre livelli:
• Infrastructure as a Service (IaaS): il provider offre l'infrastruttura computazionale (server, data-center, risorse di rete ) come servizio accessibile via Internet/Web (es:
Lo scenario: Cloud Computing e SaaS - II
di rete, …) come servizio accessibile via Internet/Web (es: Amazon Amazon Elastic Compute Cloud: http://aws.amazon.com/ec2)
• Platform as a Service (PaaS): il provider offre una piattaforma computazionale (ambiente di sviluppo per applicazioni "cloud") come servizio accessibile via Internet/Web (es: the Google Apps Engine:
a.a. 2014/15 Tecnologie Web 6
http://code.google.com/appengine)
• Software as a Service (SaaS): il provider offre programmi(applicazioni) come servizi accessibili via Internet/Web(e.g., GoogleDrive: http://drive.google.com)
4
Le tecnologie: AJAX - I
• AJAX permette di rendere la user experience esperita nell'interazione con le applicazioni web simile a quella esperita nell'interazione con applicazioni "desktop" (stand-alone) [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 client side
a.a. 2014/15 Tecnologie Web 7
– XMLHttpRequest client-side– Programmi (o script) server-side (PHP, Servlet, ...)
AJAX è una nuova etichetta per riassumere l'utilizzo congiunto di tecnologie preesistenti
Le tecnologie: AJAX - II
Applicazioni Web tradizionali (con tecnologie server-side): • per ogni interazione con l'utente (per es. click sul pulsante di
invio di un modulo) inviano al server una richiesta (HTTP request) per una nuova pagina
• la risposta del server (HTTP response) contiene l'intera nuova pagina, anche se la risposta vera e propria riguarda solo una piccola parte della nuova pagina
• ciò comporta uno spreco di banda e un'interfaccia utente molto più lenta di quanto potrebbe essere
Applicazioni AJAX:• sono in grado di inviare al Web Server richieste asincrone
a.a. 2014/15 Tecnologie Web 8
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)
5
Le tecnologie: AJAX - III(a)
(b)
a.a. 2014/15 Tecnologie Web 9
Le tecnologie: AJAX - IVPer 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. 2014/15 Tecnologie Web 10
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)
6
Le tecnologie: AJAX - V
ServerB
HTTP request(pag.html)
HTTP response(pag.html)
Browser
HTML + AJAX(Javascript con
XMLHttpRequest)elaborazione
(interpretazione del codice Javascript)
"richiesta"[*](rif. risorsa server-side)
XML
HTTPrequest
HTTPresponse
HTTP Client
a.a. 2014/15 Tecnologie Web 11
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)
Le tecnologie: 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 invia una HTTP request "speciale" (con l'indicazione di una risorsa server-side, es. PHP) attraverso l'oggetto XMLHttpRequest
• sul server, un programma (o uno script) server-side elabora la risposta e la invia all'oggetto XMLHttpRequest, da cui lo script client-side la preleva e modifica di conseguenza una
a.a. 2014/15 Tecnologie Web 12
script client-side la preleva e modifica di conseguenza una parte di pagina (mediante il DOM)
7
Le tecnologie: AJAX - VII
in altre parole, è l'oggetto XMLHttpRequest che – riceve la richiesta asincrona e parziale dal client
i l'i i ( / ) il W b S– gestisce l'interazione (request/response) con il Web Server, cioè fa da Client HTTP nei confronti del Web Server
– fornisce al Browser la risposta del Web Server
NB: 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
a.a. 2014/15 Tecnologie Web 13
) g gserver side
Le tecnologie: AJAX - VIII
IndirizzoCittà
Esempio 1:
l'utente digita città, via e numero…
ViaCAP
IndirizzoCittàViaCAP
TorinoPianezza
n.
n. 5
a.a. 2014/15 Tecnologie Web 14
IndirizzoCittàViaCAP
TorinoPianezza10149
il sistema scrive automaticamente il CAPn. 5
8
Le tecnologie: AJAX - IX
In un'applicazione Web tradizionale (PHP, Servlet, ...):• impossibile
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. 2014/15 Tecnologie Web 15
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)
Le tecnologie: AJAX - XEsempio 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. 2014/15 Tecnologie Web 16
scidecom.orgInserimento risorse
argomentoesame
informatica
informatica generaleprogrammazione webweb designinformatica applicata: basi di datiinformatica applicata: reti
il sistema popola il secondo menu
9
Le tecnologie: AJAX - XI
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. 2014/15 Tecnologie Web 17
p p(<SELECT>)
• viene effettuata una connessione asincrona con il server; la pagina non viene ricaricata (reinviata dal Web Server nell'HTTP response)
Le tecnologie: AJAX - XII
clickEsempio 3:
a.a. 2014/15 Tecnologie Web 18
10
Le tecnologie: AJAX - XIIIIn 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. 2014/15 Tecnologie Web 19
• 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)
Le tecnologie: jQuery - IjQuery (jquery.com) è una libreria Javascript che• "nasconde" la complessità dell'interazione diretta con il
DOM e con XMLHttpRequest (AJAX)• permette di sviluppare applicazioni (script client-side)permette di sviluppare applicazioni (script client side)
cross-browser[www.html.it/pag/18382/introduzione63/]
In particolare, con jQuery è possibile:• interagire con il DOM, selezionando e manipolando
elementi definiti dall'HTML o dal CSS• inviare richieste (e ricevere risposte) asincrone e parziali
a.a. 2014/15 Tecnologie Web 20
• inviare richieste (e ricevere risposte) asincrone e parziali (d)al Web Server, secondo il modello AJAX
sostanzialmente è un modo di scrivere script (client-side) e interazioni AJAX (per la parte client-side) utilizzando un "linguaggio" più potente e compatto rispetto a Javascript
11
Le tecnologie: jQuery - II
Per es: al click su qualunque link presente nella pagina, fai comparire una finestrella di benvenuto
$("a").click(function() {alert("Benvenuto!"); });alert( Benvenuto! ); });
jQuery viene tipicamente utilizzata per: migliorare l'aspetto e il comportamento delle pagine Web
(funzionalità di interazione con il DOM)
"selettore"
a.a. 2014/15 Tecnologie Web 21
(funzionalità di interazione con il DOM) gestire interazioni asincrone e parziali tra client e server
(funzionalità AJAX)
Suggerimenti bibliografici - I(oltre ai 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 capitolipossibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.9
Goy - a.a. 2014/2015 Tecnologie Web 22
12
Aggregare contenuti, un esempio
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 e Atom - 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
• RSS definisce la struttura di una "notizia" (contenuto informativo), articolandola in vari campi (es. autore, titolo, categoria, data di pubblicazione, ...)
a.a. 2014/15 23Tecnologie Web
• un sito può pubblicare i propri contenuti in formato RSS e altri siti/applicazioni possono leggerli automaticamente
• la pubblicazione di contenuti in formato RSS su Web si hi RSS f d ("fl " RSS)
Aggregare contenuti: RSS e Atom - II
chiama RSS feed ("flusso" RSS)• un RSS feed può essere letto
– da un RSS reader o feed reader: applicazioni client alle quali vengono fornite le indicazioni su quali feed "scaricare" e che periodicamente scaricano tali feed (anche da fonti diverse) e li visualizzano
siti Web che aggregano notizie scaricate da altri siti che– siti Web che aggregano notizie scaricate da altri siti che pubblicano feed e le visualizzano (eventualmente riorganizzandone il contenuto) casi di aggregazione/mashup di contenuti
a.a. 2014/15 24Tecnologie Web
13
Esempio di feed reader
Aggregare contenuti: RSS e Atom - III
NB: Diverse sorgenti di informazione (ANSA.it, Repubblica>Politica, Repubblica>Scienze, Torino Cultura-Musica-oggi)
a.a. 2014/15 25Tecnologie 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 e Atom - IV
a.a. 2014/15 26Tecnologie Web
14
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 e Atom - V
<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. 2014/15 27Tecnologie 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 e Atom - VI
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. 2014/15 28Tecnologie Web
E' un esempio di markup "semantico": i tag caratterizzano il "contenuto", specificando il "significato" delle varie porzioni di informazione
15
Un formato alternativo per i feed, più recente di RSS, èAtom
• Atom Syndication Format = formato (linguaggio di
Aggregare contenuti: RSS e Atom - VII
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. 2014/15 29Tecnologie 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: RSS e Atom - VIII
<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. 2014/15 30Tecnologie Web
16
Suggerimenti bibliografici - II(oltre ai 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 capitolipossibile 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
Goy - a.a. 2014/2015 Tecnologie Web 31
Aggregare servizi: Open API e mashup - I
Aggregare servizi Mashup ("rimescolamento") = applicazioni web che riutilizzano funzionalità offerte in rete da altri per creare servizi nuovi
MashupMashup [http://en.wikipedia.org/wiki/Mashup_%28web_application_hybrid%29]:
A mashup, in web development, is a web page, or web application, that uses content from more than one source to create a single new service displayed in a single graphical interface. [...] The term implies easy, fast integration, frequently using open application programming interfaces (open API) and data sources to produce enriched results that were not necessarily the original reason for producing
a.a. 2014/15 Tecnologie Web
the raw source data. In the past years, more and more Web applications have published APIs that enable software developers to easily integrate data and functions [...], instead of building them by themselves. Mashups can be considered to have an active role in the evolution of social software and Web 2.0.
32
17
Aggregare servizi: Open API e mashup - IIPrincipale strumento per aggregare servizi: Open API
• API = Application Programming Interface (Interfaccia di Programmazione di un'Applicazione) = strumento per rendere disponibile ad altri programmatori le funzionalità didi un programma
• Open = "aperte", disponibili a tutti
UI (User Interface)
a.a. 2014/15 Tecnologie Web 33
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 e mashup - III
Una 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. in un'altra applicazione web) funzionalità offerte da altri programmi (applicazioni web) invocando API in remoto (cioè via Web/HTTP)
a.a. 2014/15 Tecnologie Web 34
18
Aggregare servizi: Open API e mashup - IV
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. 2014/15 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: Open API e mashup - V
Open API (servizio di mappe)
Open API (previsioni del tempo)
Open API (tassi di cambio
Open API (condivi-sione di
Open API (calen-dario)
Mashup: backend ("dietro le quinte")
di mappe)del tempo) cambio valute)
sione di foto)
dario)
...
<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. 2014/15 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: Open API e mashup - VI
Un esempio: le Google Maps
UI (User Interface)
• Esistrono Open API delle Google Maps diponibili in diversi
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)
a.a. 2014/15 Tecnologie Web 37
Esistrono Open API delle Google Maps diponibili in diversi linguaggi, tra cui Javascript; x es:map = new google.maps.Map(document.getElementById("map"),
options);crea una nuova mappa mettila nella pag. HTML
(nell'elem. "map") con queste caratteristiche (es. stradale, centrata su TO)
Esempio di mashup (applicazione web) con Google Maps:www.cyclingthealps.com
Aggregare servizi: Open API e mashup - VII
a.a. 2014/15 Tecnologie Web 38
20
Aggregare servizi: Open API e mashup - VIIIPer farvi un'idea...
www.programmableweb.com/apis/directory
a.a. 2014/15 Tecnologie Web 39
NOTA sulla differenza tra Open API e Open Source
Benché condividano la filosofia di fondo ("apertura"), sono due concetti diversi:• API = interfaccia (funzionalità)
Le tecnologie: Open API e mashup - IX
• 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. 2014/15 Tecnologie Web 40
• 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
21
Suggerimenti bibliografici - III(oltre ai 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 capitolipossibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.14
Goy - a.a. 2014/2015 Tecnologie Web 41
Aggregare servizi: servizi RESTful - I
In alternativa alle Open API, è possibile offrire dei "servizi": RESTful (basati sul paradigma REST)(1), oppure basati sul protocollo SOAP (Web Services)(2)
"servizio" = sistema software progettato per supportareservizio sistema software progettato per supportare l'interazione tra applicazioni, utilizzando le tecnologie e gli standard Web possibilità di far interagire in maniera trasparente applicazioni sviluppate con tecnologie eterogenee (es. linguaggi di programmazione diversi, sistemi operativi diversi)
(1)Paradigma REST (REpresentational State Transfer)
a.a. 2014/15 Tecnologie Web
[www.html.it/pag/19595/introduzione-ai-web-service/ lezioni 1 - 4]REST = insieme di principi "architetturali" per la progettazione servizi (non è né uno standard, né una tecnologia, né un linguaggio, ...):
42
22
Aggregare servizi: servizi RESTful - II
1. Identificazione delle risorse: "risorsa" = qualsiasi elemento oggetto di elaborazionex 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
[*]URI = Uniform Resource Identifier = stringa che
a.a. 2014/15 Tecnologie Web
f f gidentifica univocamente una risorsa (es. un documento, un'immagine, un servizio, ecc.); un URL è un tipo di URI.
43
Aggregare servizi: servizi RESTful - III2. 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. 2014/15 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())
44
23
Aggregare servizi: servizi RESTful - IV3. Risorse autodescrittive:
il formato dei dati che il servizio invierà al browser è 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. 2014/15 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
45
Aggregare servizi: servizi RESTful - V[**]JSON (JavaScript Object Notation)www.json.orgwww.html.it/articoli/introduzione-a-json-1/
• è un formato testuale molto usato per lo scambio di dati in applicazioni client-server, basato su Javascript (anche se è pp , p (indipendente dal linguaggio di programmazione)
• è basato su due strutture:– insiemi di coppie nome-valore – liste ordinate di valori
• Esempio: JSON è utilizzato nelle API di Google Maps, x es per creare una mappa:
a.a. 2014/15 Tecnologie Web
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
};46
JSON "object"
24
Aggregare servizi: servizi RESTful - VI4. Collegamenti tra risorse:
le risorse devono esseremesse in relazione tramite hyperlink tutto quello che un client deve sapere su una risorsa e sulle risorse ad essa correlate deve essere indicato, tramite link, nella risposta stessa (HTTP response)risposta stessa (HTTP response)x es:<ordine><numero>12345678</numero><data>01/07/2011</data><cliente rif="http://www.myapp.com/clienti/1234" /><articoli><articolo rif="http://www.myapp.com/prodotti/98765" />
// / / /
a.a. 2014/15 Tecnologie Web
<articolo rif="http://www.myapp.com/prodotti/43210" /></articoli></ordine>
47
Aggregare servizi: servizi RESTful - VII
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 35 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. 2014/15 Tecnologie Web
, p gnon deve essere demandata al Server, ma rientra nei compiti del Client.
48
25
Aggregare servizi: Web Service SOAP - I(2)Web Services basati sul protocollo SOAP
[www.html.it/guide/guida-web-service/ lezioni 2 – 5 + 13]
Web Service (WS) = applicazione software (identificata da un URI) in cui l'interfaccia (API) è definita in un linguaggio basato su
XML[*]
il protocollo di comunicazione attraverso cui è possibile inviare e ricevere messaggi (al/dal servizio) è basato su XML
tale protocollo "si appoggia" (sfrutta) il protocollo HTTP (quindi il Web)
a.a. 2014/15 Tecnologie Web
[*] XML = eXtensible Markup Language = formato standard, definito dal W3C (www.w3.org) utilizzato per la rappresentazione di dati e di contenuti strutturati; è un meta-linguaggio, consente cioè la definizione di nuovi linguaggi di mark-up [www.html.it/pag/16214/introduzione26/]
49
Aggregare servizi: Web Service SOAP - II
ServiceConsumerService
ConsumerServicemessaggio di richiesta
ServiceProvider er
facc
ia
Obiettivo: integrazione (composizione) di applicazioni remote (servizi distribuiti sul Web) in un'unica applicazione
sono un esempio di mashup (che però si chiama
ServiceConsumermessaggio di risposta
ov de
inte
sono un esempio di mashup (che però si chiama "composizione"...), in cui gli API sono basati su particolari standard (linguaggi XML)
a.a. 2013/14 50Tecnologie Web
26
Aggregare servizi: Web Service SOAP - III
WS Composition: backend ("dietro le quinte")
ServiceProvider Service
Provider
ServiceProvider
ServiceProvider
Service Consumerinvocazioni
interfaccia
(previsionidel tempo)
interfaccia
Provider(mappe)
interfaccia
(cambiovalute)
interfaccia
(calenda-rio)
i t f i
ServiceProvider
(...)
Tecnologie Weba.a. 2013/14
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);}...
voca odi servizi remoti
51
interfaccia
Per fare questa integrazione ho bisogno di:1. un linguaggio per definire le interfacce (API) dei
Service Provider2 t ll di i i ( i i i
Aggregare servizi: Web Service SOAP - IV
2. un protocollo di comunicazione (per inviare e ricevere messaggi tra Service Provider e Service Consumer)
Inoltre...3. (eventualmente) un meccanismo per trovare i Web
Service disponibili su Web4. un modello che mi "aiuti" nell'integrazione
( i i ) di i i ti(composizione) di servizi remoti
a.a. 2013/14 52Tecnologie Web
27
1. WSDL (Web Services Description Language): linguaggio di definizione delle interfacce dei Web Services (dice cosa fa il servizio, di quali dati ha bisogno, ...) – W3C Recommendation: www.w3.org/standards/techs/wsdl
2 SOAP (Simple Object Access Protocol): protocollo di invocazione
Aggregare servizi: Web Service SOAP - V
2. SOAP (Simple Object Access Protocol): protocollo di invocazione di un Web Service, in pratica lo standard di comunicazione tra Service Consumer e Service Provider – W3C Recommendation: www.w3.org/standards/techs/soap
3. UDDI (Universal Description, Discovery and Integration): protocollo per ricercare i Web Services, una sorta di "elenco telefonico" o "pagine gialle" dei Web Services – standard promosso dal consor io OASIS (https://www oasis open org/)promosso dal consorzio OASIS (https://www.oasis-open.org/)
4. BPEL (Business Process Execution Language for Web Services): linguaggio per la specifica di processi che utilizzano più Web Services (composizione di servizi) – standard promosso dal consorzio OASIS (https://www.oasis-open.org/)
a.a. 2013/14 53Tecnologie Web
• 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: Web Service SOAP - VI
renderla interoperabile (accessibile con protocolli standard, quali SOAP)
interfaccia
Sistema legacy
ancora in uso, ma costruito con linguaggi, tecnologie, architetture obsolete
a.a. 2013/14 54Tecnologie Web
WSDL
accesso alle funzionalità del sistema (tramite SOAP)
28
SOAP:
• è un linguaggio basato su XML (che definisce un protocollo di comunicazione)
Aggregare servizi: Web Service SOAP - VII
protocollo di comunicazione)
• formato dei messaggi SOAP (SOAP Envelope):
SOAP Headercontiene i dati opzionalisull'invocazione stessa (autenticazione, pagamento, …)( , p g , )
SOAP Bodycontiene i dati necessari per l'invocazione del servizioe/o i risultati di ritorno
a.a. 2013/14 55Tecnologie Web
Suggerimenti bibliografici - IV(oltre ai link segnalati nelle slide...)
• V. Roberto, M. Frailis, A. Gugliotta, P. Omero, Introduzione alle Tecnologie Web, McGraw-Hill, 2005 [NB: fate "attenzione" perché è un po' vecchiotto...!]
Frammenti suggeriti:gg– 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, 2011Disponibile e-book (PDF) nella collana Apogeo Spicchi: è
possibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] F ti iti
Goy - a.a. 2014/2015 Tecnologie Web 56
Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.5