일반 사이트에 Twitter나 Facebook의 공유버튼을 달듯이 오픈 소스 프로젝트 사이트에는 GitHub의 Star 버튼을 다는 것이 일반적이다. Star 수가 높으면 인기 있다고 홍보하는 역할도 하고 Star를 누르도록 유도하는 역할도 한다.
GitHub에서는 공식적으로 Star 위젯을 제공하지 않으므로 비공식적으로 만들어진 프로젝트들이 몇 개 있다. 대표적인 게 GitHub buttons와 GitHub:buttons가 있고 여기서 제공하는 스크립트를 사용하면 간단하게 사이트에 GitHub Star 버튼을 붙일 수 있다.
둘 다 GitHub의 디자인을 그대로 따른 버튼이고 나는 Twitter나 Facebook을 포함해서 가능하면 기본 UI를 그대로 따르는 게 좋다고 생각하지만, 사이트의 디자인에 따라서는 GitHub UI를 따르지 않고 사이트 디자인에 맞게 커스텀한 Star 숫자나 버튼을 사용해야 할 수도 있다. 이런 경우 GitHub API를 이용해서 직접 가져와야 한다.
위의 두 프로젝트 모두 결국은 같은 방법을 사용하고 있는데 GitHub buttons의 소스코드를 참고하면 쉽게 직접 작성할 수 있다.
GitHub Repository의 Get API를 보면 GET /repos/:owner/:repo와 같이 정의가 되어 있다. 예를 들어 Bootstrap의 저장소인 https://github.com/twbs/bootstrap 정보를 가져오려면 사용자 아이디가 twbs이고 저장소 이름이 bootstrap이므로 API 주소는 https://api.github.com/repos/twbs/bootstrap가 된다. 이 URL로 GET 요청을 보내면 다음과 같은 결과를 받을 수 있다.
{
"id": 1296269,
"owner": {
...
},
"name": "Hello-World",
"full_name": "octocat/Hello-World",
"description": "This your first repo!",
"private": false,
"fork": false,
"url": "https://api.github.com/repos/octocat/Hello-World",
"stargazers_count": 80,
"watchers_count": 80,
...
}
여기서 stargazers_count의 값이 해당 저장소의 Star 개수다. jQuery를 사용한다면 다음과 같이 간단한 Ajax 코드로 Star 개수를 가져와서 화면에 표시할 수 있다.
$.get('https://api.github.com/repos/twbs/bootstrap', function(data) {
// use data.stargazers_count
});
프로젝트 사이트는 github.com 도메인을 사용하지 않으므로 동일 출처정책(same-origin policy)에 걸려서 Ajax 요청을 보낼 수 없지만 GitHub API는 센스 있게 CORS(Cross-Origin Resource Sharing)를 지원해서 Access-Control-Allow-Origin:* 헤더를 통해 어떤 도메인에서도 Ajax 요청을 보낼 수 있게 지원하고 있으므로 위 코드를 그대로 사용해서 무방하다. CORS는 이제 충분히 보급되었지만 IE 10 이하에서는 아직 제대로 지원하지 않으므로 제대로 다 지원하려면 JSONP를 사용해야 한다.
$.getJSON('https://api.github.com/repos/twbs/bootstrap', function(data) {
// use data.stargazers_count
});
jQuery를 사용하면 getJSON으로 쉽게 JSONP를 사용할 수 있다. 여기서 결과로 받은 stargazers_count값을 원하는 위치에 표시하면 된다.
참고로 GitHub는 계정을 인증하지 않은 API 요청은 시간당 60개로 제한된다.(인증하면 시간당 5,000개까지 가능하다.) 응답해더의 X-RateLimit-Limit와 X-RateLimit-Remaining를 통해서 이용 가능 총 개수와 현재 남을 개수를 알려준다. 이 코드에서는 인증을 사용하고 있지 않으므로 시간당 60개로 제한되지만 서버가 아니라 사용자의 웹 브라우저에서 실행되므로 60개는 방문한 사용자의 API 제한개수를 사용하게 된다. 숫자가 안 보인다고 큰일은 아니지만 방문한 사용자가 해당 시간에 API를 60개 이상 사용하지 않았다면 큰 문제 없이 잘 표시될 것이다. 약간 더 제대로 처리한다면 localStorage나 쿠키 등에 저장해 놓고 요청 개수를 줄이거나 실패했을 때 이전에 가지고 있던 값을 표시하거나 하면 된다.
Comments