“崗課賽證”下前端開發(fā)課程線上實(shí)訓(xùn)的研究*

朱雪梅 黃志成

（廣東女子職業(yè)技術(shù)學(xué)院 廣東廣州 510000）

一、前端開發(fā)課程的崗課融通基本要求

2021年4月，全國(guó)職業(yè)教育大會(huì)上提出“崗課賽證”新概念[1]?！皪彙笔枪ぷ鲘徫弧ⅰ罢n”是課程體系、“賽”是職業(yè)技能大賽、“證”是職業(yè)技能等級(jí)證書。崗課賽證是指結(jié)合專業(yè)對(duì)應(yīng)崗位設(shè)置課程，以崗位要求設(shè)置職業(yè)考證，同時(shí)以賽促教，以賽促學(xué)，以提升學(xué)生的工作崗位實(shí)踐能力為人才培養(yǎng)目標(biāo)。課程是崗課賽證融通的核心與載體，同時(shí)將職業(yè)資格證書考試與專業(yè)課程教學(xué)相銜接，做到課程與考證相結(jié)合，課程與職業(yè)資格證書融合。證書的核心就是“1+X”職業(yè)技能等級(jí)證書，2019年教育部下發(fā)《關(guān)于在院校實(shí)施“學(xué)歷證書+若干職業(yè)技能等級(jí)證書”制度試點(diǎn)方案》，開啟了“1+X”證書試點(diǎn)工作。所謂的“1+X”，其中“1”指的是學(xué)歷證書，而“X”指的是若干職業(yè)技能等級(jí)證書，“1+X”體現(xiàn)了學(xué)歷與能力并重的理念。

前端開發(fā)課程對(duì)應(yīng)的是“1+X”web前端開發(fā)職業(yè)技能等級(jí)證書，它對(duì)應(yīng)的知識(shí)點(diǎn)是從職業(yè)頂層目標(biāo)（工作領(lǐng)域）出發(fā)，分解出這些工作領(lǐng)域的“工作任務(wù)”，根據(jù)工作任務(wù)說(shuō)明職業(yè)技能要求，再依據(jù)職業(yè)技能要求列出詳細(xì)的技能要求，最后從技能要求闡明所需掌握的知識(shí)。整個(gè)職業(yè)技能考查的是學(xué)生既要有知識(shí)的獲得，又在崗位實(shí)踐能力上有所提高，最后提升崗位職業(yè)素養(yǎng)，因而前端開發(fā)課程的教學(xué)應(yīng)該融入“1+X”技能點(diǎn)，創(chuàng)新該類課程的崗課賽證融通教學(xué)[2][3]，讓學(xué)生通過(guò)課程的學(xué)習(xí)能夠提高“1+X”考證率，從而達(dá)到提高崗位職業(yè)能力的教學(xué)目標(biāo)。

二、前端開發(fā)課程的教學(xué)問(wèn)題反思

高職學(xué)生對(duì)于編程類的課程都缺乏編程實(shí)踐練習(xí)、編程思維能力培養(yǎng)，在崗課賽證融通機(jī)制下，如何融入“1+X”考證技能點(diǎn)進(jìn)行上機(jī)實(shí)訓(xùn)教學(xué)，是目前高職教育工作者創(chuàng)新教學(xué)需要研究的重點(diǎn)問(wèn)題。以往前端開發(fā)課程的實(shí)訓(xùn)教學(xué)存在以下問(wèn)題。

1.實(shí)訓(xùn)內(nèi)容覆蓋面小

以往前端課程的上機(jī)實(shí)訓(xùn)練習(xí)或課后實(shí)踐，都是課堂某個(gè)知識(shí)點(diǎn)的反復(fù)練習(xí)，幾乎很少覆蓋“1+X”考證內(nèi)容技能點(diǎn)，無(wú)法做成“1+X”考證題庫(kù)。大多數(shù)實(shí)訓(xùn)操作練習(xí)都是安排學(xué)生照葫蘆畫瓢，進(jìn)行驗(yàn)證性上機(jī)實(shí)訓(xùn)，學(xué)生不會(huì)遷移運(yùn)用，學(xué)習(xí)效果差，學(xué)生能力與企業(yè)真實(shí)職業(yè)崗位要求差距較大。同時(shí)，上機(jī)練習(xí)學(xué)生達(dá)不到量的有效訓(xùn)練，更談不上質(zhì)的提高。學(xué)生只有較為全面掌握和熟練運(yùn)用編程語(yǔ)言，才能更好勝任企業(yè)崗位軟件開發(fā)工作。

2.實(shí)訓(xùn)線下輔導(dǎo)效率低

