基于Flutter的“文旅大同”APP設(shè)計(jì)與開發(fā)

薄文彥，王秀慧，趙倩倩

（1.山西大同大學(xué)計(jì)算機(jī)與網(wǎng)絡(luò)工程學(xué)院，山西大同 037009；2.山西大同大學(xué)新聞與傳媒學(xué)院，山西大同 037009；3.北京郵電大學(xué)教育技術(shù)研究所，北京 100876）

隨著我國(guó)經(jīng)濟(jì)的快速發(fā)展，人民生活水平的不斷提高，外出旅行逐漸成為人們的休閑方式?？旃?jié)奏的生活使人們不再滿足于傳統(tǒng)旅行的低效率，人們希望在出發(fā)之前就能對(duì)旅游目的地的相關(guān)知識(shí)信息有一個(gè)全方位的了解。近年來(lái)，在移動(dòng)互聯(lián)網(wǎng)的影響之下，在線旅游發(fā)展如火如荼，幾乎成為整個(gè)旅游行業(yè)的“時(shí)尚”標(biāo)志。移動(dòng)互聯(lián)網(wǎng)的飛躍式發(fā)展，給傳統(tǒng)旅游產(chǎn)業(yè)帶來(lái)了廣闊的空間。

大同是中國(guó)首批24 個(gè)國(guó)家歷史文化名城之一，三代京華兩朝重鎮(zhèn)，悠久的歷史、多民族文化的融合，給大同留下了寶貴的旅游資源。大同的國(guó)家級(jí)文物保護(hù)單位就有30處，世界文化遺產(chǎn)云岡石窟、世界十大奇險(xiǎn)建筑懸空寺、遼代木構(gòu)建筑的海內(nèi)孤品華嚴(yán)寺、現(xiàn)存布局最完整的遼金寺院善化寺、體積為北京北海九龍壁4倍的大同九龍壁等，在這個(gè)隨處都能遇到珍貴文化遺產(chǎn)的古都，還有許多引人入勝的歷史故事，讓人處處感受到文化融合的余溫。

文旅大同APP 以滿足用戶需求為基礎(chǔ)，借助APP 講述大同故事，展示大同風(fēng)采，把“歷史”和“現(xiàn)代”結(jié)合，將自然風(fēng)光和藝術(shù)享受結(jié)合。通過(guò)介紹大同的風(fēng)景、美食、文化、歷史等將大同鋪開展現(xiàn)在人們的視野中；同時(shí)為游客提供一站式服務(wù)：查看攻略、將想去的風(fēng)景加入心愿單；遇到問(wèn)題求助、發(fā)游記動(dòng)態(tài)分享心情；旅游結(jié)束后形成心愿單海報(bào)分享朋友圈或好友。

1 開發(fā)技術(shù)

1.1 開發(fā)模式的選擇

目前比較成熟的APP 開發(fā)模式主要有原生態(tài)應(yīng)用開發(fā)、Web應(yīng)用開發(fā)和混合開發(fā)三種。

原生開發(fā)使用安卓或IOS 平臺(tái)所支持的開發(fā)工具和語(yǔ)言，并直接調(diào)用系統(tǒng)提供的SDK API。原生態(tài)應(yīng)用開發(fā)具有獨(dú)到的優(yōu)勢(shì)：（1）能夠直接調(diào)用系統(tǒng)提供的API，訪問(wèn)系統(tǒng)的所有功能，包括讀取信息、GPS、攝像頭等。（2）速度快、性能高。（3）可以實(shí)現(xiàn)復(fù)雜動(dòng)畫及繪制，整體用戶體驗(yàn)好。但同時(shí)有著開發(fā)成本高、可移植性差的缺點(diǎn)。

