86 RX – Chiamare Google Books API

Pubblicato il di

Per prima cosa dobbiamo inserire nell’HTML l’inclusione di RxJS, copiamola dal precedente progetto intro e inseriamola nell’ <head>

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

Ora dobbiamo collegare il file js che andremo a creare, che sarà generato da TypeScript creiamo quindi index.ts e inseriamo la costante dell’url

const apiurl = 'https://www.googleapis.com/books/v1/volumes?q=';

ora con TypeScript facciamo generare il file script.js nella cartella js che andiamo a creare, da TypeScript col comando watch (osserva)

tsc --watch index.ts --out js/script.js

ora inseriamo anche il js nella nostra pagina HTML

<script src="js/script.js" defer></script>

abbiamo aggiunto il defer così lo script verrà caricato solo dopo che la pagina è pronta e abbiamo accesso al DOM completo, aggiungiamo nel <div> row un id books, per avere riferimento alla scheda del libro

<div class="row" id="books">

ora nel nostro index.ts creeremo la funzione per fare la chiamata ai libri passando come parametro il titolo del libro che ci interessa cercare

function getBooks(booktitle: string) {
    const apiurl = 'https://www.googleapis.com/books/v1/volumes?q=';
    fetch(apiurl + booktitle).then(res => res.json()).then(
        books => console.log(books)
    )
}

getBooks('game of thrones');

abbiamo spostato  apiurl nella funzione.

Abbiamo fatto la nostra chiamata fetch aggiungendo all’url il titolo del libro.

Con il primo then avremo il body della risposta che trasformiamo in json tramite un arrow function

then(res => res.json())

La risposta che viene restituita è asincrona, quindi dobbiamo inserire un altro then per catturare i dati nella console con un’altra arrow funcion

.then( books => console.log(books)

Vediamo nel browser che abbiamo i dati con un array di items con all’interno il volumeInfo e altre proprietà che manipoleremo con rxjs.

Prima installiamo il pacchetto live-server che ci permette di ricaricare la pagina mentre modifichiamo e generiamo i files (tipo i js con typescript)

 npm install -g live-server

guardando la documentazione ufficiale, notiamo i comandi che si possono utilizzare, come –port per la porta che vogliamo aprire per la nostra pagina web. Poi abbiamo –watch dove specifichiamo il percorso che vogliamo osservare. Abbiamo anche molti altri comandi.

Possiamo anche inizializzare typeScript  nel nostro percorso per non dover specificare ogni volta i parametri

tic --init

e all’interno del tsconfig.json andiamo a specificare i parametri come outDir per il percorso del file js, outFile, il nome oppure rootDir la directory del file typeScript, per esempio creiamo una cartella ts dentro googlebooks e spostiamoci dentro il nostro index.ts, a questo punto avremo questa configurazione

"outFile": "./js/script.js",
"outDir": "./js",
"rootDir": "./ts",

adesso tutte le impostazioni dovrebbero funzionare con un semplice

tsc --watch

se si riceve un errore cambiare il modulo da commonjs in system

"module": "system",