Mash-up مشاپ دوره SOA استانداری قم - جواد تقی زاده

رابطه SOA و Cloud

**JSON – JavaScript Object Notaton What is a Mashup? A mashup is a web application combining data or capabilities from more than one source into an integrated experience Popular on the consumer web - over 3.45 new mashups/day are appearing: Pageflakes.com Zillow SeatSnapper What typically characterizes a mashup? Lightweight integration of applications (enables rapid development) “Widgets” that make up a mashup are often developed and deployed independently without knowledge of each other Widgets can be mashed and wired together in the browser Utilize web technologies like HTTP, **JSON, XML, JavaScript, Atom, RSS Often incorporates one or more public API and online services Often, mashups can be customized by the end user Broad definition, so best explained via examples – let’s start with consumer web Zillow- home prices on map Seatsnapper- Event tickets website. Can view eBay listings on interactive seating maps, and have events that you cannot attend flagged via the Google Calendar API. Pageflakes- personalized start or home pages Very different apps.. But what really makes something a mashup? On the consumer web, Google Personalized Home Page is a good representative of these characteristics. For example, you may build your personalized page with Google Map, Travelocity, Currency Converter, and weather gadgets to compose a travel planning mashup. **JSON – JavaScript Object Notaton

What is a Widget? A widget is a portable chunk of code that can run in any web application without requiring separate compilation How is a widget different than a portlet? Widgets are URL addressable fragments and can be written in any language (Java, .NET, PHP, etc.). Portlets are Java code. Widgets can be as simple as an HTML fragment, so they don’t have to involve any server side code (but they can). Simplicity of model enables developers to learn how to create widgets in a matter of hours versus days. Widgets don’t have a complex packaging structure or require a complex deployment model. >> A simple “hello world” widget can be written in a tool like Dreamweaver, and the file can copied into the file structure on the server. A “hello world” portlet would require a Java-based tool and also consists of multiple files, packaging, and deployment. ویجت We referenced widgets on the previous slide, but what are they really? Widgets are really just portable chunks of code that can run in any HTML-based web page without requiring separate compilation. Widgets are typically HTML fragments with some associated meta-data, like name, title, etc. They can be written in any language and can be generated by server side code, if so desired. Also, unlike portlets, they don’t require deployment or complex packaging. There are several names for widgets – like gadgets, blocks, flakes, etc., but they all refer to the same type of thing. I'd add to the widget slide that widgets are basically URL addressable fragments, portlets are Java code, a special case of an iWidget implementation is implementing it as a portlet that's exposed as an iWidget, but for iWidgets there are many other ways to implement them as well, as you already mention on the chart. You can create widgets in HTML tools like Dreamweaver Our Hello World iwidget can be written in a couple of lines and doesn't require deployment, whereas a portlet needs multiple files, packaging, deployment No widget standards and many vendors have created their own names: gadgets, blocks, flakes, etc.

Mashups are Catching on in the Enterprise, But Why? Lightweight integration enables rapid development and lowers skill set requirements Enables the creation of applications that were previously too costly to build (like situational applications) Extends web app development beyond IT – out to even knowledge workers Reduces IT backlog Availability of many widgets and gadgets allows organizations to assemble applications at a lower cost Once a component is developed, it can be easily reused across different applications, regardless of the underlying technology .NET and J2EE and PHP widgets can communicate together on a page .NET + PHP widgets can be mashed into a J2EE-based app (and vice versa) Wire up for interoperability Self-Service: empower business users to assemble new applications (mashups), reducing application backlog Deliver more innovative, customer-focused applications by supporting end user application development Increase flexibility by delivering more nimble applications Improve productivity and collaboration by delivering situational applications Quickly uncover new business insights by easily assembling information from multiple sources Bigger communities of folks contributing content and functionality Speed Flexibility Innovation Real time problem solving Gartner: By 2010, more than 30% of Global 2000 organizations will enter a new era of end-user computing via user-assembled, composite applications created with enterprise mashup environments.

Mash up ایجاد وب سايت از تركيب سرويس ها و امكانات موجود دو يا چند سرويس دهنده یکپارچگی داده ها وسرویسهای چند منبع دستیابی به خدمات کاملتر: با توجه به گسترش تعداد سرویسها ی اینترنتی با mash up وترکیب سرویسها میتوان به خدمات کامل تری دست یافت. “...a mashup is a web application that combines data from more than one source into a single integrated tool... ” [wikipedia.com – March 24, 2009] “.you can integrate two or more [...] Web APIs to create something new and unique, known as a mashup...”

Mashup Site

انواع Component/API در Mashup

رابطه پرتال و Mashup هر دو تکنولوژی های تجمیع محتوا است تفاوت ها: محتوای پرتال تک بعدی و غیر لایه ای است در مقابل Mashup محتوای Hybrid ای، لایه ای و چند بعدی است پرتال، Portlet محور است در مقابل Mashupمبتنی بر Web API مانند وب سرویس(SOAP) و REST است پردازش ها در پرتال سرور محور است در حالیکه پردازش ها در Mashup توزیع شده بر سرور و کلاینت(توزیع شدگی)

