أنشئ قائمة أفضل الكتب مبيعًا باستخدام New York Times و Google Books API

قد لا تحتوي واجهة برمجة تطبيقات واحدة دائمًا على جميع البيانات التي تحتاجها. في هذه المقالة ، سنتعرف على خطوات دمج واجهات برمجة التطبيقات (APIs) باستخدام معرفات فريدة من واجهة برمجة تطبيقات New York Times لانتزاع أغلفة الكتب من واجهة برمجة تطبيقات كتب Google.

يمكنك العثور على المشروع الكامل على GitHub وعرض عرض توضيحي على CodePen.

فيما يلي الخطوات التي سنغطيها:

  1. جلب أفضل الكتب مبيعًا من واجهة برمجة تطبيقات New York Times.
  2. إلحاق قوائم DOM.
  3. الاستعلام عن واجهة برمجة تطبيقات كتب Google باستخدام أرقام ISBN لإضافة صور غلاف إلى القوائم.

في نهاية البرنامج التعليمي ، سيكون لديك قائمة أفضل الكتب مبيعًا! إليك نظرة خاطفة:

انتظر ، ولكن لماذا؟

بدأت العمل في هذا المشروع لأول مرة منذ أكثر من عام بقليل. كنت أتعلم واجهات برمجة التطبيقات وأطلب المفاتيح لممارسة الوصول إلى البيانات وعرضها.

أثناء استكشاف واجهة برمجة تطبيقات New York Times ، وجدت أنه من الممكن الحصول على قائمة بأفضل الكتب مبيعًا. لكل كتاب في القائمة ، يوفر API تصنيفًا حاليًا وعدد الأسابيع في القائمة. كما يوفر معلومات مثل ملخص ورابط أمازون.

تمكنت من نشر المعلومات النصية ، لكن القائمة تفتقر إلى المكون المرئي الطبيعي لأغلفة الكتب. في ذلك الوقت ، لم أر طريقًا واضحًا للأمام ، لذلك وضعت المشروع على الرف.

هذا مثيل حيث يكون الوصول إلى API مفيدًا ، لكنه غير مكتمل.

عدت هذا الأسبوع بهدف إضافة أغلفة الكتب. لقد وجدت أن Google Books API سيعيد الصور المصغرة للكتب عند توفير رقم ISBN ، وهو رقم تعريف فريد. كما يحظى الحظ ، فإن واجهة برمجة تطبيقات New York Times توفر رقم ISBN.

نحن في الأعمال التجارية!

ابدء

أولاً ، نريد إنشاء قائمة من أفضل الكتب الخيالية مبيعًا مع القليل من المعلومات حول كل منها. سيكون من الجميل عرض معلومات حول مدة بقاء الكتاب في القائمة. نحتاج أيضًا إلى رؤية الغطاء وتوفير رابط للمستخدمين لمعرفة المزيد حول الكتاب أو شراء نسخة.

توفر واجهة برمجة تطبيقات New York Times جميع هذه المعلومات باستثناء غلاف الكتاب. احصل على مفتاح NYT API مجاني للبدء.

سنستخدم واجهة برمجة التطبيقات Fetch للحصول على أفضل بيانات عن البائع لأعمال الخيال:

جلب ('https://api.nytimes.com/svc/books/v3/lists.json؟list-name=hardcover-fiction&api-key=' + apiKey ، {
    الطريقة: "احصل" ،
  })
  .then (response => {return response.json ()؛})
  .then (json => {console.log (json)؛})؛

إذا قمت بفحص المتصفح ، فسترى كائن JSON مسجلاً في وحدة التحكم. إذا لم تكن قد استخدمت API من قبل ، فسيكون من المفيد قضاء بعض الوقت في البحث عن هذا الكائن. قد يستغرق اختراق البيانات للوصول إلى ما تبحث عنه بالضبط بعض الوقت لتعتاد عليه.

تُرجع الاستجابة 15 كائنًا ضمن "النتائج". كل نتيجة هي كتاب واحد. للتوضيح ، يستخدم هذا المثال .forEach () للانتقال لأسفل إلى استجابة nytimesBestSellers استجابة API عبر كل كتاب.

nytimesBestSellers.results.forEach (دالة (كتاب) {
  var isbn = book.isbns [1] .isbn10؛
  var bookInfo = book.book_details [0]؛
  var lastWeekRank = book.rank_last_week || 'ن / أ'؛
  var weeksOnList = book.weeks_on_list || "جديد هذا الأسبوع" ؛
  // ...
})؛

نظرًا لتكرار كل كتاب فردي ، يتم تعيين المتغيرات على البيانات الخاصة بقوائمها المحددة ، والتي سنستخدمها عند إنشاء الإدخال.

في رمز القائمة أعلاه ،

  • يقع رقم ISBN في صفيف isbns للكتاب
  • نختار الإصدار المكون من 10 أرقام لرقم ISBN في book_details [0]
  • تصنيف الأسبوع الماضي هو في rank_last_week ويتم تعيين الإعدادات الافتراضية لـ 'n / a'
  • عدد الأسابيع التي كانت مدرجة في قائمة أفضل الكتب مبيعًا ، وهو في قائمة_الأسبوع_قائمة افتراضياً إلى "جديد هذا الأسبوع" للكتب التي تظهر في القائمة لأول مرة

