Model-Driven Mashup
Personal Learning Environments
Mohamed Amine Chatti, Matthias Jarke, Zhaohui Wang
RWTH Aachen University, Germany
Marcus Specht
Open University Heerlen, Netherlands
MUPPLE Workshop
Lehrstuhl Informatik 5 Nice, September 29, 2009
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-1

Agenda
Mashup Personal Learning Environments
Mashup Development
Model-Driven Mashup Development
Service Mapping Description (SMD)
PLEF: Model-Driven Mashup PLEs with SMD
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-2

Personal Learning Environments
Pedagogical Perspective
The environment in which I learn
A more natural and learner-
centric model to learning Lifelong Learning Informal Learning
Put the learner at the center and
give her control over the learning Personal Learning Environments
experience
Convergence of lifelong, informal
Self Organized Learning Network Learning
and network learning within a
learner-controlled space
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-3

Personal Learning Environments
Technical Perspective
A PLE can be viewed
as a self-defined
collection of services,
Me
tools and devices that
help learners build
their PKNs
Theories-in-use My PLE
Devices
My PKN
Services/Tools
People Information
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-4

Mashups
A new breed of Web applications
Combines content from more than one source into a single integrated tool
Content is typically sourced via an API or a RSS Feed
Typical mashup process
User Input
to mashup
Output of
Web Service 1
Service 1
Data
Mediation
Output of
mashup
Input of
Web Service 2
Lehrstuhl Informatik 5 Service 2
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-5

Mashup Types
Mashups
Mashups by Mashups by
Aggregation Integration
• simply assemble sets of information from • create more complex applications
different sources side by side within a single • integrate different APIs
interface • need considerable programming expertise
• do not require programming skills
• PSP (e.g iGoogle, Netvibes)
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-6

Mashup APIs
Source: Programmableweb (Total Mashups: 4333, APIs: 1461)
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-7

JSON vs. XML
JSON is less verbose than XML
{"city":"Denver", "state":"CO", "country":"US"}
[{"city":"Denver", "state":"CO", "country":"US"},
<result> {"city":”Chicago", "state":”IL", "country":"US"}]
<city>Denver</city>
<state>CO</state>
<country>US</country> <result>
</result> <city>Denver</city>
<state>CO</state>
<country>US</country>
</result>
<result>
<city>Chicago</city>
<state>IL</state>
<country>US</country>
</result>
JSON is easy to parse and work with on the client side
var json = ‘{"city":"Denver", "state":"CO", "country":"US"}’
var result = eval ( ‘(‘ + json + ‘)’ )
Lehrstuhl Informatik 5
alert (result.city)
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-8

Server-Side Mashups
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke http://java.sun.com/developer/technicalArticles/J2EE/mashup_1/
I5-MAC-9

Client-Side Mashups (1)
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke http://java.sun.com/developer/technicalArticles/J2EE/mashup_2/
I5-MAC-10

Client-Side Mashups (2)
Benefits of Client-Side Mashups
Easy to implement
No need for a server-side proxy
Better performance than server-side mashups
Less processing load on the server
Less server-side code
Problem
XMLHttpRequests across domains
Same Origin Policy (SOP)
Solution
JSON with Padding (JSONP)
Cross-domain Ajax via JSONP
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-11

Mashup Development
Ad hoc
Generated manually (HTML, CSS, JavaScript)
Time consuming
Difficulty in data mediation
Mashup building tools and platforms
e.g. Google Mashup Editor, Yahoo! Pipes, Microsoft Popfly
GME for mashup programmers
Restricted to RSS/ATOM services
Integration and Mediation
Limited to company’s internal services
Scalability
Solution
Models to describe Web services and
Lehrstuhl Informatik 5 mashups
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-12
Model-Driven Mashup Development

Model-Driven Mashups
To automatically mashup services from a SA-REST
- Complex microformats (RDFa or GRDDL)
description of the same - Common ontology
Implement mashups as configurations of services - Specification of lifting and lowering schemas
defined via metadata
Description of Web Services
WSDL / SAWSDL (W3C recommendation 2007)
WADL / SA-REST (Lathem et al., 2007)
XML-based
Server-side mashups
Service Mapping Description (SMD) (Zyp, 2008)
Annotation of RESTful and JSON-RPC services
Description of service invocation, parameters,
and output
Lightweight (Simple JSON representation)
Lehrstuhl Informatik 5
(Informationssysteme) Based on JSON Schema
Prof. Dr. M. Jarke
I5-MAC-13

Model-Driven Mashups with PLEF
Mashup learning services with minimum effort
Scalable model-driven client-side mashups of RESTful services based on
SMD and JSONP
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-14

Mashups with SMD in PLEF (1)
Mashup Viewer Client
RESTful SMashup Editor RESTful
Service Provider 8 Service Provider
1 2
Service 1 Service 2
4 6
Http Get Http Get
URL URL
Service URL Service URL
JSONP Response
5 7
JSONP
Service Selector Inputs Inputs Response
SMD
SMD URL Data URL
Mediation
Outputs Outputs
GWT JSONParser
XMLHttpRequest (GWT RPC or GWT Requestbuilder)
1 3
Services for mashup SMD1 + SMD2
HttpRequest HttpRequest
2
2
Server
Lehrstuhl Informatik 5
(Informationssysteme)
Proxy Server
Prof. Dr. M. Jarke
I5-MAC-15

Mashups with SMD in PLEF (2)
Mashup Viewer Client
RESTful SMashup Editor RESTful
Service Provider 8 Service Provider
1 2
Service 1 Service 2
4 6
Http Get Http Get
URL URL
Service URL Service URL
JSONP Response
5 7
JSONP
Service Selector Inputs Inputs Response
SMD URL Data SMD URL
Mediation
Outputs Outputs
GWT JSONParser JSONP
JSONP Request
Request
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-16

Model-Driven Mashups with SMD
Benefits of Model-Driven Mashups
Interoperability
Reuse and sharing
Extensibility and scalability
Flexibility and customization
Automatic data integration and mediation
Automatic service invocation
User-friendliness
Benefits of Model-Driven Mashups with SMD
Client-side mashups
Cross-domain Ajax mashups via JSONP
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-17

Demo
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-18

Thank You!
Lehrstuhl Informatik 5
(Informationssysteme)
Prof. Dr. M. Jarke
I5-MAC-19