Xây dựng danh sách người bán hàng tốt nhất với New York Times và Google Books API

Một API duy nhất có thể không phải lúc nào cũng có tất cả dữ liệu bạn cần. Trong bài viết này, chúng tôi sẽ hướng dẫn các bước để kết hợp hai API bằng cách sử dụng các mã định danh duy nhất từ ​​API New York Times để lấy bìa sách từ API Google Sách.

Bạn có thể tìm thấy toàn bộ dự án trên GitHub và xem bản demo trên CodePen.

Dưới đây là các bước chúng tôi bao gồm:

1. Lấy dữ liệu sách bán chạy nhất từ ​​API New York Times.
2. Nối các danh sách vào DOM.
3. Truy vấn API Google Sách bằng số ISBN để thêm ảnh bìa vào danh sách.

Vào cuối hướng dẫn, bạn sẽ có một danh sách người bán hàng tốt nhất! Đây là một cái nhìn trộm:

Chờ đã, nhưng tại sao?

Lần đầu tiên tôi bắt đầu làm việc với dự án này hơn một năm trước. Tôi đã học về API và yêu cầu các khóa để thực hành truy cập và hiển thị dữ liệu.

Trong khi khám phá API của New York Times, tôi thấy rằng có thể có được một danh sách các cuốn sách bán chạy nhất. Đối với mỗi cuốn sách trong danh sách, API cung cấp thứ hạng và số tuần hiện tại trong danh sách. Nó cũng cung cấp thông tin như tóm tắt và liên kết Amazon.

Tôi đã có thể điền thông tin văn bản, nhưng danh sách thiếu thành phần hình ảnh tự nhiên của bìa sách. Lúc đó, tôi đã thấy một con đường rõ ràng phía trước, vì vậy tôi đã đặt dự án lên kệ.

Đây là một ví dụ trong đó việc có quyền truy cập vào API là hữu ích, nhưng không đầy đủ.

Tuần này, tôi trở lại với mục tiêu thêm bìa sách. Tôi thấy rằng Google Sách API sẽ trả lại hình thu nhỏ cho sách khi được cung cấp một mã số, một số nhận dạng duy nhất. Vì may mắn sẽ có nó, API của Thời báo New York cung cấp mã số đó.

Chúng tôi làm kinh doanh!

Bắt đầu

Đầu tiên, chúng tôi muốn tạo một danh sách các cuốn sách viễn tưởng bán chạy nhất với một chút thông tin về mỗi cuốn sách. Sẽ thật tuyệt khi hiển thị thông tin về thời gian cuốn sách nằm trong danh sách. Chúng tôi cũng cần xem bìa và cung cấp một liên kết để người dùng tìm hiểu thêm về cuốn sách hoặc mua một bản sao.

API của Thời báo New York cung cấp tất cả thông tin đó ngoại trừ bìa sách. Lấy khóa API NYT miễn phí để bắt đầu.

Chúng tôi sẽ sử dụng API Fetch để có được dữ liệu bán chạy nhất cho các tác phẩm hư cấu bìa cứng:

tìm nạp ('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {
    phương thức: 'nhận',
  })
  .then (hồi đáp => {return answer.json ();})
  .then (json => {console.log (json);});

Nếu bạn kiểm tra trình duyệt, bạn sẽ thấy một đối tượng JSON được ghi lại trong bảng điều khiển. Nếu bạn đã sử dụng API trước đó, sẽ rất hữu ích khi dành một chút thời gian để xem qua đối tượng này. Truy cập dữ liệu để truy cập chính xác những gì bạn đang tìm kiếm có thể mất một thời gian để làm quen.

Phản hồi trả về 15 đối tượng trong kết quả của hệ thống. Mỗi kết quả là một cuốn sách. Để rõ ràng, ví dụ này sử dụng .forEach () để đi sâu vào phản hồi API nytimesBestSeller lặp trên mỗi cuốn sách.

nytimesBestSeller.results.forEach (chức năng (sách) {
  var isbn = book.vdns [1] .vdn10;
  var bookInfo = book.book_details [0];
  var lastWeekRank = book.rank_last_week || ‘N / a
  var weekOnList = book.week_on_list || ‘Mới trong tuần này;

  // ...

});

Khi chúng tôi lặp qua từng cuốn sách riêng lẻ, các biến được đặt thành dữ liệu cho danh sách cụ thể của chúng, mà chúng tôi sẽ sử dụng khi thực hiện mục nhập.

Trong danh sách mã ở trên,

• số ISBN nằm trong mảng Sách isbns
• chúng tôi chọn phiên bản gồm 10 chữ số của số ISBN tại book_details [0]
• thứ hạng tuần trước là tại Rank_last_week và mặc định là ‘n / a
• số tuần đã có trong danh sách bán chạy nhất, là vào tuần_on_list và mặc định cho Tuần mới trong tuần này đối với những cuốn sách xuất hiện lần đầu tiên trong danh sách

