基于混合編程的移動(dòng)英語學(xué)習(xí)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)

柯曉昱，劉　草，吳　獻(xiàn)，林雅琴

（福建工程學(xué)院軟件學(xué)院，福建福州350003）

?

基于混合編程的移動(dòng)英語學(xué)習(xí)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)

柯曉昱，劉草，吳獻(xiàn)，林雅琴

（福建工程學(xué)院軟件學(xué)院，福建福州350003）

摘要：基于PHP、HTML5和JavaScript等技術(shù)，通過對(duì)學(xué)習(xí)平臺(tái)的開發(fā)意義、功能模塊及業(yè)務(wù)數(shù)據(jù)的分析與研究，結(jié)合React Native的WEBAPP框架與原生應(yīng)用混合編程的方式快速開發(fā)iOS/Android跨平臺(tái)的應(yīng)用程序。以3min時(shí)長(zhǎng)的英語視頻片斷作為內(nèi)容載體，整合碎片化的學(xué)習(xí)時(shí)間，提出“3分鐘英語”學(xué)習(xí)理念，結(jié)合個(gè)性化推薦方法推送視頻資源，發(fā)揮出移動(dòng)平臺(tái)的優(yōu)勢(shì)，具有一定的推廣應(yīng)用價(jià)值。

關(guān)鍵詞：混合編程；視頻片斷；碎片化學(xué)習(xí)；3分鐘英語

隨著現(xiàn)代信息技術(shù)的蓬勃發(fā)展，如何依托現(xiàn)代化信息技術(shù)豐富教育資源以及優(yōu)化教學(xué)過程，成為近幾年教育發(fā)展領(lǐng)域中的一個(gè)研究熱點(diǎn)。移動(dòng)學(xué)習(xí)是一種將移動(dòng)技術(shù)與數(shù)字化學(xué)習(xí)技術(shù)相結(jié)合的一種新型數(shù)字化學(xué)習(xí)形式，它主要依托于無線移動(dòng)技術(shù)、國(guó)際互聯(lián)網(wǎng)絡(luò)技術(shù)以及多媒體技術(shù)等［1］。

傳統(tǒng)教材所提供的教學(xué)視頻內(nèi)容偏長(zhǎng)，調(diào)查研究發(fā)現(xiàn)，視頻片斷在3min內(nèi)最容易集中學(xué)生的注意力，吸收效果最好。因此，我們轉(zhuǎn)變思路，提出“3分鐘英語”自主學(xué)習(xí)理念，將學(xué)生由單純的受眾轉(zhuǎn)變?yōu)橐曨l的創(chuàng)作者與參與者，在教師的指導(dǎo)下，創(chuàng)作出一部部學(xué)生自已喜愛的英文“微電影”上傳至所設(shè)計(jì)的移動(dòng)英語學(xué)習(xí)平臺(tái)。

同時(shí)，結(jié)合日益成熟的視頻點(diǎn)播技術(shù)，期望通過軟件工程與英語專業(yè)跨學(xué)科的融合，以促進(jìn)大學(xué)英語視聽說課程教學(xué)方法的改進(jìn)，提高教學(xué)質(zhì)量；整合碎片化時(shí)間，結(jié)合個(gè)性化推薦方法推送視頻資源，提升學(xué)生的自主學(xué)習(xí)能力，培養(yǎng)及加強(qiáng)學(xué)生的交流與協(xié)作能力，讓學(xué)生學(xué)會(huì)主動(dòng)思維、實(shí)踐、表達(dá)，進(jìn)而更多地體驗(yàn)移動(dòng)學(xué)習(xí)的喜悅。

1　移動(dòng)英語學(xué)習(xí)平臺(tái)的設(shè)計(jì)

1.1 平臺(tái)功能架構(gòu)

本學(xué)習(xí)平臺(tái)從系統(tǒng)功能體系上分為四個(gè)層次:由數(shù)據(jù)庫(kù)服務(wù)器（MySQL）、Web服務(wù)器、統(tǒng)一身份認(rèn)證服務(wù)器（central authenticaiton service，CAS）、網(wǎng)絡(luò)設(shè)施等組成的支撐平臺(tái)，數(shù)據(jù)交互處理的業(yè)務(wù)層，UI展示層及客戶端訪問層。其體系架構(gòu)如圖1所示。

