如果你對這個專案的起源感興趣，請參考：透過爬蟲讓 Airtable 管理你的 Medium 文章(上) — 遇到需求時的分析以及執行步驟

文章大綱：
一、分析 Medium 網頁元素
二、確認爬蟲能正確抓取目標文字
三、設計字數統計的邏輯
四、實測確認可完成文章字數統計
五、未來展望

一、分析 Medium 網頁元素

為了提供爬蟲一個抓取文章的邏輯，我們要先了解 Medium 的網頁元素

STEP 1：按下 F12，了解文章會放在哪一個元素裡面

STEP 2： 分析文章中哪些 html tag 需要抓取

依據 Medium 文章的排版種類，以下是我們需要做字數統計的 tag：

• <h1>：大標題
• <h2>：小標題
• <p>：一般文字(包含粗體、斜體、連結)
• <span>：被包在 Block 裡面的文字(會被 html 的 pre tag 包住)
• <li>：列表的文字
• <figcaption>：照片的補充文字說明

二、確認爬蟲能正確抓取目標文字

如果你想培養完整爬蟲的程式能力，可以參考我在 IT邦幫忙鐵人賽的文章，本篇文章只單純提供演算法

STEP 1：在知道哪些網頁元素需要抓取後，我們就來嘗試看看能否抓到我們所希望的文字資訊

async function countStoryWords (driver) {
    try {
        let wordsCount = 0
        let article_tag_p = await driver.findElements(By.xpath(`//article//p`));
        let article_tag_h1 = await driver.findElements(By.xpath(`//article//h1`));
        let article_tag_h2 = await driver.findElements(By.xpath(`//article//h2`));
        let article_tag_span = await driver.findElements(By.xpath(`//article//span`));
        let article_tag_figcaption = await driver.findElements(By.xpath(`//article//figcaption`));
        let article_tag_li = await driver.findElements(By.xpath(`//article//li`));

        for (var k = 0; k < article_tag_p.length; k++) {
            let article_text = await article_tag_p[k].getText()
            console.log(article_text)
        }
      ...
      } catch (e) {
        console.error('計算 Story words 失敗')
        console.error(e)
        return 0
    }
}

原始碼：countStoryWords.js（GitHub Gist）

STEP 2：透過 console.log 的回饋，我們可以發現有一些資訊是不需要抓取的

STEP 3：分析 html 的組成將多餘的資訊過濾

只要在 span tag 抓取文字的地方先判斷其 parent 的元素即可過濾

for (var k = 0; k < article_tag_span.length; k++) {
    // 要先過濾掉最上方作者資訊
    let parant_tag = await article_tag_span[k].findElement(By.xpath(`./..`)).getTagName();
    if (parant_tag != "div" && parant_tag != "span") {
        let article_text = await article_tag_span[k].getText()
        // console.log(article_text)
        // console.log(countWords(article_text))
        wordsCount = wordsCount + countWords(article_text)
    }
}

原始碼：filter_author.js（GitHub Gist）

三、設計字數統計的邏輯

STEP 1：文章抓下來的文字需要列入字數統計的有：中文、英文；其餘特殊字元不列入計算。

STEP 2：撰寫文字計算邏輯的 function

function countWords (str) {    
    // 先將特殊字元用空白取代掉
    str = str.replace(/[\u007F-\u00FE]/g, ' ');

    // 複製兩個，一個用來算中文字數，一個計算英文字數
    let str1 = str;
    let str2 = str;

    // 移除中文，單純計算英文
    str1 = str1.replace(/[^!-~\d\s]+/gi, ' ')

    // 移除英文單純計算中文
    str2 = str2.replace(/[!-~\d\s]+/gi, '')

    let matches1 = str1.match(/[\u00ff-\uffff]|\S+/g);
    let matches2 = str2.match(/[\u00ff-\uffff]|\S+/g);

    count1 = matches1 ? matches1.length : 0;
    count2 = matches2 ? matches2.length : 0;

    /// 回傳總和
    const total = (count1 + count2);
    return total
}

原始碼：countWords.js（GitHub Gist）

四、實測確認可完成文章字數統計

STEP 1：透過 console.log 印出列入計算的文字、計算出來的文字長度，確認是否與我們期望的相同

STEP 2：在 airtable 上面增加字數統計的爛位，將欄位的類型設定為number，確認匯入的資訊是否符合期望

五、未來展望

1. 目前字數統計的功能只能給尚未爬蟲過的文章使用，故未來會考慮增加 update 舊文章資訊的 function
2. 字數統計也許配合長條圖視覺話有更炫砲的效果，這塊也可以在考慮看看

完成的專案程式碼在這裡，歡迎有興趣的朋友自己動手玩玩看～

如果你對這個專案的起源感興趣，請參考上一篇：透過爬蟲讓 Airtable 管理你的 Medium 文章(上) — 遇到需求時的分析以及執行步驟

文章大綱：
一、完成 Airtable 的設定
二、安裝工具將指定 Medium 的部落格匯入 Airtable
三、驗收成果

如果你正在因為 Medium 文章太多不知道如何管理的話，這是一個很方便的工具，下面會完整說明使用這個工具的步驟

一、完成 Airtable 的設定

1. 請註冊或是登入airtable

2. 請使用我已經創建好的template，進去後按右上角的 Copy base

3. 選擇你要放 base 的位置(使用默認的即可)

4. 點擊剛剛創建的 base，確認欄位都有複製過來

5. 進入accout頁面產生 API key，產生後請將 key 妥善保存，之後程式會用到這個參數(AIRTABLE_API_KEYKEY)