學(xué)生在上機(jī)訓(xùn)練時(shí)，都需要教師一對(duì)一指導(dǎo)才了解自己的實(shí)訓(xùn)效果。課上時(shí)間有限，教師很難對(duì)每個(gè)學(xué)生進(jìn)行一一指導(dǎo)，更談不上分層教學(xué)，針對(duì)性輔導(dǎo)。教師因?yàn)橥瑫r(shí)帶多個(gè)班教學(xué)，批改作業(yè)不能及時(shí)給予反饋，教學(xué)效率低、教學(xué)效果差，從而打擊學(xué)生學(xué)習(xí)的積極性。

由上而知，學(xué)生在傳統(tǒng)的前端開發(fā)課程實(shí)訓(xùn)中很難進(jìn)行知識(shí)遷移運(yùn)用和能力拓展。針對(duì)高職學(xué)生量身訂造，又能按照高職教育的崗課賽證新要求，融入企業(yè)“1+X”考證內(nèi)容，使用人工智能技術(shù)提升上機(jī)實(shí)訓(xùn)教學(xué)效率，能在疫情常態(tài)化管控下輔助教師進(jìn)行線上教學(xué)，創(chuàng)新線上線下教學(xué)形式，實(shí)現(xiàn)崗—課—賽—證融合的上機(jī)實(shí)訓(xùn)系統(tǒng)，顯得非常有必要。

三、崗課賽證融通下前端開發(fā)課程能力要求

崗課賽證融通下的職業(yè)教育，“崗”是育人標(biāo)準(zhǔn)，“課”是育人核心，“賽”是育人手段，“證”是能力拓展。前端開發(fā)課程根據(jù)“1+X”證書技能點(diǎn)對(duì)課程進(jìn)行重構(gòu)，將企業(yè)真實(shí)項(xiàng)目引入教學(xué)，結(jié)合企業(yè)崗位需求設(shè)置教學(xué)內(nèi)容，根據(jù)工作流程設(shè)置課程任務(wù)。

“1+X”Web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)（簡(jiǎn)稱“技能標(biāo)準(zhǔn)”）分為初級(jí)、中級(jí)和高級(jí)，以中級(jí)技能點(diǎn)為例來(lái)進(jìn)行說(shuō)明。中級(jí)證書的技能標(biāo)準(zhǔn)的工作領(lǐng)域?yàn)椋红o態(tài)網(wǎng)頁(yè)搭建、動(dòng)態(tài)網(wǎng)站搭建、移動(dòng)端靜態(tài)網(wǎng)站開發(fā)、移動(dòng)端動(dòng)態(tài)網(wǎng)站開發(fā)；工作任務(wù)主要是網(wǎng)頁(yè)開發(fā)和美化，技能點(diǎn)主要是HTML、CSS、CSS3、JQuery等前端知識(shí)，根據(jù)技能標(biāo)準(zhǔn)要求的技能點(diǎn)，對(duì)課程內(nèi)容進(jìn)行重構(gòu)，形成“以項(xiàng)目為載體”的項(xiàng)目化課程，每個(gè)項(xiàng)目是校企合作遴選的市場(chǎng)需求的真實(shí)企業(yè)項(xiàng)目，每個(gè)項(xiàng)目再根據(jù)工作流程細(xì)化為需求分析、功能實(shí)現(xiàn)、成果展示評(píng)價(jià)等各個(gè)具體的工作任務(wù)（如圖1所示）。

圖1 前端課程“1+X”技能點(diǎn)要求

四、融入“1+X”技能點(diǎn)的前端開發(fā)課程線上智能實(shí)訓(xùn)平臺(tái)的研究

線上智能實(shí)訓(xùn)平臺(tái)適用于web前端課程群（含網(wǎng)頁(yè)設(shè)計(jì)類課程、JavaScript程序設(shè)計(jì)類課程、CSS樣式布局類課程）的上機(jī)實(shí)訓(xùn)系統(tǒng)，能對(duì)學(xué)生上機(jī)的操作進(jìn)行智能化判斷，提高web前端類課程上機(jī)實(shí)訓(xùn)的教學(xué)質(zhì)量，提升學(xué)生“1+X”考證能力。

1.線上智能實(shí)訓(xùn)平臺(tái)的研究現(xiàn)狀

