2009年6月15日 星期一

RunPC172期：Gadget小工具設計實務：以台灣高鐵乘車資訊全方位指南為例(上)

Yahoo!奇摩總經理鄒開蓮表示，「Web 2.0的精神是將原本單向的服務，轉變成由網友共同參與互動的網路溝通。而Widget小工具正是Web 2.0精神的展現。」

 

所以在談Gadget小工具設計前，我們先來談一下Web 2.0，Web 2.0這個概念是在2004年3月由歐萊禮媒體公司在一次會議上由歐萊禮媒體公司負責線上出版及研究的副總栽Dale Dougherty提出；2005年9月30日歐萊禮媒體公司主席兼CEO Tim O'Reilly發表一篇『什麼是Web 2.0：下一代軟體設計樣本與商業模式』，該篇文章成為Web 2.0中標誌性的文章；同年10月他們對Web 2.0給予一個簡潔的定義，『Web 2.0是一個作為平台的網路，它跨越了所有連接的設備；Web 2.0的這些應用構成了這個平台的優勢所在：發佈軟體成為一個持續更新的服務，並使更多的人更好地使用這些服務；獲取並重組那些包括其它個人使用者在內的各種來源的資料，並對其它人提供自已的資料與服務以便他們以同樣的方式使用；通過一種【共用網路架構】的方式高效地創建網路，並提供比Web 1.0更豐富的使用者體驗。』；了解Web 2.0的定義後，來看筆者所設計的『台灣高鐵乘車資訊全方位指南』網頁小工具(Web Gadget)，它是獲取台灣高鐵網站的相關乘車資訊與使用UrMap提供的地圖API(應用程式介面)，整合開發出一個迎合使用者體驗的小工具，它可放置在微軟的Live.com或Windows Live Spaces或Google的iGoogle還是自已的網站上。

 

何謂Gadget、Widget？

Gadget或Widget，中文稱它為小工具；Web Gadget即是網頁上的小工具，這些小工具都具有簡單易用、精巧的特性，它只要能取得部分特定資訊或完成某種特定功能的小軟體即是。所以它的設計原則為：針對單一功能、簡單、易用、直覺操作、使用者友善，總之一個好的小工具需要發揮它的實用性與資訊取得的便利性，而且還要有簡單易用的介面。表一是各知名廠商發展Gadget的一覽表，分為桌面小工具與網頁小工具。

表一：各知名廠商發展Gadget的一覽表

廠商

桌面小工具

桌面小工具執行環境

網頁小工具

網頁小工具執行環境

Microsoft

Microsoft Gadgets

Vista Sidebar

Web Gadgets

Live.com、

Windows Live Spaces

Google

Google Gadgets

Google Desktop

Universal Gadgets

iGoogle、

任何網頁內

Yahoo

Yahoo Widget

Yahoo Widget Engine

－

－

 

其實不論是桌面的小工具或網頁小工具Gadget、Widget，都是在「大程式」裡執行的「小程式」；所謂桌面大程式就如Vista內的Sidebar工具、Google的Google Desktop或者用來執行Yahoo! Widget的Yahoo! Widget Engine；而網頁大程式即瀏覽器。至於小程式，不管是桌面的或網頁一般是由HTML、JavaScript和XML所開發，HTML負責介面呈現、JavaScript處理程式邏輯、XML為配置設定，當然亦可使用呈現較豐富介面的Flash、Microsoft Silverlight配合來完成，若是桌面的小工具小程式，還可利用.NET、Java、C++…等程式來實作。在了解Gadget後，讓我們看台灣高鐵乘車資訊全方位指南這個網頁小工具。

 

 

 

台灣高鐵乘車資訊全方位指南小工具功能介紹：

我們分詳細地圖資訊、標準查詢功能與快速查詢功能三部分來介紹。

詳細地圖資訊：


如圖一所示，除可在UrMap上呈現台灣高鐵各站點外，對於各站點亦提供轉乘公車路線、24hr網路訂位、站點週邊景點資訊(公園、美食、博物館、風景、遊樂園、其它)等相關連結內容，和站點的地址。



圖一：台灣高鐵乘車地圖資訊

標準查詢功能：

如圖二所示，我們可以指定啟站、到站、時刻查詢區間與查詢的種類，即可依條件查詢出各車次的時間與各票價別的票價；當你設定啟站、到站時UrMap地圖會依所選的站別連動放大置中。



圖二：台灣高鐵乘車標準查詢

快速查詢功能：

筆者在想有沒有能更精簡的查詢方式，讓操作者能更直覺、更方便的方式來操作，此查詢不外乎設定啟站點與到站點和設定要查的是啟站時間或是到站時間，若可直接由UrMap地圖上點選站點來設定為啟站點或到站點，同時能指定要查詢的是查詢啟站時間或是到站時間，那就完美囉！而關於查詢的時間範圍就放到最寬即可。如圖三所示，站點的地圖資訊內的『查：啟啟、啟到、到啟、到到』，分為是指定該站點為啟站點查啟站時間、指定該站點為啟站點查到站時間、指定該站點為到站點查啟站時間、指定該站點為到站點查到站時間。所以我們可以以很直覺、很簡便得方式完成整個查詢動作。

