Serverless
Substats:快速统计你在各个平台的关注者!
3/16/2020
·
190
·
profile photo
notion image
用 Substats 和 Shields.io 为你的个人主页定制动态数据小牌子 - 少数派
Matrix 是少数派的写作社区,我们主张分享真实的产品体验,有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章,展示来自用户的最真实的体验和观点。 文章代表作者个人观点,少数派仅对标题和排版略作修改。 如果你浏览过一些 GitHub 的开源项目,你一定见过很多 README 文档中都会出现的五颜六色、各式各样的「小牌子」。 最初,这些「小牌子」的主要作用是为了显示「某个 GitHub 项目」的「某种状态」,比如项目的编译是否成功、文档是否更新至最新、软件的下载数量有多少......不过,从原理的角度来说,这些「小牌子」都是通过我们给「牌子渲染服务器」提供一些数据后,服务器返回给我们一个 SVG 格式的图片来工作的。我们将返回的 SVG 图片嵌入到 GitHub 的 README 文档或其他网页里面,就完成了一个「小牌子」的制作。 因此,我们不仅可以将这些「小牌子」用在 GitHub 里,如果你拥有自己的「个人主页」、「博客」或其他展示个人资料的地方,只要你可以控制网页的 HTML,能自己向其中插入一些自定义代码,你就可以借助于「小牌子服务器」来自制一些好看又能实时更新的「个人资料展示牌」、「订阅地址标识牌」等等。 Shields.io 就是一个我们开头提到的「牌子渲染服务」。事实上,GitHub 上面大部分「小牌子」都是用 Shields.io 来渲染的。我们可以借助于 Shields.io 服务定制一些个性化的「小牌子」。一个最简单的例子就是:https://img.shields.io/badge/少数派-SpencerWoo-da282a ,这一请求可以渲染得到如下效果的小牌子。 可以发现,简单定制小牌子非常方便,最最基础的语法规则就是: https://img.shields.io/badge/{左半部分标签}-{右半部分标签}-{右半部分颜色} 另外,在 Shields.io 的官网 上面有非常方便的「小牌子生成器」,我们可以直接用它来构造一个「小牌子」,只需要按照下图的样子:填入左半边标签、填入右半边标签,再定义右半边的颜色,点击 Make Badge 即可生成。其中,右半边的颜色我们可以用官方提供的几种预设颜色名称(下方 Colors)或者我们自己提供十六进制颜色代码都可以。 我们按照上面的方法构造一个链接,就制作完成我们的小牌子啦!这样得到的链接是一个 SVG 图片链接,我们可以直接 用插入图片的语法规则加到我们的 Markdown 文本文件中或 HTML 里面。 事实上,我们前面生成的小牌子都是静态的小牌子:其中的文本内容是固定不变的,仅能用于做一个好看的标识。 而事实上,Shields.io 生成的小牌子完全支持动态数据显示,比如粉丝、关注者数量、RSS 订阅者数量......
在 上一篇文章 里面,我在开头用 Feedly 的 API 和 Shields.io 制作了显示我 RSS 订阅数量的 Badge。这个 Badge 不仅是实时更新、动态加载的,还能轻松嵌入各个网页里面。
但是,RSS 订阅服务不仅仅有 Feedly 一家,还有 Inoreader 和 NewsBlur 等等。单一个 Feedly 提供的数据并不能真正显示我们 RSS 链接的订阅人数,于是,我就准备用 Serverless 技术搭建一个「API 中转站」,提供多个服务商的订阅人数整合的工作。
其实,最初的 Substats 实际上叫做 RSS-stats,也就是集合多个 RSS 服务商提供的订阅人数数据得到的一个 API 服务。但是后来经过我一番思考,既然都是调用 API,那么为什么不把其他的平台和服务,比如微博粉丝、知乎、少数派、以及 GitHub 和 Twitter 的关注者等等,一起支持一下呢?💡 可行!于是 Substats 就这样诞生啦。(≧∇≦)ノ

相关链接:

功能特性

Substats 是一个非常方便易用的请求订阅者、粉丝、关注用户数量 API 服务。目前,Substats 平台支持了包括 Feedly、GitHub、Twitter、知乎和少数派在内的五个平台和网站,并使用 Serverless 技术部署到了 Cloudflare 的 CDN 上,全球部署,飞速响应。Substats 将复杂的原平台 API 请求进行了隐藏、简化和集成,让用 Substats 的你只需要关注两个参数:平台名称、用户名称,一波访问,即可得到对应的关注数量。
得益于强大的 Cloudflare 全球 CDN 网络,Substats 不仅部署方便、维护轻松,还有着极强的可拓展性、极快的访问速度和极小的请求时延。甚至在你懂得的地方,你都可以轻松访问到 Twitter 的粉丝数量!🥂

API Endpoint

Substats 的请求非常简单,基础 API Endpoint 位于:
https://api.spencerwoo.com/substats/
接下来,我们只需要关注前文提到的平台名 source 和用户名称(或 RSS 链接、用户 slug 等标识)queryKey 即可构造一个基本的请求。为了更好的和 Shields.io 整合,Substats 仅支持 GET 请求,并使用查询字符串(Query String)来添加请求参数。

基础请求

一个最基础的请求参数类似:
GET /?source={SOURCE}&queryKey={QUERY}
其中,我们只需要填入平台名称 {SOURCE} 和请求参数 {QUERY} 即可。

平台串联请求

