基于CodeMirror的Web在線編程實訓模塊設計與實現

黃小冬

摘? 要：“互聯網+”時代，編程能力的培養將是技術技能人才培養的重要范疇。MOOCs在Web編程課程資源的傳播上發揮著巨大作用，但其對編程的實訓過程支持欠佳。本文基于CodeMirror編輯器，探討Web在線編程實訓模塊設計及實現語法高亮與語法檢查、可編輯區域的定義與使用、實訓步驟的拆分及實訓結果檢測規則的方式，以彌補這一不足。

關鍵詞：CodeMirror;Web編程;在線實訓;設計與實現

中圖分類號：TP311? ? ?文獻標識碼：A

Design and Implementation of Web Online Programming?Training Module Based on CodeMirror

HUANG Xiaodong

（Chongqing Technology & Business Institute，Hechuan 401520，China）

Abstract：In the Internet+era，programming skill is an important area for the cultivation of technical personnel in the future.MOOCs plays a huge role in the dissemination of Web programming curriculum resources，but lacks? support for programming training process.Based on the CodeMirror editor，this paper explores the design of Web online programming training module and how to implement syntax highlighting and grammar checking，definition and use of editable areas，splitting of training steps and training results detection rules to solve the problem.

Keywords：CodeMirror;Web programming;online training;design and implementation

1? ?引言（Introduction）

現如今，各行各業都在探索與互聯網的深度融合，對技術技能型人才的需求也在發生著變化。面向未來，技術技能型人才尤其需要“互聯網+”思維與能力，具有編程能力將更具競爭力，這已成為高等教育界乃至K12教育的共識[1]。Web編程以其入門較易、使用面廣的特點，尤其適合“互聯網+”技術技能型人才培養。得益于MOOCs的流行[2]，Web編程的課程資源豐富且較容易獲得。

但是，這些MOOCs對編程實訓的支持并不夠好，課程的實訓部分一般以離線練習、常規在線題庫如選擇題、問答題的方式進行。編程作為一項技能，學習者須通過動手實踐才能深入掌握。常規在線題庫不能滿足這一需求，而離線練習又使學習者難以得到及時有效的反饋。對于相當多的學習者來說，初學編程被認為是一項艱巨而具有挑戰性的任務，編程類型網絡課程的完課率也較低[3]。Web編程類的MOOCs需要實現對學習者實訓環節的有效支持。一般而言，MOOCs系統對用戶系統、課程信息、章節知識點結構的定義均有較好支持與實現?；诖?，本文將專門探討如何設計與實現Web在線編程實訓模塊。

2? ?CodeMirror編輯器（CodeMirror eitor）

在線編程即是通過瀏覽器進行代碼的編輯、調試甚至部署[4]。編輯器不僅僅是一個內容編輯框，而是實現Web編程在線實訓過程性支持的關鍵。編輯器需要具有桌面IDE編輯器的部分功能，如代碼高亮、語法提示等;還要具有可拓展性，提供接口，從而實現輸入范圍約束、輸入內容的獲取等。

滿足這些要求的在線代碼編輯器目前主流有CodeMirror、Ace、Quill、Medium-editor、Draft.js。其中CodeMirror是功能強大的開源軟件，尤其適合Web在線編程實訓，見表1。

3? Web在線編程實訓模塊設計（Web Online programming training module design）

3.1? ?數據表設計

采用MongoDB數據庫進行數據表設計。MongoDB屬于NoSQL數據庫，其管理技術的特點主要是基于“鍵值對”（key—value）數據模型來進行數據管理，它打破了傳統的關系模型，以一種模式自由的方式存儲數據[5]。本文將每個實訓題（Practice）存儲為一個MongoDB的BSON文檔，包含實訓題ID（practiceId）、實訓題名稱（practiceName）、課程知識章節ID（sectionId）、內容說明（content）、初始代碼包（codePackage）、代碼文件的可編輯區域設置（config）、結果檢查規則（node）。其中，config為Object類型，以文件全路徑名稱（“.”替換為“#”）為鍵，以文件的可編輯方式（editable）、可編輯區域的行數范圍（block）為值。為更好支持學習者自主編程實訓，參照支架式教學理念，支持步驟分解實訓目標，實現細粒度的實訓支持。Node為實訓的每一步定義結果檢查規則。如圖1所示。

3.2? ?Web在線編程實訓模塊功能設計

從教師實訓題編輯、學生在線實訓兩方面對Web在線編程實訓模塊進行功能設計。如圖2所示，教師實訓編輯功能主要包括實訓題基本信息管理、實訓題代碼管理、可編輯區域管理、結果檢查規則管理。創建新的實訓題后，將可包括各種庫的代碼打包上傳，Web在線編程實訓模塊以此生成實訓代碼目錄。教師可創建、刪除目錄和文件，或更新部分文件的代碼。設置可編輯區域的起始行、結束行。創建實訓步驟，每步綁定可編輯區域，設置結果檢查規則：人工檢查，需設置審核說明;自動檢查，需設置匹配方式、過濾字符、答案。

5? ?結論（Conclusion）

本文基于CodeMirror編輯器設計Web在線編程實訓模塊，實現對HTML、CSS、JS等多種Web編程語言的語法高亮與語法檢查;設計并實現可編輯區域、結果檢測規則的自定義與限定，根據實訓目標細分實訓步驟實現學生自主在線編程實訓的細粒度支持。設計并實現的Web在線編程模塊將有效彌補MOOCs平臺普遍存在編程實訓過程性支持不足的問題，對相關系統的設計與開發具有參考價值。

參考文獻（References）

[1] Fatih Soykan，Sezer Kanbul.Analysing K12 Students' Self-Efficacy Regarding Coding Education[J].Association for Information Communication Technology Education and Science，2018，2（1）：182-187.

[2] José Azevedo. MOOC Success Factors：Proposal of an Analysis Framework[J].Journal of Information Technology Education： Innovations in Practice，2017，16（1）：233-251.

[3] Sohail Iqbal Malik.Comparison of Traditional and ADRI Based Teaching Approaches in an Introductory Programming Course[J].Journal of Information Technology Education： Research，2016，16（1）：265-283.

[4] 胡星，王澤瑞，李爍，等.POP：一個基于微服務架構的在線編程系統[J].計算機科學，2017，44（04）：8-11.

[5] 李常青，谷建華.一種基于ANTLR的MongoDB數據庫SQL轉化模型[J].西北工業大學學報，2017，35（01）：143-147.

[6] 李瑩，柳生鵬，趙朗，等.自適應RESTful Web API進化模型的研究[J].計算機集成制造系統，2017，23（05）：1020-1030.

[7] CodeMirror.User Manual[EB/OL].https：//codemirror.net/doc/manual.html，2019-01-08.

[8] 付哲，李軍.高性能正則表達式匹配算法綜述[J].計算機工程與應用，2018，54（20）：1-13.