1 / 43

03-60-440 Mashups

03-60-440 Mashups. Mashups. From Wikipedia Mashup (music), a musical genre of songs that consist entirely of parts of other songs Mashup (video), a video that is edited from more than one source to appear as one

alida
Download Presentation

03-60-440 Mashups

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 03-60-440 Mashups 60-440

  2. Mashups • From Wikipedia • Mashup (music), a musical genre of songs that consist entirely of parts of other songs • Mashup (video), a video that is edited from more than one source to appear as one • Mashup (web application hybrid), a web application that combines data and/or functionality from more than one source • Combine data from multiple sources. • Mostly the data sources lay outside of the organizational boundaries • Create a new and distinct web service that was not originally provided by either source. • Content is typically sourced via a web API or a RSS Feed Mashup 60-440

  3. Mashup example • The ChicagoCrime.org Web site • A mapping mashup • One of the first popular mashups • Mashes crime data from the Chicago Police Department’s online database with cartography from Google Maps • The concept and the presentation are simple and the composition of crime and map data is visually powerful Mashup 60-440 The following slides are borrowed from Umut Orhan

  4. Why mashup • Everybody needs customized applications, tailored to his/her own requirements, taste, style. • DIY in software/web application construction • There are many building blocks (web APIs, web services) • there are also some tools to assemble the building blocks • It is like end-user programming 60-440

  5. Mashup flavours • Presentation mashups: e.g. Google Maps apps, with emphasis on presentation • This is the shallowest form of mashup in the sense that underlying data and functionality don’t meet.  Information and layout is retrieved and either remix or just placed next to each other.  Many of the Ajax desktops today fall into this category and so do portals and other presentation mashup techniques. • Data mashups: merging data from different sources • Business mashup: combination of above. combines data integration, presentation plus addition functionality, such as collaboration features Mashup 60-440

  6. Genres of mashups • Mapping mashups • Video and photo mashups • Search and Shopping mashups • News mashups • Mashup top categories in Programmableweb.com (2009 vs. 2008): Mashup Genres 60-440

  7. Top APIs in programmableweb in 2008 60-440

  8. Top APIs in Oct 2009 60-440

  9. Map mashups • Locational information presented graphically using maps in a specified context • Google Maps API opened the floodgates • mash all sort of data from nuclear disasters to Boston’s CowParade cows onto maps • Other APIs • Microsoft (Virtual Earth) • Yahoo (Yahoo Maps) • AOL (MapQuest) Mashup Genres 60-440

  10. Photo and Video • Photo/video hosting and social networking sites resulted interesting mashups. • Flickr • YouTube • Facebook • Metadata associated with the hosted images and videos • Who took the picture • What it is a picture of • Where and when it was taken • So on… Mashup Genres 60-440

  11. Search and shopping • Exist long before the term Mashup was coined • Combinations of B2B technologies or screen-scraping to aggregate comparative price data • eBay • Amazon • … Mashup Genres 60-440

  12. News • News sources such as BBC and Reuters have used syndication technologies like RSS and Atom since 2002. • Personalized newspaper by Syndication feed mashups • Doggdot.us, combines feeds from the techie-oriented news sources Digg.com, Slashdot.org and Del.icio.us Mashup Genres 60-440

  13. Content provider • Web Protocols • REST Services • SOAP Web Services • RSS/Atom • Screen Scraping • Scraping is the process of using software tools to parse and analyze content that was originally written for human consumption in order to extract semantic data structures representative of that information that can be used and manipulated programmatically. 60-440

  14. Mashup platforms • IGoogle • Yahoo Pipes • Openkapow • IBM QedWiki • Microsoft popfly (discontinued on august 24, 2009) • Google Mashup Editor (in january 2009, migrated to Google App Engine) • BEA’s Aqualogic Pages • Apatar • Dapper • Applibase’s DataMashups • Denodo’s data mashup product suite. • Extensio • JackBe’s Presto • Proto • RSSBus • SnapLogic • SOA Express • Teqlo • WSO2 Mashup Server Mashup platforms The following slides are based on a presentation by SAP research 60-440

  15. IGoogle • IGoogle is a mash-up platform that aims to centralize all personal information in a portal (or web page) • IGoogle is based on: • Free wheel composition of gadgets in a web page, considered as a personal desktop from where a web users’ experience starts every day • Users can choose gadgets from: • A catalogue of ready-made components • Gadgets created by end-users Mashup platforms 60-440

  16. My igoogle Mashup platforms 60-440

  17. Add other gadgets Mashup platforms 60-440

  18. Advantages of IGoogle • Catalogue has a lot of existing gadgets to choose from • 28,000 + gadgets in Jan 2008. • You have the option of creating new gadgets to use in the mashup • Google Mashup Editor (GME). • Here is a good tutorial • IGoogle users can accumulate a lot of useful information on their home page • End-users can fix the mashup, replacing/resizing gadgets on the page • Users can create complex applications, located on their home page Mashup platforms The following slides are from SAP Research 60-440

  19. Disadvantages of IGoogle • End-users will find it difficult to create complex mashups, because: • Heavy programmatic skills are required • There is a poor variety of data inputs • There is high coupling between mashups and the platform (a middleware gadget is required to allow gadgets to communicate) • Created mashups are not compatible with any other platform • There is no inherent communication between gadgets Mashup platforms 60-440

  20. Yahoo! pipes • Visual development environment for generating data-oriented mashups • Development is based on: • Dragging gadgets (pipes) from a toolbox and dropping them in work zone • Specifying data input • Interconnecting gadgets through pipes • Specifying data output format Mashup platforms 60-440

  21. Advantages of Yahoo Pipe • Entirely graphic and intuitive IDE; not one line of code is required • Inherent internal communication between gadgets • RSS, CSV and JSON support • Portability of mashups to other platforms (i.e. QedWiki) Mashup platforms 60-440

  22. Disadvantages of Yahoo Pipe • Yahoo pipes does not generate XML from the mashup (limiting hacking and remixing) • Data inputs are limited to a prefixed set • It is very difficult to create complex mashups with really powerful functionalities early on • Other platforms are usually required to create enterprise mashups Mashup platforms 60-440

  23. Openkapow • http://openkapow.com/ • to be Shut Down on December 11th, 2009 • Mashup platform for creating and remixing gadgets called “robots”. Robots have the following features: • Each robot is like a little components mashup • Robot inputs: • XML • HTML through screen scraping • Robots can manage a wide variety of data outputs • Robots can communicate with each other • These robots are created and managed with a desktop IDE, RoboMaker Mashup platforms 60-440

  24. Advantages of Openkapow • This platform has a large catalogue of prefabricated resources • There is inherent communication between gadgets • RoboMaker is a powerful and visual IDE • It has a wide range of data inputs (XML, HTML, …) and outputs (XML, HTML, CSV, JSON, XHTML) • It includes several ways to interact with end-users in final mashups (forms, REST calls, …) • Platform users can have their own robots server Mashup platforms 60-440

  25. OpenKapow - Disadvantages • The platform is focused entirely on development, instead of exploitation • desktop IDE, not browser based • targets heavy-tech users, with previous programming skills • Robots can’t be easily hacked or remixed • The OpenKapow mashup server is not free • The platform is overly centered on HTML and screen scraping Mashup platforms 60-440

  26. IBM QedWiki • Mashup platform that combines two perspectives (data-oriented mashups and presentation mashups) • Features: • Data inputs: • Databases • Feed RSS • Yahoo Pipes mashups • Spread sheets • XML • … • Mashup process based on drag & drop operations, using gadgets from a toolbox, or further searching from a wiki of resources • Internal communication between gadgets is supported • Mashup results can be entered in a wiki, tagged, and refined by other users Mashup platforms 60-440

  27. IBM QedWiki - Advantages • QedWiki combines several tendencies; it supports data mashups, like Yahoo Pipes,and creates complex presentation mashups, like OpenKapow • It supports internal communication between gadgets • It supports a wide range of data inputs, managing databases directly • Web-based IDE, no additional software has to be downloaded • It can manage the internal code of each gadget and even of each complete mashup (according to its own XML-based standards) • Simple documentation support oriented to inexperienced users Mashup platforms 60-440

  28. IBM QedWiki - Disadvantages • You need to know code standards and the gadget programming language to build complex solutions because of limitations in the supplied visual IDE • Screen scraping is not supported • There is little, poorly detailed and slowly updated documentation. The QedWiki Project is not hot today. Mashup platforms 60-440

  29. Ajax • AJAX (Asynchronous JavaScriptand XML) • Ajax and AJAX • Characteristic: increased responsiveness and interactiveness of web pages • exchanging small amounts of data with the server • entire web page does not have to be reloaded each time the user performs an action. • Not a technology itself, but a term refer to the use of a group of technologies • The "core" and defining element of Ajax is the XMLHttpRequest object, which gives browsers the ability to make dynamic and asynchronous data requests without having to reload a page, eliminating the need for page refreshes. Web 2.0 The following slides are from Jimmy Lin The iSchool University of Maryland 60-440

  30. “Old-School” Web Applications server generates Web page as a response to the request browser sends request to server user does something 1 3 2 4 5 data is returned in response to the request browser replaces view with data sent from server server-side systems browser HTTP request Web server backend database Interface HTTP response 60-440

  31. Characteristics User-driven: Things only happen when the user does something (e.g., clicks on a link or button) Views defined by URLs: You can bookmark something and come back to it; use the forward/backward button Simple user interaction model: Not that many things you can do in browser Synchronous Interaction: System responses are synchronized with user-driven events 60-440

  32. Synchronous Interactions 1 5 2 4 3 server-side systems browser 1 2 HTTP request 4 HTTP response 3 5 browser user activity user activity user activity Time Response  Response  Request  Request  server-side server processing server processing 60-440

  33. So what do you run on the server side? L A M P Linux Apache MySQL PHP/Python/Perl 60-440

  34. From “Old-School” to Ajax Ajax “engine” data management interaction management Ajax intermediates between the interface and the server. browser server-side systems request Web server backend database Interface response 60-440

  35. Inside the Browser browser HTTP request HTML / CSS data Interface Rendering Engine other data(e.g. images) HTTP response 60-440

  36. Enter JavaScript browser JavaScript Engine HTTP request JavaScriptcode HTML / CSS data Interface Rendering Engine other data(e.g. images) HTTP response 60-440

  37. Enter Ajax browser HTTP request XMLHttpRequest JavaScript Engine HTTP request JavaScriptcode XMLdata HTML / CSS data Interface Rendering Engine other data(e.g. images) HTTP response 60-440

  38. From Synchronous Interactions… browser user activity user activity user activity Time Response  Response  Request  Request  server-side server processing server processing 60-440

  39. To asynchronous Interactions browser user activity client-side processing Time Response  Response  Request  Request  server-side server processing server processing 60-440

  40. Components of an Ajax Interaction A client event occurs (captured by JavaScript event handlers) An XMLHttpRequest object is created and configured An asynchronous request is made to the server via the XMLHttpRequest object Server processes request and returns data, executing a callback in the XMLHttpRequest object The HTML DOM is updated based on response data 60-440

  41. DOM • Document Object Model: platform- and language-independent way to represent XML • Adopts a tree-based representation • W3C standard, supported by modern browsers • JavaScript uses DOM to manipulate content • To process user events • To process server responses (via XMLHttpRequest) 60-440

  42. Ajax: Things to watch out for! • Hype • Best thing since sliced bread? • Application development/maintenance cost • Brower incompatibilities • Many different approaches and tools • For many things, lack of agreed-on best practices • Behavior is not ‘Web-like’ • Standard things often don’t work correctly (e.g., browser ‘back’ button, bookmarks) • Usability issues for users with disabilities • Security issues • Whole new class of cross-site scripting (XSS) exploits 60-440

  43. Learning Ajax • Bewildering options: • PHP vs. Python vs. Perl vs. ASP vs. JSP … • XML vs. JSON • Countless toolkits, frameworks, libraries, etc. • Amazing amount of information online: • Numerous Web tutorials • Learn by example • Learn by building 60-440

More Related