JavaScript Hızlı Başlangıç Kılavuzu

Bu hızlı başlangıç kılavuzunda, YouTube Data API'ye istekte bulunan basit bir sayfanın nasıl ayarlanacağı açıklanmaktadır. Bu hızlı başlangıç kılavuzunda aslında iki API isteğinin nasıl yapılacağı açıklanmaktadır:

  1. GoogleDevelopers YouTube kanalıyla ilgili bilgileri almak için uygulamanızı tanımlayan bir API anahtarı kullanacaksınız.
  2. Kendi YouTube kanalınızla ilgili bilgileri alan yetkili bir istek göndermek için OAuth 2.0 istemci kimliği kullanırsınız.
kullanım alanları ve kod örnekleri aracına bakın.

Ön koşullar

Bu hızlı başlangıç kılavuzunu çalıştırmak için ihtiyacınız olanlar:

  • Node.js ve npm (yerel web sunucusu çalıştırmak için)
  • İnternet erişimi ve web tarayıcısı
  • Google Hesabı

1. adım: Projenizi ve kimlik bilgilerinizi ayarlayın

Cloud Console'da bir proje oluşturun veya seçin. Projeniz için Cloud Console'da aşağıdaki görevleri tamamlayın:

  1. Kitaplık panelinde YouTube Data API v3'ü arayın. İlgili API'nin listelemesini tıklayın ve API'nin projeniz için etkinleştirildiğinden emin olun.

  2. Kimlik bilgileri panelinde iki kimlik bilgisi oluşturun:

    1. API anahtarı oluşturma API anahtarını, kullanıcı yetkilendirmesi gerektirmeyen API istekleri yapmak için kullanırsınız. Örneğin, herkese açık bir YouTube kanalıyla ilgili bilgileri almak için kullanıcı yetkilendirmesi gerekmez.

    2. OAuth 2.0 istemci kimliği oluşturma Uygulama türünü Web uygulaması olarak ayarlayın. Kullanıcı yetkilendirmesi gerektiren istekler için OAuth 2.0 kimlik bilgilerini kullanmanız gerekir. Örneğin, şu anda kimliği doğrulanmış kullanıcının YouTube kanalıyla ilgili bilgileri almak için kullanıcı yetkilendirmesi gerekir.

      Yetkilendirilmiş JavaScript kaynakları alanına URL'yi girin http://localhost:8000. Yetkilendirilmiş yönlendirme URI'leri alanını boş bırakabilirsiniz.

2. adım: Örneği ayarlayın ve çalıştırın

GoogleDevelopers YouTube kanalı hakkında bilgi almak için yan paneldeki API Gezgini widget'ını kullanarak örnek kod elde edin. Bu istek, uygulamanızı tanımlamak için bir API anahtarı kullanır ve kullanıcının yetkilendirmesini ya da örneği çalıştıran kullanıcıdan herhangi bir özel izin alınmasını gerektirmez.

  1. API'nin channels.list yöntemiyle ilgili dokümanları açın.

  2. Bu sayfadaki "Yaygın kullanım alanları" bölümünde, yöntemin yaygın olarak kullanıldığı çeşitli yolların açıklandığı bir tablo yer alır. Tablodaki ilk giriş, kanal kimliğine göre listeleme sonuçları içindir.

    Tam ekran API Gezgini'ni açıp doldurmak için ilk listelemenin kod simgesini tıklayın.

    Kanallar.list dokümanındaki kullanım alanlarını listeleyen tabloda kod sembolü bağlantısının konumunu belirten resim. Bu resmin alternatif metni, resmi bir kod sembolü olarak tanımlar ve bağlantıyla ilişkili kullanım alanını belirtir.

  3. Tam ekran API Gezgini'nin sol tarafında şunlar gösterilir:

    1. İstek parametreleri başlığının altında, yöntemin desteklediği parametrelerin listesi yer alır. part ve id parametre değerleri ayarlanmalıdır. id parametre değeri, UC_x5XG1OV2P6uZZ5FSM9Ttw, GoogleDevelopers YouTube kanalının kimliğidir.

    2. Parametrelerin altında Kimlik Bilgileri adlı bir bölüm bulunur. Bu bölümdeki açılır menüde API anahtarı değeri gösterilmelidir. API Gezgini, kullanmaya başlamanızı kolaylaştırmak için varsayılan olarak demo kimlik bilgilerini kullanır. Ancak örneği yerel olarak çalıştırmak için kendi API anahtarınızı kullanacaksınız.

      Tam ekran API Gezgini'nde "Kimlik Bilgileri"ni ve "API anahtarı" seçeneğinin belirlenmiş olduğu açılır menüyü gösteren resim.

  4. Tam ekran API Gezgini'nin sağ tarafında, farklı dillerde kod örnekleri içeren sekmeler gösterilir. JavaScript sekmesini seçin.

  5. Kod örneğini kopyalayın ve example.html adlı bir dosyaya kaydedin.

  6. İndirdiğiniz örnekte YOUR_API_KEY dizesini bulun ve bu dizeyi bu hızlı başlangıcın 1. adımında oluşturduğunuz API anahtarıyla değiştirin.

  7. Çalışma dizininizden aşağıdaki komutu kullanarak web sunucusunu başlatın:

    npx http-server -p 8000

  8. Tarayıcınızda example.html dosyasını açın. Ayrıca tarayıcının geliştirici araçlarını (ör. Chrome tarayıcıdaki "Geliştirici Araçları") açın.

    1. Google APIs Client Library for JavaScript'i yüklemek için sayfadaki load (yükle) düğmesini tıklayın. Düğmeyi tıkladıktan sonra geliştirici konsolunda, GAPI istemcisinin yüklendiğini belirten bir not gösterilmelidir.

    2. API isteğini göndermek için execute (yürüt) düğmesini tıklayın. Geliştiricinin konsolunda API yanıtı gösterilir.