بعد ذلك ، يمكننا أن نجعل كائن HTML لإلحاق قائمة أفضل الكتب مبيعًا. تأكد من أن مشروعك يتضمن مسج. في CodePen ، يمكنك الانتقال إلى الإعدادات وإضافتها في لوحة JavaScript.

فار القائمة =
  '
' +     "

" +       '' +     "

" +     '

' + bookInfo.title + '

' +     '

بواسطة' + bookInfo.author + '

' +     '

' + bookInfo.publisher + '

' +     '

' + bookInfo.description + '

' +     '
' +       "
" +       '

الأسبوع الماضي:' + lastWeekRank + '

' +       '

أسابيع في القائمة:' + weeksOnList + '

' +     "
" +   '
$ ( '# أفضل الكتب مبيعا، عناوين') إلحاقي (سرد)؛

لاحظ أن الصورة تركت فارغة. في CodePen ، أضفت صورة عنصر نائب لملء أي ردود غير محددة من Google.

أخيرًا ، يمكننا تحديث رقم تصنيف الكتاب وتمرير الرقم ورقم ISBN إلى updateCover ().

$ ('#' + book.rank) .attr ('nyt-rank'، book.rank)؛
updateCover (book.rank، isbn)؛

يمكننا الآن كتابة updateCover () ، والذي سيتولى استرداد الصورة المصغرة من واجهة برمجة تطبيقات كتب Google.

واجهة برمجة تطبيقات كتب Google

لقد جمعنا الأجزاء النصية من بطاقة البيانات ، ولكن لإضافة غلاف كتاب ، كانت إحدى أسهل الطرق التي واجهتني هي الاتصال على واجهة برمجة تطبيقات كتب Google. تأكد من الحصول على مفتاح API من واجهة برمجة تطبيقات كتب Google.

باستخدام رقم ISBN المكون من 10 أرقام ، يمكننا الحصول على صورة غلاف كتاب مصغر باستخدام fetch () مرة أخرى. كما في السابق ، يتعين علينا البحث في الكائن للعثور على الرابط الوحيد الذي يشير إلى الصورة المصغرة التي نبحث عنها:

وظيفة updateCover (المعرف ، isbn) {
  جلب ('https://www.googleapis.com/books/v1/volumes؟q=isbn:' + isbn + "& key =" + apiKey، {
    الطريقة: "احصل"
  })
  .then (response => {return response.json ()؛})
  .ثم (بيانات => {
    var img = data.items [0] .volumeInfo.imageLinks.thumbnail؛
    img = img.replace (/ ^ http: \ / \ // i، 'https: //')؛
    $ ('# cover-' + id) .attr ('src'، img)؛
  })
  .catch (error => {
    console.log (خطأ)؛
  })؛
}

بعد تأمين الصورة ، استبدل () تبديل أي روابط HTTP لتأمين إصدارات HTTPS. نقوم بعد ذلك بتحديث غلاف الكتاب عن طريق تحديد معرف الغلاف المناسب وتحديث مصدر الصورة الخاص به.

أسلوب

لقد أضفت أنماطًا إضافية باستخدام SASS. إذا كنت أكثر راحة مع CSS أو SCSS ، فاستخدم الزر المنسدل في تلك النافذة لتجميع الشفرة.

يتحكم آخر جزء من جافا سكريبت في JavaScript في تغيير حجم الشعار. يتم تشغيل هذا الرمز عند تمرير الإطار. أثناء التمرير لأسفل ، يتكثف الشعار من ارتفاع 80 بكسل إلى 35 بكسل.

$ (window) .scroll (function (event) {
  var scroll = $ (window) .scrollTop ()؛
  إذا (انتقل> 50) {
    $ ('masthead'). css ({'' height ':' 50 '،' padding ': ‘8'})؛
    . $ ( '# نيويورك تايمز شعار') المغلق ({ 'ارتفاع': '35'})؛
  } آخر {
    $ ('masthead'). css ({'' height ':' 100 '،' padding ':' 10 '})؛
    . $ ( '# نيويورك تايمز شعار') المغلق ({ 'ارتفاع': '80'})؛
  }
})؛

افكار اخيرة

كان من المثير العودة إلى المشروع والبناء على معالمه. على الرغم من أنني قد تعاملت مع هذه المشكلة بشكل مختلف إذا كنت قد بدأت من نقطة الصفر ، فإن هذا المثال يوضح طريقة لإجراء مكالمة نموذجية لواجهة برمجة التطبيقات وإضافة ذلك العمل.

في الواقع ، كان أحد الأسباب التي كنت أرغب في مشاركة هذا المشروع بشكل خاص تذكرها هو مدى إحباطه عندما بدأت العمل مع واجهات برمجة التطبيقات. كنت غارقًا في الوثائق ، ولست متأكداً من الميزات أو بناء الجملة التي كانت تقودني في الاتجاه الصحيح. كنت أتمنى غالبًا أن أضرب مثالًا واضحًا أو أتصفح شيئًا ما بعيدًا عن Hello World.

توفر واجهات برمجة التطبيقات (APIs) خدمة محددة ، وفي بعض الأحيان يكون من الضروري دمجها. هذه مجرد طريقة واحدة لجمع الخدمات المتعددة ، لكنني آمل أن تكون مصدر إلهام لهؤلاء الذين يستكشفون طرقًا لدمج واجهات برمجة التطبيقات لإنشاء محتوى أكثر ثراءً.