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

2. رابطه SOA و Cloud

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

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

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

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

7. Mashup Site

9. انواع Component/API در Mashup

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

13. مقایسه پرتال و 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.

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

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

16. انواع mashup

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

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

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

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

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

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

23. نمونه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 Things + 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

24. نمونه 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

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

26. روش 1: ایجاد خودکار ایجاد خودکار بدون کدنویسی
روش 1: ایجاد خودکار
ایجاد خودکار
بدون کدنویسی
بدون نیاز به دانش برنامه نویسی
ایجاد map mashup
ایجاد mashup برای شبکه های اجتماعی

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

28. Yahoo Pipes
Data mashup

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

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

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