GitStats v2 - GitHub API

Merhaba !

Bir önceki blog yazımda GitHub'ta bir projeye katkı yapan kişilerin isimlerini, kaç commit katkı yaptıklarını ve yüzdelik olarak katkısını tablo olarak yazdıran kodu anlatmıştım. Tamamen saf JavaScript'te bir şeyler geliştirmek adına böyle bir şey denemiştim ve paylaşmak istedim. Fakat kodu yazıp, GitHub'ta paylaştıktan sonra yaptığım hataları farkedip hemen yeni bir güncelleme ile önce kodda düzenlemeler gerçekleştirdim. Ardındanda aynı kodu GitHub API'si kullanmanın çok daha doğru olacağına karar verip, GitStats makalesinin sonuna GitHub Rest API başlığı altında, API kullanarak aynı kodu güncelleyeceğimi belirtmiştim, iş bu makalede buna değişeneceğim. Uzun bir giriş oldu, işin teknik kısmına geçeyim.

GitHub REST API

Öncelikle docs.github.com/en/rest sayfasını ziyaret edelim. Bu dokümantasyonda apiyi kullanarak neler yapabileceğiniz örneklerle güzelce anlatılmış. GitStats kodlarını yazarken kullanıcının adı ve commit sayılarına ihtiyacımız oluyordu. Aynı verileri API kullanarak çekelim.

api.github.com sitesine girdiğimizde bizi bir JSON karşılıyor.

https://api.github.com/repos/{owner}/{repo}

Burada görüldüğü gibi, bir repository bilgilerine ulaşmak için yukarıdaki link yapısını kullanmamız gerekiyor. Kişisel projem olan Turkuaz Css'in github api linki şu şekilde;

https://api.github.com/repos/omergulcicek/turkuazcss

Bu JSON verisinde projenin kurucusundan, adına, açıklamasından, star ve fork sayısına vb. birçok veriye ulaşmanız mümkün. GitStats mini projesi için gerekli olan contributor'lara ulaşmak için linkin sonuna /contributors ekliyoruz.

https://api.github.com/repos/omergulcicek/turkuazcss/contributors

GitHub REST API İle Verileri Çekmek

Turkuaz Css katkıda bulunanlar linkinde ihtiyacımız olan veriler mevcut. login değişkeninde katkıda bulunan kişinin kullanıcı adı, contributors değişkeninde ise commit sayısı yazıyor.

Şimdi tek yapmamız gereken bu api linkine Ajax isteği göndermek ve sitedeki bilgileri JSON olarak işlemek.

İlk olarak projenin kurucusu ve adını sonradan değişmesi kolay olsun diye bir değişkende tuttum.

var repo = "omergulcicek/turkuazcss";

Sayfaya Ajax isteği göndermek saf JavaScript ile aşağıdaki gibi;

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
		myObj = JSON.parse(this.responseText);
	}
};
xmlhttp.open("GET", "https://api.github.com/repos/" + repo + "/contributors", true);
xmlhttp.send();

Diğer kodlarımız zaten bir önceki yazımda belirtmiş olduğum değişken, fonksiyon ve döngülere tekrardan burada değinmek istemiyorum. O yazıyıda okumanız, yapıyı anlamanız adına daha güzel olacaktır.

İki kodları birleştirdiğimizde, minik projemizi bitirmiş oluyoruz. Bir önceki haliyle proje sadece konsolda ilgili sayfada tabloda çıktı verebiliyorken, GitHub REST API sayesinde istediğimiz yerde kullanabileceğimiz şekilde örnek bir projeyi tamamlamış olduk.

İlgili kodlara GitHub profilim üzerinden ulaşabilirsiniz. Eksikleri bana feedback yaparsanız yada projeye pull request yaparak gelişimine katkı sağlayabilirsiniz.