在此章節將介紹社群網路 API 系統的設計與實作。本系統分為兩大類元 件：第一類為 RSS 類元件，含三個子元件，分別是 Client 端元件、App Server 端元件及 RSS File Generator 元件；第二類為 Social Web 類元件，含兩個子 元件，分別是 Client 端元件及 App Server 端元件。系統概觀如下圖。
圖 12 System Model Diagram of the Social Web Service
本系統的兩大類元件，皆各分為Client與Application Server兩部份。在 Client的部份，是架構在一個Firefox的Extension上，稱為SocialWeb Extension，其內有兩個元件，四種API，底層以XUL及JavaScript所開發。在 App Server的部份，包含有三個元件，其中的RSS App Server Unit及Social Web App Server Unit是以JSP Server及DB Server所開發，而RSS File Generator
Unit則是一利用JRex Browser Component[17]這一Java Class Library所開發 出的Java Service，目的在背景抓取網頁內容並萃取出程式所需的資訊。在 Client與Server之間則以AJAX方法來通訊，輸出文件格式包含Web Service模 式的XML，以供Client程式讀取並可成為API讓third party的Extension使用；
輸出亦包含HTML，以提供user一個friendly的UI。
3-1 RSS 類元件系統架構 3-1-1 系統架構
本系統使用的軟體，在 server 方面，Application Server 為 Tomcat，
Database Server 為 MySQL DB Server，Service Program 為一 Java 程式，使 用到了 JRex Class Library；而在 client 方面，則是利用 Firefox 瀏覽器為 platform，在其上使用 JavaScript 與 XUL 來開發 Extension，來做為本研究的 客戶端。以下是詳細的版本資訊：
表 1 RSS 類元件使用軟體版本
角色 軟體
應用伺服器 Apache Tomcat 6.0 JAVA Virtual Machine JDK 1.5.0
資料庫軟體 MySQL Server 5.0 JAVA 類別庫 JRex 1.0b1
瀏覽器 Mozilla Firefox 2.0.0.20
系統架構請參考如下的系統架構圖：
圖 13 RSS 類元件系統架構圖 1
在系統架構圖中的深綠色(深色)虛線圓圈就是本研究所開發的社群網路 服務，本社群網路服務中 RSS 系統的部份，其資料流在上圖中是以淺綠色(淺 色)實線來表示。當使用者欲在任意一個網頁中，自訂自己所需的 RSS，需要先 在使用者的 Firefox 瀏覽器上安裝本研究開發的 Extension，即 SocialWeb Extension (簡稱 SWE)，在此以 1 號瀏覽器表示之，火狐圖示代表 Firefox，
而 puzzle piece 圖示代表 Firefox 上安裝的 SWE。使用者在此瀏覽器上載入某 個網頁，在網頁上選擇他所需的資訊以做為 RSS 的內容，SWE 會將使用者選取 的網頁條目，分析其 XPath 之後，連同使用者提供的一些資訊，例如使用者名 稱、密碼、RSS 類別、更新 RSS 的時間間隔等，將此資訊使用 AJAX 技術傳遞給 Application Server (簡稱 App Server)，記錄在 DB 之內，如上圖所示。
圖 14 RSS 類元件系統架構圖 2
之後，App Server 上的一個 Service，即上圖的 RSS File Generator，會 依照使用者要求的更新 RSS 時間間隔，每隔一段時間，就連線到當初使用者抓 取 RSS 條目的網站，即圖左的 Web Site for Web Page Extraction，此服務將 使用者設定的網頁抓取下來之後，會去剖析 (parse) 這個網頁，依據 DB 中所 存的 XPath，抓到目標網頁中對應內容後，產生 RSS file，放在一個 File System 中，App Server 便能依此提供 RSS 服務。
RSS Feed 完成之後，任何一個使用者，不論是否安裝 SocialWeb
Extension，也不論是否是使用 Firefox 瀏覽器，只要他所使用的瀏覽器支援 RSS 或使用 RSS Reader，即圖中的 2 號瀏覽器，皆能連到 App Server，來訂閱 此項 RSS。此即本研究中社群網路服務中 RSS 服務的系統架構。
3-1-2 Client 端元件
圖 15 RSS 類元件之 Client 端元件系統架構圖
Client 端元件主要包含 Overlay Unit, RssMaker Unit, RssMaker_P2 Unit 等三個元件，其中 Overlay Unit 又可細分為 Overlay Sidebar Unit 及 Overlay RssMaker Unit 等兩個元件。其流程是當 user 在瀏覽器上選擇 RSS 條目之後，
即交由 RssMaker Unit 及 RssMaker_P2 Unit 讓 user 確認並輸入更多的資訊，
之後送到 App Server 端的元件 RSS Adding Unit 加以分析儲存；另一方面 user 亦可在瀏覽器上觀看此網頁的 RSS，此是由 RSS Sidebar Unit 加以處理。各元 件分別描述如下：
1. Overlay Unit
此元件的主要功能是用自訂的使用者介面 (UI) 覆蓋 (overlay) Firefox browser 的 UI，其 UI 之一畫面如下：
圖 16 SocialWeb Extension Options UI
此 UI 是讓使用者設定 SocialWeb Extension 的選項，包含 Username, Password 及 Groupname。此元件的其餘子元件在以下介紹。
2. Overlay Sidebar Unit
此 Unit 的 UI 是在 Firefox 的 top menu 中顯示 SocialWeb Extension 的 部份功能選項，其 UI 如下：
圖 17 RSS 類元件之 Overlay Unit 之 menu
其中屬於 RSS 類元件的指令為”RSS”，其功用是在 browser 左側顯示一
sidebar，此 sidebar 會呼叫屬於 Application Server 端元件的 RSS Sidebar Unit，以顯示目前網頁中已存在的 RSS。當 user 造訪另一網頁 (網 址發生改變) 時，此元件會被觸發，而重新呼叫 RSS Sidebar Unit 以同 步更新而能對應到新的網址。
3. Overlay RssMaker Unit
此 Unit 的 UI 是在 Firefox 的 context menu 中，展現 SocialWeb Extension 另一部份的 menuitem，其 UI 如下：
圖 18 RSS 類元件之 Overlay Unit 之 context menu
其中屬於 RSS 類元件的指令及其說明如下表所示。
表 2 RSS 類元件之 Overlay Unit 之 context menu 之指令說明
指令 說明
Marked As First Title 將滑鼠所在段落記錄為 RSS 的第一項目的 title Marked As First Desc. 將滑鼠所在段落記錄為 RSS 的第一項目的描述 Marked As Last Title 將滑鼠所在段落記錄為 RSS 的末項目的 title Marked As Last Desc. 將滑鼠所在段落記錄為 RSS 的非第一項目的描述 Make RSS… 呼叫 RssMaker Unit 以開始製作 RSS
View RSS 顯示目前網頁中已存在的 RSS，功能同”View”
menu 中的”RSS”
此單元並包含每個 menuitem 按下後的對應處理，如記錄對應段落的 XPath 等，當使用者按下”Make RSS…”後，將記錄的資料傳往下一單元:
RssMaker Unit。
4. RssMaker Unit
此單元將取得的 Title XPath & Desc. XPath 加以分析後，將網頁資料萃 取並顯示出來，以供使用者判斷資料的正確性，其畫面如下所示：
圖 19 RSS 類元件之 RssMaker Unit 之 UI
當 user 按下 Next 後，資料便送往下一單元: RssMaker_P2 Unit 5. RssMaker_P2 Unit
此 unit 匯集相關資料如網頁 title、網址、XPath 等供 user 檢視，並讓 user 鍵入其他資料，其 UI 如下所示：
圖 20 RSS 類元件之 RssMaker_P2 Unit 之 UI
在此部份的視窗，是要求使用者輸入關於此 RSS 的相關資訊，包含有：
表 3 RSS 類元件之 RssMaker_P2 Unit 之 UI 之欄位說明
欄位 說明
Username user 在 app server 上所註冊的帳號，系統自動由 Options 帶入 Password user 在 app server 上所註冊的密碼，系統自動由 Options 帶入 Site 網站的網址，系統自動帶入
Arts, Business, Computers, Games, Health, Home, Kids and Teens, News, Recreation, Reference, Regional, Science, Shopping, Society, Sports, World
RSS Update Interval
user 決定系統多久產生 RSS 一次，預設為 1hr
當使用者填完此 RSS 的相關資訊後，按 Upload，資訊即會傳送到 Application Server 端的元件。
3-1-3 Application Server 端元件
圖 21 RSS 類元件之 Application Server 端元件系統架構圖
此子系統主要包含 RSS Adding Unit, RSS Deletion Unit, RSS Sidebar Unit, RSS Query Form Unit, RSS Query Action Unit 等五個元件，可針對 SocialWeb Extension 或網頁送來的 RSS 要求，執行新增、刪除、查詢等動作，
並以 XML 或 HTML 回傳，或是送出某網頁的 RSS 查詢結果。各元件分別描述如 下：
1. RSS Adding Unit
此為記錄 RSS 相關資訊的單元，當 user 在 RssMaker_P2 Unit 按下 Upload 後，此單元即被呼叫，處理完後顯示如下的 UI。
圖 22 RSS 類元件之 RSS Adding Unit 之 UI
此畫面代表 RSS 已儲存成功，並顯示連結可呼叫 RSS Query Action Unit，
查詢並訂閱系統中現存的 RSS。
2. RSS Deletion Unit
此為刪除 RSS 相關資訊的單元。
3. RSS Sidebar Unit
此單元可由 Overlay Unit 呼叫之，以在 browser 左側顯示 RSS sidebar，
其 UI 如下圖。
圖 23 RSS 類元件之 RSS Sidebar Unit 之 UI
User 可依此來訂閱此網頁的 RSS。當 user 造訪另一網頁時，此元件會感 知新的網址，而同步更新以對應到新的網址。
4. RSS Query Form Unit
讓 user 由網頁對 RSS 做條件查詢，其 UI 如下圖。
圖 24 RSS 類元件之 RSS Query Form Unit 之 UI
5. RSS Query Action Unit
RSS 之查詢引擎，接受來自 SocialWeb Extension 及 RSS Query Form Unit 之查詢，並返回 XML 或 HTML，其 XML 格式與 HTML 如下兩圖。
圖 25 RSS 類元件之 RSS Query Action Unit 之返回 XML
圖 26 RSS 類元件之 RSS Query Action Unit 之返回 HTML
本節所述之各單元的詳細呼叫參數說明請見3-3-1 RSS類API一節所述。
3-1-4 RSS File Generator 元件
圖 27 RSS 類元件之 RSS File Generator 元件系統架構圖
此子系統主要功能為定時連線到目標網站抓取網頁，剖析網頁內容後，產 生 RSS 檔案。此子系統主要包含 Data Handling Unit, JRex Unit, XML File Generator 等三個元件，分別描述如下：
1. Data Handling Unit
此元件主要功能為前往 DB 抓取資料，包含網址、XPath 等，得到資料後送 往 JRex Unit 處理。
圖 28 RSS 類元件之 Data Handling Unit 之執行畫面
2. JRex Unit
此元件利用 JRex 這一 free 且 open source 的 Java Browser Component，
連線到目標網站抓取網頁，取回後用 XPath 去取得網頁特定位置的內容，
之後送往 XML File Generator 處理。
圖 29 RSS 類元件之 JRex Unit 之執行畫面
3. XML File Generator
此元件依照 JRex Unit 所取得的資料，依序產生 RSS 檔案，之後 user 即 可利用 RSS Reader 連線到 Application Server 來取得 RSS。
圖 30 RSS 類元件之 XML File Generator 所產生的 XML 內容
3-2 Social Web 類元件系統架構 3-2-1 系統架構
本系統使用的軟體，在 server 方面，Application Server 為 Tomcat，
Database Server 為 MySQL DB Server，Service Program 為一 Java 程式，使 用到了 JRex Class Library；而在 client 方面，則同樣是利用 Firefox 瀏覽 器為 platform，在其上使用 JavaScript 與 XUL 來開發 Extension，來做為本 研究的客戶端。以下是詳細的版本資訊：
表 4 Social Web 類元件使用軟體版本
角色 軟體
應用伺服器 Apache Tomcat 6.0 JAVA Virtual Machine JDK 1.5.0
資料庫軟體 MySQL Server 5.0
瀏覽器 Mozilla Firefox 2.0.0.20
系統架構請參考如下的系統架構圖：
圖 31 Social Web 類元件系統架構圖 1
Social Web 系統的資料流是由上圖中的橘色(深色)實線所表示。首先，要 使用此功能的 Firefox 瀏覽器，必須先安裝本研究的 SocialWeb Extension，
之後即可在任何網站上編寫自己的 post 或閱讀他人所留的 post。在上圖中，3 號瀏覽器即是代表執行 post 功能的瀏覽器，此瀏覽器必須是 Firefox 並且安 裝了 SocialWeb Extension，所以 icon 是一帶有 puzzle piece 的火狐。之後，
此 browser 的使用者便可以針對任何網站上的網頁，並且針對此網頁中的任何 段落，留下 post。留言的同時，可設定此 post 的瀏覽權限，是本 user 所屬的 group 能觀看，亦或是任意人皆能觀看，與此同時，亦可一併上傳附檔，以供 其他人參考。當 3 號瀏覽器的使用者按下上傳 button 之後，其留言以及其他 相關的設定和附檔等，便由 SocialWeb Extension 中的 post API，上傳至 App Server，然後由 App Server 儲存至 Database Server 中。
圖 32 Social Web 類元件系統架構圖 2
往後，若有瀏覽器欲觀看某網頁上，由 SocialWeb Extension 所留下的 post，即可利用 Extension 上的 View - Post Marks 功能，選擇欲觀看 Group
往後，若有瀏覽器欲觀看某網頁上，由 SocialWeb Extension 所留下的 post，即可利用 Extension 上的 View - Post Marks 功能，選擇欲觀看 Group