微信小程序 GitHub Trending Hub 的由来

小程序 GitHub Trending Hub 是一个以 Feed 流形式查看 GitHub Trending 仓库集合的工具，经过它能够及时查看最近更新的热门仓库。经过微信 WeChat 扫码体验。

为何要开发？

相信不少人会有这样的疑问，经过官方提供的 GitHub Trending 页面就能查看，为何还要开发一个小程序？细心的同窗可能会发现 GitHub Trending 上榜大体是按照当天新增的 Star 数来肯定的，Star 数会随着时间变更，意味着 Trending 榜单也是随时在变的。那么对于像我同样常常浏览 GitHub Trending 页面的人会存在一些不便的地方：

1. 每次访问 GitHub Trending 获取的新仓库数量相对少，那些比较热门的项目每每长期霸占 Trending 榜单，有时候今天看了，须要过几天再去看才能在上面发现一些新的有意思的项目

2. 对于那些短时间出如今 Trending 上的项目因为没有及时查看而丢失了

3. 不能按多语言过滤，关注多个编程语言的人仍是比较多的

这大概就是最开始的需求，但愿可以及时的追踪到 GitHub Trending 榜单的变化，造成历史信息方便查看更新。很天然就会想到用爬虫解决这个问题，当时尚未小程序，开发小程序是由于工做关系了解到 Serverless 相关的知识，同时微信小程序有对应的云开发方式，迫切但愿了解一下具体的应用场景。因此就有了开发这个小程序的想法。

追踪网站变化

除了常常浏览 GitHub Trending 以外，有时候也会看一些技术博客，好比 GitHub Blog、Kubernetes Blog、CoreOS Blog 等，有的是不提供 RSS 订阅的（固然我也不是一个 RSS 订阅的爱好者），因为不知道何时会更新，只能空闲时去查看对应的页面比较低效。经过爬虫能够很好的解决这个问题，可是对于多个网站都单独写爬虫比较费劲同时增长了管理的负担，因此但愿可以开发一个通用的爬虫框架，可以比较简单的配置就能新增一个追踪网站变化的爬虫。当时恰好工做上在了解 Prometheus 和 Alermanager，就参考对应的配置，开发了基于 xpath 的爬虫框架，经过邮件以日报或者周报形式追踪特定网站的更新。

parsers:
- name: 'githubtrending'
  base_url: 'https://github.com'
  base_xpath:
  - "//li[@class='col-12 d-block width-full py-4 border-bottom']"
  attr:
    url: 'div/h3/a/@href'
    repo: 'div/h3/a'
    desc: "div[@class='py-1']/p"
    lang: "div/span[@itemprop='programmingLanguage']"
    star: "div/a[@aria-label='Stargazers']"
    fork: "div/a[@aria-label='Forks']"
    today: "div/span[@class='float-right']"
复制代码

后续因为工做上须要参与一些前端的开发，因此又学习了 React 和 ant-design 增长了方便查看的页面。能够说这个项目和当时工做上的内容是高度契合、相互促进的。

能够访问体验：zhupeng.github.io/trackupdate…

项目地址：github.com/ZhuPeng/tra…

欢迎 Star 和 Fork，有任何问题欢迎提交 Issue。

微信小程序

小程序给人最直观的体验就是无需安装软件，能够在微信内快速体验。当时 trackupdates 服务是没有服务器，运行在我本身电脑里面，用手机在碎片时间查看很是不方便，因此仍是为了知足本身的需求（程序员造轮子是否是都是先知足本身的需求？哈哈~）。

随着本身在工做中产品思惟的积累，当时的想法是既然要开发一个对外可用的产品，为什么不在知足本身需求的同时也能方便他人呢？因此须要挖掘和分析具体须要解决的问题和痛点，以及如何更好的推广这个产品。

当时发现微信公众号中的文章对外链的访问有严格的控制，文章中除特殊的连接都不能点击，可是对小程序的跳转是没有限制的。在小程序里面也是同样的，通常的外链跳转都是不容许的（我的开发类型的小程序），同时也调研了已经上线的 GitHub 相关的小程序，无一例外在连接跳转上都存在不少的问题。因此在开发小程序的过程当中友好的 GitHub 的连接跳转是被最重点关注和优化的问题，同时这也是怎么去推广这个小程序的方向。

目前有 GitHub精选、AI研习社两个公众号在文章中经过附加小程序连接的方式，来提高访问 GitHub 仓库详情的阅读体验。若是你的公众号文章中分享了 GitHub 相关的项目能够扫描以下二维码查看添加小程序指南。

除此以外，小程序还提供了查看仓库统计和我的简历的功能。

小程序使用的是微信原生的框架开发，若是你但愿学习小程序开发的话，应该能对你有所帮助。

项目地址：github.com/ZhuPeng/mp-…

欢迎 Star 和 Fork，有任何问题欢迎提交 Issue。

总结

这就是小程序 GitHub Trending Hub 的由来，在整个开发过程有两点感受有必要分享一下：

1. GitHub API 设计

为了下降开发成本，同时提升后续更换 API 的便捷性，GitHub API 的返回结果中会包含你可能访问的其余 API，对于开发者来讲就不须要去理解和拼接 API 了。官方是这样解释的：

All resources may have one or more *_url properties linking to other resources. These are meant to provide explicit URLs so that proper API clients don't need to construct URLs on their own. It is highly recommended that API clients use these. Doing so will make future upgrades of the API easier for developers. All URLs are expected to be proper RFC 6570 URI templates.

{
    "id": 1296269,
    "name": "Hello-World",
    "full_name": "octocat/Hello-World",
    "html_url": "https://github.com/octocat/Hello-World",
    "description": "This your first repo!",
    "url": "https://api.github.com/repos/octocat/Hello-World",
    "archive_url": "http://api.github.com/repos/octocat/Hello-World/{archive_format}{/ref}",
    "assignees_url": "http://api.github.com/repos/octocat/Hello-World/assignees{/user}"
}
复制代码

总体给个人启发就是设计 API 是一门学问，同时方便开发者便捷使用 API 也很重要。如今 GitHub 已经推荐使用 GraphQL API v4 版本了，将小程序 API 迁移到 GraphQL 版本已经列入下一个学习计划了。

2. 小程序云开发

云开发里面打包了经常使用的基础组件，如数据库、存储、无服务框架、监控和数据统计报表等，极大简化了服务的运维部署成本，不用关心服务在哪里运行，不用关心是否须要扩容，可让开发更多的关注业务逻辑。以下就是一个简单的服务：

const cloud = require('wx-server-sdk')

exports.main = async (event, context) => ({
  sum: event.a + event.b
})
复制代码

可是相对来讲成熟度还不够，若是碰到问题，查起来比较困难。例如我就碰到了小程序的 API 被爬虫抓取了（后来查到是微信本身的爬虫，尴尬了~），致使云开发套餐的流量被瞬间用完了，因为云开发暴露的能力有限很差去排查以及解决这个问题。

---

最后再贴个二维码，欢迎扫码体验