5. Mashup Tools

Mashup
混搭(Mashup)顧名思義就是將不同的元素或是來源整合在一起呈現,不管是在音樂或是影片中常常也可以看到這樣的手法,而Mashup原出自於在流行音樂中,將兩種不同風格的音樂混合,來產生不同的效果跟樂趣,將許多不同的片段剪輯在一起也都算是混搭的一種,在Web2.0中指的則是將不同的服務透過像是API的方式,將不同的資料整合呈現。要自行寫出程式碼來加入想要的功能並不容易,所以就產生了Mashup Tool來幫助使用者快速方便的完成混搭網頁。

同樣的在Web1.0中,也可以將某些行為視為Mashup,假如我們把圖片視為一種服務,則在一片圖文並茂的網頁中,可以說是混搭了不同的服務在裡面。這一類的資料聚合(Data Aggregation) ,包括入口網站(Portal)等,都是Mashup的前身。

Mashup幾種比較常見的類型
(一)   Map Mashup
最早是由Google開放了google map API,讓許多網路開發人員運用,之後Microsoft(Virtual Earth)、Yahoo(Yahoo Maps)和 AOL(MapQuest)也很快相繼公開了自己的 API。
(二)    photo and vedio mashup
這個相當常見,最簡單的方式就是在Blog中嵌入youtube的影片。
(三)    search and shopping mashup
最重名的例子是Amazon,開放了API來吸引網頁開發人員開發不同的購物介面,進而吸引更多消費者。
(四)    news mashup
Diggdot.us它合併了 Digg.com、Slashdot.org 和 Del.icio.us 上與技術有關的內容,建立出個性化的報紙來滿足讀者要求。

Mashup的種類:
根據Wikipedia中的描述,Mashup可以大略的分成三類,分別為Consumer Mashups,Data Mashups,Business Mashups。

Consumer Mashups
這類的Mashup為最直覺最常見到的方式,使用者直接使用網路上的資源,Google就為其中的例子,使用者可以直接透過Google提供的介面,來使用許多不同的服務,然而這些服務都可以透過簡單的介面操作完成。

Data Mashups
Data Mashups主要是指使用者透過撰寫一些程式及設定的方式來達成的,這種方式可以讓使用者選擇自己想要的資料來重整聚合,一般來說不會太過複雜,透過部分平台的幫助,可以很輕易的達成,Yahoo pipe即為其中的一個例子,使用者可以透過拖拉的方式再加以設定,就可以呈現出具有個人特色的Mashup應用。

Business Mashups
這類的Mashup方式主要是結合上面兩種種類,同時結合了不同的資料聚合,並且提供介面操作以符合需求,通常還會搭配上資料庫的使用分析,為比較進階的方法。另外,若是Mashup另外一個Mashup過的結果,稱之為”Monster Mashups ”。

Mashup的步驟:
一般來說當在實作Mashup的時候,會分成幾個步驟來看,接著一步一步實作出來,實作Mashup的應用大約可分成七個步驟,分別為:
(一)決定Mashup的目標
在開始設計前,必須先決定Mashup 的目標是什麼,想要做到甚麼樣的功能,還有服務哪些需求的使用者,這些都是必須事先想好的。

(二)辨別Data & Keys
在確定目標以後,再來一定會有很多的data,哪些data的值是我們所要的,哪些是必須用來辨別用的,也就是所謂的Keys,確認這些Keys可以使我們正確的取得想要的結果。

(三)取得資料
這個步驟重點在於如何去取得我們想要的資料(data),在取得資料的方式上普遍又分成了三種
1.    透過已有的API取得資料,雖然對於資料本身並沒有直接的存取權限,但是利用已有的API,只要加以過濾和設定,進而取得想要的資料,這種方式是目前大多數人較傾向的使用方式。
2.    沒有API使用,但是對於資料本身有直接存取的權限,像是自家的主機或是本身自己就有資料庫可以取得資料,這樣的方式是最直接的方式。
3.    直接使用公開的資料,透過直接存取現有的資料拿來用,例如公開的RSS,或是網頁上資料,我們可以硬抓取下來分析成可用的格式,這種方式又稱為Web Scraping。

(四)重新整理
這步驟主要用來重新思考之前的定義和找的Key值是否正確,是否能達到想要的結果,如果一切無誤的話,就可以著手更進一步設計,如果還是有不對的地方請回到第一步驟重新思考一次。

(五)設計介面
在檢查完目的跟如何取得資料後,再來就可以開始考慮看看想要呈現的介面應該是個什麼樣子呢?一般來說介面當然是越簡單越好,而一個Mashup呈現的頁面普遍來說分成兩種
1.    提供簡單輸入格式,使用者在輸入後可及時取得和輸入相關的資訊。
2.    直接顯示所提供整理過的資料。
確定Mashup該如何呈現後,接著就是實作跟整合了。
注意到這邊為止都還在規劃Mashup該如何呈現,畢竟一個好的規劃可以帶來很多的好處的。

(六)實作
規劃完畢後,這部分就是最後的實戰階段了,選擇想要使用的程式語言,最常見的即為PHP,將之前規劃好的部分開始實作出來,因為這部分涵蓋的範圍較廣,不同目的的程式也會有不同的實作方法,所以就不往更深入的部分解說了。

