New York Times va Google Books API yordamida eng yaxshi sotuvchilar ro'yxatini tuzing

Yagona API har doim kerakli barcha ma'lumotlarga ega bo'lmasligi mumkin. Ushbu maqolada, Google Books API-dan kitob muqovalarini olish uchun New York Times API-dan noyob identifikatorlardan foydalanib, ikkita API-ni birlashtirish bo'yicha qadamlarni o'tamiz.

Siz to'liq loyihani GitHub-da topishingiz va CodePen-da demoni ko'rishingiz mumkin.

Quyida biz qamrab oladigan qadamlar:

  1. New York Times API-dan eng ko'p sotilgan kitoblar ma'lumotlarini oling.
  2. DOMga ro'yxatlarni qo'shish.
  3. Rasmlarga muqovali rasmlarni qo'shish uchun Google Books API-ni ISBN raqamlari bilan so'rang.

Qo'llanma oxirida siz eng yaxshi sotuvchilar ro'yxatiga ega bo'lasiz! Bu erda diqqat:

Kutib turing, lekin nima uchun?

Men birinchi bo'lib ushbu loyiha ustida bir yil oldin ishlaganman. Men API haqida ma'lumotga ega edim va ma'lumotlarga kirish va namoyish qilishni mashq qilish uchun kalitlarni so'radim.

New York Times API-ni o'rganayotganda, men eng ko'p sotiladigan kitoblarning ro'yxatini olish mumkinligini aniqladim. Ro'yxatdagi har bir kitob uchun API joriy ro'yxatni va ro'yxatdagi haftalar sonini taqdim etadi. Shuningdek, u sinopsis va Amazon havolasi kabi ma'lumotlarni taqdim etadi.

Men matnli ma'lumotlarni to'plash imkoniyatiga ega bo'ldim, ammo ro'yxatda kitob muqovalarining tabiiy vizual komponenti yo'q edi. O'sha paytda men oldinga aniq yo'lni ko'rmadim, shuning uchun loyihani javonga qo'ydim.

Bu API-ga kirish foydali, ammo to'liq bo'lmagan misol.

Bu hafta men kitoblar muqovasini qo'shish niyatida qaytdim. Google Books API, noyob identifikatsiya raqami bo'lgan ISBN bilan ta'minlanganda, kitoblar uchun eskizlarni qaytarishini aniqladim. New York Times API omad tilaymiz deb ISBNni taqdim etadi.

Biz biznesdamiz!

Ishni boshlash

Birinchidan, biz eng ko'p sotiladigan badiiy kitoblarning ro'yxatini, ularning har biri haqida bir oz ma'lumotga ega bo'lgan holda yaratmoqchimiz. Kitob ro'yxatda qancha vaqt bo'lganligi haqida ma'lumotni namoyish etish yaxshi bo'lar edi. Shuningdek, biz muqovani ko'rishimiz va foydalanuvchilarga kitob haqida ko'proq ma'lumot olishlari yoki nusxalarini sotib olishlari uchun havola berishimiz kerak.

New York Times API kitob muqovasidan tashqari barcha ma'lumotlarni taqdim etadi. Boshlash uchun bepul NYT API kalitini oling.

Qattiqqo'l adabiy asarlarni sotuvchilar haqidagi eng yaxshi ma'lumotlarni olish uchun biz Fetch API-dan foydalanamiz:

qabul qilish ('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {
    usul: "olish",
  })
  .then (javob => {return return.json ();})
  .then (json => {console.log (json);});

Agar siz brauzerni tekshirsangiz, konsolga kirgan JSON ob'ekti ko'rasiz. Agar ilgari API ishlatmagan bo'lsangiz, ushbu ob'ektni ko'rib chiqish uchun bir oz vaqt sarflash foydali bo'ladi. O'zingiz qidirayotgan narsaga kirish uchun ma'lumotlarni yig'ish odatlanib qolishi mumkin.

Javob "natijalar" ichida 15 ob'ektni qaytaradi. Har bir natija bitta kitob. Aniqlik uchun ushbu misol nytimesBestSellers-ning har bir kitobni aylanib o'tadigan API-javobiga aylantirish uchun .forEach () -dan foydalanadi.

nytimesBestSellers.results.forEach (funktsiya (kitob) {
  var isbn = book.isbns [1] .isbn10;
  var bookInfo = book.book_details [0];
  var lastWeekRank = book.rank_last_week || 'N / a';
  var haftaOnList = book.weeks_on_list || "Ushbu haftada yangi";
  // ...
});

Biz har bir alohida kitobni o'qiyotganda, o'zgaruvchilar ma'lum bir ro'yxatdagi ma'lumotlarga o'rnatiladi va biz ularni kiritishda foydalanamiz.

Yuqoridagi kod ro'yxatida,

  • ISBN raqami kitobning isbns qatorida joylashgan
  • biz IS_N raqamining 10 raqamli versiyasini book_details [0] -dan tanlaymiz.
  • o'tgan hafta reytingi_last_week darajasida va asl qiymati '/ /'
  • Eng yaxshi sotuvchilar ro'yxatidagi haftalar soni, hafta_on_list va ro'yxatda birinchi marta paydo bo'lgan kitoblar uchun "Ushbu haftada yangi" deb belgilangan.

