第12组 团队Git现场编程实战

分工及贡献

组内有三人去考证了，只剩下6人

组员	分工	贡献比例
王永福	前后端，爬虫，博客主体	30%
孙承恺	建模，算法设计，统筹	18%
邱畅杰	爬虫	15%
徐祖豪	前端数据可视化	13%
张凌昕	前端数据可视化，部分博客	11%
丁枢桐	数据可视化，聚类算法	13%

GitHub提交日志

GitHub

程序运行截图

爬虫

服务器端

部分数据

程序运行环境

爬虫

• Anaconda 3
• Python 3.7
• 涉及的包比较多，这里不一一列出，稍后我会将Anaconda环境导出到environment.yml并上传至GitHub，大家可以去看

服务器端

• Python
• Flask
• Flask-CORS

前端页面

• 建议Chrome 76或以上，其他没试过

前端构建

• Node.js 10
• Yarn包管理器
• Vue-cli 3
• 其他依赖包在package.json中有，可以yarn install直接安装
• 另外需要可用的高德地图的Key

GUI界面

基础功能实现

数据爬取

根据题目要求，我们需要爬取相关数据，根据对题目的分析，以及对美团和大众点评、高德地图的前期调研，我们认为可以将前三个评测目标划为一组，数据一起爬取，因为它们需要的字段比较相似（可以见上面的数据截图）；第四个目标我们在美团上找不到数据，大众点评难以爬取，因此转向高德POI搜索爬取。

美团的数据主要从手机版网页爬取（PC版网页没有经纬度且需要计算token），使用Chrome Developer Tools模拟手机访问网页抓取数据进行分析，发现Cookie只需要设置ci和uuid即可爬取，其他仿照抓取到的请求设置。

爬取时需要注意美团反爬技术非常硬，需要不断更换IP和ID，否则没一会就会白给，早上我们已经白给好多次了。我们的爬虫理论上具备获取所有数据的能力，但由于疯狂白给，最后只获取了少量数据用于制作demo。

另外高德API虽然不反爬，但是API有调用配额限制，爬多了也会白给。建议多准备几个Key

数据处理

获取到数据后，需要对数据进行预处理以进行展示，对于不同的评测目标，采取不同的方法

测评出福州最受欢迎的商圈

将美团爬取到的数据按销量降序排列，按商圈聚类，然后根据全局排名，分阶梯对每一个商铺赋权，再将商圈内的商铺权值求和，排序，得到最受欢迎的商圈。

分别测评出福州人均消费50以下，50-100、100-200、200以上最佳（性价比最高）的前五家美食餐厅（参考评价与价格）

这个比较简单，直接按人均消费所属阶层聚类，组内排序，第一关键字评分降序，第二关键字人均价格升序。

测评出福州最佳美食聚集地

两条路：

