基于Flutter的機(jī)務(wù)工作手冊(cè)數(shù)字化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

趙雅瓊 王哲 劉碩 陶英杰 陳淑穎

（中國(guó)民航大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院 天津市 300300）

1 引言

各機(jī)務(wù)維修單位的工作程序手冊(cè)依據(jù)維修能力范圍、不同客戶(hù)等因素會(huì)存在非常多的具體工作程序，是各位工作人員在工作中必須遵從的。然而大量非結(jié)構(gòu)化的數(shù)據(jù)有著查詢(xún)困難和難以整理等特點(diǎn)，并且不利于各部門(mén)之間的交流協(xié)作。通過(guò)手冊(cè)數(shù)字化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，將實(shí)現(xiàn)手冊(cè)的結(jié)構(gòu)化存儲(chǔ)，極大提高工作效率，便于管理，以解決此類(lèi)問(wèn)題。

在開(kāi)源的跨平臺(tái)APP 開(kāi)發(fā)技術(shù)中，使用НTML5 實(shí)現(xiàn)的網(wǎng)頁(yè)式APP 開(kāi)發(fā)因無(wú)法調(diào)用原生API 致使大量功能無(wú)法實(shí)現(xiàn)，且運(yùn)行性能低，操作體驗(yàn)差，這使得該技術(shù)逐步被基于原生渲染的混合式APP 開(kāi)發(fā)技術(shù)所取代，其中Flutter 是基于自繪UI 的混合式APP 開(kāi)發(fā)技術(shù)[1]。Flutter 是Google 公司開(kāi)發(fā)并推出的跨平臺(tái)、開(kāi)源移動(dòng)端UI 框架，它幫助開(kāi)發(fā)者通過(guò)一套代碼庫(kù)高效構(gòu)建精美的iOS 和Android 應(yīng)用[2]。它支持一套代碼在多種平臺(tái)上構(gòu)建應(yīng)用以及嵌入式開(kāi)發(fā)，這極大地減少了APP 的開(kāi)發(fā)和維護(hù)成本。并且可以實(shí)現(xiàn)原生用戶(hù)頁(yè)面，在渲染技術(shù)上實(shí)現(xiàn)了GDI，因此有較好可控性。同時(shí)，F(xiàn)lutter 使用簡(jiǎn)單易學(xué)且性能強(qiáng)大的Dart 語(yǔ)言進(jìn)行開(kāi)發(fā)，有利于快速學(xué)習(xí)和實(shí)現(xiàn)開(kāi)發(fā)。鑒于以上優(yōu)點(diǎn)，本系統(tǒng)通過(guò)部署Flutter 框架設(shè)計(jì)并實(shí)現(xiàn)UI 界面。

2 系統(tǒng)主要功能模塊

本系統(tǒng)主要服務(wù)于機(jī)務(wù)維修工作者，將工作程序具體對(duì)應(yīng)到責(zé)任部門(mén)、工作崗位和負(fù)責(zé)人。用戶(hù)可以對(duì)手冊(cè)和工作程序內(nèi)容進(jìn)行檢索，管理人員能夠根據(jù)相應(yīng)權(quán)限為一般員工分配工作，使其了解工作流程步驟，遵守相應(yīng)的規(guī)章制度。

綜合實(shí)際，本系統(tǒng)實(shí)現(xiàn)具體功能模塊如圖1 所示。

（1）用戶(hù)登錄：用戶(hù)通過(guò)用戶(hù)名和密碼登錄系統(tǒng)。

（2）手冊(cè)瀏覽：用戶(hù)可以下載手冊(cè)文件及其下各章節(jié)的工作程序文件。

（3）基本配置：擁有基本配置權(quán)限的用戶(hù)可以配置部門(mén)及其下崗位以及崗位對(duì)應(yīng)的員工。

（4）手冊(cè)錄入：擁有手冊(cè)錄入權(quán)限的用戶(hù)可以錄入手冊(cè)和對(duì)應(yīng)的工作程序內(nèi)容，包括程序編號(hào)、程序名稱(chēng)、目的、適用范圍、名詞術(shù)語(yǔ)、依據(jù)、修訂版本等信息，還可上傳流程圖和程序文件。

（5）部門(mén)配置：擁有部門(mén)配置權(quán)限的用戶(hù)可以將人員、工作和對(duì)應(yīng)的工作流程進(jìn)行對(duì)接，以實(shí)現(xiàn)手冊(cè)內(nèi)容對(duì)接到人和崗。

