Dribbble Api Kullanımı

Merhaba arkadaşlar, bu konuda sizlere dribbble api kullanımını göstermek istiyorum.
Geçenlerde uzman cevap’ta sorulan bir soru üzerine böyle bir ders hazırlama gereği duydum.
Esasında tüm API’ler projelerde aynı mantıkta çalışır. Kullanıcı hesabına yetki verilir ve oluşturulan token ile sorgular oluşturulur.

Sırasıyla bu adımları görelim 🙂

1) Uygulama oluşturma

Öncelikle https://dribbble.com/account/applications/new adresine girerek yeni bir uygulama oluşturun.
Burada önemli olan Callback URL adresiniz. Çünkü daha sonra bunu kullanacağız. Çalışan bir siteniz üzerinde bir Callback URL oluşturursanız iyi olur sizin için.

Uygulamanızı oluşturduktan sonra şu değerlere sahip olacaksınız, bunları saklayın!

Screenshot_29

2) Uygulamaya İzin Verme

Oluşturduğumuz uygulamayı kullanmak için mevcut dribbble hesabımız ile bu uygulamaya izin vermek gerekiyor. Şimdi şöyle bir link yapısı oluştuacağız;
https://dribbble.com/oauth/authorize?client_id=CLIENT_ID&redirect_uri=REDIRECT_URL&scope=public&state=123456

Buradaki değerleri açıklayayım;
client_id – İlk adımda uygulamayı oluşturduktan sonra sahip olduğumuz Client ID değerimizo olacak.
redirect_uri – Uygulamayı oluştururken kullandığımız Callback URL olacak.
scope – Burada biz genel bilgilere ulaşacağımız için public olarak belirledik. Diğer değerler için şuraya bakabilirsiniz.
state – rasgele üretilmiş bir değer girin.

Şimdi yukarıdaki linke girdiğimizde hesabımız için uygulamaya izin vermemizi isteyecek.

Screenshot_30

İzin verdikten sonra bizi callback url’e gönderecek ve burada code değerini alacağız.

Örneğin ben yaptığımda şöyle bir url oluştu;
http://www.erbilen.net/?code=b83001d95d2182918bdc530d3b8fd056b0a1d14808071597b9fe17c008a5d741&state=123456

Buradaki code değerini alıp 3. adıma geçebiliriz.

3) Token Oluşturma

Bu adımda https://dribbble.com/oauth/token bu url’e post yapmamız gerekiyor.

Post olarak göndereceğiz değerler;

client_id – Uygulamayı oluşturduktan sonra sahip olduğumuz Client ID.
client_secret – Uygulamayı oluşturduktan sonra sahip olduğumuz Client Secret.
code – 2. adımda sahip olduğumuz code değeri.
redirect_uri – Uygulamayı oluştururken belirlediğimiz Callback Url

Ben Postman yardımıyla bu post işlemini gerçekleştirdim ve sonucunda ise kullanacağım access_token’a sahip oldum.

Screenshot_31

Lazım olur diye jquer ve php’de post işlem kodlarını paylaşıyorum

PHP kodu:

 "https://dribbble.com/oauth/token",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"client_id\"\r\n\r\nc13ba2b61a1d18e25cb9ae8f280bef14db688b705159dfa6edb4320fba00277d\r\n-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"client_secret\"\r\n\r\n7015568247e0f0dd875d004ddab3911c2d426ba2fad7b7995f973b0eebfd1680\r\n-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"code\"\r\n\r\nb83001d95d2182918bdc530d3b8fd056b0a1d14808071597b9fe17c008a5d741\r\n-----011000010111000001101001\r\nContent-Disposition: form-data; name=\"redirect_uri\"\r\n\r\nhttp://www.erbilen.net\r\n-----011000010111000001101001--",
  CURLOPT_HTTPHEADER => array(
    "cache-control: no-cache",
    "content-type: multipart/form-data; boundary=---011000010111000001101001"
  ),
));

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
  echo "cURL Error #:" . $err;
} else {
  echo $response;
}

jQuery Kodu:

var form = new FormData();
form.append("client_id", "c13ba2b61a1d18e25cb9ae8f280bef14db688b705159dfa6edb4320fba00277d");
form.append("client_secret", "7015568247e0f0dd875d004ddab3911c2d426ba2fad7b7995f973b0eebfd1680");
form.append("code", "b83001d95d2182918bdc530d3b8fd056b0a1d14808071597b9fe17c008a5d741");
form.append("redirect_uri", "http://www.erbilen.net");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://dribbble.com/oauth/token",
  "method": "POST",
  "headers": {
    "cache-control": "no-cache"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

4) API’yi Kullanalım

Artık bir access_token sahibi olduğumuz için API’deki metodları kullanıp istediğimizi yapabiliriz.

Örneğin kendi bilgilerimizi çekelim.

İlgili url’im;
https://api.dribbble.com/v1/user?access_token=ACCESS_TOKEN

Burada 3. adımda elde ettiğimiz access_token ile kendi bilgilerimizi kolayca çekebildik.

Screenshot_32

Ya da başka bir örnek yapalım.
Örneğin Sencer abi’nin son shot’larını çekelim.

İlgili url;
https://api.dribbble.com/v1/users/sencerbugrahan/shots?access_token=ACCESS_TOKEN

Sonuç;

Screenshot_33

Demo

Adımları uygulayarak bu uygulamayı hazırladım, sizlerde daha fazlasını yapabilirsiniz 🙂
http://tayfun.net/demo/dribbble-api/

İndir

http://tayfun.net/demo/dribbble-api/dribbble.zip

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir