B站粉絲計數器 | ESP32開發之旅-Arduino版

衆所周知，掌控板在創客教育中用的非常廣泛，它是一塊基於 ESP32 的學習開發板。大家對掌控板編程，用的比較多的都是圖形化編程的方式，比如 mPython、Mind+ 等。但是，既然掌控板是基於 ESP32 芯片的，所以我們也可以用 Arduino 軟件對其編程。所以，有時間的話，我準備給大家分享一系列用 Arduino 代碼對掌控板（ESP32）編程的教程：用 Arduino 玩轉掌控版(ESP32)系列

本期給大家帶來的是：B 粉計數器（B站粉絲計數器）

前言

如果大家有在玩一些自媒體平臺的話，比如微信公衆號、B站、知乎、抖音等，那麼相信大家對自己的粉絲數、閱讀數或者播放量等相關的數據會比較關注，但是每次手動去查看又比較麻煩。

那麼有沒有簡單一些的方法呢？在創客技術宅眼裏，萬物皆可自動化！

今天就以 B 站爲例，手把手教大家做一個桌面 B 站粉絲計數器！爲什麼是 B 站呢？~~因爲 B 站做起來最簡單啊……（哭……）~~

先來看一下效果，我用 Arduino 軟件分別將程序上傳至掌控板（ESP32）和 NodeMCU（ESP8266），看到的效果基本是一樣的。本來還想做個外殼的，無奈被疫情隔離在家，設備不多，只能做個簡易版了，大家將就看看吧。

納尼！粉絲數竟然那麼少！丟臉丟臉，還不趕緊三連支持一下嘍

~~幹啥啥不行，騙粉第一名！~~

下面開始正式教程。

獲取 B 站 API

首先用**谷歌瀏覽器（推薦）**打開 B 站個人主頁，如下圖所示，重點關注我圈出來的幾個地方，分別是：關注數、粉絲數、點贊數、播放分數，這幾個數據的含義，大家一看就明白了，就不解釋了。另外還要關注右下角的 UID，這是一串數字，在 B 站中就是你的唯一 ID，這個數字很重要，後面會用到。
然後在鍵盤上按下 F12 或者 Ctrl+Shift+I 進入瀏覽器調試模式，刷新一下 B 站個人主頁，然後就會在 Network（網絡）標籤頁下看到一堆返回的數據，從中我們可以看到數據請求的方法（比如 GET），以及對應的 Domain（網址域名）。這裏我們要重點關注幾行數據，那就是 Domain 爲 api.bilibili.com 的幾行，下圖中我已經圈出來了。
我們逐一點進去排查，切換到 Response 標籤頁，在這裏我們看到了 2 個熟悉的數據：following（102）和 follower（133），這不正是我們在 B 站個人主頁看到的我的關注數（102）和粉絲數（133）麼？
我們在切換到 Headers 標籤頁，看到請求的網址（Request URL）如下，請求方法爲 GET。

我們將這個網址複製出來觀察一下：

https://api.bilibili.com/x/relation/stat?vmid=224425204&jsonp=jsonp&callback=__jp4

其中有一段 vmid=224425204，這後面的數字，不正是我們前面提到的 UID 麼？後面的 jsonp、callback 應該是對應的一些回調函數，我們將這些刪除，只保留前面部分：

https://api.bilibili.com/x/relation/stat?vmid=224425204

並將它複製到瀏覽器地址欄去訪問一下，看到什麼了？是不是隻留下一堆最簡單的數據，裏面包含了我們的關注數與粉絲數？而且這對數據是 JSON 格式的。

我們將這些數據格式化一下，方便我們查看。這裏使用了 VS Code，或者你也可以使用網上其他的 JSON 在線格式化工具，這裏不展開了。

同樣的方法，我們去查一下播放數和獲贊數在哪裏可以查到。

相信你很快就找到了，如下圖所示，先找到數據位置：

再查看相應的 API 網址：

https://api.bilibili.com/x/space/upstat?mid=224425204&jsonp=jsonp&callback=__jp5

將末尾無關參數刪除後：

https://api.bilibili.com/x/space/upstat?mid=224425204

然後再將這個網址在瀏覽器中打開，我們就看到了熟悉的播放數（view：9047）和獲贊數（likes：57）。

在 VS Code 中將數據格式化，方便查看。

代碼編寫

聯網設置

要去獲取 B 站的數據，當然要聯網啦。我們在程序的最開頭，引入一堆聯網相關的頭文件。這裏有一個比較特殊的地方，就是我們同時引入了 ESP32 和 ESP8266 對應的頭文件，這樣在編譯程序的時候，就會根據所選擇的的開發板，自動編譯對應部分，而不會報錯，做到了一套程序兼容兩種開發板（ESP32 和 ESP8266）的目的。

