Google Books - API

Question

Postępuje zgodnie z dokumentacją Googla: https://developers.google.com/books/docs/viewer/developers_guide

Zmienna isbn zawiera poprawny identyfikator, wydaje mi ię że cała reszta również jest w porządku. Pojawia się taki błąd: 

readBtns.forEach(btn => {
  btn.addEventListener('click', (event) => {
    let title = event.path[2].querySelector('.title-ex').textContent;
    let gbUri = 'https://www.googleapis.com/books/v1/volumes?key=MY_KEY&cx=017576662512468239146:omuauf_lfve&q=' + title;
    fetch(gbUri).then(response => response.json()).then(response => {
      //let gbId = response.items[0].id;
      let isbn = response.items[0].volumeInfo.industryIdentifiers[1].identifier;
      google.books.load();
      google.books.setOnLoadCallback(initialize(isbn));
    });
  });
});

function initialize(isbn) {
  const viewerCanvas = document.createElement('div');
  viewerCanvas.id = 'viewerCanvas';
  const viewer = new google.books.DefaultViewer(viewerCanvas);
  viewer.load('ISBN:' + isbn, BookNotLoaded, BookLoaded);
};

 

Answer 1

Postępuje zgodnie z dokumentacją Googla:

google.books.setOnLoadCallback(initialize(isbn));

Chyba nie do końca ;) W dokumentacji do metody setOnLoadCallback przekazywana jest referencja do funkcji initialize a nie wynik jej wywołania:

google.books.setOnLoadCallback(initialize);

Jeśli chcesz przekazać dodatkowy parametr, to możesz przekazać funkcję anonimową:

google.books.setOnLoadCallback(() => initialize(isbn));

---

P.S. Na przyszłość, nie umieszczaj kluczy do API w kodzie, który wstawiasz w jakiekolwiek publiczne miejsca w sieci - zastąpiłem ten fragment kodu w pytaniu frazą MY_KEY.

Comments

Wielkie dzięki za pomoc. Faktycznie zapomniałem o tym kluczu.

---

Zmieniłem jedynie tę funkcję anonimową. Teraz zamiast poprzedniego pojawił się taki błąd:

---

Zmieniłem jedynie tę funkcję anonimową.

Nie rozumiem, zmieniłeś funkcję anonimową na co? :) Pokaż kod po zmianach. 

---

Użyłem funkcji anonimowej, żeby przekazać parametr isbn. 

readBtns.forEach(btn => {
  btn.addEventListener('click', (event) => {
    let title = event.path[2].querySelector('.title-ex').textContent;
    let gbUri = 'https://www.googleapis.com/books/v1/volumes?key=MY_KEY&cx=017576662512468239146:omuauf_lfve&q=' + title;
    fetch(gbUri).then(response => response.json()).then(response => {
      //let gbId = response.items[0].id;
      let isbn = response.items[0].volumeInfo.industryIdentifiers[1].identifier;
      google.books.load();
      google.books.setOnLoadCallback(() => initialize(isbn));
    });
  });
});
 
function initialize(isbn) {
  const viewerCanvas = document.createElement('div');
  viewerCanvas.id = 'viewerCanvas';
  const viewer = new google.books.DefaultViewer(viewerCanvas);
  viewer.load('ISBN:' + isbn, BookNotLoaded, BookLoaded);
};

 

---

Wątpliwe, żeby po zmianie linijki 9 (zamiast wyniku wywołania funkcji initialize przekazujesz teraz anonimową funkcję) przestała działać linijka wyżej. Czy nie robiłeś poza tym innych zmian (może w między czasie, po założeniu tematu)?

Czy ten błąd dotyczy linijki 8, czy jeszcze gdzieś użyłeś google.books.load?

---

Funkcja load() wykonuje się w linii 8 oraz 18. Nie zmieniałem nic oprócz tej funkcji anonimowej.

---

Metoda viewer.load z 18 linijki, to inna metoda.

Ta sytuacja jest dziwna. :) Zakomentuj 9 linijkę,czyli:

// google.books.setOnLoadCallback(() => initialize(isbn));

i sprawdź, czy błąd ustąpi.

