jQuery 引擎自動化測試工具 jQWebAuto

用了 Electron, Node.js, Swift, C++ 開發的自動化測試工具
自製 jQWebAuto v1.0 - jQuery Automation Tool(jQuery引擎) 歡迎下載
https://github.com/designplusplus/jQWebAuto_win (Windows 版下載)
https://github.com/designplusplus/jQWebAuto_mac (Mac OSX 版下載)
滑鼠行為模擬, 建立腳本, 自動化測試, 爬蟲, 資料分析, 白帽, 黑帽 . Do Anything You Want ~~

Chrome Console 應用 - 以 FB Fan Page Hot Analytics 臉書粉絲專頁熱度分析為例

隨著巨量時代到來，資料分析與探勘成為科技顯學，尤其透過數據分析可做到商業決策與精準行銷。作者寫了一個臉書粉絲專頁熱度分析工具，我想對於網路行銷領域的人或是粉絲專頁經營者都有幫助，所以公開這套報表小軟體讓大家使用。

先看這個軟體可以可以做到什麼？下圖為軟體輸出結果(字有點小，主要是輸出粉專文章id,粉專文章上稿時間,粉專文章讚數,粉專文章分享數,粉專文章留言數,粉專文章網址,粉專文章內容的報表)

下面有2個報表範例 A,B 可下載
A.正妹俱樂部 2016年 [pdf]粉絲互動資料183筆(依讚數排序)-點擊下載
B.谷阿莫 AmoGood 2016年 [pdf]粉絲互動資料32筆(依讚數排序)-點擊下載

由A,B報表可知，正妹俱樂部粉絲專頁今年度至今有183篇PO文，而正妹排名讚數最多的正妹是她；而谷阿莫粉絲專頁今年度至今有32篇PO文，讚數最多的影片是【#227】5分鐘看完2015創造生物的電影《怪物 》

透過報表我們可能可以分析出：
1.讚數最高文章排序
2.分享數最高文章排序
3.留言數最高文章排序
4.經營粉絲專頁熱門圖文撰寫模式
5.經營粉絲專頁發文速度(譬如一個月發文幾篇)
6.最有價值的文章挖掘
7.同業競爭粉絲專頁分析
8.最佳貼文時間評估

如何生成報表(本軟體功能為擷取本年度至今粉絲專頁互動資料)
1.請先到想要分析的粉絲專頁
2.打開 Console （網頁任意處點選滑鼠右鍵選檢查，再選console）輸入 v0.21程式碼(請點此)，別懷疑全部拷貝貼在 Console 再按 Enter 執行程式。會跳出工具面板，請點選啟動(關閉面板只要重整網頁即可)。(版本更新至0.21，若有再改版，工具面板最下方會顯示藍色版本更新連結)

3.擷取資料中請不要動畫面

4.擷取資料完畢會出現下載按鈕

5.請點選下載按鈕會下載報表，檔案格式為 .csv

★如果是在mac開啟.csv會用內建Numbers開啟

★如果要用Office開啟.csv請開新檔案從文字檔輸入資料

選擇『分隔符號』按下一步

選擇『逗點』按下一步

選擇『文字』按下一步

選擇『確定』

資料會倒入到excel


★FB分析不只可以做到文章分析，還可以挖掘粉絲專頁黃金TA(與粉絲專頁互動數最高的使用者)，作者寫出分析TA程式輸出如下圖(本範例目前不提供請見諒)：



透過粉絲互動數我們也可以辦一些活動給鐵粉們一些折扣或優惠，達到真正精準行銷。
相信各位對 Console 應用有一些興趣。

更多 Chrome Console 應用範例請參考 Chrome Console 應用實戰，用 jQuery 批量下載正妹圖

Chrome Console 應用實戰第二發，用 jQuery 取出外部 HTML 有價值資料，像取外部 JSON 與 XML 資料一樣簡單

此課題較為進階請耐心看完，有修正建議請多多指教～謝謝大家！

我們知道流行的資料交換格式就是 json 跟 xml，但是 html 裡面也有寶貴資料可以擷取，我們可以利用

$.post("你想解取資料的網址",function(raw){ // 回傳 raw 是 html 網頁資料, 不是 json 與 xml
  var jqHTML = $($.parseHTML(raw)); // 解析 html 並轉成 jQuery 物件
  var jqHTML.find("css selector").xxx; // 取得想要資料片段
})