了解整個台灣高鐵乘車資訊全方位指南小工具功能後，接下來我們來看這個台灣高鐵乘車資訊全方位指南小工具是如何進行實作開發的。



圖三：台灣高鐵乘車快速查詢

 

台灣高鐵乘車資訊全方位指南小工具開發五步驟：

1、首先規劃儲存台灣高鐵乘車時刻與票價資訊的資料庫規格。

2、取得台灣高鐵乘車時刻與票價資訊的資料進資料庫。

3、申請 UrMap API 授權碼(因為要使用地圖呈現高鐵站台位置)。

4、利用ASP.NET 2.0 CallBack機制撰寫AJAX程式。

5、將AJAX程式包裹成Web Gadget。

 

資料庫設計

這只是個小工具，所以用到的資料庫物件亦不多，僅有二個資料表分別依上所介紹的查詢功能，查詢時刻與票價兩資料表、一檢視表、二個預存程序亦依查詢功能規劃查詢時刻與票價兩者，詳細說明如下：

票價資料，由高鐵官方網站http://www.thsrc.com.tw/tw/ticketing/fare.asp與http://www.thsrc.com.tw/tw/ticketing/fare_bc_080215.html取得，故依票價網頁解析其提供欄位，可設計建立一票價資料表(名稱：Fare)，欄位及說明如表二。

表二：高鐵票價資料表(Fare)規格

欄位名稱

資料型態

說明

Sno

bigint

主鍵，流水號

SSite

varchar(2)

啟站編號

ESite

varchar(2)

到站編號

FareType

varchar(2)

票價別(*)

Prices

bigint

票價

SDate

smalldatetime

資料適用啟始日

EDate

smalldatetime

資料適用終止日

*：0)標準車廂-全票 1)商務車廂-全票 2)標準車廂-優待票 3)商務車廂-優待票 4)自由座-全票 5)自由座-優待票 6)標準車廂-團體票 7)商務車廂-團體票。

 

高鐵各站時刻資料，由高鐵官方網站http://www.thsrc.com.tw/tw/ticketing/timetable_south.html取得南下時刻資料與http://www.thsrc.com.tw/tw/ticketing/timetable_north.html取得北上時刻資料，故依高鐵時刻網頁解析其提供欄位，可設計建立一高鐵各站時刻資料表(名稱：SiteTimes)，欄位及說明如表三。

 

表三：高鐵各站時刻資料表(SiteTimes)規格

欄位名稱

資料型態

說明

Sno

bigint

主鍵，流水號

AltSno

varchar(5)

車次

NS

char(1)

北上(N)、南下(S)

SiteID

varchar(2)

高鐵站台編號(*)

SiteTime

varchar(50)

開車時間

PS

nvarchar(50)

備註，特定開車日

*：1)台北 2)板橋 3)桃園 4)新竹 5)台中 6)嘉義 7)台南 8)左營

 

兩資料表設計完後即可透過引用Microsoft.mshtml.dll元件，撰寫取得票價與時刻表網頁HTML內容，再進行剖析存入所對應的資料表內。當然若沒有將資料寫入資料庫內亦可，唯每次查詢時皆需進行每次四個網頁的取得、剖析再過濾篩選，再效能上會差上許多，且若網頁格式更改亦是一大問題，故此處的作法是將剖析完的資料存入中介的資料庫內，再進行資料庫內資料的查詢即可，唯擔心資料時間差問題，所幸該處資料並不常異動，且我們在資料庫設計時亦已考慮資料適用啟終日問題。而網頁資料的取得、剖析、匯入並非本編的重點，讀者可進一步參考其它相關資料。

 

因高鐵各站時刻資料表(SiteTimes)只存各站時刻資料，不易查詢啟到站兩站的啟站時刻、到站時刻與車次，故我們利用高鐵各站時刻資料表再與本身Join建立一啟到站時刻檢視表(QSiteTimes)，如程式一所示，加入到站站台(ESiteID)與到站時刻(ESiteTime)，如此一來即可很容易輸入啟到站兩站，查各車次啟站時間或到站時間表。

 

程式一：啟到站時刻檢視表(QSiteTimes)

SELECT         dbo.SiteTimes.AltSno, dbo.SiteTimes.NS, dbo.SiteTimes.SiteID,

               dbo.SiteTimes.SiteTime, SiteTimes_1.SiteID AS ESiteID,

               SiteTimes_1.SiteTime AS ESiteTime, dbo.SiteTimes.PS

