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 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.

Ön koşullar

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

  • Node.js ve npm (yerel bir 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. Bu API'nin girişini 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 Kullanıcı yetkilendirmesi gerektirmeyen API istekleri göndermek için API anahtarını kullanacaksınız. Örneğin, herkese açık bir YouTube kanalı hakkında bilgi almak için kullanıcı yetkilendirmesi gerekmez.

    2. OAuth 2.0 istemci kimliği oluşturun 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ı yetkilendirmesi veya örneği çalıştıran kullanıcıdan özel izinler 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ı açıklayan bir tablo yer alır. Tablodaki ilk giriş, kanal kimliğine göre listeleme sonuçları içindir.

    İlk girişin kod simgesini tıklayarak tam ekran API Gezgini'ni açın ve doldurun.

    channels.list dokümanındaki kanalların kullanım alanlarını listeleyen tabloda kod sembolü bağlantısının konumunu tanımlayan resim. Bu resmin alternatif metni, resmi bir kod simgesi olarak tanımlar ve bu 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, başlangıçta kolaylık sağlamak 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ı kullanırsınız.

      Tam ekran API Gezgini'nde "Kimlik bilgileri"ni ve "API anahtarı" seçeneğinin belirlendiği 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ıp 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. example.html dosyasını tarayıcınızda açın. Ayrıca tarayıcının geliştirici araçlarını da açın. Örneğin, Chrome tarayıcıda "Geliştirici Araçları"nı açın.

    1. JavaScript için Google API'leri istemci kitaplığını yüklemek üzere 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österilir.

    2. API isteğini göndermek için execute (yürüt) düğmesini tıklayın. Geliştirici 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ı yerine kendi YouTube kanalınızla ilgili bilgileri alacak şekilde değiştireceksiniz. Bu istek için kullanıcı yetkilendirmesi gerekir.

  1. API'nin channels.list yöntemine ilişkin belgelere geri dönün.

  2. "Common use cases" (Yaygın kullanım alanları) bölümünde, tablodaki üçüncü girişin kod simgesini tıklayın. Bu kullanım alanı, "kanalım" için list yöntemini çağırmaktır.

  3. Tam ekran API Gezgini'nin sol tarafında, parametrelerin listesini ve ardından Kimlik bilgileri bölümünü görürsünüz. Ancak GoogleDevelopers kanalıyla ilgili bilgi aldığınız örnekten farklı iki değişiklik vardır:

    1. Parametreler bölümünde, id parametre değeri 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ı talimatını verir.

    2. Credentials (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ının işaretli olması gerekir.

      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 dosyasına kaydedin.

    Kodda YOUR_CLIENT_ID dizesini bulun ve 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ıdaki "Geliştirici Araçları") açın.

  7. JavaScript için Google API'leri İstemci Kitaplığı'nı yüklemek ve yetkilendirme akışını başlatmak üzere sayfadaki authorize and load (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