基于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应用跨平台低成本的优势。“Native 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 的设计方法，该系统能够提高用户旅游质量，满足用户在旅游过程中对大同文化知识、社交等方面的需求，提升大同文化旅游的知名度，必定能够大力推动大同的影响力与竞争力，让大同这颗新星发出灿烂的光芒。