MVCSHARP Ailesi ile yazılım geliştirmeye dair makaleler

Youtube Veri Çekme, Video Bilgileri

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.

CreateProject

Project

 

Arkadaşlar şimdi yukarıdaki gibi Project sekmesine tıklayalım.

ProjectCreate

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

ProjectName

Arkadaşlar Create butonu tıklandıktan sonra sağ alt köşede bir bildirim karşımıza çıkacak. 

activities

Bildirim'e tıkladığımızda (See all activity) projemizin oluşturulduğu ekrana yönlendiriliriz.

CreateProjectGetyoutube

 

Kısa süre sonra projemiz başarı ile oluşturulacaktır.Proje oluşturulduktan sonra tekrar Project sekmesine geçiş yapalım.

SuccessFull

Şimdi oluşturduğumuz uygulamamızı seçelim.

apiReady

 

 

Şimdi Enable an API butonunu tıklayaralım wink

EnableApi

Arkadaşlar şimdi 3 adet Api aktif edicez. Enable an API dedikten sonra karşımıza çıkan api listesinde aşağıdaki no API leri aktif edelim

  • Youtube Analytics API
  • Youtube Data API v3
  • Freebase API

youtubeActivesApis

freeBaseApiActive

EnablingApi

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

CreateNewKey

Create new Key dedikten sonra bize oluşturacağımız key türünü soruyor;

  • Server key : IP üzerinden key oluşturuyoruz.
  • Browser key : Web adresi üzerinden

Diğerleri hakkında bilgim yok arkadaşlar. Biz Server Key diyelim.

ServerKey

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

 allowIPAdress

Evet arkadaşlar Api Key'imiz hazır. Gerekli bilgiler ekranımızda mevcut.

ApiKey

 

Şimdi geldi kodlama kısmına cool

Örneğimizde video sayfamda Iframe olarak gösterdiğim videoların bilgilerini altlarına yazdıracağım.

  • Yayınlanma zamanı
  • Title
  • Description
  • Görüntülenme sayısı
  • Like Sayısı
  • Dislike sayısı
  • Yorum sayısı

 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

OnizlemeYoutubeGet

Arkadaşlar umarım faydalı bir paylaşım olmuştur.

Bir sonraki makalede görüşmek üzere 

Fatih BÜLBÜL

Facebook Üzerinden Yorumlar