利用Node Github Profile Summary來生成你的Github簡歷吧

前言

以前看過國外一個開發者tipsy用kotlin開發了一個github profile summary，我以爲他的想法很是棒，因此我想着用Node的技術棧來實現一遍。

個人技術棧是Vue和Koa，因此在實現上我就用了它們分別來作前端和後臺。

先放張效果圖：

項目結構

.
├── LICENSE
├── README.md
├── app.js
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── jsconfig.json
├── now.json
├── package.json
├── server
│   ├── controllers
│   ├── middlewares
│   ├── router
│   └── utils
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── router
│   └── views
├── static
└── yarn.lock
複製代碼

基本就是vue-cli生成的項目結構+Koa後端的項目結構，這個就再也不贅述。

思路

利用github的api來獲取所須要的用戶信息，而後經過獲取的用戶信息來構建用戶的github簡歷。一開始我打算用的也是github的RESTful api。不過立刻我就遇到問題：

1. github的RESTful api是有分頁限制的。也就是好比我沒法一次性獲取一個用戶的點過star的倉庫，而須要判斷是否有下一頁、是否要請求到最後。
2. RESTful的api會返回一堆我不須要的數據。並且數據量一大對性能要求會比較高。好比我只想要一個用戶的倉庫總數，我卻須要獲取完他全部的倉庫我才能知道總數。
3. 要發多個RESTful請求才能勉強完成一些功能，代價是耗時巨大。

綜上，沒法再繼續用RESTful api來實現我想要的效果。因而我把目光轉移到了GraphQL api上了。相信不少關注前端的朋友們對於這個詞並不陌生，可是真正用上的少之又少——畢竟目前仍是RESTful api爲主的開發模式。

我也同樣，一開始看GraphQL api的那些定義、結構什麼的，感到很是困難。不過藉助Github的GraphQL exploer以及Github GraphQL的官方開發者論壇，總算是大體實現了我想要的功能。

github提供的GraphQL api有一些特別有用的屬性好比totalCount，就能計算一些參數的總數，好比上面說到的一我的擁有的倉庫總數，而不用一個個倉庫都獲取才知道總數。

目前來講，GraphQL還不像RESTful那樣經過直觀的url來查詢數據，而是經過用戶自定義的graphql語句來實現須要的信息的查詢。 好比統計用戶Molunerfinn的倉庫總數：

{
  user(login: "Molunerfinn"){
    repositories(affiliations: [OWNER COLLABORATOR] isFork: false){
     totalCount
    }
  }
}
複製代碼

返回結果：(跟你的graphql結構是一致的)

{
  "data": {
    "user": {
      "repositories": {
        "totalCount": 24
      }
    }
  }
}
複製代碼

因此如今node社區尚未什麼特別好的庫來像數據庫的ORM同樣幫咱們簡化寫graphql的步驟。全部的請求都必須本身手寫graphql。

項目流程

因爲github的api查詢數量限制，在有token的狀況下一小時是5000次，因此tipsy的github profile summary作了限制，查詢某個用戶的github profile summary時必須先star這個倉庫，才能夠查詢。所以我也作了一個這個的限制。

因此我在後端Koa處作了檢測的接口，用於檢測用戶是否star，既能夠防止惡意刷請求又能夠給本身漲一波star豈不美哉~

前端Vue頁面這邊發起請求後判斷返回值，若是是false說明並無star，因此就不讓其跳轉的具體的profile頁面。

async checkStar () {
  this.loading = true
  let res = await this.$http.get(`/api/check-status/${this.username}`)
  if (res.data.success) {
    this.$router.push({
      name: 'Profile',
      params: {
        username: this.username
      }
    })
    localStorage.setItem('github-profile-token', res.data.token)
  } else {
    this.invalid = true
    this.invalidUsername = this.username
    this.loading = false
  }
}
複製代碼

若是請求結果正確，會把後端返回的json web token存入localStorage裏用於鑑權。

固然，若是用戶直接跳轉profile頁面，也會在路由的鉤子裏判斷token存不存在？若是存在，放行。若是不存在，請求一遍用戶是否star，若是star，放行，不然不放行。

其實業務邏輯都很簡單，相信作過node先後端的大家能很快理解。爲了減輕服務器的負擔，後端在經過GraphQL請求完數據後，直接返回前端，利用前端瀏覽器的算力，來把數據組織出來經過chart.js來渲染出好看的圖表：

固然爲了方便你們分享和收藏，我也作了分享和保存爲圖片的功能：

爲了能在手機端順暢瀏覽，我也作了移動端的響應式適配~

部署

我採用的是now這個平臺來部署，它可以部署node的應用，因此我就很開心的把個人應用部署上去啦~它會自動把我Koa暴露出去的端口反代到80端口，因此你能夠直接訪問https://gh-profile-summary.now.sh這個地址而不用本身來操心端口問題啦！

因爲now.sh的免費額度每個月只有1G，因此我仍是切換到了我本身的服務器上了~

具體的開發經驗和踩的坑以後我會發一篇文章來細說~能夠關注個人掘金我的主頁~

歡迎你們體驗：

地址

也能夠分享你的github總結給你的朋友們啦~

寫文章能夠得異步社區的書！愛讀書的技術人都在異步社區。我想要讀《React Native移動開發實戰》，但願你也可以喜歡。參與寫做換書活動。