lo scenario: web 2.0 - i - di.unito.itgoy/materiale/1819/06_web20_partei.pdf · 1 lo scenario: web...

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


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)


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


– 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


• 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)


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


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


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


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


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


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


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:


<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


argomento. . . . . .

argomento. . . . . .

psicologiasemioticasociologiaaltro

inizialmente vuoto...

informatica l'utente seleziona un argomento...



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


p p(<SELECT>)


AJAX - XIII

clickEsempio 3:


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


• 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


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


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>


<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/]


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


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


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)


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");


$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)


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


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>


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>...


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/


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>


17

Suggerimenti bibliografici - II



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


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.


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


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


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/


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)


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)


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)


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 )


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

};


22

Esempio di mashup (applicazione web) con Google Maps:www.cyclingthealps.com

Aggregare servizi: Open API - V


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


• 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



possibile acquistare singoli capitoli [www.apogeonline.com/libri/9788850314799/scheda] Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.14


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


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:


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,


..."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


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


[*]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


(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


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>


<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


, 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


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


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


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


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(...)


...

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


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


Suggerimenti bibliografici - IV


• 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]


gg ]

Frammenti suggeriti:– Cap. 6 (Tecnologie per il Web 2.0): sez. 6.5

lo scenario: web 2.0 - i - di.unito.itgoy/materiale/1819/06_web20_partei.pdf · 1 lo scenario: web...

Documents