مقایسه پرتال و Mashup Portal Mashup Classification Older technology, extension to traditional Web server model using well-defined approach Using newer, loosely defined "Web 2.0" techniques Philosophy/approach Approaches aggregation by splitting role of Web server into two phases: markup generation and aggregation of markup fragments Uses APIs provided by different content sites to aggregate and reuse the content in another way Content dependencies Aggregates presentation-oriented markup fragments (HTML, WML, VoiceXML, etc.) Can operate on pure XML content and also on presentation-oriented content (e.g., HTML) Location dependencies Traditionally, content aggregation takes place on the server Content aggregation can take place either on the server or on the client Aggregation style "Salad bar" style: Aggregated content is presented 'side-by-side' without overlaps "Melting Pot" style - Individual content may be combined in any manner, resulting in arbitrarily structured hybrid content Event model Read and update event models are defined through a specific portlet API CRUD operations are based on REST architectural principles, but no formal API exists Relevant standards Portlet behavior is governed by standards JSR 168, JSR 286 and WSRP, although portal page layout and portal functionality are undefined and vendor-specific Base standards are XML interchanged as REST or Web Services. RSS and Atom are commonly used. More specific mashup standards such as EMML are emerging.

علت گسترش mashup ها علت گسترش mashup ها در وب به دو علت برمیگرده: با این کار داده های زیادی از منابع مختلف در دسترس قرار میگیره دلیل دیگه اش توسعه یک سری ابزارهایی است که این امکان رو میدن که هر کسی با هر سطح از دانش فنی بتونه ازmashup استفاده کنه

انواع mashup از لحاظ کارکرد map mashup photo Mashup shoping Mashup search Mashup video Mashup travel Mashup social Mashup music Mashup news Mashup messaging Mashup

انواع mashup

Data Mashup ترکیب انواع اطلاعات شبیه به هم از منابع مختلف برای ایجاد ارائه ای واحد

Customer Mashup ایجاد نمایش های ویژوالی متفاوت با ترکیبی از داده های متفاوت برای ارائه اطلاعات

Business Mashup ترکیب منابع داده ای داخل سازمان با وب سرویس های خارجی

نمونه1: Loc.alize.us

نمونه2: Housingmaps.com اطلاعات مکان های اقامت

نمونه3: http://dev.benedictoneill.com/bbc/ دفاتر خبری بی بی سی

نمونه4: tagbulb Tagbulb simplifies tag search by aggregating content from various sources like Flickr, YouTube and many more. Users can browse by content type like images, videos, blogs, bookmarks, podcasts, products, books API 12seconds.tv + 23 + 43Things + 5min + Amazon EC2 + Amazon Product Advertising + AOL Video + arXiv + BBC + BibSonomy + Bing + Blinkx + Blip.fm + Blip.tv + Blogmarks + Buzznet + Cafe Press + del.icio.us + Digg + Digital Podcast + eBay + Eventful + Flickr + Floobs + FriendFeed + Google Ajax Search + Google Books + Google Friend Connect + Google Picasa + Google Search + Grouper Video + Howcast + indeed + Internet Video Archive + ISBN db + Kewego Video + Last.fm + LazyTune + LiveVideo + Ma.gnolia + Photobucket + Raw Sugar + Revver + Riya + ShareThis + Simply Hired Jobs + Smugmug + Spraci + Technorati + Twitter + Upcoming.org + Viddler + VideoSurf + Vodpod + WebShots + Wikipedia + Yahoo Answers + Yahoo Image Search + Yahoo Local Search + Yahoo Mail + Yahoo Related Suggestions + Yahoo Search + Yahoo Video Search + YouTube + Zooomr

نمونه 5: www.actionzap.com allows you to make online reservations with fun, customer recommended adventures and activities across the country! It provides combined and aggregated reviews and ratings for each business! It displays relevant daily deals for each search! Make a reservation now in minutes! APIs: CityGrid Google Geocoding Google Maps Yahoo Local Search Yelp Yipit

دایرکتوری Mashup http://www.programmableweb.com/mashup/ http://pipes.yahoo.com/pipes/ روش های ایجاد Mashup: ایجاد کاملا خودکار ایجاد نیمه خودکار ایجاد با کدنویسی

روش 1: ایجاد خودکار ایجاد خودکار بدون کدنویسی روش 1: ایجاد خودکار ایجاد خودکار بدون کدنویسی بدون نیاز به دانش برنامه نویسی ایجاد map mashup http://www.mapbuilder.net/ http://www.wayfaring.com ایجاد mashup برای شبکه های اجتماعی http://www.sharelinkgenerator.com/

روش 2: ایجاد نیمه خودکار عدم نیاز به کدنویسی احتیاج به دانش فنی استفاده از ابزارهای ویرایش گر: Google Mashup Editor: سال 2009 متوقف شده Yahoo Pipes IBM QEDWiki WSO2 Mashup Server DERI Pipes

Yahoo Pipes http://pipes.yahoo.com/pipes/ Data mashup

نمونه ایجاد مشاپ جستجو در RSS Feed ماژول های مورد استفاده: fetch filter uniq textinput Urlinput

نمونه سایت طراحی شده به کمکQEDwiki AccuWeather.com سایتی اطلاعات آب و هوایی نمایش اطلاعات به صورت پیش فرض بر اساس محل مراجع کننده نمایش اطلاعات در زمان های مختلف

مقایسه ابزارهای ویرایشگر mashup