我使用 Next.js 和 Azure Functions 构建了一个包含历史数据的高级 Dev.to 仪表板 📈

你有没有想过，看到自己的帖子浏览量不断上升，哪些帖子的阅读量最高？我知道我遇到过这种情况。

这就是我选择开发自己的 Dev.to 分析仪表板来显示过去 24 小时、7 天和 30 天内的浏览量、反应和关注者增加等历史数据的原因之一。

您可以在此处查看实时仪表板：https://devto-analytics.wallis.dev。您会注意到它的样式类似于 Dev.to。

令人难以置信的是，Dev.to 最近添加了自己的分析页面，并在每篇文章（编辑、管理旁边）都添加了一个“分析”选项。内置的仪表盘和我的仪表盘有一些区别。

为什么要构建分析仪表板？

我非常喜欢在 Dev.to 上发帖。最近我重写了我的整个网站，使用 Dev.to 作为内容管理系统 (CMS)，这样我就可以继续在这里发帖，同时使用我自己的网站作为规范 URL。

然而，我希望看到每篇帖子更深入的信息，比如在特定时间段内的浏览量、反响和粉丝增长情况。默认情况下，我没有任何数据可以计算增长量。

结果，我最终使用 Next.js、Tailwind CSS、Recharts、Dev.to API 和 Azure Functions 和 Cosmos DB 构建了自己的分析仪表板。

您可以在 GitHub 上查看代码。

我如何获取历史数据

如果您之前使用过 Dev.to API，您会注意到，目前您无法访问任何历史数据。这导致您很难了解某个帖子在特定时间段内（内置分析功能启用之前）的受欢迎程度。

为了记录我的历史数据，我创建了一个Azure 函数，用于将我使用 Dev.to API 收集的最新文章和关注者数据保存到Azure Cosmos 数据库中。保存文章和关注者数据的函数每小时运行一次。

此外，我还创建了几个 HTTP Azure 函数，以便可以访问数据。

如果您想知道，我完全处于 Azure 的免费层级内 - 因此记录我的历史数据不需要花费任何费用。

您可以在 GitHub 上查看 Azure Functions 实现。

 仪表板

仪表板由三页组成：

1. 主页/概览页- 基本上是我当前统计数据和定期浏览量/反应/评论/关注者增加情况的概览
2. 细分图表页面- 将概览页面中的统计数据细分的图表，以便我可以轻松查看信息，例如本周阅读最多的文章。
3. 摘要图表页面- 显示每小时和每天的浏览量/反应/关注者增加情况的图表

您可以在 GitHub 上查看仪表板实现。

主页/概览页

仪表盘的 UI 很大程度上借鉴了 Dev.to 的样式。我希望它看起来是 Dev.to 当前实现的扩展。主页的样式看起来像Dev.to 仪表盘页面的高级版本，其中包含您的常规统计概览（页面总浏览量、回复、评论）以及所有草稿和已发布文章的列表。

此外，克隆 Dev.to 并尝试使其仪表盘尽可能相似也很有趣。尝试在不同的标签页中切换仪表盘主页和 Dev.to 仪表盘吧！

在我的控制面板上，我添加了关注者和最后发布日期到概览统计信息中——因为我比“列表创建时间”和“可用积分”更关心它们。大多数概览统计信息还包含两条历史数据。例如，对于页面浏览量，我会显示过去 24 小时和过去 ​​7 天页面浏览量的总增长情况。

继续往下看，你会看到一个可排序的列表，其中包含我发布的帖子的常规统计数据（浏览量、回复和评论）。我还为每个帖子添加了 24 小时、7 天和 30 天的增幅数据。

细分图表页面

此页面显示浏览量、回应量和评论量增长的细分图表。其目的是向我展示在特定时间段内哪些帖子最受欢迎。

虽然它的样式基于 Dev.to，但与主页不同，我没有复制特定的 Dev.to 页面。

摘要图表页面

最后一页包含图表，详细展示了一段时间内浏览量、回复和评论的增长情况。通过这个页面，我可以将这些信息解读为粉丝数量的增长是停滞了，还是处于良好的增长水平。

我的仪表板和内置分析页面之间的区别

如果你读到这里，你可能会想知道我的仪表盘和内置的 Dev.to 分析仪表盘有什么区别。以下是我的观点，如果你有不同意见，请在评论中告诉我。

Dev.to 内置分析功能的优势：

1. Dev.to 可以访问更多历史数据，因此他们可以报告您的页面浏览量

   我有偏见，如果您认为还有更多，请告诉我。

我的仪表板做得更好的地方：

1. 将增量/历史数据更好地集成到主仪表盘屏幕。如果我的Dev.to 仪表盘能够显示每篇文章的每日、每周和每月增量，那就太好了。
2. 在概览统计中显示关注者和上次发帖日期——我不关心帖子或积分。此外，我希望显示我当前的发帖连续次数，而不是上次发帖后的时间。这能帮助我确保自己能够顺利获得16周的徽章。
3. 通过细分页面，您可以轻松了解我的浏览次数上升的原因。

技术细节

• Next.js——为仪表板提供支持。
  • 内置数据获取方法getStaticProps用于在构建时预加载文章和关注者数据。增量静态再生功能会重建页面，以最大程度地减少初始页面的过时程度。
  • useSWR页面加载后获取当前文章和关注者数据。
  • 结合getStaticProps和useSWR意味着仪表板加载速度很快，但始终显示最新的数据。
• Azure Functions和Azure Cosmos DB
  • 保存使用 Dev.to API 收集的历史数据。
  • 通过 HTTP 路由提供数据供 UI 使用。
• Tailwind CSS - 样式
• React-icons - 导航栏上的各种图标，例如问号和 GitHub 图标。
• Recharts——图表页面上使用的图表库
• TypeScript 项目引用
  • 在仪表板和 Azure Functions 代码库之间启用 TypeScript 接口和其他代码的共享。
  • common在GitHub仓库的目录中查看。
  • 有关 TypeScript 项目参考的更多信息，请阅读我的帖子。

未来的改进

我想在仪表板上添加一些功能：

• 在统计概览中计算并显示我的发布连续性（按周） - 应该有助于获得 16 周连续性徽章。
• 平均统计数据 - 例如平均页面浏览量或每天获得的关注者数量。
• 预测统计数据——例如，距离我达到 100,000 次页面浏览量的天数。
• 显示我是否已为帖子添加了规范 URL（以便它显示在我的网站上）并将其重新发布到其他网站（例如Hashnode和Medium）。

概括

在这篇文章中，我介绍了我的 Dev.to 分析仪表板，它可以帮助我了解我的统计数据随时间的变化并识别热门帖子。

你想自己做一个这样的仪表盘吗？对仪表盘有什么想法吗？请在评论区留言！

如果您想要分叉/克隆我的GitHub 存储库，那么我需要让文档变得更好一些😅——一旦设置好您的 Azure Functions/Cosmos DB，这就可以非常简单地完成。

PS 为什么没有密码保护？

我意识到发布此博客意味着任何偶然发现的人都可以访问我的私人帖子数据。我同意这样做，因为：

1. 我想将仪表板作为作品集展示出来
2. 我希望其他人能够复制/克隆它，以便他们可以看到自己的历史 Dev.to 数据
3. 我想不出隐藏它的理由。我理解为什么它默认是私密的，但就我而言，我很高兴别人能看到它。

请让我知道您对我的 Dev.to 分析仪表板的看法！

感谢阅读！