北京大學(xué)移動(dòng)課堂設(shè)計(jì)與實(shí)現(xiàn)*

楊公義，王勝清

（北京大學(xué)，北京 100871）

北京大學(xué)移動(dòng)課堂設(shè)計(jì)與實(shí)現(xiàn)*

楊公義，王勝清

（北京大學(xué)，北京 100871）

基于Flex+Spring+BlazeDS技術(shù)開(kāi)發(fā)的北大移動(dòng)課堂能通過(guò)rtmp流安全高效地獲取遠(yuǎn)程服務(wù)器端的直播流和點(diǎn)播流。功能模塊包括院系列表、統(tǒng)一身份認(rèn)證、院系的課程列表、課程的所有視頻列表、視頻點(diǎn)播、直播教室的列表、教室直播、意見(jiàn)建議。在服務(wù)器端，通過(guò)J2EE應(yīng)用的部署與配置把Spring管理的Bean通過(guò)BlazeDS發(fā)布成服務(wù)。在客戶端，通過(guò)Flash Builder搭建Flex開(kāi)發(fā)環(huán)境，并通過(guò)DCD技術(shù)調(diào)用服務(wù)器端BlazeDS遠(yuǎn)程服務(wù)。以開(kāi)發(fā)“院系列表”為例介紹了Flex調(diào)用服務(wù)器端BlazeDS服務(wù)的機(jī)制。北大移動(dòng)課堂實(shí)現(xiàn)了讓北大師生通過(guò)安卓手機(jī)點(diǎn)播北京大學(xué)視頻資源庫(kù)的教學(xué)視頻，在線觀看北大網(wǎng)絡(luò)教育電視臺(tái)15個(gè)教室的教學(xué)實(shí)況，并與學(xué)校的統(tǒng)一認(rèn)證進(jìn)行了整合。

Flex；Spring BlazeDS集成；Android App開(kāi)發(fā)；移動(dòng)課堂

一、引言

移動(dòng)課堂App是移動(dòng)教育的重要工具，為了讓北大師生用Google Android手機(jī)或移動(dòng)終端點(diǎn)播北大視頻資源庫(kù)的教學(xué)視頻，在線觀看北大網(wǎng)絡(luò)教育電視臺(tái)15個(gè)教室的教學(xué)實(shí)況，北大自主研發(fā)了移動(dòng)課堂。為保護(hù)版權(quán)，視頻資源庫(kù)和網(wǎng)絡(luò)教育電視臺(tái)均采用了Adobe公司的Flash流媒體服務(wù)器。從技術(shù)一致性考慮，北大移動(dòng)課堂的開(kāi)發(fā)采用了Adobe公司的Flex語(yǔ)言，因?yàn)橛肍lex語(yǔ)言能很好地調(diào)用基于rtmp協(xié)議的Flash流媒體服務(wù)器中的直播流或點(diǎn)播流。

二、北京大學(xué)移動(dòng)課堂的界面與功能設(shè)計(jì)[1]

北大移動(dòng)課堂App的安裝，在Android手機(jī)上，用瀏覽器訪問(wèn)http://www.metc.pku.edu.cn/xiazai/course.apk下載并安裝。如果手機(jī)上沒(méi)有Adobe air運(yùn)行環(huán)境，需要訪問(wèn)http://www.metc.pku.edu.cn/xiazai/air.apk下載并安裝。course.apk運(yùn)行之后，首頁(yè)如圖1所示。（為了抓圖的方便，本文圖片是來(lái)自FlashBuilder的手機(jī)模擬器，在手機(jī)上實(shí)際運(yùn)行的效果會(huì)更美觀）北大移動(dòng)課堂與計(jì)算中心的統(tǒng)一認(rèn)證進(jìn)行了對(duì)接，經(jīng)過(guò)認(rèn)證的用戶可以隨時(shí)隨地點(diǎn)播課程錄像或看教室直播。用戶在圖1中單擊任一院系名稱或者在圖6中單擊任一教室名稱，會(huì)進(jìn)入圖2要求通過(guò)計(jì)算中心的統(tǒng)一認(rèn)證?！氨贝笠苿?dòng)課堂”的功能主要包括直播和點(diǎn)播。點(diǎn)播：首頁(yè)（圖1）單擊“院系課堂”進(jìn)入“院系列表”，顯示所有院系的院系名稱、課程門(mén)數(shù)。系統(tǒng)實(shí)現(xiàn)了按“院系名稱”模糊查詢的功能，查詢結(jié)果以“課程數(shù)量”降序排列。圖1中單擊任一院系名稱，進(jìn)入該院系的課程列表如圖3所示，可瀏覽該院系的所有課程，并能按“課程名稱”模糊查詢。圖3中單擊任一課程名稱，進(jìn)入該課程的“視頻列表”，如圖4所示，圖4中單擊任意一個(gè)視頻，可以全屏播放該視頻，如圖5所示。播放方式采用RTMP流，使用戶只能在線觀看，不能下載播放，保證了視頻資源的安全性。[2]

