孟煜雯 王穎潔 朱久祺 張程燁 趙龍江 翟昊

關(guān)鍵詞：教學(xué)應(yīng)用類App；移動學(xué)習(xí)；Vue開發(fā)框架；線上教學(xué)；數(shù)字化

隨著移動互聯(lián)網(wǎng)絡(luò)和移動通信技術(shù)的發(fā)展，通過移動設(shè)備接受教育和獲取知識已經(jīng)成為當(dāng)下非常熱門的一種學(xué)習(xí)方式。移動學(xué)習(xí)相對于在固定的時間、固定的地點學(xué)習(xí)的模式而言，具有更大的靈活性[1]。根據(jù)蘋果公司的統(tǒng)計數(shù)據(jù)顯示，目前在其應(yīng)用商城中已經(jīng)有超過65 000款移動學(xué)習(xí)類軟件。目前，基于手機(jī)App開發(fā)大學(xué)生的移動學(xué)習(xí)應(yīng)用雖然已經(jīng)成為現(xiàn)實，但是要想保障移動學(xué)習(xí)的效果，就必須要有豐富的學(xué)習(xí)資源作為支撐[2]。當(dāng)前在應(yīng)用商城中缺乏針對具體專業(yè)的移動學(xué)習(xí)App。同時，在已有的移動學(xué)習(xí)App中，存在著軟件操作難度過高、課程專業(yè)性較低、用戶體驗感不佳等問題。為了解決上述問題，本文針對計算機(jī)科學(xué)與技術(shù)專業(yè)開發(fā)了基于Vue框架的移動學(xué)習(xí)App應(yīng)用軟件。

1 基于Vue 的開發(fā)框架

首先，選擇正確的開發(fā)框架是移動應(yīng)用程序開發(fā)的一項重要任務(wù)，開發(fā)人員可以使用框架實現(xiàn)的內(nèi)置功能，高效地達(dá)到他們的開發(fā)目標(biāo)。這些預(yù)定義的組件通過采用優(yōu)秀的設(shè)計模式和實現(xiàn)方式，可以使應(yīng)用程序以標(biāo)準(zhǔn)化的方式開發(fā)。目前移動App的主流開源框架主要包括基于HTML5的開發(fā)框架、基于JavaS?cript的開發(fā)框架和基于UI的開發(fā)框架三類。

基于HTML5的開發(fā)框架在移動App發(fā)展的初期應(yīng)用廣泛，然而由于HTML采用網(wǎng)頁式的開發(fā)思路，許多API 接口無法得到使用，大大降低了開發(fā)的效率。同時，HTML也存在一些安全性問題，內(nèi)部安全機(jī)制相對其他框架而言并不成熟[3]。目前基于HTML5的常用開發(fā)框架包括Sencha Touch、Zoey和Jo等。

對于Web開發(fā)而言，JavaScript長期以來都是一門廣泛使用的編程語言。基于JavaScript的開發(fā)框架本質(zhì)是基于前端Web 框架技術(shù)，通過JavaScript 生成DOM控件，并在解析為原生控件后進(jìn)行渲染?；贘avaScript的開發(fā)框架不僅可以減少網(wǎng)絡(luò)傳輸、支持分布式運算，而且降低了后端開發(fā)人員開發(fā)前端頁面的難度。因此，基于JavaScript的開發(fā)框架十分適合網(wǎng)絡(luò)信息平臺的開發(fā)[4]。但是，JavaScript開發(fā)框架中存在著大量的js腳本，降低了運行速度；同時，組件間的交互都需要使用JavaScript連接，使得組件的效果顯示極為復(fù)雜。因此，在使用基于JavaScript的開發(fā)框架實現(xiàn)移動App的開發(fā)時，不僅實現(xiàn)難度較高，而且運行效率也并不理想。目前基于JavaScript的常用開發(fā)框架包括PhoneGap、Titanium、jQuery Mobile和Meteor等。

基于UI的開發(fā)框架是一套構(gòu)建用戶界面的框架，它只關(guān)注于視圖層的開發(fā)工作。這種框架不僅容易上手，還便于與第三方庫或既有項目整合，是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue是其中目前應(yīng)用較為廣泛的一個前端框架，不僅可以進(jìn)行網(wǎng)頁開發(fā)，還可以實現(xiàn)移動App的開發(fā)，是前端開發(fā)的主流框架之一。Vue的特點遵循MVVM模式，編碼簡潔、體積小、運行效率高，因此在移動端的開發(fā)效果較為理想。由于其本身只關(guān)注UI，可以輕松引入插件或第三方庫開發(fā)項目，因此國內(nèi)許多高校和研究機(jī)構(gòu)都更加傾向于選擇Vue框架進(jìn)行項目系統(tǒng)的開發(fā)與實現(xiàn)[5-7]。常見的Vue的擴(kuò)展UI框架包括Semantic UI[8]、elementUI、Vux、vue-strap 和Vue-Blu 等。由于Vue 框架具有良好的可擴(kuò)展性、較高的運行效率和輕量化的體積，因此本項目基于Vue框架實現(xiàn)計算機(jī)科學(xué)與技術(shù)專業(yè)移動學(xué)習(xí)App的開發(fā)。

