‫Sprecher: Als nächstes lernen
‫Sie, wie Sie mit Mapbox eine schöne Karte, die
‫alle Orte einer bestimmten Tour anzeigt, in unsere Website integrieren.
‫Aber bevor wir das
‫tun, müssen wir zuerst einen kleinen Fehler beheben, den ich gerade gefunden habe.
‫Also gerade sind wir in der Parkcampertour, aber
‫ihr seht, dass hier oben tatsächlich "The
‫Forest Hiker" steht, okay? Und so, Das ist
‫offensichtlich falsch und deshalb,
‫weil
‫wir hier in unserem get Tour Handler
‫immer diesen Titel, also "The Forest
‫Hiker Tour", weitergeben.
‫Was natürlich nicht richtig ist, also lass uns das beheben.
‫Okay, und sagen wir mal
‫hier Tour. Name und dann
‫Tour.
‫Lassen Sie uns das tatsächlich in Großbuchstaben schreiben.
‫Und jetzt sollten wir die "The Park Camper" Tour
‫sehen und ja, hier ist sie.
‫Und jetzt zu dieser Karte, die
‫hier in diesem leeren Bereich
‫angezeigt wird, werden wir eine sehr schöne Bibliothek namens
‫"Mapbox" verwenden und diese Bibliothek läuft tatsächlich im Frontend.
‫Und so werden wir in
‫dieser Vorlesung eigentlich ein bisschen Front-End-Code schreiben
‫und nicht so viel über das Back-End.
‫Dies ist jedoch immer noch
‫sehr wichtig, da Sie jetzt lernen, wie Sie
‫JavaScript für die Client-Seite schreiben und dann in unsere Vorlagen integrieren.
‫Okay?
‫Machen wir das
‫und denken Sie zunächst daran, dass sich alle Daten, also alle
‫Assets, die auf dem Client verfügbar sind, hier
‫in diesem öffentlichen Ordner befinden.
‫Also zum Beispiel unsere CSS-Datei, unsere Bilder und wir
‫haben hier auch einen Ordner für JavaScript.
‫Und das ist derzeit noch leer, also
‫erstellen wir hier tatsächlich eine neue Datei namens
‫Mapbox.
‫js Okay? Dies ist also im Grunde
‫eine JavaScript-Datei, die wir in unseren HTML-Code
‫integrieren und die dann auf der Client-Seite ausgeführt wird.
‫Gut? Also genau wie normales
‫JavaScript, das du dein ganzes Leben lang geschrieben hast (lacht) Richtig?
‫Aber jetzt machen wir einfach eine einfache Konsole. loggen Sie sich hier ein,
‫bevor wir es tatsächlich mit unserem Backend verbinden.
‫Sagen wir einfach Konsole. log hallo von der Clientseite.
‫Alles klar,
‫und jetzt integrieren wir es tatsächlich in unsere Vorlagen.
‫Nun scheint es, dass der
‫beste Ort für diese Integration hier in unserer Basisvorlage ist, oder?
‫Aber eigentlich wollen wir nur das Mapbox-Skript auf
‫der Tour-Seite einfügen, oder?
‫Also, wie könnten wir das tun?
‫Und die Lösung dafür ist noch einmal, einen
‫Block hier in unserer Basisvorlage zu erweitern, also werde
‫ich hier einen neuen Block erstellen,
‫den wir dann aus der Tour erweitern. Okay?
‫Und tatsächlich wird dieser Block genau hier sein,
‫und ich nenne ihn
‫"Kopf" und all dieser Inhalt wird tatsächlich dort sein.
‫Jetzt fragen Sie sich vielleicht, warum wir das tun,
‫denn wenn wir den
‫Block erweitern, verschwindet der darin enthaltene Inhalt.
‫Das ist hier also passiert, oder?
‫Tatsächlich gibt es aber noch eine andere Möglichkeit, Blöcke zu erweitern,
‫die dann einfach den neuen Inhalt am Ende oder
‫am Anfang des Blocks hinzufügen.
‫Gut? Mal sehen, wie wir das machen können.
‫Und so sagen wir gleich zu Beginn
‫unserer
‫Tourvorlage: Kopf
‫blockieren, und eigentlich sagen wir Kopf anhängen, in Ordnung?
‫Also wird alles, was wir hier in diesen Block
‫schreiben, an den Inhalt angehängt, der sich
‫bereits in diesem Block befindet.
‫Okay? Und wir könnten
‫auch "prepend" verwenden und dann würde es am Anfang des Blocks hinzugefügt, okay?
‫Und jetzt werden wir hier nur ein neues
‫Skript hinzufügen.
‫Verwenden Sie also ein Skript-Tag und geben
‫Sie dann das Quellattribut an, und
‫das ist vorerst "js/mapbox. js" okay?
‫Diese Vorlage hier erweitert also bereits unsere Basisvorlage,
‫und damit
‫können wir diese Codezeile im Grunde in
‫den Head-Block einfügen,
‫der sich bereits in unserer Basisvorlage befindet.
‫Und so fügen wir das an, und so wird es dann
‫hier am Ende dieses Kopfblocks erscheinen, also genau hier.
‫Und tatsächlich versuchen wir das jetzt.
‫Wenn
‫ich also neu lade, sollten
‫wir jetzt diese Meldung in unserer
‫Konsole erhalten und tatsächlich "Hallo
‫von der
‫Client-Seite". direkt hier
‫in der JavaScript-Datei.
‫Also, wie soll das gemacht werden?
‫Nun, dann können wir eine Ajax-Anfrage machen, also im
‫Grunde einen Aufruf an unsere API und die
‫Daten von dort abrufen.
‫Aber das ist in diesem Fall nicht unbedingt nötig.
‫Lassen Sie mich Ihnen einen wirklich netten Trick zeigen.
‫Hier in unserer Tourvorlage haben wir
‫also bereits alle Daten über die Tour selbst
‫und können diese Daten
‫jetzt einfach in unseren HTML-Code einfügen,
‫damit JavaScript sie dann von dort lesen kann, okay?
‫Im Grunde werden wir also die Standortdaten direkt
‫hier als String im HTML-Code bereitstellen und
‫unser JavaScript holt sie dann von
‫dort ab, ohne es tun zu müssen, wie bei jedem API-Aufruf separat.
‫Kommen wir also zu
‫unserer Kartenklasse oder eigentlichen Sektion, okay?
‫Also dieser Abschnitt hier, und er hat bereits ein
‫Diff-Element mit
‫einer Map-Klasse, und Sie werden etwas später sehen, warum es
‫eine ID ist, okay? Aber jetzt möchte ich
‫hier eigentlich ein Datenattribut angeben, okay?
‫Es gibt also einen sehr netten Trick
‫in JavaScript, bei dem wir ein Datenattribut in HTML angeben
‫und dieses Attribut dann ganz einfach mit
‫JavaScript auslesen können.
‫Und so funktioniert es, wir
‫können also "Daten/" sagen und dann hier, wie
‫auch immer wir es nennen wollen,
‫in diesem Fall sagen wir
‫"Standorte", in Ordnung? Und dann haben wir das auf unsere Tour gesetzt. Standorte.
‫Bevor wir das tatsächlich
‫tun, müssen wir dieses Array in einen String umwandeln, oder?
‫Schauen wir uns das also schnell an.
‫Unsere Standorte sind also dieses ganze Array mit
‫diesen Objekten darin.
‫Aber in HTML können wir natürlich keine
‫Arrays oder Objekte oder ähnliches haben, also
‫müssen wir
‫all das in einen String umwandeln.
‫Und das ist zum Glück ganz
‫einfach, alles was wir tun müssen ist "JSON. stringify "Alles klar?
‫Und dann hier Tour. Standort, oder eigentlich sind
‫das Standorte.
‫Gut?
‫Und wenn
‫wir es jetzt speichern, öffnen wir es hier und inspizieren diese Karte
‫hier, und jetzt sehen Sie Datenstandorte und
‫wir haben hier diese riesige Zeichenfolge,
‫die im Grunde alle unsere Standortdaten enthält.
‫In Ordnung, und jetzt
‫können wir das in unserem JavaScript
‫ganz einfach hinbekommen.
‫Standorte befinden sich also im
‫Dokument. getElementById und
‫dann map, und jetzt kommt der Teil des
‫Tricks, denn was immer wir in ein solches Datenattribut stecken, wird
‫dann in der dataset-Eigenschaft gespeichert, und in
‫diesem Fall dataset. Standorte, weil
‫es Daten/ oder Datenstandort genannt wird.
‫Okay? Also
‫einfach so, Datensatz. Standorte, ok?
‫Und jetzt bekommen wir all
‫diese Fehler hier von
‫ESlint, und das liegt daran, dass ESlint für Node
‫konfiguriert ist. js und
‫nicht für JavaScript, und so
‫können wir hier ESlint grundsätzlich für diese
‫gesamte Datei deaktivieren, bis wir hier grundsätzlich mit einem Kommentar
‫am Anfang sagen, ESlint deaktivieren und so ja, es wird das
‫dann verstehen und komplett umdrehen aus für diese gesamte Datei, okay?
‫Das sind also die Standortdaten hier,
‫die wir gerade in unseren HTML-Code eingefügt
‫haben, aber denken Sie daran, dass dies
‫eine Zeichenfolge ist und wir sie zurück in JSON und damit in
‫JSON konvertieren müssen. parse und
‫dann alles, was hier drin ist.
‫In Ordnung, und jetzt schauen wir uns das an, nur um
‫zu sehen, ob alles richtig funktioniert.
‫Laden wir
‫neu, und jetzt ist hier in unserer Mapbox-Datei etwas schief gelaufen,
‫naja das scheint eigentlich auch richtig
‫zu sein, also testen wir einfach, ob es hier tatsächlich map heißt und
‫es tatsächlich eine ID mit map ist, und
‫daher glaube ich, dass das Problem wahrscheinlich ist dass
‫wir zu dem Zeitpunkt aufgerufen oder
‫Element per ID erhalten haben, also das
‫hier, also wahrscheinlich ist
‫das DOM zu diesem Zeitpunkt tatsächlich noch
‫nicht geladen, okay? Und das liegt
‫daran, dass wir unser Skript gleich am Anfang der Datei integriert haben, also
‫ist dieses Skript hier
‫direkt im Kopf, während es eigentlich ganz unten
‫auf der Seite stehen sollte. Okay?
‫Also lass mich diesen hier tatsächlich
‫kopieren und manuell in die
‫Basis einfügen, also werde ich ihn kopieren und
‫auskommentieren, aber keine Sorge, wir werden diese Block-Anfüge-Technik
‫hier etwas später im Video tatsächlich noch verwenden, weil Es
‫gibt einige Sachen von Mapbox, die wir
‫noch in den Kopf
‫stecken müssen, okay? Aber lassen Sie uns dieses Skript für
‫den Moment einfach hier ganz unten auf der Seite platzieren.
‫Okay?
‫Das (lacht) natürlich,
‫ich wollte nur in eine andere
‫Datei gehen, damit ich sie speichern könnte, damit
‫der Server tatsächlich neu
‫lädt, da diese Pug-Dateien,
‫wie Sie wahrscheinlich hier bemerkt haben, keinen
‫Neustart unseres Servers auslösen , OK?
‫Wie auch immer, ich bin zuversichtlich, dass es jetzt funktioniert
‫und tatsächlich tut es das.
‫Wir haben hier also
‫ein Array, und dies sind tatsächlich die vier Orte unserer Tour.
‫Okay, jetzt haben wir alles schön integriert und alles
‫ist bereit, Mapbox zu integrieren und hier unsere
‫eigene Karte zu erstellen.
‫Aber um kein zu langes Video zu erstellen, werde
‫ich das im nächsten tatsächlich tun.