計算機科學與技術專業移動學習App設計與實現

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

關鍵詞：教學應用類App；移動學習；Vue開發框架；線上教學；數字化

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

1 基于Vue 的開發框架

首先，選擇正確的開發框架是移動應用程序開發的一項重要任務，開發人員可以使用框架實現的內置功能，高效地達到他們的開發目標。這些預定義的組件通過采用優秀的設計模式和實現方式，可以使應用程序以標準化的方式開發。目前移動App的主流開源框架主要包括基于HTML5的開發框架、基于JavaS?cript的開發框架和基于UI的開發框架三類。

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

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

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

2 計算機科學與技術專業移動學習App 設計

2.1 計算機科學與技術專業移動學習App 整體設計

本項目使用Webstorm2020作為前端開發軟件，前端開發框架采用Vue2.6.11 版本，并使用Hbuild?erX3.4.18對App實現封裝。本項目主要的應用對象為計算機科學與技術專業的學生，由于應用的主要使用場景為學生日常的線上學習，考慮用戶所持有的移動設備性能、系統和環境帶來的影響，在保證能夠完成線上學習功能的前提下，選擇Vue基礎框架進行設計和開發。

設計需求如下：

1） 因為系統數據庫并不對外開放，需要實現用戶信息管理模塊及其相關功能，并設置對應的查看權限。

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

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

4） 為了讓用戶可以發表課程評論和提問，需要實現評論區模塊及其相關功能。

2.2 計算機科學與技術專業移動學習App 模塊設計

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

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

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

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

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

3 計算機科學與技術專業移動學習App 實現

3.1 項目配置

基于Vue框架的項目配置主要包括初始化Vue腳手架、配置瀏覽器自動開啟和配置eslint校驗功能三個部分。首先，Vue腳手架的初始化需要在cmd里執行vue create操作，項目中分別包括項目依賴文件夾node-modules、圖片資源文件夾public、靜態資源文件夾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的映射關系。在vuerouter的單頁面應用中，頁面的路徑的改變就是組件的切換。接著在項目中的pages/views文件夾中放置路由組件，在router文件夾放置項目當中配置的路由，并新建index.js。寫完router的index.js后，在main.js中引入入口文件，最后在App.vue中寫出路由組件的出口。其中，課程首頁的界面效果如圖3所示。

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

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

4 總結

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