Mashlight is a lightweight framework for everyone. My work added new features in it. Some of them: lightweight Reuse/Portability/Creation of Mashup.

1. POLITECNICO DI MILANO
MASHLIGHT:
un framework lightweight per mashup.
Estensioni ed innovazioni.
Relatore: Prof. Luciano BARESI
Correlatore: Prof. Sam GUINEA
Candidato: Giuseppe De Cicco
Laurea Magistrale in Ingegneria Informatica

2. Il concetto di Mashup 1
‣ Web 2.0
- Usabilità, Partecipazione, Design...
- JavaScript, Ajax, Xml, Php, Soap, Rest ...
‣ Mashup
- Sofware as a Service (SaaS)
✓ Semplicità, Standardizzazione, Accessibilità
✓ Widget (black box)
- Riuso e integrazione di componenti
- Creazione di applicazioni “Goal-oriented”
✓ L’utente come “autore” della composizione
Giuseppe De Cicco POLITECNICO DI MILANO

3. MASHLIGHT 2
Tipo Lato server
Consumer
utente Logic
Mashup
Sviluppatore
Utente
esperto
Mashlight
Utente
inesperto Lato server
Lato client Ambiente di
Presentation Data Logic esecuzione
Complessità
Funzionalità
• Principali caratteristiche:
- Tecnologie Web 2.0, Flessibilità, Usabilità
- Lightweight (ambiente Desktop, iPhone, Android)
- No Application-Server
- Approccio “process-like”
- Standardizzazione dei servizi in blocchi
Giuseppe De Cicco POLITECNICO DI MILANO

4. Modello concettuale 3
• Il Blocco (o widget):
- unità funzionale indipendente (Block Manifest XML)
- Servizio Web standardizzato (gestione dei parametri di input/
output, scambio di informazioni tra widget)
Cinema
coordinates
• Il SuperBlocco :
- Contenitore di blocchi(esecuzione parallela di Widget)
- Trasparenza (definito a livello di processo)
- Flusso dati (no flusso di processo)
Giuseppe De Cicco POLITECNICO DI MILANO

5. Modello concettuale 4
• Il MASHUP (Process Manifest JS)
- Flusso di processo: stabilisce l’ordine di attivazione dei blocchi
- Flusso dati: definisce le dipendenze dati
- Flussi di esecuzione: possibile ordine di esecuzione dei bocchi
• Funzioni di processo
- Scambio dati con formato ad-hoc
- Assegnamenti con cardinalità singola o multipla
- Operazione di UNDO risalendo il flusso di esecuzione
Giuseppe De Cicco POLITECNICO DI MILANO

6. Architettura 5
Giuseppe De Cicco POLITECNICO DI MILANO

7. Stato dell’arte 6
• Cosa permette di fare Mashlight ?
- Eseguire Mashup predefiniti in ambiente desktop e mobile
- Mashlight Widget Builder: standardizzare un servizo attraverso
un plugin Eclipse
- Mashlight Process Builder: creare un mashup utilizzando un
applicativo da installare su client.
• Quali sono alcuni dei concetti non presenti nel framework?
- Non si rivolge a tutto il bacino di utenza per cui è stato pensato
- La creazione di Mashup non è lightweight
- Non possono essere eseguiti in ambiente desktop o mobile i
Mashups creati dall’utente.
Giuseppe De Cicco POLITECNICO DI MILANO

8. Il mio lavoro di TESI 7
• Le innovazioni introdotte:
• Creazione lightweight di mashup “user-oriented”
- Composizione direttamente dall’ambiente di esecuzione
- Scelta dei blocchi con semplici operazioni di drag-and-drop
-Templates di Mashup
• Portabilità e riuso dei Mashups
- Process Manifest XML : load/save/execution
• Flusso di processo guidato dall’utente
• Creazione di nuovi widgets con funzionalità avanzate
- Block Selector
- Templates builder
- Multiplexer
- Calendar
- Mashup Uploader
- Maps 2.0
- Navigator
Giuseppe De Cicco POLITECNICO DI MILANO

9. Mashups di Mashup 8
Creazione lightweight di mashup?
Ho introdotto il concetto di Mashups di Mashup
La mia definizione:
”Composizione semi-automatica di servizi Web a partire da un
Mashup predefinito”.
Modifiche del framework:
• Nuovi metadati nel Block Manifest (<description>....<description>)
• Accesso alla Blocks Library a runtime
• Templates di Composizione
• Widgets: Block Selector, Process Builders
• Composizione predefinita “Create a Mashup”
Giuseppe De Cicco POLITECNICO DI MILANO

10. Mashups di Mashup 9
Block Selector: Filtro e Selettore di Blocchi
inlink 1
blockToAdd
block Selected
Block Selector
selectedBlock infos
outlink1 blocksToMash
Giuseppe De Cicco POLITECNICO DI MILANO

11. Mashups di Mashup 10
Templates Process Builder (Mashup di alto livello)
inlink 1
blocksToMash
Process Builder
outlink1
Sequenziale Container Centralizzato
Block 2 Block 3
Block 1
Block 1 Block 2 Block Principale
Block 2
... Block n
... Block n
Block n
Giuseppe De Cicco
(a) (b) POLITECNICO DI MILANO

