SlideShare a Scribd company logo

Cloud technology (Mashup) + Case Study

•Download as PPTX, PDF•
•
Mustafa Salam
Mustafa Salam

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. The term implies easy, fast integration, frequently using open API (Application Programming Interface) and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data.

Related slideshows

Version management of abap programs
Version management of abap programsVersion management of abap programs
Version management of abap programs
 
L1 Overview SAP Cloud Platform API Management
L1 Overview SAP Cloud Platform API ManagementL1 Overview SAP Cloud Platform API Management
L1 Overview SAP Cloud Platform API Management
 
The Power of SPL
The Power of SPLThe Power of SPL
The Power of SPL
 
1 of 25
Cloud Technology Mashup By: Mustafa Salam
Mashup 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. The term implies easy, fast integration, frequently using open API (Application Programming Interface) and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data.
Good ideas behind Mashup  Allow information to be viewed from different perspectives (e.g., view real estate data on a map)  Combine data from multiple sources into a single unified view (e.g., compare gas prices in the neighborhood).  Enrich raw data with new information (e.g., view eBay real estate auction along with Amazon)
Mashups have recently exploded on the web, for two main reasons. • First, many of the major internet companies, such as Yahoo! , Google , and Amazon ,have opened up their data to be used with other data sources without a lengthy licensing negotiation. In just a minute or two, you can set up and use the data resources they make available. • The other reason for this rapid growth is the advent of new tools that make creating mashups easy for anyone, regardless of their technical know-how.
Recent Common Services! (Similar to mashup) a) Web Portals: Yahoo! provide information of different kinds under a single unified theme.
Recent Common Services! (Similar to mashup) b) Web Information Aggregators: (MySimon) etc. provide price comparison services for many products. c) RSS (Really Simple Syndication): collect feeds from different news sites to create a news channel.
Cloud technology (Mashup) + Case Study
Mashup Types Mashups have several different colloquial interpretations, which has resulted in some confusion regarding the term and its use.
1. Mapping mashups Mapping mashup allow users to navigate most of the globe through a Web interface, viewing varying levels of resolution through maps, satellite imagery, or a combination. One of the big catalysts for the advent of mashups was Google's introduction of its Google Maps API. This opened the floodgates, allowing Web developers to mash all sorts of data onto maps.
2. Video and photo mashups The emergence of photo hosting and social networking sites like Flickr with APIs that expose photo sharing has led to a variety of interesting mashups. Because these content providers have metadata associated with the images they host (such as who took the picture, what it is a picture of, where and when it was taken, and more), mashup designers can mash photos with other information that can be associated with the metadata.
3. Search and Shopping mashups To facilitate mashups and other interesting Web applications, consumer marketplaces such as eBay and Amazon have released APIs for programmatically accessing their content. Hundreds of shopping mashups exist ranging from commercial desktop applications to comparison shopping web sites to whimsical hacks.
4. News mashups News sources (such as the New York Times, the BBC, or Reuters) have used syndication technologies like RSS since 2002 to disseminate news feeds related to various topics. Syndication feed mashups can aggregate a user's feeds and present them over the Web, creating a personalized newspaper that caters to the reader's particular interests.
Mashup architecture A mashup application is architecturally comprised of three different participants that are logically and physically disjoint (they are likely separated by both network and organizational boundaries): API/content providers, the mashup site, and the client's Web browser.
 The API/content providers. These are the providers of the content being mashed. It denotes the process by which a tool attempts to extract information from the content provider by attempting to parse the provider's Web pages.  The mashup site. This is where the mashup is hosted. Interestingly enough, just because this is where the mashup logic resides, it is not necessarily where it is executed. On one hand, mashups can be implemented similarly to traditional Web applications using server-side dynamic content generation technologies like Java servlets, PHP or ASP. The benefits of client-side mashing include less overhead on behalf of the mashup server (data can be retrieved directly from the content provider).  The client's Web browser. This is where the application is rendered graphically and where user interaction takes place.