我们可以用下面的语法构建单个请求 query 并列请求多个平台的 API,只需要将平台之间用 | 分隔即可:
GET /?source={SOURCE_1}|{SOURCE_2}|{SOURCE_3}&queryKey={QUERY}
其中,这一请求格式特别适合 RSS 订阅的请求,比如当我们想统计同一个 RSS 链接在 Feedly、Inoreader 以及 NewsBlur 三个平台的订阅者数量,即可使用这一语法进行 API 请求。(详见下文例子)

多个平台和用户名的串联请求

GET /?source={SOURCE}&queryKey={QUERY}&source={SOURCE}&queryKey={QUERY} ....
如果我们每个平台的请求参数(也就是用户名)不一样,没关系,我们也可以用上面的语法组织各个 [平台, 参数] 二元组,依次请求,得到最终数据。在这一过程中,平台、参数的顺序在请求和内部 API 处理的过程中是完全一致的。(你也就不必担心请求的错位。)

一些例子

将 Substats 和 Shields.io 配合起来,我们可以构造稳定可用的关注者数量实时显示 Badge,嵌入包括 GitHub README、博客文章等等网站的各个位置。我来举个栗子。🌰

单个请求

Substats 最初就是为了请求 RSS 订阅者数量,我们先来请求一波 Feedly 的订阅数量。我自己博客(也就是本博客)的 RSS 订阅链接是 https://blog.spencerwoo.com/feed.xml,那么,我们就可以用下面的 URL 构造请求:
GET /?source=feedly&queryKey=https://blog.spencerwoo.com/feed.xml
这一请求会返回如下的数据:
{
  "status": 200,
  "data": {
    "totalSubs": 14,
    "subsInEachSource": { "feedly": 14 },
    "failedSources": {}
  }
}
我们所需要的数据即位于:data.totalSubs。在 Shields.io 官网,我们即可借助 Dynamic Badge 构建一个自定义的 Badge:
  • data type 选择:json
  • label 填入:Feedly RSS Subscribes
  • data url 填入:https://api.spencerwoo.com/substats/?source=feedly&queryKey=https://blog.spencerwoo.com/feed.xml
  • query 填入:$.data.totalSubs
  • color 填入:2bb24c(Feedly 的强调色)
点击 Make badge,即可生成如下的 Feedly RSS 订阅 Badge:
https://img.shields.io/badge/dynamic/json?color=2bb24c&label=Feedly%20RSS%20Subscribes&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dfeedly%26queryKey%3Dhttps%3A%2F%2Fblog.spencerwoo.com%2Fposts%2Findex.xml
在这一请求链接的结尾,再手动添加上 Feedly 的 logo 请求参数 &logo=feedly,即可将 Badge 添加上图标:
https://img.shields.io/badge/dynamic/json?color=2bb24c&label=Feedly%20RSS%20Subscribes&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dfeedly%26queryKey%3Dhttps%3A%2F%2Fblog.spencerwoo.com%2Fposts%2Findex.xml&logo=feedly
另外,我们还可以指定生成超大 For The Badge 风格的 Badge,在上面请求末尾再手动添加参数 &style=for-the-badge 即可:
https://img.shields.io/badge/dynamic/json?color=2bb24c&label=Feedly%20RSS%20Subscribes&query=%24.data.totalSubs&url=https%3A%2F%2Fapi.spencerwoo.com%2Fsubstats%2F%3Fsource%3Dfeedly%26queryKey%3Dhttps%3A%2F%2Fblog.spencerwoo.com%2Fposts%2Findex.xml&logo=feedly&style=for-the-badge

多个平台串联请求

当然,我们可以用 | 串联多个请求,比如我同时请求 Feedly、Inoreader 中订阅我 RSS 链接的用户数量:
GET /?source=feedly|inoreader&queryKey=https://blog.spencerwoo.com/feed.xml
我们会得到如下数据(截至发文 Inoreader 的 API 尚未实现,我正在咨询 Inoreader 平台方是否提供 API 接口):
{
  "status": 200,
  "data": {
    "totalSubs": 14,
    "subsInEachSource": { "feedly": 14, "inoreader": 0 },
    "failedSources": {
      "inoreader": "Not implemented"
    }
  }
}

多平台多请求参数串联请求

当每个平台的请求参数(用户名)不一样时,我们可以串联多个请求参数并行请求,比如我希望统计「少数派」平台和「Twitter」平台的粉丝,但是我在这两个平台上面的用户名分别是 spencerwoo 和 realSpencerWoo,我们即可用下面的方法构造请求:
GET /?source=sspai&queryKey=spencerwoo&source=twitter&queryKey=realSpencerWoo
我们会得到如下数据:
{
  "status": 200,
  "data": {
    "totalSubs": 756,
    "subsInEachSource": { "sspai": 636, "twitter": 120 },
    "failedSources": {}
  }
}
这样,我们即可非常轻松的构造这样的三个 Badge:
notion image

小结

这些就是 Substats 的特别之处,Substats 不仅整合了原服务复杂的 API,还拥有方便的请求构建方法。与 Shields.io 配合,我们可以及其方便的构造自定义 Badge。虽然当前 Substats 支持的服务平台还比较少,但是整合其他服务 API 的方法还是相当方便的,欢迎同学们帮我来共同整合其他平台,一起将 Substats 发扬壮大 ( •̀ ω •́ )✧
最后,如果你觉得 Substats 非常棒,请不要吝啬你的 Star!你们的支持是我输出的最大动力 φ(* ̄0 ̄)