圖1　系統(tǒng)功能架構(gòu)圖Fig.1 System architecture ofm obile English learning p latform

本學(xué)習(xí)平臺(tái)的客戶端分為兩類，即WEB瀏覽器和iOS/Android移動(dòng)終端。客戶端與WEB應(yīng)用服務(wù)器之間通過HTTP協(xié)議傳輸數(shù)據(jù)，采用JSON數(shù)據(jù)格式進(jìn)行解析。

服務(wù)端的WEB應(yīng)用服務(wù)器需要與身份認(rèn)證服務(wù)器進(jìn)行交互，以保證用戶登錄信息的有效性。其中，身份認(rèn)證服務(wù)器還承擔(dān)著學(xué)院其他系統(tǒng)的統(tǒng)一身份認(rèn)證的服務(wù)。其結(jié)構(gòu)如圖2所示。

1.2 關(guān)鍵技術(shù)簡(jiǎn)介

移動(dòng)學(xué)習(xí)平臺(tái)在開發(fā)過程中采用以下幾種關(guān)鍵技術(shù)。

（1）服務(wù)端采用PHP/Think PHP框架，采用FFMPEG進(jìn)行視頻處理，同時(shí)能夠自動(dòng)獲取視頻縮略圖。

圖2　平臺(tái)的網(wǎng)絡(luò)結(jié)構(gòu)圖Fig.2 The network architecture of learning p latform

另外，PHP/Think PHP框架采用PATHINFO模式進(jìn)行URL路徑管理，能夠提供最好的搜索引擎優(yōu)化（search engine optimization，SEO）支持。

（2）服務(wù)端通過開放所需的應(yīng)用程序編程接口（application programming interface，API），與客戶端采用HTTP協(xié)議進(jìn)行通訊，使用JSON進(jìn)行數(shù)據(jù)解析，它與XML相比更容易閱讀、解析速度更快、占用空間更少，因此更適合在移動(dòng)設(shè)備上傳輸使用。

（3）混合編程:移動(dòng)客戶端采用Web應(yīng)用和原生應(yīng)用的混合編程方式。Web應(yīng)用框架采用FaceBook發(fā)布的 React Native框架，它結(jié)合了Web應(yīng)用和原生應(yīng)用的優(yōu)勢(shì)，可以使用JavaScript來開發(fā)iOS和Android原生應(yīng)用，提供不輸于純?cè)鷳?yīng)用的用戶體驗(yàn)。它只需編寫一套核心程序，發(fā)布時(shí)針對(duì)不同的移動(dòng)平臺(tái)進(jìn)行編譯即可，這樣就可極大地提高開發(fā)效率，節(jié)省人力成本。

（4）視頻字幕解析:加載存放于服務(wù)器的（SRT）格式的字幕文件，獲取字幕所有內(nèi)容。使用正則表達(dá)式，將內(nèi)容解析成字幕數(shù)組，數(shù)組項(xiàng)的內(nèi)容包含起始時(shí)間、結(jié)束時(shí)間、英語語句、中文語句。當(dāng)視頻播放時(shí)，通過時(shí)間更新事件中返回的時(shí)間實(shí)時(shí)匹配字幕數(shù)組中對(duì)應(yīng)時(shí)間的中、英文語句并展現(xiàn)出來。

（5）個(gè)性化推薦:設(shè)計(jì)的移動(dòng)英語學(xué)習(xí)平臺(tái)中采用協(xié)同過濾推薦算法，它是目前個(gè)性化推薦系統(tǒng)中應(yīng)用最為廣泛的技術(shù)之一，其最大優(yōu)勢(shì)在于能夠處理視頻、音樂等各種非文本結(jié)構(gòu)對(duì)象。

1.3 用戶設(shè)計(jì)

用戶主要分為四大角色，見表1。

表1　用戶角色表Tab.1 The user role of learning platform

1.4 平臺(tái)設(shè)計(jì)

