基于Flutter的“文旅大同”APP設計與開發

薄文彥，王秀慧，趙倩倩

（1.山西大同大學計算機與網絡工程學院，山西大同 037009；2.山西大同大學新聞與傳媒學院，山西大同 037009；3.北京郵電大學教育技術研究所，北京 100876）

隨著我國經濟的快速發展，人民生活水平的不斷提高，外出旅行逐漸成為人們的休閑方式。快節奏的生活使人們不再滿足于傳統旅行的低效率，人們希望在出發之前就能對旅游目的地的相關知識信息有一個全方位的了解。近年來，在移動互聯網的影響之下，在線旅游發展如火如荼，幾乎成為整個旅游行業的“時尚”標志。移動互聯網的飛躍式發展，給傳統旅游產業帶來了廣闊的空間。

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

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

1 開發技術

1.1 開發模式的選擇

目前比較成熟的APP 開發模式主要有原生態應用開發、Web應用開發和混合開發三種。

原生開發使用安卓或IOS 平臺所支持的開發工具和語言，并直接調用系統提供的SDK API。原生態應用開發具有獨到的優勢：（1）能夠直接調用系統提供的API，訪問系統的所有功能，包括讀取信息、GPS、攝像頭等。（2）速度快、性能高。（3）可以實現復雜動畫及繪制，整體用戶體驗好。但同時有著開發成本高、可移植性差的缺點。

Web 應用本質上是為移動瀏覽器設計的基于Web 技術的應用，它們是用Web 開發語言如H5、CSS3、JS開發的，基于瀏覽器運行在各種智能手機上。Web應用開發的優勢主要體現在跨平臺、支持的設備廣泛、開發成本較低等方面。但Web應用開發不能直接訪問硬件和存儲設備，因此用戶交互體驗較差。

混合應用結合了原生態應用開發和Web 應用開發兩種技術，兼具原生良好的用戶交互體驗和Web應用跨平臺低成本的優勢?！癗ative App 良好用戶交互體驗的優勢”和“Web App 跨平臺開發和低成本的優勢”。

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

1.2 跨平臺方案的選擇

Flutter 是Google 開源的移動跨平臺框架，可以同時運行在Android、IOS 和Fuchsia 等包含Dart 虛擬機的平臺上，并且性能無限接近原生。如圖1，Flutter框架主要由Framework 和Engine 層組成，基于Framework開發App最終會運行在Engine上。其中，Engine是Flutter提供的獨立虛擬機，正是由于它的存在Flutter程序才能運行在不同的平臺上，實現跨平臺運行的能力。

圖1 Flutter框架圖

Flutter使用Engine來繪制Widget，并且Dart代碼會通過AOT 編譯為平臺的原生代碼，實現與平臺的直接通信，不需要JS 引擎的橋接，也不需要原生平臺的Dalvik 虛擬機。同時，Flutter 的Widget 采用現代響應式框架來構建，而Widget是不可變的，僅支持一幀，并且每一幀上的內容不能直接更新，需要通過Widget的狀態來間接更新。在Flutter中，無狀態和有狀態Widget 的核心特性是相同的，視圖的每一幀Flutter 都會重新構建，通過State 對象Flutter 就可以跨幀存儲狀態數據并恢復它。

總的來說，Flutter是目前跨平臺開發中最好的方案，它以一套代碼即可生成Android 和IOS 平臺兩種應用，很大程度上減少了App 開發和維護的成本，同時Dart 語言強大的性能表現和豐富的特性，也使得跨平臺開發變得更加便利。同時Flutter 在未來還會延伸到Web 端和PC 端，以一套代碼構建多平臺應用程序，因此本系統選定Flutter作為跨平臺方案。

2 總體設計

2.1 設計思路

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

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

2.2 模塊劃分

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

（1）大同小記

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

（2）大同圈子

查看旅游攻略，借鑒其他游客的游記、動態了解旅游體驗，遇到問題進行求助，以及定制個性化旅游路線，為用戶提供良好的社交平臺。

①增強線上互動性，分享趣聞趣事，尋找最優攻略；

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

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

④繪制心愿單，當你瀏覽完大同攻略后，在大同心愿單編輯時間與地點，記錄你的大同行；

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

⑥個性化推送，數據分析，專為您的私人推送；

⑦求助，打消旅游顧慮，做好旅游前準備，瀏覽他人問題與回答或在旅游時通過求助版塊尋求幫助。

（3）大同志

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

①文化歷史

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

②特色旅游線路

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

（4）“我的”主頁

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

①時光打卡

因為一個故事、一道美食、一處風景而愛上一座城，這種情愫隨著時間的推移反而在你心中逐漸加深，每打卡一次，這種情愫就加深一次。時光打卡顯示用戶與這座城市的情緣或在這座城市的生活的天數，極具人文情懷。

②心愿單

在使用過程中，用戶將期待加入心愿單，在制定自己的旅游路線時，將自己期待串成一個個計劃，完成心愿單，真正實現用戶定制游。后端經過數據分析為用戶提供腦圖供用戶參考。

3 特色旅游路線推薦功能的實現

在APP端，用戶可以根據喜好程度、路線長短等因素對心愿單中的景點、美食等制定特色的旅游路線。

如圖3，用戶在心愿單頁選擇好路線推薦方式（包含按喜好度推薦，按路線長短推薦等），點擊制定路線，會將用戶Id、路線推薦方式作為參數向后端發起請求，后端在收到請求后，提取出用戶Id 和路線推薦方式，并根據用戶Id 從數據庫中獲取心愿單數據，然后根據路線推薦方式計算權值，最后利用最小生成樹算法生成路線，響應給Flutter端進行展示。

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

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

G={V,E}

（1）初始時令S={V0},T=V-S={其余頂點}，T 為頂點對應的距離值。

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

（2）從T 中選取一個與S 中頂點有關聯邊且權值最小的頂點W，加入S中。

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

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

4 結語

文旅大同APP 針對用戶在旅游過程中對大同文化、歷史的了解，提出一種以Flutter為開發平臺，實現將傳統文化旅游與移動互聯網交互手段相結合，創建更符合用戶了解大同文化歷史的“互聯網+文旅”類APP 的設計方法，該系統能夠提高用戶旅游質量，滿足用戶在旅游過程中對大同文化知識、社交等方面的需求，提升大同文化旅游的知名度，必定能夠大力推動大同的影響力與競爭力，讓大同這顆新星發出燦爛的光芒。