圖1 首頁(yè)：默認(rèn)顯示“院系課堂”的“院系列表”

圖2 要求通過(guò)計(jì)算中心的統(tǒng)一認(rèn)證

圖3 通過(guò)統(tǒng)一認(rèn)證后可查看所訪問(wèn)院系的課程列表

圖4 單擊任一課程后得到該課程的所有視頻列表

圖5 單擊任一視頻進(jìn)入視頻點(diǎn)播畫(huà)面

圖6 首頁(yè)單擊直播教室看到直播教室的列表

直播：首頁(yè)單擊“直播教室”。如圖6所示，可以瀏覽北大網(wǎng)絡(luò)教育電視臺(tái)中15個(gè)直播教室，圖6中單擊任一教室，進(jìn)入如圖7所示的視頻畫(huà)面，可以在線觀看北大某一教室的教學(xué)實(shí)況。

意見(jiàn)建議：?jiǎn)螕魧?dǎo)航條的“意見(jiàn)建議”，可以電話、短信、Email的方式進(jìn)行反饋。返回首頁(yè)：按手機(jī)上面的返回鍵。這里用代碼監(jiān)聽(tīng)移動(dòng)設(shè)備上的返回鍵，調(diào)用一段自定義代碼。關(guān)閉：?jiǎn)螕魧?dǎo)航條的“退出”。

三、服務(wù)器端J2EE應(yīng)用的部署與配置

北大移動(dòng)課堂客戶端程序，需要與遠(yuǎn)程服務(wù)器端的程序協(xié)作才能訪問(wèn)北大視頻資源庫(kù)的視頻和北大網(wǎng)絡(luò)教育電視臺(tái)的頻道。[3]應(yīng)用服務(wù)器采用tomcat，Web應(yīng)用名稱為course，編程語(yǔ)言采用Java，開(kāi)發(fā)框架采用Spring，Java后端與前端Flex的交互采用BlazeDS。BlazeDS是一個(gè)Adobe推出的基于服務(wù)器的Java遠(yuǎn)程調(diào)用和Web消息傳遞技術(shù)，使后臺(tái)的Java應(yīng)用程序和前端Flex應(yīng)用程序能夠相互通信。Spring BlazeDS Integration是Adobe與Spring聯(lián)合開(kāi)發(fā)的一個(gè)開(kāi)源項(xiàng)目，使用該項(xiàng)目開(kāi)發(fā)者可以通過(guò)BlazeDS公開(kāi)Spring管理的Bean而無(wú)需額外配置文件。[4]關(guān)于這些技術(shù)單獨(dú)使用的方法和需要部署的Jar等請(qǐng)參考官方文檔。這幾項(xiàng)技術(shù)集成及協(xié)同工作的關(guān)鍵技術(shù)是本文論述的重點(diǎn)。

1.為了集成BlazeDS需要在web.xml中配置監(jiān)聽(tīng)和servlet

在course應(yīng)用的web.xml中除了常規(guī)web應(yīng)用和Spring框架需要的配置之外，還需要為集成BlazeDS配置如下監(jiān)聽(tīng)和servlet。

＜listener-class＞flex.messaging.HttpFlexSession＜/listener-class＞＜servlet＞＜servlet-name＞RDSDispatchServlet＜/servlet-name＞＜servlet-class＞flex.rds.server.servlet.FrontEndServlet＜/servlet-class＞＜init-param＞＜param-name＞useAppserverSecurity＜/param-name＞＜param-value＞false＜/param-value＞＜/init-param＞＜init-param＞＜param-name＞messageBrokerId＜/param-name＞＜param-value＞_message-Broker＜/param-value＞＜/init-param＞＜load-on-startup＞3＜/ load-on-startup＞＜/servlet＞＜servlet-mapping id="RDS_D

