我扒了Bugly的資料,只是想出個報表

weixin_33797791發表於2017-04-20

版權宣告:

本賬號釋出文章均來自公眾號,承香墨影(cxmyDev),版權歸承香墨影所有。

未經允許,不得轉載。

一、前言

作為 Android 專案的負責人,被要求每週週報要出一份崩潰報表,沒辦法就只有做了。

本身覺得這種資料做成圖表肯定是比做成表格來的直觀,所以在第一週畫了兩個小時做一份圖表的報表出來之後,覺得這種重複的勞動力,還是交給程式碼來完成吧。

實際上,之前公司專案使用的是 umeng ,之後換成 Bugly 了,本身 umeng 是提供了公開的資料介面 ,需要企業認證一下就可以了。不過 Bugly 並沒有提供相關的公開介面,這個我已經找 Bugly 的客服諮詢過了。

既然已經從官方渠道拿不到資料介面,那麼我們只能考慮別的路子獲取資料了,接下來看看我的做這件事情的步驟,希望對大家有幫助,一些敏感的資訊,我就直接一筆帶過了,但是思路都分享出來了,如果你需要獲取其他的資料,不僅限於 Bugly ,也是有一定參考價值的。

二、準備工作

1、確定介面

已經決定好了要扒 Bugly 的資料了,那麼首先就需要了解到 Bugly 不同資料的介面分別是什麼,必要的引數是什麼。

確定資料介面,可以通過瀏覽器的開發者工具,中的 Network 中檢視到當前頁面做網路請求的時候,請求的介面和傳送的資料。我這裡使用的是 Chrome。

b-network.png

例如這裡就是一個崩潰分析裡,崩潰列表中的資料,並且資料是以 json 的形式來返回的。

既然拿到了介面,我們當然需要先嚐試看看是否可以在別的地方訪問,會不會有什麼限制。有一個快捷而有效的方式,可以直接從連結中複製出 curl 的命令,然後在 Terminal 中執行,如果能獲取到資料,說明介面OK。

b-curl.png

當你已經確定你需要的介面之後,你會發現它傳遞的資料非常的多,一些例如 appid、startDate、endDate 這種,非常一目瞭然的介面,可以直接猜到含義。但是也有一些我們看著沒有含義的引數,就需要從網頁中找到資料的來源了。

一般而言,這種資料從這幾個地方找,都會有所收穫:

  1. 網頁的元素內。
  2. 內嵌 js 中的一些常量字串。
  3. cookies
  4. Window 中一些全域性的變數內。

就 Bugly 的介面而言,其實看著介面傳遞的引數非常的多,但是嘗試逐一刪除後,就會發現只有兩個引數是有效的,分別可以在頁面的 meta 元素和 Cookies 中找到對應的引數,細節就不多說了。

這些資料都可以在開發者工具中找到。

2、選一個報表的庫

做資料分析,本來可以使用 Python 來做,Python 做爬蟲和資料分析都非常的有優勢。但是後來我覺得 JS 庫會比較炫酷一點,而且做成網頁,會比較容易分享,就找了一個 JS 的圖示庫:fusioncharts,這個庫用起來很簡單,而且每個圖示多有不同的圖表 Demo 都可以直接執行看效果,使用起來難度也不大,基本上看一下就明白了。

雖然 fusioncharts 是一個商業庫,但是隻要你的圖示不用於商業,就不會有問題。

Paste_Image.png

點選官網的圖表都可以看到 demo,並且可以根據需要修改資料,及時看到效果,所以學習成本並不高:

Paste_Image.png

官網 :www.fusioncharts.com

3、確定架構

雖然是個簡單的爬蟲加資料展示的工具,但是也需要先確定如何獲取資料,如何展示資料。

這裡選擇的就是直接使用 node 爬出必要的資料,儲存在本地,然後使用 fusioncharts 在一個 Html 網頁中展示之前儲存的資料內容的分析結果。

這樣其實是最簡單的,不用關心 js 的跨域問題,只是單純的抓資料,然後分析展示,讓抓資料和展示資料分離開。

三、Coding

既然前期工作已經準備好,後面就需要開始編碼了。

首先我將爬取資料的 js 和展示資料的 html 分開。

結構大概是這樣的:

Paste_Image.png

index.js 就是用於爬取的資料的入口 js ,只需要執行它就會將我們需要的資料全部爬取到 tmp 目錄下。

index.html 就是用於展示分析後的資料結果的,它將 tmp 中儲存的資料,分析完成之後,直接使用圖表的形式展示出來。

config.js 用於配置一些介面所需要的必要資料,這裡主要配置了前面提到的介面中需要用到的必要資料,以及不同 App 需要監聽的版本號和 appId 等,這裡就不展示了。

其實更便捷的做法是直接將必要資料也想辦法扒下來,這樣可以做到一鍵生成報表,但是實際上,我需要使用的頻度並不高,每週一次,從網頁裡獲取一下,修改 config 裡對應的配置就可以使用,所以怎麼簡單怎麼來。

這裡的場景,主要是三部分資料:全部版本的崩潰率、最近一個市場版本的崩潰率、最後一個市場版本crash前五列表,所以在 tmp 目錄下,可以看到每個 App 有三份資料。

最終執行完成之後,就可以在 index.html 中看到報表的資料了,手裡本來也沒有測試資料,這裡就不一一展示了。

四、結語

這種重複的工作,就讓我們交給程式碼來解決吧。

這裡再一次說明,會一門指令碼語言的重要性,實際上 Python、Js 都是非常好的語言。有時候需要一些批量處理的時候,這些指令碼語言可以幫我們節約很多時間,基本上算是一勞永逸。

最後,我想說,我只是想每週出個報表。希望 Bugly 不要修改介面讓我一直用下去。當然如果儘快提供公開的 API 就更好了。

公眾號二維碼.jpg

相關文章