阅读 1511

利用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移动开发实战》,希望你也能够喜欢。参与写作换书活动

关注下面的标签,发现更多相似文章
评论

查看更多 >