系統實作

本系統以合作學習的理論為基礎，設計一個讓學習者可以一起合作學習的 平台來學習 C 語言，使他們能夠利用本系統來完成他們的目標。我們考慮到合 作學習的效率及有效性，我們設計了三人為一組的小組合作學習，每組有一名 組長及兩名的組員，組長的選定由各組組員自行推選。以下將介紹本系統相關 的元件及功能：

Master Server 主要是管理使用者的相關資訊(如圖 14 所示)，包括使用者資 訊及訊息傳遞，分為以下幾項功能：

z 管理使用者登入/登出：當使用者要求登入時，記錄使用者的 IP 位址及使 用者名稱等資訊。當使用者關閉編輯視窗時終止其連線。

z 管理使用者登入人數：本系統使用者人數上限為 3 人，當到達上限人數時 系統將不允許其他使用者再登入。主要是因為考慮到小組合作學習的效 率，避免小組內人數過多而造成了討論及決策的過程複雜化。

圖 14 Master Server 視窗

z 管理 Chat Room 中使用者之間的文字訊息傳遞：當使用者之間在傳送文字 訊息時，Master Server 會將訊息即時廣播並將其記錄在文字檔內，此文字 記錄檔案將會依照日期存放，永久保存在系統記錄資料夾中。

z 自動分配使用者程式編輯視窗的順序：Master Server 會依照使用者登入的 順序，自動安排三位使用者各自所擁有的編輯器介面。

z 管理使用者編輯程式時的同步化：使用者可以在自己所擁有的編輯介面上 編輯程式碼，而這些程式碼將會即時地呈現到其他小組成員的介面上。

z 自動記錄使用者在編輯程式時的進度：每隔一段時間 Master Server 將自動 幫助使用者作進度的存檔，以避免使用者不正常斷線時而遺失了資料。所 有的存檔皆永久存在 Server 端供使用者查詢。

z 與 Voice Server 連接：記錄 Voice Server 的位址，讓使用者能夠在連上系統 時即可語音交談。

Voice Server 主要是管理使用者語音交談的訊息傳遞與記錄(如圖 15 所 示)，利用 VoIP 的技術作為 Voice Server 的基礎，透過即時的方式，將語音串 流傳送給在相同群組裡的使用者。圖 16 則為 Voice Server 的管理介面，可從管 理介面去更改設定以及觀看使用者的連線狀態及資訊。

圖 15 Voice Server 視窗

圖 16 Voice Server 管理介面

圖 17 為本系統的使用者介面，以下將一一介紹本系統使用者介面的功能：

z Login Page

系統執行時會顯示一個登入畫面顯示如圖 18，圖中「User name」為 使用者名稱，使用者可任意輸入自己想要的名字，「Group name」則為各

小組的名稱，由各小組自行決定並輸入小組代號名稱，以便於在系統中 分享資訊以及語音交談。「Identity」是使用者的身分，分為「Leader」、

「Partner」兩種身分供使用者選擇，「Leader」每組只限一名登入，而選 擇「Partner」登入的使用者則會依照登入的時間順序決定 Partner1 和 Partner2 的使用者。最後「Personal Picture」為個人化圖示，每位使用者 皆可挑選自己想要的圖示以顯示在個人的編輯介面的圖示視窗，所有圖 示皆為系統內建。

圖 17 使用者介面

圖 18 登入畫面

z Editor

如圖 19 框線範圍所示，使用者介面中央三格編輯視窗主要是讓 使用者來撰寫編輯程式碼，最左方的視窗為 Team Leader，其餘兩格 則為兩位 Partner，系統會自動幫此二位組員安排所使用的編輯介面。

Team Leader 的主要任務是協調及分配每位組員所需要撰寫的子程式 部分，並負責撰寫主程式和整合全部程式的工作，並且適當地給予組 員程式撰寫的指導，而其餘兩位組員則負責完成所分配到的副程式。

系統每隔一段時間會自動幫使用者在 Server 端作進度上的存檔，以避 免使用者不正常離線而遺漏資料。

圖 19 使用者編輯器介面 z Chat Room

Chat Room(如圖 20 所示)的目的主要是讓使用者能夠在編輯程式 碼過程中遇到困難及麻煩而跟組員一起討論，使其能夠解決程式撰寫 上的麻煩，本系統雖然已有語音對話的功能，但是為了讓使用者能夠 更清楚地表達出在程式上所碰到的疑難雜症，因而加入此一功能，希 望讓使用者在編輯程式的過程中能夠更加順利。

  圖 20 Chat Room 窗格

  圖 21 Debug Message 視窗

z Debug Message