ISPATCH_MAPPING"＞＜servlet-name＞RDSDispatch-Servlet＜/servlet-name＞＜url-pattern＞/CFIDE/main/ide. cfm＜/url-pattern＞＜/servlet-mapping＞

2.通過(guò)BlazeDS公開(kāi)Spring管理的Bean

為了能通過(guò)BlazeDS公開(kāi)Spring管理的Bean，需要修改Spring標(biāo)準(zhǔn)配置文件。因?yàn)楸贝笠苿?dòng)課堂要訪問(wèn)服務(wù)器端三個(gè)實(shí)體及服務(wù)——院系 (department)、課程(course)、視頻(video)，每個(gè)實(shí)體的服務(wù)中均提供了操作相應(yīng)實(shí)體的方法，如findPageResult(…)、findByPrimaryKey(…)等，下面以spring-department.xml為例說(shuō)明。

①在spring的 bean中增加＜flex:remoting-destination/＞，即：＜bean id="departmentService"parent="baseTx-Proxy"＞＜property name="target"＞＜bean class="pku.metc. department.service.impl.DepartmentServiceImpl"parent=" serviceTemplate"/＞＜/property＞＜flex:remoting-destination/＞＜/bean＞。②增加xml命名空間：xmlns:flex=http://www. springframework.org/schema/flex。③在書(shū)寫(xiě)xml時(shí)需要遵循的語(yǔ)法xsi:schemaLocation中增加：http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www. springframework.org/schema/flex http://www.springframework.org/schema/flex/spring-flex-1.0.xsd"＞。

四、客戶端Flex手機(jī)項(xiàng)目開(kāi)發(fā)環(huán)境的建構(gòu)

開(kāi)發(fā)北大移動(dòng)課堂app采用的語(yǔ)言是Flex+Action-Script，項(xiàng)目開(kāi)發(fā)環(huán)境是Flash Builder4.5。創(chuàng)建項(xiàng)目的方法為：文件＞新建＞flex手機(jī)項(xiàng)目，項(xiàng)目名稱：course；Flex SDK版本：4.5.1。單擊下一步，目標(biāo)平臺(tái)：勾選Apple IOS、BlackBerry Tablet OS、Google Android；應(yīng)用程序模板：基于視圖的應(yīng)用程序；應(yīng)用程序設(shè)置：自動(dòng)重定向；DPI：160dpi。單擊下一步，服務(wù)器設(shè)置如圖8所示。單擊下一步，構(gòu)建路徑，驗(yàn)證RSL摘要，刪除未使用的RSL，在調(diào)試時(shí)使用本地調(diào)試運(yùn)行時(shí)共享庫(kù)，基于依賴項(xiàng)自動(dòng)確定排序，主源文件夾 src，主應(yīng)用程序文件 course. mxml，應(yīng)用程序ID：course。單擊完成，自動(dòng)產(chǎn)生了應(yīng)用程序入口框架文件course/src/course.mxml和主頁(yè)視圖文件course/src/views/courseView.mxml。因?yàn)楸緫?yīng)用程序要在首頁(yè)顯示 “院系列表”，所以修改course.mxml中的firstView="views.departmentListView"，并把自動(dòng)生成的courseView.mxml另存為departmentListView.mxml，得到了實(shí)際使用的主頁(yè)視圖文件。

五、客戶端使用Flash Builder的DCD技術(shù)調(diào)用服務(wù)器端BlazeDS遠(yuǎn)程服務(wù)

DCD（Data-Centric Development）數(shù)據(jù)中心開(kāi)發(fā)技術(shù)是Flash Builder4.5的一個(gè)優(yōu)點(diǎn)之一，利用 DCD調(diào)用BlazeDS遠(yuǎn)程服務(wù)的方法如下。[5]

