用C#+Selenium+ChromeDriver 生成我的咕咚跑步路線地圖

先上結果：之前在公司業務中用過java+Selenium+ChromeDriver ，使用起來非常順手，可以完美模擬真實的用戶瀏覽行為。最近休息的時候想用C#也試一下，於是有了本文。實現原理一樣，只是由java換成了C#。（ps:個人感覺就業務開發代碼來說，熟悉之後兩種語言可以無縫切換。）事 ...

先上結果：

　　之前在公司業務中用過java+Selenium+ChromeDriver ，使用起來非常順手，可以完美模擬真實的用戶瀏覽行為。最近休息的時候想用C#也試一下，於是有了本文。

　　實現原理一樣，只是由java換成了C#。（ps:個人感覺就業務開發代碼來說，熟悉之後兩種語言可以無縫切換。）

　　事先聲明，代碼中會採集用戶登錄咕咚網站之後的個人數據介面，如果此行為損害了咕咚網站的利益，請聯繫我刪除或修改本文（我對採集行為一直本著每一次調用之後sleep的原則，畢竟不是為了把人家的網站搞死）。文中使用的數據是我自己的跑步數據，不涉及到其他用戶的數據。

　　項目結構：為了方便跑友使用，用的winform程式，附nuget包

以下是form1.cs的代碼，刪除了部分提示的 MessageBox.Show()，從產品角度來講，應該添加loading提示和進度條，這裡就只放代碼了。需要安裝最新的chrome瀏覽器+代碼中使用的chromedriver是 v2.9.248315

  1 using Newtonsoft.Json;
  2 using OpenQA.Selenium;
  3 using OpenQA.Selenium.Chrome;
  4 using System;
  5 using System.Collections.Generic;
  6 using System.ComponentModel;
  7 using System.Data;
  8 using System.Drawing;
  9 using System.IO;
 10 using System.Linq;
 11 using System.Net;
 12 using System.Text;
 13 using System.Threading;
 14 using System.Threading.Tasks;
 15 using System.Windows.Forms;
 16 
 17 namespace GuDongLine
 18 {
 19 public partial class Form1 : Form
 20 {
 21 public Form1()
 22 {
 23 
 24 InitializeComponent();
 25 label2.Text = "請根據提示進行操作，本產品需要最新版本Chrome瀏覽器支持，網路良好的情況下運行，內部交流，不作為商業軟體，如有侵權請掃中間微信二維碼聯繫我。祝各位跑友生活愉快，身體健康，happy PB";
 26 }
 27 delegate void ChangeInvoke(int num);
 28 public int Fun1;
 29 private void button1_Click(object sender, EventArgs e)
 30 {
 31 try
 32 {
 33 Thread thread = new Thread(go);
 34 thread.Start();
 35 
 36 }
 37 catch (Exception)
 38 {
 39 MessageBox.Show("操作異常，請重新打開，或聯繫我");
 40 }
 41 
 42 }
 43 private void ChangeNum()
 44 {
 45 MessageBox.Show("正在運行請等待！運行完畢後會有提示！");
 46 }
 47 public void go()
 48 {
 49 if (MessageBox.Show("下麵請登錄咕咚，本軟體只會向咕咚官網發送和接受數據，如果發現軟體向其他網址發送數據，說明本軟體被修改，可能有病毒", "登錄咕咚賬號", MessageBoxButtons.OKCancel).Equals(DialogResult.OK))
 50 {
 51 ChromeOptions options = new ChromeOptions();
 52 options.AddArguments("--test-type", "--ignore-certificate-errors");
 53 IWebDriver driver = new ChromeDriver(System.Environment.CurrentDirectory, options);
 54 driver.Url = "http://www.codoon.com/home";
 55 Thread.Sleep(10000);
 56 
 57 driver.Navigate().GoToUrl("http://www.codoon.com/gps_sports/my_routes");
 58 
 59 
 60 Thread.Sleep(5000);
 61 int runCount = int.Parse(driver.FindElement(By.Id("current_index")).Text) / 3;
 62 for (int i = 0; i < runCount + 5000; i++)
 63 {
 64 try
 65 {
 66 driver.FindElement(By.ClassName("more_data")).Click();
 67 Thread.Sleep(800);
 68 }
 69 catch (Exception)
 70 {
 71 if (i > runCount + 100)
 72 {
 73 break;
 74 }
 75 
 76 }
 77 }
 78 Thread thread2 = new Thread(ChangeNum);
 79 thread2.Start();
 80 string userId = driver.FindElement(By.ClassName("home_user_header")).GetAttribute("src").Substring(33, 36);
 81 string data = "";
 82 dynamic va = driver.FindElements(By.ClassName("detail_sports_content"));
 83 foreach (IWebElement iwe in va)
 84 {
 85 using (var client = new WebClient())
 86 {
 87 Thread.Sleep(200);
 88 var responseString = client.DownloadString("http://www.codoon.com/gps_sports/route?user_id=" + userId + "&route_id=" + iwe.FindElement(By.TagName("table")).GetAttribute("id") + "&need_next=1&_=1520349266435");
 89 
 90 
 91 var DynamicObject = JsonConvert.DeserializeObject<dynamic>(responseString);
 92 string ss = "";
 93 foreach (var s in DynamicObject.line)
 94 {
 95 ss += ((double)s[1] + 0.0062).ToString() + "," + ((double)s[0] + 0.00135).ToString() + ";";
 96 }
 97 ss = ss.Remove(ss.Length - 1);
 98 data += ss + "&";
 99 }
100 }
101 data = data.Remove(data.Length - 1);
102 driver.Close();
103 string html = @"<!DOCTYPE html><html lang='zh - CN\'>
104 <head>
105 
106 <meta charset = 'utf-8'>
107 
108 <meta http - equiv = 'X-UA-Compatible' content = 'IE=edge'>
109 
110 <meta name = 'viewport' content = 'width=device-width, initial-scale=1'>
111 
112 <title> my_all_run_lines </title>
113 
114 <link rel = 'stylesheet' href = 'http://cache.amap.com/lbs/static/main1119.css' />
115 </head>
116 <body>
117 <div id = 'container' class='container'></div>
118 <script src = 'http://webapi.amap.com/loca?key=6ac3f558819c2c4711ea0c0a37192137'></script>
119 <script src='http://a.amap.com/Loca/static/dist/jquery.min.js'></script>
120 <script>
121 
122 var map = Loca.create('container', {
123 key: '1e387d3db027b46a23600cf7f2ed7344',
124 mapStyle: 'amap://styles/grey',
125 features: ['bg', 'road'],
126 zoom: 10
127 });
128 
129 var layer = Loca.visualLayer({
130 container: map,
131 type: 'line',
132 shape: 'line',
133 });
134 
135 $.get('http://a.amap.com/Loca/static/mock/buslines.txt', function (data) {
136 data = '" + data + "';" + "" +
137 "" +
138 "" +
139 "" +
140 "" +
141 "" + @"var lines = data.split('&').map(function (item) {
142 return {
143 linePath: item.split(';').map(function(lnglat) {
144 return lnglat.split(',');
145 })
146 };
147 });
148 
149 layer.setData(lines, {
150 lnglat: 'linePath'
151 });
152 layer.setOptions({
153 style: {
154 opacity: 0.2,
155 lineWidth: 2,
156 stroke: '#b7eff7',
157 }
158 });
159 
160 layer.render();
161 })
162 
163 </script>
164 </body>
165 </html>";
166 
167 string path = System.Environment.CurrentDirectory + "\\map.html";
168 File.WriteAllText(path, html);
169 }
170 else
171 {
172 System.Environment.Exit(0);
173 }
174 }
175 
176 }
177 }
178 
179

