以 MOBILE WEB 2.0 技術開發研討會資訊系統 指導老師：許乙清 學生：林哲賢、黃英明

目錄 何謂 Web 2.0---------------------------------------------------------------------1 摘要 --------------------------------------------------------------------------------2 研究動機與目的 ----------------------------------------------------------------3 活動圖 -----------------------------------------------------------------------------4 使用案例圖 ----------------------------------------------------------------------5 類別圖 -----------------------------------------------------------------------------6 合作圖 -----------------------------------------------------------------------------7 循序圖 -----------------------------------------------------------------------------8 系統架構圖 ----------------------------------------------------------------------9 系統展示（ PC ） --------------------------------------------------------------10 系統展示（ PDA ） ------------------------------------------------------------25 專案管理 -UML 塑模、 Wiki 文件管理平台、 blog 工作日誌 --------29 未來進度、目前進度、分工表 -------------------------------------------32 0

目錄

何謂 Web 2.0---------------------------------------------------------------------1

摘要 --------------------------------------------------------------------------------2

研究動機與目的 ----------------------------------------------------------------3

活動圖 -----------------------------------------------------------------------------4

使用案例圖 ----------------------------------------------------------------------5

類別圖 -----------------------------------------------------------------------------6

合作圖 -----------------------------------------------------------------------------7

循序圖 -----------------------------------------------------------------------------8

系統架構圖 ----------------------------------------------------------------------9

系統展示（ PC ） --------------------------------------------------------------10

系統展示（ PDA ） ------------------------------------------------------------25

專案管理 -UML 塑模、 Wiki 文件管理平台、 blog 工作日誌 --------29

未來進度、目前進度、分工表 -------------------------------------------32

何謂 Web 2.0 新一代的網路服務，其重要的精神在於使用者的參與，是雙向互動式的。 Web 2.0 常用技術如下： 1. XML ：可擴展標記語言，由 W3C 制定。 2. RSS ：是一種用於分享新聞和其他 Web 內容的數據交換規範。 3. AJAX ：一種讓使用者介面更豐富的方法。包含 a. XHTML+CSS ：資料的呈現 b. DOM+JavaScript ：進行動態顯示與互動 c. XML Http Request ：與 Web server 進行非同步的資料交換 d. JavaScript 將所有的技術結合在一起 4. Web API ：藉由它使用者對網站的功能與操作介面便可以有更多的選擇。常見的有 Google Map API 、 Google Chart API 。 1

何謂 Web 2.0

新一代的網路服務，其重要的精神在於使用者的參與，是雙向互動式的。

Web 2.0 常用技術如下：

1. XML ：可擴展標記語言，由 W3C 制定。

2. RSS ：是一種用於分享新聞和其他 Web 內容的數據交換規範。

3. AJAX ：一種讓使用者介面更豐富的方法。包含

a. XHTML+CSS ：資料的呈現

b. DOM+JavaScript ：進行動態顯示與互動

c. XML Http Request ：與 Web server 進行非同步的資料交換

d. JavaScript 將所有的技術結合在一起

4. Web API ：藉由它使用者對網站的功能與操作介面便可以有更多的選擇。常見的有 Google Map API 、 Google Chart API 。

摘要 以 Web 2.0 的技術開發一個研討會資訊交流平台。本系統使用的技術有 RSS 、 AJAX 、 Web API ， （ Google Map API 、 Google Static Map API 、 Google Chart API) 可以讓使用者交流研討會訊息，更透過 Web API 讓使用者可以使用更多的功能與操作介面。 2

摘要

以 Web 2.0 的技術開發一個研討會資訊交流平台。本系統使用的技術有 RSS 、 AJAX 、 Web API ， （ Google Map API 、 Google Static Map API 、 Google Chart API) 可以讓使用者交流研討會訊息，更透過 Web API 讓使用者可以使用更多的功能與操作介面。

