基于Flutter 的智慧工地APP 的設(shè)計(jì)與實(shí)現(xiàn)

王英明，許 青，郭艷梅

隨著智能手機(jī)的普及和移動(dòng)互聯(lián)網(wǎng)的廣泛應(yīng)用，越來(lái)越多的管理系統(tǒng)相關(guān)業(yè)務(wù)從PC端遷移到移動(dòng)端，主要的方式有APP、微信小程序、微信公眾號(hào)等，其中APP 以良好的用戶體驗(yàn)備受青睞[1-3］.目前APP 開發(fā)的主要技術(shù)有Native APP、Web APP、Hybrid APP、React Native、Weex、Flutter等，其中React Native、Weex、Flutter 等跨平臺(tái)開發(fā)框架，改進(jìn)了渲染技術(shù)，在保證運(yùn)行效率的同時(shí)，可以節(jié)省大量開發(fā)成本[4-6］.

本文在現(xiàn)有智慧工地綜合服務(wù)平臺(tái)的基礎(chǔ)上，利用Flutter 框架開發(fā)了一款A(yù)PP，實(shí)現(xiàn)了視頻監(jiān)控、隨手拍、安全帽告警、環(huán)境監(jiān)測(cè)、車輛沖洗等功能，有效地完成了業(yè)務(wù)功能的遷移，管理人員可以通過(guò)移動(dòng)APP 隨時(shí)隨地了解工地運(yùn)行狀態(tài).系統(tǒng)使用Flutter 框架一套代碼直接編譯出Android、IOS 兩個(gè)平臺(tái)的APP，為企業(yè)節(jié)省了開發(fā)成本，由于編譯時(shí)生成的為原生代碼，用戶體驗(yàn)可以媲美原生APP.

1 系統(tǒng)設(shè)計(jì)

1.1 Flutter 框架介紹

Flutter 是谷歌的移動(dòng)UI 框架，可以快速在IOS 和Android 上構(gòu)建高質(zhì)量的原生用戶界面，并且Flutter 是完全免費(fèi)、開源的，已經(jīng)被越來(lái)越多的開發(fā)者使用[7］.

1.2 需求分析與系統(tǒng)功能

針對(duì)目前安全監(jiān)管和防范手段相對(duì)落后，建筑施工企業(yè)信息化水平仍較低的現(xiàn)狀，市監(jiān)管部門已經(jīng)建立起一個(gè)智慧工地綜合服務(wù)平臺(tái)，實(shí)現(xiàn)通過(guò)PC 機(jī)對(duì)建筑施工安全生產(chǎn)進(jìn)行智能化監(jiān)管，但通過(guò)手持終端隨時(shí)隨地對(duì)建筑施工安全生產(chǎn)進(jìn)行監(jiān)管還有待完善.本系統(tǒng)通過(guò)對(duì)現(xiàn)有智慧工地綜合服務(wù)平臺(tái)進(jìn)行分析，將平臺(tái)中的部分功能遷移到移動(dòng)端APP 上，包括視頻監(jiān)控、塔吊安全、環(huán)境監(jiān)測(cè)等，系統(tǒng)功能模塊如圖1 所示.

圖1 系統(tǒng)功能模塊圖

1.3 系統(tǒng)設(shè)計(jì)方案

為了提高運(yùn)行效率、節(jié)省開發(fā)成本，本系統(tǒng)選用Flutter 框架進(jìn)行開發(fā)，對(duì)于一些需要操控硬件的功能，使用Flutter 進(jìn)行編寫，如視頻監(jiān)控、隨手拍等；對(duì)于一些展示性的功能，使用WebView 嵌入網(wǎng)頁(yè)的方式進(jìn)行編寫，如車輛沖洗、信用排名等.

1.4 系統(tǒng)網(wǎng)路拓?fù)鋱D

本系統(tǒng)為智慧工地綜合服務(wù)平臺(tái)的子系統(tǒng)，管理人員通過(guò)安裝有APP 的手機(jī)，訪問(wèn)Web應(yīng)用服務(wù)器，與數(shù)據(jù)庫(kù)服務(wù)器進(jìn)行數(shù)據(jù)交互或與監(jiān)控設(shè)備通訊后返回給移動(dòng)端APP，系統(tǒng)網(wǎng)絡(luò)拓?fù)鋱D如圖2 所示.

圖2 系統(tǒng)網(wǎng)絡(luò)拓?fù)鋱D

2 系統(tǒng)實(shí)現(xiàn)與關(guān)鍵技術(shù)

本節(jié)將詳細(xì)介紹主要功能模塊的系統(tǒng)實(shí)現(xiàn)，以及所使用的關(guān)鍵技術(shù).

2.1 服務(wù)器端和APP 的數(shù)據(jù)交互

