---
# System prepended metadata

title: 網頁爬蟲與資料視覺化
tags: [Python - Selenium教學]

---

# 網頁爬蟲與資料視覺化

###### tags: `Python - Selenium教學`

[TOC]

## 課程目標
* 掌握Python網頁爬蟲技術，能夠爬取並清理網頁資料。
* 學會使用Python將資料導入資料庫。
* 透過PHP+JS+MYSQL將爬回來的資料呈現於網頁上。

## OverView
![image](https://hackmd.io/_uploads/ByTTcGlx0.png)


### Target 1 掌握Python網頁爬蟲技術，能夠爬取並清理網頁資料

1. 爬蟲簡介
2. 爬蟲用途 (與搜尋引擎的關係)
3. Python安裝
4. 爬蟲相關套件安裝
5. 認識爬蟲套件與基礎語法 - BeautifulSoup4 
6. 說明BeautifulSoup4的缺點(無法爬取動態網頁，帶出Selenium)
7. 認識爬蟲套件與基礎語法 - Selenium

### Target 2 學會使用Python將資料導入資料庫
8. 下載XAMPP
9. Python連結DB
10. 將Selenium爬回來的資料放入DB


### Target 3 透過PHP+JS+MYSQL將爬回來的資料呈現於網頁上
11. 使用PHP連接DB，並封裝API回傳資料
12. EChart教學
13. 使用JS (EChart)，將API資料渲染

### 預計完成課堂數

* 第一堂課的簡報內容為 1.爬蟲簡介 ~ 5.認識爬蟲套件與基礎語法
* 第二堂課為了帶出Selenium的好處，由6.說明BeautifulSoup4的缺點 ~ 7.認識爬蟲套件與基礎語法 - Selenium (內容穿插lab)
* 第三堂課簡報為 8. 下載XAMPP ~ 10.將Selenium爬回來的資料放入DB
* 第四堂課簡報為 11. 使用PHP連接DB，並封裝API回傳資料 ~ 12. EChart教學(這邊將參考舊有Echart簡報教學，內容穿插lab)
* 第五堂課簡報為 13. 使用JS (EChart)，將API資料渲染

以上為樂觀排課，主要擔心 PHP + JS開始同學可能會手忙腳亂，畢竟他們的Python可能比較厲害~



### 需要架至公開網路的檔案
:::success
demo資料夾當中已包裹好能跑PHP與HTML的docker-compose與相關設定，直接架在實驗室電腦就可以了
:::
:::danger
注意 : 記得替換簡報中的IP(py_selenium_L2簡報第7頁)
:::
#### app/jsrender.html
使用JS渲染HTML元素的展示檔案-簡報中會讓同學體驗
#### app/normalrender.html
直接用HTML定義好元素內容


### 實作檔案
exam資料夾下的檔案皆為實作解答
例如 lab1.py 就等於實作1的解答，怕忘記故簡報也會標記檔名
![image](https://hackmd.io/_uploads/rkkupExgA.png)