來針對結構複雜的 html 網頁資料建立 jQuery 物件並用 css selector 找到我們要的指定資料。

★接觸此範例前建議先閱讀上一篇文章 Chrome Console 應用實戰，用 jQuery 批量下載正妹圖

我們正式進入主題 -
請先到作者朋友網站 http://facemood.grtimed.com/

開新視窗連結到 http://facemood.grtimed.com/?view=facemood&tid=1&page=1，請不要把首頁關掉，等下要切換回去
檢視面板找到 div class="xxx" data-f-text="(*ﾟ∀ﾟ*)"，我想要擷取此畫面所有顏文字字串

回到首頁 http://facemood.grtimed.com/ 的頁面動態載入 jQuery
(不了解請先看之前範例了解如何製作動態載入jQuery的標籤)

打開 Console 貼上下面程式

$.post("http://facemood.grtimed.com/?view=facemood&tid=1&page=1",function(raw){
 // 將載入 HTML 解析並轉化成jQuery物件，all_emoji儲存所有顏文字
 var html = $($.parseHTML(raw)),all_emoji=[];
 // 取得指定標籤顏文字
 var emoji = html.find("div[data-f-text]");
 // 將所有顏文字存到 all_emoji 陣列
 emoji.each(function(){all_emoji.push($.trim($(this).html()));});
 // 清空畫面，輸出 all_emoji 陣列轉字串資料
 document.write(all_emoji.join(","));
})

輸出結果如下，我在網站首頁讀取其它頁面資料並輸出

你是否有能力靠程式擷取網站所有顏文字呢？請自行練習tid=x&page=y，x,y為變數，遞迴函示跑資料。作者擷取資料成功範例，抓到近550筆顏文字，下方為擷取成果

Chrome Console 應用實戰，用 jQuery 批量下載正妹圖

jQuery 實在是好物不得不學啊～本範例只是拋磚引玉，希望能看見更多有趣的應用：）

1.我想下載正妹圖，請先到 google 圖片搜尋"正妹"兩個字(本範例用 Chrome 瀏覽器，需對jQuery有一定程度了解)

2.請點擊 jQuery 書籤應該會出現如下圖(前一個範例一定要看過喔！)

3.打開 console 輸入程式碼(可以全部程式碼複製貼上，但建議一行一行輸入console，可以比較清楚執行流程)

//選取指定要下載的圖片(本範例為google圖片搜尋)
var img = $("img[alt='「正妹」的圖片搜尋結果']");
//建立下載連結字串
var temp = "";
img.each(function(index){
 //有些圖片src還沒載入所以跳過
 if($(this).attr("src")!=undefined)
 temp+="<a href='"+$(this).attr("src")+"' download='girl-"+index+".jpg'></a>";
});
temp+="我愛正妹圖 by Angryplay.blogspot.tw";
//清空頁面並建立要下載連結的HTML
document.write(temp);
var a=document.getElementsByTagName("a");
for(var i=0,len=a.length;i<len;i++){
 //建立觸發事件
 var e=document.createEvent('MouseEvents');
 e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
 //觸發下載(chrome會跳出視窗請允許大量下載)
 a[i].dispatchEvent(e);
}

多看正妹有益身心健康：），想下載多一點圖片，請在正妹搜尋頁面把 scroll bar 一直往下拉載入多一點圖片

Chrome Bookmarks 書籤列做好用的 Plugins

Chrome 書籤列就是瀏覽器網址列下方水平的超連結按鈕工具條(如下圖應用程式,  jQuery, Closure Compiler...)，既然是超連結那我們可以拿來做些有趣的事。

1.請先在工具條上按滑鼠右鍵選 新增網頁。

2.我們要做外掛，(1)的地方就取 jQuery，(2)的地方塞入以下程式碼

javascript:(function(){(function(c,b){var a=document.createElement("script");a.type="text/javascript";a.readyState?a.onreadystatechange=function(){if("loaded"==a.readyState||"complete"==a.readyState)a.onreadystatechange=null,b()}:a.onload=function(){b()};a.src=c;document.getElementsByTagName("head")[0].appendChild(a)})("https://code.jquery.com/jquery-1.12.0.min.js",function(){alert("jquery loaded!")})})();

3.因為我加入的程式碼是動態載入 jQuery，所以我們來玩一下 console，請在網頁任意處點選滑鼠右鍵選 檢查 打開 console 面板。

