} });
</script>
</body>
</html>
程式碼 3.30ebook.php 會整使用者編輯結果並以電子書的方式呈現
第4章 系統開發與說明
4.1 系統開發環境
本系統由討論子系統和編輯子系統組合而成，討論子系統運行於智慧型手機 上，其手機的作業系統是使用 Android4.0 以上的版本。編輯子系統的運作則以網 頁得方式來呈現，其使用者的介面是採用 Chrome 瀏覽器來做呈現。表 4.1 與表 4.2 分別表示兩個子系統的開發環境。
表 4.1 討論子系統開發環境
名稱 用途 版本
作業系統 系統開發平台 Windows 7
Eclipse IDE 開發工具 Juno Service Relase1
JDK JAVA 開發環境 6.0
Android SDK Android 程式開發套件 API 15
雲端儲存空間 用來存放使用者資料 Dropbox 2.0.22
Apache 開發伺服器 2.5.10
MySQL 資料庫 存放使用者資料 5.0.51b
Android 手機 使用者介面 4.0.3 以上
表 4.2 編輯子系統開發環境
名稱 用途 版本
作業系統 系統開發平台 Windows 7
Dreamweaver 開發工具 Adobe CS4
瀏覽器 顯示系統介面 Chrome
雲端儲存空間 用來存放使用者資料 Dropbox 2.0.22
Apache 開發伺服器 2.5.10
MySQL 資料庫 存放使用者資料 5.0.51b
4.1.1 系統使用者案例圖(Use Case Diagram)
學生為主的功能設計如圖 4.1 所示，學生可以使用到的功能有選擇討論區組別、
圖 4.2 討論子系統使用者案例圖(老師)
編輯子系統的使用以兩種不同身分為主，分別為學生和老師這兩種身分。學 生透過登入功能判別身分並且從資料庫傳回相關的資料。透過網頁介面來顯示這 些對話記錄和照片之後，學生便可以使用編輯資料、編輯資料存檔、預覽頁面和 檢視電子書成果的功能。學生的使用者案例圖如圖 4.3 所示。
老師的使用功能主要用於檢視學生的上傳的資料，其功能為顯示對話記錄、
顯示上傳照片以及檢視電子書成果。老師的使用者案例如圖 4.4 所示。
圖 4.3 編輯子系統使用者案例圖(學生)
檢視電子書成果 預覽頁面 顯示上傳照片 顯示對話紀錄
登入功能
編輯結果存檔
<<uses>>
<<uses>>
<<uses>>
<<uses>>
<<uses>>
學生
<<uses>>
<<include>>
資料庫
編輯系統
編輯資料
<<uses>>
圖 4.4 編輯子系統使用者案例圖(老師)
4.1.2 系統循序圖(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 編輯子系統循序圖
4.2 系統介面呈現
系統的使用分為兩個階段，第一階段的時候讓學生使用討論系統來進行資料 收集，第二階段則是利用第一階段收集得資料來進行編輯整理的動作。本章節將 會用兩個小節分別說明這兩階段的系統使用方式以及系統畫面的呈現。
4.2.1 討論子系統介面
首先，老師會先替學生進行分組的動作，並且設定分組的數目。因此老師會 先開啟設定分組的登入網頁，如圖 4.9 所示。
為了避免非老師以外的人使用，因此系統必須讓老師輸入正確的帳號密碼之 後才能進行設定。當認證完成之後，系統便會開啟設定頁面，並且在畫面上方顯 示使用者的身分，如圖 4.10 所示。接著老師輸入分組數目之後，按下送出按鈕之 後，若資料符合正確格式，畫面上面便會顯示分組成功的資訊並且顯示目前的分 組數目，如圖 4.11 和圖 4.12 所示。若是使用者輸入錯誤的格式，系統便會顯示 錯誤資訊提供給使用者，如圖 4.13 和圖 4.14 所示。
圖 4.10 設定分組頁面
圖 4.11 輸入正確格式的數字
圖 4.12 顯示分組成功
圖 4.13 輸入錯誤格式的數字
圖 4.14 提示使用者錯誤資訊
老師設定好分組數目之後，學生便可以開始使用討論系統的 APP。首先進入 系統之後，系統畫面會出現一個文字欄位讓使用者輸入姓名。若沒有輸入姓名，
系統會出現訊息提示請使用者輸入，否則並不會讓使用者進入系統當中，如圖 4.15 所示。輸入完姓名之後，畫面會跳出目前可以選擇的討論區組別，接著使用 者選擇組別之後便會進入到討論區畫面。
討論區畫面的功能分成上中下三個區塊，畫面上方的區塊用來顯示該組別目 前收集到的照片，而中間的區塊則是文字討論的介面，最下方的區塊則是系統提 供的功能按鍵，如圖 4.16 所示。
圖 4.15 討論系統登入畫面
圖 4.16 選擇討論區組別畫面以及討論區畫面
討論區畫面上方顯示圖片的區塊是利用畫廊的方式來呈現給使用者，使用者
可以在此區塊看到該組別目前擁有的照片。使用者可以透過觸碰畫廊中的任一張 圖片之後，畫面下方會出現該照片的上傳者名稱以及這是畫廊中的第幾張圖片，
如圖 4.17 所示。
圖 4.17 利用畫廊顯示使用者上傳的照片
討論區中間的區塊是用來顯示討論區的對話訊息以及讓使用者發送訊息，若 是討論區的 server 端尚未啟動服務，那麼使用者便不能收發訊息並且畫面會出現 提示訊息，告知使用者聊天室尚未啟動。若是連線成功，使用者便可以成功接收 與發送訊息，如圖 4.18 所示。
圖 4.18 服務尚未啟動和成功發送訊息
討論區畫面的功能列所提供的功能分別是 Dropbox 功能、對話紀錄存檔和顯 示圖片。Dropbox 功能是用來讓使用者連結到 Dropbox 雲端空間儲存資料，而儲 存的資料分別是照片以及對話紀錄檔案。使用者可以透過點選 Dropbox 功能之後，
系統會先進行登入帳號的動作，如圖 4.19 所示。驗證成功之後，使用者便會看 到系統畫面提供了拍照上傳以及對話紀錄上傳的功能按鈕，如圖 4.20 所示。
使用者點選了照片上傳的功能便會開啟相機功能開始拍照，若拍照完成便會 詢問使用者是否儲存上傳，使用者按下確認之後，系統便會將照片上傳到 Dropbox 空間。上傳成功之後，畫面下方會出現一個提示訊息告訴使用者上傳的結果，如 圖 4.21 所示。對話紀錄上傳功能也是類似的操作模式，使用者會先使用儲存對 話的功能按鍵之後，再使用 Dropbox 功能內的上傳紀錄按鈕，便會把手機內存檔 好的對話紀錄檔上傳到 Dropbox 空間中並且在畫面下方出現提示訊息告訴使用者
上傳結果，如圖 4.22 所示。顯示圖片功能是用來讓使用者刷新討論區畫面上方 的畫廊內的圖片，因為系統使用非同步的顯示方式，所以必須透過刷新才能顯示 目前最新的圖片資訊。按下顯示圖片的按鈕之後系統必須重新下載圖片並且重新 處理畫廊內的圖片資訊，因此畫廊中的圖示會先用 Android 的小圖示來代表圖片 處理中，如圖 4.23 所示。
圖 4.19 第一次登入需要輸入帳號密碼
圖 4.20 詢問是否授權存取 Dropbox 和 Dropbox 上傳功能
圖 4.21 拍照存檔和上傳結果
圖 4.22 對話存檔和對話紀錄上傳結果
圖 4.23 目前圖片資訊以及刷新之後的結果
4.2.2 編輯子系統介面
當學生討論完成之後，便可以透過編輯系統來進行討論資料的整理。首先，
使用者會開起編輯系統的登入頁面，透過登入頁面來判斷使用者的身分。另外，
系統讓使用者自由選擇組別進入，並進行該組別的電子書編輯，如圖 4.24 所示。
系統讓使用者自由選擇組別進入，並進行該組別的電子書編輯，如圖 4.24 所示。