12. blockSelected
Mashups di Mashup 11
Block Selector
“Create a Mashup”: Il mashup che permette all’utente di creare i
infos
Mashup personalizzati.
Start blocksToMash
SuperBlocco 1 blocksToMash SuperBlocco 2
infoPoints
info
Centalized
Tree Process
Process
Descriptor Maps 2.0
selected
selectedPoint Sequential Container
Plan Process
Process Process
blockToAdd
blockSelected
Block Selector
End
infos
blocksToMash
blocksToMash SuperBlocco 2
Giuseppe De Cicco POLITECNICO DI MILANO

13. <blockIncludes>
<include id="i1" uuid="999999999"/>
Nuovi concetti: portabilità e riuso </blockIncludes>
<variables> 12
<variable name="b2_coordinates" refNode="i1" paramName="coordina
</variables>
• Nuova sintassi per Mashup in formato XML <flow refStartNode="b2">
• Estensione del Core Engine: loadXML <node id="b2" refInclude="i1" undoable="true" end="true">
<assigns>
• Templates process builder: salvataggio del Mashup <assign>
<target refVariable="b2_coordinates" xfield="."/>
• Mashup uploader: riutilizzo del Mashup creato <source type="Coordinates">
<value>
<latitude>45.4791694</latitude>
<process>
<longitude>9.2208006</longitude>
<about>
<identifier>c0c52910-f91c-11dd-87af-0800200c9a66</identifier> </value>
<name>VisualizeCoordinate</name> </source>
<author>Giuseppe</author> </assign>
<icon/> </assigns>
</about> <links/>
<blockIncludes> </node>
<include id="i1" uuid="999999999"/>
</flow>
</blockIncludes>
<variables>
</process>
<variable name="b2_coordinates" refNode="i1" paramName="coordinates"/>
</variables>
<flow refStartNode="b2">
<node id="b2" refInclude="i1" undoable="true" end="true">
<assigns>
<assign>
<target refVariable="b2_coordinates" xfield="."/> function mashlight_process() {
<source type="Coordinates"> engine.doBlockInclusion("999999999");
<value> engine.doNodeAddition("b2", "999999999", true, true);
<latitude>45.4791694</latitude> engine.doOutConnectionAddition("b2", "out", null);
<longitude>9.2208006</longitude>
}
</value>
function b2() {
</source>
</assign> var tmp= new Coordinates();
</assigns> tmp.latitude = "45.4791694";
<links/> tmp.longitude= "9.2208006" ;
</node> engine.doConstantAssignment("b2_coordinates", ".", tmp);
</flow> }
</process>
Giuseppe De Cicco POLITECNICO DI MILANO

14. Nuovi concetti: flusso gestito dall’utente 13
• Multiplexer
• Correlazione tra parametri-outlink
• Parametri di input: array di “outlink - nome nodo”
• Numero di outlink indefinito
• Utilizzato in:
•Mashup centralizzati
•Mashup Plan
• Molto importante nel contesto mobile
inlink
dataOutlink
Multiplexer
outlink 1 outlink 2 ... outlink n
Giuseppe De Cicco POLITECNICO DI MILANO

15. Widget Calendar 14
• Uno dei Blocchi Google (Maps 2.0, Navigator)
• Google Calendar (Zend Framework)
• Standardizzazione dei parametri di input e output
• Primo esempio di Widget con funzionalità di:
• Autenticazione
• Salvataggio dati nella Cloud di Google
inlink
event accessDataIn
Calendar
nextEvent accessDataOut
outlink
Giuseppe De Cicco POLITECNICO DI MILANO

16. Caso di studio 15
• NightOut (scenario):
Organizzare una serata con i proprio amici prenotando prima un ristorante
ed in seguito un cinema. L’utente vuole:
• Scegliere i servizi ed effettuare le opportune prenotazioni.
• Salvare i dati della prenotazione
• Ricevere notifiche via mail ed SMS in tempo per partecipare all’evento
• Avere un supporto che lo aiuti al raggiungimento della meta
• Passi da effettuare con Mashlight:
1. Selezione dei servizi attraverso il mashup “Create a Mashup”
2. Utilizzo del template PLAN
3. Salvataggio ed Esecuzione del processo
4. Prenotazione utilizzando il servizio del cinema e del ristorante
5. Utilizzo del dispositivo mobile per caricare il Mashup salvato
Giuseppe De Cicco POLITECNICO DI MILANO

17. Caso di studio 16
Il template PLAN (Mashup di alto livello creato con effort minimo)
outlinks
data
Start
Calendar
Outlink
Multiplexer
Outlink
Multiplexer
Calendar
user
End password
Calendar Calendar
Calendar Calendar
event event Calendar Calendar Calendar
Calendar Calendar Calendar
event event event
Block 1 n
Block Navigator
Block 1
event event next
event
Block 1 Block 1 Block 1
Block 1 Block n Navigator
Deactive
Deactive Deactive
Deactive
Deactive Deactive Deactive
Deactive Deactive Deactive
Giuseppe De Cicco POLITECNICO DI MILANO

18. 17
Demo...
Giuseppe De Cicco POLITECNICO DI MILANO

19. Mashlight 18
Conclusione
• Obiettivi raggiunti con successo
• Applicazioni centrate sugli obiettivi dell’utente
• Creazione / Esecuzione / Salvataggio / Riuso lightweight di Mashup
• Mashups complessi creati con semplici passaggi e nascosti all’utente.
Sviluppi Futuri
• Arricchimento della “Blocks Library” con nuovi servizi
• Miglioramento dell’ambiente di esecuzione iPhone/Android
• Concetto di “Stato”
Giuseppe De Cicco POLITECNICO DI MILANO