3. adım: Yetkilendirilmiş bir istek çalıştırın

Bu adımda, kod örneğinizi GoogleDevelopers YouTube kanalıyla ilgili bilgileri almak yerine sizin YouTube kanalınızla ilgili bilgileri alacak şekilde değiştirirsiniz. Bu istek için kullanıcı yetkilendirmesi gerekiyor.

  1. API'nin channels.list yöntemiyle ilgili belgelere geri dönün.

  2. "Yaygın kullanım alanları" bölümünde, tablodaki üçüncü girişin kod simgesini tıklayın. Bu kullanım alanında, "mychannel" için list yöntemi çağrılır.

  3. Yine tam ekran API Gezgini'nin sol tarafında, Kimlik Bilgileri bölümünün ardından bir parametre listesi görürsünüz. Ancak, GoogleDevelopers kanalı hakkında bilgi aldığınız örnekte iki değişiklik var:

    1. Parametreler bölümünde, id parametre değeri ayarlanmak yerine mine parametre değeri true olarak ayarlanmalıdır. Bu, API sunucusuna, kimliği doğrulanmış kullanıcının kanalıyla ilgili bilgileri almasını söyler.

    2. Kimlik bilgileri bölümündeki açılır menüde Google OAuth 2.0 seçeneği belirlenmelidir.

      Ayrıca, Kapsamları göster bağlantısını tıklarsanız https://www.googleapis.com/auth/youtube.readonly kapsamı işaretlenmelidir.

      Tam ekran API Gezgini'ndeki kapsamları ve "Google OAuth 2.0" kimlik bilgilerini kullanma seçeneğinin belirlendiğini gösteren resim.

  4. Önceki örnekte olduğu gibi JavaScript sekmesini seçin, kod örneğini kopyalayın ve example.html olarak kaydedin.

    Kodda YOUR_CLIENT_ID dizesini bulun ve bu dizeyi, bu hızlı başlangıç kılavuzunun 1. adımında oluşturduğunuz istemci kimliğiyle değiştirin.

  5. Çalışma dizininizden aşağıdaki komutu kullanarak web sunucusunu başlatın:

    npx http-server -p 8000

  6. Tarayıcınızda http://localhost:8000/example.html dosyasına gidin. Tarayıcının geliştirici araçlarını (ör. Chrome tarayıcısındaki "Geliştirici Araçları") açın.

  7. Google API'leri JavaScript İstemci Kitaplığı'nı yüklemek ve yetkilendirme akışını başlatmak için sayfadaki yetkilendir ve yükle düğmesini tıklayın. Uygulamaya YouTube hesabınızdaki verileri okuma izni vermeniz istenir.

    İzni verirseniz geliştirici konsolunda oturum açma işleminin başarılı olduğunu ve API istemcisinin yüklendiğini belirten mesajlar gösterilir.

  8. API isteğini göndermek için execute (yürüt) düğmesini tıklayın. Geliştiricinin konsolunda API yanıtı gösterilir.

Daha fazla bilgi