Applicazione con OpenLibrary in Vue

In questa lezione realizzeremo un’applicazione con l’uso di OpenLibrary, un progetto open source che si propone di creare un catalogo online completo e accessibile di tutti i libri. È gestito da Internet Archive, una organizzazione non profit che si impegna a preservare il patrimonio culturale digitale.

L’obiettivo principale di OpenLibrary è quello di fornire un’ampia gamma di informazioni sui libri, inclusi dettagli come titolo, autore, editore, anno di pubblicazione, trama e recensioni. Il progetto si basa su contributi volontari e dati disponibili pubblicamente, inclusi dati forniti da biblioteche, editori e utenti.

OpenLibrary offre anche funzionalità aggiuntive come la possibilità di prenotare libri, scrivere recensioni, creare elenchi di lettura personalizzati e altro ancora. L’accesso alle informazioni su OpenLibrary è gratuito e aperto a tutti gli utenti.

Esplora l’universo infinito della programmazione con ’50 Algoritmi per imparare JavaScript’, il libro che trasformerà la tua passione per il codice in realtà digitale!

Acquistalo su Amazon

Applicazione con OpenLibrary in Vue – esempio

Nel nostro esempio realizzeremo un’applicazione con OpenLibrary in Vue che si occupa di mostrare i libri, effettuare una ricerca e filtrare le categorie.

Per la chiamata API utilizzeremo axios, una libreria JavaScript utilizzata per effettuare richieste HTTP. Viene importata all’inizio del componente per consentire il recupero dei dati dai servizi web, occorre installarla se non è già presente nel progetto con

npm install axios

Realizziamo lo script necessario, includendo un insieme di dati che include:

categories: Un array di categorie di libri predefinite.
books: Un array vuoto che verrà popolato con i risultati della ricerca dei libri.
loading: Una variabile booleana che indica se la ricerca è in corso.
searchTerm: Una stringa utilizzata per memorizzare il termine di ricerca inserito dall’utente.

Realizziamo poi questi metodi:

searchByCategory(category): Questo metodo viene chiamato quando un utente seleziona una categoria dalla lista predefinita. Imposta il termine di ricerca sulla categoria selezionata e chiama searchBooks() per avviare la ricerca.
searchBooks(): Effettua una richiesta HTTP per cercare libri basati sul termine di ricerca memorizzato in searchTerm. Utilizza l’API OpenLibrary per ottenere i risultati di ricerca, limitati a 10 libri. Una volta ottenuti i risultati, popola l’array books con i dati dei libri e chiama getBookCovers() per ottenere le copertine dei libri.
getBookCovers(): Per ogni libro trovato nei risultati della ricerca, controlla se è disponibile un’immagine di copertina. Se sì, genera l’URL dell’immagine di copertina utilizzando l’ID della copertina e aggiunge l’URL al libro.

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return {
      categories: ['Romance', 'Mystery', 'Fiction', 'Fantasy'], // Esempio di categorie
      books: [],
      loading: false,
      searchTerm: ''
    }
  },
  methods: {
    searchByCategory(category) {
      this.searchTerm = category;
      this.searchBooks();
    },
    searchBooks() {
      if (!this.searchTerm) {
        return;
      }
      this.loading = true;
      const url = `https://openlibrary.org/search.json?title=${encodeURIComponent(this.searchTerm)}&limit=10`;
      axios.get(url)
        .then(response => {
          this.books = response.data.docs;
          this.loading = false;
          this.getBookCovers();
        })
        .catch(error => {
          console.error('Error searching books:', error);
          this.loading = false;
        });
    },
    getBookCovers() {
      this.books.forEach(book => {
        if (book.cover_i) {
          const coverUrl = `https://covers.openlibrary.org/b/id/${book.cover_i}-M.jpg`;
          book.coverUrl = coverUrl;
        }
      });
    }
  }
}
</script>

Realizziamo poi il template, dove, sotto il testo introduttivo inseriamo un menù di navigazione che mostra le categorie disponibili per la ricerca. Le categorie vengono visualizzate come elenco non ordinato (<ul>) e ogni categoria è rappresentata da un elemento della lista (<li>). Quando un utente fa clic su una categoria, viene chiamato il metodo searchByCategory(category) per avviare la ricerca dei libri in quella categoria.

Ho inserito anche una casella di ricerca per cercare i libri per titolo. L’input è legato a searchTerm tramite v-model, in modo che il termine di ricerca inserito dall’utente venga memorizzato nell’oggetto dati del componente. L’evento @input viene utilizzato per chiamare il metodo searchBooks() ogni volta che l’utente modifica il contenuto della casella di ricerca.

Poi nella sezione principale, viene mostrato un messaggio di “Caricamento…” quando loading è true, indicando che la ricerca è in corso. Se loading è false, viene visualizzata la lista dei libri trovati. Ogni libro è rappresentato da un elemento <div> con la classe “book-card”. Per ogni libro, vengono visualizzati il titolo, l’autore (se disponibile), l’anno di pubblicazione (se disponibile) e l’immagine di copertina (se disponibile).

Ecco dunque come si presenta il template di esempio:

<template>
  <div id="app">
    <header>
      <h1>Open Library Book Search</h1>
      <p> Filtra per: </p>
      <nav>
        <ul>
          <li v-for="category in categories" :key="category" @click="searchByCategory(category)">
           {{ category }}
          </li>
        </ul>
        <input type="text" v-model="searchTerm" @input="searchBooks" placeholder="Cerca per titolo">
      </nav>
    </header>
    <main>
      <h2> Benvenuti nella nostra libreria</h2>
      <div v-if="loading">
        Caricamento...</div>
      <div v-else class="book-list">
        <div v-for="book in books" :key="book.key" class="book-card">
          <h2>{{ book.title }}</h2>
          <p v-if="book.author_name">Autore: {{ book.author_name.join(', ') }}</p>
          <p v-if="book.first_publish_year">Anno di pubblicazione: {{ book.first_publish_year }}</p>
          <img v-if="book.coverUrl" :src="book.coverUrl" alt="Cover">
        </div>
      </div>
    </main>
  </div>
</template>

Conclusioni

In questa lezione abbiamo realizzato un’applicazione con OpenLibrary in Vue, in un unico componente, anche in questo caso potremmo gestire il tutto con più componenti.

>> Visualizzazione dei libri da un file JSON