Web 應(yīng)用本質(zhì)上是為移動(dòng)瀏覽器設(shè)計(jì)的基于Web 技術(shù)的應(yīng)用，它們是用Web 開發(fā)語(yǔ)言如H5、CSS3、JS開發(fā)的，基于瀏覽器運(yùn)行在各種智能手機(jī)上。Web應(yīng)用開發(fā)的優(yōu)勢(shì)主要體現(xiàn)在跨平臺(tái)、支持的設(shè)備廣泛、開發(fā)成本較低等方面。但Web應(yīng)用開發(fā)不能直接訪問(wèn)硬件和存儲(chǔ)設(shè)備，因此用戶交互體驗(yàn)較差。

混合應(yīng)用結(jié)合了原生態(tài)應(yīng)用開發(fā)和Web 應(yīng)用開發(fā)兩種技術(shù)，兼具原生良好的用戶交互體驗(yàn)和Web應(yīng)用跨平臺(tái)低成本的優(yōu)勢(shì)?！癗ative App 良好用戶交互體驗(yàn)的優(yōu)勢(shì)”和“Web App 跨平臺(tái)開發(fā)和低成本的優(yōu)勢(shì)”。

“文旅大同”APP 作為一個(gè)主打文化旅游類型的APP，對(duì)于用戶體驗(yàn)、交互性能等有著較高的要求，因此選擇原生態(tài)的開發(fā)模式。對(duì)于開發(fā)成本的控制，選擇利用跨平臺(tái)方案來(lái)解決。

1.2 跨平臺(tái)方案的選擇

Flutter 是Google 開源的移動(dòng)跨平臺(tái)框架，可以同時(shí)運(yùn)行在Android、IOS 和Fuchsia 等包含Dart 虛擬機(jī)的平臺(tái)上，并且性能無(wú)限接近原生。如圖1，F(xiàn)lutter框架主要由Framework 和Engine 層組成，基于Framework開發(fā)App最終會(huì)運(yùn)行在Engine上。其中，Engine是Flutter提供的獨(dú)立虛擬機(jī)，正是由于它的存在Flutter程序才能運(yùn)行在不同的平臺(tái)上，實(shí)現(xiàn)跨平臺(tái)運(yùn)行的能力。

圖1 Flutter框架圖

Flutter使用Engine來(lái)繪制Widget，并且Dart代碼會(huì)通過(guò)AOT 編譯為平臺(tái)的原生代碼，實(shí)現(xiàn)與平臺(tái)的直接通信，不需要JS 引擎的橋接，也不需要原生平臺(tái)的Dalvik 虛擬機(jī)。同時(shí)，F(xiàn)lutter 的Widget 采用現(xiàn)代響應(yīng)式框架來(lái)構(gòu)建，而Widget是不可變的，僅支持一幀，并且每一幀上的內(nèi)容不能直接更新，需要通過(guò)Widget的狀態(tài)來(lái)間接更新。在Flutter中，無(wú)狀態(tài)和有狀態(tài)Widget 的核心特性是相同的，視圖的每一幀F(xiàn)lutter 都會(huì)重新構(gòu)建，通過(guò)State 對(duì)象Flutter 就可以跨幀存儲(chǔ)狀態(tài)數(shù)據(jù)并恢復(fù)它。

總的來(lái)說(shuō)，F(xiàn)lutter是目前跨平臺(tái)開發(fā)中最好的方案，它以一套代碼即可生成Android 和IOS 平臺(tái)兩種應(yīng)用，很大程度上減少了App 開發(fā)和維護(hù)的成本，同時(shí)Dart 語(yǔ)言強(qiáng)大的性能表現(xiàn)和豐富的特性，也使得跨平臺(tái)開發(fā)變得更加便利。同時(shí)Flutter 在未來(lái)還會(huì)延伸到Web 端和PC 端，以一套代碼構(gòu)建多平臺(tái)應(yīng)用程序，因此本系統(tǒng)選定Flutter作為跨平臺(tái)方案。

2 總體設(shè)計(jì)

2.1 設(shè)計(jì)思路