4.請點選剛建立好的書籤按鈕 jQuery，你會發現會跳出 jQuery loaded! 警告視窗

5. 測試 $ 符號是否有變數存在，請在 console 打上 $ 字符再按 enter，會發現＄變數是函示物件，表式 jQuery 成功載入。

6. 改一下背景顏色請輸入

$("body").css("background","black");

再按下 enter，你會發現背景顏色都變成黑色的了。

7.結論就是我相信大家都是善心人士～哈

Blogger 也可以有免費資料庫永久無限量存取功能 - 非Cookie (Google Blogger API V3)

大部分人都喜歡用痞客邦、或自己架 Wordpress 來撰寫部落格，其實 Blogger 也是很好的選擇。它的優點是可以自訂或載入外部 css, html, javascript 都沒問題，SEO也幫你優化，幾乎你想要的功能與視覺都能呈現出來；但如果你是網站工程師且熟悉 Blogger，那你一定很了解它唯一缺憾，是沒有像資料庫一樣存取功能來讓網站開發更多互動功能。可能很多人不知道 Google 針對 Blogger 部分也開放 API，讓軟體開發者透過 Blogger API 與 Blogger 互動，做到在網站、手機、其他應用程式可以針對指定文章或網頁新增、修改、刪除等動作。如果你的感覺很敏銳，那你應該知道，我們是否可以透過此功能，在文章或網頁進行修改存取時，放入使用者資訊，變成隨時可以存取的資料庫。用 blogger 開發 Web APP 絕對辦得到～要跳槽嗎？～哈！

官方資源
★Blogger API 官方基礎指南
★Blogger API 官方範例的javascript客戶端程式開發指南
★Blogger API 查詢

官方資源有看沒有懂沒關係，照著作者步驟來做：(本網誌左上角login按鈕就是存取實作範例)
1.Google Developers Console建立新專案
2.啟用 Blogger API v3
3.申請 API 金鑰，應該長這樣 AIzaSxBCWs3ks1DccyRmhvomBjWNFj6ONgVQIV0 (範例碼)
4.申請 OAuth 用戶端 ID，應該長這樣 800215999663-b4n3loctoaetx7gtnavvm5m7io3rgh4a.apps.googleusercontent.com (範例碼)
5.新增 Blogger 網頁並進入編輯模式，請把網址列 blogID 跟 postID 記錄下來，blogID 應為 1243191245343241160(範例碼)，postID 應為 6160462135247944473(範例碼)。我們將針對此網頁進行程式資料存取，也就是我們的小型資料庫。
6.撰寫程式碼

  <!--增加一個應用程式授權按鈕-->
  <button id="authorize-button" style="visibility: hidden">Authorize</button>
  <script>
  
  //blogger api 小型資料庫存取實作
  var clientId = '800215999663-b4n3loctoaetx7gtnavvm5m7io3rgh4a.apps.googleusercontent.com';
  var apiKey = 'AIzaSxBCWs3ks1DccyRmhvomBjWNFj6ONgVQIV0';
  var scopes = 'https://www.googleapis.com/auth/blogger';
  var blogID = '1243191245343241160';
  var postID = '6160462135247944473';

  function handleClientLoad() {
    // 步驟2: 設定 API 金鑰
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }

  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }

  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    if (authResult && !authResult.error) {
      authorizeButton.style.visibility = 'hidden';
      makeApiCall();
    } else {
      authorizeButton.style.visibility = '';
      authorizeButton.onclick = handleAuthClick;
    }
  }

  function handleAuthClick(event) {
    // 步驟3: 通過授權以存取資料
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }

  function makeApiCall() {
    // 步驟4: 讀取 Google blogger API 並執行存取動作
    var request;
    gapi.client.load('blogger', 'v3', function() {
      request = gapi.client.blogger.pages.get({'blogId':blogID,'pageId':postID});
      // 執行讀取
      request.execute(function(response) {
          console.log(response);
          // 執行寫入
          var save_data = {user_name:"test",user_password:"test2"};
          save_data = JSON.stringify(save_data); //以JSON字串存入
          request = gapi.client.blogger.pages.update({'blogId':blogID,'pageId':postID,'content':save_data});
          request.execute(function(response) {
            console.log(response);
          });
      });
    });
  }


  </script>
  <!-- 步驟1: 讀取 JavaScript client library -->
  <script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>