系統循序圖(Sequence Diagram)

首先，使用者會先進入討論系統的起始畫面，畫面會要求使用者輸入個人姓 名之後才能進入下一步驟。當使用者輸入姓名之後並按下確認按鈕之後，系統畫 面會顯示目前可以進入的討論區。而在顯示目前可進入的討論區之前，系統會先 向資料庫讀取分組數目，再把結果回傳到系統，此時系統便會顯示目前可使用的 討論區並讓使用者來選擇。

在使用者選完要進入哪個討論區之後，便會進入到該討論區的討論畫面並且 跟 socket server 連線。若連線成功，使用者便可以發送訊息到 server 端。Server 收到訊息之後便會把此使用者的訊息廣播到其他已經連線的用戶端中，其討論循 序圖如圖 4.5 所示。

檢視電子書成果 顯示上傳照片 顯示對話紀錄

登入功能

<<uses>>

<<uses>>

<<uses>>

老師

<<uses>>

<<include>>

資料庫

編輯系統

使用者 輸入姓名 選擇組別 討論畫面

進入系統

資料庫

確認 進入組別討論

請求 回傳

socket server

conect ack OK 發送對話 廣播對話訊息

圖 4.5 討論子系統循序圖

除了討論對話以外，系統另外整合了 Dropbox 得功能。使用者在討論畫面下 選擇 Dropbox 功能按鈕之後，系統會判斷之前是否已經輸入過帳號密碼，若是第 一次使用則會跳出請使用者輸入帳號密碼的頁面。經過認證完成之後，使用者便 可以使用拍照上傳與對話記錄上傳的功能，Dropbox 功能循序圖如圖 4.6 和圖 4.7 所示。

Dropbox功能 認證 拍照上傳

啟動拍照 輸入帳密

回應ok

Dropbox空間

確認儲存

圖 4.6 Dropbox 拍照功能循序圖

Dropbox功能 認證 紀錄上傳

按下按鈕 輸入帳密

回應ok

Dropbox空間

儲存

圖 4.7 Dropbox 記錄上傳功能循序圖

當學生使用完討論系統之後，學生可以到編輯系統來做資料的瀏覽與後續編 輯彙整的功能。首先，學生會輸入個人的帳號與密碼來做身分的判別，另外再透 過勾選組別的動作，判斷學生要進入哪一個組別去編輯資料。

當進入編輯頁面之後，系統便會把該組別的所有的上傳記錄以及上傳照片顯 示在畫面上。學生便開始根據這些資訊來編輯彙整，當學生編輯完一份資料之後，

可以使用預覽的功能來觀看此次的編輯結果。若是不滿意，便可以再重新編輯資 料；若是滿意此次編輯結果，那麼學生便可以按下存檔功能將編輯結果存成 XML 檔案。

最後，當所有使用者把自己的編輯結果都存檔之後，系統便會讀取這些 XML 檔案，並將檔案內的資料以 HTML5 網頁來呈現。學生便可以點選檢視電子書成 果功能來觀看所有人所編輯的資料結果，其編輯系統的循序圖如圖 4.8 所示。

使用者 登入頁面.php 資料庫 編輯頁面.php

進入系統

帳密驗證 驗證OK

開啟編輯頁面

預覽結果 結果存檔 檢視電子書

預覽按鈕

存檔按鈕

點選電子書連結

圖 4.8 編輯子系統循序圖