1. ITCS 6010 DATA INTEGRATION Krishna Kant Sri Harsha Pokala Vamsi Krishna Jamulapati

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

3. Characteristics Combination, visualization, and aggregation. Existing data is made more useful for personal and professional use.

4. Mashups Types Business (or enterprise) Mashups. Consumer Mashups Data Mashups

5. Questions Which type of Mashups are more secure? a.Business(enterprise) Mashups b.Consumer Mashups c.Data Mashups d. All

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

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

8. Building Mashups Planning API sign up Coding

9. Questions Building a mashup requires ? a.Planning b.API signup c.Coding d.All of the above

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

11. 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/http://www.google.com/apis/maps/

12. Coding User Mashup website User Request Website 1 Website 2 API CallDataAPI Call Data Data presentation Data Manipulation

13. Coding… API Call Data manipulation Web Programming

14. Questions Coding has ? a.API call b.API call, Data manipulation c.API call, Manipulation, Web programming d.None

15. API Call Types of API – How to call? REST XML-PRC SOAP Javascript Functions of API – What to call? API specific

16. REST Request in HTTP and Response in XML Example: Google Geocoder http://maps.google.com/maps/geo? 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+amphithe are+mtn+view+ca&key=***&output=xml

17. REST Sample response: 1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA - 122.083739,37.423021,0

18. XML-RPC Request/Response in XML via HTTP Example: MSN Blogging API XmlRpcClient in Apache Sample Request: getStateName 4

19. XML-RPC Sample Response South Dakota

20. 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: 827635

21. SOAP Sample Response Toptimate 827635 96.50

22. 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));

23. Data manipulation Purpose: To generate API requests To process API responses To represent data internally Two components Data schema Tools for manipulation

24. Questions What is the purpose of Data Manipulation? a.To generate API requests b.To process API responses c.To represent data internally d.All of the above

25. Data Schema (XML) Purpose: To generate API requests To process API responses To represent data internally Two components Data schema Tools for manipulation

26. Tools for Manipulation Basic level Parser, Modifier, Writer Available online Higher level Filter, Converter, Generator Need to write on your own

27. Web Programming UI Design

28. Combining Everything Your Mashup = API calls + Data Manipulation + UI User Mashup website User Request Website 1 Website 2 API CallDataAPI Call Data Data presentation Data Manipulation

29. Security Issues Need User Input Security Session Fixation CSRF Attack iframe Security

30. Questions What HTTP method has to be avoided to prevent CSRF attack? a. GETb. POST c. NEXTc. SET What Coding language is to be used to prevent iframe attacks? a. Java scriptb. Ruby c. PHPd. none

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

32. Housing Maps

33. Google Flight Simulator

34. Map your Buddies

35. Thank You!

36. References Reference: Wikipedia: http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid) 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-128.ibm.com/developerworks/edu/x-dw-x- ultimashup1.html http://www.ibm.com/developerworks/web/library/wa- mashupsecure/index.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/ http://www.programmableweb.com/ http://www.webmashup.com/