根據(jù)“1+X”證書技能的要求，Web前端開發(fā)類課程的主要知識(shí)點(diǎn)為HTML，CSS，Javascript動(dòng)態(tài)特效、API等，前面所述急需開發(fā)的線上實(shí)訓(xùn)平臺(tái)主要就是考查學(xué)生HTML，CSS及Javascript代碼編寫能力，并對(duì)學(xué)生的代碼進(jìn)行智能評(píng)價(jià)。人工智能評(píng)價(jià)學(xué)生的結(jié)果需要的技術(shù)復(fù)雜，涉及前端網(wǎng)頁(yè)測(cè)試領(lǐng)域。軟件測(cè)試的一個(gè)分支就是前端網(wǎng)頁(yè)測(cè)試，目前研究的主流方向就是自動(dòng)化測(cè)試。2004年，國(guó)外就開始了網(wǎng)頁(yè)的自動(dòng)化測(cè)試技術(shù)的研究。自動(dòng)化測(cè)試在國(guó)內(nèi)的發(fā)展較晚，且技術(shù)水平較低。文獻(xiàn)最早提出一種網(wǎng)頁(yè)系統(tǒng)自動(dòng)化測(cè)試框架和規(guī)范，并應(yīng)用框架開展網(wǎng)頁(yè)自動(dòng)化測(cè)試，取得一定成效[4]。文獻(xiàn)應(yīng)用Selenium技術(shù)設(shè)計(jì)了一種網(wǎng)頁(yè)自動(dòng)化測(cè)試平臺(tái)，針對(duì)個(gè)別網(wǎng)頁(yè)功能可實(shí)現(xiàn)自動(dòng)化測(cè)試[5]。國(guó)內(nèi)研究人員多是基于這些技術(shù)開展應(yīng)用層的研究。而且根據(jù)國(guó)內(nèi)研究趨勢(shì)來(lái)看，前端自動(dòng)化測(cè)試技術(shù)朝著更加智能化方向發(fā)展，融入人工智能和大數(shù)據(jù)的前端自動(dòng)化測(cè)試將是今后的發(fā)展趨勢(shì)。

從中國(guó)期刊網(wǎng)上得到的文獻(xiàn)資料和從互聯(lián)網(wǎng)公開的資料顯示，目前大多數(shù)研究均集中在網(wǎng)頁(yè)人機(jī)交互自動(dòng)化測(cè)試方面，在web前端課程實(shí)訓(xùn)教學(xué)方面尚少人研究，對(duì)web前端上機(jī)實(shí)訓(xùn)操作結(jié)果進(jìn)行智能評(píng)價(jià)的目前尚屬空白。根據(jù)目前高職教育的崗課賽證發(fā)展要求，以及前端實(shí)訓(xùn)課程的迫切需求，研究一款融入企業(yè)“1+X”考證內(nèi)容，使用人工智能技術(shù)提升上機(jī)實(shí)訓(xùn)教學(xué)效率，創(chuàng)新線上線下混合教學(xué)模式的線上智能實(shí)訓(xùn)平臺(tái)有非常重要的教育意義。

2.線上智能實(shí)訓(xùn)平臺(tái)的技術(shù)研究

本研究基于phantomJS底層技術(shù)，設(shè)計(jì)開發(fā)一個(gè)web前端課程線上實(shí)訓(xùn)智能評(píng)價(jià)的輔學(xué)系統(tǒng)，具有開拓性和創(chuàng)新性。該平臺(tái)的開發(fā)具有很大技術(shù)難點(diǎn)。

（1）對(duì)傳統(tǒng)上機(jī)實(shí)訓(xùn)系統(tǒng)進(jìn)行解構(gòu)和重構(gòu)，實(shí)現(xiàn)云端應(yīng)用，原生支持互聯(lián)網(wǎng)+教學(xué)

主流的web前端設(shè)計(jì)課程群上機(jī)實(shí)訓(xùn)軟件均為單機(jī)PC版，需要在電腦上安裝專用實(shí)訓(xùn)軟件，一般由管理員安裝在機(jī)房。本研究的技術(shù)難點(diǎn)之一是采用新技術(shù)，對(duì)上機(jī)實(shí)訓(xùn)系統(tǒng)進(jìn)行解構(gòu)和重構(gòu)，采用新一代云計(jì)算技術(shù)，應(yīng)用前端最前沿框架技術(shù)，對(duì)上機(jī)實(shí)訓(xùn)所需的功能進(jìn)行重新實(shí)現(xiàn)，實(shí)現(xiàn)上機(jī)實(shí)訓(xùn)系統(tǒng)云端化應(yīng)用，只需要瀏覽器便可進(jìn)行在線上機(jī)實(shí)訓(xùn)。

（2）實(shí)現(xiàn)上機(jī)實(shí)訓(xùn)結(jié)果智能評(píng)價(jià)

傳統(tǒng)web前端類課程的上機(jī)實(shí)訓(xùn)都是制作一些動(dòng)態(tài)、動(dòng)效類的網(wǎng)頁(yè)特效，這些特效屬視角領(lǐng)域，這類上機(jī)實(shí)訓(xùn)結(jié)果往往需要教師進(jìn)行人工評(píng)價(jià)。本研究的技術(shù)難點(diǎn)之二就是，應(yīng)用前端自動(dòng)化測(cè)試技術(shù)，通過(guò)特殊技術(shù)，對(duì)上機(jī)操作產(chǎn)生的結(jié)果進(jìn)行量化，應(yīng)用最新人工智能技術(shù)，對(duì)學(xué)生上機(jī)結(jié)果進(jìn)行智能評(píng)價(jià)和實(shí)時(shí)反饋。