W dokumentacji przed użyciem google.books.load jest podpięcie skryptu jsapi.js. Czy zrobiłeś to?

Tak, czy inaczej, ten błąd powinien występować wcześniej, bo google.books.load jest wołane przed google.books.setOnLoadCallback - więc może go wcześniej przeoczyłeś? Jeśli występował wcześniej, to google.books.setOnLoadCallback nie powinno być wtedy wołane.

---

Skrypt jsapi.js miałem podpięty od początku. Zakomentowałem linię 9 i nadal pojawia się ten sam błąd z linii 8. Wczoraj faktycznie raz czy dwa pojawił się ten sam błąd, lecz zająłem się kodem w zupełnie innym pliku i dzisiaj już go nie było (tzn. pojawił się ten dotyczący konstruktora i google.books.DefaultViewer).

---

Możesz pokazać cały kod (łącznie z podpięciami skryptów w HTML)? Jeśli masz dodane jeszcze inne klucze API, to pamiętaj żeby ich nie podawać. ;)

---

Sprawdź jeszcze w zakładce Network devtoolsów, czy skrypty Google'a się załadowały. Może coś je zablokowało, albo nie załadowały się prawidłowo?

---

Plik libary.ejs:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Esteban&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="shortcut icon" type="image/png" href="./img/favicon.png">
    <link href= "library.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://www.google.com/books/jsapi.js"></script>
    <title>Library</title>
</head>
<body>
  <div class="container">
    <h3>My Library</h3>
    <div class="msg-banner"></div>
    <div class="examples-viewer">
      <% if(books){ %>
        <% books.forEach((book) => { %>
          <div class="example">
            <div class="thumb-space">
              <div class="thumb-cover">
                <img src="<% book.coverImageName %>" alt="Unloaded cover">
              </div>
            </div>
            <div class="description">
              <div class="title-ex"><%= book.title %>.  <%= book.subtitle ? book.subtitle + '.' : '' %></div>
              <div class="author-ex"><%= book.authorDetails %></div>
              <div class="genre-ex"><%= book.genreOfBook ? book.genreOfBook : '' %></div>
              <div class="rate-ex"><%= book.rate %> / 5</div>
              <div class="pages-ex"><%= book.numberOfPages %></div>
            </div>
            <div class="btns">
              <form action="/library/<%= book._id %>" method="DELETE" class="delete-btn-form">
                <div class="delete-btn"></div>
              </form>
              <div class="read-btn"></div>
            </div>
          </div>
          <% })} %>
    </div>
    <form action="/add" method="POST" class="back-to-add-btn">
      <input type="button" class="go-to-add" value="Add new book">
    </form>
  </div>
  <script type="text/javascript" src="libraryPage.js"></script>
</body>
</html>

Plik libraryPage.js:

const deleteBtns = document.querySelectorAll('.delete-btn-form');
const readBtns = document.querySelectorAll('.read-btn');

deleteBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      btn.submit();
    });
  });

readBtns.forEach(btn => {
  btn.addEventListener('click', (event) => {
    let title = event.path[2].querySelector('.title-ex').textContent;
    let gbUri = 'https://www.googleapis.com/books/v1/volumes?key=MY_KEY&cx=017576662512468239146:omuauf_lfve&q='+ title;
    fetch(gbUri).then(response => response.json()).then(response => {
      let isbn = response.items[0].volumeInfo.industryIdentifiers[1].identifier;
      google.books.load();

      google.books.setOnLoadCallback(() => initialize(isbn));
    });
  });
});

function initialize(isbn) {
    const viewerCanvas = document.createElement('div');
    viewerCanvas.id = 'viewerCanvas';
    const container = document.querySelector('.container');
    container.appendChild(viewerCanvas);
    const viewer = new google.books.DefaultViewer(viewerCanvas);
    viewer.load('ISBN:' + isbn, bookNotLoaded, bookLoaded);
};

function bookNotLoaded () {
  console.log('Unable to load book');
}

function bookLoaded () {
  console.log('The book has loaded successfully');
  }

 

---