6. 進入api頁面選擇剛剛新增的 base

7. 依據下圖步驟找到 base 的代碼，並將他紀錄起來，之後程式會用到這個參數(AIRTABLE_BASE)

二、安裝工具將指定 Medium 的部落格匯入 Airtable

開發所需要的前置環境設定我寫在這篇文章：工程師的開發環境大補帖：Node.js、NVM、git、yarn、VSCode

1. 從 github下載

git clone https://github.com/dean9703111/medium_to_airtable.git

2. 使用 VSCode 開啟資料夾，並點擊 TERMINAL 進入資料夾終端機

3. 安裝套件

yarn

4. 設定專案環境變數 將.env.exmaple複製一份到.env檔案(須自行新增)

變數說明：

• MEDIUM_PAGE：你要爬的 Medium 文章網址，你可以先用預設的值，確定程式能跑起來後再改成自己的網址
• SHOW_BROSWER：設定為 true 時會有瀏覽器跳出來，設定為 false 時則是讓爬蟲背景執行
• AIRTABLE_API_KEYKEY：在上面步驟申請到的 API key
• AIRTABLE_BASE：你目標要儲存 BASE 的代碼

5. 執行程式

yarn start

我們可以從 TERMINAL 看到程式執行的過程

結束後會顯示總共花費時間

三、驗收成果

去 Airtable 確認是否有正確匯入資料，此為範例

希望大家都成功將 Medium文章匯入 Airtable 惹~如果有任何問題歡迎在下方詢問，如果覺得這篇文章對你有幫助可以幫我按拍手給我鼓勵喔~

Side Project 緣起

我有一位每天寫部落格的朋友，他的部落格至今應該已經累積了500+以上的文章了，他與他的粉絲們遇到了一個問題：『文章太多了，找不到要找的文章。』

因為這個朋友主要的文章都放在 Medium 上面，為了要能更好的管理文章也開始使用 Airtable 這個表格管理工具，但因為文章的數量太大，單純靠手動去搬移及維護實在是不方便且容易有遺漏，所以就詢問我有什麼方法可以靠程式把 Medium 文章搬到 Airtable 裡面。

在與朋友細聊並且觀察他整理的 Airtable 後，我整理了下面幾點：

痛點分析

1. Medium只能以標題搜尋文章，但有時只記得文章的tag
2. 就算記得文章的類別，但同一個類別的文章太多要尋找舊文不易
3. 搜尋功能無法把有相同tag的文章列出來
4. 想要把把所有文章整理成表格方便自己/讀者查詢，但是光想就好累…

需求

1. 提供簡潔好操作表格讓讀者搜尋/過濾/連結到文章
2. 表格可以輕鬆維護，無需太多人工處理
3. 過去的舊文也能直接匯入表格

一、分析需要呈現的資訊及技術

使用 Airtable 呈現資料

1. 擁有比 Google sheet 更好的視覺美感，並且對使用者來說易用性極高
2. 資料的操作邏輯非常接近資料庫，官方提供的 api 也簡單好懂

使用 selenium 來爬蟲 Medium 的資訊

1. 我們會以 Medium 的 Publication 作為根目錄往下搜尋所有文章

ps.有很多方法可以抓到資訊，我只是選擇了自己比較熟悉的工具

二、技術實踐步驟

STEP 1 : 先確認爬蟲能否爬到想要的資訊，如果爬不到想要的資訊就萬事皆休

STEP 2 : 閱讀 Airtable api 文件，能否達到我們的需求(讀取/寫入/刪除)

STEP 3 : 在爬蟲能抓到資料、Airtable api 能使用後，嘗試將他們串接起來

STEP 4 : 透過爬不一樣的 Medium 部落格確認是否有 bug

STEP 5 : 確認工具可以正常使用後撰寫技術文件讓大家能夠理解並使用

執行過程中遇到的問題

1. 因為 Medium 有提供排版的功能，所以每個人的版型都略有不同，甚至有些人還是混合的版型，這在一開始造成了我漏抓一些文章
2. Airtable 的 api 文件簡單易懂，但是提供的功能只有CRUD的功能而已
3. 目前 Airtable 似乎還無法透過撰寫腳本來做 migration 之類的資料庫操作

三、程式執行步驟

下面我會簡單說明程式的執行演算邏輯，如果有興趣看原始碼的朋友可以來我的github觀看喔(如果可以順手按個星星就更好惹)

STEP 1 : 抓取線上 Airtable 儲存的資訊，我們會需要這些已知的資訊來協助我們判斷有哪些文章要新增到 Airtable ，或是 Airtable 上面有哪些資訊是要被刪除的

STEP 2 : 爬蟲進入使用者指定的 Medium publication 頁面，先抓取這個頁面下有多少個 feature page(在 Airtable 會以主分類顯示)

STEP 3 : 依序進入每個 feature page 將文章的標題、連結、發布時間抓起來

STEP 4 : 接著會將這些文章與線上 Airtable 的資訊比對，確認是否為要寫入的新文章，如果是新文章就抓出裡面的tags

STEP 5 : 先將 feature page(主分類)、medium tags 寫入各自的 table，因為文章資訊會需要關聯這兩個部分

STEP 6 : 將新文章寫入 table

STEP 7: 如果發現 Airtable 上的資訊已經不存在於 Medium 上則會刪除該紀錄

如果你對這個工具感興趣，請參考下一篇：透過爬蟲讓 Airtable 管理你的 Medium 文章(下) — 如何使用這個工具