New York Times ve Google Kitaplar API’sı ile En Çok Satanlar Listesi Oluşturun

Tek bir API her zaman ihtiyacınız olan verilere sahip olmayabilir. Bu makalede, Google Kitaplar API’sinden kitap kapakları almak için New York Times API’sındaki benzersiz tanımlayıcıları kullanarak iki API’yi birleştirme adımlarını inceleyeceğiz.

Projenin tamamını GitHub'da bulabilir ve CodePen'de bir demo görüntüleyebilirsiniz.

İşte ele alacağımız adımlar:

  1. New York Times API'sından en çok satan kitap verilerini alın.
  2. DOM'a listeleri ekleyin.
  3. Listelere kapak görüntüleri eklemek için Google Kitaplar API’sını ISBN numaralarıyla sorgulayın.

Eğitimin sonunda, en iyi satanlar listesine sahip olacaksınız! İşte bir gözetleme:

Bekle ama neden?

İlk önce bir yıl önce bu proje üzerinde çalışmaya başladım. API'leri öğreniyor ve verilere erişip görüntülemek için anahtarlar talep ediyordum.

New York Times API'sini araştırırken en çok satan kitapların bir listesini almanın mümkün olduğunu buldum. Listedeki her kitap için API, listede geçerli bir sıra ve hafta sayısını sağlar. Aynı zamanda bir özet ve bir Amazon bağlantısı gibi bilgiler sunar.

Metinsel bilgileri doldurmayı başardım, ancak listede kitap kapaklarının doğal görsel bileşeni yoktu. O zamanlar açık bir yol görmedim, bu yüzden projeyi rafa koydum.

Bu, bir API'ye erişimin yararlı, ancak eksik olduğu bir örnektir.

Bu hafta kitap kapakları ekleme hedefi ile geri döndüm. Google Kitaplar API’sının, benzersiz bir tanımlayıcı numara olan ISBN’yi sağladıklarında kitapların küçük resimlerini döndüreceğini buldum. Şansınıza göre, New York Times API'si bu ISBN’yi sağlamaktadır.

Biz işteyiz!

Başlamak

İlk olarak, en çok satan kurgu kitaplarının bir listesini oluşturmak istiyoruz. Kitabın listede ne kadar süre kaldığı hakkında bilgi görüntülemek güzel olurdu. Ayrıca kapağı görmemiz ve kullanıcıların kitap hakkında daha fazla bilgi edinmesi veya bir kopya satın alması için bir bağlantı sağlamamız gerekiyor.

New York Times API'sı kitap kapağı hariç tüm bu bilgileri sağlar. Başlamak için ücretsiz bir NYT API anahtarı alın.

Fetch API'yi, kurgu eserlerin ciltli eserleri için en iyi satıcı verilerini elde etmek için kullanırız:

alma ('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {
    yöntem: 'get'
  })
  .then (response => {return response.json ();})
  .then (json => {console.log (json);});

Tarayıcıyı incelerseniz, konsolda kayıtlı bir JSON nesnesi göreceksiniz. Daha önce bir API kullanmadıysanız, bu nesneye bakarak bir an geçirmek yararlı olacaktır. Tam olarak aradığınız şeye erişmek için verilere dayanarak alışmak biraz zaman alabilir.

Cevap “results” içinde 15 nesne döndürür. Her sonuç bir kitaptır. Netlik sağlamak için, bu örnek, her kitabın üzerine döngü ekleyen API yanıtını incelemek için .forEach () işlevini kullanır.

nytimesBestSellers.results.forEach (function (book) {
  var isbn = book.isbns [1] .isbn10;
  var bookInfo = book.book_details [0];
  var lastWeekRank = book.rank_last_week || ‘N / a’;
  var weeksOnList = book.weeks_on_list || 'Bu hafta yeni';
  // ...
});

Her bir kitap için döngü oluştururken değişkenler, giriş yaparken kullanacağımız özel listeler için verilere ayarlanır.

Yukarıdaki kod listesinde,

  • ISBN numarası kitabın isbns dizisinde bulunur
  • book_details [0] 'da ISBN numarasının 10 basamaklı versiyonunu seçtik
  • geçen hafta sıralama rank_last_week'te ve varsayılan olarak ‘n / a’ olarak
  • en çok satanlar listesinde olduğu haftaların sayısı, weeks_on_list'te ve listede ilk kez görünen kitaplar için varsayılan olarak “Bu hafta yeni” olarak ayarlandı.

Daha sonra, en çok satanlar listesine listesine eklemek için bir HTML nesnesi yapabiliriz. Projenizin jQuery içerdiğinden emin olun. CodePen'de ayarlara gidip JavaScript paneline ekleyebilirsiniz.