Keyinchalik, biz eng ko'p sotiladigan nomlar ro'yxatiga qo'shish uchun HTML ob'ektini yaratamiz. Loyihangiz jQuery-ni o'z ichiga olganligiga ishonch hosil qiling. CodePen-da siz sozlamalarga o'tishingiz va uni JavaScript paneliga qo'shishingiz mumkin.

var listing =
  '
' +     '

' +       '' +     '

' +     '

' + bookInfo.title + '

' +     '

tomonidan' + bookInfo.author + '

' +     '

' + bookInfo.publisher + '

' +     '

' + bookInfo.description + '

' +     '
' +       '
' +       '

O'tgan hafta:' + lastWeekRank + '

' +       '

Ro'yxatdagi haftalar:' + weekOnList + '

' +     '
' +   '
';
$ ('# eng yaxshi sotuvchi-sarlavhalar'). qo'shimchalar (listing);

Rasm bo'sh qoldirilganiga e'tibor bering. CodePen-da, men Google-dan biron-bir aniqlanmagan javoblarni to'ldirish uchun to'ldiruvchi rasmini qo'shdim.

Va nihoyat, biz kitobning tartib raqamini yangilaymiz va Cover () ni yangilash uchun martabani va ISBN raqamini o'tkazamiz.

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

Endi biz Google Books API-dan eskizni olish bilan shug'ullanadigan updateCover () ni yoza olamiz.

Google Books API

Biz ro'yxatning matn qismlarini to'pladik, lekin kitob muqovasini qo'shish uchun men eng oson yo'llaridan biri bu Google Books API-ga qo'ng'iroq qilish edi. Google Books API-dan API kalitini ushlaganingizga ishonch hosil qiling.

ISBNning 10 raqamli raqamidan foydalanib, biz yana () (fetch) yordamida eskizlar kitobining muqovasidagi rasmni olishimiz mumkin. Avvalgidek, biz qidirayotgan eskiz rasmiga taalluqli bitta havolani topish uchun ob'ektga kirishimiz kerak.

funktsiya yangilanishiCover (id, isbn) {
  qabul qilish ('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "& key =" + apiKey, {
    usul: "olish"
  })
  .then (javob => {return return.json ();})
  .then (ma'lumotlar => {
    var img = data.items [0] .volumeInfo.imageLinks.thumbnail;
    img = img.replace (/ ^ http: \ / \ // i, 'https: //');
    $ ('# cover-' + id) .attr ('src', img);
  })
  .catch (xato => {
    console.log (xato);
  });
}

Rasm saqlangandan so'ng, () HTTP havolalarini xavfsiz HTTPS versiyalariga almashtiring (). Keyin tegishli muqova identifikatorini tanlab, rasm manbasini yangilab kitob muqovasini yangilaymiz.

Uslub

Men SASS-ga qo'shimcha uslublarni qo'shdim. Agar siz CSS yoki SCSS-ga yanada qulayroq bo'lsangiz, kodni tuzish uchun ushbu oynada ochiladigan tugmachadan foydalaning.

Siz ko'rgan JavaScript-ning so'nggi biti logotipning masshtabini boshqaradi. Oynani aylantirishda ushbu kod ishga tushiriladi. Deraza pastga siljiganida, logotip 80pxdan 35pxgacha bo'lgan balandlikni to'playdi.

$ (window) .scroll (funktsiya (hodisa) {
  var scroll = $ (oyna) .scrollTop ();
  if (50> aylantiring) {
    $ ('# Peshlavha'). Css ({'balandlik': '50', 'to'ldirish': '8'});
    $ ('# Nyt-logo'). Css ({'balandlik': '35'});
  } else {
    $ ('# Peshlavha'). Css ({'balandlik': '100', 'to'ldirish': '10'});
    $ ('# Nyt-logo'). Css ({'balandlik': '80'});
  }
});

Yakuniy fikrlar

Loyihaga qaytish va uning xususiyatlariga asoslanish juda qiziqarli bo'ldi. Agar men noldan boshlasam, men bu muammoga boshqacha yondashgan bo'lishim mumkin, ammo bu misol odatiy API qo'ng'iroqlarini qabul qilish va ushbu ishlarga qo'shilish usulini ko'rsatadi.

Aslida, men ushbu loyihani baham ko'rishni istaganimning bir sababi, men API bilan ishlay boshlaganimda, u menga qanday baxtsizlik keltirishi mumkinligini eslab qolgan edi. Hujjatlar bilan sog'indim, qaysi xususiyatlar yoki sintaksis meni to'g'ri yo'nalishga olib borganiga ishonchim komil emas. Men tez-tez Salom Dunyo doirasidan tashqarida biron bir narsaga aniq misol yoki biron bir narsa haqida gapirishni xohlardim.

APIlarning har biri o'ziga xos xizmatni taqdim etadi va ba'zan ularni birlashtirish kerak. Bu bir nechta xizmatlarni birlashtirishning faqat bitta usulidir, ammo umid qilamanki, bu boyitilgan tarkibni yaratish uchun APIlarni birlashtirish usullarini o'rganayotganlarga biroz ilhom bag'ishlaydi.