用C#+Selenium+ChromeDriver 生成我的咕咚跑步路線地圖
阿新 • • 發佈：2018-05-25
圖片 num element line text containe 分享 感覺 RR
先上結果：
之前 在公司業務中用過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 : Form20 { 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
用C#+Selenium+ChromeDriver 生成我的咕咚跑步路線地圖