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

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

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

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

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

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

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

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

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

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

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

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

設(shè)計(jì)需求如下：

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

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

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

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

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

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

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

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

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

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

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

3.1 項(xiàng)目配置

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

3.2 項(xiàng)目路由組件及非路由組件搭建

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

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

由于Vue不支持直接打包成安卓項(xiàng)目，因此本項(xiàng)目借助HbuilderX，把Vue項(xiàng)目封裝到uniapp中。打包成功后，HbuilderX控制臺(tái)在等待一段時(shí)間后會(huì)自動(dòng)返回App下載地址，然后可以通過該鏈接在電腦中進(jìn)行下載；也可以將該鏈接復(fù)制到手機(jī)瀏覽器，在手機(jī)中對(duì)該軟件進(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)注。在如今這種特殊時(shí)期，通過線上互動(dòng)學(xué)習(xí)的方式進(jìn)行學(xué)習(xí)已經(jīng)成為一種非常重要的學(xué)習(xí)渠道。因此，了解并學(xué)習(xí)移動(dòng)軟件制作相關(guān)的技術(shù)，對(duì)未來通過網(wǎng)絡(luò)渠道學(xué)習(xí)和發(fā)展有很大的幫助。本文介紹了一個(gè)相對(duì)完整的計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)移動(dòng)學(xué)習(xí)軟件，對(duì)課程檢索、課程概述、課程課件、課程作業(yè)、討論區(qū)等板塊做了相應(yīng)的研究和設(shè)計(jì)，可以幫助學(xué)習(xí)者鞏固和系統(tǒng)地運(yùn)用已有的知識(shí)。對(duì)于線上學(xué)習(xí)軟件的研究，未來還需要繼續(xù)前行，開展更為深入和全面的研究。