Mashup tools  Microsoft Popfly: Microsoft Popfly is Microsoft's Mashup Editor. Its very useful to an end-user and requires little technical understanding. Popfly is built on Microsoft Silverlight.
Mashup tools  Yahoo Pipes: Yahoo Pipes is Yahoo's flash-based tool to aggregate, manipulate, and mashup content from around the web. Yahoo Pipes was one of the first mashup editing tools to come out. It appears to be targeted to the slightly more technical people. However it has a drag-drop interface. Its quite easy to use.
Mashup tools  Google Mashup Editor: The Google Mashup Editor (GME), is defiantly the most advanced out of all the ones. Most powerful, and It's basically got a tag based markup language, that lets you also embed HTML into your results.
Pros and Cons • Innovation potential: fusion of multiple services. More services at a low cost with reusable components. • Use of Open APIs: allow to diffuse content of service adapted to the needs of users. • Security problems: aggregation of own site with application coming from unknown source using APIs not fully understood by “developer”.
Ajax (Asynchronous JavaScript + XML) AJAX stands for Asynchronous JavaScript and XML. It is a Web programming technique that exchanges small amounts of information behind the scenes to speed up applications that run on the Web. It is the use of the XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. AJAX’s most appealing characteristic, however, is its "asynchronous" nature, which means it can do all of this without having to refresh the page. This lets you update portions of a page based upon user events.
Itinerary Planner: A Mashup Case Study Itinerary Planner Mashup (IPM). IPM is a Single-page application that allows users to create an itinerary of the destinations (cities) that they plan to visit and display these destinations on a map. Users can display additional information about each destination including weather data (derived from Yahoo Weather RSS feeds) and other local information (derived using the Google Ajax Search API).
Itinerary Planner: A Mashup Case Study 1. User Interface Design The Trip Planner floating pane allows users to type the country name into a combo box widget; the Trip Planner then populates the list-box with the list of major cities and charts the route on the map as illustrated in the Figure below. When users select (click on) a place marker on the map, the application displays the current weather information using the Yahoo weather RSS feeds.
Itinerary Planner: A Mashup Case Study Selecting a destination from the list-box and clicking the “Google” icon causes the application to launch a new floating pane containing the search results that relate to the selected destination. The search floating pane includes Video, Blog, News, Book, Local and Web results as shown in the Figure below. The place markers on the map are numbered according to the order specified in the Trip Planner list and the colors indicate the start (green) and end (red) of the trip.
Itinerary Planner: A Mashup Case Study 2. Data Integration Design The Google Maps API retrieves Google Maps, the Google Ajax Search API allows customized display of Google Search results and the Yahoo RSS Weather feeds provide the current weather and forecast information. While the Google Maps API and the Google Ajax Search API are accessed directly by the client-side Javascripts, the Yahoo RSS feeds are retrieved by a server-side PHP script. The PHP XML_RSS Parser was used to process the RSS feeds
Itinerary Planner: A Mashup Case Study
Thank You

More Related Content