Tiếp theo, chúng ta có thể tạo một đối tượng HTML để thêm vào danh sách tiêu đề bán chạy nhất. Hãy chắc chắn rằng dự án của bạn bao gồm jQuery. Trên CodePen, bạn có thể vào cài đặt và thêm nó vào bảng điều khiển JavaScript.

danh sách var =
  '
' +
    '
' +
      '' +
    '' +
    '
  ' +
    '
 Bởi' + bookInfo. Tác giả + '' +
    '
' + bookInfo.publisher + '' +
    '
' + bookInfo.descrip + '' +
    '
' +
      '
' +
      '
 Tuần trước:' + lastWeekRank + '' +
      '
 Tuần trong danh sách:' + weekOnList + '' +
    '' +
  '';

$ ('# best-sell-title'). chắp thêm (liệt kê);

Lưu ý rằng hình ảnh được để trống. Trên CodePen, I tíchve đã thêm hình ảnh giữ chỗ để điền vào bất kỳ phản hồi không xác định nào từ Google.

Cuối cùng, chúng tôi sẽ có thể cập nhật số thứ hạng của cuốn sách và chuyển dọc theo thứ hạng và số ISBN để updateCover ().

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

updateCover (book.rank, isbn);

Bây giờ chúng tôi có thể viết updateCover (), sẽ xử lý truy xuất hình thu nhỏ từ API Google Sách.

API sách của Google

Chúng tôi đã tập hợp các phần văn bản của danh sách, nhưng để thêm bìa sách, một trong những cách dễ nhất tôi đã gặp là gọi API Google Sách. Hãy chắc chắn lấy Khóa API từ API Google Sách.

Sử dụng số ISBN gồm 10 chữ số, chúng ta có thể lấy lại hình ảnh bìa cuốn sách thu nhỏ bằng cách sử dụng fetch (). Như trước đây, chúng ta phải đi sâu vào đối tượng để tìm liên kết đơn tham chiếu hình ảnh thu nhỏ mà chúng tôi đang tìm kiếm:

chức năng updateCover (id, isbn) {
  tìm nạp ('https://www.googleapis.com/books/v1/volume?q=vdn:' + isbn + "& key =" + apiKey, {
    phương pháp: 'nhận'
  })
  .then (hồi đáp => {return answer.json ();})
  .then (dữ liệu => {
    var img = data.items [0] .volumeInfo.imageLinks.thumbnail;
    img = img.replace (/ ^ http: \ / \ // i, 'https: //');
    $ ('# cover-' + id) .attr ('src', img);
  })
  .catch (lỗi => {
    console.log (lỗi);
  });
}

Sau khi hình ảnh được bảo mật, thay thế () hoán đổi bất kỳ liên kết HTTP nào thành các phiên bản HTTPS an toàn. Sau đó, chúng tôi cập nhật bìa sách bằng cách chọn ID bìa phù hợp và cập nhật nguồn hình ảnh của nó.

Phong cách

Tôi đã thêm các kiểu bổ sung với SASS. Nếu bạn cảm thấy thoải mái hơn với CSS hoặc SCSS, hãy sử dụng nút thả xuống trong cửa sổ đó để biên dịch mã.

Bit cuối cùng của JavaScript mà bạn sẽ thấy điều khiển tỷ lệ logo. Mã này được kích hoạt khi cửa sổ cuộn. Khi cửa sổ cuộn xuống, logo ngưng tụ từ độ cao 80px xuống 35px.

$ (cửa sổ) .scroll (hàm (sự kiện) {
  var cuộn = $ (cửa sổ) .scrollTop ();
  if (cuộn> 50) {
    $ (‘# Masthead xông). Css ({‘ height,: 50, 'padding đệm: ‘8,});
    $ (# Nyt-logo đấm). Css ({‘height, hồi: 35 '});
  } khác {
    $ (# Masthead xông). Css ({‘height, :: 100 ',‘ padding
    $ (# Nyt-logo đấm). Css ({‘height, hồi: 80 '});
  }
});

Suy nghĩ cuối cùng

Thật thú vị khi trở lại một dự án và xây dựng trên các tính năng của nó. Mặc dù tôi có thể đã tiếp cận vấn đề này theo cách khác nếu tôi bắt đầu từ đầu, ví dụ này cho thấy một cách để thực hiện một cuộc gọi API thông thường và thêm vào công việc đó.

Trên thực tế, một lý do tôi đặc biệt muốn chia sẻ dự án này là nhớ rằng nó có thể gây khó chịu cho tôi như thế nào khi tôi bắt đầu làm việc với API. Tôi đã bị choáng ngợp với tài liệu này, không chắc các tính năng hoặc cú pháp nào đang đưa tôi đi đúng hướng. Tôi thường mong muốn có một ví dụ rõ ràng hoặc xem qua một cái gì đó vượt ra ngoài Thế giới Hello.

Mỗi API cung cấp một dịch vụ cụ thể và đôi khi nó cần thiết để kết hợp chúng. Đây chỉ là một cách để kết hợp nhiều dịch vụ, nhưng tôi hy vọng nó có một chút cảm hứng cho những cách khám phá kết hợp API để tạo ra nội dung phong phú hơn.