querylist采集微信公众号文章( React和ant-design增加了方便查看的小程序指南 )

　　querylist采集微信公众号文章(

React和ant-design增加了方便查看的小程序指南

)

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

为什么要开发？

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

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

　　对于那些短期出现在 Trending 上的项目由于没有及时查看而丢失了

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

　　这大概就是最开始的需求，希望能够及时的追踪到 GitHub Trending 榜单的变化，形成历史信息方便查看更新。很自然就会想到用爬虫解决这个问题，当时还没有小程序，开发小程序是因为工作关系了解到 Serverless 相关的知识，同时微信小程序有对应的云开发方式，迫切希望了解一下具体的应用场景。所以就有了开发这个小程序的想法。

追踪网站变化

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

parsers:

- name: &#39;githubtrending&#39;

base_url: &#39;https://github.com&#39;

base_xpath:

- "//li[@class=&#39;col-12 d-block width-full py-4 border-bottom&#39;]"

attr:

url: &#39;div/h3/a/@href&#39;

repo: &#39;div/h3/a&#39;

desc: "div[@class=&#39;py-1&#39;]/p"

lang: "div/span[@itemprop=&#39;programmingLanguage&#39;]"

star: "div/a[@aria-label=&#39;Stargazers&#39;]"

fork: "div/a[@aria-label=&#39;Forks&#39;]"

today: "div/span[@class=&#39;float-right&#39;]"

</p>

　　在后续的工作中，需要参与一些前端的开发，所以学习了React和ant-design，并添加了易于查看的页面。可以说，这个项目和当时的工作内容是高度契合、相辅相成的。

　　您可以访问以下体验：

　　项目地址：

　　欢迎来到星叉。如果您有任何问题，请提交问题。

　　微信小程序

　　小程序最直观的体验是无需安装软件，在微信中即可快速体验。当时trackupdates服务没有服务器，运行在我自己的电脑上。碎片时间用手机看很不方便，所以还是满足自己的需求（程序员是不是先造轮子来满足自己的需求？哈哈~）。

　　随着产品思维在我工作中的积累，当时的想法是，既然我要开发一个对外可用的产品，为什么不满足自己的需求，同时也方便别人呢？因此，有必要挖掘和分析需要解决的具体问题和痛点，以及如何更好地推广这款产品。

　　当时发现微信公众号中的文章对外部链接的访问有严格的控制。在文章中，所有链接都无法点击，但小程序的重定向没有限制。在小程序中也是如此。一般不允许外链跳转（个人开发类小程序）。同时，我也对已经上线的GitHub相关小程序进行了调查。无一例外，链接跳转都是允许的。有很多问题。因此，在小程序的开发过程中，友好的GitHub链接重定向是最重要的关注和优化问题，这也是这个小程序如何推广的方向。

　　目前有GitHub精选和AI研究院两个公众号，可以通过在文章中附上小程序链接，提升访问GitHub仓库详情的阅读体验。如果您在公众号文章中分享了GitHub相关项目，可以扫描以下二维码查看添加小程序指南。

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

　　小程序使用微信原生框架开发。如果你想学习小程序开发，应该对你有帮助。

　　项目地址：

　　欢迎来到星叉。如果您有任何问题，请提交问题。

　　总结

　　这就是GitHub Trending Hub这个小程序的由来。在整个开发过程中，我觉得有两点需要分享：

　　GitHub API 设计

　　为降低开发成本，提高后续API替换的便利性，GitHub API的返回结果中会收录您可能访问的其他API，开发者无需理解和拼接API。官方解释如下：

　　所有资源都可能有一个或多个*_urlproperties 链接到其他资源。这些旨在提供显式 URL，以便适当的 API 客户端不需要自己构建 URL。强烈建议 API 客户端使用这些。这样做将使开发人员在未来升级 API 时更容易。所有 URL 都应该是正确的 RFC 6570URI 模板。

{

"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版本的迁移已经收录在接下来的学习计划中。

　　小程序云开发

　　云开发中将常用的基础组件打包，如数据库、存储、无服务框架、监控和数据统计报表等，大大简化了服务的运维部署成本。您无需关心服务在何处运行或是否需要扩展。让开发更加关注业务逻辑。下面是一个简单的服务：

　　const cloud = require(&#39;wx-server-sdk&#39;)

exports.main = async (event, context) => ({

sum: event.a + event.b

})

　　但相对来说，成熟度还不够。如果遇到问题，查找起来会比较困难。比如遇到小程序被爬虫爬取的API（后来发现是微信自己的爬虫，尴尬~），导致云开发包流量瞬间用光，不好由于云开发暴露的能力有限 排查并解决此问题。

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