W network status code jsapi.js wynosi 302, czyli wg wikipedii "Znaleziono – żądany zasób jest chwilowo dostępny pod innym adresem a przyszłe odwołania do zasobu powinny być kierowane pod adres pierwotny", tylko co to właściwie znaczy? Jest to jakaś przerwa ze strony googla? Nie znalazłem na ten temat nic w dokumentacji.

---

tylko co to właściwie znaczy

To, co przeczytałeś na Wikipedii.

Jeśli request zwraca 302, to w nagłówku odpowiedzi (pod kluczem location) powinien być podany adres, pod którym dany zasób jest teraz dostępny - przeglądarka sama wysyła następny request pod ten "nowy" adres. Sprawdź w Network, czy zostało wysłane dodatkowe zapytanie na ten URL i jaka jest odpowiedź.

Sprawdziłem na świeżym CodePen i skrypt jsapi.js jest pobierany oraz funkcja google.books.load jest dostępna i wywołuje się.

https://codepen.io/JSHolic/pen/XWXbagq

---

Dodatkowe zapytanie, na nowy adres z location, zostało wysłane a kod odpowiedzi wynosi 200, więc wszytko się zgadza. Niestety błąd dalej nie znika.

---

Ok, a czy w odpowiedzi na to drugie zapytanie jest kod skryptu z metodą load? Co pokazuje konsola, jeśli wypiszesz do niej google.books - co zawiera ten obiekt (tuż przed próbą wywołania metody google.books.load)?

---

Odpowiedź na drugie zapytanie:

Obiekt google.books zawiera wiele różnych danych:

---

Hmm, a jeśli w HTML umieścisz skrypt z console.log(google.books.load) tuż pod podpięciem jsapi.js, to czy wtedy jest ta funkcja dostępna? Wygląda na to, że zanim wykona się kod obsługujący kliknięcie w przycisk i Promise zwrócony z zapytania po książkę będzie obsłużony w then, to obiekt google.books zmienia swoją strukturę.

Jeśli metoda google.books.load będzie dostępna tuż pod podpięciem API, to znaczy że należy załadować API wcześniej, a nie dopiero w odpowiedzi na jakieś asynchroniczne akcje w aplikacji.

---

console.log(google.books.load()) podpięte tuż pod jsapi.ja pokazuje, że funkcja jest dostępna.

const deleteBtns = document.querySelectorAll('.delete-btn-form');
const readBtns = document.querySelectorAll('.read-btn');
 
deleteBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      btn.submit();
    });
  });
 
readBtns.forEach(btn => {
  btn.addEventListener('click', (event) => {
    google.books.load();
    let title = event.path[2].querySelector('.title-ex').textContent;
    let gbUri = 'https://www.googleapis.com/books/v1/volumes?key=MY_KEY&cx=017576662512468239146:omuauf_lfve&q='+ title;
    fetch(gbUri).then(response => response.json()).then(response => {
      let isbn = response.items[0].volumeInfo.industryIdentifiers[1].identifier;
 
      google.books.setOnLoadCallback(() => initialize(isbn));
    });
  });
});
 
function initialize(isbn) {
    const viewerCanvas = document.createElement('div');
    viewerCanvas.id = 'viewerCanvas';
    const container = document.querySelector('.container');
    container.appendChild(viewerCanvas);
    const viewer = new google.books.DefaultViewer(viewerCanvas);
    viewer.load('ISBN:' + isbn, bookNotLoaded, bookLoaded);
};
 
function bookNotLoaded () {
  console.log('Unable to load book');
}
 
function bookLoaded () {
  console.log('The book has loaded successfully');
  }

Teraz występuje błąd: google.books.setOnLoadCallback is not a function. Gdy linię 18 przeniosę pod 38 zmienna isbn nie jest dostępna.

---

Hmm..., trudno mi powiedzieć dlaczego tak się dzieje. Wychodzi na to, że w późniejszym etapie działania aplikacji obiekt google.books zmienia swoją strukturę, stąd na etapie obsługi Promisa nie ma dostępu do metod load ani setOnLoadCallback. Żeby znaleźć przyczynę, trzeba by debugować kod.

Może wystarczy funkcję initialize zawołać raz, a potem wołać viewer.load z kolejnymi wartościami isbn operując na referencji viewer i już nie wołać google.books.[load/setOnLoadCallback] więcej niż raz?