「Debug Message」視窗是當使用者要檢查語法錯誤時，錯誤訊 息顯示的視窗(如圖 21 所示)。使用者編譯及除錯時，系統編譯器所回 饋的錯誤訊息將顯示在這個視窗裡，而每一位使用者的錯誤訊息皆顯 示在此視窗中，並且皆可看到其他組員編譯的訊息，但是只顯示最近 一次編譯的使用者之錯誤訊息。不僅使用者個人可以編譯，整合後的 程式碼編譯後的錯誤訊息也會顯示在此視窗中。

z Personal Icon

「 Personal Icon 」 個 人 化 圖 示 能 夠 讓 使 用 者 在 登 入 視 窗 的

「Personal Picture」中選擇他們所喜愛的圖示以顯示在使用者的個人 編輯視窗裡(如圖 22 所示)。使用者登入以及編輯介面開啟之後，可在 選單工具列上的「Option」勾選「Icon」來顯示自己的個人化圖示，

同時也會顯示組員們的圖示。如果使用者並沒有選擇任何的圖示，個 人化圖示仍會顯示系統預設好的小圖示。

  圖 22 Personal Icon 視窗

z Voice Dialog

「Voice Dialog」為本系統語音交談的功能，主要是利用 VoIP 網 路電話的技術協助使用者在系統中進行群組語音對話的服務。當使用 者登入系統並開啟使用者介面時，「Voice Dialog」也會一併開啟並且 初始化，系統同時也會自動幫助使用者連線上 Voice Server，針對使用 者所輸入的群組名稱(Group name)分配群組，以便於進行群組語音交 談服務(如圖 23 所示)。當使用者已連線進入群組語音服務, 右邊的

「Voice Dialog」視窗會顯示連線成功的訊息，「Call to Voice Server」

功能按鍵也因為連線成功而轉換。 「Call to Voice Server」主要的功 能在於使用者尚未連線至 Voice Server 或是已離線時，可利用此按鍵 來進行連線上 Voice Server 的動作。而使用者若不需要使用語音對話 服務或是想離開本系統，他們可以關閉 「Voice Dialog」視窗或是按 下「Hang Up (Call)」的按鍵，語音服務即可終止。

  圖 23 Voice Dialog 語音對話控制功能視窗

z Compile

「Compile」編譯的功能是所有程式語言設計的編輯軟體最重要 的一項功能，編譯器除了可以檢查程式碼語法上的錯誤之外，並且能 產生一個可執行檔案以便使用者檢查程式碼的輸出是否有錯誤。在本 系統中，我們所使用的編譯器為 GCC，來幫助使用者編譯及除錯他們 的程式碼。以下介紹本系統幾項除錯及編譯的功能：

¾ Debug：此功能主要是針對單一使用者個人使用，每一位使用者都可 使用它來檢查 C 程式語法上的錯誤，檢查出來的錯誤訊息皆會顯示在 右下角的「Debug Message」視窗中(如圖 24 所示)。當使用者完成了 各自的程式碼時，可以點選此功能來進行個人程式碼的語法檢查。

¾ Debug All：此功能主要是用來檢查所以使用者的程式碼整合後的語 法，檢查後的除錯訊息會顯示在「Debug Message」視窗，所有使用 者都可以看到除錯的訊息(如圖 24 所示)。

  圖 24 除錯功能選單視窗

¾ Compile(Personal)：此功能只限單一使用者使用(如圖所示)，當使用者 各自完成自己的程式作業時，即可使用此項功能。每位使用者都可以 利用此功能來編譯自己撰寫的程式碼，並且產生執行檔來檢查程式的 輸出是否有錯誤。

¾ Compile (Group)：所有使用者合作完成程式專案作業時所使用的功 能，當使用者合作完成程式專案時，可以使用此項功能來編譯並執行 已完成的程式專案(如圖 26 所示)。其主要是將所有使用者的程式碼整 合過後再利用 GCC 編譯器來編譯檢查語法與程式執行後的結果正確 與否，能夠讓所有使用者檢查自己編輯的程式碼語法與程式輸出結果 是否出現問題，可讓他們自行檢查並進行修改。

z 顯示行號

使用者在編輯程式時，可以在「Option」中勾選「Line Number」

來顯示該編輯視窗的行號(如圖 27 所示)。每位使用者所使用的編輯視 窗皆可顯示行號，而使用者僅能看到所擁有之編輯視窗的行號。

z C 程式語言參考教材

使用者在編寫程式過程中可能遭遇到各式各樣的問題，本學習工 具為輔助學習者在遇到問題時能夠及時地找出解答，提供了一部 C 語 言的參考教材，給予使用者得以快速地獲得解決問題的依循管道(如圖 28 所示)。教材的製作方面主要是節錄自旗標出版社所出版，由洪維 恩先生著作的「C 程式語言教學手冊」(四版)。

  圖 25 Compile(Personal)功能視窗

  圖 26 Compile(Group)功能選單視窗

圖 27 顯示行號之選單視窗

圖 28 C 語言參考教材之畫面