FROM           dbo.SiteTimes INNER JOIN

               dbo.SiteTimes AS SiteTimes_1 ON

               dbo.SiteTimes.AltSno = SiteTimes_1.AltSno AND

               dbo.SiteTimes.NS = SiteTimes_1.NS AND

               dbo.SiteTimes.Sno <> SiteTimes_1.Sno AND (dbo.SiteTimes.NS = 'S' AND

               SiteTimes_1.SiteID > dbo.SiteTimes.SiteID OR

               dbo.SiteTimes.NS = 'N' AND SiteTimes_1.SiteID < dbo.SiteTimes.SiteID)

 

有了啟到站時刻檢視表(QSiteTimes)後，接著建立一輸入啟到站與時間區間來查詢某時間區間內該啟到站的車次資料預存程序(GetTime)，內容如程式二所示。

 

程式二：查詢車次資料預存程序(GetTime)

Create PROCEDURE dbo.GetTime

     (

     @SSiteID varchar(10),

     @ESiteID varchar(10),

     @SSiteTime varchar(10),

     @ESiteTime varchar(10),

     @SEType varchar(10)

     )

AS

Declare @NS varchar(10)

IF @SSiteID>@ESiteID

     Begin

           Set @NS='N'

     End

Else

     Begin

           Set @NS='S'

     End

IF @SEType='0'

     Begin

           SELECT         AltSno, SiteTime As SETime, IsNull(PS,'')

           FROM             QSiteTimes

           WHERE         (SiteID = @SSiteID) AND (ESiteID = @ESiteID) And NS=@NS And SiteTime Between @SSiteTime And @ESiteTime

     End

Else

     Begin

           SELECT         AltSno, ESiteTime As SETime, IsNull(PS,'')

           FROM             QSiteTimes

           WHERE         (SiteID = @SSiteID) AND (ESiteID = @ESiteID) And NS=@NS And ESiteTime Between @SSiteTime And @ESiteTime

     End

 

該台灣高鐵乘車資訊全方位指南小工具除可查詢高鐵時刻外，也提供快速查詢出兩地票價，故我們建立另一預存程序(GetPrice)，輸入兩站台編號，取得所有票價別票價，該預存程序內容如程式三所示。

程式三：查詢啟到站票價預存程序(GetPrice)

Create PROCEDURE dbo.GetPrice  

     (

     @SSiteID varchar(10),

     @ESiteID varchar(10)

     )   

AS

Declare @SE varchar(10)

IF @SSiteID>@ESiteID

Begin

     Set @SE=@SSiteID

     Set @SSiteID=@ESiteID

     Set @ESiteID=@SE

End

SELECT         FareType, Prices

FROM             Fare

WHERE         (SDate IS NULL OR

               SDate <= GETDATE()) AND (EDate IS NULL OR

               EDate >= GETDATE()) AND (ESite > SSite) And SSite=@SSiteID And ESite=@ESiteID

Order By FareType

 

UrMap API介紹

至此我們完成整個資料庫的規劃與資料的取得，接下來因要以地圖方式呈現，故需申請其它廠商提供的地圖功能，目前提供地圖服務較知名的即是UrMap與Google Map兩者，本例是選擇國產的UrMap來示範，申請UrMap API的位置：http://www.urmap.com/SearchEngine/api/signup.html，申請方式十分簡便，僅需填入要申請的網站目錄、Email即可獲得UrMap API 授權碼；而UrMap API的相關教學可參考http://www.urmap.com/SearchEngine/api/documentation/，而本範例所用到的UrMap API功能簡介如下：

程式四：嵌入 UrMap API

<script src="http://www.urmap.com/SearchEngine/api/getapi.jsp?v=1&key=【ThsrcKey】"

type="text/javascript">

</script>

* ThsrcKey：置換為所申請的UrMap API 授權碼。

 

程式五：設定地圖中心點

var map = new UMap(document.getElementById('map'));

map.centerAndZoom(new ULatLng(25.035405, 121.520255), 9);

 

程式六：自訂地標圖示

// 先產生一個自訂圖示的 UIcon

var myIcon = new UIcon();

myIcon.image = 'http://www.urmap.com/SearchEngine/api/img/s.gif';

myIcon.iconWidth = 26;

myIcon.iconHeight = 30;

myIcon.iconAnchor = new UPoint(13, 30);

myIcon.infoWindowAnchor = new UPoint(13, 0);

 

程式七：自訂圖示的地標

// 函式：用來產生一個使用自訂圖示的地標

function createMarker(point) {

  var marker = new UMarker(point, myIcon);

  marker.addListener('click', function() {

    marker.openInfoWindow('Hello!');

  });

  return marker;

}

 

本範例用到的就僅這些UrMap API的延伸使用，十分簡易撰寫。

張貼者： 於
標籤： , , ,
加入書籤： MyShare HemiDemi Baidu Google Bookmarks Yahoo! My Web PChome Del.icio.us Digg technorati furludn bookmark 其他更多書籤

BOOKS：New and Upcoming