大學(xué)生英語在線聽寫系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

劉磊，姚文輝，鄭潤涵，王大海

（廣東開放大學(xué)（廣東理工職業(yè)學(xué)院），廣東 廣州 510091）

0 引 言

聽寫是每一個(gè)學(xué)生在學(xué)英語路上的必經(jīng)之路，在聽寫的過程中涉及了多種能力和知識(shí)的應(yīng)用，如語言的感知和辨識(shí)能力、詞匯量、短時(shí)間的記憶能力等；聽寫可以有效提高學(xué)生對(duì)英語聽力的理解能力，可以提高學(xué)生的語音水平，人們?cè)谡Z言交際中45%的時(shí)間用于聽，大學(xué)生不僅要進(jìn)行閱讀和寫作能力的訓(xùn)練，更要注重聽寫能力的培養(yǎng)。本文開發(fā)的大學(xué)生在線聽寫系統(tǒng)能夠通過用戶自己的喜好來設(shè)置聽寫配置；同時(shí)，支持用戶自己來錄入自己要聽寫的單詞，還可以保存在數(shù)據(jù)庫中，方便下一次的聽寫或者復(fù)習(xí)；此外，還提供了懲罰功能和記錄功能，懲罰功能是每次有聽寫錯(cuò)誤的時(shí)候進(jìn)行罰寫，記錄功能可以記錄用戶每次的聽寫并統(tǒng)計(jì)呈現(xiàn)給用戶，讓用戶知道自己哪里不足，哪里需要修改。本文從軟件開發(fā)周期的角度詳細(xì)論述本系統(tǒng)的開發(fā)過程。

1 業(yè)務(wù)流程設(shè)計(jì)

本系統(tǒng)使用角色包括普通用戶和后臺(tái)管理員。首先登錄系統(tǒng)主頁，普通用戶注冊(cè)賬號(hào)，需經(jīng)后臺(tái)管理員審核，用戶登錄系統(tǒng)成功后進(jìn)入聽寫系統(tǒng)主頁，可以選擇單詞錄入功能、復(fù)習(xí)、個(gè)人主頁或者直接進(jìn)行聽寫等功能，當(dāng)用戶選擇開始聽寫時(shí)，可以進(jìn)行聽寫相關(guān)的配置進(jìn)行聽寫。注冊(cè)用戶業(yè)務(wù)流程圖如圖1所示。

圖1 普通用戶業(yè)務(wù)流程圖

系統(tǒng)后臺(tái)管理地址只對(duì)管理員角色開放，管理員輸入正確的賬號(hào)密碼登錄后臺(tái)管理界面，可以對(duì)普通用戶進(jìn)行審核和管理，當(dāng)審核通過，系統(tǒng)自動(dòng)發(fā)郵件通知用戶，管理員可以查看系統(tǒng)的一些統(tǒng)計(jì)數(shù)據(jù)。管理員業(yè)務(wù)流程圖如圖2所示。

圖2 管理員業(yè)務(wù)流程圖

2 數(shù)據(jù)庫模型設(shè)計(jì)

通過分析系統(tǒng)參與角色，可以得到兩個(gè)實(shí)體：普通用戶和管理員用戶，用戶實(shí)體最重要的屬性包括注冊(cè)用戶名和郵箱；普通用戶進(jìn)行聽寫行為，涉及基本詞匯表和聽寫記錄表，基本詞匯表主要字段有用戶id、單詞；聽寫記錄表存儲(chǔ)用戶id、要聽寫的單詞、自己寫的單詞、錯(cuò)誤的單詞、用時(shí)和成績等；針對(duì)允許用戶對(duì)聽寫記錄表的內(nèi)容可以添加多條，將聽寫記錄模塊設(shè)計(jì)成一張獨(dú)立的表，再通過外鍵關(guān)聯(lián)到基本用戶模塊表。系統(tǒng)的數(shù)據(jù)庫模型設(shè)計(jì)如圖3所示。

圖3 系統(tǒng)數(shù)據(jù)庫模型圖

3 技術(shù)框架

大學(xué)生英語在線聽寫系統(tǒng)采用前后端分離的模式進(jìn)行開發(fā)。

本系統(tǒng)前端選用流行的React 框架和ant Design ui 框架，React 是目前流行的一個(gè)快速構(gòu)建用戶界面的JS 框架，React 的核心思想是通過構(gòu)建可復(fù)用組件來構(gòu)建用戶界面，它簡(jiǎn)潔靈活，最大的特點(diǎn)是：Declarative（聲明式編程）、Component-Based（組件化編程）、Learn Once，Write Anywhere（支持客戶端與服務(wù)器渲染）、高效（高效的DOM Diff算法、最小頁面重繪）、單向數(shù)據(jù)流，還有React 的生態(tài)redux（集中式狀態(tài)管理）、react-route 等；ant Design（antd）是基于React 開發(fā)的UI 框架，antd 內(nèi)置的CSS 媒體查詢（Media Query）功能，可以開發(fā)出響應(yīng)式布局的網(wǎng)頁，自動(dòng)適應(yīng)不同分辨率效果；通過使用豐富的Web組件，包括下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航、分頁、排版、縮略圖、警告對(duì)話框、進(jìn)度條、媒體對(duì)象等，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站前端，還可以進(jìn)行按需映入，不會(huì)造成過多的冗余，使文件最小化。