用戶登錄“文旅大同”APP 后，可以通過(guò)“大同志”模塊查看大同的風(fēng)景、美食、文化、歷史等，查詢大同特色旅游線路；通過(guò)“大同圈子”模塊查看旅游攻略，其他人的游記、動(dòng)態(tài)，遇到問(wèn)題求助，以及定制個(gè)性化旅游路線；在“大同小記”模塊中可以每日更新歷史故事，游記動(dòng)態(tài)，分享心情，旅游結(jié)束后形成心愿單海報(bào)分享到朋友圈或好友；在“我的”主頁(yè)模塊可以將想去的風(fēng)景加入心愿單，在旅途中遇到的美食、美景、故事發(fā)布在時(shí)光打卡中。文旅大同APP功能模塊如圖2。

圖2 文旅大同APP功能模塊圖

2.2 模塊劃分

文旅大同APP 共有大同小記、大同圈子、大同志、“我的”主頁(yè)四個(gè)模塊。

（1）大同小記

每日更新歷史故事、心情小記、天氣情況等，吸引用戶與保障用戶活躍度。用戶可以收藏，自動(dòng)生成海報(bào)并以海報(bào)的形式分享到朋友圈或好友。

（2）大同圈子

查看旅游攻略，借鑒其他游客的游記、動(dòng)態(tài)了解旅游體驗(yàn)，遇到問(wèn)題進(jìn)行求助，以及定制個(gè)性化旅游路線，為用戶提供良好的社交平臺(tái)。

①增強(qiáng)線上互動(dòng)性，分享趣聞趣事，尋找最優(yōu)攻略；

②標(biāo)簽話題，打上標(biāo)簽，在大同圈子分享你與大同的故事；

③描繪大同畫卷，大同古都，每一代生活在這里的人都有他們的回憶，把回憶拾起，讓所有用戶在線編輯反饋給App，核實(shí)后發(fā)送至那個(gè)畫卷；

④繪制心愿單，當(dāng)你瀏覽完大同攻略后，在大同心愿單編輯時(shí)間與地點(diǎn)，記錄你的大同行；

⑤自定義篩選，個(gè)性化的私人定制，條件篩選，專為您的私人推薦；

⑥個(gè)性化推送，數(shù)據(jù)分析，專為您的私人推送；

⑦求助，打消旅游顧慮，做好旅游前準(zhǔn)備，瀏覽他人問(wèn)題與回答或在旅游時(shí)通過(guò)求助版塊尋求幫助。

（3）大同志

介紹大同的歷史、文化、美食、美景，提供各種特色旅游線路。

①文化歷史

大同是中國(guó)首批24 個(gè)國(guó)家歷史文化名城之一，擁有濃厚的文化歷史底蘊(yùn)。歷史如神話傳說(shuō)，紅色歷史，非遺歷史等；文化如鮮卑文化、民俗文化、節(jié)氣文化、工藝文化等。這是歷史留給大同最寶貴的資源。保護(hù)和宣傳城市文化的最優(yōu)途徑就是發(fā)展它，弘揚(yáng)它。文旅大同APP 就是要挖掘城市文化基礎(chǔ)與歷史沉淀；掀起塵封的歷史，讓一代代傳承文化的人、保護(hù)文化的人擁有更廣闊的平臺(tái)。

②特色旅游線路

目前旅游APP 存在同質(zhì)化現(xiàn)象，文旅大同APP將根據(jù)用戶攻略上傳，依據(jù)數(shù)據(jù)分析，運(yùn)營(yíng)部不斷提供大同地方特色旅游的新路線，例如：大同古城墻線路旅游、大同紅色旅游路線、大同土林旅游路線等。路線由用戶攻略分享，市場(chǎng)部實(shí)地考察，項(xiàng)目部制定規(guī)劃。特色旅游線路，讓人們擁有更多選擇，更自由地制定個(gè)人專屬大同游。

（4）“我的”主頁(yè)

