利用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。不过马上我就遇到问题：

github的RESTful api是有分页限制的。也就是比如我无法一次性获取一个用户的点过star的仓库，而需要判断是否有下一页、是否要请求到最后。
RESTful的api会返回一堆我不需要的数据。而且数据量一大对性能要求会比较高。比如我只想要一个用户的仓库总数，我却需要获取完他所有的仓库我才能知道总数。
要发多个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移动开发实战》，希望你也能够喜欢。参与写作换书活动。