基于CodeMirror的Web在線編程實(shí)訓(xùn)模塊設(shè)計(jì)與實(shí)現(xiàn)

黃小冬

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

關(guān)鍵詞：CodeMirror;Web編程;在線實(shí)訓(xùn);設(shè)計(jì)與實(shí)現(xiàn)

中圖分類(lèi)號(hào)：TP311? ? ?文獻(xiàn)標(biāo)識(shí)碼：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)的深度融合，對(duì)技術(shù)技能型人才的需求也在發(fā)生著變化。面向未來(lái)，技術(shù)技能型人才尤其需要“互聯(lián)網(wǎng)+”思維與能力，具有編程能力將更具競(jìng)爭(zhēng)力，這已成為高等教育界乃至K12教育的共識(shí)[1]。Web編程以其入門(mén)較易、使用面廣的特點(diǎn)，尤其適合“互聯(lián)網(wǎng)+”技術(shù)技能型人才培養(yǎng)。得益于MOOCs的流行[2]，Web編程的課程資源豐富且較容易獲得。

但是，這些MOOCs對(duì)編程實(shí)訓(xùn)的支持并不夠好，課程的實(shí)訓(xùn)部分一般以離線練習(xí)、常規(guī)在線題庫(kù)如選擇題、問(wèn)答題的方式進(jìn)行。編程作為一項(xiàng)技能，學(xué)習(xí)者須通過(guò)動(dòng)手實(shí)踐才能深入掌握。常規(guī)在線題庫(kù)不能滿(mǎn)足這一需求，而離線練習(xí)又使學(xué)習(xí)者難以得到及時(shí)有效的反饋。對(duì)于相當(dāng)多的學(xué)習(xí)者來(lái)說(shuō)，初學(xué)編程被認(rèn)為是一項(xiàng)艱巨而具有挑戰(zhàn)性的任務(wù)，編程類(lèi)型網(wǎng)絡(luò)課程的完課率也較低[3]。Web編程類(lèi)的MOOCs需要實(shí)現(xiàn)對(duì)學(xué)習(xí)者實(shí)訓(xùn)環(huán)節(jié)的有效支持。一般而言，MOOCs系統(tǒng)對(duì)用戶(hù)系統(tǒng)、課程信息、章節(jié)知識(shí)點(diǎn)結(jié)構(gòu)的定義均有較好支持與實(shí)現(xiàn)?；诖耍疚膶?zhuān)門(mén)探討如何設(shè)計(jì)與實(shí)現(xiàn)Web在線編程實(shí)訓(xùn)模塊。

2? ?CodeMirror編輯器（CodeMirror eitor）

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

滿(mǎn)足這些要求的在線代碼編輯器目前主流有CodeMirror、Ace、Quill、Medium-editor、Draft.js。其中CodeMirror是功能強(qiáng)大的開(kāi)源軟件，尤其適合Web在線編程實(shí)訓(xùn)，見(jiàn)表1。

3? Web在線編程實(shí)訓(xùn)模塊設(shè)計(jì)（Web Online programming training module design）

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

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

3.2? ?Web在線編程實(shí)訓(xùn)模塊功能設(shè)計(jì)

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

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

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

參考文獻(xiàn)（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：一個(gè)基于微服務(wù)架構(gòu)的在線編程系統(tǒng)[J].計(jì)算機(jī)科學(xué)，2017，44（04）：8-11.

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

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

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

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