黃小冬

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

關鍵詞：CodeMirror;Web編程;在線實訓;設計與實現(xiàn)

中圖分類號：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）

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

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

2? ?CodeMirror編輯器（CodeMirror eitor）

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

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

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

3.1? ?數(shù)據(jù)表設計

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

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

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

5? ?結(jié)論（Conclusion）

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

參考文獻（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：一個基于微服務架構的在線編程系統(tǒng)[J].計算機科學，2017，44（04）：8-11.

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

[6] 李瑩，柳生鵬，趙朗，等.自適應RESTful Web API進化模型的研究[J].計算機集成制造系統(tǒng)，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.