1. 对每家商铺赋权并按经纬度聚类，生成聚类图，由于算法比较复杂且数据序列化困难，故Web端不采用此方法生成的数据，此方法生成的图可用clustering中的代码生成
2. 将原始数据提取经纬度直接在地图上打热力图。此方法较为简单，Web前端采用此方法。理论上虽有失偏颇，但是由于我们爬取的原始数据按销量和评分降序，因此爬到的都是排名靠前的，说是最佳美食聚集地应该也没什么问题吧(逃

测评出福州服饰类综合评分最高的商圈

从高德地图爬取的数据参照第一个评测目标相似的方法处理

数据可视化

主要采用了Vue框架来管理视图路由，AntV进行可视化展示，展示效果可见截图。地图部分采用了高德地图JS SDK

服务器端

理论上不需要这部分，但是没用网络感觉很low，为了高级一点，也为了可扩展性，用Flask加了个服务端，动态提供数据

UI

跟数据可视化一起做了，页面上的东西基本都是有交互的，饼图有Tooltip，点击下面的图例可以取消显示某一类，做到部分展示。地图可以旋转，改变俯仰角，热力图是3D的

关于功能的其他想法

高级可视化

可以在可视化上做一些炫酷或者高级的交互，比如说:

• 像SyncFusion的Essential JS 2 的可视化组件Chart的Drilldown的多级饼图
• 热力图交互，如点击弹出推荐列表
• 根据实时数据的动态视图，或类似延时摄影的视图变迁

数据分析

如果能爬到大量数据

• 多平台交叉验证
• 评论情感分析
• 时间序列分析

脑洞

做一整个推荐平台，同时收集用户数据

遇到的困难及解决方法

王永福

困难

1. 数据来源反爬机制过强
2. 数据可视化不熟练，前端不熟练，Python不熟练
3. 人少

解决方法

1. 找代理池，找开源项目
2. 捡起来学
3. 一人顶俩

丁枢桐

困难

1. 对网络爬虫相关的类库不熟悉，对于相关网站特别是反爬虫的网站难以获取有效信息
2. 对用web前端进行数据可视化的方法不熟悉，只能当场找模板现学

解决方法

1. 现场学习
2. 现场学习

张凌昕

困难

在这次现场编程中我主要负责的是前端这一块，在写饼图的时候，我刚刚开始不是很懂G2，并且在挑选饼图形式的时候，比较不知道挑选哪个比较好

解决方法

多看一些模板，并且有的模板上会给一些注释，让我更了解G2的一些使用方法，用起来更容易。在饼状图格式的挑选上，先是选了一个不是太好看的，后来又选了一个比较合适的。

徐祖豪

困难

1. 有几个组员要去考教资，现场编程只有六个人
2. 前端技术太久没复习，不太熟悉

解决方法

1. 好在提前知道有几个同学会缺席，所以事先分配了任务，进展还算顺利
2. 现场学习

孙承恺

困难

短时间的分析和设计很令人烦躁，api接口没开放增加工作量

解决方法

化繁为简

邱畅杰

困难

数据难以爬取，token算法未知

解决方法

对于美团爬取手机版页面，采用代理池
对于大众点评，放弃

马后炮

• 徐祖豪：如果自己能再早几天复习，准备充足一点，项目的进展会更顺利
• 孙承恺：如果这门课不是必修，那么我一定不会选
• 丁枢桐：如果之前我有系统地学习如何使用python进行网络爬虫，那么这次就会很快地为团队获取有效数据。而不会导致前面一直在为数据苦恼
• 丁枢桐：如果之前我有系统地学习web前端的开发，那么这次就可以写出更棒的UI界面
• 王永福：如果我没这么菜，这次可以完成得更好(如果这门课不是必修，那么我一定不会选)

• 邱畅杰：如果黑夜给了我黑色的眼睛,那么我将用它来寻找光明

  PSP表格

  PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
  Planning	计划	5	5
  Estimate	估计这个任务需要多少时间	5	5
  Development	开发	90	120
  Analysis	需求分析(包括学习新技术)	30	40
  Design Spec	生成设计文档	0	0
  Design Review	设计复审	0	0
  Coding Standard	代码规范(为开发制定合适的规范)	0	0
  Design	具体设计	30	50
  Coding	具体编码	30	30
  Code Review	代码复审	0	0
  Test	测试(自我测试,修改,提交修改)	0	0
  Reporting	报告	30	30
  Test Report	测试报告	0	0
  Size Measurement	计算工作量	0	0
  Postmortem & Process Improvement Plan	事后总结并提出过程改进计划	30	30
  	合计	125	155

  学习进度条

第N周	新增代码（行）	累计代码（行）	本周学习耗时（小时）	累计学习耗时（小时）	重要成长
1	407	407	15	15	学到了十三水的玩法，了解了原型设计工具的使用方法
2	230	637	14	29	制定了基本实现思想和前端窗体框架
3	1200	1837	20	49	实现基本交互逻辑
4	1045	2882	20	69	实现接口对接和后端处理
5	0	2882	5	74	对原型设计更加熟练以及学习了uml图的绘制
6	210	3092	8	8	重新复习了下爬虫