海洋預報移動客戶端軟件的設計與實現*
2021-06-07 06:20:40劉愛超錢程程于清溪
科技創新與應用 2021年14期
關鍵詞：用戶
於 樂，劉愛超，錢程程，于清溪，于 斐
（1.國家海洋局北海預報中心，山東 青島266061；2.國家海洋局北海信息中心，山東 青島266061；3.中國水產科學研究院黃海水產研究所，山東 青島266700）
據2020年4月30日發布的《2019年中國海洋災害公報》統計，各類海洋災害共造成直接經濟損失117.03億元。其中，風暴潮災害損失116.38億元；海浪災害損失0.34億元，死亡（含失蹤）22人。在如此大的環境下，國家和人民對海洋防災減災服務的需求日趨增長，而及時提供準確的海洋預警報數據是防災減災的重中之重。
據2020年4月發布的第45次《中國互聯網絡發展狀況統計報告》統計：截至2020年3月，我國手機網民規模達到8.97億，網民使用手機上報的比例為99.3%。
本著加強北海區海洋使用狀況監視、監測，提高海洋信息管理科學化、規范化水平的目的，為了各級環境預報部門能實時掌握海洋信息資源，就此設計一套基于iOS和Android系統、可擴展的綜合海洋信息化移動服務平臺。
1 國內研究現狀分析
近些年來，國內應用新的技術和工具，一直在探索開發海洋預報系統。2013年國家海洋環境預報中心自主研發了我國第一個全球范圍的大洋數值預報系統，預報時效為7天。由國家海洋環境預報中心牽頭，多單位共同承擔了海洋公益性科研專項“海洋預報綜合信息系統（MiFSIS）研究應用”。開展了海洋預報信息化方面的理論探索和技術攻關，研發了大規模、長時間的業務化應用的海洋預報綜合信息系統。國家海洋局南海預報中心從實際工作出發，開發了一套以.NET為平臺采用C#編程語言和Oracle數據庫，并結合了AJAX技術開發的產品，該系統拓展性強、任務分工明確、人機交互性高，是一套可以提高工作效率和預報質量的海洋預報系統。
海洋預報系統在海洋模式分辨率和復雜性等方面都在不斷改善，并采用更準確的數據同化方案，提供近實時的全球海洋預報產品，但準確、及時的海洋預報產品目前還停留在電腦屏幕上，海洋預報移動客戶端（APP）少之又少，涉海企業、漁民、游客等大眾想要隨時隨地查詢海洋預警報信息是十分不方便的，因此本文提出了海洋預報移動客戶端的設計方案，實現為智能移動用戶提供準確、及時的海區、漁場和沿海城市等海洋預報和海洋災害預警報信息。
2 系統設計與技術實現
本文設計的海洋預報移動客戶端分為數據服務端和手機客戶端展示查詢兩大部分，其中數據服務端在服務器端，完成數據的獲取、存儲、處理和發布。客戶端部署在移動客戶端上，支持Android和iOS操作系統，符合現在市面上絕大多數手機系統，可以通過掃碼或者在應用商城下載更新，完成數據的調用與展示。
2.1 架構選擇
首先，我們對于多種框架的開發成本、軟件兼容和拓展能力等方面的對比，如表1所示。
表1 軟件開發成本/后續維護成本
最終系統的前端架構選擇了uni-app框架，uni-app是DCloud出品的新一代跨端框架，是目前跨端數最多的框架之一，拓展能力強，封裝了H5+，支持nvue，一套代碼可以同時生成iOS、Android兩個版本，后期也只需要維護一套代碼，對前端開發人員比較友好，學習成本比較低；uni-app使用HBuilderX進行開發，HBuilderX對于vue語法等支持可以說是比較全面了。使用HBuilderX進行開發可以提高開發速度。同時我們選擇了三層架構（見圖1）的設計理念將整個業務支撐起來。三層結構并不是.NET的獨門設計，也不是單一應用在數據庫上的結構，它是一種可以適應較多應用的架構設計理念。我們使用三層結構的主要意義在于使項目結構更清楚，分工更明確，有利于后期的維護和升級。可以降低層與層之間的依賴，這說明將應用程序劃分層次，會帶來其執行速度上的一些損失。開發人員可以只關注整個結構中的某一層，從團隊開發效率角度上來講可以有效地提高團隊協作的默契。
2.2 開發環境
前臺：開發工具：HBuilderX前端開發工具。uni-app是開發框架之一，uni-app是使用Vue.js開發所有前端應用的框架，開發者使用一套代碼即可生成到多個平臺。
后臺：開發工具：Visual Studio 2015。Visual Studio是一套基于組件的軟件開發工具和其他技術，可用于構建功能強大、性能出眾的應用程序。
2.3 數據來源
海洋預報移動客戶端軟件數據源分為兩個部分。第一部分常規預報模塊：數據來源于北海預報中心的預報數據。常規預報數據每天根據設定的時間進行更新。警報等時效性較強的數據，隨時發布隨時更新。第二部分外部源預報模塊：臺風路徑數據來源于臺風數據庫，天氣預報、衛星云圖、天氣圖、雷達圖通過多源采集程序將數據采集入庫，再進行處理和展示。臺風數據時效性較強，檢測到新數據實時更新。其他數據會根據數據源及數據時效進行定時更新。
圖1 三層架構
2.4 后臺設計
手機app和后臺通過WebService進行數據交互。WebService通過web的方式向外界提供接口庫API，使得外部程序和應用能夠通過標準化的方法和結構進行友好調用，為跨平臺的數據交換和內部多業務的集成提供了通用機制（見圖2）。
用戶在使用過程中可以通過“聯系我們”功能將意見或建議進行反饋。用戶直接把留言內容填入圖3的輸入框內，另外需要填寫聯系人郵箱，以便于管理員進行信息回復，點擊發送之后，用戶的留言會通過后臺發送至管理員郵箱。為保證軟件運行的安全，系統對留言進行了字數限制，每個用戶每天最多可以發送5條留言。
圖2 數據交互
圖3 “聯系我們”功能
為了方便統計軟件的使用情況，針對用戶的下載量和功能模塊的訪問量進行統計（見圖4）。每次數據訪問都需要通過WebService服務，此數據就是通過對統計接口的被訪問次數而得出的數據。
2.5 功能模塊
2.5.1 啟動及歡迎界面模塊
應用啟動時第一次進入的是啟動頁，由uni-app的manifest.json文件進行啟動圖的配置，根據框架的不同版本上傳啟動圖的方式不同，安卓手機根據不同的手機分辨率配置不同尺寸的圖片，由于iOS平臺自定義storyboard啟動界面，iphone手機展示兩種模式的分辨率，使用Xcode生成啟動圖，壓縮上傳。@2x和@3x是適配不同分辨率的圖片，系統會自動根據設備dpi選擇。進入啟動頁的同時系統會判斷網絡是否暢通，如果在啟動應用的過程中網絡斷開或卡頓，頁面中會彈出網絡異常的彈窗，提示網絡未連接。如果服務器關閉，會提示服務器異常。
網絡正常的情況下，軟件會自動跳轉至歡迎頁面，歡迎頁面穿滿全屏，并添加“跳過并不再提示”功能，給用戶充分的選擇。軟件對歡迎頁圖片是否改變有監控，如果用戶選擇了不再提示歡迎頁，當后臺歡迎頁圖片出現更新時，歡迎頁圖片會自動顯示，讓用戶能在第一時間了解軟件做出的更新。如果軟件有更新，也會在第一時間提醒用戶更新。
2.5.2 地圖界面模塊
進入軟件后首先展示的是地圖界面（見圖5），由于uni-app框架對map的限制較多，這里使用的Html技術實現，使用
2.5.3 菜單界面模塊
由于地圖上所能展示的內容有限，所有的功能選項都在菜單頁展示，十個功能項均勻平鋪整個屏幕，相互之間上下左右的間隔距離相等（見圖6）。菜單頁有10大模塊，分別是：
（1）海區預報：展示渤海、黃海北部、中部未來3天的波高、波向、涌向。
（2）預警報：顯示最近一個月內發布的北海區海浪警報、風暴潮警報和海冰警報，以Tab的形式進行選項切換顯示不同警報目錄。
（3）城市預報：根據軟件定位（或人工選擇）自動展示所在城市（北海區沿海城市）未來3天的潮汐、浪高和水溫數據。
（4）天氣預報：根據軟件定位（或人工選擇）自動展示所在城市（北海區沿海城市）的實時天氣狀況和未來5天的天氣預報。
（5）趨勢預測：展示當前月份的海浪、風暴潮、海溫等要素的趨勢預測，月底時展示的是次月數據。
（6）天氣圖：展示日本和韓國發布的預報天氣圖，使用
（7）衛星云圖：展示中國氣象網發布的最近12小時的衛星云圖，展示策略同天氣圖。
圖4 訪問量統計
圖5 首頁地圖界面
圖6 菜單頁面
（8）雷達圖：展示中國氣象網發布的最近6小時的華北雷達拼圖，展示策略同天氣圖。
（9）臺風路徑：展示當前臺風（西太平洋）過程路徑，和多源預測路徑，也可根據年份和編號搜索臺風路徑。圖例是以表格
