基于ReactNative的學(xué)教在線一站式平臺開發(fā)

李敬　陳才扣　陸羽　盛紫朦　朱蕾　眭鎮(zhèn)濤

摘要：該文使用React Native框架開發(fā)跨平臺移動應(yīng)用學(xué)教在線一站式服務(wù)平臺。配套有教師、學(xué)生、學(xué)工三端，后端采用Node.JS + Express實(shí)現(xiàn)。系統(tǒng)實(shí)現(xiàn)校園業(yè)務(wù)整合，消除數(shù)據(jù)孤島，打通學(xué)情分析，提高學(xué)生工作管理水平。

關(guān)鍵詞：React Native；校園信息化；移動應(yīng)用開發(fā)

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）27-0070-01

The Develop of Learn and Teach Online One-Stop Service Platform Based on React Native

LI Jing， CHEN Cai-kou， LU Yu，SHENG Zi-meng，ZHU Lei，SUI Zhen-tao

（College of Information Engineering at Yangzhou University， Yangzhou 225127， China）

Abstract： This paper use the React Native framework to develop a cross-platform mobile application，online one-stop service platform.It is equipped with teachers，student workers and students.The back-end adopts node.js+Express.The system realizes the campus business integration，eliminates the data island，opens up the study situation analysis，enhances the student work management level.

Key words： React Native； campus informatization； mobile application development

目前，移動應(yīng)用開發(fā)愈來愈火熱。Android平臺和iOS平臺開發(fā)技術(shù)都相對成熟。很多高校也加快信息化進(jìn)程，緊隨Web2.0推進(jìn)業(yè)務(wù)移動化。然而，傳統(tǒng)開發(fā)模式下不得不為多平臺而重復(fù)開發(fā)。Facebook的React Native框架，強(qiáng)調(diào)學(xué)習(xí)一次，隨處編程（Learn once， write anywhere），革命性改變了傳統(tǒng)開發(fā)模式。RN框架能夠在Javascript和React基礎(chǔ)上獲得與原生一致的開發(fā)體驗(yàn)。截至2018年3月，RN框架已更新到0.55版本，新增修改了大量特性。

本系統(tǒng)是高校校園業(yè)務(wù)的一站式開發(fā)，整合目前分散的業(yè)務(wù)系統(tǒng)，有效連接教師、學(xué)生、學(xué)工三端，有效學(xué)情分析，提升軟實(shí)力。本系統(tǒng)核心功能有四個模塊，學(xué)情分析、通知推送、活動審核、課堂管理。

1 頂層架構(gòu)設(shè)計

React Native框架實(shí)現(xiàn)前端，采用Atom，使用墨刀設(shè)計原型，Xcode和Android Studio輔助。Node.JS+Express實(shí)現(xiàn)后端，接收請求，操作數(shù)據(jù)庫。采用MongoDB通過JSON

打通數(shù)據(jù)接口。信息用HTTPS加固傳輸。教師、學(xué)生、學(xué)工三端共用一套后臺，根據(jù)用戶級別開放相應(yīng)權(quán)限。

2 客戶端

2.1 核心功能

1） 學(xué)情分析：通過學(xué)生綜合能力測評，形成動態(tài)報告，宏觀把控學(xué)情。2）通知推送：信息推送使用戶及時了解校內(nèi)外最新通知。3）活動審核：學(xué)生將參與的活動上傳，審核后形成歷程檔案。4）課堂管理：輔導(dǎo)員通過課堂記錄，形成考勤走勢圖，增強(qiáng)師生交流。

2.2 界面設(shè)計

1） 圖片僅需制作一次，ReactNative組件自動匹配分辨率，便捷、清晰、體積壓縮。2）視圖組件化實(shí)現(xiàn)業(yè)務(wù)邏輯和UI的有效解耦。RN強(qiáng)調(diào)將APP視為組件拼接。擴(kuò)展官方組件，使得RN逐步擁有了Native APP的性能。

2.3 源碼結(jié)構(gòu)

Android和iOS文件夾分別是ReactNative生成的Android和iOS源碼，app.js是主入口。app目錄下是核心業(yè)務(wù)邏輯。其中，getData目錄下放獲取數(shù)據(jù)組件，components目錄下放基本組件構(gòu)建容器，actions和stores目錄下放Redux的js狀態(tài)管理組件，image等目錄下放資源文件，router目錄下放路由組件，node_modules目錄是npm在工程Build前根據(jù)package.json下載的依賴包。

3 服務(wù)端與數(shù)據(jù)接口

Node.JS作為實(shí)時后臺，使用輕量的express框架，建立服務(wù)只需監(jiān)聽相應(yīng)端口。通過mongoose連接mongoDB數(shù)據(jù)庫。構(gòu)建基于RESTfulAPI風(fēng)格的router進(jìn)行路由請求。使用ReactNative成熟的FetchAPI實(shí)現(xiàn)HTTPS請求。獲取后臺資源數(shù)據(jù)只需將網(wǎng)址傳參給fetch方法即可，后端收到后Response一個Promise對象，并轉(zhuǎn)化成JSONObject，接著進(jìn)行反序列化解析出其中的字段。

4 結(jié)束語

采用React Native開發(fā)，學(xué)習(xí)成本低，目前React生態(tài)對開發(fā)者很友好，使RN框架成為熱點(diǎn)。本系統(tǒng)可以填補(bǔ)目前教育部門、學(xué)校、教師、學(xué)生、家長、企業(yè)等七個群體對學(xué)生綜合評定信息化的空白，直擊痛點(diǎn)，有助于高校學(xué)生更好成長。

參考文獻(xiàn)：

[1] 趙永鵬.基于React Native的物業(yè)管理系統(tǒng)設(shè)計[J].數(shù)字技術(shù)與應(yīng)用，2018，36（1）：165，167.

[2] 郭水泉.基于校園大數(shù)據(jù)的學(xué)生異常行為分析模型[J].信息與電腦：理論版，2018（4）：116-117+，125.

[3] 馮博. 基于React Native框架的興趣社區(qū)Android客戶端設(shè)計與實(shí)現(xiàn)[D]. 哈爾濱：哈爾濱工業(yè)大學(xué)，2017.

[4] 程化梅. 基于React Native的即時通訊應(yīng)用的設(shè)計與實(shí)現(xiàn)[D]. 武漢：武漢郵電科學(xué)研究院，2017.

[通聯(lián)編輯：代影]