如何抓取網路資源?

Web Scrape 入門

@JasonXDDD

劉冠林

- 前端工程師 ( Front-End Engineer)

- 其餘從事接案、設計美編...

- 工作: MyProGuide 主前端工程師

可以叫我 罐罐，或 XD，英文 JasonXD

@JasonXDDD

>/ Index

  1. Some interest sharing

  2. What is Web Scrape?

  3. How to use?

  4. Examples

有一天

欸欸罐罐，最近有一個競爭對手XXX出現了，
你可不可以去查查他們的資料?

誰啊? 而且我不確定能不能抓到他們的資料，

我又不是駭客...

你去試試看，最好是能抓到他們的資料，

或是產品、價格...的，

阿對還有OOO跟@@@網站也是。

好啦我試試看...
OS: 有沒有在聽我說話啊QQ

於是，今天我們就來談談Web Scrape吧XD

>/ What is Web Scrape?

廣義而言，網站上有我們想要的資源，透過手段將資料擷取、錄製並加以分析，產出我們所需的內容資料

俗稱 爬蟲、Spider

Search Engine Crawler:

大型網路搜尋引擎爬蟲，在網域內自動去爬取不同網站資料，EX: Google Spider

>/ 常見網站資料請求方式

  • 回傳HTML: 最傳統也最好做
  • Restful API: 有點頭痛
    • 要去解析API Request, Headers, Response Data
  • SPA: Very頭痛
    • 要去尋找要的資料是綁在頁面上or透過AJAX
    • 要能解決資料async問題
  • Pagination 多頁資料
    • 下一頁、頁數、滾動載入
       
  • Event Trigger 事件觸發資料
    • Click、Animation、hide tag
       
  • Complex Structure 複雜結構的資料
    • tag分層過多、data沒有規律性

>/ Other issues

挖靠! 要處理這麼多事情，我要怎麼辦??

必殺技:

等待載入完成之術

任何請求方式，最終網站一定會載入完成並呈獻給使用者，

因此，我們偵測最終的網頁資料即可

>/ Result

導入到Google Sheet，寫一個定期抓取的事件

>/ DLC: Other methods

在網站上插入一段程式碼，來擷取資料 ((駭客思維

那麼我應該可以把code插在自己的網站裡來抓資料

    一般人 >> 丟請求，拿資料來爬

專業人士 >> 駭入漏洞，插入後門(木馬)，自動蒐集資料

Q: 那些資料是我想要的?

A: 使用者裝置、瀏覽器、甚至是位置座標

Q: 該怎麼取得?

A: Browser BOM, navigator info

Q: 然後?

A: 彙整資料 => 分析 => Data Visualization

Q: 觸發事件?

A: 當使用者連到網站的任意連結

>/ Do something hack  ...done! 

>/ 然後蒐集的資料

>/ 資料視覺化

^ 地理位置   v 網址排行    v 熱門關鍵字搜尋   ^ 作業系統排行

可以很基礎自由的爬資料，

也可以很Hacker的方式來抓資料，

只要能達到目的都是個方法。

>/ 網路爬蟲

新前端聚  籌備!

預計，周六 (9/8) 會開第一次會議

 

無論你的程度為何

如果你對前端領域有興趣

或是想來一起聊天交友

聽聽有趣的故事或消息

歡迎你一同參與 XD

 

詳細情況請私訊我!!

Made with Slides.com