①確保服務(wù)器端已經(jīng)啟動(dòng) tomcat，并且 http:// 162.105.137.60:8080/course/通過(guò)瀏覽器是可訪問(wèn)的。在Flash Builder中右擊名為course的Flex手機(jī)項(xiàng)目＞＞屬性＞＞Fex服務(wù)器，確保設(shè)置如圖8所示。②Flash Builder中數(shù)據(jù)菜單＞＞連接數(shù)據(jù)/服務(wù)＞＞BlazeDS＞＞下一步＞＞不需要密碼＞＞確定＞＞如圖9所示界面。這里不需要密碼的原因是上述 web.xml中為 RDSDispatchServlet設(shè)置了useAppserverSecurity參數(shù)值為 false。在圖 9中 Flash Builder列出了遠(yuǎn)程tomcat服務(wù)器的course應(yīng)用中所有通過(guò)BlazeDS公開(kāi)的Spring管理的Bean服務(wù)。在圖9中，從“選擇要導(dǎo)入的目標(biāo)”中勾選要導(dǎo)入的BlazeDS服務(wù)如departmetnService院系服務(wù)；在“服務(wù)包”和“數(shù)據(jù)類(lèi)型包”中輸入把遠(yuǎn)程BlazeDS服務(wù)導(dǎo)入到Flex手機(jī)應(yīng)用的哪個(gè)包中；根據(jù)如圖9所示的輸入，在Flex手機(jī)應(yīng)用course的src下自動(dòng)生成了pku.metc.department.service.DepartmentService.as和 pku.metc.department.vo.DepartmentVO.as。同樣的方法，自動(dòng)導(dǎo)入BlazeDS遠(yuǎn)程的課程服務(wù)和視頻服務(wù)。得到pku.metc.course.service.CourseService.as,pku.metc.course.vo.CourseVO.as,pku.metc. video.service.VideoService.as,pku.metc.video.vo.Video-VO.as。為提高服務(wù)器端程序的可移性，在Flex手機(jī)應(yīng)用course/src下定義常量類(lèi) Const.as，在其中定義常量ENDPOINT:String=http://162.105.137.60:8080/course/。手動(dòng)修改上面每個(gè)service的父類(lèi)中的一行代碼_service-Control.endpoint=Const.ENDPOINT+"messagebroker/amf"。

六、以開(kāi)發(fā)“院系列表”為例介紹Flex調(diào)用服務(wù)器端BlazeDS服務(wù)的機(jī)制

圖1所示“院系課堂”的“院系列表”的主程序?yàn)閐epartmentListView.mxml，為了在本程序中能訪問(wèn)上述已經(jīng)導(dǎo)入的遠(yuǎn)程BlazeDS公開(kāi)的類(lèi)DepartmentService、對(duì)象departmentService、方法findPageResultResult，要做下面幾步。

①在＜s:View標(biāo)簽中聲明命名空間 xmlns:departmentservice="pku.metc.department.service.*"。②在＜fx: Declarations＞進(jìn)行如下聲明:＜fx:Declarations＞＜s:CallResponder id="findPageResultResult"result="findPageResultResult_resultHandler (event)"/＞＜departmentservice:DepartmentService id="departmentService"/＞＜/fx:Declarations＞

用＜s:List控件實(shí)現(xiàn)圖1中的“院系列表”的關(guān)鍵代碼 為 ：＜s:List id="departmentList"change="departmentList_changeHandler(event)"creationComplete="departmentList_creationCompleteHandler(event)"labelFunction="get_stringb_integera"＞＜s:AsyncListView list="{com. adobe.serializers.utility.TypeUtility.convertToCollection (findPageResultResult.lastResult.list)}"/＞＜/s:List＞

圖7 單擊任一直播教室進(jìn)入教室直播的畫(huà)面

圖8 Flex服務(wù)器設(shè)置

圖9 利用DCD技術(shù)調(diào)用BlazeDS遠(yuǎn)程服務(wù)

說(shuō)明：①將AsyncListView對(duì)象的 list屬性綁定到CallResponder對(duì)象findPageResultResult的lastResult屬性，目的是對(duì)查詢結(jié)果利用TypeUtility.convertToCollection進(jìn)行類(lèi)型轉(zhuǎn)換。②labelFunction="get_stringb_integera"作用是：把findPageResultResult.lastResult.list中的每一項(xiàng)進(jìn)行格式化為圖1中的如下形式：“物理學(xué)院 共7門(mén)課”。③creationComplete="…"表示s:List控件創(chuàng)建完成后自動(dòng)調(diào)用的方法，該方法的作用是通過(guò) departmentService.findPageResult發(fā)起服務(wù)調(diào)用，調(diào)用結(jié)果存入CallResponder類(lèi)的對(duì)象findPageResultResult的名為token屬性中，該token屬性是AsyncToken類(lèi)的一個(gè)實(shí)例。上面幾個(gè)方法的詳細(xì)代碼如下：

