Use Github api in your application.

Hello friends…

Recently I have been taking part in many hackathons. One of the most frequently asked assignment was to implement Github API call in your application. It was a challenge for me in the beginning but after browsing internet for a while I got the grip.

So, here I will share what I concluded and how to implement it. I have developed a mini application to demonstrate it.

Let me describe you what my App will do. My application has following features:

  1. It lists down the list of public repositories with the language in which they are built.
  2. We can search repository using language filter.
  3. We can filter repositories on the basis of the stars.

So let’s start.

Firstly, we have to do do the basic call to github api to get the list of all public repositories in order to achieve the first feature. This can be done in following way:

jQuery.githubUser = function(username, callback) { jQuery.getJSON("https://api.github.com/search/repositories?q=stars:>=500&sort=stars&order=desc&callback=?", callback); }

Above is one of the basic github api call. It asks for all repositories with stars greater than 500 and order them in descending order of stars each got. This call will give us JSON in following format:

The meta information holds the pagination objects inside Link as arrays, as the data will come in chunks and not all together. Apart from meta we have got data which is nothing but the array of repo objects with their basic info. For example each data object looks like below:

Isn’t it great! Now we just have to display each data object and relevant info in list..

In order to perform the search I have used following way to call rest api:

jQuery.searchLoad=function(searchString, callback) { 
var urlToCall=("https://api.github.com/search/repositories?q=language:"+encodeURIComponent(searchString)+"&sort=stars&order=desc&callback=?");
jQuery.getJSON(urlToCall, callback); }

In above code searchString is the language name that we need to search. Again, this will give the JSON in same old format consisting of only the matched languages which we have searched.

Now let’s see how to filter according to stars each repo has got. For this I have used jQuery range selector and on the basis of the range selected, query is fired. Let’s see the code snippet:

jQuery.SearchWithThisStars=function(valueSelected, callback) { jQuery.getJSON("https://api.github.com/search/repositories?q=stars:>="+encodeURIComponent(valueSelected)+"&sort=stars&order=desc&callback=?", callback); }

Here valueSelected is the value of stars greater than which you need to filter. Again the JSON returned will be in same format.

Thus our task is done! Wasn’t it simple. Not only github api, but using this way of calling REST apis one can call any service and leverage the data returned.

You can find the SOURCE CODE of a working example in my github repo.

You can see the working demo in : https://msmsmonika.github.io/CallGithubAPI/

So friends happy development….