基于混合編程的移動英語學習平臺設計與實現

柯曉昱，劉　草，吳　獻，林雅琴

（福建工程學院軟件學院，福建福州350003）

?

基于混合編程的移動英語學習平臺設計與實現

柯曉昱，劉草，吳獻，林雅琴

（福建工程學院軟件學院，福建福州350003）

摘要：基于PHP、HTML5和JavaScript等技術，通過對學習平臺的開發意義、功能模塊及業務數據的分析與研究，結合React Native的WEBAPP框架與原生應用混合編程的方式快速開發iOS/Android跨平臺的應用程序。以3min時長的英語視頻片斷作為內容載體，整合碎片化的學習時間，提出“3分鐘英語”學習理念，結合個性化推薦方法推送視頻資源，發揮出移動平臺的優勢，具有一定的推廣應用價值。

關鍵詞：混合編程；視頻片斷；碎片化學習；3分鐘英語

隨著現代信息技術的蓬勃發展，如何依托現代化信息技術豐富教育資源以及優化教學過程，成為近幾年教育發展領域中的一個研究熱點。移動學習是一種將移動技術與數字化學習技術相結合的一種新型數字化學習形式，它主要依托于無線移動技術、國際互聯網絡技術以及多媒體技術等［1］。

傳統教材所提供的教學視頻內容偏長，調查研究發現，視頻片斷在3min內最容易集中學生的注意力，吸收效果最好。因此，我們轉變思路，提出“3分鐘英語”自主學習理念，將學生由單純的受眾轉變為視頻的創作者與參與者，在教師的指導下，創作出一部部學生自已喜愛的英文“微電影”上傳至所設計的移動英語學習平臺。

同時，結合日益成熟的視頻點播技術，期望通過軟件工程與英語專業跨學科的融合，以促進大學英語視聽說課程教學方法的改進，提高教學質量；整合碎片化時間，結合個性化推薦方法推送視頻資源，提升學生的自主學習能力，培養及加強學生的交流與協作能力，讓學生學會主動思維、實踐、表達，進而更多地體驗移動學習的喜悅。

1　移動英語學習平臺的設計

1.1 平臺功能架構

本學習平臺從系統功能體系上分為四個層次:由數據庫服務器（MySQL）、Web服務器、統一身份認證服務器（central authenticaiton service，CAS）、網絡設施等組成的支撐平臺，數據交互處理的業務層，UI展示層及客戶端訪問層。其體系架構如圖1所示。

圖1　系統功能架構圖Fig.1 System architecture ofm obile English learning p latform

本學習平臺的客戶端分為兩類，即WEB瀏覽器和iOS/Android移動終端。客戶端與WEB應用服務器之間通過HTTP協議傳輸數據，采用JSON數據格式進行解析。

服務端的WEB應用服務器需要與身份認證服務器進行交互，以保證用戶登錄信息的有效性。其中，身份認證服務器還承擔著學院其他系統的統一身份認證的服務。其結構如圖2所示。

1.2 關鍵技術簡介

移動學習平臺在開發過程中采用以下幾種關鍵技術。

（1）服務端采用PHP/Think PHP框架，采用FFMPEG進行視頻處理，同時能夠自動獲取視頻縮略圖。

圖2　平臺的網絡結構圖Fig.2 The network architecture of learning p latform

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

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

（3）混合編程:移動客戶端采用Web應用和原生應用的混合編程方式。Web應用框架采用FaceBook發布的 React Native框架，它結合了Web應用和原生應用的優勢，可以使用JavaScript來開發iOS和Android原生應用，提供不輸于純原生應用的用戶體驗。它只需編寫一套核心程序，發布時針對不同的移動平臺進行編譯即可，這樣就可極大地提高開發效率，節省人力成本。

