‫-: [Jonas Schmedtman] Also wir haben schon für HTML-Templates.
‫Jetzt kommt der schwierigste Teil,
‫nämlich die Platzhalter durch den Inhalt zu ersetzen.
‫Beginnen wir also eigentlich mit der Übersicht.
‫Und lassen Sie uns hier etwas Luft zum Atmen
‫geben und einige Kommentare hinzufügen.
‫(auf einer Tastatur
‫tippen) Also Übersichtsseite und einige Kommentare hier unten.
‫Also die Produktseite und hier haben wir die API.
‫Und dann haben wir hier das Nicht gefunden.
‫Okay, das sieht schon ein bisschen besser aus.
‫Wir beginnen also wieder mit der Übersichtsseite.
‫Und so
‫ist der erste Schritt, die Vorlagenübersicht tatsächlich zu laden.
‫Okay, jedes Mal, wenn es eine
‫neue Anfrage für diese Route gibt, also
‫die angepasste Route oder /Übersicht,
‫lesen wir als erstes die Vorlagenübersicht.
‫Aber genau wie zuvor können wir
‫das auch außerhalb dieses Rückrufs tun, okay?
‫Da diese Vorlagen immer gleich sind, können
‫Sie sie gleich zu
‫Beginn auslesen, wenn wir die Anwendung starten.
‫Und dann, wenn nötig, machen wir
‫einfach weiter und ersetzen den Inhalt dort.
‫Okay, genau wie wir es hier mit den
‫Daten gemacht haben, müssen die Daten auch
‫nicht bei jeder Anfrage
‫gelesen werden, und dasselbe gilt für die Vorlagen.
‫Okay?
‫Also gehe ich eigentlich
‫vor und mache es für alle drei Vorlagen hier,
‫damit wir das aus dem Weg räumen.
‫Also mache ich weiter, und nur um dieses zu bekommen, nenne
‫es temp
‫für die Vorlagenübersicht und den DAR-Namen und
‫hier haben wir Vorlagen.
‫Und dann /template-overview.
‫Okay, dann duplizieren Sie dies hier zweimal,
‫damit wir
‫eine für die Karte haben,
‫also template-card, und dann eine für das Vorlagenprodukt.
‫Produkt, in Ordnung.
‫Und denken Sie noch einmal daran, dass wir
‫mit der synchronisierten Version auskommen können, da wir uns im
‫Code der obersten Ebene befinden.
‫Wir haben nur einmal ausgeführt, gleich zu Beginn,
‫wenn wir diese Anwendungen laden.
‫Wir konnten dies also nicht innerhalb
‫dieser CreateServer-Rückruffunktion tun, okay?
‫Denn dieser wird bei jeder Anfrage aufgerufen.
‫Und wenn wir gleichzeitig eine Million Anfragen haben, könnten
‫wir den Code eine Million Mal blockieren, einmal
‫für jede Anfrage.
‫Und das wollen wir nicht.
‫Also, die Übersicht, lasst uns eigentlich
‫loslegen und erst
‫einmal zum Testen diese tempOverview als Antwort senden.
‫Bevor wir
‫das tun können, müssen wir diesen Inhaltstyp auf HTML setzen.
‫Lassen Sie mich diesen Code hier tatsächlich kopieren.
‫Der Statuscode lautet also
‫200 und der Inhaltstyp sollte text/html sein.
‫Also starte den Server hier
‫neu und lass uns jetzt einen Blick darauf werfen,
‫und tatsächlich, los geht's.
‫Hier also unsere gestylte
‫Seite, die wir bereits von dieser kennen.
‫Jetzt fehlen hier natürlich
‫diese Zeilen, und das liegt
‫daran, dass wir noch unseren Platzhalter haben.
‫Und so besteht die nächste Aufgabe darin, diesen Platzhalter nun durch die eigentlichen
‫Karten zu ersetzen.
‫Und wie werden wir das tun?
‫Denken Sie daran, dass wir in Datenobjekten ein
‫Array aller Objekte haben, die in Daten enthalten
‫sind. JSON.
‫Also, all diese fünf Objekte, alle in JavaScript-Objekten, weil wir diese
‫Daten bereits mit nur einem String geparst haben.
‫Okay?
‫Das Datenobjekt ist also wieder ein Array
‫von an dieser Stelle fünf Objekten.
‫Was wir also
‫tun müssen, ist dieses Array im
‫Grunde zu durchlaufen und für jeden von ihnen
‫die Platzhalter in der Vorlage durch die tatsächlichen
‫Daten des aktuellen Produkts zu ersetzen, okay?
‫Sinn ergeben?
‫Also, lass uns das in Code schreiben.
‫Also Datenobjekt, wir werden es mit einer Map durchlaufen, weil
‫wir etwas zurückgeben wollen und
‫dieses Etwas werden wir in einem neuen
‫Array speichern, also nennen wir es das CardsHtml,
‫Okay?
‫Ich bin mir also sicher, dass Sie mit der Kartenmethode vertraut sind, okay?
‫Map akzeptiert also eine Callback-Funktion und diese
‫Callback-Funktion bekommt als Argument das aktuelle Element, also
‫das Element der aktuellen Schleife und alles, was wir
‫hier zurückgeben, wird
‫dann in einem Array gespeichert, okay?
‫Nehmen wir also an, wir durchlaufen ein Array mit fünf Elementen,
‫was hier
‫der Fall ist, und für jedes
‫Element geben wir etwas zurück, und dieses Etwas wird
‫dann an derselben Position, jedoch in diesem neuen CardsHtml-Array, platziert.
‫Was werden wir also in jeder dieser Iterationen tun?
‫Nun, wir wollen die Platzhalter ersetzen, oder?
‫Und so werde ich
‫tatsächlich eine Funktion
‫dafür erstellen, die als replaceTemplate bezeichnet wird.
‫Okay?
‫Und replaceTemplate nimmt das Karten-HTML auf.
‫Also im Grunde die tempCard.
‫Und es wird das aktuelle Objekt, also Element, aufnehmen.
‫Okay?
‫Dieses Element enthält also die Daten, oder?
‫Auch hier ist jede dieser Eigenschaften nun ein
‫Objekt, das die Daten in jeder dieser Eigenschaften enthält.
‫Okay?
‫Und keine Sorge, wenn es jetzt nicht 100%
‫Sinn macht, wird es, sobald wir diese replaceTemplate-Funktion erstellen, okay?
‫Also lass uns das jetzt auch hier oben machen.
‫ErsetzenTemplate ist also eine Funktion, die eine
‫Vorlage aufnimmt, sie hier nur temp nennen und
‫natürlich ein Produkt.
‫In Ordung.
‫Erstellen wir also eine Variable namens
‫output und
‫diese wird eine Vorlage sein. in unserem Platzhalter ersetzen.
‫Und wir werden hier alle Platzhalter
‫einfügen, die wir haben, beginnend mit PRODUCTNAME, okay?
‫Und damit man durch Produkt ersetzt wird. PRODUKTNAME.
‫Produkt, das ist dieses Argument, das wir an die Funktion
‫übergeben haben, . PRODUCTNAME, weil
‫das der Name des Felds ist,
‫in dem der Produktname steht.
‫In Ordung?
‫Also, mach weiter und kopiere das, und in Ordnung.
‫Ein kleiner Trick, den wir hier
‫anwenden müssen, besteht darin, tatsächlich keine Anführungszeichen
‫zu verwenden, sondern einen regulären Ausdruck zu verwenden.
‫Und das liegt
‫daran, dass es mehrere Instanzen dieses Platzhalters geben
‫kann. Der Trick besteht also darin, dies in einen regulären Ausdruck einzuschließen und
‫dann das g-Flag darauf zu verwenden.
‫Das bedeutet global,
‫und so werden alle diese Platzhalter ersetzt und nicht
‫nur der erste, der vorkommt.
‫Dies ersetzt also den Produktnamen.
‫Lassen Sie uns nun alle anderen ersetzen.
‫Also
‫Ausgabe = Ausgabe. ersetzen, und jetzt machen
‫wir einfach weiter
‫und kopieren das, um mein Leben ein bisschen einfacher zu machen.
‫Also Bild, und es heißt Bild und
‫nicht in Großbuchstaben, also einfach so.
‫Okay?
‫Hier oben habe ich
‫diese Variable erstellt, weil ich diesen Produktnamen in temp ersetzen wollte.
‫Also im Argument, und es ist keine gute
‫Praxis, die Argumente, die wir an eine Funktion
‫übergeben, direkt zu manipulieren.
‫Also habe ich eine neue Variable
‫erstellt und von
‫nun an werde ich diese erste manipulieren, okay?
‫Deshalb ist es kein const, sondern ein let.
‫Also ein Let, wir können mutieren, nachdem es erstellt wurde, okay?
‫Lassen Sie mich jetzt einfach weitermachen und ein paar davon kopieren.
‫Also Preis, und das heißt hier auch Preis, dann
‫haben wir ab,
‫dann haben wir Nährstoffe.
‫Natürlich könnte ich das alles kopieren,
‫aber ich werde hier nicht hin und her springen.
‫Also Menge, Beschreibung,
‫und ich
‫werde hier wahrscheinlich einen Fehler machen, indem
‫ich all dies manuell aufschreibe, aber
‫in einem kleinen Produkt, das ist überhaupt keine große Sache.
‫Also eigentlich brauchen wir dieses hier nicht,
‫oder eigentlich brauchen
‫wir es wegen des Bios, also
‫fehlt das Bio, aber
‫denken Sie daran, dass das Bio etwas Besonderes war.
‫In diesem Fall also, wenn das Produkt nicht biologisch ist, also
‫das Produkt. organisch, wenn es
‫falsch ist,
‫also denken Sie daran, das ist eigentlich eine Fettschrift.
‫Zum Beispiel haben wir hier organisch wahr,
‫aber hier haben wir falsch.
‫Okay?
‫Wenn es also falsch ist, dann wollen wir in diesem
‫Fall das NOT ersetzen. BIO.
‫Also das NICHT. BIO-Platzhalter mit einfach nicht-bio.
‫Also nicht organisch, weil dies der Klassenname ist,
‫den ich Ihnen vorhin gezeigt habe.
‫Es
‫ist also dieser.
‫Okay?
‫Also wird es dann hier ersetzt, okay?
‫Also, falls es nicht organisch
‫ist, dann wird der Klassenname NOT_ORGANIC
‫hier sein und dieser gesamte Stapel wird dann nicht verschoben.
‫In Ordnung, sinnvoll?
‫Also, mal
‫sehen, ob es w-- ah, Entschuldigung,
‫der
‫eigentliche Code steht darunter.
‫Versuchen wir also, mehr Sinn daraus zu machen.
‫Also, wir durchlaufen dieses Datenobjekt bereits hier, das
‫alle Produkte enthält, und in
‫jeder Iteration werden wir die Platzhalter
‫in der Vorlagenkarte durch das aktuelle Produkt ersetzen,
‫das Element ist, richtig?
‫Und diese Pfeilfunktion gibt es dann implizit hier zurück.
‫Es ist also dasselbe, als ob man hierher zurückgekehrt wäre, okay?
‫Aber es ist nicht
‫wirklich notwendig, denn in einer Pfeilfunktion wird dieser Wert
‫hier automatisch zurückgegeben, wenn Sie die geschweiften Klammern nicht haben.
‫Okay, nur für den Fall, dass Sie das
‫nicht wussten, ich habe mich gerade daran erinnert, dass wir vergessen haben, die
‫Ausgabe von hier tatsächlich zurückzugeben.
‫Okay?
‫Also geben wir natürlich das Template und das Produkt ein,
‫aber dann müssen wir natürlich den endgültigen HTML-Code ausgeben.
‫Richtig?
‫Und das wird dann hier eingesteckt, und
‫all das hier ersetzt schließlich
‫ein Array mit den fünf endgültigen HTMLs, jede für
‫eine der fünf Karten.
‫Also jeweils für eines der fünf Produkte, in Ordnung?
‫Lassen Sie uns dies nun tatsächlich in
‫der Konsole protokollieren, bevor wir es auf die Übersichtsseite stellen.
‫Also CardsHtml nur um sicherzustellen, dass hier alles funktioniert.
‫Okay?
‫Also müssen wir den Server neu laden, vergiss das nicht.
‫Das funktioniert alles gleich,
‫aber werfen wir nun einen Blick auf die Konsole.
‫Und ich fange an, hier schöne Dinge zu sehen.
‫Wir haben also ein
‫Array, und wir haben das Zeug tatsächlich ersetzt.
‫Also haben wir hier einige Avocados.
‫Hier steht FreshAvocados.
‫Es hat die vier Avocados pro Schachtel,
‫den Preis, und ja, das sieht
‫eigentlich alles sehr schön aus.
‫Und tatsächlich ist es auch ein Array.
‫Wir haben also diese
‫erste Ziffer, dann ein Komma und hier beginnt das
‫nächste Element, also die nächste Ziffer, in Ordnung?
‫Wir haben also im Moment ein Array all dieser
‫Elemente, aber wir wollen eigentlich kein Array,
‫sondern einen großen String, der all diesen HTML-Code enthält.
‫Das ist also eigentlich ganz einfach zu erreichen.
‫Alles, was wir tun müssen, ist am Ende dieses Arrays, also erinnern
‫wir uns an all das hier gibt
‫dieses Array zurück, das wir hier unten sehen, und
‫am Ende ist alles, was
‫wir tun, um eine leere Zeichenfolge zu verbinden,
‫und dies wird also alle verbinden dieser Elemente in einen String.
‫Und so ist CardsHtml jetzt wirklich ein String.
‫Okay?
‫Und jetzt haben wir unsere Karten
‫fertig und das letzte Stück
‫des Puzzles besteht darin, diesen Platzhalter zu ersetzen.
‫Also das hier, jetzt tatsächlich kopieren, also diesen
‫Platzhalter jetzt durch den
‫HTML-Code ersetzen, den wir gerade erstellt haben.
‫Nennen wir es hier also
‫Ausgabe und alles, was
‫wir tun
‫müssen, ist tempOverview mit nur einem String, der das Übersichts-HTML enthält, richtig? ersetzen und durch KartenHtml
‫ersetzen.
‫In Ordung?
‫Das ist es.
‫Jetzt müssen
‫wir nur noch mit der Ausgabe antworten und nicht mit dem, was wir vorher hatten.
‫Okay, cool.
‫Das sah also etwas
‫komplex aus, aber wenn Sie darüber nachdenken, hoffe ich,
‫dass es für Sie völlig verständlich ist.
‫Also lass uns das jetzt testen und ich hoffe,
‫dass ich keine Fehler habe
‫und etwas schief gelaufen ist, in Ordnung.
‫Also was ist das?
‫Okay, ich habe Ersetzen nur falsch geschrieben.
‫Das ist einer der häufigsten Fehler, die ich ständig bekomme.
‫Wie ein kleiner Rechtschreibfehler.
‫Nachladen und bam, los geht's.
‫Hier sind also unsere fünf Reihen.
‫So schön, schön, schön.
‫Jetzt sieht es nicht ganz
‫so aus wie das Original, denn was fehlt, ist wie dieses, dieses organische hier.
‫Okay?
‫Schauen wir uns also an, was da nicht stimmt.
‫Aus irgendeinem Grund sehe ich die
‫Menge hier auch nicht, sondern nur, wenn es nicht Bio ist.
‫Nun, das ist seltsam, also versuchen wir zu untersuchen, was
‫hier passiert.
‫Der Fehler liegt also wahrscheinlich irgendwo hier
‫in dieser replaceTemplate-Funktion.
‫Aber eigentlich sieht hier alles irgendwie richtig aus.
‫Also auch hier zu diesem nicht organischen Ersatz.
‫Werfen wir also einen Blick auf unsere Vorlagenkarte und so
‫sehe ich hier, dass wenn es
‫dieses
‫NOT_ORGANIC gibt, nun ja, eigentlich diese ganze Box hier,
‫also auch dieses H6 wird nicht
‫mehr sichtbar sein.
‫Hier sieht also etwas
‫nicht richtig aus. Schauen wir uns das Original an, nur
‫um den HTML-Code hier zu überprüfen.
‫Das Kartendetail ist also dieses
‫und wir, ja, wir haben hier tatsächlich drei
‫Kartendetails, während wir
‫in der Vorlage nur eines haben, okay?
‫Also lass uns weitermachen und diesen kopieren.
‫In den Details können Sie also tatsächlich ein Element
‫kopieren und es wird dann das gesamte
‫Element kopiert.
‫So soll es also aussehen.
‫Also sollte hier Bio stehen und nicht Menge
‫pro Karton, okay?
‫Das ist wahrscheinlich das nächste.
‫Also, lass uns das
‫schnell beheben.
‫Und hier wollen
‫wir das natürlich nicht, und ja, das sieht
‫besser aus, schließe es, starte den Server neu
‫und lass uns das nochmal überprüfen.
‫Und jetzt, bam, los geht's.
‫Jetzt funktioniert es und tatsächlich funktioniert es genauso.
‫Wunderschönen.
‫Das ist also wirklich schön.
‫Lass uns einfach weitermachen und
‫zum Beispiel die Avocados löschen, nur um zu sehen, was passiert.
‫Ich mache nur Kontrolle,
‫X um es zu schneiden, es hier neu zu laden, und
‫es ändert sich nicht und das liegt natürlich
‫daran, dass diese Daten eigentlich nur
‫am
‫Anfang gelesen werden,
‫wenn wir die App starten, okay?
‫Damit dies wirksam wird, müssen wir die Anwendung
‫effektiv neu starten.
‫Okay, also keine große Sache.
‫Und jetzt ist es weg, okay?
‫Weil es sich nicht mehr
‫in der JSON-Datei befindet, die gelesen
‫wird, wenn wir die
‫Anwendung starten. Okay?
‫Legen wir es
‫hier zurück, speichern Sie es, starten Sie es neu, öffnen Sie diesen Typ, laden Sie es neu, und hier ist es zurück.
‫Es funktioniert jetzt also wirklich dynamisch, indem alle diese Daten
‫direkt aus der JSON-Datei gelesen werden.
‫Das funktioniert also, schauen wir uns die Links auch dort
‫unten in der linken unteren Ecke an.
‫Sie sehen, dass sich die ID von Null,
‫Eins zu usw. ändert, aber wenn ich hier
‫darauf klicke, nun, wenn die Seite
‫nicht gefunden wird.
‫Und das liegt daran, dass unsere Route dafür noch nicht bereit ist.
‫Okay?
‫Lassen Sie
‫uns das im nächsten Video tatsächlich tun und die
‫Produktdetailseite für jedes dieser Produkte implementieren.
‫Also, warte nicht und lass uns jetzt weitermachen.