#if defined(ESP32)
    #include <WiFi.h>
    #include <HTTPClient.h>
#elif defined(ESP8266)
    #include <ESP8266WiFi.h>
    #include <ESP8266HTTPClient.h>
#else
    #error "Please check your mode setting,it must be esp8266 or esp32."
#endif

#include <Wire.h>

// Wi-Fi
const char *ssid = "wifi_name";
const char *password = "wifi_password";

void setup()
{
    Serial.begin(115200);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED)
    {
        delay(500);
        Serial.print(".");
    }
    Serial.println("");
    Serial.println("WiFi connected");
}

void loop()
{
}

既然要聯網，就需要定義你的網絡名稱和密碼，對應修改就行：

const char *ssid = "wifi_name";
const char *password = "wifi_password";

上面連接 Wi-Fi 的程序，就不展開了，基本是標準寫法，在 WiFi 這個庫裏，找一下例程複製一下就行。

獲取粉絲數

連接上網絡之後，就可以去獲取粉絲數了，除了上面已經引入的頭文件 HTTPClient，這個庫文件可以用來獲取網站上的數據。我們還需要用到的 ArduinoJson 這個 JSON 解析庫，可以用來解析網站返回的 JSON 數據，並且初始化一個 JSON 解析對象 jsonBuffer。

ArduinoJson 目前比較流行的有兩個版本：V5 和 V6，V5 比較經典和穩定，V6 比較新。兩個版本使用起來稍有差異，博主這裏使用的是 V5 版本。

#include <ArduinoJson.h>

DynamicJsonBuffer jsonBuffer(256); // ArduinoJson V5

另外，我們還需要定義 API 的網址、以及初始化粉絲數，單獨拎出來是方便大家修改。注意，這裏我們網址的訪問方式爲 http，而不是 https，因爲 https 的話，代碼會複雜一些。

// bilibili api: follower, view, likes
String UID = "224425204";
String followerUrl = "http://api.bilibili.com/x/relation/stat?vmid=" + UID;   // 粉絲數

long follower = 0;   // 粉絲數

然後再寫一個獲取粉絲數的函數 getFollower(String url)，只要傳入對應的 API 網址，就能利用 HTTPClient 中的 GET 方法，獲取相應的數據，然後再用 ArduinoJson 庫進行解析。

void getFollower(String url)
{
    HTTPClient http;
    http.begin(url);

    int httpCode = http.GET();
    Serial.printf("[HTTP] GET... code: %d\n", httpCode);

    if (httpCode == 200)
    {
        Serial.println("Get OK");
        String resBuff = http.getString();

        // ---------- ArduinoJson V5 ----------
        JsonObject &root = jsonBuffer.parseObject(resBuff);
        if (!root.success())
        {
          Serial.println("parseObject() failed");
          return;
        }

        follower = root["data"]["follower"];
        Serial.print("Fans: ");
        Serial.println(follower);
    }
    else
    {
        Serial.printf("[HTTP] GET... failed, error: %d\n", httpCode);
    }

    http.end();
}

最後再在 setup() 中調用一下，看看效果：

void setup()
{
    // other setup codes ...
    getFollower(followerUrl);
}

打開 Arduino 串口監視器，返回數據正常，說明成功了。

獲取播放數與獲贊數

這個與獲取粉絲數的原理一樣，不再贅述，直接看代碼：

// bilibili api: follower, view, likes
String UID = "224425204";
String followerUrl = "http://api.bilibili.com/x/relation/stat?vmid=" + UID;   // 粉絲數
String viewAndLikesUrl = "http://api.bilibili.com/x/space/upstat?mid=" + UID; // 播放數、點贊數

long follower = 0;   // 粉絲數
long view = 0;   // 播放數
long likes = 0;   // 獲贊數

void setup()
{
    // other setup codes ...
    getFollower(followerUrl);
    getViewAndLikes(viewAndLikesUrl);
}

void getViewAndLikes(String url)
{
    HTTPClient http;
    http.begin(url);

    int httpCode = http.GET();
    Serial.printf("[HTTP] GET... code: %d\n", httpCode);

    if (httpCode == 200)
    {
        Serial.println("Get OK");
        String resBuff = http.getString();

        // ---------- ArduinoJson V5 ----------
        JsonObject &root = jsonBuffer.parseObject(resBuff);
        if (!root.success())
        {
          Serial.println("parseObject() failed");
          return;
        }

        likes = root["data"]["likes"];
        view = root["data"]["archive"]["view"];
        Serial.print("Likes: ");
        Serial.println(likes);
        Serial.print("View: ");
        Serial.println(view);
    }
    else
    {
        Serial.printf("[HTTP] GET... failed, error: %d\n", httpCode);
    }

    http.end();
}

打開 Arduino 串口監視器，返回數據正常，說明成功了。

