‫Narratore: Successivamente, imparerai come
‫integrare una bella mappa che mostra tutte le posizioni
‫di un determinato tour nel nostro sito Web utilizzando Mapbox.
‫Ma prima di
‫farlo, dobbiamo prima correggere un piccolo bug che ho appena trovato.
‫Quindi in questo momento siamo nel tour in camper
‫del parco, ma vedete che quassù in realtà c'è
‫scritto "The Forest Hiker" ok? E quindi, questo è
‫ovviamente sbagliato e quindi,
‫perché
‫qui nel nostro gestore di tour get,
‫passiamo sempre in questo titolo, quindi "The
‫Forest Hiker Tour".
‫Il che ovviamente non è corretto, quindi risolviamolo.
‫Ok, quindi diciamo qui
‫tour. nome e poi
‫tour.
‫Rendiamolo maiuscolo in realtà.
‫E così, ora dovremmo vedere il tour "The
‫park camper" e sì, eccolo qui.
‫E ora riguardo a quella mappa
‫che verrà visualizzata qui in
‫quest'area vuota, useremo una libreria molto carina chiamata "Mapbox"
‫e quella libreria viene effettivamente eseguita nel front-end.
‫E così, in questa
‫lezione scriveremo un po' di codice
‫front-end, e non tanto sul back-end.
‫Ma questo è ancora
‫molto importante perché ora imparerai come scrivere
‫JavaScript per il lato client e poi integrarlo nei nostri modelli.
‫Va bene?
‫Quindi facciamolo
‫e prima di tutto ricordiamo che tutti i dati, quindi
‫tutte le risorse disponibili sul client, sono
‫qui in questa cartella pubblica.
‫Quindi, ad esempio, il nostro file CSS, le nostre immagini
‫e abbiamo anche una cartella qui per JavaScript.
‫E attualmente è vuoto, quindi
‫ora creiamo un nuovo file qui chiamato
‫Mapbox.
‫va bene? E quindi questo è fondamentalmente
‫un file JavaScript che integreremo nel nostro
‫HTML e che verrà quindi eseguito sul lato client.
‫Va bene? Quindi, proprio come il
‫normale JavaScript che hai scritto per tutta la vita (ride) giusto?
‫Ma per ora, facciamo semplicemente qualche semplice console. log qui prima
‫di connetterlo effettivamente con il nostro back-end.
‫Quindi diciamo solo console. log ciao dal lato client.
‫Va
‫bene, e ora integriamolo nei nostri modelli.
‫Ora potrebbe sembrare che il posto
‫migliore per fare questa integrazione sia qui nel nostro modello di base, giusto?
‫Ma in effetti, vogliamo solo includere lo script Mapbox nella
‫pagina del tour, giusto?
‫Quindi, come potremmo farlo?
‫E la soluzione per questo è ancora una
‫volta, estendere un blocco qui nel nostro modello di
‫base, quindi creerò un nuovo
‫blocco qui che estenderemo poi dal tour. Va bene?
‫E in realtà questo blocco sarà proprio
‫qui, e lo chiamo
‫"testa" e tutto questo contenuto sarà effettivamente lì.
‫Ora ti starai chiedendo perché lo stiamo
‫facendo, perché quando estendiamo
‫il blocco il contenuto all'interno scompare.
‫Quindi è quello che è successo qui, giusto?
‫Ma in realtà esiste un altro modo per estendere i
‫blocchi, che aggiungerà semplicemente il nuovo contenuto alla fine
‫o all'inizio del blocco.
‫Va bene? Quindi vediamo come possiamo farlo.
‫E quindi proprio all'inizio del nostro modello di
‫tour,
‫diciamo ora: block
‫head, e in realtà diciamo block append head, va bene?
‫E quindi, qualunque cosa scriveremo in questo blocco
‫qui verrà quindi aggiunta al contenuto che
‫è già in quel blocco.
‫Va bene? E potremmo anche
‫usare "prepend" e poi verrebbe aggiunto all'inizio del blocco, ok?
‫E quindi ora, tutto ciò che faremo qui sarà aggiungere
‫un nuovo script.
‫Quindi, usando un tag di script e quindi
‫specificando l'attributo di origine, e quindi
‫questo è per ora "js/mapbox. js" va bene?
‫Quindi di nuovo, questo modello qui estende già il nostro
‫modello di base,
‫e quindi con questo qui, possiamo sostanzialmente iniettare questa
‫riga di codice, nel
‫blocco head che è già nel nostro modello di base.
‫E quindi, lo aggiungiamo, e quindi apparirà qui alla fine
‫di questo blocco di testa, quindi proprio qui.
‫E in realtà proviamo che il nostro ora.
‫Quindi, quando
‫ricarico, ora dovremmo ricevere quel messaggio nella
‫nostra console e in effetti, "Ciao dal lato
‫client"
‫Ottimo Quindi, ora vogliamo effettivamente accedere ai dati
‫sulla posizione del tour
‫che stiamo attualmente cercando di visualizzare,
‫proprio qui nel file JavaScript.
‫Quindi come lo farete?
‫Bene, allora possiamo fare una richiesta Ajax, quindi fondamentalmente
‫una chiamata alla nostra API e ottenere i
‫dati da lì.
‫Ma non è davvero necessario in questo caso.
‫E quindi, lascia che ti mostri un vero bel trucco.
‫Quindi qui nel nostro modello di
‫tour, abbiamo già tutti i dati sul tour stesso
‫e quindi ora possiamo
‫semplicemente inserire quei dati nel nostro codice
‫HTML in modo che JavaScript possa leggerli da lì, ok?
‫Quindi, in pratica, esporremo i dati sulla
‫posizione, proprio qui come una stringa nell'HTML
‫e il nostro JavaScript li
‫riprenderà da lì senza doverlo fare, come qualsiasi chiamata API separatamente.
‫Quindi, veniamo qui alla nostra classe
‫di mappe o addirittura alla sezione, ok?
‫Quindi questa sezione qui, e ha già un elemento
‫Diff con
‫una classe mappa, e vedrai perché è un ID un
‫po' più tardi, ok? Ma per ora voglio effettivamente
‫specificare un attributo di dati qui, ok?
‫Quindi c'è un trucco molto carino in JavaScript
‫in cui possiamo specificare un attributo di dati in HTML e
‫quindi leggere detto attributo usando JavaScript in
‫un modo molto semplice.
‫Ed è così che
‫funziona, quindi possiamo dire "data/" e
‫poi qui come vogliamo chiamarlo,
‫in questo caso diciamo
‫"locations" va bene? E poi l'abbiamo impostato per il nostro tour. posizioni.
‫Ora, prima di
‫farlo, dobbiamo trasformare quell'array in una stringa, giusto?
‫Quindi, diamo rapidamente un'occhiata a questo.
‫Quindi le nostre posizioni sono l'intero array con questi
‫oggetti lì dentro.
‫Ma in HTML, ovviamente, non possiamo avere array o
‫oggetti o qualcosa del genere, quindi quello che
‫dobbiamo fare è
‫convertire tutto questo in una stringa.
‫E fortunatamente è abbastanza facile,
‫tutto ciò che dobbiamo fare è "JSON. stringify " va bene?
‫E poi qui tour. posizione, o in realtà
‫sono
‫le posizioni. Va bene?
‫E se ora
‫gli diamo un salvataggio, apriamolo qui e ispezioniamo questa mappa qui, così ora
‫vedete le posizioni dei dati, e abbiamo
‫questa enorme stringa qui, che fondamentalmente
‫contiene tutti i nostri dati sulla posizione.
‫Va bene, quindi
‫ora nel nostro JavaScript possiamo ottenerlo
‫molto facilmente.
‫Quindi, le posizioni sono al
‫documento. getElementById e
‫poi mappa, e ora qui va la parte del trucco,
‫perché qualunque cosa inseriamo in un attributo di dati come questo, verrà quindi archiviato
‫nella proprietà del set di dati, e in questo
‫caso nel set di dati. posizioni,
‫perché si chiama data/ o data-location.
‫Va bene? Quindi proprio
‫così, set di dati. posizioni, ok?
‫E ora riceviamo tutti questi
‫errori qui provenienti
‫da ESlint, e questo perché ESlint è configurato
‫per Node. js e
‫non per JavaScript , quindi
‫quello che possiamo fare qui è sostanzialmente
‫disabilitare ESlint per questo intero file, fino a quando non diciamo
‫fondamentalmente con un commento all'inizio qui, ESlint disabilita e quindi sì,
‫lo capirà e lo trasformerà completamente off per l'intero file, ok?
‫Quindi questi sono i dati sulla
‫posizione qui che abbiamo appena inserito
‫nel nostro codice HTML, ma ricorda
‫che è una stringa e quindi dobbiamo riconvertirla in JSON, e
‫quindi JSON. analizza e poi
‫tutto quello che c'è qui dentro.
‫Va bene, quindi ora diamo un'occhiata a questo solo per
‫vedere se tutto funziona correttamente.
‫Ricarichiamo, e
‫ora qualcosa è andato storto qui nel nostro file Mapbox,
‫beh, anche questo sembra corretto in
‫realtà, quindi testiamo solo se effettivamente si chiama map qui e in
‫effetti è un ID con map, quindi
‫credo che probabilmente il problema sia che al
‫momento abbiamo chiamato o ottenuto
‫l'elemento per ID, quindi questo qui,
‫quindi probabilmente in questo
‫momento il DOM in realtà non è
‫già caricato, ok? E questo
‫perché abbiamo il nostro script integrato proprio all'inizio del file, quindi
‫questo script qui è
‫proprio nella testa, mentre in realtà dovrebbe
‫essere in fondo alla pagina. Va bene?
‫Quindi fammi effettivamente copiare questo qui
‫e metterlo manualmente nella base,
‫quindi lo copio e lo commento, ma
‫non preoccuparti, useremo ancora questa tecnica di aggiunta
‫di blocchi qui un po' più avanti nel video, perché
‫ci sono alcune cose provenienti da Mapbox
‫che dobbiamo ancora mettere
‫in testa, ok? Ma per ora mettiamo
‫questo script proprio in fondo alla pagina.
‫Va bene?
‫Quello (ride) ovviamente,
‫volevo solo passare a un altro
‫file, quindi potrei salvarlo in modo che il server
‫si ricarichi effettivamente perché questi
‫file pug, come probabilmente
‫avrai notato qui, non attivano un riavvio
‫del nostro server , Tutto ok?
‫Ad ogni modo, sono fiducioso che ora funzionerà e
‫in effetti lo fa.
‫Quindi abbiamo un array qui,
‫e in effetti queste sono le quattro località del nostro tour.
‫Ok, ora abbiamo tutto ben integrato e tutto
‫pronto per integrare Mapbox e creare la
‫nostra mappa qui.
‫Ma per non creare un video troppo
‫lungo, lo farò nel prossimo.