　　說一下思路:

　　　　1.確定使用的語言和採集框架。

　　　　2.確定數據來源，從咕咚app還是咕咚網站，如果咕咚網站沒有提供介面，估計就得去研究app了。本文中耗費時間的一個點就在研究咕咚網站的請求數據的規則上了，原則來說，只要正常用戶能打開的網頁，無法擋住採集工具。

　　　　3.數據的展示：找了百度地圖和高德地圖的api介面，兩個也都分別試了一下，其實咕咚網本身是使用的谷歌的，但是谷歌的介面研究起來不太方便，最後從數據展示的效果上選擇了高德地圖，順便說一下，從咕咚採集的跑步數據其實是一組一組的經緯度坐標，而且是被閹割的經緯度，精確度不夠，所以地圖上顯示的時候會有偏差，隨著跑步距離的增長，數據量也比較大，以文中1700公裡的跑量，生成的展示html是2.42M ，我家裡的古董筆記本載入的時間比較長。

　　另：很久以前跟咕咚的客服打過電話，想要一個集成自己所有跑步路線的功能，貌似答應的很好，但是沒發現app中有此功能（本文的由來？），當然，如果提供這個功能，一下載入這麼多數據，對伺服器來說不太好，但是可以迂迴一下嘛，比如只生成一個月之前的？申請之後生成？個人感覺有許多解決辦法，而且也能做成一種營銷活動。

　　歡迎探討，歡迎指教，謝謝大家，希望每一個程式員身體健康。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　by：跑過16+17北馬的coder