本系統(tǒng)后端選用流行的Node.js 環(huán)境進(jìn)行開發(fā)，Node.js是一個(gè)基于Chrome V8 引擎的JavaScript 運(yùn)行環(huán)境。Node.js使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式I/O的模型，使其輕量又高效。在基于Node 下使用了經(jīng)典的Express 框架，Express 基于Node.js 平臺(tái)，Express 是一個(gè)保持最小規(guī)模的靈活的Node.js Web 應(yīng)用程序開發(fā)框架，具有快速、開放、極簡(jiǎn)的特點(diǎn)，為Web 和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能。Express 框架的核心特性：中間件（可以設(shè)置中間來響應(yīng)HTTP 請(qǐng)求）、路由（定義路由表用于執(zhí)行不同的HTTP 請(qǐng)求）、模板（key 通過向模板傳遞參數(shù)來動(dòng)態(tài)渲染HTTP頁面），使用Request 對(duì)象和Response 對(duì)象來進(jìn)行前后端的數(shù)據(jù)交互。

4 關(guān)鍵功能與實(shí)現(xiàn)

本系統(tǒng)面向在線聽寫和關(guān)注自己聽寫記錄的需求人群，為注冊(cè)用戶提供在線聽寫單詞的功能，也為用戶提供了聽寫記錄的查看和統(tǒng)計(jì)等功能。下面選擇幾個(gè)關(guān)鍵功能分析其實(shí)現(xiàn)。

4.1 聽寫功能

這是本系統(tǒng)的核心功能。為了實(shí)現(xiàn)用戶可以自定義聽寫的功能，我們采用一個(gè)頁面子組件來設(shè)置用戶的一些聽寫配置，頁面如圖4所示，用戶通過這個(gè)組件可以選擇適合自己的聽寫配置，配置參數(shù)如表1所示。

表1 聽寫配置字段介紹和默認(rèn)值

圖4 自定義聽寫功能

當(dāng)用戶選擇完成后會(huì)傳到“聽寫功能”這個(gè)父組件的狀態(tài)中保存，父組件并通過這些配置選出需要聽寫的單詞，供“聽寫功能”相關(guān)子組件使用。

保存用戶配置代碼為：

在線聽寫主界面，當(dāng)配置為聲音為“男聲”、語速為“4”、聽寫數(shù)為“10”、單詞數(shù)為“最新10 個(gè)”、自動(dòng)播放為“關(guān)”時(shí)實(shí)現(xiàn)效果如圖5所示。

圖5 在線聽寫主界面

點(diǎn)擊頂部“喇叭”圖標(biāo)可以重聽，當(dāng)點(diǎn)擊“開始”按鈕時(shí)就會(huì)開始聽寫且按鈕會(huì)變成“下一個(gè)”按鈕，每一個(gè)單詞都會(huì)播放兩次，播放順序?yàn)殡S機(jī)，聽寫過的就不會(huì)重新播放，提交按鈕在聽寫完成才可以提交，否則提示“未完成”。

點(diǎn)擊完成會(huì)跳轉(zhuǎn)到成績單頁面，系統(tǒng)后臺(tái)自動(dòng)檢查并計(jì)算成績傳送到前端呈現(xiàn)給用戶，如圖6所示，當(dāng)聽寫單詞出現(xiàn)錯(cuò)誤時(shí)，會(huì)出現(xiàn)“懲罰”按鈕，點(diǎn)擊就會(huì)跳轉(zhuǎn)到“懲罰”頁面，罰寫錯(cuò)誤單詞，用戶也可以直接跳過這個(gè)步驟。

圖6 成績單頁面

4.2 聽寫記錄功能

聽寫記錄的良好展示是本系統(tǒng)的另一個(gè)重要功能，查詢聽寫記錄包括了所有聽寫記錄的最高分、最低分、平均分、及格數(shù)、及格率等，如圖7所示，用戶還通過篩選、排序、查詢這些記錄來判斷自己的不足和需要改進(jìn)的地方。

圖7 聽寫記錄展示效果圖

4.3 語音合成

語音是本系統(tǒng)的靈魂，語音來源是通過百度的語音合成API 來進(jìn)行合成的，我們通過向后臺(tái)發(fā)送單詞，百度語音API 合成正確的語音，系統(tǒng)后端獲取音頻，并保存到本地，每一個(gè)用戶只保存一個(gè)音頻文件，每次保存采用替換更新的方式，語音合成流程如圖8所示。

圖8 語音合成流程圖

獲取百度語音API，合成服務(wù)器端語音，并發(fā)送給前端關(guān)鍵代碼為：

5 結(jié) 論

Node.js 平臺(tái)是業(yè)界廣泛使用的大前端開發(fā)環(huán)境，基于事件驅(qū)動(dòng)和非阻塞I/O 模型的特點(diǎn)，非常適宜開發(fā)響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用，React 和ant Design 是流行的前端開發(fā)框架，可以快速制作響應(yīng)式頁面，本文使用這兩大框架，以在線英語聽寫和分析聽寫記錄的需求為出發(fā)點(diǎn)，從軟件開發(fā)周期的角度詳細(xì)論述了多用戶在線聽寫與管理系統(tǒng)的設(shè)計(jì)和實(shí)現(xiàn)，相信對(duì)于讀者進(jìn)行軟件開發(fā)有一定的參考意義。