國 立 臺 南 大 學
資訊工程學系
碩 士 論 文
適用於之除錯導向程式設計學習平台的建置
Debug Oriented Programming Learning Platform Construction
for School Children
指 導 教 授：高啟洲 研 究 生：郭維桓
中華民國一百零八年七月
適用於之除錯導向程式設計學習平台的建置
Debug Oriented Programming Learning Platform Construction
for School Children
By
Wei Huan Guo郭維桓
A thesis submitted in partial fulfillment of the requirements
for the Master of Engineering degree
in Computer and Information Science and Engineering in the College of Science and Engineering
at the National University of Tainan Tainan, Taiwan
Advisor: Professor Chi-Chou Kao（高啟洲）
July 2019
中華民國一百零八年七月
誌謝
本論文是在高啟洲老師的親切關懷和細心指導下完成的，他嚴肅的科學態度，嚴 謹的教學精神，精益求精的工作作風，深深地感染和激勵著我。高啟洲老師不僅在 學業上給我以精心指導，同時還在思想、生活上給我以無微不至的關懷，在此謹向 高啟洲老師致以誠摯的謝意和崇高的敬意。我還要感謝在一起愉快的度過畢業論文 小組的同學們，正是由於你們的幫助和支持，我才能克服一個一個的困難和疑惑，
直至本文的順利完成。在論文即將完成之際，我的心情無法平靜，從開始進入課題 到論文的順利完成，有多少可敬的師長、同學、朋友給了我無數的幫助。最後我必須 對我家人們抱持著感謝、感恩及尊敬的心，大學四年時光如梭，當時的我懵懵懂 懂並不知道自己未來能做甚麼，對於社會充滿著期待與恐懼，最後決定繼續學業 時家人沒有半點反對，而我得到的是全力支持，讓我無後顧之憂的坦然面對我得 碩士學位。
適用於之除錯導向程式設計學習平台的建置
學生：郭維桓 指導教授：高啟洲
國立臺南大學資訊工程學系碩士班
摘要
現今社會已經逐漸轉型為資訊時代，對於生活品質不管飲食、穿戴、居家、學習及娛 樂都脫離不了資訊。尤其在學習上，學校更看重了資訊教育這部分，從國中小就必須開 始學習撰寫程式，本文設計一個線上程式學習平台給國中小學生使用希望能讓學生學 起來較輕鬆，並且更有動力去學習。
本系統設計成一個線上平台，介面簡潔清晰、功能實用，讓使用者可以在使用上降 低障礙，將學生較需要的主要功能列出來，分為討論區、題庫區、編譯區，而主要特點 是在編譯區的部分，將錯誤訊息翻譯成中文，且會提示如何去做修改，讓學生在偵錯 時能方便一些，並且希望讓學生能有一點互動，所以還有討論區方便大家互相討論，
提升學習效率。
關鍵詞：線上平台、討論區、編譯區
Intelligent Home Phone Control System Student：Wei-Huan Guo Advisor(s)：Chi-Chou Kao
Department of Computer Science and Information Engineering National University of Tainan
Tainan, Taiwan, R.O.C
Astract
Nowadays, society has gradually transformed into an information age. Information about the quality of life, regardless of diet, wear, home, study and entertainment, cannot be
separated. Especially in the study, the school pays more attention to the information education part. From the middle school to the small school, we must start to learn to write the program.
This paper designs an online program learning platform for the primary and middle school students to use. It hopes to make students learn more easily and more motivated to learn.
The system is designed as an online platform with simple and clear interface and practical functions, which allows users to reduce obstacles in use and list the main functions that students need more. It is divided into discussion area, question bank area and compilation area. The main feature is In the part of the compilation area, the error message is translated into Chinese, and the prompt will be prompted to make changes, so that the students can be more convenient when debugging, and hope that the students can have a little interaction, so there is a discussion area to facilitate discussion and promotion. Learning efficiency.
Keywords: Online Platform, discuss, complie
目次
謝辭...i
中文摘要...ⅱ 英文摘要...ⅲ 目次...iv
表次...vi
圖次...vi i
1.1 研究背景...1
1.2 研究目的...2
1.3 論文編排...10
第二章 相關研究...11
2.1 Moodle學習平台...12
2.1.1 Moodle架構圖...13
2.1.2 Moodle免費平台 v.s.商用平台...14
2.2 程式設計合作學習平台...15
2.3 Codecademy...16
第三章 研究架構...19
3.1 系統架構...19
3.2 建立網頁...21
3.2.1 事先準備...21
3.2.2 製作編譯器...22
第四章 實驗結果...27
4.1 實驗環境...27
4.2 實驗介面...27
4.2 平台比較...33
4.2.1 傳統單機 v.s.雲端平台...33
4.2.2 平台特色問卷調查...33
4.2.3 本平台 v.s.程式學習平台...34
4.2.4 本平台 v.s. Moodle 平台...34
4.2.5 本平台 v.s. Codecademy 平台...35
第五章 結論...36
第六章 參考文獻...37
表次
表 2- 1 實驗環境...14
表 4- 1 實驗環境...27
表 4- 2 傳統單機 v.s.雲端平台...33
表 4- 3 平台特色調查...34
表 4- 4 本平台 V.S.程式學習平台...34
表 4- 5 本平台 V.S. Moodle 平台...35
表 4- 6 本平台 V.S. Codecademy...35
圖次
圖 1- 1 教育部各年度績效目標 ... 3
圖 1- 2 2017 全美最棒的工作 ... 4
圖 1- 3 寫程式時常遇到的困難 ... 5
圖 2- 1 Moodle 簡易架構圖...13
圖 2- 2 多人使用 Moodle 平台時的架構圖...14
圖 2- 3 教師使用流程圖...15
圖 2- 4 學生使用流程圖...16
圖 2- 5 Codecademy 使用介面...17
圖 2- 6 CODE JUDGER 使用介面...18
圖 3- 1 學生區整體主要系統架構...19
圖 3- 2 程式學習單元架構圖...20
圖 3- 3 題庫單元架構圖...20
圖 3- 4 XAMPP Control Panel...21
圖 3- 5 設定密碼...22
圖 3- 6 製作編譯器的流程圖...22
圖 3- 7 編譯流程圖...23
圖 3- 8 由符號組成的文法樹...24
圖 3- 9 對應的文法樹 ... 24
圖 4- 1 網站首頁介面...27
圖 4- 2 討論區介面圖...28
圖 4- 3 題庫區架構圖...28
圖 4- 4 題庫系統介面...29
圖 4- 5 編譯器介面圖...29
圖 4- 6 教師區介面圖...30
圖 4- 7 新增題目介面圖...30
圖 4- 8 上傳題目介面...31
圖 4- 9 修改題目介面...31
圖 4- 10 修改題目介面...32
圖 4- 11 查看分數介面...32
圖 4- 12 管理者介面...33
第一章 緒論
1.1 研究背景
因為軟體的快速成長，使得每個學生在學校幾乎都必須上程式設計的課程，
但許多學生經常面臨一個問題，常因粗心所造成的語法錯誤或錯字，而出現錯誤，
卻又因為看不懂錯誤的訊息，因此感覺寫程式是太困難了，最重要的是，從編譯 器上得到的錯誤訊息都只告示語法錯誤和錯誤發生的地方，使得學生不能有效地 利用來偵錯，因為一般來說藉由這些錯誤訊息來偵錯是需要經驗的，但是不幸的，
這些訊息都是英文的，所以導致英文能力較差的學生學起來更困難，程式語言就 像是20 世紀時的英文一樣，在未來世界中是理解與創新必要語言，以後不管是 工業4.0，又或者是物聯網，都是需要程式設計師來寫這些應用。因為硬體方面已 經遇到瓶頸，但是軟體方面能發展的還有許多，根據美國勞工統計局的計算，從 2010 到 2020 在美國電腦程式設計師的職缺數，預計大幅度成長 30%，同時，其 他工作的成長預估有 14% 而已。所以如何培養出一個好的程式設計師，是非常重 要的，所以我們就必須從基礎層開始做起，初學者的起步是最重要的，有可能剛 開始寫程式時就馬上遇到困難，寫完程式想要去修改自己錯誤的地方，卻又不知 道從哪裡改起，因為編譯器所提示的錯誤都是英文加上只給語法錯誤。
C 語言在 70 年代初期就已經有了迅速的演進，而 1972 年貝爾實驗室為了重 寫UNIX 作業系統，開始研發 C 語言，也因此 C 語言有了大幅的改進，其中最重 要的就是前置處理器的發明。在73 年的夏季，現代版的 C 語言可說是雛型大致完 備了。1973 年至 1980 年期間，C 語言又增加了 unsigned、long 等等數種資料型態。
而這時貝爾實驗室也嘗試著將一些程式轉移到其它的作業平台。比較重要的是西 元1977 年，Steve Johnson、Ken Thompsen 與 Dennis M.Ritchie 開始把 UNIX 移到 Interdata 8/32 的 機 器 上 。 當 Interdata 8/32 移 植 成 功 之 後 ， Tom London 與 JohnReiser 也把 UNIX 移到 DEC 的 VAX11/780 電腦。而 VAX 11/780 電腦的流行 遠遠超過Interdata 8/32，於是 UNIX 與 C 語言變迅速的傳播擴展。而 C 語言更是在 80 年代被廣泛地使用，編譯器幾乎可以在任何一種機器與作業系統上看見，尤其 是在個人電腦大為流行之後，更是成為發展PC 應用程式的最佳工具。C 語言不僅 移植能力高且其結構嚴謹，執行速度也非常的快，更具有一般高階語言親合力強 的基本特性。C 的兩個著名標準：K & R 與 ANSIC，更是促使了 C 的移植性大大 地提高。我們在寫程式的時候只要遵循其規則，避免使用到標準程式庫以外的程 式庫，而且儘量符合ANSIC 的標準，那麼這些程式碼想要轉到其他的編譯器甚至 是作業系統就更不是問題了，而C 可應用的領域也就越大了。
C 語言有幾項特點:
(a) C 語言函式的區段架構，讓原本很大的程式不斷的向下分解成一些較簡單的片 段，讓每一個片段具有一個小功能，而在測試時也可分段來測試，不需每次都要 重新全部執行再行測試，減少了很多時間，也將程式變的較為簡化。
(b) C 語言提供數種如 while、for、switch 等的結構化敘述來取代 goto 敘述，可有效 的避免類似過去在組合語言等程式語言中，由於goto 敘述不當使用所造成的錯誤。
(c)在其函式庫中每個函數，甚至是自己寫的函式，都可具有其自己的功能，獨立 存在於程式之內，成為C 語言的延伸，而這些函式可透過呼叫重複的使用，如此 一來不僅減少了程式發展的時間也使程式碼不至於過於龐大。
(d)將編輯系統 (editor)、編譯系統 (compiler) 及偵錯系統 (debugger) 整合在一起，
隨時可以呼叫使用，這種整合式的工作環境我們稱為整合式發展環境 (IDE：
Integrated Development Environment)，是近代新式語言系統所採行的方法。
(e)需要長時間的訓練，也就是需要一些比較專業的技巧。
綜合以上特點，C 語言是較容易學習以及較為廣泛使用的，功能性也較為多 樣，所以本平台設計主要是以C 語言為主，那如何讓學生學起來更有效率成了我 們研究的主題。
1.2 研究目的
在這資訊發展的時代，程式越顯重要，從國中小就要開始學習寫程式，蘋果 執行長庫克也說到:「如果我是一個 10 歲的男孩，我會認為學習程式語言，這遠比 學習英還來的重要。」。從圖 1-1 來看可以看到每年修讀程式設計課程人數的遞增，
由此可知程式的教育是越來越被重視的，為了讓學生學起程式來更輕鬆，所以設 計一個線上學習程式平台。
使用數位學習平台的好處
(a)利用平台當成師生溝通的媒介
(b)所有課程活動均可完整保留在系統內
(c)完整的課程活動設計：討論區、作業、意 見調查、測驗、分組活動、計算成績、發 送課程通知……等等
(d)可展現各種形式的教材
(e)課程成員可以隨時隨地溝通，不用限制於上課時間
圖1- 教育部各年度績效目標
工欲善其事，必先利其器，各類的電子產品，像是硬體系統的提升與改良，
如電腦、智慧型手機，或是系統基礎如作業系統(OS)的程式撰寫，均需要大量資訊 工程人才的投入；而目前正夯的自駕車或是或是將銀行業務電子化的 FINTECH，
均是與資訊科技有著密切相關的應用與服務，其中也意謂著培養更多的資訊人才 將是未來的趨勢，如圖1-2 所示，可以看出程式的重要性。
圖1- 2017 全美最棒的工作 圖1-3 顯示寫程式時常遇到的困難:
(a)編譯器會檢查程式是正確並且記錄錯誤的訊息但是一些學生無法理解錯誤 是什麼意思，所以他們無法使用這些資訊去偵錯，他們覺得錯誤訊息是英文的很 難理解。
(b)多標準凾式庫程序學生常常會誤解他們，網路上有線上人工”man”可以同
時使用，但是學生常不去使用它，因為學生覺得裡面的敘述太困難。
(c)在寫程式時，如何替變數或函式命名是很重要的，但是國小、國中生的詞彙 通常都很少，所以就算學生知道這命名的重要性，這對他們來說還是很困難的。
(d)型別的錯誤在編譯器上會造成許多的錯誤，所以型別如何宣告也是必須要 有經驗的，但是如何去命名也能幫助減少錯誤。五)因為有些錯誤是很近似的，所 以很多學生都會重複的犯同樣的錯誤，所以學生應該要更小心地去理解這些錯誤 知道這些錯誤的差別是在哪。
圖1- 寫程式時常遇到的困難
電腦程式就像所有人類的產物一樣，通常都無法盡善盡美。電腦程式碼可能包 含不同類型的錯誤。錯誤可能是語法錯誤、語意(semantic)錯誤或邏輯錯誤。最明顯 的錯誤類型為語法錯誤，它發生於程式碼編寫方式不符合語言規則時。語法錯誤幾 乎都可由編譯器(compiler)或解譯器測出，其將顯示一個通知您發生問題的錯誤訊 息。語意錯誤則為較難捉摸的錯誤類型。語意錯誤會發生在程式碼的語法正確，但 是其語意或含意並非您所意指之時。由於語法結構符合語言規則，所以無法由編譯 器或解譯器找出語意錯誤。編譯器和解譯器的關切重點只在編寫的程式碼之結構，
而非其含意。語意錯誤可能導致程式不正常結束，並可能顯示或不顯示任何錯誤訊 息。以口語說明就是，語意錯誤可能使程式損毀或當掉。不過，並非所有的語意錯 誤都會用這種明顯的方式來表示。一個程式可能會在語意錯誤出現之後繼續執行，
但是其內部狀態將與原來所想的大不相同。變數可能不包含正確的資料，或者該程 式會一直在不希望執行的路徑上發生錯誤。最後產生的結果將是不正確的輸出。這 些錯誤稱為邏輯錯誤，因為雖然程式並未損毀，所執行的邏輯卻是錯誤的。偵測通 常是邏輯錯誤的唯一方法，是以手動或自動方式測試您的程式，並確認輸出是您 所預期的測試應為軟體開發過程中不可或缺的一環。可惜的是，雖然測試可告訴您 程式的輸出不正確，但卻無法留下讓您瞭解到底程式碼的哪個部分導致問題的線 索。偵錯通常但並不一定會使用偵錯工具，這種功能強大的工具可讓您觀察程式的
Run-Time 行為，並找出語意錯誤的位置。您也可以使用程式語言和其相關程式庫 內建的特定偵錯功能。許多程式設計人員在嘗試隔開問題時，會在程式碼內加入輸 出函式的呼叫，例如 printf 或 MsgBox，這是他們在一開始接觸到偵錯工作時的做 法。這是一種相當合理的偵錯技巧，不過當找到並修復問題之後，必須回頭檢查所 有程式碼，並移除所有額外的函式呼叫 (Function Call)。可能偶爾也會發現加入新 程式碼 (即使僅是一個 printf 或 MsgBox 呼叫)，亦會改變要偵錯的程式碼之行為。
有時可以透過偵錯工具，來檢查程式內的變數內容，而不需要插入額外的呼叫來 輸出數值。也可在程式碼內插入中斷點，以便在有興趣的位置停止執行。您可以在 程式停止時 (在中斷模式下)，使用相關功能來檢查區域變數 (Local Variable) 和其 他相關的資料，例如 [監看式] 視窗、[快速監看式] 對話方塊和 [記憶體] 視窗。如需 詳細資訊，請參閱監看式視窗、快速監看式對話方塊或記憶體視窗。您不僅可在中 斷模式中檢視內容，還可視需要編輯或變更其內容。在大多數情況下，您可在用來 撰寫與編輯程式碼的 Visual Studio 來源視窗內設定中斷點。有時候，您可選擇在偵 錯工具的[反組譯碼]視窗內設定中斷點。這個[反組譯碼]視窗會顯示出由原始程式 碼所建立的指示。如需詳細資訊，請參閱反組譯碼視窗。與 printf 或 MsgBox 不同 的是，設定中斷點並不會在原始程式碼內加入額外的函式呼叫。因此，設定中斷點 不太可能變更您要偵錯的程式之行為。
對程式設計來說，除錯有許多意義，多數開發者學習程式設計的第一關卡，
就是跟編譯器或者直譯器搏鬥，根據編譯或直譯不通過的訊息找出問題，直到寫 出型態正確且符合語法的程式碼。許多時候，除錯的難度並不在於錯誤本身多困難 而在於難以找到錯誤的所在地，這是除錯與測試的不同點，測試可以驗證某個函 式呼叫結果有錯誤，然而，這錯誤是在函式本身的哪個地方產生呢？或者是函式 又呼叫了某個子函式而產生？除錯常常是設計師頭痛的來源。每個程式幾乎都不免 有錯，不論是生手或老手的作品都一樣。我們在設計程式之初總會有美麗的憧憬：
當我作好規劃，然後編碼，再修改一些『小錯誤』，這個程式就完成了！事實不然 或許你寫程式的速度的確很快，但你永遠也無法知道你將會花多少時間和精力在 除錯上，這真是一個可悲的事實！另一方面，『除錯』這件工作即使是在科學昌明 的今日，也缺乏一套好方法，和一些好工具來協助我們除錯，雖然新的除錯工具 不斷的在出現，但除錯依舊還是一件令人沮喪的工作。
錯誤是可以分類的，特別是可以用出現頻率來分別，一直發生，常常發生，
偶而發生，甚至發生過一次後就再也不發生的錯誤。而搜索錯誤的方式也有一些常 見的方式：暴力法、往前搜尋法、原因消除法。暴力法是最常見、最沒效率的方法，
除錯的人總是一步一步的從頭追蹤程式，把記憶體中的變數甚至檔案的內容都印 出來，或是在程式中很多地方顯示執行時的情況...當然這種方法可以找到錯誤，
但需要很長的時間和很多精力，不過我們還是會運用這個方法，特別是在一切都 絕望的時候。往前搜尋法或許是較好的方案。從錯誤發生的地方往前找看看到底那 裡不對勁。在程式較小的場合或許管用，但程式太大了就困難了。最科學的當屬原
因消去法。我們有系統的去分析一個錯誤發生的原因，作一些可能的假設。就像是 汽車發不動了，你不會急忙的把車子支解，而是會想想看那些零件的故障會導致 車輛無法發動，例如火星塞、分電盤...。以上提的三種除錯的方法都有適當的軟體 工具來配合，例如單步追蹤器，或中斷點除錯...等。不可否認的，除錯的工作是 一件令人痛苦而不耐的工作。
之前曾有藉由使用代理技術提出了一個支援C 語言程式設計在 UNIX 上進行 編譯的系統。此系統監視來自編譯器的錯誤消息。它會分析並重寫獲取的消息，並 在網路上報告給學生和老師。老師可以通過查找錯誤的類別來改善教學方式。學生 自定義這些訊息，就可以在每個級別裡使用較合適的，此外，這些訊息通過每個 通訊線路來送給其他學生代理，因此，許多學生能夠使用這些有用訊息。此系統 可以從代理的集合裡選擇最合適的訊息，但是卻還沒提供一個完整的介面供學生 去使用。
GNU 偵錯器(GNU Debugger，縮寫：GDB)，是GNU 軟體系統中的標準偵錯 器，此外GDB 也是個具有移攜性的偵錯器，經過移攜需求的調修與重新編譯，
如今許多的類 UNIX 作業系統上都可以使用GDB，而現有 GDB 所能支援除錯的 程式語言有C、C++、Pascal 以及FORTRAN。GDB 具備各種偵錯功效，能針對電腦
程式的執行進行追蹤與警告，使用GDB 的除錯人員可以監督及修改程式的內部
變數值，甚至監督與修改獨立於主程式運作外，以獨立個體型態呼用(呼叫使用) 的函式。GDB 能為多種不同處理器架構上執行的軟體進行偵錯，這些處理器架構 包括：DEC/COMPAQ/HP 的Alpha、ARM 的ARM、Hitachi 的H8/300、IBM 的 System/370、System 390、Intel 的 X86 及 X86-64、IA-64 "Itanium" 、Motorola 68000、MIPS 的MIPS、HP 的PA-RISC、AIM 聯盟 的PowerPC、Hitachi/Renesas/ST 的SuperH、Sun 的SPARC、DEC/COMPAQ/HP 的VAX。此外一些比較少人知的處 理 器 也 一 樣 受 GDB 支 援 ， 包 括 ： AMD 的 A29K、ARC 的 ARC、Atmel 的 AVR、Axis Communications 的ETRAX CRIS、D10V、D30V、Fujitsu 的FR-30、FR- V 、 Intel 的 i960 、 Renesas 的 M32R 、 Motorola 的 68HC11 、 Motorola 的 88000、Freescale 的MCORE、MN10200、MN10300、NS32K、Stormy16、V850、以及 Zilog 的Z8000，此外更後續版本的GDB 只會增加更多的處理器支援而不會短少 。 GDB 的內部已具備了依據各種支援不同處理器的指令集所編譯成的模擬推演程式 (Simulator)，就連大眾少知少用的 M32R、V850 等架構的處理器也都具備。GDB 的 一大特點是：除了具備傳統的本機端、近端偵錯外，也可透過接線、網路的通訊方 式進行遠端性的遙控偵錯。GDB 具有一種「遠端，Remote」模式，此種模式多半是 在為嵌入式系統進行偵錯時使用，遠端操作指的是：GDB 在一部機器內執行，而 要進行偵錯的程式是在另一部機器上執行，接著欲偵錯的機器上會再加裝一個名 為「Stub」的小程式，該程式能夠與另一端的 GDB 程式溝通，溝通的路徑可以是 兩部機器間的串接式接線（Serial Cable），也可以是支援TCP/IP 協定傳輸的各種 網路，在TCP/IP 網路及協定上再加搭傳輸 GDB 專有的除錯操作用通訊協定，如
此便能進行遠端偵錯。不僅 GDB 有遠端模式， KGDB 也同樣具有遠端模式 ， KGDB 主要是為執行中的Linux 核心 進行偵錯，而GDB 則是主要是用在原代碼的 層次。運用KGDB，負責核心程式的程式設計師可以將核心以近似於應用程式的 除錯方式來偵錯，包括為核心程式碼設置中斷點（breakpoint）、讓核心程式以步 階方式逐行執行以及觀看變數值等。在某些架構的處理器中，會以硬體方式提供 一些偵錯功用的暫存器，以及可以設定觀察點(Watchpoint)，觀察點的功用是：當 程式設計師指定的記憶體位址被執行到或存取到時，觀察點即會去觸發、觸動一 個中斷點。對此KGDB 可以安裝在一部傳統機器上，並透過遠端模式使用另一部 受偵錯機器上的硬體偵錯功效，同樣的兩部機器可用各種方式進行溝通，如串接 式接線、乙太網路等，尤其在FreeBSD 作業系統上還允許使用FireWire 接線，並 用直接記憶體存取（Direct Memory Access，DMA）的功效來協助遠端偵錯。GDB 的GUI 化前端程式：Insight（過去稱 GDBtk），圖中為「堆疊瀏覽器」部分。GDB 運用上最明顯的限制是在「使用者介面」的部分，預設只有命令列介面(CLI)可用，
而不具備較能親合上手、直覺操作的圖形化使用者介面(GUI)，不過此一弱處也已 經有幾個前端程式為其補強，例如DDD、GDBtk／Insight 以及Emacs 中的「GUD 模式」等，有了這些補強後，GDB 在功效使用的便利性上就能夠與「整合發展環
境中的偵錯功效使用」相接近。在我們的系統中，我們希望能建立如GDB 的 C 語
言編譯平台且改善編譯環境調適，分析錯誤，重寫獲取的訊息，並印出在平台上 給學生看
1.3 論文編排
1.本論文將會於第二章探討所採用之相似的線上學習平台。
2.第三章說明所設計本論文設計的系統架構說明論文的 3.第四章呈現實驗結果
4.再者最後第五章為結論。
第二章 相關研究
通常我們會將學習分為兩類:
(一)自學式的學習(self-paced learning)：適用於取得一般知識、建立基本背景 的訓練，通常需要在短時間內完成。例如有時候新產品上市，需要在短時間內完 成員工行銷此產品的訓練。
(a)優點：學習的時間有彈性，學習的時候可以自由選擇主題與內容來進行學 習，當然學習的時間也比較短，可以速成。
(b)缺點：開發自學式的教材需要時間與成本，學習太自由，不易掌握學習成 效。
(二)老師帶領式的學習(instructor-led learning)：可以在比較長的時間完成，可 能需要分成多次但是連續的教學與訓練，有老師指導，但是也搭配同儕的溝通與 合作學習，可以一面吸引新知、一面分享經驗。
(a)優點：可以規劃完整的學習，學習者能夠得到老師與同儕的協助解決問題，
比較沒有學習上的孤獨感，有合作學習的機會。
(b)缺點：比較缺乏彈性，規劃與執行上比較複雜。
在線上學習的運用又分為兩類:
正式學習(formal learning)：透過組織有計畫地安排正式的訓練課程，有明確 的教學目標與時程，通常涵蓋的層面與範圍比較廣泛。可以兼採自學式以及老師 帶領的學習模式。
非正式的學習(informal learning)：學習者透過資料的搜尋與瀏覽整理，以及 與
他人的溝通，累積知識與經驗，達到學習的效果。
在現在資訊發達的時代，如何利用網路上的資源來學習顯得很重要，而這些資源 通常能在一些線上學習平台上取得，而線上也有許多可讓人免費使用的線上學習 平台，每個平台都有其特色。
2.1 Moodle 學習平台
Moodle 是一個免費的學習與課程管理系統，由澳洲 Martin Dougiamas 所創，
Moodle 的縮寫源於 Modular Object-Oriented Dynamic Learning Environment（模組 化物件導向動態學習情境）。 Moodle 遵循 GNU General Public License 的授權方 式，可以讓您自由的使用及修改 程式碼；它是採用 PHP 語言所設計開發的 Web- Based 應用系統，透過瀏覽器就可以輕鬆管理使用者、建構課程及豐富教學活動。
對於學校教學者，Moodle 除提供數位學習課程的簡單開設功能，尚兼具各種師生 互動模組，像是上傳或分享教學資源、聯絡管道、課程行事曆等，收集學生意見及 看法，並詳實 的記錄學生們的 學習歷程，此皆有助於教師瞭解學生們的學習狀 況，以提升教學品質。學界各校在積極推動資訊融入學科教學及網路教學模式時，
實然可試用成本低廉的Moodle 來架設 學校網路學習平台，降低以往耗費耗時的 教材管理及評量設計工作。數位學習業者亦可借用Moodle 的平台效力，結合或提 升現有實力，發展完整的數位學習事業鏈。以下是其特色:
(一)開放原始碼的 CMS（內容管理系統）課程管理系統。
(二)可以批次建立使用者帳號，快速建置學生的相關資訊。
(三)特別針對數位學習課程教育訓練而設計。
(四)課程可以依據 SCORM 的標準匯出匯入，促進交流與分享的意願。
(五)完整記錄學習者學習歷程，教師端可以掌握學生的參與歷程和表現。
(六)可以完全取代昂貴的遠距教學系統。
(七)讓您從現有的資源中輕鬆建立課程。
(八)教師可以互相分享開課心得經驗，減少摸索受阻的時間
2.1.1 Moodle 架構圖
圖2- Moodle 簡易架構圖
流量不敷使用時，可增加 Moodle 主機，即可服務更多學生。
圖2- 多人使用 Moodle 平台時的架構圖
2.1.2 Moodle 免費平台 v.s.商用平台
表2- Moodle 平台 v.s.商業平台
Moodle 商用平台
花費 0 買斷、每年租約、人數授權
每年數十萬至數百萬 使用平台與資料庫 可使用在OpenSource 的作
業系統與資料庫上
部分需搭配商業資料庫
系統功能性 完整(彈性較大) 完整(需另外客製化)
系統發展 可自行修改成符合本身需
求
不能修改，或是需付費客 製化
系統擴充 開放原始碼，並有全世界
各地開發者已經開發出數 千個功能模組可供使用
大部分部開分自行修改原 始碼，否則未來系統升級 會有障礙
使用者族群 從小實驗室、國中小至大
專院校、自行架設的使用 者遍及各地
只限購買者
2.2 程式設計合作學習平台
程式設計合作學習平台結合雲端運算服務及程式資料庫，提供教師規劃程式 設計課程活動的教學資源，並且讓學生能隨時隨地練習程式設計，和同學互 相合作學習程式語言。
(一) 使用自動化雲端裁判系統判別學生作答結果，無需人工執行程式。
(二) 學生作答錯誤時將提供相關資訊，幫助學生修正程式碼。
(三). 記錄學生每次儲存的作答內容，幫助教師掌握學生學習情形。
(四) 提供學生互動功能，讓寫程式不再只能孤軍奮戰，提高學習動機。
(五) 透過網頁介面操作，可隨時隨地使用各種裝置進行教學。
圖2- 教師使用流程圖
圖2- 學生使用流程圖
2.3 Codecademy
Codecademy 是一個線上交互式網站平台，它提供免費寫程式課程，其程式語 言包括例如Python、JavaScript 和 Ruby，也包括置標語言例如 HTML 和 CSS。
Codecademy 號稱可以讓你在一年內學會怎麼撰寫 JavaScript 程式。而且最讓人 驚喜的是它的互動式教學，Codecademy 會在網頁上顯示一個文字編輯器，模 擬程式設計師在撰寫程式時文字編輯器的反應，使用者按照Codecademy 的指 示輸入對應的程式碼，Codecademy 就會告訴你輸入的程式碼正不正確，另外 也會顯示程式碼執行的結果。
除了互動性之外，Codecademy 讓人喜愛的特色還有它的遊戲性與社交性，
Codecademy 會在完成每一段落課程時，給予使用者徽章和分數，顯示使用者 已經達成的學習目標，這有點像是Xbox Live 的成就或是 PSN 的白金獎盃，
讓學習程式撰寫變成一件有趣的事。另外這些徽章和分數不只是拿來敝帚自珍 用的，你還可以透過Twitter 社交網路把這些成就分享出去，讓你的朋友可以 看到目前學習的進度。
圖2- Codecademy使用介面
2.4 Code Judger
Code Judger 精簡易用的介面，讓老師或學生都可以很容易的操作使用，
線上直接編譯和執行的功能讓學生可以隨時隨地的編寫程式，學生可以依照 單元及自己的程度進行練習，由簡入深的學習可有效的提升學生程式能力，
克服學生學習程式的心理障礙，提高學習動機。
而教師主控台的管理功能，讓老師可以很容易的建立和管理題庫，再將 題庫的題目設定成不同的考卷讓學生測驗，並透過統計資料掌握學生的學習 狀況，讓老師能更精確的檢視每位學生的問題，針對不同的學生提出個人化 的學習建議，讓老師在教學上更得心應手。
透過Code Judger 即練即評的設計，以及 TQC+認證題庫特別設計的題型，讓學習 者以文字模式程式語言解題的過中，培養「抽象的邏輯思考與數學概念」。學成後 可獲得：
(一)培養學習者具備程式設計的認知以及解決問題的能力。
(二)學習者可實際演練操作程式設計的編輯與執行環境，熟悉程式設計的開發 流程，建立實作的能力。
(三)具備 TQC+認證之能力。
圖2- CODE JUDGER使用介面
第三章 研究架構
中小學C 語言學習平台，包含有一身分辨認登入端、一翻譯批改端與連接兩 者之間的一C 語言學習平台。
使用者經身分辨認登入端確認後，可進入C 語言學習平台中的程式學習單元 或題庫單元學習後，送至批改端執行翻譯、編譯和批改等動作。
能將錯誤訊息翻譯成淺顯易懂的中文，並有大量的是非選擇題庫供使用者學 習，因此適合中小學生學習C 語言之用。
3.1 系統架構
本平台主要分為三部分:學生區、教師區、管理者區。學生區的部分主要有三項 功能分別為:討論區、編譯區、題庫區。教師區的部分有四項功能分別為:新增題目、
上傳題目、修改題目、查看分數。管理者區則是有學生區和教師區的功能。學生區的 主要整體系統架構如圖3-1 所示，使用者輸入帳密之後可以進入平台，平台主要 則是分程式學習單元與題庫單元。
圖3- 學生區整體主要系統架構
程式學習單元的架構圖如圖3-2 所示主要是可以讓學生直接在網頁上撰寫程 式碼，學生輸入正確帳密進入到編輯單元之後，它會將學生所撰寫之程式碼編譯 連結單元進行編譯，編譯完沒錯誤就會產生一個執行檔，編譯完如果有錯誤則會 將錯誤訊息翻譯成中文並且印出來。
圖3- 程式學習單元架構圖
題庫單元的架構圖如圖3-3 所示，會將學生作答完的答案丟至翻譯批改端批 改並且會給予分數，學生是只能進行作答題目的部分，教師的部分則是可以任意 新增、修改、刪除題目。
圖3- 題庫單元架構圖
3.2 建立網頁
3.2.1 事先準備
先準備一套方便編輯程式碼的純文字編輯器，這邊使用了sublime 作為我們的文 字編輯器， sublime Text 的好處是在做網頁設計時可以將你需要的功能以套件 (Plugin)的方式快速安裝，上述所有問題在其套件強大的火力支援下都能立刻解決 了，除此之外他的撰寫介面提供許多華麗又漂亮的版型。
下載XAMPP 並安裝 啟用XAMPP
這是 XAMPP 的主控台，一開始所有功能都尚未啟用，把 Apache 與 MySQL 的 Start 按下去。
圖3- XAMPP Control Panel
用phpMyAdmin 存取資料庫
首先，我們要設定好 MySQL 的密碼後再開始使用資料庫，因為許多 Web 程式不允許空密碼。
先回到 XAMPP 網頁管理台，按下左邊的「安全」連結，會看到安全性設定 頁面。我們依照指示按下下方的連結開始設定密碼。
依照說明，替 MySQL 的 root 帳號設定密碼，如圖 3-5 所示
圖3- 設定密碼
設 定 完 成 後 ， 我 們 在 網 址 列 輸 入 localhost/phpmyadmin 就 會 進 到 phpMyAdmin 的介面，輸入 root 的帳號與剛剛更改的密碼。
3.2.2 製作編譯器
整個過程可以大致上分成四個步驟，分別為預處理 (pre-processing)、編譯 (compilation)、彙編 (assembly) 與鏈接 (linking)。
圖3- 製作編譯器的流程圖
預處理 (pre-processing)
在這個階段編譯器主要的工作是展開引用的外部檔案、 macro 及 define 。 1. 刪除所有的 #define 並展開所有 macro
2. 處理所有的預編譯條件，例如 #ifdef , #include (展開引用文件) 3. 刪除所有註解
4. 增加 行號以及文件識別名，讓編譯器在編譯失敗時可以顯示錯誤的行數
編譯 (compilation)
此階段編譯器會將展開後的程式碼轉換成組合語言。此階段又可以細分成四個小 步驟，分別為 掃描 (scan)、語法分析 (parsing) 、語意分析 (semantic analysis) 與 源 代碼優化 (source code optimization) 與 代碼生成與優化(code generation and
optimization)。
圖3- 編譯流程圖
利用 $ g++ -S main.cpp -o main.s 可以得到編譯過後的組合語言檔。
掃描 (scan)
目的為將程式碼的序列分割成一連串的 token，並將這些 token 分類，例如：
保留關鍵字、標示符、常量 (數字或字串)、特殊符號 (加減號) 等等⋯
舉例來說， B = 4 + 8;這段程式碼是由六個 token 所組成。B 為標示符，= + ; 為特殊符號，4 8 為常量。
圖3- 由符號組成的文法樹
語法分析 (parsing)
有了這些 token 之後，我們就可以組出對應的文法樹 (syntax tree) ，可以幫助 我們分析複雜的運算式是否正確。
圖3- 對應的文法樹
語意分析 (semantic analysis)
接下來要判斷語意的正確性，比如說我們允許兩個常量相乘，但不允許對兩 個指標做相乘。而語意又可分成靜態語意以及動態語意，靜態語意是編譯器可以 在編譯期分析的，並且回報錯誤，例如：型態的轉換是否正確。而動態語意則是 在 執行期相關的，例如：以零當作除數是一個執行期的語意錯誤。
源代碼優化 (source code optimization)
現代編譯器通常會有著不同層級的優化方式，這邊提到的是源代碼層級的優 化。以此例來說，在編譯過程中我們其實就已經知道 4 + 8 的值了，我們就可以直 接用 12 來取代。此外，為了增進程式碼轉換為組合語言的效率，通常會使用 三 位址碼 (three address code) 來改寫程式碼。
彙編 (assembly)
此步驟只是簡單的將組合語言轉換成對應的機器語言，只要根據對照表翻譯 即可。
$ g++ -c main.cpp -o main.o
經過以上指令後，便可以產生 目標文件檔 (.o/.obj)。
目標文件檔遵循可執行文件格式 (ELF) 來儲存，格式內的細節就不在此多加 描述。但我們可以簡單地將其視為儲存數種不同區段的機器語言格式− 代碼區段 , 數據區段 , 符號表 , 重定位表 … 等等。
有一個值得注意的地方是，程式碼內的代碼與數據被分開到不同的區段中。這 樣有什麼好處呢？
(1) 執行時可以給予區段不同的讀寫權限 (代碼 read-only，數據 read-write) (2) 增加緩存 (cache) 的命中率
(3) 讓多個相同的程序 (process) 共用程式區段，以減少記憶體用量。
鏈接 (linking)
這個步驟是讓編譯器能夠知道代碼中外部函數或是外部變數明確的 位址 。 比方說，我們在檔案 main.cpp 中引用了別的檔案 func.cpp 中的 foo() 函數。我們 必須先知道這個函數到底在哪裡，才可以呼叫它。
鏈結要做的事情，就是把多個不同的文件組合在一起，成為一個完整的整體。
以這個例子來說，func.cpp 定義 (define) 函數 foo() ，而 main.cpp 引用 (reference) 了函數 foo()。
每個被定義的變量都應該要有一個獨一無二的名稱，引用的時候才不會跟其他 變量混淆。我們將變量或函數通稱為符號 (symbol)，而他們的名稱則稱為符號名 (symbol name)。
在編譯期轉成組合語言時，我們已經知道代碼會呼叫哪些符號，但是我們並 不知道這些符號真正的位址。當最後將代碼轉成機器語言時，我們會先賦予這些 符號一個假的位址，並且用一個重定位表去記錄有哪些符號的位址是假的，之後 需要再次修改。
而這些資訊就會被記錄在目標文件內的符號表 (symbol table) 以及重定位表 (relocation table) 中。
而在此階段，鏈結器 (linker) 便會分配符號所需的地址，並且依照符號表與重定位 表來重新修改機器語言的內容。
預編譯 (pre-processing) 展開文件內的定義與預編譯，並刪除不必要的部份。
編譯 (compilation) 將代碼編譯並優化成組合語言。彙編 (assembly)將組合語言轉成 機器語言，轉成目標文件。鏈結 (linking) 透過目標文件內的資訊來分配空間以及 確定符號的確切位址。
第四章 實驗結果
4.1 實驗環境
本平台主要是由使用php 與 html 程式語言來撰寫，而程式碼文字編輯器則主 要是使用sublime，實驗環境整理於下表:
表4- 實驗環境
4.2 實驗介面
網站首頁分為三部分:學生區、教師區、管理者區
PHP 7.3.7
HTML HTML5
Sublime Sublime Text 2
圖4- 網站首頁介面
1.討論區:學生可以用臉書註冊，註冊完就能在上面留言，學生們可以互相討論
圖4- 討論區介面圖
2.題庫區:題庫區按照不同的題型單元分類，學生可以按照自己的需求去做測驗。
圖4- 題庫區架構圖
圖4- 題庫系統介面
3.編譯區:讓學生可以在網頁上直接撰寫程式碼，不須再去額外下載軟體來撰寫，
錯誤訊息會顯示在 output 區塊，並且會將錯誤訊息翻譯成中文顯示給學生看，學 生撰寫完也可將程式碼儲存起來，方便日後繼續使用。
圖4- 編譯器介面圖
教師區只要分為四個部分:新增題目、上傳題目、修改題目、查看分數。
圖4- 教師區介面圖
1.新增題目:教師點擊新增題目後，可以選擇要新增是非題或是選擇題，選完之後 就可以開始新增題目，一次能新增多筆。
圖4- 新增題目介面圖
2.上傳題目:教師不一定要手動輸入題目，也可以直接將整個檔案直接上傳。
圖4- 上傳題目介面
3.修改題目:如果教師發現自記上傳的題目有誤的話可以自行修改 圖4- 修改題目介面
圖4- 修改題目介面 4.查看分數:教師可以查看學生測驗完後的成績
圖4- 查看分數介面
管理區:主要是將學生、教師、管理者的功能整合在一起
圖4- 管理者介面
4.2 平台比較
4.2.1 傳統單機 v.s.雲端平台
表4- 傳統單機 v.s.雲端平台
4.2.2平台特色問卷調查
表 4- 平台特色調查
傳統單機 雲端平台
只能單機並安裝特定語言 編譯軟體(如 Dev C++或 Visual C++)撰寫
下課後，解題有困難，必 須使用其他通訊軟體詢問 同學
可跨平台撰寫程式，只需安裝 chrome 瀏覽器軟 體，即可撰寫程式
隨時隨地，任何載具均能撰寫程式 下課後可相約平台線上解題討論
回覆人數 認同人數 認同比例
有大量的題目可以做練習 92 80 87%
有討論區方便大家互相交流 93 78 84%
能將錯誤訊息翻譯成中文 91 90 99%
測驗單元依不同課程進行分類 90 80 89%
透過網頁介面操作，可隨時隨地使用各
種裝置進行教學 93 90 97%
\
4.2.3本平台 v.s.程式學習平台
表 4- 本平台 V.S.程式學習平台
程式學習平台 本平台
錯誤訊息較簡潔易懂 10% 90%
題目較豐富 33% 67%
較適合初學者學習 41% 59%
4.2.4 本平台 v.s. Moodle 平台
表 4- 本平台 V.S. Moodle 平台
Moodle 本平台
有較大量的題目 20% 80%
有較豐富完整的課程 45% 55%
較適合初學者學習 30% 70%
4.2.5 本平台 v.s. Codecademy 平台
表 4- 本平台 V.S. Codecademy
Codecademy 本平台
課程較豐富 44% 56%
平台功能較多樣化 30% 70%
較適合初學者學習 20% 80%
第五章 結論
本平台主要目的是為了讓學生能更有效率的學習寫程式，在編譯區的部分透
過簡潔的介面以及將錯誤訊息翻譯成中文功能讓學生學起來更容易上手，讓們獲 得程式設計技巧，在題庫區的部分則是透過大量的題目讓學生去做練習，裡面的 題目都是學生很容易會犯的錯誤，有些則是較艱難的題目讓學生運用分析思考力 解決問題，在討論區的部分，學生可以直接透過臉書來註冊，主要是讓學生可以 增加彼此的互動性，因為程式是很活的東西，互相討論才會有所進步。
最後也透過了問卷的方法來顯示出本平台與其他平台相比上的優勢，可以看 出功能性以及題庫上是比其他平台優勢高很多的，希望透過本平台的這些優勢能 讓更多學生不再討厭去碰程式。
本平台在互動性方面做得較不盡完善，除了討論區以外，沒有什麼互動式的 介面，學生學起來可能會覺得較無趣，像 Codecademy 就是一個很值得參考的平 台，這是未來希望能改善的地方。
第六章 參考文獻
1.Moodle 系統架構規劃 https://www.click-ap.com/moodle/frame 2.使用 phpBB3 架構討論區 https://magiclen.org/phpbb3-install/
3.https://www.techbang.com/posts/8212-codecademy-makes-you-a-year-to-learn-about- programming
4. https://pjchender.blogspot.com/2015/03/php-mysql-phpmyadmin.html
5.Pei Zhang ; You Song ; Biaobiao Kang ; Wei Chen.Online Programming Platform Based On Crowdsourcing
6. Philip E. Robinson ; Johnson Carroll.An online learning platform for teaching,
learning, and assessment of programming
7. You Song ; Jingwei Yang ; Xinyi Fei ; Xinxin Ma ; Dongyuan Ma.How does College Students' Online Learning Behavior Impact Their Academic Performance