從業(yè)務(wù)角度來分述移動(dòng)英語學(xué)習(xí)平臺(tái)服務(wù)端和客戶端的功能模塊。

1.4.1 服務(wù)端主要功能模塊

服務(wù)端實(shí)現(xiàn)平臺(tái)基礎(chǔ)數(shù)據(jù)的管理，見圖3。

圖3　服務(wù)端的主要功能圖Fig.3 Themain function（modules）of learning p latform server

服務(wù)端主要功能模塊有:

（1）分類管理:管理視頻的分類目錄及標(biāo)簽，支持多級(jí)嵌套。

（2）視頻內(nèi)容管理:視頻內(nèi)容組成要素包括不含字幕的視頻源文件（mp4格式）、使用SRT格式標(biāo)準(zhǔn)制作的中英字幕文件、課前預(yù)習(xí)、重點(diǎn)句子、重點(diǎn)單詞。其中，教學(xué)管理員將不含字幕的視頻源文件單獨(dú)存放在專門的視頻服務(wù)器上，生成一個(gè)URI地址，同視頻的其他要素在WEB應(yīng)用服務(wù)器上管理。上傳字幕文件時(shí)，系統(tǒng)將自動(dòng)檢測(cè)SRT格式的文件是否符合規(guī)范，同時(shí)根據(jù)視頻源的URI地址使用FFMPEG接口自動(dòng)截取其關(guān)鍵縮略圖。

（3）用戶管理:主要管理本平臺(tái)的基礎(chǔ)用戶信息及操作權(quán)限管理。

（4）行為管理:主要管理用戶的操作日志、記錄學(xué)生用戶的視頻學(xué)習(xí)的過程軌跡，比如在什么時(shí)間點(diǎn)欣賞哪個(gè)視頻等。

1.4.2 客戶端主要功能模塊

客戶端部分主要包含視頻學(xué)習(xí)、視頻搜索、個(gè)人中心和個(gè)性化推薦4個(gè)功能模塊，見圖4。

圖4　客戶端主要功能圖Fig.4 Themain function（modules）of learning p latform client

客戶端主要功能模塊有:

（1）視頻學(xué)習(xí):在此模塊中，包含預(yù)習(xí)、重點(diǎn)語句、重點(diǎn)單詞等內(nèi)容，用戶能夠在正式學(xué)習(xí)之前進(jìn)行課前預(yù)習(xí)、句子學(xué)習(xí)、英語聽力學(xué)習(xí)。用戶選擇要播放的學(xué)習(xí)視頻，客戶端從遠(yuǎn)程服務(wù)器端加載視頻及中英字幕文件緩存到本地。在播放過程中，字幕與視頻時(shí)間點(diǎn)保持同步，中文、英文字幕可隨時(shí)切換，點(diǎn)擊字幕中的任意單詞，可彈出相應(yīng)的單詞釋義。

（2）視頻搜索:支持關(guān)鍵詞搜索以及高級(jí)/搜索兩種搜索模式

（3）個(gè)人中心:在本模塊中，用戶除了基本的個(gè)人資料查詢與修改外，還可查看個(gè)人的播放歷史記錄、視頻收藏記錄等。

（4）個(gè)性化推薦:在本模塊中，收集用戶歷史學(xué)習(xí)、收藏記錄等信息提交到服務(wù)端，即接收服務(wù)端分析后的個(gè)性化視頻資料。

2　數(shù)據(jù)庫(kù)邏輯設(shè)計(jì)

2.1 平臺(tái)核心數(shù)據(jù)表

如表2所示，移動(dòng)平臺(tái)的核心數(shù)據(jù)表有用戶表、視頻信息表、視頻數(shù)據(jù)表等，同時(shí)以auth_開頭的是統(tǒng)一身份認(rèn)證服務(wù)上的3個(gè)核心用戶信息表。

表2　學(xué)習(xí)平臺(tái)核心數(shù)據(jù)表Tab.2 Themain data of English learning p latform

2.2 平臺(tái)數(shù)據(jù)表結(jié)構(gòu)

2.2.1 基礎(chǔ)數(shù)據(jù)配置表