在使用Flutter 編寫移動(dòng)端APP 時(shí)，需要處理服務(wù)器端和APP 之間的數(shù)據(jù)交互，本系統(tǒng)使用dio 組件進(jìn)行實(shí)現(xiàn).dio 是一個(gè)強(qiáng)大的Dart Http 請(qǐng)求庫(kù)，支持全局配置、攔截器設(shè)置、模擬表單、文件下載、同步異步請(qǐng)求等.創(chuàng)建dio組件時(shí)，需要進(jìn)行一些配置，相關(guān)代碼如下：

使用時(shí)可以將dio 封裝成單例模式，對(duì)外提供get 和post 兩種方法，通過(guò)傳入指定的url和param 進(jìn)行Web API 調(diào)用.

2.2 智慧工地APP

（1）客戶端首頁(yè).客戶端首頁(yè)由兩部分組成，一是底部的tab 區(qū)域，由BottomAppBar 實(shí)現(xiàn)；二是內(nèi)容區(qū)域，由PageView 實(shí)現(xiàn).PageView包含兩個(gè)頁(yè)面，其中首頁(yè)也由兩部分組成，頂部的輪播區(qū)域由flutter_swipper 組件實(shí)現(xiàn)，下面的主菜單區(qū)域由SingleChildScrollView 實(shí)現(xiàn)，內(nèi)部根據(jù)每行菜單數(shù)目進(jìn)行適配，界面效果如圖3 所示.

圖3 首頁(yè)設(shè)計(jì)圖

（2）視頻監(jiān)控.視頻監(jiān)控模塊使用fijkplayer插件接入監(jiān)控設(shè)備.fijkplayer 是基于ijkplayer封裝的flutter 媒體播放器，支持rtsp、rtmp 等主流協(xié)議.播放時(shí)，首先根據(jù)設(shè)備ID 獲取rtmp 流地址，然后調(diào)用setDataSource 方法將流地址傳遞給fijkPlayer 對(duì)象.界面效果如圖4 所示，關(guān)鍵代碼如下：

圖4 視頻監(jiān)控圖

為了支持球機(jī)的云臺(tái)控制，對(duì)fijkplayer 插件的源碼進(jìn)行了修改，在fijkView 組件的構(gòu)造函數(shù)中增加了是否是球機(jī)的參數(shù)bDomeCam?era，以及手勢(shì)操作的回調(diào)函數(shù)onHandle. 當(dāng)bDomeCamera 值 為true 時(shí)，顯 示 控 制 搖 桿，操作時(shí)先將手勢(shì)轉(zhuǎn)換為特定的方向（上、下、左、右、左上、左下、右下、右上），然后傳遞給回調(diào)函數(shù)onHandle，通過(guò)調(diào)用Web API 控制球機(jī).界面效果如圖5 所示，關(guān)鍵代碼如下：

圖5 球機(jī)控制圖

（3）隨手拍.當(dāng)工地管理人員發(fā)現(xiàn)工地中存在安全隱患、環(huán)境治理不到位、實(shí)名制管理不規(guī)范、車輛未沖洗等問(wèn)題時(shí)，可以通過(guò)“隨手拍”模塊采集現(xiàn)場(chǎng)音頻、視頻，填寫問(wèn)題類別、問(wèn)題描述等信息，然后上傳至綜合服務(wù)管理平臺(tái).音頻、視頻錄制通過(guò)flutter 組件flut?ter_audio_recorder、camera 來(lái)實(shí)現(xiàn).界面效果如圖6 所示，關(guān)鍵代碼如下：

圖6 隨手拍圖

（4）環(huán)境監(jiān)測(cè)、塔吊安全等.本系統(tǒng)部分展示性模塊，如環(huán)境監(jiān)測(cè)、塔吊安全、信用排名等，采用webview_flutter 組件利用URL 內(nèi)嵌網(wǎng)頁(yè)的方式實(shí)現(xiàn)，WebView 使用代碼如下：

為了讓內(nèi)嵌頁(yè)面識(shí)別當(dāng)前APP 的登錄用戶，還需要將當(dāng)前登錄用戶的token 通過(guò)cookie設(shè)置給內(nèi)嵌網(wǎng)頁(yè)，部分界面效果如圖7 所示，關(guān)鍵代碼如下：

圖7 環(huán)境監(jiān)測(cè)

3 結(jié)束語(yǔ)

根據(jù)智慧工地實(shí)際需求，本文基于智慧工地綜合服務(wù)平臺(tái)設(shè)計(jì)了一套智慧工地APP，實(shí)現(xiàn)了視頻監(jiān)控、隨手拍、環(huán)境監(jiān)測(cè)等功能.系統(tǒng)界面友好、操作簡(jiǎn)單，為企業(yè)管理人員及時(shí)掌握工地運(yùn)行現(xiàn)狀提供了便利，系統(tǒng)上線后，受到了企業(yè)的一致好評(píng).