---

Zadam trochę głupie pytanie, ale ile razy wywołujesz setOnLoadCallback? To dzieje się na klik - za którym kliknięciem to nie działa?

---

Gdy wywołuję funkcję google.books.load() oraz google.books.setOnLoadCallback(initialize), to element viewer jest niezdefiniowany. 

readBtns.forEach(btn => {
  btn.addEventListener('click', (event) => {
    google.books.load();
    console.log('Pierwszy');
    let title = event.path[2].querySelector('.title-ex').textContent;
    let gbUri = 'https://www.googleapis.com/books/v1/volumes?key=MY_KEY&cx=017576662512468239146:omuauf_lfve&q=' + title;
    fetch(gbUri).then(response => response.json()).then(response => {
      let isbn = response.items[0].volumeInfo.industryIdentifiers[1].identifier;
      google.books.setOnLoadCallback(() => initialize(isbn));
    });

    const bookNotLoaded = () => {
    console.log('Unable to load book');
      const fillMsg = document.createElement('div');
      fillMsg.className = 'warningMsg';
      const fillTextMsg = document.createTextNode('Unable to load book');
      fillMsg.appendChild(fillTextMsg);
      const contentModal = document.querySelector('.msg-banner');
      contentModal.appendChild(fillMsg);
    };
    
    const bookLoaded = () => {
    console.log('The book has loaded successfully');
      const warningMsg = document.querySelector('.warningMsg');
      if (warningMsg !== null) {
        warningMsg.parentNode.removeChild(warningMsg);
      }
    };

    const initialize = (isbn) => {
      console.log('Drugie');
      const viewerCanvas = document.createElement('div');
      viewerCanvas.id = 'viewerCanvas';
      const container = document.querySelector('.container');
      container.appendChild(viewerCanvas);
      const viewer = new google.books.DefaultViewer(viewerCanvas);
      viewer.load('ISBN:' + isbn, bookNotLoaded, bookLoaded);
    };
  });
});

W tym kodzie po pierwszym kliknięciu w konsoli pojawia się "Pierwszy", a błąd wyskakuje po drugim i każdym następnym kliknięciu. Gdy po odświeżeniu strony szbko klikam wiele razy w readBtn w konsoli pojawia się kilka razy "Pierwszy" i dopiero błąd.

---

Przenieś google.books.load() na początek kodu - niech to się wykonuje raz w trakcie działania aplikacji (a nie przy każdym kliku, jak teraz).

Gdy wywołuję funkcję google.books.load() oraz google.books.setOnLoadCallback(initialize), to element viewer jest niezdefiniowany

W którym miejscu viewer jest niezdefiniowany? Tą zmienną tworzysz w funkcji initialize i tylko tu masz teraz do niej dostęp.

Wywołaj funkcję initialize po google.books.load(), ale zmienną viewer trzymaj w zewnętrznym scope - niech w funkcji initialize będzie tylko zainicjowana przez new google.books.DefaultViewer. Dopiero na kliknięcie wołaj funkcję, do której przekażesz isbn i tam dopiero wołaj viewer.load z przekazaniem tego isbn (na takiej zasadzie jak robisz teraz, z tym że inicjuj API tylko raz, na początku).

Coś takiego:

    let viewer = null;
    
    google.books.load();
    google.books.setOnLoadCallback(initialize);

    function initialize () {
      const viewerCanvas = document.createElement('div');
      viewerCanvas.id = 'viewerCanvas';
      const container = document.querySelector('.container');
      container.appendChild(viewerCanvas);
      viewer = new google.books.DefaultViewer(viewerCanvas);
    };

   function loadPage (isbn) {
     viewer.load('ISBN:' + isbn, bookNotLoaded, bookLoaded);
   }

   /* kod obsługujący Promisa zwróconego przez fetch*/
   .then(response => {
      let isbn = response.items[0].volumeInfo.industryIdentifiers[1].identifier;
      loadPage(isbn);
   })

---

Wszytko działa. Bardzo dziękuję za pomoc i poświęcony czas, w życiu bym tego sam nie ogarnął.