用于保存平臺(tái)的基礎(chǔ)配置數(shù)據(jù)，如站點(diǎn)的標(biāo)題、描述、每頁顯示的記錄數(shù)、數(shù)據(jù)庫(kù)連接參數(shù)及備份路徑等，數(shù)據(jù)表名為“config”，其數(shù)據(jù)結(jié)構(gòu)如表3所示。

表3　config基礎(chǔ)數(shù)據(jù)配置表Tab.3 The basic data configu ration

2.2.2 行為日志表

用于保存平臺(tái)用戶的操作行為，如執(zhí)行者、行為名稱、執(zhí)行狀態(tài)、登錄IP等，數(shù)據(jù)表名為“action _log”，其數(shù)據(jù)結(jié)構(gòu)如表4所示。

2.2.3 分類管理表

用于保存視頻的目錄分類信息，如分類名稱、排序、分類的每頁行數(shù)、父級(jí)分類等，數(shù)據(jù)表名為“category”，其數(shù)據(jù)結(jié)構(gòu)如表5所示。

2.2.4 視頻信息表

用于保存視頻的信息，如視頻主題、描述、視頻文件存放地址、視頻縮略圖、字幕文件存放地址、預(yù)習(xí)、練習(xí)等，數(shù)據(jù)表名為“document_video”，其數(shù)據(jù)結(jié)構(gòu)如表6所示。

表4　action_log行為日志表Tab.4 The information of action_log

表5　category分類管理表Tab.5 Categorymanagement table

表6　document_video視頻信息表Tab.6 The information of documen t_video

2.2.5 文件信息表

用于保存平臺(tái)的文件信息，特別是視頻所對(duì)應(yīng)的字幕文件信息，如原始文件名、保存后的文件名、保存路徑等，同時(shí)根據(jù)文件的md5和sha1碼來避免文件的重復(fù)上傳，數(shù)據(jù)表名為“document_ file”，其數(shù)據(jù)結(jié)構(gòu)如表7所示。

表7　document_file文件信息表Tab.7 The information of document_file

2.2.6 文檔圖片信息表

用于保存平臺(tái)的圖片信息，特別是視頻所對(duì)應(yīng)的縮略圖信息，如圖片的保存路徑、上傳時(shí)間等，同樣要根據(jù)圖片文件的md5和sha1碼來判斷是否存在重復(fù)的圖片文件，數(shù)據(jù)表名為“document _picture”，其數(shù)據(jù)結(jié)構(gòu)如表8所示。

表8　document_picture圖片信息表Tab.8 The in formation of document_p icture

2.2.7 系統(tǒng)用戶信息表

數(shù)據(jù)表名為“member”，用于保存本學(xué)習(xí)平臺(tái)的用戶信息，如昵稱、性別、登錄次數(shù)等，它與統(tǒng)一身份認(rèn)證表auth_user的區(qū)別在于:auth_user是用于跨系統(tǒng)的CAS統(tǒng)一用戶認(rèn)證，而member表僅限于本移動(dòng)學(xué)習(xí)平臺(tái)，不保存密碼等，但用戶名、昵稱等重點(diǎn)字段保持?jǐn)?shù)據(jù)同步。這樣即保證了跨平臺(tái)用戶數(shù)據(jù)的統(tǒng)一性又兼顧了不同業(yè)務(wù)系統(tǒng)用戶權(quán)限等的靈活性，其數(shù)據(jù)結(jié)構(gòu)如表9所示。

表9　member表Tab.9 Themember information

2.2.8 班級(jí)信息表

用于保存統(tǒng)一身份認(rèn)證的班級(jí)信息，數(shù)據(jù)表名為“auth_class”，其數(shù)據(jù)結(jié)構(gòu)如表10所示。

表10　auth_class班級(jí)表Tab.10 The class information of auth_class

2.2.9 統(tǒng)一身份認(rèn)證的用戶信息表

用于保存統(tǒng)一身份認(rèn)證服務(wù)器中的用戶信息，數(shù)據(jù)表名為“auth_user”，其數(shù)據(jù)結(jié)構(gòu)如表11所示。