var listeleme =
  '
' +     '

' +       '' +     '

' +     '

' + bookInfo.title + '

' +     '

' + tarafından bookInfo.author + '

' +     '

' + bookInfo.publisher + '

' +     '

' + bookInfo.description + '

' +     '
' +       '
' +       '

Geçen Hafta:' + lastWeekRank + '

' +       '

Listedeki hafta:' + weeksOnList + '

' +     '
' +   '';
$ ( '# Best-seller-başlıkları') ekleme (listeleme).;

Resmin boş bırakıldığına dikkat edin. CodePen'de, Google’dan tanımsız yanıtları doldurmak için bir yer tutucu resim ekledim.

Son olarak, kitap sıralama numarasını güncelleyebilir ve sıralama ile ISBN numarası boyunca updateCover () öğesine geçebiliriz.

$ ('#' + book.rank) .attr ('nyt-rank', book.rank);
updateCover (book.rank, isbn);

Artık Google Kitaplar API’sinden küçük resmi almayı kaldıracak updateCover () yazabiliriz.

Google Kitaplar API'sı

Girişin metin bölümlerini topladık, ancak bir kitap kapağı eklemek için, karşılaştığım en kolay yollardan biri Google Kitaplar API’sini kullanmaktı. Google Kitaplar API’sinden bir API Anahtarı aldığınızdan emin olun.

10 basamaklı ISBN numarasını kullanarak tekrar fetch () kullanarak bir küçük resim kitap kapağı resmi elde edebiliriz. Daha önce olduğu gibi, aradığımız küçük resmi gösteren tek bir bağlantıyı bulmak için nesneyi incelemeliyiz:

updateCover işlevi (id, isbn) {
  alma ('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "& key =" + apiKey, {
    yöntem: 'get'
  })
  .then (response => {return response.json ();})
  .then (data => {
    var img = data.items [0] .volumeInfo.imageLinks.thumbnail;
    img = img.replace (/ ^ http: \ / \ // i, 'https: //');
    $ ('# cover-' + id) .attr ('src', img);
  })
  .catch (error => {
    console.log (hata);
  });
}

Görüntü güvende olduktan sonra, change (), HTTPS sürümlerini korumak için tüm HTTP bağlantılarını değiştirir. Daha sonra uygun kapak kimliğini seçerek ve görüntü kaynağını güncelleyerek kitap kapağını güncelleriz.

stil

SASS ile ek stiller ekledim. CSS veya SCSS'de daha rahatsanız, kodu derlemek için bu penceredeki açılır düğmeyi kullanın.

Göreceğiniz en son JavaScript bit logo ölçeklendirmesini kontrol eder. Bu kod, pencere kaydırıldığında tetiklenir. Pencere aşağı kayarken, logo 80 pikselden 35 piksele kadar yoğunlaşır.

$ (window) .scroll (function (event) {
  var scroll = $ (window) .scrollTop ();
  eğer (kaydırma> 50) {
    $ ("# Masthead") css ({"yükseklik": "50", "dolgu": "8"});
    . $ ( ‘# Nyt-logo’) css ({ 'height:’35' });
  } Başka {
    $ ("# Masthead") css ({"yükseklik": "100", "dolgu": "10"});
    . $ ( ‘# Nyt-logo’) css ({ 'height:’80' });
  }
});

Son düşünceler

Bir projeye geri dönmek ve özelliklerini geliştirmek heyecan vericiydi. Sıfırdan başlasam, bu soruna farklı bir yaklaşımla yaklaşmış olsam da, bu örnek tipik bir API çağrısı almanın ve bu çalışmaya eklemenin bir yolunu gösteriyor.

Aslında, özellikle bu projeyi paylaşmak istememin nedenlerinden biri, API'lerle çalışmaya başladığımda benim için ne kadar sinir bozucu olabileceğini hatırlamaktı. Hangi özelliklerin veya söz diziminin beni doğru yöne yönlendirdiğinden emin değilim, belgelerle bunaldım. Sık sık Merhaba Dünya'nın ötesinde bir dokunuşun açık bir örneğini ya da bir şeyin içinden geçmesini diledim.

API'lerin her biri belirli bir hizmet sunar ve bazen bunları birleştirmek gerekir. Bu, birden fazla hizmeti bir araya getirmenin yalnızca bir yoludur, ancak daha zengin içerik oluşturmak için API'leri birleştirmenin yollarını keşfetmek için biraz ilham kaynağı olacağını umuyorum.