微信小程序 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 被爬蟲抓取了（後來查到是微信本身的爬蟲，尷尬了~），致使雲開發套餐的流量被瞬間用完了，因爲雲開發暴露的能力有限很差去排查以及解決這個問題。

---

最後再貼個二維碼，歡迎掃碼體驗