protected function departmentList_creationComplete-Handler(event:FlexEvent):void{findPageResultResult.token =departmentService.findPageResult("fromDepartment po where 1=1 order by po.integera desc",1,65535); }

private function get_stringb_integera(item:Object): String{return""+item.stringb+""+"共 "+item.integera+"門(mén)課";}

實(shí)現(xiàn)圖 1中按“院系名稱”查詢：界面關(guān)鍵代碼為＜s:TextInput id="searchTxt"prompt="院系名稱"/＞＜s:Button id="searchBtn"click="doSearch(event)"＞單擊查詢按鈕調(diào)用的doSearch方法，根據(jù)用戶輸入的“院系名稱”組合出查詢字符串，以此字符串作為參數(shù)觸發(fā) departmentService.findPageResult方法。doSearch詳細(xì)代碼為：

protected function doSearch(event:Event):void{this.addElement(busyIndicator);if(searchTxt.text!=""){find-PageResultResult.token=departmentService.findPageResult("fromDepartment po where 1=1 and po.stringb like′%"+searchTxt.text+"%′order by po.integera desc",1, 65535);} else {findPageResultResult.token =departmentService.findPageResult"from Department po where 1=1 order by po.integera desc",1,65535);}}

圖1中單擊任意一個(gè)院系名稱的處理機(jī)制為：為＜s: List定義 change事件為"departmentList_changeHandler (event)"，該方法的作用是判斷如果用戶沒(méi)有登錄，將“登錄視圖”logon推送到導(dǎo)航堆棧的頂部。否則就“課程列表視圖”courseListView推送到導(dǎo)航堆棧的頂部。詳細(xì)代碼為：

protected function departmentList_changeHandler (event:IndexChangeEvent):void{if(Const.ISLOGIN==false) {navigator.pushView (logon,departmentList.selectedItem);} else{navigator.pushView(courseListView,departmentList.selectedItem)}}

以上以開(kāi)發(fā)“院系列表”實(shí)例介紹了Flex調(diào)用服務(wù)器端BlazeDS服務(wù)的機(jī)制，大部分的業(yè)務(wù)邏輯的實(shí)現(xiàn)在服務(wù)器端，F(xiàn)lex手機(jī)應(yīng)用只是對(duì)遠(yuǎn)程服務(wù)和方法的調(diào)用。

七、結(jié)語(yǔ)

北大移動(dòng)課堂實(shí)現(xiàn)了讓北大師生能通過(guò)安卓手機(jī)點(diǎn)播北京大學(xué)視頻資源庫(kù)的教學(xué)視頻，在線觀看北大網(wǎng)絡(luò)教育電視臺(tái)的15個(gè)教室的教學(xué)實(shí)況。播放方式均采用RTMP流，使用戶只能在線觀看，不能下載播放，保證了視頻資源的安全性。北大移動(dòng)課堂和北大的統(tǒng)一認(rèn)證結(jié)合，只有合法用戶才能正常訪問(wèn)。基于Flex+Spring+ BlazeDS技術(shù)開(kāi)發(fā)的北大移動(dòng)課堂，良好穩(wěn)定地滿足了北大師生的需求。

[1]楊公義,張亦工.北京大學(xué)教室管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代教育技術(shù),2015(4):115-120.

[2]楊公義,張亦工.基于Red5的網(wǎng)絡(luò)教育電視臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代教育技術(shù),2012(8):109-112.

[3]陳飛,楊公義,李志剛等.基于Blackboard系統(tǒng)的“北大教學(xué)網(wǎng)”擴(kuò)展開(kāi)發(fā)研究[J].北京大學(xué)教育評(píng)論,2013 (12):201-211.

[4]Spring BlazeDS Integration[EB/OL].http://docs. spring.io/spring-flex/docs/1.5.x/javadoc-api/index.html.

[5]Flex Test Drive[EB/OL].http://www.adobe.com/ cn/devnet/flex/testdrive/articles/1_build_a_flex_app2.html.

（編輯：王天鵬）

G434

：A

：1673-8454（2017）07-0045-04

教育部在線教育研究中心在線教育研究基金(全通教育)“慕課在線教學(xué)組織方法實(shí)證研究”(項(xiàng)目編號(hào)：2016ZD301)資助。