該平臺(tái)的開發(fā)技術(shù)架構(gòu)綜合使用selenium、phantomJS等webdriver前端自動(dòng)化測(cè)試框架，UIKit，HighLight，CodeMirror，Axios，JQuery，EChart，Webpack等前端框架和工具庫(kù)，采用B/S架構(gòu)進(jìn)行開發(fā)，如圖2所示。前端使用ES6 JavaScript、TypeScript設(shè)計(jì)前端功能，后端采用C.Net動(dòng)態(tài)技能開發(fā)服務(wù)器腳本，采用MySQL進(jìn)行數(shù)據(jù)庫(kù)存儲(chǔ)。

圖2

3.線上智能實(shí)訓(xùn)平臺(tái)題庫(kù)說(shuō)明

線上智能實(shí)訓(xùn)平臺(tái)的題目是教師通過(guò)將“1+X”考證內(nèi)容融入課程教學(xué)，設(shè)計(jì)不同能力層次實(shí)訓(xùn)操作題，調(diào)動(dòng)各個(gè)能力層次的學(xué)生，學(xué)生通過(guò)反復(fù)、闖關(guān)式訓(xùn)練獲得成就感，達(dá)到強(qiáng)化程序編制實(shí)際動(dòng)手能力。教師可以從繁重的輔導(dǎo)中得到解放，開展翻轉(zhuǎn)課堂教學(xué)，把精力放在監(jiān)控學(xué)生的學(xué)習(xí)情況，實(shí)時(shí)更新“1+X”技能題庫(kù)，調(diào)整教學(xué)策略上，從而為不同學(xué)生提供不同的教學(xué)內(nèi)容，針對(duì)不同生源實(shí)施精準(zhǔn)分層教學(xué)?；谙到y(tǒng)構(gòu)建線上虛擬實(shí)訓(xùn)室，還可以實(shí)現(xiàn)互聯(lián)網(wǎng)+教學(xué)。

線上智能實(shí)訓(xùn)平臺(tái)有管理員賬號(hào)和用戶賬號(hào)，管理員（教師角色）后臺(tái)設(shè)置題目，查看學(xué)習(xí)曲線等數(shù)據(jù)信息，用戶（學(xué)生角色）登錄系統(tǒng)選擇相應(yīng)的題目進(jìn)行強(qiáng)化訓(xùn)練。題庫(kù)的導(dǎo)航欄是由題目、知識(shí)點(diǎn)、難度、分值、狀態(tài)和操作六大項(xiàng)組成，知識(shí)點(diǎn)是將技能標(biāo)準(zhǔn)的技能知識(shí)點(diǎn)融入課程教學(xué)內(nèi)容，將技能點(diǎn)拆分重組為題目設(shè)置的知識(shí)點(diǎn)，難度是題庫(kù)設(shè)置了低中高三種難易程度的題目，不同難易程度的題目對(duì)應(yīng)的是不同分值，狀態(tài)就是顯示你是否做過(guò)這道題，操作就是題目練習(xí)入口，如圖3所示。

圖3 線上智能實(shí)訓(xùn)平臺(tái)題庫(kù)

題庫(kù)對(duì)“1+X”web前端開發(fā)職業(yè)技能等級(jí)標(biāo)準(zhǔn)里的技能點(diǎn)進(jìn)行拆分重組，比如JS分解為不同的語(yǔ)法基礎(chǔ)，如類型轉(zhuǎn)換、表達(dá)式、函數(shù)等，每個(gè)知識(shí)點(diǎn)設(shè)置不同難度的題由淺入深逐層深化進(jìn)行實(shí)訓(xùn)，通過(guò)三階段學(xué)習(xí)達(dá)到掌握知識(shí)點(diǎn)的目標(biāo)。

結(jié)語(yǔ)

本文針對(duì)如何實(shí)現(xiàn)前端開發(fā)課程“崗課賽證”融通教學(xué)，開發(fā)設(shè)計(jì)一個(gè)線上智能實(shí)訓(xùn)平臺(tái)，該實(shí)訓(xùn)平臺(tái)是將“1+X”證書的技能點(diǎn)融入設(shè)置實(shí)訓(xùn)題目，不僅對(duì)學(xué)生課上知識(shí)進(jìn)行強(qiáng)化訓(xùn)練，也對(duì)學(xué)生知識(shí)遷移運(yùn)用，備戰(zhàn)“1+X”考證有很好的輔助作用，同時(shí)也實(shí)現(xiàn)了崗課賽證導(dǎo)向教學(xué)下的“課證”融通教學(xué)。