[突發專案] 強化懶懶病良藥？｜自做方格子 iOS 小工具 - Flask、爬蟲，與 Widgy

Mercteria

發佈於庇蔭工坊

2023/12/14閱讀時間約 11 分鐘

文前碎碎唸

不久前，我曾經有寫過這篇[突發專案] 創作懶懶病良藥？｜試寫 Vocus 最後文章發布時間計數器，一個可以計算出距離自己最後發文時間，已經過了多久的小工具。

當時是希望藉著這個數據化呈現，來督促自己持續產出，不過自從完成了之後，我也同時開始思考，該如何讓這個小工具出現在更多、更顯眼的地方，又或是加上其他資訊，讓它成為一個展示成就，同時又能激勵的工具？

於是，我鍵盤上的手，再度動了起來。

加些什麼

仔細想想，除了上次專案中數據化的發文時間計數外，其他能夠增進自己持續寫作慾望的，大概也就是持續累積的文章數，以及追蹤數了吧？

這麼一說，好像也曾經看到不少影音創作者們，會在桌前擺設一個即時的訂閱數計數器，就算是作為裝飾也是頗為酷炫。

而我們雖然暫時不完硬體，但如果想辦法把這些資訊整合一下，以最簡便的方式做成一個小工具，放到日常使用的手機上，似乎也是個不錯的製作方向。

不如這次就來試著抓取這些資料吧！

尋找資料

決定好目標，接著就來看要從哪裡取得資訊囉。

其實這次要抓的資料並不難找，因為這些資訊目前都能直接從方格子的個人頁面上找到，不過為什麼我要特別強調『目前』呢？

因為不同於上次使用的 RSS Feed 分析，這次要使用爬蟲的方法來抓取所需的內容，而這種方法的最大缺點，就是只要網頁一改版，就有極大的機率會失去效用。

不過，在沒有直接取得方法的情況下，還是暫時這樣處理吧。

材料與摳頂

接著就是寫程式時間拉，這裡要用的同樣是老朋友 Python 為撰寫語言，而在套件部分主要會用到的，也是網頁爬蟲常見的老班底們，那就直接進入正題吧！

首先我們要透過『request』模組，用程式化的方式模擬向伺服器取得網頁的原始資料，接著使用『BeautifulSoup』來解析取回的內容，並且抓出所需的欄位數字，因此程式碼大致如下。

import requests
from bs4 import BeautifulSoup

# User ID
user = "USER_ID"

# Request Information From URL⁠
⁠r = requests.get("https://vocus.cc/user/"+user)
# Parse Page
soup = BeautifulSoup(r.text,"html.parser")

接著回到瀏覽器來，看看方格子的個人專頁，以 Google Chrome 為例，先按下鍵盤上的『F12』鍵叫出開發者工具。

這裡需要先找到要抓的資料，在網頁原始碼中的位置，而在這次專案所需要的內容，主要就是資訊列這牌所顯示的數字，因此只要用瀏覽器的元素選擇工具就能快速定位。

由這裡可以看到，我們所需要的幾個欄位，都是位於『unit』及『bold』這兩個 Class 的 DIV 容器中。

在接下來的程式中，我們需要使用『soup.select』來抓取『div.unit』與『div.bold』這兩個項目，而在程式中加了如下這行後，我們基本上就能把相關的欄位資訊抓出來囉。

result = soup.select("div.unit,div.bold")

以防萬一，先來在 Jupyter 中測試執行一下，看看抓到的是不是我們要的內容。

嗯，看來是沒什麼問題，這裡抓出來的『result』內容，是由 BeautifulSoup 物件所組成的列表格式，所以可以使用迴圈的方式，一個一個叫來另外處理。

在迴圈裡面，我們針對每個物件使用『.text』這個後綴叫出每個 Class 中所包含的文字，從預覽中可以看到成功分離出來的標題與統計數值。

接下來，就是要進行項目的過濾跟建立字典啦！

從叫出來的預覽可以看到，整個列表的規律大致是『空值->統計->項目名』三樣為一組。

因此這裡就以空值為分界，並在抓到個別名稱及數值時，分別進配對儲存，最後集合成一個字典形式，於是就得到如下的程式。

## For Final Information Pack
buf = {}

num = None # Value Count
tit = None # Item Title

## Loop Through Result
for res in result:
    # Get Text
    inf = res.text
    if not inf:
    # If is Empty than Reset Value
        num = None
        tit = None
    elif inf.isdigit():
    # If Value is Digit, than Save as Count
        num = inf
    else:
    # Else if Not Digit, than Save as Title
        tit = inf
    # If Both tit and num Have Value, than Save in Dict
    if tit and num:
        buf[tit] = num
    else:
        pass

最後把結果印出來看看吧！

看起來不錯，這樣基本資料取得作業就完成了，不過好戲還在後頭呢。

接下來就要把這隻爬蟲做些整合，這樣才能完成我們的大業（？）

後台準備

為了讓前面寫的這個工具能夠隨時存取，就必須為它建立一個 API 服務。

我這裡們使用的是『Flask』這個套件，來提供架設伺服器的基本框架，同時建立一個連線接口可以觸發前面寫的爬蟲，並把抓到的資訊轉換成 Json 格式回傳，基本的程式碼如下。

# Import Basic Package for Setting up Web Server
from flask import Flask, jsonify
from waitress import serve

## Init Flask APP
app = Flask(__name__)

## Return API
@app.route('/vocu')
def repl():
    # Set User ID
    user = "mercteria"
    # Function For Fetching Information Form Vocus
    res = chkvoc(user)
    # Return Result as Json
    return jsonify(res)

## Start Server
if __name__ == "__main__":
    print("Start Server")
    # Set Debug Mod Off
    app.debug = False
    # Use Waitress Serve for Production Hosting 
    serve(app, host="0.0.0.0", port=3000) # Set Port to 3000