研究動機與目的 Web 2.0 化的網頁是未來的趨勢，拋棄以往 Web 1.0 的限制，使用者不再只是單單的使用，而是可以提供內容。知名的服務如 Blog 、 Wikipedia 、 facebook 皆是採用 Web 2.0 的相關技術。 本系統的目的是讓使用者可以使用 Web 及 PDA 透過網路連上本系統，並使用 Web 2.0 化的服務。 3

研究動機與目的

Web 2.0 化的網頁是未來的趨勢，拋棄以往 Web 1.0 的限制，使用者不再只是單單的使用，而是可以提供內容。知名的服務如 Blog 、 Wikipedia 、 facebook 皆是採用 Web 2.0 的相關技術。

本系統的目的是讓使用者可以使用 Web 及 PDA 透過網路連上本系統，並使用 Web 2.0 化的服務。

Activity Diagram 4

Activity Diagram

Use Case Diagram 5

Use Case Diagram

Class Diagram 6

Class Diagram

Sequence Diagram - 檢閱 RSS 的例子 8

Sequence Diagram - 檢閱 RSS 的例子

Collaboration Diagram – 使用 Google Map API 的例子 7

Collaboration Diagram – 使用 Google Map API 的例子

系統架構圖 9

系統架構圖

系統截圖 - 登入頁面 10

系統截圖 - 登入頁面

系統截圖 - 註冊頁面 11

系統截圖 - 註冊頁面

系統截圖 - 首頁 12

系統截圖 - 首頁

系統截圖 - 查詢 13

系統截圖 - 查詢

系統截圖 - 查詢 14

系統截圖 - 查詢

系統截圖 - 詳細資料 15

系統截圖 - 詳細資料

系統截圖 - 新增 16

系統截圖 - 新增

系統截圖 - 更改 17

系統截圖 - 更改

系統截圖 - 更改內容 18

系統截圖 - 更改內容

系統截圖 - 刪除 19

系統截圖 - 刪除

系統截圖 -URL 網址匯入 20

系統截圖 -URL 網址匯入

系統截圖 -URL 網址匯入 - 來源網站 21

系統截圖 -URL 網址匯入 - 來源網站

系統截圖 -URL 網址匯入 - 解析結果 22

系統截圖 -URL 網址匯入 - 解析結果

系統截圖 - 檢閱 RSS 23

系統截圖 - 檢閱 RSS

系統截圖 - 研討會統計 Chart 圖 24

系統截圖 - 研討會統計 Chart 圖

系統截圖 -PDA 登入畫面 25

系統截圖 -PDA 登入畫面

系統截圖 -PDA 查詢功能 26

系統截圖 -PDA 查詢功能

系統截圖 -PDA 查詢結果 27

系統截圖 -PDA 查詢結果

系統截圖 -PDA 詳細資料 28

系統截圖 -PDA 詳細資料

專案管理 -UML 塑模 本專題遵循軟體工程手法進行專案管理 此張投影片介紹 UML 塑模 我們使用 UML 塑模工具依序執行系統需求分析、系統分析、系統設計。 使用軟體： starUML 29

專案管理 -UML 塑模

本專題遵循軟體工程手法進行專案管理

此張投影片介紹 UML 塑模

我們使用 UML 塑模工具依序執行系統需求分析、系統分析、系統設計。

使用軟體： starUML

專案管理 -Wiki 文件管理平台 我們亦使用 Wiki 平台，撰寫與管理系統需求分析文件、系統分析文件、系統設計文件。 30

專案管理 -Wiki 文件管理平台

我們亦使用 Wiki 平台，撰寫與管理系統需求分析文件、系統分析文件、系統設計文件。

專案管理 -blog 工作日誌 我們使用 blog 來紀錄問題的解決方法當作工作日誌。 31

專案管理 -blog 工作日誌

我們使用 blog 來紀錄問題的解決方法當作工作日誌。

目前完成進度 分工表 33 未來進度 分工 林哲賢 黃英明 PDA 服務 V PC WEB 功能進化 V

目前完成進度

分工表