OLED屏：數據顯示

獲取到數據之後，我們總不能一直在串口監視器裏面查看吧，所以我們利用一個 OLED 12864 屏幕，將數據顯示到屏幕上。代碼如下：

#include <U8g2lib.h>

// 1.3' OLED12864
U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);
// 0.96' OLED12864
//U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, U8X8_PIN_NONE);

void setup()
{
    // other setup codes ...
    u8g2.begin();
    u8g2.enableUTF8Print();
    u8g2.setFont(u8g2_font_wqy12_t_gb2312b);
    u8g2.setFontPosTop();
    u8g2.clearDisplay();
}

void loop()
{
    u8g2.firstPage();
    do
    {
        display(follower, likes, view);
    } while (u8g2.nextPage());
}

void display(long follower, long likes, long view)
{
    u8g2.clearDisplay();
    u8g2.setCursor(5, 2);
    u8g2.print("B站粉絲計數器");
    u8g2.setCursor(5, 20);
    u8g2.print("粉絲數：" + String(follower));
    u8g2.setCursor(5, 36);
    u8g2.print("獲贊數：" + String(likes));
    u8g2.setCursor(5, 52);
    u8g2.print("播放數：" + String(view));
}

這裏我們用到了 u8g2 庫，它是專門用來控制各種顯示屏的。在 setup() 中設置了相應的顯示參數，定義了一個顯示函數 display(long follower, long likes, long view)，可以同時傳入相應的數據，並顯示出來。然後在 loop() 中調用，看看顯示效果。

定時器：定時獲取數據

有了前面的步驟，我們已經可以正常獲取數據並且顯示數據了，但是你們可能會問：爲什麼前面調試時把獲取數據的函數放在 setup() 中呢？而不是 loop() 中呢？這樣每次程序開機只能讀取一次，豈不是太麻煩了？放在 loop() 不就可以不斷讀取並且更新了麼？

不是這樣的，如果我們放在 loop() 中，不做其他干預，不斷去讀取的話，就會由於訪問頻率太高，觸發 B 站的保護機制。不信你就不斷刷新 B 站的某個 API 地址試試，相信你一定會看到如下“該頁面無法訪問”的頁面。

所以呢，我們就需要定時器，隔一段時間去獲取一次數據，而且我們也不是大 V，數據變化不會很快，所以每隔 10 分鐘去獲取一次數據就綽綽有餘了。直接看代碼：

#include <Ticker.h>

Ticker timer;
int count = 0;
boolean flag = true;

void setup()
{
    // other setup codes ...
    timer.attach(600, timerCallback); // 每隔10min
}

void loop()
{
    while (flag)
    {
        if (count == 0)
        {
            // display data
            Serial.println("count = 0, display data");
            u8g2.firstPage();
            do
            {
            display(follower, likes, view);
            } while (u8g2.nextPage());
            flag = false;
        }
        else if (count == 1)
        {
            // get follower
            Serial.println("count = 1, get follower");
            getFollower(followerUrl);
            flag = false;
        }
        else if (count == 2)
        {
            // get view and likes
            Serial.println("count = 2, get view and likes");
            getViewAndLikes(viewAndLikesUrl);
            flag = false;
        }
    }
}

void timerCallback()
{
    count++;
    if (count == 3)
    {
        count = 0;
    }
    flag = true;
}

我們使用了 ESP32 和 ESP8266 自帶的定時器庫 Ticker。設置一個 count 變量，根據 count = 0、1、2 分別做不通的工作：顯示屏刷新數據、讀取粉絲數、讀取播放數和獲贊數。用 flag 變量去標記是否執行相應的功能。這兩個參數在定時器回調函數 timerCallback() 每隔 10 分鐘就會改變一次，然後就會在 loop() 中觸發相應的功能。

至此，B站粉絲計數器就製作完成了，最終效果，大家可以在文章開頭看一看。

附：掌控板 mPython 圖形化程序

同樣的功能，用圖形化編程，代碼如下：

B站粉絲計數器 | ESP32開發之旅-Arduino版

前言

獲取 B 站 API

代碼編寫

聯網設置

獲取粉絲數

獲取播放數與獲贊數

OLED屏：數據顯示

定時器：定時獲取數據

附：掌控板 mPython 圖形化程序

ESP32彩屏顯示入門（二）：顏色設置與文本顯示 | ESP32學習之旅-Arduino版

WebServer應用示例2：Siri語音識別讀取傳感器數據 | ESP32開發之旅-Arduino版

手把手教你製作ESP8266物聯網創意點陣時鐘，女朋友看了都想要！

ESP32彩屏顯示入門：我要五彩斑斕的黑，還有五光十色的白 | ESP32開發之旅-Arduino版

ESP32概述與Arduino軟件準備 | ESP32開發之旅-Arduino版

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結