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

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

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

0 引 言

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

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

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

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

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

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

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

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

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

3 技術(shù)框架

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

本系統(tǒng)前端選用流行的React 框架和ant Design ui 框架，React 是目前流行的一個快速構(gòu)建用戶界面的JS 框架，React 的核心思想是通過構(gòu)建可復(fù)用組件來構(gòu)建用戶界面，它簡潔靈活，最大的特點是：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)頁，自動適應(yīng)不同分辨率效果；通過使用豐富的Web組件，包括下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、路徑導(dǎo)航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等，可以快速的搭建一個漂亮、功能完備的網(wǎng)站前端，還可以進行按需映入，不會造成過多的冗余，使文件最小化。

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

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

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

4.1 聽寫功能

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

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

圖4 自定義聽寫功能

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

保存用戶配置代碼為：

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

圖5 在線聽寫主界面

點擊頂部“喇叭”圖標(biāo)可以重聽，當(dāng)點擊“開始”按鈕時就會開始聽寫且按鈕會變成“下一個”按鈕，每一個單詞都會播放兩次，播放順序為隨機，聽寫過的就不會重新播放，提交按鈕在聽寫完成才可以提交，否則提示“未完成”。

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

圖6 成績單頁面

4.2 聽寫記錄功能

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

圖7 聽寫記錄展示效果圖

4.3 語音合成

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

圖8 語音合成流程圖

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

5 結(jié) 論

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