記錄在大同旅游行程中的各種故事、美食、美景，打卡每一個(gè)美好的時(shí)光。

①時(shí)光打卡

因?yàn)橐粋€(gè)故事、一道美食、一處風(fēng)景而愛上一座城，這種情愫隨著時(shí)間的推移反而在你心中逐漸加深，每打卡一次，這種情愫就加深一次。時(shí)光打卡顯示用戶與這座城市的情緣或在這座城市的生活的天數(shù)，極具人文情懷。

②心愿單

在使用過(guò)程中，用戶將期待加入心愿單，在制定自己的旅游路線時(shí)，將自己期待串成一個(gè)個(gè)計(jì)劃，完成心愿單，真正實(shí)現(xiàn)用戶定制游。后端經(jīng)過(guò)數(shù)據(jù)分析為用戶提供腦圖供用戶參考。

3 特色旅游路線推薦功能的實(shí)現(xiàn)

在APP端，用戶可以根據(jù)喜好程度、路線長(zhǎng)短等因素對(duì)心愿單中的景點(diǎn)、美食等制定特色的旅游路線。

如圖3，用戶在心愿單頁(yè)選擇好路線推薦方式（包含按喜好度推薦，按路線長(zhǎng)短推薦等），點(diǎn)擊制定路線，會(huì)將用戶Id、路線推薦方式作為參數(shù)向后端發(fā)起請(qǐng)求，后端在收到請(qǐng)求后，提取出用戶Id 和路線推薦方式，并根據(jù)用戶Id 從數(shù)據(jù)庫(kù)中獲取心愿單數(shù)據(jù)，然后根據(jù)路線推薦方式計(jì)算權(quán)值，最后利用最小生成樹算法生成路線，響應(yīng)給Flutter端進(jìn)行展示。

圖3 特色旅游路線推薦功能流程圖

路線生成采用Dijkstra算法，Dijkstra主要特點(diǎn)是從起始點(diǎn)開始，采用貪心算法的策略，每次遍歷到始點(diǎn)距離最近且未訪問(wèn)過(guò)的頂點(diǎn)的鄰接節(jié)點(diǎn)，直到擴(kuò)展到終點(diǎn)為止。其步驟如下：

G={V,E}

（1）初始時(shí)令S={V0},T=V-S={其余頂點(diǎn)}，T 為頂點(diǎn)對(duì)應(yīng)的距離值。

若存在，d(V0,Vi)為弧上的權(quán)值；若不存在，d(V0,Vi)為∞。其中，i=1，2，...，n。

（2）從T 中選取一個(gè)與S 中頂點(diǎn)有關(guān)聯(lián)邊且權(quán)值最小的頂點(diǎn)W，加入S中。

（3）對(duì)其余T中頂點(diǎn)的距離值進(jìn)行修改：若加進(jìn)W作中間頂點(diǎn)，從V0到Vi的距離值縮短，則修改此距離值。

（4）重復(fù)上述步驟2、3，直到S 中包含所有頂點(diǎn)，即W=Vi為止。

4 結(jié)語(yǔ)

文旅大同APP 針對(duì)用戶在旅游過(guò)程中對(duì)大同文化、歷史的了解，提出一種以Flutter為開發(fā)平臺(tái)，實(shí)現(xiàn)將傳統(tǒng)文化旅游與移動(dòng)互聯(lián)網(wǎng)交互手段相結(jié)合，創(chuàng)建更符合用戶了解大同文化歷史的“互聯(lián)網(wǎng)+文旅”類APP 的設(shè)計(jì)方法，該系統(tǒng)能夠提高用戶旅游質(zhì)量，滿足用戶在旅游過(guò)程中對(duì)大同文化知識(shí)、社交等方面的需求，提升大同文化旅游的知名度，必定能夠大力推動(dòng)大同的影響力與競(jìng)爭(zhēng)力，讓大同這顆新星發(fā)出燦爛的光芒。