楊公義，王勝清

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

北京大學(xué)移動課堂設(shè)計與實現(xiàn)*

楊公義，王勝清

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

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

Flex；Spring BlazeDS集成；Android App開發(fā)；移動課堂

一、引言

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

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

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

圖1 首頁：默認顯示“院系課堂”的“院系列表”

圖2 要求通過計算中心的統(tǒng)一認證

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

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

圖5 單擊任一視頻進入視頻點播畫面

圖6 首頁單擊直播教室看到直播教室的列表

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

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

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

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

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

在course應(yīng)用的web.xml中除了常規(guī)web應(yīng)用和Spring框架需要的配置之外，還需要為集成BlazeDS配置如下監(jiān)聽和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.通過BlazeDS公開Spring管理的Bean

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

①在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。③在書寫xml時需要遵循的語法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手機項目開發(fā)環(huán)境的建構(gòu)

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

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

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

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

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

圖1所示“院系課堂”的“院系列表”的主程序為departmentListView.mxml，為了在本程序中能訪問上述已經(jīng)導(dǎo)入的遠程BlazeDS公開的類DepartmentService、對象departmentService、方法findPageResultResult，要做下面幾步。

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

用＜s:List控件實現(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 單擊任一直播教室進入教室直播的畫面

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

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

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

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+"門課";}

實現(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詳細代碼為：

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

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

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

七、結(jié)語

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

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

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

[3]陳飛,楊公義,李志剛等.基于Blackboard系統(tǒng)的“北大教學(xué)網(wǎng)”擴展開發(fā)研究[J].北京大學(xué)教育評論,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é)組織方法實證研究”(項目編號：2016ZD301)資助。