1 00:00:01,609 --> 00:00:04,900 ‫-: [Jonas Schmedtman] Also wir haben schon für HTML-Templates. 2 00:00:04,900 --> 00:00:07,790 ‫Jetzt kommt der schwierigste Teil, 3 00:00:07,790 --> 00:00:11,643 ‫nämlich die Platzhalter durch den Inhalt zu ersetzen. 4 00:00:13,450 --> 00:00:16,610 ‫Beginnen wir also eigentlich mit der Übersicht. 5 00:00:16,610 --> 00:00:19,680 ‫Und lassen Sie uns hier etwas Luft zum Atmen 6 00:00:19,680 --> 00:00:21,543 ‫geben und einige Kommentare hinzufügen. 7 00:00:21,543 --> 00:00:23,350 ‫(auf einer Tastatur 8 00:00:23,350 --> 00:00:27,943 ‫tippen) Also Übersichtsseite und einige Kommentare hier unten. 9 00:00:30,790 --> 00:00:35,790 ‫Also die Produktseite und hier haben wir die API. 10 00:00:39,079 --> 00:00:42,079 ‫Und dann haben wir hier das Nicht gefunden. 11 00:00:45,650 --> 00:00:48,990 ‫Okay, das sieht schon ein bisschen besser aus. 12 00:00:48,990 --> 00:00:52,820 ‫Wir beginnen also wieder mit der Übersichtsseite. 13 00:00:52,820 --> 00:00:54,100 ‫Und so 14 00:00:54,100 --> 00:00:58,580 ‫ist der erste Schritt, die Vorlagenübersicht tatsächlich zu laden. 15 00:00:58,580 --> 00:01:01,770 ‫Okay, jedes Mal, wenn es eine 16 00:01:01,770 --> 00:01:05,340 ‫neue Anfrage für diese Route gibt, also 17 00:01:05,340 --> 00:01:08,180 ‫die angepasste Route oder /Übersicht, 18 00:01:08,180 --> 00:01:11,240 ‫lesen wir als erstes die Vorlagenübersicht. 19 00:01:11,240 --> 00:01:14,020 ‫Aber genau wie zuvor können wir 20 00:01:14,020 --> 00:01:16,860 ‫das auch außerhalb dieses Rückrufs tun, okay? 21 00:01:16,860 --> 00:01:20,000 ‫Da diese Vorlagen immer gleich sind, können 22 00:01:20,000 --> 00:01:22,050 ‫Sie sie gleich zu 23 00:01:22,050 --> 00:01:25,280 ‫Beginn auslesen, wenn wir die Anwendung starten. 24 00:01:25,280 --> 00:01:28,270 ‫Und dann, wenn nötig, machen wir 25 00:01:28,270 --> 00:01:31,460 ‫einfach weiter und ersetzen den Inhalt dort. 26 00:01:31,460 --> 00:01:34,156 ‫Okay, genau wie wir es hier mit den 27 00:01:34,156 --> 00:01:36,720 ‫Daten gemacht haben, müssen die Daten auch 28 00:01:36,720 --> 00:01:38,528 ‫nicht bei jeder Anfrage 29 00:01:38,528 --> 00:01:41,403 ‫gelesen werden, und dasselbe gilt für die Vorlagen. 30 00:01:42,240 --> 00:01:43,120 ‫Okay? 31 00:01:43,120 --> 00:01:44,510 ‫Also gehe ich eigentlich 32 00:01:44,510 --> 00:01:47,090 ‫vor und mache es für alle drei Vorlagen hier, 33 00:01:47,090 --> 00:01:49,260 ‫damit wir das aus dem Weg räumen. 34 00:01:49,260 --> 00:01:54,260 ‫Also mache ich weiter, und nur um dieses zu bekommen, nenne 35 00:01:55,610 --> 00:01:57,040 ‫es temp 36 00:01:59,000 --> 00:02:02,490 ‫für die Vorlagenübersicht und den DAR-Namen und 37 00:02:03,670 --> 00:02:05,743 ‫hier haben wir Vorlagen. 38 00:02:09,370 --> 00:02:13,213 ‫Und dann /template-overview. 39 00:02:15,460 --> 00:02:18,390 ‫Okay, dann duplizieren Sie dies hier zweimal, 40 00:02:19,510 --> 00:02:20,650 ‫damit wir 41 00:02:22,320 --> 00:02:24,683 ‫eine für die Karte haben, 42 00:02:26,980 --> 00:02:29,983 ‫also template-card, und dann eine für das Vorlagenprodukt. 43 00:02:35,460 --> 00:02:37,780 ‫Produkt, in Ordnung. 44 00:02:37,780 --> 00:02:39,870 ‫Und denken Sie noch einmal daran, dass wir 45 00:02:39,870 --> 00:02:42,380 ‫mit der synchronisierten Version auskommen können, da wir uns im 46 00:02:42,380 --> 00:02:43,950 ‫Code der obersten Ebene befinden. 47 00:02:43,950 --> 00:02:47,400 ‫Wir haben nur einmal ausgeführt, gleich zu Beginn, 48 00:02:47,400 --> 00:02:50,080 ‫wenn wir diese Anwendungen laden. 49 00:02:50,080 --> 00:02:53,156 ‫Wir konnten dies also nicht innerhalb 50 00:02:53,156 --> 00:02:55,970 ‫dieser CreateServer-Rückruffunktion tun, okay? 51 00:02:55,970 --> 00:02:59,350 ‫Denn dieser wird bei jeder Anfrage aufgerufen. 52 00:02:59,350 --> 00:03:03,047 ‫Und wenn wir gleichzeitig eine Million Anfragen haben, könnten 53 00:03:03,047 --> 00:03:06,330 ‫wir den Code eine Million Mal blockieren, einmal 54 00:03:06,330 --> 00:03:08,040 ‫für jede Anfrage. 55 00:03:08,040 --> 00:03:11,450 ‫Und das wollen wir nicht. 56 00:03:11,450 --> 00:03:14,580 ‫Also, die Übersicht, lasst uns eigentlich 57 00:03:14,580 --> 00:03:16,740 ‫loslegen und erst 58 00:03:16,740 --> 00:03:21,010 ‫einmal zum Testen diese tempOverview als Antwort senden. 59 00:03:21,010 --> 00:03:22,120 ‫Bevor wir 60 00:03:22,120 --> 00:03:26,853 ‫das tun können, müssen wir diesen Inhaltstyp auf HTML setzen. 61 00:03:27,740 --> 00:03:30,453 ‫Lassen Sie mich diesen Code hier tatsächlich kopieren. 62 00:03:32,400 --> 00:03:34,120 ‫Der Statuscode lautet also 63 00:03:34,120 --> 00:03:37,063 ‫200 und der Inhaltstyp sollte text/html sein. 64 00:03:42,250 --> 00:03:44,040 ‫Also starte den Server hier 65 00:03:45,010 --> 00:03:47,943 ‫neu und lass uns jetzt einen Blick darauf werfen, 66 00:03:49,070 --> 00:03:50,670 ‫und tatsächlich, los geht's. 67 00:03:50,670 --> 00:03:52,650 ‫Hier also unsere gestylte 68 00:03:53,710 --> 00:03:56,700 ‫Seite, die wir bereits von dieser kennen. 69 00:03:56,700 --> 00:03:58,630 ‫Jetzt fehlen hier natürlich 70 00:03:58,630 --> 00:04:01,031 ‫diese Zeilen, und das liegt 71 00:04:01,031 --> 00:04:03,770 ‫daran, dass wir noch unseren Platzhalter haben. 72 00:04:03,770 --> 00:04:08,110 ‫Und so besteht die nächste Aufgabe darin, diesen Platzhalter nun durch die eigentlichen 73 00:04:08,110 --> 00:04:09,293 ‫Karten zu ersetzen. 74 00:04:10,830 --> 00:04:12,560 ‫Und wie werden wir das tun? 75 00:04:12,560 --> 00:04:15,640 ‫Denken Sie daran, dass wir in Datenobjekten ein 76 00:04:15,640 --> 00:04:19,010 ‫Array aller Objekte haben, die in Daten enthalten 77 00:04:19,010 --> 00:04:20,573 ‫sind. JSON. 78 00:04:21,620 --> 00:04:26,560 ‫Also, all diese fünf Objekte, alle in JavaScript-Objekten, weil wir diese 79 00:04:26,560 --> 00:04:31,000 ‫Daten bereits mit nur einem String geparst haben. 80 00:04:31,000 --> 00:04:31,833 ‫Okay? 81 00:04:31,833 --> 00:04:34,150 ‫Das Datenobjekt ist also wieder ein Array 82 00:04:34,150 --> 00:04:36,450 ‫von an dieser Stelle fünf Objekten. 83 00:04:36,450 --> 00:04:37,790 ‫Was wir also 84 00:04:37,790 --> 00:04:40,192 ‫tun müssen, ist dieses Array im 85 00:04:40,192 --> 00:04:42,977 ‫Grunde zu durchlaufen und für jeden von ihnen 86 00:04:42,977 --> 00:04:45,770 ‫die Platzhalter in der Vorlage durch die tatsächlichen 87 00:04:45,770 --> 00:04:48,500 ‫Daten des aktuellen Produkts zu ersetzen, okay? 88 00:04:48,500 --> 00:04:49,333 ‫Sinn ergeben? 89 00:04:50,210 --> 00:04:53,533 ‫Also, lass uns das in Code schreiben. 90 00:04:54,740 --> 00:04:59,740 ‫Also Datenobjekt, wir werden es mit einer Map durchlaufen, weil 91 00:05:00,160 --> 00:05:02,930 ‫wir etwas zurückgeben wollen und 92 00:05:02,930 --> 00:05:06,243 ‫dieses Etwas werden wir in einem neuen 93 00:05:08,060 --> 00:05:11,637 ‫Array speichern, also nennen wir es das CardsHtml, 94 00:05:16,210 --> 00:05:17,140 ‫Okay? 95 00:05:17,140 --> 00:05:22,140 ‫Ich bin mir also sicher, dass Sie mit der Kartenmethode vertraut sind, okay? 96 00:05:22,570 --> 00:05:26,147 ‫Map akzeptiert also eine Callback-Funktion und diese 97 00:05:26,147 --> 00:05:30,290 ‫Callback-Funktion bekommt als Argument das aktuelle Element, also 98 00:05:30,290 --> 00:05:34,500 ‫das Element der aktuellen Schleife und alles, was wir 99 00:05:34,500 --> 00:05:36,423 ‫hier zurückgeben, wird 100 00:05:36,423 --> 00:05:39,880 ‫dann in einem Array gespeichert, okay? 101 00:05:39,880 --> 00:05:44,240 ‫Nehmen wir also an, wir durchlaufen ein Array mit fünf Elementen, 102 00:05:44,240 --> 00:05:45,434 ‫was hier 103 00:05:45,434 --> 00:05:48,074 ‫der Fall ist, und für jedes 104 00:05:48,074 --> 00:05:51,851 ‫Element geben wir etwas zurück, und dieses Etwas wird 105 00:05:51,851 --> 00:05:55,990 ‫dann an derselben Position, jedoch in diesem neuen CardsHtml-Array, platziert. 106 00:05:55,990 --> 00:05:59,970 ‫Was werden wir also in jeder dieser Iterationen tun? 107 00:05:59,970 --> 00:06:03,048 ‫Nun, wir wollen die Platzhalter ersetzen, oder? 108 00:06:03,048 --> 00:06:05,200 ‫Und so werde ich 109 00:06:05,200 --> 00:06:06,843 ‫tatsächlich eine Funktion 110 00:06:06,843 --> 00:06:09,787 ‫dafür erstellen, die als replaceTemplate bezeichnet wird. 111 00:06:13,881 --> 00:06:14,844 ‫Okay? 112 00:06:14,844 --> 00:06:18,761 ‫Und replaceTemplate nimmt das Karten-HTML auf. 113 00:06:19,820 --> 00:06:22,203 ‫Also im Grunde die tempCard. 114 00:06:24,890 --> 00:06:28,713 ‫Und es wird das aktuelle Objekt, also Element, aufnehmen. 115 00:06:29,660 --> 00:06:30,493 ‫Okay? 116 00:06:30,493 --> 00:06:33,703 ‫Dieses Element enthält also die Daten, oder? 117 00:06:34,900 --> 00:06:38,511 ‫Auch hier ist jede dieser Eigenschaften nun ein 118 00:06:38,511 --> 00:06:42,423 ‫Objekt, das die Daten in jeder dieser Eigenschaften enthält. 119 00:06:44,070 --> 00:06:44,903 ‫Okay? 120 00:06:44,903 --> 00:06:49,430 ‫Und keine Sorge, wenn es jetzt nicht 100% 121 00:06:49,430 --> 00:06:54,130 ‫Sinn macht, wird es, sobald wir diese replaceTemplate-Funktion erstellen, okay? 122 00:06:54,130 --> 00:06:56,993 ‫Also lass uns das jetzt auch hier oben machen. 123 00:06:59,610 --> 00:07:03,100 ‫ErsetzenTemplate ist also eine Funktion, die eine 124 00:07:03,100 --> 00:07:07,420 ‫Vorlage aufnimmt, sie hier nur temp nennen und 125 00:07:07,420 --> 00:07:09,673 ‫natürlich ein Produkt. 126 00:07:12,690 --> 00:07:13,523 ‫In Ordung. 127 00:07:15,780 --> 00:07:18,520 ‫Erstellen wir also eine Variable namens 128 00:07:19,500 --> 00:07:21,350 ‫output und 129 00:07:22,510 --> 00:07:27,510 ‫diese wird eine Vorlage sein. in unserem Platzhalter ersetzen. 130 00:07:29,620 --> 00:07:32,810 ‫Und wir werden hier alle Platzhalter 131 00:07:32,810 --> 00:07:36,343 ‫einfügen, die wir haben, beginnend mit PRODUCTNAME, okay? 132 00:07:39,130 --> 00:07:43,963 ‫Und damit man durch Produkt ersetzt wird. PRODUKTNAME. 133 00:07:45,230 --> 00:07:48,300 ‫Produkt, das ist dieses Argument, das wir an die Funktion 134 00:07:48,300 --> 00:07:50,997 ‫übergeben haben, . PRODUCTNAME, weil 135 00:07:52,300 --> 00:07:54,890 ‫das der Name des Felds ist, 136 00:07:54,890 --> 00:07:57,350 ‫in dem der Produktname steht. 137 00:07:57,350 --> 00:07:58,250 ‫In Ordung? 138 00:07:58,250 --> 00:08:02,160 ‫Also, mach weiter und kopiere das, und in Ordnung. 139 00:08:02,160 --> 00:08:05,014 ‫Ein kleiner Trick, den wir hier 140 00:08:05,014 --> 00:08:08,150 ‫anwenden müssen, besteht darin, tatsächlich keine Anführungszeichen 141 00:08:08,150 --> 00:08:11,730 ‫zu verwenden, sondern einen regulären Ausdruck zu verwenden. 142 00:08:11,730 --> 00:08:13,380 ‫Und das liegt 143 00:08:13,380 --> 00:08:16,517 ‫daran, dass es mehrere Instanzen dieses Platzhalters geben 144 00:08:16,517 --> 00:08:21,517 ‫kann. Der Trick besteht also darin, dies in einen regulären Ausdruck einzuschließen und 145 00:08:22,660 --> 00:08:24,940 ‫dann das g-Flag darauf zu verwenden. 146 00:08:24,940 --> 00:08:27,010 ‫Das bedeutet global, 147 00:08:27,010 --> 00:08:31,920 ‫und so werden alle diese Platzhalter ersetzt und nicht 148 00:08:31,920 --> 00:08:34,530 ‫nur der erste, der vorkommt. 149 00:08:34,530 --> 00:08:36,910 ‫Dies ersetzt also den Produktnamen. 150 00:08:36,910 --> 00:08:39,663 ‫Lassen Sie uns nun alle anderen ersetzen. 151 00:08:41,050 --> 00:08:42,473 ‫Also 152 00:08:44,250 --> 00:08:48,140 ‫Ausgabe = Ausgabe. ersetzen, und jetzt machen 153 00:08:48,140 --> 00:08:49,900 ‫wir einfach weiter 154 00:08:49,900 --> 00:08:54,900 ‫und kopieren das, um mein Leben ein bisschen einfacher zu machen. 155 00:08:56,360 --> 00:08:59,990 ‫Also Bild, und es heißt Bild und 156 00:09:01,538 --> 00:09:04,863 ‫nicht in Großbuchstaben, also einfach so. 157 00:09:06,000 --> 00:09:07,020 ‫Okay? 158 00:09:07,020 --> 00:09:09,070 ‫Hier oben habe ich 159 00:09:09,070 --> 00:09:13,520 ‫diese Variable erstellt, weil ich diesen Produktnamen in temp ersetzen wollte. 160 00:09:13,520 --> 00:09:16,785 ‫Also im Argument, und es ist keine gute 161 00:09:16,785 --> 00:09:19,760 ‫Praxis, die Argumente, die wir an eine Funktion 162 00:09:19,760 --> 00:09:21,760 ‫übergeben, direkt zu manipulieren. 163 00:09:21,760 --> 00:09:24,180 ‫Also habe ich eine neue Variable 164 00:09:24,180 --> 00:09:25,750 ‫erstellt und von 165 00:09:25,750 --> 00:09:29,100 ‫nun an werde ich diese erste manipulieren, okay? 166 00:09:29,100 --> 00:09:31,820 ‫Deshalb ist es kein const, sondern ein let. 167 00:09:31,820 --> 00:09:35,424 ‫Also ein Let, wir können mutieren, nachdem es erstellt wurde, okay? 168 00:09:35,424 --> 00:09:37,874 ‫Lassen Sie mich jetzt einfach weitermachen und ein paar davon kopieren. 169 00:09:40,720 --> 00:09:44,930 ‫Also Preis, und das heißt hier auch Preis, dann 170 00:09:44,930 --> 00:09:46,653 ‫haben wir ab, 171 00:09:50,790 --> 00:09:52,613 ‫dann haben wir Nährstoffe. 172 00:09:58,500 --> 00:10:00,290 ‫Natürlich könnte ich das alles kopieren, 173 00:10:00,290 --> 00:10:02,853 ‫aber ich werde hier nicht hin und her springen. 174 00:10:06,930 --> 00:10:08,033 ‫Also Menge, Beschreibung, 175 00:10:13,674 --> 00:10:14,703 ‫und ich 176 00:10:17,200 --> 00:10:19,990 ‫werde hier wahrscheinlich einen Fehler machen, indem 177 00:10:19,990 --> 00:10:22,370 ‫ich all dies manuell aufschreibe, aber 178 00:10:23,410 --> 00:10:26,920 ‫in einem kleinen Produkt, das ist überhaupt keine große Sache. 179 00:10:26,920 --> 00:10:29,470 ‫Also eigentlich brauchen wir dieses hier nicht, 180 00:10:29,470 --> 00:10:30,950 ‫oder eigentlich brauchen 181 00:10:30,950 --> 00:10:33,120 ‫wir es wegen des Bios, also 182 00:10:33,120 --> 00:10:34,830 ‫fehlt das Bio, aber 183 00:10:34,830 --> 00:10:37,870 ‫denken Sie daran, dass das Bio etwas Besonderes war. 184 00:10:37,870 --> 00:10:41,743 ‫In diesem Fall also, wenn das Produkt nicht biologisch ist, also 185 00:10:42,900 --> 00:10:44,890 ‫das Produkt. organisch, wenn es 186 00:10:44,890 --> 00:10:45,883 ‫falsch ist, 187 00:10:47,450 --> 00:10:50,510 ‫also denken Sie daran, das ist eigentlich eine Fettschrift. 188 00:10:50,510 --> 00:10:53,130 ‫Zum Beispiel haben wir hier organisch wahr, 189 00:10:53,130 --> 00:10:55,180 ‫aber hier haben wir falsch. 190 00:10:55,180 --> 00:10:56,013 ‫Okay? 191 00:10:56,013 --> 00:10:59,470 ‫Wenn es also falsch ist, dann wollen wir in diesem 192 00:10:59,470 --> 00:11:03,273 ‫Fall das NOT ersetzen. BIO. 193 00:11:08,340 --> 00:11:13,340 ‫Also das NICHT. BIO-Platzhalter mit einfach nicht-bio. 194 00:11:17,630 --> 00:11:20,160 ‫Also nicht organisch, weil dies der Klassenname ist, 195 00:11:20,160 --> 00:11:22,313 ‫den ich Ihnen vorhin gezeigt habe. 196 00:11:24,070 --> 00:11:25,730 ‫Es 197 00:11:25,730 --> 00:11:28,153 ‫ist also dieser. 198 00:11:29,500 --> 00:11:30,520 ‫Okay? 199 00:11:30,520 --> 00:11:35,100 ‫Also wird es dann hier ersetzt, okay? 200 00:11:35,100 --> 00:11:37,350 ‫Also, falls es nicht organisch 201 00:11:37,350 --> 00:11:39,797 ‫ist, dann wird der Klassenname NOT_ORGANIC 202 00:11:39,797 --> 00:11:44,043 ‫hier sein und dieser gesamte Stapel wird dann nicht verschoben. 203 00:11:46,010 --> 00:11:47,623 ‫In Ordnung, sinnvoll? 204 00:11:48,490 --> 00:11:49,760 ‫Also, mal 205 00:11:49,760 --> 00:11:52,410 ‫sehen, ob es w-- ah, Entschuldigung, 206 00:11:52,410 --> 00:11:53,410 ‫der 207 00:11:53,410 --> 00:11:55,143 ‫eigentliche Code steht darunter. 208 00:11:56,240 --> 00:11:59,890 ‫Versuchen wir also, mehr Sinn daraus zu machen. 209 00:11:59,890 --> 00:12:03,910 ‫Also, wir durchlaufen dieses Datenobjekt bereits hier, das 210 00:12:03,910 --> 00:12:06,840 ‫alle Produkte enthält, und in 211 00:12:06,840 --> 00:12:10,095 ‫jeder Iteration werden wir die Platzhalter 212 00:12:10,095 --> 00:12:13,890 ‫in der Vorlagenkarte durch das aktuelle Produkt ersetzen, 213 00:12:13,890 --> 00:12:16,236 ‫das Element ist, richtig? 214 00:12:16,236 --> 00:12:20,580 ‫Und diese Pfeilfunktion gibt es dann implizit hier zurück. 215 00:12:20,580 --> 00:12:24,150 ‫Es ist also dasselbe, als ob man hierher zurückgekehrt wäre, okay? 216 00:12:24,150 --> 00:12:26,130 ‫Aber es ist nicht 217 00:12:26,130 --> 00:12:29,341 ‫wirklich notwendig, denn in einer Pfeilfunktion wird dieser Wert 218 00:12:29,341 --> 00:12:32,934 ‫hier automatisch zurückgegeben, wenn Sie die geschweiften Klammern nicht haben. 219 00:12:32,934 --> 00:12:35,782 ‫Okay, nur für den Fall, dass Sie das 220 00:12:35,782 --> 00:12:40,782 ‫nicht wussten, ich habe mich gerade daran erinnert, dass wir vergessen haben, die 221 00:12:41,210 --> 00:12:43,383 ‫Ausgabe von hier tatsächlich zurückzugeben. 222 00:12:45,360 --> 00:12:46,193 ‫Okay? 223 00:12:46,193 --> 00:12:49,870 ‫Also geben wir natürlich das Template und das Produkt ein, 224 00:12:49,870 --> 00:12:53,533 ‫aber dann müssen wir natürlich den endgültigen HTML-Code ausgeben. 225 00:12:54,700 --> 00:12:55,533 ‫Richtig? 226 00:12:55,533 --> 00:12:58,640 ‫Und das wird dann hier eingesteckt, und 227 00:12:58,640 --> 00:13:01,420 ‫all das hier ersetzt schließlich 228 00:13:01,420 --> 00:13:05,850 ‫ein Array mit den fünf endgültigen HTMLs, jede für 229 00:13:05,850 --> 00:13:08,090 ‫eine der fünf Karten. 230 00:13:08,090 --> 00:13:12,580 ‫Also jeweils für eines der fünf Produkte, in Ordnung? 231 00:13:12,580 --> 00:13:16,380 ‫Lassen Sie uns dies nun tatsächlich in 232 00:13:16,380 --> 00:13:21,010 ‫der Konsole protokollieren, bevor wir es auf die Übersichtsseite stellen. 233 00:13:21,010 --> 00:13:25,433 ‫Also CardsHtml nur um sicherzustellen, dass hier alles funktioniert. 234 00:13:28,090 --> 00:13:28,923 ‫Okay? 235 00:13:30,190 --> 00:13:32,853 ‫Also müssen wir den Server neu laden, vergiss das nicht. 236 00:13:35,810 --> 00:13:37,370 ‫Das funktioniert alles gleich, 237 00:13:37,370 --> 00:13:39,940 ‫aber werfen wir nun einen Blick auf die Konsole. 238 00:13:39,940 --> 00:13:43,710 ‫Und ich fange an, hier schöne Dinge zu sehen. 239 00:13:43,710 --> 00:13:45,500 ‫Wir haben also ein 240 00:13:45,500 --> 00:13:48,350 ‫Array, und wir haben das Zeug tatsächlich ersetzt. 241 00:13:48,350 --> 00:13:50,170 ‫Also haben wir hier einige Avocados. 242 00:13:50,170 --> 00:13:52,720 ‫Hier steht FreshAvocados. 243 00:13:52,720 --> 00:13:55,773 ‫Es hat die vier Avocados pro Schachtel, 244 00:13:57,020 --> 00:13:59,940 ‫den Preis, und ja, das sieht 245 00:13:59,940 --> 00:14:02,500 ‫eigentlich alles sehr schön aus. 246 00:14:02,500 --> 00:14:03,840 ‫Und tatsächlich ist es auch ein Array. 247 00:14:03,840 --> 00:14:05,860 ‫Wir haben also diese 248 00:14:05,860 --> 00:14:09,140 ‫erste Ziffer, dann ein Komma und hier beginnt das 249 00:14:09,140 --> 00:14:12,380 ‫nächste Element, also die nächste Ziffer, in Ordnung? 250 00:14:12,380 --> 00:14:15,920 ‫Wir haben also im Moment ein Array all dieser 251 00:14:15,920 --> 00:14:18,880 ‫Elemente, aber wir wollen eigentlich kein Array, 252 00:14:18,880 --> 00:14:22,273 ‫sondern einen großen String, der all diesen HTML-Code enthält. 253 00:14:24,250 --> 00:14:27,020 ‫Das ist also eigentlich ganz einfach zu erreichen. 254 00:14:27,020 --> 00:14:30,910 ‫Alles, was wir tun müssen, ist am Ende dieses Arrays, also erinnern 255 00:14:30,910 --> 00:14:33,290 ‫wir uns an all das hier gibt 256 00:14:33,290 --> 00:14:36,283 ‫dieses Array zurück, das wir hier unten sehen, und 257 00:14:37,550 --> 00:14:39,600 ‫am Ende ist alles, was 258 00:14:39,600 --> 00:14:42,520 ‫wir tun, um eine leere Zeichenfolge zu verbinden, 259 00:14:42,520 --> 00:14:46,080 ‫und dies wird also alle verbinden dieser Elemente in einen String. 260 00:14:46,080 --> 00:14:50,310 ‫Und so ist CardsHtml jetzt wirklich ein String. 261 00:14:50,310 --> 00:14:51,143 ‫Okay? 262 00:14:51,143 --> 00:14:54,070 ‫Und jetzt haben wir unsere Karten 263 00:14:54,070 --> 00:14:56,790 ‫fertig und das letzte Stück 264 00:14:56,790 --> 00:15:00,740 ‫des Puzzles besteht darin, diesen Platzhalter zu ersetzen. 265 00:15:00,740 --> 00:15:04,110 ‫Also das hier, jetzt tatsächlich kopieren, also diesen 266 00:15:04,110 --> 00:15:06,401 ‫Platzhalter jetzt durch den 267 00:15:06,401 --> 00:15:09,413 ‫HTML-Code ersetzen, den wir gerade erstellt haben. 268 00:15:11,050 --> 00:15:12,830 ‫Nennen wir es hier also 269 00:15:13,760 --> 00:15:15,150 ‫Ausgabe und alles, was 270 00:15:15,150 --> 00:15:16,343 ‫wir tun 271 00:15:18,060 --> 00:15:22,423 ‫müssen, ist tempOverview mit nur einem String, der das Übersichts-HTML enthält, richtig? ersetzen und durch KartenHtml 272 00:15:24,156 --> 00:15:25,553 ‫ersetzen. 273 00:15:27,330 --> 00:15:30,253 ‫In Ordung? 274 00:15:32,490 --> 00:15:33,750 ‫Das ist es. 275 00:15:33,750 --> 00:15:34,583 ‫Jetzt müssen 276 00:15:34,583 --> 00:15:38,620 ‫wir nur noch mit der Ausgabe antworten und nicht mit dem, was wir vorher hatten. 277 00:15:38,620 --> 00:15:41,933 ‫Okay, cool. 278 00:15:43,380 --> 00:15:44,730 ‫Das sah also etwas 279 00:15:44,730 --> 00:15:46,760 ‫komplex aus, aber wenn Sie darüber nachdenken, hoffe ich, 280 00:15:46,760 --> 00:15:48,430 ‫dass es für Sie völlig verständlich ist. 281 00:15:48,430 --> 00:15:51,563 ‫Also lass uns das jetzt testen und ich hoffe, 282 00:15:52,920 --> 00:15:55,200 ‫dass ich keine Fehler habe 283 00:15:56,040 --> 00:15:58,395 ‫und etwas schief gelaufen ist, in Ordnung. 284 00:15:58,395 --> 00:16:02,290 ‫Also was ist das? 285 00:16:02,290 --> 00:16:03,670 ‫Okay, ich habe Ersetzen nur falsch geschrieben. 286 00:16:03,670 --> 00:16:07,000 ‫Das ist einer der häufigsten Fehler, die ich ständig bekomme. 287 00:16:07,000 --> 00:16:10,863 ‫Wie ein kleiner Rechtschreibfehler. 288 00:16:12,310 --> 00:16:15,003 ‫Nachladen und bam, los geht's. 289 00:16:16,060 --> 00:16:18,740 ‫Hier sind also unsere fünf Reihen. 290 00:16:18,740 --> 00:16:22,670 ‫So schön, schön, schön. 291 00:16:22,670 --> 00:16:24,902 ‫Jetzt sieht es nicht ganz 292 00:16:24,902 --> 00:16:29,902 ‫so aus wie das Original, denn was fehlt, ist wie dieses, dieses organische hier. 293 00:16:30,050 --> 00:16:35,050 ‫Okay? 294 00:16:36,190 --> 00:16:37,023 ‫Schauen wir uns also an, was da nicht stimmt. 295 00:16:37,023 --> 00:16:40,070 ‫Aus irgendeinem Grund sehe ich die 296 00:16:40,070 --> 00:16:44,570 ‫Menge hier auch nicht, sondern nur, wenn es nicht Bio ist. 297 00:16:44,570 --> 00:16:48,300 ‫Nun, das ist seltsam, also versuchen wir zu untersuchen, was 298 00:16:48,300 --> 00:16:49,371 ‫hier passiert. 299 00:16:49,371 --> 00:16:53,420 ‫Der Fehler liegt also wahrscheinlich irgendwo hier 300 00:16:53,420 --> 00:16:55,620 ‫in dieser replaceTemplate-Funktion. 301 00:16:55,620 --> 00:16:58,820 ‫Aber eigentlich sieht hier alles irgendwie richtig aus. 302 00:16:58,820 --> 00:17:02,210 ‫Also auch hier zu diesem nicht organischen Ersatz. 303 00:17:02,210 --> 00:17:06,293 ‫Werfen wir also einen Blick auf unsere Vorlagenkarte und so 304 00:17:07,220 --> 00:17:09,890 ‫sehe ich hier, dass wenn es 305 00:17:11,410 --> 00:17:12,243 ‫dieses 306 00:17:13,890 --> 00:17:17,830 ‫NOT_ORGANIC gibt, nun ja, eigentlich diese ganze Box hier, 307 00:17:17,830 --> 00:17:20,550 ‫also auch dieses H6 wird nicht 308 00:17:20,550 --> 00:17:21,690 ‫mehr sichtbar sein. 309 00:17:25,330 --> 00:17:26,783 ‫Hier sieht also etwas 310 00:17:27,910 --> 00:17:30,980 ‫nicht richtig aus. Schauen wir uns das Original an, nur 311 00:17:30,980 --> 00:17:33,080 ‫um den HTML-Code hier zu überprüfen. 312 00:17:34,870 --> 00:17:37,183 ‫Das Kartendetail ist also dieses 313 00:17:39,730 --> 00:17:43,330 ‫und wir, ja, wir haben hier tatsächlich drei 314 00:17:43,330 --> 00:17:45,150 ‫Kartendetails, während wir 315 00:17:45,150 --> 00:17:48,630 ‫in der Vorlage nur eines haben, okay? 316 00:17:48,630 --> 00:17:51,773 ‫Also lass uns weitermachen und diesen kopieren. 317 00:17:52,670 --> 00:17:56,270 ‫In den Details können Sie also tatsächlich ein Element 318 00:17:56,270 --> 00:17:59,160 ‫kopieren und es wird dann das gesamte 319 00:18:00,410 --> 00:18:01,260 ‫Element kopiert. 320 00:18:03,300 --> 00:18:06,283 ‫So soll es also aussehen. 321 00:18:07,400 --> 00:18:11,053 ‫Also sollte hier Bio stehen und nicht Menge 322 00:18:13,220 --> 00:18:14,840 ‫pro Karton, okay? 323 00:18:14,840 --> 00:18:18,193 ‫Das ist wahrscheinlich das nächste. 324 00:18:18,193 --> 00:18:20,263 ‫Also, lass uns das 325 00:18:27,780 --> 00:18:29,193 ‫schnell beheben. 326 00:18:30,730 --> 00:18:32,290 ‫Und hier wollen 327 00:18:32,290 --> 00:18:35,760 ‫wir das natürlich nicht, und ja, das sieht 328 00:18:35,760 --> 00:18:38,920 ‫besser aus, schließe es, starte den Server neu 329 00:18:38,920 --> 00:18:41,763 ‫und lass uns das nochmal überprüfen. 330 00:18:43,850 --> 00:18:48,143 ‫Und jetzt, bam, los geht's. 331 00:18:49,550 --> 00:18:51,660 ‫Jetzt funktioniert es und tatsächlich funktioniert es genauso. 332 00:18:51,660 --> 00:18:56,660 ‫Wunderschönen. 333 00:18:57,150 --> 00:18:58,370 ‫Das ist also wirklich schön. 334 00:18:58,370 --> 00:19:01,070 ‫Lass uns einfach weitermachen und 335 00:19:01,070 --> 00:19:06,070 ‫zum Beispiel die Avocados löschen, nur um zu sehen, was passiert. 336 00:19:06,990 --> 00:19:08,680 ‫Ich mache nur Kontrolle, 337 00:19:08,680 --> 00:19:13,680 ‫X um es zu schneiden, es hier neu zu laden, und 338 00:19:13,900 --> 00:19:17,410 ‫es ändert sich nicht und das liegt natürlich 339 00:19:17,410 --> 00:19:20,040 ‫daran, dass diese Daten eigentlich nur 340 00:19:20,890 --> 00:19:21,723 ‫am 341 00:19:22,770 --> 00:19:24,420 ‫Anfang gelesen werden, 342 00:19:24,420 --> 00:19:26,990 ‫wenn wir die App starten, okay? 343 00:19:26,990 --> 00:19:30,490 ‫Damit dies wirksam wird, müssen wir die Anwendung 344 00:19:30,490 --> 00:19:32,250 ‫effektiv neu starten. 345 00:19:32,250 --> 00:19:36,635 ‫Okay, also keine große Sache. 346 00:19:36,635 --> 00:19:38,853 ‫Und jetzt ist es weg, okay? 347 00:19:40,760 --> 00:19:43,200 ‫Weil es sich nicht mehr 348 00:19:43,200 --> 00:19:45,900 ‫in der JSON-Datei befindet, die gelesen 349 00:19:45,900 --> 00:19:47,920 ‫wird, wenn wir die 350 00:19:47,920 --> 00:19:49,630 ‫Anwendung starten. Okay? 351 00:19:52,050 --> 00:19:52,883 ‫Legen wir es 352 00:19:52,883 --> 00:19:57,563 ‫hier zurück, speichern Sie es, starten Sie es neu, öffnen Sie diesen Typ, laden Sie es neu, und hier ist es zurück. 353 00:19:58,450 --> 00:20:02,630 ‫Es funktioniert jetzt also wirklich dynamisch, indem alle diese Daten 354 00:20:02,630 --> 00:20:05,580 ‫direkt aus der JSON-Datei gelesen werden. 355 00:20:05,580 --> 00:20:09,660 ‫Das funktioniert also, schauen wir uns die Links auch dort 356 00:20:09,660 --> 00:20:12,860 ‫unten in der linken unteren Ecke an. 357 00:20:12,860 --> 00:20:15,810 ‫Sie sehen, dass sich die ID von Null, 358 00:20:15,810 --> 00:20:18,600 ‫Eins zu usw. ändert, aber wenn ich hier 359 00:20:18,600 --> 00:20:20,750 ‫darauf klicke, nun, wenn die Seite 360 00:20:20,750 --> 00:20:22,320 ‫nicht gefunden wird. 361 00:20:22,320 --> 00:20:25,310 ‫Und das liegt daran, dass unsere Route dafür noch nicht bereit ist. 362 00:20:25,310 --> 00:20:29,170 ‫Okay? 363 00:20:29,170 --> 00:20:30,010 ‫Lassen Sie 364 00:20:30,010 --> 00:20:33,320 ‫uns das im nächsten Video tatsächlich tun und die 365 00:20:33,320 --> 00:20:35,780 ‫Produktdetailseite für jedes dieser Produkte implementieren. 366 00:20:35,780 --> 00:20:37,200 ‫Also, warte nicht und lass uns jetzt weitermachen.