2 計算機(jī)科學(xué)與技術(shù)專業(yè)移動學(xué)習(xí)App 設(shè)計

2.1 計算機(jī)科學(xué)與技術(shù)專業(yè)移動學(xué)習(xí)App 整體設(shè)計

本項目使用Webstorm2020作為前端開發(fā)軟件，前端開發(fā)框架采用Vue2.6.11 版本，并使用Hbuild?erX3.4.18對App實現(xiàn)封裝。本項目主要的應(yīng)用對象為計算機(jī)科學(xué)與技術(shù)專業(yè)的學(xué)生，由于應(yīng)用的主要使用場景為學(xué)生日常的線上學(xué)習(xí)，考慮用戶所持有的移動設(shè)備性能、系統(tǒng)和環(huán)境帶來的影響，在保證能夠完成線上學(xué)習(xí)功能的前提下，選擇Vue基礎(chǔ)框架進(jìn)行設(shè)計和開發(fā)。

設(shè)計需求如下：

1） 因為系統(tǒng)數(shù)據(jù)庫并不對外開放，需要實現(xiàn)用戶信息管理模塊及其相關(guān)功能，并設(shè)置對應(yīng)的查看權(quán)限。

2） 為了保證用戶及時查收課程相關(guān)的消息通知，需要實現(xiàn)課程公告模塊及其相關(guān)功能。

3） 為了讓用戶可以通過該移動學(xué)習(xí)平臺查詢課程并下載課程的教學(xué)資源，需要實現(xiàn)課程檢索模塊和課程課件模塊及其相關(guān)功能。

4） 為了讓用戶可以發(fā)表課程評論和提問，需要實現(xiàn)評論區(qū)模塊及其相關(guān)功能。

2.2 計算機(jī)科學(xué)與技術(shù)專業(yè)移動學(xué)習(xí)App 模塊設(shè)計

根據(jù)所提出的設(shè)計需求，計算機(jī)科學(xué)與技術(shù)專業(yè)移動學(xué)習(xí)App主要包括課程檢索模塊、課程概述模塊、課程公告模塊、課程課件模塊、課程作業(yè)模塊、討論區(qū)和學(xué)習(xí)進(jìn)度記錄七個模塊，其主要功能結(jié)構(gòu)如圖1所示。其中課程檢索模塊包括按類型搜索、按關(guān)鍵字搜索和特色推薦三種搜索方式，同時，可以按照課程的屬性，提供必修課和選修課的篩選，為用戶提供了便利。

課程概述模塊包括課程公告、課程信息和課程大綱三個方面的內(nèi)容，可以讓用戶在參與到課程之前，預(yù)先呈現(xiàn)給用戶課程的有關(guān)信息，從而更充分地掌握課程的整體結(jié)構(gòu)和學(xué)習(xí)思路。例如，課程公告部分可以讓用戶在加入課程后，瀏覽到關(guān)于課程的最新通知，在課前告知學(xué)習(xí)者即將學(xué)習(xí)的內(nèi)容概要。

線上學(xué)習(xí)方式需提供相應(yīng)的多媒體課件，如視頻、文檔等?？紤]到移動學(xué)習(xí)的特征，本項目中的課程，需要根據(jù)課程內(nèi)容的類型和知識點之間的邏輯關(guān)系，恰當(dāng)安排課件資源，對于需要采用視頻形式的知識點，應(yīng)以碎片化而又模塊化的視頻來展現(xiàn)；而對于需要以文檔形式呈現(xiàn)的教學(xué)內(nèi)容，則應(yīng)以文檔為主體。將視頻和文檔二者結(jié)合使用，可以起到良好的效果。因此在課程課件模塊提供了視頻類課件和文本類課件兩種學(xué)習(xí)方式。學(xué)習(xí)者通過觀看視頻課件，再結(jié)合相應(yīng)的課件文檔，可以有效地幫助學(xué)習(xí)者理解所學(xué)知識點。在視頻類課件中，本項目添加了多種觀看方式和功能。首先，用戶可以根據(jù)自身的實際情況選擇在線觀看或離線觀看課程視頻。并且，本項目提供了視頻時長顯示、視頻播放進(jìn)度、視頻進(jìn)度調(diào)整等功能，降低了用戶的操作難度。該模塊的結(jié)構(gòu)圖如圖2所示。