（4）視頻字幕解析:加載存放于服務器的（SRT）格式的字幕文件，獲取字幕所有內容。使用正則表達式，將內容解析成字幕數組，數組項的內容包含起始時間、結束時間、英語語句、中文語句。當視頻播放時，通過時間更新事件中返回的時間實時匹配字幕數組中對應時間的中、英文語句并展現出來。

（5）個性化推薦:設計的移動英語學習平臺中采用協同過濾推薦算法，它是目前個性化推薦系統中應用最為廣泛的技術之一，其最大優勢在于能夠處理視頻、音樂等各種非文本結構對象。

1.3 用戶設計

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

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

1.4 平臺設計

從業務角度來分述移動英語學習平臺服務端和客戶端的功能模塊。

1.4.1 服務端主要功能模塊

服務端實現平臺基礎數據的管理，見圖3。

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

服務端主要功能模塊有:

（1）分類管理:管理視頻的分類目錄及標簽，支持多級嵌套。

（2）視頻內容管理:視頻內容組成要素包括不含字幕的視頻源文件（mp4格式）、使用SRT格式標準制作的中英字幕文件、課前預習、重點句子、重點單詞。其中，教學管理員將不含字幕的視頻源文件單獨存放在專門的視頻服務器上，生成一個URI地址，同視頻的其他要素在WEB應用服務器上管理。上傳字幕文件時，系統將自動檢測SRT格式的文件是否符合規范，同時根據視頻源的URI地址使用FFMPEG接口自動截取其關鍵縮略圖。

（3）用戶管理:主要管理本平臺的基礎用戶信息及操作權限管理。

（4）行為管理:主要管理用戶的操作日志、記錄學生用戶的視頻學習的過程軌跡，比如在什么時間點欣賞哪個視頻等。

1.4.2 客戶端主要功能模塊

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

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

客戶端主要功能模塊有:

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

（2）視頻搜索:支持關鍵詞搜索以及高級/搜索兩種搜索模式

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

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

2　數據庫邏輯設計

2.1 平臺核心數據表

如表2所示，移動平臺的核心數據表有用戶表、視頻信息表、視頻數據表等，同時以auth_開頭的是統一身份認證服務上的3個核心用戶信息表。

表2　學習平臺核心數據表Tab.2 Themain data of English learning p latform

2.2 平臺數據表結構

2.2.1 基礎數據配置表

用于保存平臺的基礎配置數據，如站點的標題、描述、每頁顯示的記錄數、數據庫連接參數及備份路徑等，數據表名為“config”，其數據結構如表3所示。

表3　config基礎數據配置表Tab.3 The basic data configu ration

2.2.2 行為日志表

用于保存平臺用戶的操作行為，如執行者、行為名稱、執行狀態、登錄IP等，數據表名為“action _log”，其數據結構如表4所示。

2.2.3 分類管理表

用于保存視頻的目錄分類信息，如分類名稱、排序、分類的每頁行數、父級分類等，數據表名為“category”，其數據結構如表5所示。

2.2.4 視頻信息表

用于保存視頻的信息，如視頻主題、描述、視頻文件存放地址、視頻縮略圖、字幕文件存放地址、預習、練習等，數據表名為“document_video”，其數據結構如表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 文件信息表

用于保存平臺的文件信息，特別是視頻所對應的字幕文件信息，如原始文件名、保存后的文件名、保存路徑等，同時根據文件的md5和sha1碼來避免文件的重復上傳，數據表名為“document_ file”，其數據結構如表7所示。

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

2.2.6 文檔圖片信息表

用于保存平臺的圖片信息，特別是視頻所對應的縮略圖信息，如圖片的保存路徑、上傳時間等，同樣要根據圖片文件的md5和sha1碼來判斷是否存在重復的圖片文件，數據表名為“document _picture”，其數據結構如表8所示。

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

2.2.7 系統用戶信息表

