臺灣博碩士論文加值系統

現在有相當多的不同的網站提供不同的服務，比方說影片動畫網站Youtube [2]、照片上傳瀏覽網站Flickr [4]，它們都是獨立自主的網站，服務和功能皆不同，但是當使用者需要的功能同時需要由不同網站提供時，則需過混搭整合方式，來實現一項新的服務系統。
我們設計了一個Mashup Engine，當作處理不同資料來源的中心。並透過物件導向的方式將讀進來的圖片細節資訊轉成物件作中介儲存，以便作其他處理，例如轉換成不同的格式，儲存至資料庫，或對資料作統計分析等。我們並設計了一個介面，可以讓程式人員依不同的地圖顯示標的主題，來建立不同的Class，以方便在網頁畫面上有不同主題特色的展示。
我們使用Mashup將圖片來源Flickr、影片來源Youtube、世界地圖Google Maps [3]整合之後成為一個新的應用，可以透過搜尋系統，輸入一種主題關鍵字，找尋分佈於世界的照片與影片，讓使用者對該主題內容有更深的了解，並且作資料上的建立與儲存。

There are currently many different websites for multimedia applications. Youtube, an online stream website and Flickr, a photographs sharing website, are such examples. Most websites are independent and they provide different services and functions. When the functions that a user needs have to be provided by more than one website, the functions can be mashed up by integrating the services from different websites.

We designed a mashup engine that can process and present data from different data sources. The mashup engine can convert the information of the images received into objects so that further processing can be facilitated, such as to convert to different formats, to store in a database, and to perform data analysis. We also designed an interface for programmers to classify different subjects, so that they can be presented distinctively.

We use the mashup engine to integrate Flickr, Youtube, and Google Maps into a new application. A user can use keywords to search pictures and videos which may be distributed in the world. This allows the users to better understand a specified topic and to store the data in a database.

中文摘要 ……………………………………………………………………………I
Abstract……………………………………………………………………………II
誌謝 ………………………………………………………………………………III
目錄…………………………………………………………………………………IV
圖形目錄……………………………………………………………………………VI
表格目錄 …………………………………………………………………………VII
第一章 前言…………………………………………………………………………1
1.1 動機與目的 ……………………………………………………………3
第二章 背景知識……………………………………………………………………4
2.1 Mashup 應用……………………………………………………………4
2.2 Flickr Service ………………………………………………………4
2.2.1 Flickr基本服務 …………………………………………………5
2.3 Google Maps API………………………………………………………8
2.4 Youtube API …………………………………………………………10
第三章 系統設計與實作 …………………………………………………………12
3.1 以物件導向基底的資料架構…………………………………………13
3.2 引擎和圖片網站之間的處理…………………………………………16
3.3 引擎和Google Maps間的處理………………………………………17
3.4 引擎與視訊影片之間的處理…………………………………………20

3.5 將資料作物件導向化…………………………………………………21
第四章 系統流程 …………………………………………………………………23
4.1 將地圖點送至地圖上…………………………………………………24
4.2 將資料儲存至 DB ……………………………………………………26
4.3 呈現Youtube 搜尋結果 ……………………………………………28
4.4 Client端、Server端分工……………………………………………29
第五章 結論與未來展望………………………………………………………33
參考文獻……………………………………………………………………………34
附錄一………………………………………………………………………………35


圖1. Moviereviewr網站截圖 …………………………………………………… 2
圖2. Google Maps 使用畫面 …………………………………………………… 9
圖3. 系統畫面 ……………………………………………………………………12
圖4. 系統運作概念圖 ……………………………………………………………13
圖5. 在Microsoft SQL Server 2005 Express
當中Spots資料表的資料模型…………………………………………… 16
圖6. 圖片與地圖結合顯示的畫面 ………………………………………………20
圖7. 將地圖點送至地圖的Sequence Diagram………………………………… 24
圖8. 將資料儲存至 DB的Sequence Diagram …………………………………26
圖9. 為從網頁上的GridView顯現儲存的點資訊………………………………27
圖10. 呈現Youtube 搜尋結果的Sequence Diagram …………………………28
圖11. Mashup Engine的Class Diagram ………………………………………32


表1. Flickr部分API功能列表 …………………………………………………5
表2. 以flickr.photos.search送出Request的網址…………………………………7
表3. 來自Flickr網站回傳的XML圖片列表………………………………………8
表4. 來自Flickr網站回傳的JSON圖片列表……………………………………8
表5. Google Maps JavaScript程式範例 ………………………………………9
表6. 寫在Server端的處理Flickr Response字串程式…………………………17
表7. 取得Flickr端圖片的網址串法………………………………………………19
表8. 超連結Image HTML Tag……………………………………………………19
表9. 欲Submit到Server端的字串構成語法 …………………………………21
表10. 寫在Server端的控制Client端撥放連結語法……………………………29
表11. 寫在Client端的Youtube Player API及其觸發動作函式 ………………30

[1] Jeffrey Wong and Jason Hong,
“What Do We "Mashup" When We Make Mashups?”, In Proceedings of the 4th International Workshop on End-user Software Engineering, 2008, pp. 35.
[2] Youtube, http://www.youtube.com/, 2010.
[3] Google Maps, http://maps.google.com/, 2010.
[4] Flickr, http://www.flickr.com/, 2010.
[5] ProgrammableWeb, http://www.programmableweb.com/, 2010.
[6] Flickr Service, http://www.flickr.com/services/api/, 2010.
[7] Google Maps API, http://code.google.com/intl/zh-TW/apis/maps/documentation/index.html, 2010.
[8] Muhammad Raza, Farookh khadeer Hussain, and Elizabeth Chang,
“A Methodology for Quality-based Mashup of Data Sources”, In Proceeding of the 10th International Conference on Information Integration and Web-based Applications & Services,2008, pp. 529.
[9] F. Yang, “Enterprise Mashup Composite Service in SOA – User Profile Use Case” , in 2008 IEEE Congress on Services- Part I, 2008, pp. 97-98.
[10] Y. Yuan and Q. Chenga, “Integrating Web-GIS and Hydrological Model: a Case Study with Google Maps and IHACRES in the Oak Ridges Moraine Area, Southern Ontario, Canada,” in IEEE International Geoscience and Remote Sensing Symposium, 2007, Barcelona, pp. 4574-4577.
[11] Dong Liu, Xian-Sheng Hua, Linjun Yang, Meng Wang, and Hong-Jiang Zhang, “Tag Ranking”, in Proceedings of the 18th International Conference on World Wide Web, 2009, pp. 351-360.
[12] Movie Reviewr, http://www.moviereviewr.com/, 2010.
[13] Yahoo!, http://www.yahoo.com/, 2010.
[14] Flickr API, http://www.flickr.com/services/api/, 2010.