表11　auth_userTab.11 The information of auth_user

2.2.10 統(tǒng)一身份認(rèn)證的專業(yè)信息表

用于保存統(tǒng)一身份認(rèn)證服務(wù)器中的專業(yè)信息，數(shù)據(jù)表名為“auth_major”，其數(shù)據(jù)結(jié)構(gòu)如表12所示。

表12　au th_m ajor專業(yè)表Tab.12 The information of auth_major

3　移動(dòng)英語學(xué)習(xí)平臺(tái)的實(shí)現(xiàn)

3.1 平臺(tái)主要程序

移動(dòng)學(xué)習(xí)平臺(tái)后臺(tái)管理及WEB客戶端的主要程序如表13所示。

表13　主要程序列表Tab.13 Themain program files

3.2 平臺(tái)部分核心接口

本移動(dòng)學(xué)習(xí)平臺(tái)所開放的部分核心JSON接口如表14所示。

表14　核心接口列表Tab.14 The list of core interfaces

3.3 平臺(tái)主要界面實(shí)現(xiàn)

3.3.1 后臺(tái)管理主要界面實(shí)現(xiàn)

（1）系統(tǒng)視頻分類管理主界面，能完成多級(jí)嵌套目錄的操作。界面頂部是主操作菜單項(xiàng)，左側(cè)是該菜單項(xiàng)所對(duì)應(yīng)的子操作項(xiàng)，右側(cè)是該子操作項(xiàng)的具體操作界面，見圖5。

圖5　分類管理主界面Fig.5 The homepage of categorized（types）management

（2）移動(dòng)學(xué)習(xí)平臺(tái)用戶管理主界面，見圖6。

（3）視頻內(nèi)容管理主界面，左側(cè)菜單為視頻分類目錄，還有快速搜索功能，見圖7。

3.3.2 WEB版視頻信息主要界面實(shí)現(xiàn)

（1）WEB版視頻詳細(xì)信息界面，見圖8。其左上部分是本平臺(tái)核心的視頻播放器，可選擇中英字幕切換等；右上部分是預(yù)習(xí)、重點(diǎn)語句、重點(diǎn)單詞等功能；下方是聽力練習(xí)與課后活動(dòng)。

圖6　用戶管理主界面Fig.6 The homepage of usersmanagement

圖7　視頻內(nèi)容管理主界面Fig.7 The hom epage of video contentmanagement

圖8　視頻播放學(xué)習(xí)主界面Fig.8 The homepage of video study

（2）WEB版視頻播放器的播放界面:當(dāng)點(diǎn)擊圖8所示播放器的播放按鈕時(shí)，會(huì)播放視頻，此時(shí)可以進(jìn)行中英字幕的切換、上一句下一句的選擇，同時(shí)點(diǎn)擊英文字幕中的任一單詞會(huì)彈出對(duì)應(yīng)的單詞釋義，見圖9。

3.3.3 移動(dòng)版重點(diǎn)界面實(shí)現(xiàn)

移動(dòng)版包含了iOS/Android平臺(tái)［2-3］，是本學(xué)習(xí)平臺(tái)的開發(fā)重點(diǎn)。通過前文所述的HTML5混編模式以達(dá)到風(fēng)格界面的統(tǒng)一，同時(shí)極大地提高了開發(fā)效率。

圖9　視頻播放器的播放界面Fig.9 The homepage of video p laying

（1）移動(dòng)版登錄主界面，見圖10。

圖10　客戶端登錄界面Fig.10 The login page ofmobile client

