preface

Tipsy used Kotlin to develop a Github profile summary. I think his idea is very good, so I want to use Node technology stack to implement it.

My technology stack is Vue and Koa, so I use them as front end and back end respectively for implementation.

First put a rendering:

The project structure

. ├ ─ ─ LICENSE ├ ─ ─ the README. Md ├ ─ ─ app. Js ├ ─ ─ build │ ├ ─ ─ build. Js │ ├ ─ ─ check - versions. Js │ ├ ─ ─ logo. The PNG │ ├ ─ ─ utils. Js │ ├ ─ ─ vue - loader. Conf. Js │ ├ ─ ─ webpack. Base. Conf., js │ ├ ─ ─ webpack. Dev. Conf., js │ └ ─ ─ webpack. Prod. Conf., js ├ ─ ─ the config │ ├ ─ ─ Dev. Env. Js │ ├ ─ ─ index. The js │ └ ─ ─ the prod. The env. Js ├ ─ ─ index. The HTML ├ ─ ─ jsconfig. Json ├ ─ ─ now. The json ├ ─ ─ package. The json ├ ─ ─ server │ ├ ─ ─ controllers │ ├ ─ ─ middlewares │ ├ ─ ─ the router │ └ ─ ─ utils ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ ├ ─ ─ components │ ├ ─ ─ ├── ├─ ├─ ├─ ├─ crimp ├─ crimp ├─ crimp ├─ crimpCopy the code

This is basically the vuE-CLI-generated project structure +Koa back-end project structure, which will not be described here.

Train of thought

Use github API to obtain the required user information, and then build the github resume of the user through the obtained user information. I was going to use github’s RESTful API as well. But then I ran into a problem:

  1. Github’s RESTful API is pagination restricted. For example, I can’t get a user’s clicked star repository at once, but need to decide whether there is a next page and whether to request to the end.
  2. RESTful apis return a bunch of data THAT I don’t need. And a large amount of data will be relatively high performance requirements. For example, I only want the total number of warehouses for one user, but I need to get all of his warehouses before I know the total number.
  3. It takes a lot of time to make multiple RESTful requests just to get some functionality done.

In summary, I can no longer use RESTful apis to achieve the effect I want. So I turned my attention to the GraphQL API. I believe that many friends concerned about the front end of the word is not unfamiliar, but really use very few – after all, it is still RESTful API based development mode.

I, too, had a hard time at first looking at the GraphQL API definitions, structures and so on. However, Github’s GraphQL Exploer and Github’s official developer forum enabled me to achieve roughly what I was looking for.

Github’s GraphQL API has some particularly useful attributes such as totalCount, which allows you to calculate the total number of parameters, such as the total number of warehouses owned by a person, rather than fetching the total number from one warehouse to another.

At present, GraphQL does not query data through intuitive urls as RESTful does. Instead, it uses user-defined GraphQL statements to query the desired information. For example, count the total number of Molunerfinn’s warehouses:

{
  user(login: "Molunerfinn"){
    repositories(affiliations: [OWNER COLLABORATOR] isFork: false){
     totalCount
    }
  }
}
Copy the code

Return result :(consistent with your graphql structure)

{
  "data": {
    "user": {
      "repositories": {
        "totalCount": 24}}}}Copy the code

So right now the Node community doesn’t have a library that’s as good as a database ORM to help simplify writing graphQL. All requests must be written graphQL yourself.

Project process

Tipsy’s Github profile summary is limited by github API query quantity, which is 5000 times per hour with token. Tipsy’s Github profile summary is limited by tipsy’s github profile summary. Can be queried. So I made a restriction on this as well.

Therefore, I made a detection interface at the backend Koa to detect whether the user is a STAR, which can not only prevent malicious requests but also give yourself a wave of star is not beautiful ~

The front-end Vue page will judge the return value after initiating the request. If it is false, it means there is no STAR, so it is not allowed to jump to the specific profile page.

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
  }
}
Copy the code

If the request result is correct, the JSON Web token returned by the backend is stored in the localStorage for authentication.

Of course, if the user directly jumps to the profile page, it will also check whether the token exists in the hook of the route. If yes, permit it. If the user does not exist, the system asks whether the user is star. If the user is star, the system does not permit the user.

In fact, the business logic is very simple, I believe you will understand the node before and after. In order to reduce the burden of the server, the back-end directly returns to the front end after requesting data through GraphQL and uses the computing power of the front end browser to organize the data and render beautiful charts through chart.js:

Of course, in order to facilitate everyone to share and collect, I also made the function of sharing and saving as pictures:

For smooth browsing on the phone, I also made mobile responsive adaptation

The deployment of

I’m going to usenowThis platform can deploy Node applications, so I am happy to deploy my application. It will automatically replace my Koa exposed port with port 80. So you can go to https://gh-profile-summary.now.sh and don’t have to worry about the port.

Since now.sh is only free at 1 gigabyte per month, I switched to my own server

I will post a detailed article about the specific development experience and pit. You can pay attention to my personal homepage

Welcome to experience:

address

You can also share your Github summary with your friends

Writing articles can get asynchronous community books! The tech people who love reading are in the asynchronous community. I want to read React Native Mobile Development. Hope you enjoy it too. Participate in a writing exchange.