1 00:00:01,100 --> 00:00:03,220 ‫Sprecher: Als nächstes lernen 2 00:00:03,220 --> 00:00:07,150 ‫Sie, wie Sie mit Mapbox eine schöne Karte, die 3 00:00:07,150 --> 00:00:11,373 ‫alle Orte einer bestimmten Tour anzeigt, in unsere Website integrieren. 4 00:00:12,730 --> 00:00:14,150 ‫Aber bevor wir das 5 00:00:14,150 --> 00:00:18,160 ‫tun, müssen wir zuerst einen kleinen Fehler beheben, den ich gerade gefunden habe. 6 00:00:18,160 --> 00:00:20,840 ‫Also gerade sind wir in der Parkcampertour, aber 7 00:00:20,840 --> 00:00:23,477 ‫ihr seht, dass hier oben tatsächlich "The 8 00:00:23,477 --> 00:00:27,180 ‫Forest Hiker" steht, okay? Und so, Das ist 9 00:00:27,180 --> 00:00:28,991 ‫offensichtlich falsch und deshalb, 10 00:00:28,991 --> 00:00:30,260 ‫weil 11 00:00:30,260 --> 00:00:33,700 ‫wir hier in unserem get Tour Handler 12 00:00:33,700 --> 00:00:36,900 ‫immer diesen Titel, also "The Forest 13 00:00:36,900 --> 00:00:38,530 ‫Hiker Tour", weitergeben. 14 00:00:38,530 --> 00:00:42,193 ‫Was natürlich nicht richtig ist, also lass uns das beheben. 15 00:00:44,850 --> 00:00:47,780 ‫Okay, und sagen wir mal 16 00:00:47,780 --> 00:00:50,190 ‫hier Tour. Name und dann 17 00:00:51,400 --> 00:00:52,283 ‫Tour. 18 00:00:54,520 --> 00:00:56,283 ‫Lassen Sie uns das tatsächlich in Großbuchstaben schreiben. 19 00:00:57,150 --> 00:01:00,150 ‫Und jetzt sollten wir die "The Park Camper" Tour 20 00:01:02,620 --> 00:01:05,070 ‫sehen und ja, hier ist sie. 21 00:01:05,070 --> 00:01:07,740 ‫Und jetzt zu dieser Karte, die 22 00:01:07,740 --> 00:01:10,050 ‫hier in diesem leeren Bereich 23 00:01:10,050 --> 00:01:13,580 ‫angezeigt wird, werden wir eine sehr schöne Bibliothek namens 24 00:01:13,580 --> 00:01:17,060 ‫"Mapbox" verwenden und diese Bibliothek läuft tatsächlich im Frontend. 25 00:01:17,060 --> 00:01:19,030 ‫Und so werden wir in 26 00:01:19,030 --> 00:01:21,070 ‫dieser Vorlesung eigentlich ein bisschen Front-End-Code schreiben 27 00:01:21,070 --> 00:01:23,330 ‫und nicht so viel über das Back-End. 28 00:01:23,330 --> 00:01:25,300 ‫Dies ist jedoch immer noch 29 00:01:25,300 --> 00:01:27,890 ‫sehr wichtig, da Sie jetzt lernen, wie Sie 30 00:01:27,890 --> 00:01:31,730 ‫JavaScript für die Client-Seite schreiben und dann in unsere Vorlagen integrieren. 31 00:01:31,730 --> 00:01:32,710 ‫Okay? 32 00:01:32,710 --> 00:01:34,190 ‫Machen wir das 33 00:01:35,030 --> 00:01:39,130 ‫und denken Sie zunächst daran, dass sich alle Daten, also alle 34 00:01:39,130 --> 00:01:42,140 ‫Assets, die auf dem Client verfügbar sind, hier 35 00:01:42,140 --> 00:01:44,170 ‫in diesem öffentlichen Ordner befinden. 36 00:01:44,170 --> 00:01:47,830 ‫Also zum Beispiel unsere CSS-Datei, unsere Bilder und wir 37 00:01:47,830 --> 00:01:51,050 ‫haben hier auch einen Ordner für JavaScript. 38 00:01:51,050 --> 00:01:53,470 ‫Und das ist derzeit noch leer, also 39 00:01:53,470 --> 00:01:56,230 ‫erstellen wir hier tatsächlich eine neue Datei namens 40 00:01:58,697 --> 00:02:00,190 ‫Mapbox. 41 00:02:03,000 --> 00:02:06,525 ‫js Okay? Dies ist also im Grunde 42 00:02:06,525 --> 00:02:08,700 ‫eine JavaScript-Datei, die wir in unseren HTML-Code 43 00:02:08,700 --> 00:02:11,250 ‫integrieren und die dann auf der Client-Seite ausgeführt wird. 44 00:02:11,250 --> 00:02:14,140 ‫Gut? Also genau wie normales 45 00:02:14,140 --> 00:02:17,340 ‫JavaScript, das du dein ganzes Leben lang geschrieben hast (lacht) Richtig? 46 00:02:17,340 --> 00:02:20,760 ‫Aber jetzt machen wir einfach eine einfache Konsole. loggen Sie sich hier ein, 47 00:02:20,760 --> 00:02:23,343 ‫bevor wir es tatsächlich mit unserem Backend verbinden. 48 00:02:25,540 --> 00:02:30,540 ‫Sagen wir einfach Konsole. log hallo von der Clientseite. 49 00:02:33,360 --> 00:02:34,333 ‫Alles klar, 50 00:02:35,400 --> 00:02:39,160 ‫und jetzt integrieren wir es tatsächlich in unsere Vorlagen. 51 00:02:39,160 --> 00:02:41,290 ‫Nun scheint es, dass der 52 00:02:41,290 --> 00:02:45,600 ‫beste Ort für diese Integration hier in unserer Basisvorlage ist, oder? 53 00:02:45,600 --> 00:02:49,220 ‫Aber eigentlich wollen wir nur das Mapbox-Skript auf 54 00:02:49,220 --> 00:02:51,230 ‫der Tour-Seite einfügen, oder? 55 00:02:51,230 --> 00:02:53,610 ‫Also, wie könnten wir das tun? 56 00:02:53,610 --> 00:02:56,070 ‫Und die Lösung dafür ist noch einmal, einen 57 00:02:56,070 --> 00:02:59,040 ‫Block hier in unserer Basisvorlage zu erweitern, also werde 58 00:02:59,040 --> 00:03:01,190 ‫ich hier einen neuen Block erstellen, 59 00:03:01,190 --> 00:03:05,850 ‫den wir dann aus der Tour erweitern. Okay? 60 00:03:05,850 --> 00:03:08,523 ‫Und tatsächlich wird dieser Block genau hier sein, 61 00:03:10,670 --> 00:03:12,260 ‫und ich nenne ihn 62 00:03:12,260 --> 00:03:15,093 ‫"Kopf" und all dieser Inhalt wird tatsächlich dort sein. 63 00:03:16,020 --> 00:03:18,740 ‫Jetzt fragen Sie sich vielleicht, warum wir das tun, 64 00:03:18,740 --> 00:03:20,410 ‫denn wenn wir den 65 00:03:20,410 --> 00:03:22,700 ‫Block erweitern, verschwindet der darin enthaltene Inhalt. 66 00:03:22,700 --> 00:03:26,350 ‫Das ist hier also passiert, oder? 67 00:03:26,350 --> 00:03:29,440 ‫Tatsächlich gibt es aber noch eine andere Möglichkeit, Blöcke zu erweitern, 68 00:03:29,440 --> 00:03:32,350 ‫die dann einfach den neuen Inhalt am Ende oder 69 00:03:32,350 --> 00:03:34,060 ‫am Anfang des Blocks hinzufügen. 70 00:03:34,060 --> 00:03:37,190 ‫Gut? Mal sehen, wie wir das machen können. 71 00:03:37,190 --> 00:03:41,170 ‫Und so sagen wir gleich zu Beginn 72 00:03:41,170 --> 00:03:42,073 ‫unserer 73 00:03:44,810 --> 00:03:46,120 ‫Tourvorlage: Kopf 74 00:03:46,120 --> 00:03:50,900 ‫blockieren, und eigentlich sagen wir Kopf anhängen, in Ordnung? 75 00:03:50,900 --> 00:03:53,730 ‫Also wird alles, was wir hier in diesen Block 76 00:03:53,730 --> 00:03:55,960 ‫schreiben, an den Inhalt angehängt, der sich 77 00:03:55,960 --> 00:03:58,010 ‫bereits in diesem Block befindet. 78 00:03:58,010 --> 00:04:00,510 ‫Okay? Und wir könnten 79 00:04:00,510 --> 00:04:04,500 ‫auch "prepend" verwenden und dann würde es am Anfang des Blocks hinzugefügt, okay? 80 00:04:04,500 --> 00:04:07,690 ‫Und jetzt werden wir hier nur ein neues 81 00:04:07,690 --> 00:04:08,950 ‫Skript hinzufügen. 82 00:04:08,950 --> 00:04:11,890 ‫Verwenden Sie also ein Skript-Tag und geben 83 00:04:11,890 --> 00:04:14,410 ‫Sie dann das Quellattribut an, und 84 00:04:15,280 --> 00:04:23,760 ‫das ist vorerst "js/mapbox. js" okay? 85 00:04:23,760 --> 00:04:27,400 ‫Diese Vorlage hier erweitert also bereits unsere Basisvorlage, 86 00:04:27,400 --> 00:04:28,800 ‫und damit 87 00:04:28,800 --> 00:04:32,070 ‫können wir diese Codezeile im Grunde in 88 00:04:32,070 --> 00:04:33,870 ‫den Head-Block einfügen, 89 00:04:33,870 --> 00:04:37,450 ‫der sich bereits in unserer Basisvorlage befindet. 90 00:04:37,450 --> 00:04:40,930 ‫Und so fügen wir das an, und so wird es dann 91 00:04:40,930 --> 00:04:44,380 ‫hier am Ende dieses Kopfblocks erscheinen, also genau hier. 92 00:04:44,380 --> 00:04:46,453 ‫Und tatsächlich versuchen wir das jetzt. 93 00:04:47,940 --> 00:04:49,053 ‫Wenn 94 00:04:50,520 --> 00:04:53,610 ‫ich also neu lade, sollten 95 00:04:53,610 --> 00:04:57,593 ‫wir jetzt diese Meldung in unserer 96 00:04:58,700 --> 00:05:02,080 ‫Konsole erhalten und tatsächlich "Hallo 97 00:05:02,080 --> 00:05:03,850 ‫von der 98 00:05:03,850 --> 00:05:06,140 ‫Client-Seite". direkt hier 99 00:05:06,140 --> 00:05:08,170 ‫in der JavaScript-Datei. 100 00:05:08,170 --> 00:05:10,390 ‫Also, wie soll das gemacht werden? 101 00:05:10,390 --> 00:05:13,590 ‫Nun, dann können wir eine Ajax-Anfrage machen, also im 102 00:05:13,590 --> 00:05:16,410 ‫Grunde einen Aufruf an unsere API und die 103 00:05:16,410 --> 00:05:17,870 ‫Daten von dort abrufen. 104 00:05:17,870 --> 00:05:20,760 ‫Aber das ist in diesem Fall nicht unbedingt nötig. 105 00:05:20,760 --> 00:05:23,590 ‫Lassen Sie mich Ihnen einen wirklich netten Trick zeigen. 106 00:05:23,590 --> 00:05:25,750 ‫Hier in unserer Tourvorlage haben wir 107 00:05:25,750 --> 00:05:28,870 ‫also bereits alle Daten über die Tour selbst 108 00:05:28,870 --> 00:05:30,840 ‫und können diese Daten 109 00:05:30,840 --> 00:05:33,270 ‫jetzt einfach in unseren HTML-Code einfügen, 110 00:05:33,270 --> 00:05:36,630 ‫damit JavaScript sie dann von dort lesen kann, okay? 111 00:05:36,630 --> 00:05:39,570 ‫Im Grunde werden wir also die Standortdaten direkt 112 00:05:39,570 --> 00:05:42,327 ‫hier als String im HTML-Code bereitstellen und 113 00:05:42,327 --> 00:05:45,080 ‫unser JavaScript holt sie dann von 114 00:05:45,080 --> 00:05:49,500 ‫dort ab, ohne es tun zu müssen, wie bei jedem API-Aufruf separat. 115 00:05:49,500 --> 00:05:52,760 ‫Kommen wir also zu 116 00:05:52,760 --> 00:05:56,270 ‫unserer Kartenklasse oder eigentlichen Sektion, okay? 117 00:05:56,270 --> 00:05:59,950 ‫Also dieser Abschnitt hier, und er hat bereits ein 118 00:05:59,950 --> 00:06:01,460 ‫Diff-Element mit 119 00:06:01,460 --> 00:06:05,410 ‫einer Map-Klasse, und Sie werden etwas später sehen, warum es 120 00:06:05,410 --> 00:06:08,800 ‫eine ID ist, okay? Aber jetzt möchte ich 121 00:06:08,800 --> 00:06:10,870 ‫hier eigentlich ein Datenattribut angeben, okay? 122 00:06:10,870 --> 00:06:13,470 ‫Es gibt also einen sehr netten Trick 123 00:06:13,470 --> 00:06:17,030 ‫in JavaScript, bei dem wir ein Datenattribut in HTML angeben 124 00:06:17,030 --> 00:06:19,580 ‫und dieses Attribut dann ganz einfach mit 125 00:06:19,580 --> 00:06:21,100 ‫JavaScript auslesen können. 126 00:06:21,100 --> 00:06:23,010 ‫Und so funktioniert es, wir 127 00:06:23,010 --> 00:06:25,710 ‫können also "Daten/" sagen und dann hier, wie 128 00:06:25,710 --> 00:06:27,730 ‫auch immer wir es nennen wollen, 129 00:06:27,730 --> 00:06:29,593 ‫in diesem Fall sagen wir 130 00:06:31,800 --> 00:06:36,560 ‫"Standorte", in Ordnung? Und dann haben wir das auf unsere Tour gesetzt. Standorte. 131 00:06:36,560 --> 00:06:38,410 ‫Bevor wir das tatsächlich 132 00:06:38,410 --> 00:06:42,840 ‫tun, müssen wir dieses Array in einen String umwandeln, oder? 133 00:06:42,840 --> 00:06:45,540 ‫Schauen wir uns das also schnell an. 134 00:06:45,540 --> 00:06:50,170 ‫Unsere Standorte sind also dieses ganze Array mit 135 00:06:50,170 --> 00:06:51,930 ‫diesen Objekten darin. 136 00:06:51,930 --> 00:06:55,320 ‫Aber in HTML können wir natürlich keine 137 00:06:55,320 --> 00:06:58,480 ‫Arrays oder Objekte oder ähnliches haben, also 138 00:06:58,480 --> 00:07:00,010 ‫müssen wir 139 00:07:00,010 --> 00:07:02,740 ‫all das in einen String umwandeln. 140 00:07:02,740 --> 00:07:05,003 ‫Und das ist zum Glück ganz 141 00:07:06,230 --> 00:07:12,513 ‫einfach, alles was wir tun müssen ist "JSON. stringify "Alles klar? 142 00:07:13,417 --> 00:07:16,960 ‫Und dann hier Tour. Standort, oder eigentlich sind 143 00:07:16,960 --> 00:07:19,610 ‫das Standorte. 144 00:07:19,610 --> 00:07:19,610 ‫Gut? 145 00:07:19,610 --> 00:07:21,063 ‫Und wenn 146 00:07:23,040 --> 00:07:28,040 ‫wir es jetzt speichern, öffnen wir es hier und inspizieren diese Karte 147 00:07:28,290 --> 00:07:31,120 ‫hier, und jetzt sehen Sie Datenstandorte und 148 00:07:31,120 --> 00:07:33,620 ‫wir haben hier diese riesige Zeichenfolge, 149 00:07:33,620 --> 00:07:36,493 ‫die im Grunde alle unsere Standortdaten enthält. 150 00:07:38,050 --> 00:07:39,670 ‫In Ordnung, und jetzt 151 00:07:39,670 --> 00:07:42,420 ‫können wir das in unserem JavaScript 152 00:07:42,420 --> 00:07:44,023 ‫ganz einfach hinbekommen. 153 00:07:46,950 --> 00:07:49,670 ‫Standorte befinden sich also im 154 00:07:50,670 --> 00:07:52,983 ‫Dokument. getElementById und 155 00:07:56,260 --> 00:07:59,810 ‫dann map, und jetzt kommt der Teil des 156 00:07:59,810 --> 00:08:04,800 ‫Tricks, denn was immer wir in ein solches Datenattribut stecken, wird 157 00:08:04,800 --> 00:08:07,820 ‫dann in der dataset-Eigenschaft gespeichert, und in 158 00:08:07,820 --> 00:08:11,020 ‫diesem Fall dataset. Standorte, weil 159 00:08:11,020 --> 00:08:15,813 ‫es Daten/ oder Datenstandort genannt wird. 160 00:08:16,980 --> 00:08:20,470 ‫Okay? Also 161 00:08:20,470 --> 00:08:26,533 ‫einfach so, Datensatz. Standorte, ok? 162 00:08:26,533 --> 00:08:28,210 ‫Und jetzt bekommen wir all 163 00:08:28,210 --> 00:08:29,453 ‫diese Fehler hier von 164 00:08:30,347 --> 00:08:33,480 ‫ESlint, und das liegt daran, dass ESlint für Node 165 00:08:33,480 --> 00:08:35,900 ‫konfiguriert ist. js und 166 00:08:35,900 --> 00:08:37,900 ‫nicht für JavaScript, und so 167 00:08:37,900 --> 00:08:40,973 ‫können wir hier ESlint grundsätzlich für diese 168 00:08:41,923 --> 00:08:46,210 ‫gesamte Datei deaktivieren, bis wir hier grundsätzlich mit einem Kommentar 169 00:08:48,300 --> 00:08:52,670 ‫am Anfang sagen, ESlint deaktivieren und so ja, es wird das 170 00:08:52,670 --> 00:08:57,000 ‫dann verstehen und komplett umdrehen aus für diese gesamte Datei, okay? 171 00:08:57,000 --> 00:08:59,100 ‫Das sind also die Standortdaten hier, 172 00:08:59,100 --> 00:09:01,320 ‫die wir gerade in unseren HTML-Code eingefügt 173 00:09:01,320 --> 00:09:03,460 ‫haben, aber denken Sie daran, dass dies 174 00:09:03,460 --> 00:09:07,285 ‫eine Zeichenfolge ist und wir sie zurück in JSON und damit in 175 00:09:07,285 --> 00:09:09,660 ‫JSON konvertieren müssen. parse und 176 00:09:11,410 --> 00:09:13,683 ‫dann alles, was hier drin ist. 177 00:09:15,960 --> 00:09:20,160 ‫In Ordnung, und jetzt schauen wir uns das an, nur um 178 00:09:20,160 --> 00:09:22,510 ‫zu sehen, ob alles richtig funktioniert. 179 00:09:26,720 --> 00:09:27,823 ‫Laden wir 180 00:09:28,770 --> 00:09:32,873 ‫neu, und jetzt ist hier in unserer Mapbox-Datei etwas schief gelaufen, 181 00:09:33,740 --> 00:09:36,063 ‫naja das scheint eigentlich auch richtig 182 00:09:37,120 --> 00:09:42,120 ‫zu sein, also testen wir einfach, ob es hier tatsächlich map heißt und 183 00:09:45,030 --> 00:09:47,830 ‫es tatsächlich eine ID mit map ist, und 184 00:09:47,830 --> 00:09:51,160 ‫daher glaube ich, dass das Problem wahrscheinlich ist dass 185 00:09:51,160 --> 00:09:53,360 ‫wir zu dem Zeitpunkt aufgerufen oder 186 00:09:53,360 --> 00:09:55,803 ‫Element per ID erhalten haben, also das 187 00:09:56,690 --> 00:09:58,560 ‫hier, also wahrscheinlich ist 188 00:09:58,560 --> 00:10:01,210 ‫das DOM zu diesem Zeitpunkt tatsächlich noch 189 00:10:01,210 --> 00:10:04,060 ‫nicht geladen, okay? Und das liegt 190 00:10:04,060 --> 00:10:08,530 ‫daran, dass wir unser Skript gleich am Anfang der Datei integriert haben, also 191 00:10:08,530 --> 00:10:09,963 ‫ist dieses Skript hier 192 00:10:11,440 --> 00:10:14,300 ‫direkt im Kopf, während es eigentlich ganz unten 193 00:10:14,300 --> 00:10:17,580 ‫auf der Seite stehen sollte. Okay? 194 00:10:17,580 --> 00:10:19,760 ‫Also lass mich diesen hier tatsächlich 195 00:10:19,760 --> 00:10:21,720 ‫kopieren und manuell in die 196 00:10:21,720 --> 00:10:24,580 ‫Basis einfügen, also werde ich ihn kopieren und 197 00:10:24,580 --> 00:10:27,610 ‫auskommentieren, aber keine Sorge, wir werden diese Block-Anfüge-Technik 198 00:10:27,610 --> 00:10:31,270 ‫hier etwas später im Video tatsächlich noch verwenden, weil Es 199 00:10:31,270 --> 00:10:34,100 ‫gibt einige Sachen von Mapbox, die wir 200 00:10:34,100 --> 00:10:35,750 ‫noch in den Kopf 201 00:10:36,920 --> 00:10:40,170 ‫stecken müssen, okay? Aber lassen Sie uns dieses Skript für 202 00:10:40,170 --> 00:10:42,483 ‫den Moment einfach hier ganz unten auf der Seite platzieren. 203 00:10:44,600 --> 00:10:45,433 ‫Okay? 204 00:10:47,220 --> 00:10:48,750 ‫Das (lacht) natürlich, 205 00:10:48,750 --> 00:10:51,200 ‫ich wollte nur in eine andere 206 00:10:51,200 --> 00:10:54,360 ‫Datei gehen, damit ich sie speichern könnte, damit 207 00:10:54,360 --> 00:10:56,180 ‫der Server tatsächlich neu 208 00:10:56,180 --> 00:10:57,880 ‫lädt, da diese Pug-Dateien, 209 00:10:57,880 --> 00:11:00,610 ‫wie Sie wahrscheinlich hier bemerkt haben, keinen 210 00:11:00,610 --> 00:11:03,010 ‫Neustart unseres Servers auslösen , OK? 211 00:11:03,010 --> 00:11:06,805 ‫Wie auch immer, ich bin zuversichtlich, dass es jetzt funktioniert 212 00:11:06,805 --> 00:11:09,150 ‫und tatsächlich tut es das. 213 00:11:09,150 --> 00:11:11,070 ‫Wir haben hier also 214 00:11:11,070 --> 00:11:15,060 ‫ein Array, und dies sind tatsächlich die vier Orte unserer Tour. 215 00:11:15,060 --> 00:11:18,190 ‫Okay, jetzt haben wir alles schön integriert und alles 216 00:11:18,190 --> 00:11:21,170 ‫ist bereit, Mapbox zu integrieren und hier unsere 217 00:11:21,170 --> 00:11:23,010 ‫eigene Karte zu erstellen. 218 00:11:23,010 --> 00:11:25,960 ‫Aber um kein zu langes Video zu erstellen, werde 219 00:11:25,960 --> 00:11:28,113 ‫ich das im nächsten tatsächlich tun.