Cloud technology (Mashup) + Case Study

  • 2. Mashup 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. The term implies easy, fast integration, frequently using open API (Application Programming Interface) and data sources to produce enriched results that were not necessarily the original reason for producing the raw source data.
  • 3. Good ideas behind Mashup  Allow information to be viewed from different perspectives (e.g., view real estate data on a map)  Combine data from multiple sources into a single unified view (e.g., compare gas prices in the neighborhood).  Enrich raw data with new information (e.g., view eBay real estate auction along with Amazon)
  • 4. Mashups have recently exploded on the web, for two main reasons. • First, many of the major internet companies, such as Yahoo! , Google , and Amazon ,have opened up their data to be used with other data sources without a lengthy licensing negotiation. In just a minute or two, you can set up and use the data resources they make available. • The other reason for this rapid growth is the advent of new tools that make creating mashups easy for anyone, regardless of their technical know-how.
  • 5. Recent Common Services! (Similar to mashup) a) Web Portals: Yahoo! provide information of different kinds under a single unified theme.
  • 6. Recent Common Services! (Similar to mashup) b) Web Information Aggregators: (MySimon) etc. provide price comparison services for many products. c) RSS (Really Simple Syndication): collect feeds from different news sites to create a news channel.
  • 8. Mashup Types Mashups have several different colloquial interpretations, which has resulted in some confusion regarding the term and its use.
  • 9. 1. Mapping mashups Mapping mashup allow users to navigate most of the globe through a Web interface, viewing varying levels of resolution through maps, satellite imagery, or a combination. One of the big catalysts for the advent of mashups was Google's introduction of its Google Maps API. This opened the floodgates, allowing Web developers to mash all sorts of data onto maps.
  • 10. 2. Video and photo mashups The emergence of photo hosting and social networking sites like Flickr with APIs that expose photo sharing has led to a variety of interesting mashups. Because these content providers have metadata associated with the images they host (such as who took the picture, what it is a picture of, where and when it was taken, and more), mashup designers can mash photos with other information that can be associated with the metadata.
  • 11. 3. Search and Shopping mashups To facilitate mashups and other interesting Web applications, consumer marketplaces such as eBay and Amazon have released APIs for programmatically accessing their content. Hundreds of shopping mashups exist ranging from commercial desktop applications to comparison shopping web sites to whimsical hacks.
  • 12. 4. News mashups News sources (such as the New York Times, the BBC, or Reuters) have used syndication technologies like RSS since 2002 to disseminate news feeds related to various topics. Syndication feed mashups can aggregate a user's feeds and present them over the Web, creating a personalized newspaper that caters to the reader's particular interests.
  • 13. Mashup architecture A mashup application is architecturally comprised of three different participants that are logically and physically disjoint (they are likely separated by both network and organizational boundaries): API/content providers, the mashup site, and the client's Web browser.
  • 14.  The API/content providers. These are the providers of the content being mashed. It denotes the process by which a tool attempts to extract information from the content provider by attempting to parse the provider's Web pages.  The mashup site. This is where the mashup is hosted. Interestingly enough, just because this is where the mashup logic resides, it is not necessarily where it is executed. On one hand, mashups can be implemented similarly to traditional Web applications using server-side dynamic content generation technologies like Java servlets, PHP or ASP. The benefits of client-side mashing include less overhead on behalf of the mashup server (data can be retrieved directly from the content provider).  The client's Web browser. This is where the application is rendered graphically and where user interaction takes place.
  • 15. Mashup tools  Microsoft Popfly: Microsoft Popfly is Microsoft's Mashup Editor. Its very useful to an end-user and requires little technical understanding. Popfly is built on Microsoft Silverlight.
  • 16. Mashup tools  Yahoo Pipes: Yahoo Pipes is Yahoo's flash-based tool to aggregate, manipulate, and mashup content from around the web. Yahoo Pipes was one of the first mashup editing tools to come out. It appears to be targeted to the slightly more technical people. However it has a drag-drop interface. Its quite easy to use.
  • 17. Mashup tools  Google Mashup Editor: The Google Mashup Editor (GME), is defiantly the most advanced out of all the ones. Most powerful, and It's basically got a tag based markup language, that lets you also embed HTML into your results.
  • 18. Pros and Cons • Innovation potential: fusion of multiple services. More services at a low cost with reusable components. • Use of Open APIs: allow to diffuse content of service adapted to the needs of users. • Security problems: aggregation of own site with application coming from unknown source using APIs not fully understood by “developer”.
  • 19. Ajax (Asynchronous JavaScript + XML) AJAX stands for Asynchronous JavaScript and XML. It is a Web programming technique that exchanges small amounts of information behind the scenes to speed up applications that run on the Web. It is the use of the XMLHttpRequest object to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including XML, HTML, and even text files. AJAX’s most appealing characteristic, however, is its "asynchronous" nature, which means it can do all of this without having to refresh the page. This lets you update portions of a page based upon user events.
  • 20. Itinerary Planner: A Mashup Case Study Itinerary Planner Mashup (IPM). IPM is a Single-page application that allows users to create an itinerary of the destinations (cities) that they plan to visit and display these destinations on a map. Users can display additional information about each destination including weather data (derived from Yahoo Weather RSS feeds) and other local information (derived using the Google Ajax Search API).
  • 21. Itinerary Planner: A Mashup Case Study 1. User Interface Design The Trip Planner floating pane allows users to type the country name into a combo box widget; the Trip Planner then populates the list-box with the list of major cities and charts the route on the map as illustrated in the Figure below. When users select (click on) a place marker on the map, the application displays the current weather information using the Yahoo weather RSS feeds.
  • 22. Itinerary Planner: A Mashup Case Study Selecting a destination from the list-box and clicking the “Google” icon causes the application to launch a new floating pane containing the search results that relate to the selected destination. The search floating pane includes Video, Blog, News, Book, Local and Web results as shown in the Figure below. The place markers on the map are numbered according to the order specified in the Trip Planner list and the colors indicate the start (green) and end (red) of the trip.
  • 23. Itinerary Planner: A Mashup Case Study 2. Data Integration Design The Google Maps API retrieves Google Maps, the Google Ajax Search API allows customized display of Google Search results and the Yahoo RSS Weather feeds provide the current weather and forecast information. While the Google Maps API and the Google Ajax Search API are accessed directly by the client-side Javascripts, the Yahoo RSS feeds are retrieved by a server-side PHP script. The PHP XML_RSS Parser was used to process the RSS feeds
  • 24. Itinerary Planner: A Mashup Case Study