利用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移动开发实战》，但愿你也可以喜欢。参与写做换书活动。