現場編程

Notice

稍后將在GitHub發布README，並在此發布演示頁地址
已上傳，已發布
Demo

分工及貢獻

組內有三人去考證了，只剩下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界面

基礎功能實現

最終測評結果數據可見於Demo

數據爬取

根據題目要求，我們需要爬取相關數據，根據對題目的分析，以及對美團和大眾點評、高德地圖的前期調研，我們認為可以將前三個評測目標划為一組，數據一起爬取，因為它們需要的字段比較相似（可以見上面的數據截圖）；第四個目標我們在美團上找不到數據，大眾點評難以爬取，因此轉向高德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. 東街口
3. 東街口

而直接按數量打熱力圖的方法出來的圖，東街口附近卻不是很“熱”。我們發現東街口區域的商鋪評價都很高，因此被賦予了相當高的權，和也相當高。但是由於店鋪數量不是很多，因此在熱力圖上不是很熱。

基於我們的數據的不完整性，這里可能存在偏差。但我們還注意到，在其他排行榜中，東街口的權也相當高。我們檢查東街口的數據，發現爬到的數據中，屬東街口的商鋪評分確實都很高。但是實際情況是東街口兩級分化比較嚴重，還是確實東街口的商鋪質量較高，需要用較完整的數據來分析。但我詢問了一些福州的同學，他們告訴我東街口歷史比較悠久，老店比較多，所以評價比較高。這么看來東街口還是相當有底蘊的。

(這里本來應該有張圖，但是圖弄丟了，跑這個圖的代碼被改出了問題，修復后會補上)

遇到的困難及解決方法

王永福

困難

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	計划	0	0
· Estimate	· 估計這個任務需要多少時間	0	0
Development	開發	240	240
· Analysis	· 需求分析 (包括學習新技術)	30	30
· Design Spec	· 生成設計文檔	0	0
· Design Review	· 設計復審 (和同事審核設計文檔)	0	0
· Coding Standard	· 代碼規范 (為目前的開發制定合適的規范)	0	0
· Design	· 具體設計	30	30
· Coding	· 具體編碼	180	180
· Code Review	· 代碼復審	0	0
· Test	· 測試（自我測試，修改代碼，提交修改）	0	0
Reporting	報告	60	60
· Test Report	· 測試報告	0	0
· Size Measurement	· 計算工作量	10	10
· Postmortem & Process Improvement Plan	· 事后總結, 並提出過程改進計划	50	50
合計		300	300

學習進度條

第N周	新增代碼（行）	累計代碼（行）	本周學習耗時(小時)	累計學習耗時（小時）	重要成長
8	780	5460	8	70	學習了Android開發基礎；需求分析報告編寫
9	800	6260	14	84	學習了前端開發，基本數據可視化；學習Android開發