1. Tecniche di Mashup Gruppo Mashup Jacopo Barachetti Yeser Amer Università degli Studi Milano Bicocca Corso di Laurea Magistrale in Infomatica Corso Web 2.0 2009/2010 26 Gennaio 2010
2.
3. Letteralmente: Miscuglio, Poltiglia I Mashup sono applicazioni web che integrano dinamicamente contenuti o servizi provenienti da fonti esterne, tipicamente sfruttando API, Feed (RSS o Atom) o Javascript, per ottenere così un servizio completamente nuovo. Il termine Mashup comporta uno sviluppo delle applicazioni semplice e molto veloce favorendo il riutilizzo delle informazioni già presenti in rete.
4. Il Mashup è una pratica recente. Le prime applicazioni web sviluppate con questa tecnica hanno fatto il loro esordio nel 2005, in concomitanza dell’evento “Mashup Camp” tenutosi a Mountain View e sponsorizzato da alcune tra le più importanti aziende del settore informatico quali Adobe, AOL, Sun, Microsoft, Google e Yahoo. Tuttavia, per avere a disposizione le prime releases ufficiali dei servizi per lo sviluppo di applicazioni Mashup, come Yahoo! Pipes, Microsoft PopFly e Google Mashup Editor, si è dovuto attendere il 2007. Nel 2009 si è registrato un calo dei servizi disponibili, in quanto alcuni di essi sono stati abbandonati o integrati con altri progetti. FONTE: http://www.slideshare.net/shuliyu/innovation-in-the-programmable-web-characterizing-the-mashup-ecosystem
5.
6.
7. La seguente figura mostra l’evoluzione del livello di interesse dal 2004 ad oggi riguardo queste applicazioni.
10. In questi diagrammi a torta possiamo vedere come il mondo dei mashup sia in evoluzione. Nel primo, quello relativo alla classifica delle categorie di applicazioni più sviluppate in assoluto, notiamo che il mapping ricopre il ruolo da leader incontrastato, mentre le categorie photo , shopping , video e search si contendono la seconda posizione. Sorprendentemente, la categoria news è solo nona. Nel secondo, relativo al trend degli ultimi 14 giorni, vediamo che mapping continua a dominare, anche se fa registrare una leggera flessione del 7%. Da notare l’ascesa di 3 nuove categorie: Twitter , microblogging e charts , che confermano positivamente il fenomeno blogs. L’ultima new entry, visualization , potrebbe in realtà spiegare il piccolo calo di photo , dato che non è molto chiara la linea di demarcazione tra le due categorie.
14. Yahoo! Pipes è una applicazione web che fornisce una GUI (Graphic User Interface) per costruire Mashup, permettendo all’utente di aggregare web feeds, pagine web e altri servizi, creando così applicazione web-based da varie fonti. L’applicazione lavora permettendo agli utenti “collegare” informazioni da differenti fonti, permettendo all’utente di configurare regole per modificarne il contenuto (come, ad esempio, il filtraggio dei dati). Fu rilasciato al pubblico il 7 Febbraio 2007 e attualmente è ancora in fase Beta. L’homepage del servizio è consultabile all’indirizzo: http://pipes.yahoo.com
16. L’Homepage di Yahoo! Pipes si presenta così Elenco delle proprie Pipes realizzate Forum di discussione ufficiale Documentazione ufficiale Elenco delle Pipes pubblicate dagli utenti Accesso all’ambiente di sviluppo
17. Yahoo! Pipes: Ambiente di Sviluppo Elenco dei moduli forniti da Yahoo Pipes, divisi per categioria
18. Yahoo! Pipes: Ambiente di Sviluppo Per utilizzare un modulo è sufficente selezionarlo dal menù di sinistra e trascinarlo verso destra In questo caso, abbiamo draggato il modulo “Yahoo! Search”, mentre il modulo “Pipe Output” viene aggiunto automaticamente. Ogni modulo ha una funzione specifica. Dal loro collegamento possiamo otterremo la nostra applicazione. Nel caso i moduli di default non ci bastassero, è possibile modificarli, al fine di adattarli alle nostre esigenze..
19. Yahoo! Pipes: I Collegamenti Il DEBUGGER ci mostra in real time quale sarà l’output del modulo selezionato una volta lanciata l’esecuzione della pipe . In questo esempio, il modulo “Yahoo Search” è stato collegato al modulo “Pipe Output”, dopo aver inserito la key “ciao” nel box “Search for”. L’output è visibile nel debugger
20. I Mashup da noi realizzati sono tre: 1. “Localizza Eventi”: ricerca eventi data una o più keywords e li mostra su mappa; 2. “Aggregatore di Notizie”: ricerca di notizie da quattro diverse fonti di informazioni; 3. “Top10 Film Italia: dati i top10 film in Italia, aggrega vari contenuti. vediamoli in dettaglio..
21. Yahoo! Pipes: I nostri Mashup - 1 Ricerchiamo gli eventi legati a un’artista indicato dall’utente su eventful.com, un ricco archivio di eventi, e li geolocalizziamo attraverso Yahoo! Maps Otteniamo in output una mappa con evidenziati i luoghi dove si terranno gli eventi legati all’artista ricercato dall’utente.
22. Yahoo! Pipes: I nostri Mashup - 2 Aggreghiamo le notizie da 4 diverse fonti di informazione (Google News, Yahoo! Notizie, Ansa.it e ADNKronos ) in base all’input inserito dall’utente . Otteniamo in output un RSS aggregante tutte le notizie delle 4 fonti, selezionate in base alla keyword ricercata dall’utente. E’ stata implementata anche la geolocalizzazione delle notizie su una mappa indipendente dal RSS
23. Yahoo! Pipes: I nostri Mashup - 3 Prendiamo i 10 film che hanno incassato di più al box office grazie al RSS di Yahoo! Cinema, che, inoltre, ci fornisce la trama di ogni film. Per ogni film otteniamo l’url di riferimento alla scheda del film di IMDB.com, il più grande e completo archivio cinematografico disponibile in rete. Per ogni film, otteniamo l’url di riferimento al trailer del film su youtube.com, il più grande archivio di filmati della rete. Otteniamo in output un nuovo RSS , elencante i top 10 film al box office arricchito con, trama, link alla scheda e link al trailer
24. Il modulo Fetch Feed riceve in ingresso il feed di Yahoo! Cinema relativo ai top10 film Operiamo sulla lista dei film ottenuta dopo il fetching e andiamo a “pulire” i titoli dei film grazie al modulo Regex , sostituendo la posizione dei film con una stringa vuota..
25. Grazie ai moduli Loop e String Builder , andiamo a creare, per ogni film in ingresso, una variabile item.title2 che aggiunge la parola “Trailer” dopo il titolo del film Utilizziamo la variabile appena creata per ricercare, grazie al modulo Yahoo! Search , il trailer di ogni film sul portale Youtube, iterando la ricerca con il modulo Loop . Salviamo il primo risultato nella variabile item.loop1:ysearch
26. Grazie ai moduli Loop e String Builder , andiamo a creare, per ogni titolo di film, una variabile item.loop.strconcat che crea una stringa contenente l’url per ricercare la scheda del film su imdb.com Sfruttiamo quanto appena creato con i moduli Loop e Fetch Page , andando a trovare il link della scheda di imdb.com relativa ai film passati in ingresso, sfuttando le API di hansdezwart.info e settando opportunamente i filtri di cutting. Salviamo il link trovato, per ogni film, nella variabile item.loop3:fetchpage
27. Ora che abbiamo tutte le informazioni che cercavamo, con i moduli Loop e String Builder andiamo ad aggregarle e a salvarle nelle rispettive variabili item.description , utilizzando i tag html per definire correttamente l’output L’ultimpo passo consiste nella creazione del RSS con il modulo Create RSS , dove indichiamo i campi che vogliamo includere nel nostro feed. Fatto ciò ridirigiamo il tutto verso il modulo Pipe Output