基于Flutter 的“愛上西安”App 設(shè)計(jì)與實(shí)現(xiàn)

劉 琳

(西安工程大學(xué),陜西 西安 710000)

0 引言

2020 年,西安旅游業(yè)增加值占全省GDP 的8.8%,實(shí)現(xiàn)接待國內(nèi)外旅游者、旅游業(yè)總收入、旅游投資總額、旅游就業(yè)量比2015 年翻一番。但是目前缺乏對(duì)西安整體形象的宣傳,也沒有將景點(diǎn)與其他相關(guān)行業(yè)聯(lián)合起來宣傳。本文以谷歌開發(fā)的Flutter 跨平臺(tái)開源框架為技術(shù)基礎(chǔ),面向來西安的外籍游客構(gòu)建一個(gè)宣傳幫助類App,更方便地幫助外籍人士對(duì)西安有全方位、精確的了解,提升外籍人士在西安生活的便利度。

1 Flutter 技術(shù)介紹

Flutter 是Google 推出并開源的移動(dòng)應(yīng)用開發(fā)框架,主打跨平臺(tái)、高保真、高性能。開發(fā)者可以通過Dart 語言開發(fā)App,一套代碼同時(shí)運(yùn)行在iOS 和Android 平臺(tái)。Flutter 提供了豐富的組件、接口,開發(fā)者可以很快地為 Flutter 添加Native 擴(kuò)展。同時(shí),Flutter 還使用Native 引擎渲染視圖,這無疑為用戶提供了良好的體驗(yàn)。

Flutter 的高性能主要依靠兩點(diǎn)來保證,第一,Flutter 采用Dart 語言開發(fā)。同時(shí)Dart 是在即時(shí)編譯(JIT)模式下,速度與JavaScript 基本持平。但是Dart 支持AOT,當(dāng)以AOT 模式運(yùn)行時(shí),JavaScript 的速度就遠(yuǎn)遠(yuǎn)不及Dart。速度的提升對(duì)高幀率下的視圖數(shù)據(jù)計(jì)算幫助很大。第二,Flutter 使用自己的渲染引擎來繪制UI,布局?jǐn)?shù)據(jù)等由Dart 語言直接控制,所以在布局過程中不需要像RN 那樣要在JavaScript 和Native 之間通信,這在一些滑動(dòng)和拖動(dòng)的場景下具有明顯優(yōu)勢,因?yàn)樵诨瑒?dòng)和拖動(dòng)過程往往都會(huì)引起布局發(fā)生變化,所以JavaScript 需要和Native 之間不停地同步布局信息,這和在瀏覽器中要JavaScript頻繁操作DOM 所帶來的問題是相同的,都會(huì)帶來比較可觀的性能開銷[1]。

2 功能設(shè)計(jì)

“愛上西安”App 擁有客戶端和服務(wù)器端兩部分,App 應(yīng)用功能信息框架圖如圖1 所示,核心組成部分主要包括以下方面。

圖1 “愛上西安”手機(jī)軟件App 應(yīng)用功能信息框架

(1)個(gè)人中心:先注冊(cè)賬號(hào),成功后進(jìn)行賬號(hào)登錄,進(jìn)而展示App 頁面,收藏自己喜歡的內(nèi)容,并具有系統(tǒng)消息通知和咨詢求助功能。

(2)搜索:主要功能是搜索信息,分為模糊查詢、熱門查詢、熱門景點(diǎn)推薦。

(3)個(gè)性化設(shè)置:頁面主要包括版本的更新、消息的推送、引導(dǎo)界面、意見反饋以及軟件打分。