（2）當(dāng)身份認(rèn)證成功后進(jìn)入圖1 1所示的主界面。上半部分是可自動(dòng)滾動(dòng)的推薦的重點(diǎn)視頻縮略圖，下半部分是推薦的視頻列表項(xiàng)。（3）分類選擇界面:在圖1 1的界面上用手指從左向右滑動(dòng)可調(diào)出視頻分類選擇菜單，點(diǎn)擊分類進(jìn)入對(duì)應(yīng)的分類視頻列表，見圖1 2。（4）視頻播放主界面:當(dāng)點(diǎn)擊某一視頻時(shí)進(jìn)入本界面，播放過程中字幕列表會(huì)根據(jù)視頻進(jìn)度自動(dòng)顯示（點(diǎn)擊字幕右方的箭頭可直接播放本句），有中英字幕切換、欣賞與學(xué)習(xí)模式、重點(diǎn)單詞列表、課前預(yù)習(xí)等，見圖1 3。（5）單詞釋義界面:當(dāng)點(diǎn)擊圖1 3所示的當(dāng)前正在播放的英文句子中的任意單詞，可彈出對(duì)應(yīng)的單詞釋義并暫停播放，同時(shí)點(diǎn)擊音標(biāo)可讀音，點(diǎn)擊“確定”按鈕后繼續(xù)播放，見圖1 4。

圖11　移動(dòng)版主界面Fig.11 The homepage of mobile version（client）

圖12　視頻分類選擇Fig.12 The category（type）choosing ofmobile client

圖13　視頻播放主界面Fig.13 The video p laying page ofm obile client

圖14　單詞釋義界面Fig.14 The word exp lanation interface（of mobile client）

4　結(jié)語

以移動(dòng)學(xué)習(xí)為契機(jī)，立足于英語教學(xué)的實(shí)際，整合碎片化的學(xué)習(xí)理念，設(shè)計(jì)了“3分鐘英語”移動(dòng)自主學(xué)習(xí)平臺(tái)，該平臺(tái)充分發(fā)揮了移動(dòng)學(xué)習(xí)模式的便捷性、資源豐富性以及資源高度分享性的

同時(shí)，也較好地提高了學(xué)習(xí)者的積極性與主動(dòng)性。

在實(shí)際的使用中，學(xué)習(xí)資源推送的視頻數(shù)量與推薦速度呈正相關(guān)關(guān)系。因此，隨著視頻數(shù)量的不斷增加，平臺(tái)的推薦性能將受到較大影響，這正是此移動(dòng)英語平臺(tái)后續(xù)要解決的重要問題。

參考文獻(xiàn)：

［1］郭紹青，黃建軍，袁慶飛.國(guó)外移動(dòng)學(xué)習(xí)應(yīng)用發(fā)展綜述［J］.電化教育研究，2011（5）:105-109.

［2］傳智播客高教產(chǎn)品研發(fā)部.Android移動(dòng)應(yīng)用基礎(chǔ)教程［M］.北京:中國(guó)鐵道出版社，2015.

［3］王利華，魏曉軍，馮誠(chéng)祺.React Native入門與實(shí)戰(zhàn)［M］.北京:人民郵電出版社，2015.

（責(zé)任編輯：肖錫湘）

中圖分類號(hào)：TP308

文獻(xiàn)標(biāo)志碼：A

文章編號(hào)：1672-4348（2016）03-0274-09

doi：10.3969/j.issn.1672-4348.2016.03.013

收稿日期:2016-03-07

基金項(xiàng)目:福建省教育科學(xué)“十二五”規(guī)劃2014年度項(xiàng)目（FJJKCG14-073）

第一作者簡(jiǎn)介:柯曉昱（1982-），男，福建莆田人，講師，碩士，研究方向:軟件工程、移動(dòng)應(yīng)用開發(fā)。

Design and imp lementation ofmobile English learning p latform based on hybrid programm ing

Ke Xiaoyu，Liu Cao，Wu Xian，Lin Yaqin
（Software College，F(xiàn)ujian University of Technology，F(xiàn)uzhou 350003，China）

Abstract:Employing PHP，HTML5，JavaScript and database technology and based on the analysis of the significance of developing a learning platform，function modules and business data，an iOS/ Android cross-platform application program was developed by integrating WEB APP framework of React Native and native mode hybrid programming.The learning platform adopts 3-minute video clips of English as content carrier，which integrates fragmented learning time.“Three-minute English”learning conceptwas proposed.Combined with pushing video resources with personalized recommendation methods，the program hasmade advantages of mobile learning platform，which has considerable popularization and application value.

Keywords:hybrid programming；video clip；fragmented learning；three-minute English