（6）用戶(hù)權(quán)限配置：管理員用戶(hù)可以修改各用戶(hù)的系統(tǒng)權(quán)限，包括管理員、手冊(cè)錄入、基本配置和部門(mén)配置五個(gè)權(quán)限。

（7）手冊(cè)查詢(xún)：用戶(hù)可根據(jù)程序編號(hào)、程序名稱(chēng)、修訂標(biāo)識(shí)、責(zé)任部門(mén)、責(zé)任崗位、工作名稱(chēng)、相關(guān)責(zé)任人以及關(guān)鍵字進(jìn)行檢索，查看所有程序的流程步驟，以及下載相關(guān)文件。

（8）個(gè)人信息：用戶(hù)可以看到自己所在的部門(mén)和崗位；修改自己的密碼和退出登錄。

3 UI界面的設(shè)計(jì)與實(shí)現(xiàn)

3.1 頁(yè)面布局設(shè)計(jì)

如圖2 所示，在整體布局設(shè)計(jì)中，系統(tǒng)引入了flutter_screenutil插件，對(duì)整體的布局進(jìn)行框定，設(shè)定了長(zhǎng)寬高及各項(xiàng)組件的大小比例，也引入了easy_refresh 插件，對(duì)頁(yè)面過(guò)長(zhǎng)進(jìn)行限定并設(shè)置了優(yōu)雅的個(gè)性化上拉加載。在Flutter 項(xiàng)目中Container 是其中最常用的組件，每個(gè)頁(yè)面在設(shè)計(jì)上都是采用Container 組件嵌套其他組件的形式構(gòu)造出來(lái)的，如登錄頁(yè)面中嵌套了Text、TextFormField 和RaisedButton，首頁(yè)中嵌套了Drawer、ClipOval、ExpansionalTile 等。除此之外，對(duì)各個(gè)頁(yè)面的部分按鈕，Inkwell 組件通過(guò)設(shè)置點(diǎn)擊事件Navigator 中調(diào)用MaterialPageRoute 來(lái)進(jìn)行頁(yè)面之間的跳轉(zhuǎn)。

圖1：機(jī)務(wù)工作手冊(cè)數(shù)字化系統(tǒng)的功能模塊圖

圖2：UI 設(shè)計(jì)圖

圖3：MVC 模式示意圖

圖4：前后端數(shù)據(jù)通信過(guò)程

3.2 網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)

在一些頁(yè)面按鈕的點(diǎn)擊事件中，以及在頁(yè)面初始化initState 和build 時(shí)，為了顯示數(shù)據(jù)，系統(tǒng)調(diào)用dio 方法異步發(fā)起get 請(qǐng)求并將返回值通過(guò)一個(gè)Response 對(duì)象來(lái)返回?cái)?shù)據(jù)，最后用json.decode 方法對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換，即可放在前端界面顯示。

在手冊(cè)瀏覽界面，手冊(cè)目錄的每個(gè)ListTile 添加了點(diǎn)擊事件，運(yùn)用DirectoryUtil 以及Path 這兩種組件對(duì)下載文件的文件名和路徑進(jìn)行設(shè)定，使用Dio().download()方法對(duì)目的URL 的文件進(jìn)行下載，最后用fluttertoast 插件以及showDialog 方法將下載過(guò)程通過(guò)彈出對(duì)話(huà)框的方式進(jìn)行提示。

3.3 Model數(shù)據(jù)模型和Provide狀態(tài)管理

通過(guò)Dio 庫(kù)系統(tǒng)對(duì)請(qǐng)求服務(wù)器返回的Json 數(shù)據(jù)建立數(shù)據(jù)模型，將數(shù)據(jù)進(jìn)行模型化管理。首先建立如圖3 所示的部門(mén)數(shù)據(jù)模型，然后構(gòu)造Provide 類(lèi)對(duì)該模型進(jìn)行狀態(tài)管理，混入ChangeNotifier 可以不用管理聽(tīng)眾，而notifyListeners 可以通知聽(tīng)眾刷新，將Provide注入頂層后，便可實(shí)現(xiàn)各個(gè)頁(yè)面的數(shù)據(jù)處理和局部刷新。當(dāng)其他頁(yè)面對(duì)數(shù)據(jù)有增刪查改操作時(shí)，系統(tǒng)通過(guò)Provide 局部刷新通知該組件重新計(jì)算數(shù)據(jù)信息及長(zhǎng)度，然后傳遞參數(shù)，利用手冊(cè)顯示各元素詳細(xì)信息。在每次調(diào)用數(shù)據(jù)操作時(shí)，Provide 都會(huì)重新執(zhí)行，以改變當(dāng)前數(shù)據(jù)存儲(chǔ)狀態(tài)。