(4)四大主題界面:對(duì)應(yīng)于項(xiàng)目中的建設(shè)內(nèi)容。第一,愛生活。第二,愛工作。實(shí)現(xiàn)涉及外籍人士業(yè)務(wù)掌上辦理。利用外國人來華工作管理服務(wù)系統(tǒng)、外籍人員網(wǎng)上業(yè)務(wù)辦理系統(tǒng)和境外人員網(wǎng)上自助申報(bào)住宿登記系統(tǒng),實(shí)現(xiàn)外國人來華工作許可證辦理、在西安外國人簽證預(yù)約、境外人員住宿登記等業(yè)務(wù)手機(jī)申報(bào)。第三,愛文化。推出文化智慧行功能。著重對(duì)西安的主要文化地點(diǎn)、著名地標(biāo)、重點(diǎn)企業(yè)等進(jìn)行梳理。使用地圖定位SDK,通過GPS+基站定位的混合定位模式進(jìn)行定位,使用地理圍欄技術(shù),偵測圍欄觸發(fā)行為,自動(dòng)實(shí)現(xiàn)語音講解以及其他關(guān)聯(lián)功能,實(shí)時(shí)為用戶自動(dòng)語音播解。第四,愛交流。打造無障礙交流國際語言環(huán)境。利用智能機(jī)器翻譯,建立集語音、文字為一體的實(shí)時(shí)智能翻譯平臺(tái),涵蓋中英、中韓、中日、中俄4 個(gè)語言方向的互譯功能,翻譯準(zhǔn)確度達(dá)到97%。

3 使用的關(guān)鍵技術(shù)

該App 主要使用到的技術(shù)包括:

(1)微服務(wù)技術(shù),可以在“自己的程序”中運(yùn)行,并通過“輕量級(jí)設(shè)備與HTTP 型API 進(jìn)行溝通”,關(guān)鍵在于該服務(wù)可以在自己的程序中運(yùn)行。

(2)Flutter 技術(shù),是目前跨平臺(tái)開發(fā)中最好的方案,一套代碼可生成Android 和iOS 雙平臺(tái)的兩種應(yīng)用,減少了App 開發(fā)和維護(hù)的成本,同時(shí)Dart 語言強(qiáng)大的性能表現(xiàn)和豐富的特性,也使得跨平臺(tái)開發(fā)變得更加便利。

(3)大數(shù)據(jù)技術(shù)?！皭凵衔靼病盇pp 系統(tǒng)服務(wù)平臺(tái)業(yè)務(wù)和數(shù)據(jù)信息涉及多種類型,跨越多種維度,數(shù)據(jù)量非常龐大,并需要對(duì)其進(jìn)行快速的分析和挖掘,為外籍人士推送和提供精準(zhǔn)的信息。由此,大數(shù)據(jù)技術(shù)非常適用于其業(yè)務(wù)需求,包括大規(guī)模并行處理(MPP)數(shù)據(jù)庫、數(shù)據(jù)挖掘、分布式文件系統(tǒng)、分布式數(shù)據(jù)庫、互聯(lián)網(wǎng)和可擴(kuò)展的存儲(chǔ)系統(tǒng)[2]。

(4)J2EE 技術(shù)是一套針對(duì)企業(yè)級(jí)分布式應(yīng)用的計(jì)算環(huán)境,定義了動(dòng)態(tài)Web 頁面功能(Servlet 和JSP)、商業(yè)組件(EJB)、異步消息傳輸機(jī)制(JMS)、名稱和目錄定位服務(wù)(JNDI)、數(shù)據(jù)庫訪問(JDBC)、與子系統(tǒng)的連接器(JCA)和安全服務(wù)等。J2EE 為搭建具有可伸縮性、靈活性、易維護(hù)性的企業(yè)系統(tǒng)提供了良好的機(jī)制[3]。

4 結(jié)果展示

“愛上西安App”的主頁面如圖2 所示,主要展示了Scenery,Culture,Life,Work 四大板塊對(duì)應(yīng)景觀、文化、生活、工作以及最上方的西安地標(biāo)建設(shè)展示和下方的西安熱點(diǎn)新聞?wù)故?點(diǎn)擊Scenery 進(jìn)入景觀頁面展示西安的所有旅游景點(diǎn),點(diǎn)擊Culture 進(jìn)入文化展示頁面講述西安文化,點(diǎn)擊Life 進(jìn)入西安生活頁面了解西安有關(guān)政策和相關(guān)信息,點(diǎn)擊Work 進(jìn)入工作頁面為外籍游客提供業(yè)務(wù)掌上辦理功能。

圖2 App 主頁面

5 結(jié)語

隨著西安的快速發(fā)展,越來越多的外籍人士選擇來西安旅游生活,該App 針對(duì)在西安的外籍人群開展服務(wù),高針對(duì)性與高效性的特點(diǎn)為游客解決了語言不通、路線不熟的問題,全英文解決問題的同時(shí),也能夠幫助游客了解西安,為游客的旅游生活提供便利。