Merhaba arkadaşlar;
Bugun web uygulamasında youtube üzerinden paylaştığı videoların bilgilerini de çekmek isteyen arkadaşlar için bir uygulama yapalım.
Uygulamayı incelemek isteyenler buradan indirebilirler.
Arkadaşlar öncelikle buradan bir uygulama oluşturup kendimize api key edinmemiz gerekli. Hemen işlemlere başlayalım.
Not: gmail hesabınız olmalı ve oturum açmış olmayı unutmayın
Yukarıdaki Linke tıkladığınızda karşımıza çıkacak ilk ekran ile tanışalım hemen Create Project butonuna tıklayalım.
Arkadaşlar şimdi yukarıdaki gibi Project sekmesine tıklayalım.
Açılan sayfada kendi projemizi oluşturmak için üst resimde gördüğünüz gibi Create Project Diyoruz.
Arkadaşlar şimdi geldi projemize bir isim vermeye ben projemize GetYoutube adını verdim. ID olarak ta youtube-data-reader dedim. Siz de kendiniz bir isim ve ID belirleyebilirsiniz. Ardından Create butonunu tıklayalım
Arkadaşlar Create butonu tıklandıktan sonra sağ alt köşede bir bildirim karşımıza çıkacak.
Bildirim'e tıkladığımızda (See all activity) projemizin oluşturulduğu ekrana yönlendiriliriz.
Kısa süre sonra projemiz başarı ile oluşturulacaktır.Proje oluşturulduktan sonra tekrar Project sekmesine geçiş yapalım.
Şimdi oluşturduğumuz uygulamamızı seçelim.
Şimdi Enable an API butonunu tıklayaralım
Arkadaşlar şimdi 3 adet Api aktif edicez. Enable an API dedikten sonra karşımıza çıkan api listesinde aşağıdaki API leri aktif edelim
Aktif etme işlemlerimizi yaptıktan sonra sol menü üzerinde Credentials sekmesine tıklıyoruz. Açılan Ekranda Create new Key butonuna tıklayarak kendimize bir api key oluşturalım
Create new Key dedikten sonra bize oluşturacağımız key türünü soruyor;
Diğerleri hakkında bilgim yok arkadaşlar. Biz Server Key diyelim.
Açılan ekranda bize boş kutucuğa geçerli IP adreslerini vermemizi istiyor. Yani API mizi kullanacak IP adresileri. Eğer sadece belirli IP üzerinden erişilmesini istiyorsanız IP adresleri sırası ile araya virgül (,) koyarak belirtebilirsiniz. Ben herkese açık olmasını istiyorum o yüzden herhangi bir IP adres girmeden Create butonuna tıklıyorum
Evet arkadaşlar Api Key'imiz hazır. Gerekli bilgiler ekranımızda mevcut.
Şimdi geldi kodlama kısmına
Örneğimizde video sayfamda Iframe olarak gösterdiğim videoların bilgilerini altlarına yazdıracağım.
Ben aşağıdaki yukarıdaki yazdıracağım siz daha detaylı yapmak isterseniz bize ulaşacak Json verisi Aşağıdaki gibidir.
{
"kind": "youtube#videoListResponse",
"etag": "\"SXtVtkiDWqZpl4dTpZv5nFU7t-8/BUcoJOmW1mQcQZvZUBKnbMqFeJU\"",
"pageInfo": {
"totalResults": 1,
"resultsPerPage": 1
},
"items": [
{
"kind": "youtube#video",
"etag": "\"SXtVtkiDWqZpl4dTpZv5nFU7t-8/_oHhBtnb1WZajCmzBUifacvB5sE\"",
"id": "QBKJTn6l3Rg",
"snippet": {
"publishedAt": "2014-10-21T12:27:33.000Z",
"channelId": "UC3d1AdmvAP6Jq16-WpD086g",
"title": "Divan 77.Bölüm - TRT DİYANET",
"description": "Hayat döngüsünde önümüze çıkan pek çok kavramı, olayı ya da olguyu çoğu kez yeterince düşünemeden yaşar ve geçeriz. Oysa tüm bunların irdelendiği bir dünyada daha güzel bir hayat sürmek, hataları azaltmak mümkündür. Felsefi ve sosyal açıdan hayatın tüm boyutları, farklı pencerelerden bakan akademisyenler ve uzmanların görüşünden Divan programıyla ekranlarınızda. \n \nDivan, TRT Diyanet TV’de…",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/QBKJTn6l3Rg/default.jpg",
"width": 120,
"height": 90
},
"medium": {
"url": "https://i.ytimg.com/vi/QBKJTn6l3Rg/mqdefault.jpg",
"width": 320,
"height": 180
},
"high": {
"url": "https://i.ytimg.com/vi/QBKJTn6l3Rg/hqdefault.jpg",
"width": 480,
"height": 360
}
},
"channelTitle": "DiyanetTV",
"categoryId": "1",
"liveBroadcastContent": "none"
},
"statistics": {
"viewCount": "75",
"likeCount": "0",
"dislikeCount": "0",
"favoriteCount": "0",
"commentCount": "1"
}
}
]
}
Evet arkadaşlar örnek olarak sayfamda 2 adet video olsun hemen html kodlarını yazalım.Tabi öncesinde dikkatinizi çekmek istediğim bir nokta var yukarıda gördüğünüz gibi video bilgilerinde örnek olarak "statistics" alanı ve içerisinde elemanları bulunan bir veri yapısı var. Ben Html Divlerime işimi kolaylaştırmak için bu alanların isimlerini verdim. Gene verileri nasıl dolduracağınız size kalmış.
<div class="videoPlay">
<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
<div class="bilgiler">
<div class="ayrac"></div>
<div class="icerik publishedAt">Yayınlanma Zamanı : <span>sd</span></div>
<div class="ayrac"></div>
<div class="icerik title">Başlık : <span>dqwdqw</span></div>
<div class="ayrac"></div>
<div class="icerik description">Açıklama : <span>qwdqw</span></div>
<div class="ayrac"></div>
</div>
<div class="istatistikler">
<div class="icerik viewCount">Görüntülenme Sayısı : <span></span></div>
<div class="icerik likeCount">Like Sayısı : <span></span></div>
<div class="icerik dislikeCount">Dislike Sayısı : <span></span></div>
<div class="icerik commentCount">Yorum Sayısı : <span></span></div>
</div>
</div>
<div class="videoPlay">
<iframe width="560" height="315" src="//www.youtube.com/embed/9E4ukGMe9R4" frameborder="0" allowfullscreen></iframe>
<div class="bilgiler">
<div class="ayrac"></div>
<div class="publishedAt">Yayınlanma Zamanı : <span>sd</span></div>
<div class="ayrac"></div>
<div class="title">Başlık : <span>dqwdqw</span></div>
<div class="ayrac"></div>
<div class="description">Açıklama : <span>qwdqw</span></div>
<div class="ayrac"></div>
</div>
<div class="istatistikler">
<div class="viewCount">Görüntülenme Sayısı : <span></span></div>
<div class="likeCount">Like Sayısı : <span></span></div>
<div class="dislikeCount">Dislike Sayısı : <span></span></div>
<div class="commentCount">Yorum Sayısı : <span></span></div>
</div>
</div>
Evet arkadaşlar simdi scriptimizi yazmaya başlayalım
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script>
//Önceden aldığımız api key imiz
var ApiKey = "AIzaSyAZEwA9S-kwSsJC4pQOJNIfzWWqEQHpb8A";
// Iframe içinde dönüyoruz
$("div.videoPlay iframe").each(function () {
//Bilgiler kısmını alıyoruz içerisine veri gömmek için
var bilgiler = $(this).siblings(".bilgiler");
//Bilgiler kısmını alıyoruz içerisine veri gömmek için
var istatistikler = $(this).siblings(".istatistikler");
// Iframe içerisinde videonun ID'sini alıyoruz
var srcArray = ($(this).attr('src').split('/'));
var src = srcArray[srcArray.length - 1];
$.ajax({
url: "https://www.googleapis.com/youtube/v3/videos?id=" + src + "&key=" + ApiKey + "&part=snippet,statistics",
dataType: "JSON",
success: function (json) {
//Geriye dönen değerlerimiz alalım item içinde dönelim
$.each(json.items, function (index, item) {
//items içerisinde bulunan snippet içerisinde dönelim
$.each(item.snippet, function (i, d) {
//bilgiler style etiketine sahip divler içerisinde verilerimizi gömelim
bilgiler.children('.' + i).children('span').html(d);
});
//items içerisinde bulunan statistics içerisinde dönelim
$.each(item.statistics, function (i, d) {
//istatistikler style etiketine sahip divler içerisinde verilerimizi gömelim
istatistikler.children('.' + i).children('span').html(d);
});
});
}
})
})
</script>
Arkadaşlar yukarıda açıklama satırlarını yazdım. muhtemelen aşağıdaki kısımları anlamadınız. "i" parametresi bize gelen json verilerinin isimleri. örneğin; statistics altında commentCount gibi. Bu isileri div'lerime class olarak atadım. Her alan kendine ait verileri karşılığı gelen class içerisinde bulunan span içerisine aktarıyor.
bilgiler.children('.' + i).children('span').html(d);
istatistikler.children('.' + i).children('span').html(d);
Vee uygulamamızın önizlemesi
Arkadaşlar umarım faydalı bir paylaşım olmuştur.
Bir sonraki makalede görüşmek üzere
Fatih BÜLBÜL
Facebook Üzerinden Yorumlar