課程作業(yè)模塊包括課程測試和平時作業(yè)兩個部分。用戶在完成各模塊學(xué)習(xí)后，需要完成章節(jié)作業(yè)和課程測試，同時需進(jìn)行身份認(rèn)證后方可計入課程成績。課程測試分為每一章內(nèi)容的章節(jié)測試和整體的綜合測試，章節(jié)測試是對模塊化的學(xué)習(xí)內(nèi)容的學(xué)習(xí)效果評價，可以總結(jié)出學(xué)習(xí)內(nèi)容的難點；綜合測試可以發(fā)現(xiàn)學(xué)習(xí)者共同存在的學(xué)習(xí)問題，有助于教師明確教學(xué)效果并做出針對性的改進(jìn)。

討論區(qū)包括三個部分：教師答疑區(qū)，即教師回答學(xué)生提出的疑問；課堂交流區(qū)，即學(xué)習(xí)者回復(fù)教師下達(dá)的問題；綜合討論區(qū)，即學(xué)習(xí)者與學(xué)習(xí)者之間進(jìn)行話題交流與協(xié)作探討。這種線上和線下相結(jié)合的話題討論形式，有助于評價方式的公平合理，也有助于激發(fā)學(xué)生的學(xué)習(xí)積極性。最后，上述模塊的學(xué)習(xí)進(jìn)度數(shù)據(jù)都會通過學(xué)習(xí)進(jìn)度記錄模塊，上傳并記錄到后臺服務(wù)器中。

3 計算機(jī)科學(xué)與技術(shù)專業(yè)移動學(xué)習(xí)App 實現(xiàn)

3.1 項目配置

基于Vue框架的項目配置主要包括初始化Vue腳手架、配置瀏覽器自動開啟和配置eslint校驗功能三個部分。首先，Vue腳手架的初始化需要在cmd里執(zhí)行vue create操作，項目中分別包括項目依賴文件夾node-modules、圖片資源文件夾public、靜態(tài)資源文件夾assets、全局組件/非路由組件文件夾components、根組件App.vue、配置文件babel.config.js、項目信息文件package. json、緩存文件package-lock. js、說明文件README.md和程序入口文件main.js。同時，需要在package.json中配置瀏覽器自動開啟。其代碼如下：

3.2 項目路由組件及非路由組件搭建

本項目中的路由組件包括首頁路由組件Home、搜索路由組件Search、登錄路由組件Login和注冊路由組件Register。首先需要使用npm install vue-router--save命令安裝vue.js 官方的路由插件vue-router，并通過vue-router管理組件和URL的映射關(guān)系。在vuerouter的單頁面應(yīng)用中，頁面的路徑的改變就是組件的切換。接著在項目中的pages/views文件夾中放置路由組件，在router文件夾放置項目當(dāng)中配置的路由，并新建index.js。寫完router的index.js后，在main.js中引入入口文件，最后在App.vue中寫出路由組件的出口。其中，課程首頁的界面效果如圖3所示。

本項目中的非路由組件由編寫HTML與CSS靜態(tài)頁面、拆分組件、獲取服務(wù)器的數(shù)據(jù)動態(tài)展示和完成相應(yīng)動態(tài)業(yè)務(wù)邏輯四個部分組成，使用的步驟為創(chuàng)建或定義、引入、注冊和使用。本項目采用less樣式進(jìn)行開發(fā)，但由于瀏覽器無法識別less樣式，因此需要通過使用less-loader方法，將less變?yōu)閏ss樣式，此時瀏覽器才能識別。如果想讓組件識別less 樣式，需要在style標(biāo)簽中添加lang = less。本次所包含的非路由組件如圖4所示。

由于Vue不支持直接打包成安卓項目，因此本項目借助HbuilderX，把Vue項目封裝到uniapp中。打包成功后，HbuilderX控制臺在等待一段時間后會自動返回App下載地址，然后可以通過該鏈接在電腦中進(jìn)行下載；也可以將該鏈接復(fù)制到手機(jī)瀏覽器，在手機(jī)中對該軟件進(jìn)行下載。

4 總結(jié)

當(dāng)下網(wǎng)絡(luò)發(fā)展逐漸趨于成熟，在網(wǎng)絡(luò)應(yīng)用方面，如何通過線上渠道進(jìn)行高效的學(xué)習(xí)已經(jīng)被國內(nèi)外的學(xué)者所密切關(guān)注。在如今這種特殊時期，通過線上互動學(xué)習(xí)的方式進(jìn)行學(xué)習(xí)已經(jīng)成為一種非常重要的學(xué)習(xí)渠道。因此，了解并學(xué)習(xí)移動軟件制作相關(guān)的技術(shù)，對未來通過網(wǎng)絡(luò)渠道學(xué)習(xí)和發(fā)展有很大的幫助。本文介紹了一個相對完整的計算機(jī)科學(xué)與技術(shù)專業(yè)移動學(xué)習(xí)軟件，對課程檢索、課程概述、課程課件、課程作業(yè)、討論區(qū)等板塊做了相應(yīng)的研究和設(shè)計，可以幫助學(xué)習(xí)者鞏固和系統(tǒng)地運用已有的知識。對于線上學(xué)習(xí)軟件的研究，未來還需要繼續(xù)前行，開展更為深入和全面的研究。