(七)起始頁面
最後一個步驟當然就是把寫好的程式擺上網路服務大家了,當然不管服務的目的是什麼都必須有個起始頁面提供服務,針對你的Mahsup需要的欄位設計一個起始頁面吧。

以上簡單的將設計Mashup的過程大約分類,依照這樣的流程設計,應該就可以很快的設計出想要的Mashup了,但是在這之中還是有很多難題,例如說光是使用API的部份就會有很多種資料格式了,所以往往在選擇使用的API時,有些網站光是回傳的資料格式就多的很嚇人,以下將簡單介紹常見的資料格式。

Mashup 常見技術與資料標準格式:
在網路上傳遞資料時,最常使用的就是XML格式的資料了,透過XML的特性可以將資料輕易的在不同平台或是網站之間傳遞,常見資料處理與表示的技術如下:

XMLHttpRequest
XMLHttpRequest是一套可以在Javascript、VBScript、Jscript等腳本語言中通過HTTP協議傳送或是接收XML及其他數據的一套API。透過XMLHttpRequest的應用,可以增加HTTP前後端的互動效果,提供使用者及時的互動效果,目前最常被應用的AJAX也是使用此方法來達到互動效果的。

XML-RPC
XML-RPC使用HTTP做為傳輸協定,主要的目的在於使用XML做為資料編碼方法的遠端程序呼叫(RPC)[註一],盡可能簡單讓複雜的資料結構用XML格式傳送。

RSS/ATOM
RSS是一種用於內容發佈轉換的XML格式,最常見的就是在Blog中提供的RSS Feed,透過軟體訂閱,我們可以透過RSS來取得最新的資訊。

JSON
JSON全名為Javascript Object Notation,主要的用處在於用另外一種方式來表現XML格式的資料,取代了原本XML龐大文件格式與複雜結構的缺點,透過很簡單的方式將資料表達出來,在使用跟傳輸上都比操作XML來的簡單,不過在對於更複雜的資料格式處理能力就沒有XML來的好用了。此外,JSON符合JavaScript語法,<script>標籤可不遵守Same Origin Policy 或Cross Site Limitation,使用較有彈性,但也較不安全。

 Mashup Tools:
在實作Mashup時,除了自己規劃自己撰寫之外,還可以透過很多現有的Tool,像是Google 所提供的Mashup editor以及Yahoo! 提供的Yahoo! Pipes、Microsoft Popfly等服務都可以很輕易的做出屬於自己的Mashup應用,以下針對這三個服務做簡單的介紹。

Yahoo! Pipes
Yahoo! Pipes為Yahoo!所推出的Mashup的服務,Pipe是根據UNIX中的pipe指令命名的,使用者可以透過簡單的拖拉甚至不必用到程式的基礎,就可以做出Mashup的應用,簡單的介面很容易就可以上手。以下為一個簡單的教學影片網址,在幾分內就學會怎麼使用Yahoo! Pipes。
http://www.jumpcut.com/fullscreen?id=594F555C568011DC9D24000423CEF5B0&ty...

 Google Mashup Editor
Google Mashup Editor 為Google所推出的一套Mahshup服務,以Ajax技術所開發,透過簡單的設定一些Google所設定的XML Tag,可以將很多訊息整合再一起,並且可以快速的套用其他Google所推出的服務,讓使用者做出自己想要的Mashup。 以下兩個網址為Google所提供的教學,參考性很高。
http://code.google.com/gme/docs/gettingstarted.html
http://code.google.com/gme/docs/screencasts.html

Microsoft Popfly
Microsoft相關的Mashup應用服務,稱為Popfly,不過是以Silverlight的技術所開發的,可以讓使用者嵌入網頁、Blog、MAP、Flickr等服務,目前也有相當多的使用者數。Popfly的網站,在首頁就可以看到相當多使用者的作品!!
http://www.popfly.com/Home.aspx

 

IBM Lotus Mashups

提供輕量型的混搭環境,可將個人、企業和 Web 內容組合成簡單、靈活的動態應用程式。可以利用附屬的工具使用拖移的方法或者自己寫程式來增加混搭的風格,整個畫面看起來很漂亮,但缺點是速度很慢.

http://www-01.ibm.com/software/lotus/products/mashups/

Reference
運用GME(google mashup editor)和Yahoo pipes!的過程
http://blog.radioactiveyak.com/2007/07/fuel-price-mashup-web-development...
一個講解Mashup的影片,講解還不錯,不懂的人可以看看
http://news.zdnet.com/2422-13569_22-152729.html
維基百科
http://zh.wikipedia.org/wiki/%E6%B7%B7%E6%90%AD
Mashups
http://www.ibm.com/developerworks/cn/xml/x-mashups.html

[註一] RPC 遠端程序呼叫(Remote Procedure Call,RPC)是一個電腦通信協議。該協議允許運行於一台電腦的程序調用另一台電腦的子程序,而程式設計師無需額外地為這個交互作用編程。如果涉及的軟體採用物件導向編程,那麼遠程過程調用亦可稱作遠程調用或遠程方法調用。