3.4 路由頁(yè)面跳轉(zhuǎn)

在Flutter 中路由通常由Navigator 組件管理，有靜態(tài)路由注冊(cè)和動(dòng)態(tài)路由注冊(cè)。動(dòng)態(tài)路由注冊(cè)自己生成頁(yè)面對(duì)象，可以傳遞自定義參數(shù)；也可利用PaperRouterBuilder 進(jìn)行自定義動(dòng)畫(huà)；而靜態(tài)路由不可以向下個(gè)頁(yè)面?zhèn)鬟f參數(shù)，所以本系統(tǒng)利用動(dòng)態(tài)路由進(jìn)行頁(yè)面跳轉(zhuǎn)以及手冊(cè)數(shù)據(jù)模型在頁(yè)面間數(shù)據(jù)傳輸。

4 后臺(tái)服務(wù)器的設(shè)計(jì)與實(shí)現(xiàn)

系統(tǒng)服務(wù)器基于Flask 框架設(shè)計(jì)開(kāi)發(fā)。Flask 是一個(gè)使用Python 編寫(xiě)的輕量級(jí)Web 應(yīng)用框架，其WSGI 工具箱采用Werkzeug，模板引擎則使用Jinja2。系統(tǒng)使用flask 藍(lán)本設(shè)置路由方法，對(duì)視圖函數(shù)進(jìn)行模塊化的處理，在APP 下的__init__.py文件中注冊(cè)了login、read、basicConfigrations、handbookInput、departmentConfigrations、rightConfigration、findНandbook 和manage六個(gè)藍(lán)圖。

數(shù)據(jù)庫(kù)采用MySQL 存儲(chǔ)數(shù)據(jù)，并通過(guò)調(diào)用SQL alchemy 對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作。

4.1 服務(wù)器的架構(gòu)模式

MVC（Model View Controller）一種將應(yīng)用程序的邏輯層和視圖層分離設(shè)計(jì), 并通過(guò)控制層連接的架構(gòu)模式[3]，包括了三個(gè)層：

Model（模型）應(yīng)用于程序中處理數(shù)據(jù)邏輯。主要負(fù)責(zé)數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存取。

View（視圖）負(fù)責(zé)處理應(yīng)用程序中數(shù)據(jù)的可視化，通常依據(jù)模型數(shù)據(jù)創(chuàng)建。

Controller（控制器）處理與用戶(hù)的交互部分，從視圖取數(shù)據(jù)，控制用戶(hù)輸入，并向模型發(fā)送數(shù)據(jù)。

三者的調(diào)用關(guān)系如圖3 所示。

4.2 通信方式

Flask 的基本模式是在程序中為URL 分配視圖，每當(dāng)用戶(hù)訪(fǎng)問(wèn)URL 時(shí)，系統(tǒng)將執(zhí)行該URL 對(duì)應(yīng)的視圖函數(shù)，獲取其返回值。前后端通過(guò)НTTP 通信協(xié)議實(shí)現(xiàn)數(shù)據(jù)交互，既方便傳遞響應(yīng)，又能夠傳輸文件；強(qiáng)大的兼容性為之后系統(tǒng)的升級(jí)和維護(hù)提供了便利；通信內(nèi)容層層加密，極大的保證了用戶(hù)的賬號(hào)安全和員工的信息安全。通信過(guò)程如圖4 所示，數(shù)據(jù)交換格式使用json。

5 結(jié)語(yǔ)

本文基于Flutter、Python Flask、MySQL 等技術(shù)提出了一個(gè)工作手冊(cè)數(shù)字化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)，給員工提供一個(gè)線(xiàn)上手冊(cè)查詢(xún)APP，易于攜帶、方便查詢(xún)，及時(shí)更新共享，從而提高機(jī)務(wù)人員的工作效率，有助于民航業(yè)進(jìn)一步實(shí)現(xiàn)現(xiàn)代化和數(shù)字化。該系統(tǒng)根據(jù)員工的職位分配相應(yīng)的權(quán)限，使其能夠及時(shí)準(zhǔn)確地掌握與工作內(nèi)容相關(guān)的信息，具有較強(qiáng)的實(shí)用意義。