數據表名為“member”，用于保存本學習平臺的用戶信息，如昵稱、性別、登錄次數等，它與統一身份認證表auth_user的區別在于:auth_user是用于跨系統的CAS統一用戶認證，而member表僅限于本移動學習平臺，不保存密碼等，但用戶名、昵稱等重點字段保持數據同步。這樣即保證了跨平臺用戶數據的統一性又兼顧了不同業務系統用戶權限等的靈活性，其數據結構如表9所示。

表9　member表Tab.9 Themember information

2.2.8 班級信息表

用于保存統一身份認證的班級信息，數據表名為“auth_class”，其數據結構如表10所示。

表10　auth_class班級表Tab.10 The class information of auth_class

2.2.9 統一身份認證的用戶信息表

用于保存統一身份認證服務器中的用戶信息，數據表名為“auth_user”，其數據結構如表11所示。

表11　auth_userTab.11 The information of auth_user

2.2.10 統一身份認證的專業信息表

用于保存統一身份認證服務器中的專業信息，數據表名為“auth_major”，其數據結構如表12所示。

表12　au th_m ajor專業表Tab.12 The information of auth_major

3　移動英語學習平臺的實現

3.1 平臺主要程序

移動學習平臺后臺管理及WEB客戶端的主要程序如表13所示。

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

3.2 平臺部分核心接口

本移動學習平臺所開放的部分核心JSON接口如表14所示。

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

3.3 平臺主要界面實現

3.3.1 后臺管理主要界面實現

（1）系統視頻分類管理主界面，能完成多級嵌套目錄的操作。界面頂部是主操作菜單項，左側是該菜單項所對應的子操作項，右側是該子操作項的具體操作界面，見圖5。

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

（2）移動學習平臺用戶管理主界面，見圖6。

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

3.3.2 WEB版視頻信息主要界面實現

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

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

圖7　視頻內容管理主界面Fig.7 The hom epage of video contentmanagement

圖8　視頻播放學習主界面Fig.8 The homepage of video study

（2）WEB版視頻播放器的播放界面:當點擊圖8所示播放器的播放按鈕時，會播放視頻，此時可以進行中英字幕的切換、上一句下一句的選擇，同時點擊英文字幕中的任一單詞會彈出對應的單詞釋義，見圖9。

3.3.3 移動版重點界面實現

移動版包含了iOS/Android平臺［2-3］，是本學習平臺的開發重點。通過前文所述的HTML5混編模式以達到風格界面的統一，同時極大地提高了開發效率。

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

（1）移動版登錄主界面，見圖10。

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

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

圖11　移動版主界面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　結語

以移動學習為契機，立足于英語教學的實際，整合碎片化的學習理念，設計了“3分鐘英語”移動自主學習平臺，該平臺充分發揮了移動學習模式的便捷性、資源豐富性以及資源高度分享性的

同時，也較好地提高了學習者的積極性與主動性。

在實際的使用中，學習資源推送的視頻數量與推薦速度呈正相關關系。因此，隨著視頻數量的不斷增加，平臺的推薦性能將受到較大影響，這正是此移動英語平臺后續要解決的重要問題。

參考文獻：

［1］郭紹青，黃建軍，袁慶飛.國外移動學習應用發展綜述［J］.電化教育研究，2011（5）:105-109.

［2］傳智播客高教產品研發部.Android移動應用基礎教程［M］.北京:中國鐵道出版社，2015.

［3］王利華，魏曉軍，馮誠祺.React Native入門與實戰［M］.北京:人民郵電出版社，2015.

（責任編輯：肖錫湘）

中圖分類號：TP308

文獻標志碼：A

文章編號：1672-4348（2016）03-0274-09

doi：10.3969/j.issn.1672-4348.2016.03.013

收稿日期:2016-03-07

基金項目:福建省教育科學“十二五”規劃2014年度項目（FJJKCG14-073）

第一作者簡介:柯曉昱（1982-），男，福建莆田人，講師，碩士，研究方向:軟件工程、移動應用開發。

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

Ke Xiaoyu，Liu Cao，Wu Xian，Lin Yaqin
（Software College，Fujian University of Technology，Fuzhou 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