Mashups

ITCS 6010 DATA INTEGRATION

Krishna Kant Sri Harsha Pokala

Vamsi Krishna Jamulapati

What is a Mashup?

• A website or web application which basically combines contents from different websites.

• Formally: A mashup is a Web page or application that uses and combines data, presentation or functionality from two or more sources to create new services.

Characteristics

• Combination, visualization, and aggregation.

• Existing data is made more useful for personal and professional use.

Mashups Types Business (or enterprise) Mashups.

Consumer Mashups

Data Mashups

Questions

Which type of Mashups are more secure?

a. Business(enterprise) Mashupsb. Consumer Mashupsc. Data Mashupsd. All

Mashup types…• Directly interacting with a web service from inside a browser

script (e.g., reading an RSS feed)

• Display control delegation (Google gadgets: Google as integrator)

• Display control delegation + two-way browser side communication (Google maps, Google search: Google as provider)

Example Mashup

User

Mashup website

What are the available flats near John kirk dr.?

Real estate website Google Map

Request for available flat list Flat list

Request for area map

Area map

Map with available flats marked

Building Mashups• Planning

• API sign up

• Coding

Questions

Building a mashup requires ?a. Planning b. API signup c. Codingd. All of the above

Planning

• Pick a subject• A Mashup of What?

• Map + Real Estate? • Bookshop + Library Catalog?

• More sources of data More complicated

• Decide your data sources• Who is your data provider?

• Maps: Google maps, Yahoo maps, etc..• Online shopping: Amazon, EBay, etc..

• Usually language agnostic• Varying complexity

Sign-up for API

• Sign-up for the API• Visit the homepage of your data source and sign up• Example: http://www.google.com/apis/maps/

Coding

User

Mashup website

User Request

Website 1 Website 2

API Call Data API Call Data

Data presentation

Data Manipulation

Coding…• API Call

• Data manipulation

• Web Programming

Questions

Coding has ?a. API callb. API call, Data manipulation c. API call, Manipulation, Web programmingd. None

API Call

• Types of API – How to call?• REST• XML-PRC• SOAP• Javascript

• Functions of API – What to call?• API specific

REST• Request in HTTP and Response in XML

• Example: Google Geocoder• http://maps.google.com/maps/geo?• q – The address that you want to geocode• Key – Your API key• Output – The output format

• Sample request:• http://maps.google.com/maps/geo?

q=1600+amphitheare+mtn+view+ca&key=***&output=xml

REST• Sample response:

<xml><Placemark>

<address> 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA </address> <Point>

<coordinates>-122.083739,37.423021,0</coordinates> </Point>

</Placemark></xml>

XML-RPC

• Request/Response in XML via HTTP

• Example: MSN Blogging API• XmlRpcClient in Apache

• Sample Request:• <?xml version="1.0"?>

<methodCall> <methodName>getStateName</methodName>

<params> <param><value><i4>4</i4></value></param> </params> </methodCall>

XML-RPC

• Sample Response• <?xml version="1.0"?>

<methodResponse> <params> <param> <value> <string>South Dakota</string> </value> </param> </params> </methodResponse>

SOAP• Request/Reply in SOAP format via SMTP/HTTP

• Example: MSN Search API• HttpURLConnection in Java• Post the XML to the target URL

• Sample request:<soap:Envelope xmlns:soap=schemaURL>

<soap:Body> <getProductDetails xmlns=targetURL> <productID>827635</productID> </getProductDetails>

</soap:Body></soap:Envelope>

SOAP

• Sample Response<soap:Envelope xmlns:soap=SchemaURL>

<soap:Body> <getProductDetailsResponse xmlns=targetURL>

<getProductDetailsResult> <productName>Toptimate</productName>

<productID>827635</productID> <price>96.50</price>

</getProductDetailsResult> </getProductDetailsResponse> </soap:Body></soap:Envelope>

JAVA SCRIPT

• Request/Reply embedded in a stub object

• XML not required unless data needed explicitly

• Example: Gogglemap• GMAP2 in Googlemap API• Var map = new GMAP2(document.getElementById(“map”))• map.setCenter(new GLatLng(37.4419,-122.1419),13));

Data manipulation

• Purpose:• To generate API requests• To process API responses• To represent data internally

• Two components• Data schema• Tools for manipulation

Questions

What is the purpose of Data Manipulation?a. To generate API requestsb. To process API responsesc. To represent data internallyd. All of the above

Data Schema (XML)

• Purpose:• To generate API requests• To process API responses• To represent data internally

• Two components• Data schema• Tools for manipulation

Tools for Manipulation

• Basic level• Parser, Modifier, Writer• Available online

• Higher level• Filter, Converter, Generator• Need to write on your own

Web Programming• UI Design

Combining Everything• Your Mashup = API calls + Data Manipulation + UI

User

Mashup website

User Request

Website 1 Website 2

API Call Data API Call Data

Data presentation

Data Manipulation

Security Issues• Need

• User Input Security

• Session Fixation

• CSRF Attack

• iframe Security

Questions

What HTTP method has to be avoided to prevent CSRF attack?a. GET b. POSTc. NEXT c. SET

What Coding language is to be used to prevent iframe attacks?a. Java script b. Rubyc. PHP d. none

Examples• Housing Maps

• http://housingmaps.com• JavaScript mashup of Google Maps and rental data from Craig’s List

• Map Your Buddies• http://people.emich.edu/mchiang4/MapYourBuddies/

• Google Flight Simulator• http://www.isoma.net/games/goggles.html• Flash mashup of Google Maps and an airplane video game

• Thousands of other Google Maps Mashups:• http://googlemapsmania.blogspot.com/

Housing Maps

Google Flight Simulator

Map your Buddies

Thank You!

References

• Reference:• Wikipedia:

http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)• Tutorial from IBM

http://www-128.ibm.com/developerworks/edu/x-dw-x-ultimashup1.html

• http://www.ibm.com/developerworks/web/library/wa-mashupsecure/index.html

• Resources:• List of Mashups, APIs:

http://www.programmableweb.com/http://www.webmashup.com/