‫Kursleiter: In diesem Video
‫werden wir die Leistungsfähigkeit von Pug nutzen, um eine wirklich schöne E-Mail-Vorlage zu
‫erstellen und dann eine Willkommens-E-Mail basierend auf dieser Vorlage zu senden.
‫Und diese Vorlage ist willkommen. Mops hier.
‫Okay, nach wie vor habe ich hier bereits
‫eine Vorlage in dev-data-Vorlagen.
‫Also E-Mail-Vorlage und so ist der ganze Code
‫hier mit dem CSS auch in Zeilen.
‫Also eine Menge CSS.
‫Lassen Sie uns das alles hier in Willkommen kopieren. Mops.
‫Okay, und hier unten sehen Sie diese Notiz, in
‫der ich sage, dass diese E-Mail-Vorlage tatsächlich von dieser
‫übernommen wurde.
‫Also lass uns das ganz schnell öffnen.
‫Gut.
‫Und so wird unsere E-Mail ein bisschen wie diese aussehen.
‫Jetzt habe ich das Design natürlich ein wenig an unsere Marke angepasst.
‫Für diesen Button hier habe
‫ich zum Beispiel unsere grüne Farbe verwendet.
‫Aber was ich verwendet habe, ist diese HTML-Vorlage.
‫Dann habe ich diesen HTML-Code mit diesem Tool tatsächlich konvertiert.
‫Also HTML zu Mops.
‫Schauen wir uns das noch einmal kurz an.
‫Im Grunde können Sie
‫hier also etwas HTML einfügen,
‫dann auf Konvertieren klicken und den Pug-Code für Sie ausgeben.
‫Das kann also sehr praktisch sein, wenn Sie
‫versuchen, einige vorhandene Seiten, für die Sie bereits einen HTML-Code haben, in Mops zu konvertieren.
‫Wie auch immer, wenn wir eine HTML-E-Mail erstellen,
‫müssen wir immer alle Stile inline einfügen.
‫Und deshalb haben Sie diese Menge CSS direkt
‫hier in dieser Datei.
‫Aber das macht diese Datei natürlich etwas
‫verrauscht, also packen wir das alles und exportieren es.
‫In Ordnung, also, ja.
‫So, das wars.
‫Schneiden Sie
‫es also aus und erstellen Sie hier
‫eine neue Datei, und dann, wie zuvor, mit Dateien, die ich einbeziehen
‫werde, verwende ich den Unterstrich-dann-Stil. Mops.
‫Also füge das hier ein.
‫Und jetzt müssen wir all diese Einfügungen auch hier und
‫so wieder anpassen, Befehl + Umschalt +
‫P oder wahrscheinlich unter Windows Strg + Umschalt + P.
‫Und dann schreib einfach Mops für Mops verschönern.
‫Und das macht unseren Code schön.
‫Schließen Sie das hier,
‫und jetzt include_style.
‫Okay, und jetzt sehen Sie all diese Codes hier unten, was wirklich
‫verwirrend aussieht und das ist eigentlich der Grund, warum
‫ich diese Vorlage aus dem GitHub-Repository kopiert habe, das ich Ihnen
‫zuvor gezeigt habe.
‫Es gibt also viele Tabellen, und
‫das liegt daran, dass
‫viele E-Mail-Clients Tabellen eigentlich nur zum Formatieren verstehen.
‫Wir haben also all diese Dinge hier, die bei
‫Tabellenzeilen innerhalb von Tabellen innerhalb von Tabellen nicht wirklich sinnvoll sind.
‫Habe ich recht?
‫Aber was hier zählt, ist dieser Inhaltsbereich hier.
‫Dies ist also der Teil
‫der Vorlage, in den wir alle unsere Inhalte einfügen.
‫Die Sache ist nun, dass wir natürlich
‫viele verschiedene Vorlagen haben werden.
‫Im Fall
‫dieses Projekts werden wir eigentlich nur
‫zwei selbst erstellen, aber es kann viele E-Mails für
‫viele Situationen geben und daher brauchen wir natürlich
‫eine Möglichkeit, all diesen Code außerhalb dieses Inhalts wiederzuverwenden.
‫Im Grunde sollten alle diese hier wiederverwendbar sein,
‫und genau das haben wir zuvor mit
‫unserer Basisvorlage hier gemacht.
‫Gut.
‫Also legen wir alles, was für alle Vorlagen wiederverwendbar
‫ist, in diese Basis, dann haben wir unseren Block dort und
‫alle anderen Vorlagen,
‫dann erweitern wir einfach diesen Block.
‫Und genau das werden wir jetzt tun.
‫Lassen Sie uns also alle diese von hier aus ausschneiden, eine neue
‫Vorlage namens baseEmail erstellen und diese dann
‫hier einfügen.
‫Und jetzt, für den Inhalt selbst, entfernen wir
‫das natürlich von der Basis.
‫Schneiden Sie das also von hier
‫aus, und hier erstellen wir dann wieder
‫einen Block namens content.
‫Gut.
‫Und jetzt hier, in unserer Willkommensvorlage, fügen wir diesen
‫Inhalt dann in diesen
‫Inhaltsblock ein.
‫Okay.
‫Und zum Schluss müssen wir noch sagen,
‫dass es erweitert wird, sodass dieses
‫Template hier die baseEmail erweitert.
‫Lassen Sie uns das noch einmal mit diesem Befehl formatieren
‫und das ist schön.
‫Toll.
‫Hier in unserer Basisvorlage
‫haben wir nun tatsächlich das Thema als Titel.
‫Und das ist der Grund, warum
‫ich das in die Vorlage übernommen habe.
‫Das ist also genau hier, erinnerst du dich?
‫In das Template haben wir also den Betreff,
‫die URL und den firstName übergeben.
‫Also lassen Sie uns jetzt fortfahren und dies in unserer Vorlage verwenden.
‫Also das Thema, das wir hier in der Basis bereits verwendet haben,
‫aber das war es eigentlich für diese Datei, also
‫werden wir es nicht noch einmal berühren.
‫Und hier ist nun unsere echte Vorlage.
‫Wir haben hier also den Namen und ersetzen ihn
‫durch die Variable Vorname.
‫Also firstName hier, dann haben wir all diese schönen Texte hier.
‫Also, willkommen in der Familie, all das Zeug.
‫Und dann hier unten haben wir diesen grünen
‫Button, über den ich gesprochen habe, als ich Ihnen die Vorlage
‫auf GitHub gezeigt habe, und so weiter, dieser Button, wir sagen Benutzerfoto hochladen.
‫Hier müssen wir also die URL angeben, die wir übergeben haben.
‫In Ordnung, es heißt also URL, richtig.
‫Und jetzt setzen wir das hier auf diesen Knopf und das
‫war's dann auch schon.
‫Der ganze Rest hier ist nur
‫statischer Inhalt, den wir überhaupt nicht ändern müssen, in Ordnung?
‫Diese Willkommensvorlage hier wird jetzt verwendet, wenn
‫wir sendWelcome aufrufen.
‫Und so lassen Sie uns jetzt tatsächlich weitermachen und das tun.
‫Von wo aus möchten wir die Willkommens-E-Mail senden?
‫Nun, das ist im authController und an, ich
‫glaube, es gibt eine Anmeldefunktion oder eine Registrierung
‫oder ähnliches, und sie ist
‫genau hier.
‫Also diese Anmeldung.
‫Also müssen wir die E-Mail importieren und
‫dann verwenden.
‫Und eigentlich haben wir bereits sendEmail, aber denken Sie
‫jetzt daran, dass das Email heißt, also mit
‫einem großen E wie diesem.
‫Jetzt haben wir diese Variable schon einmal irgendwo hier unten verwendet, also
‫gehen wir dorthin.
‫Alles klar, also funktioniert dieser Code hier
‫an dieser Stelle nicht mehr, aber wir werden das im nächsten Video beheben.
‫Lassen Sie uns es jetzt
‫einfach auskommentieren, damit es keinen Schaden anrichtet.
‫Aber egal, lassen Sie uns jetzt diese E-Mail-Klasse hier verwenden.
‫Also neue E-Mail, und dann denken Sie daran, zuerst ist der Benutzer und VS-Code
‫weiß das und zeigt, dass hier und so
‫Benutzer der neue Benutzer ist, den wir hier oben haben, und
‫dann die URL, die wir hier in einer Sekunde erstellen werden.
‫Also const url ist gleich, setzen wir sie erstmal auf null.
‫Okay, und dann senden Sie Willkommen.
‫Und jetzt müssen wir nur noch auf
‫diese sendWelcome-Funktion warten.
‫Also gut, das machen wir, dass wir hier
‫erst zum nächsten Schritt übergehen, nachdem die E-Mail tatsächlich versendet wurde.
‫Und das können wir
‫natürlich tun, denn sendWelcome ist eine asynchrone Funktion, denken Sie daran.
‫Wenn wir es also
‫tatsächlich verwenden, warten wir, bis es fertig ist.
‫Alles klar, und das ist alles, was
‫wir jetzt tun müssen, um
‫E-Mails zu senden, aber wir müssen hier noch unsere URL angeben.
‫Welche URL wollen wir hier eigentlich?
‫Denken Sie daran,
‫dass hier auf der Schaltfläche Upload_user_photo steht, oder?
‫Im Grunde möchten
‫wir auf diese Benutzerkontoseite verweisen.
‫Also im Grunde gleich hier.
‫Lassen Sie uns es vorerst kopieren, aber wir werden es dann ändern.
‫Und wir könnten es
‫so belassen, aber dann würde es nur in
‫der Entwicklung und nicht in der Produktion funktionieren, denn das
‫gibt es hier natürlich nicht, wenn wir in der Produktion sind.
‫Anstatt es so hart zu codieren, erhalten wir
‫diese Daten aus der Anfrage.
‫Im Grunde erhalten wir also, welches Protokoll wir
‫verwenden, wenn wir HTTP oder HTTPS verwenden, und dann auch diesen Host.
‫Okay, und beides können wir der Anfrage entnehmen.
‫Lassen Sie uns all dies hier ersetzen und
‫dies zu einer Vorlagenzeichenfolge
‫machen, und dann können wir Anfrage sagen. Protokoll, dann Doppelpunkt,
‫Schrägstrich, Schrägstrich und
‫dann Request. werden.
‫Also müssen wir diese Getter-Funktion
‫verwenden und was wir bekommen wollen, ist der Host.
‫Wenn wir also in der Entwicklung
‫sind, wird dies hier natürlich der lokale Host auf
‫Port 3000 sein.
‫Okay, trösten wir es einfach,
‫um sicherzugehen.
‫Okay, und jetzt testen wir es tatsächlich.
‫Dazu müssen wir lediglich einen neuen Benutzer erstellen.
‫Also lass uns das hier in Postman machen.
‫Melden Sie sich also
‫an, und erstellen Sie jetzt in unserem Körper einen neuen Namen,
‫sagen wir Testbenutzer.
‫Und hier spielt das alles keine Rolle, sagen
‫wir einfach test@natours. io und
‫mit dem gleichen Standard-Passwort.
‫Wenn wir diesen neuen Benutzer jetzt erstellen, sollten
‫wir eine neue E-Mail in unsere Mailtrap bekommen, damit wir
‫sie uns ansehen können.
‫Versuchen wir es also und wir haben hier unten einen netten Fehler.
‫Schauen wir uns das also an.
‫Und es sagt, dass es diese Datei nicht finden konnte.
‫Es gibt also einen Fehler in unserem E-Mail-Handler hier.
‫Versuchen wir also herauszufinden, wo das ist.
‫Ah, es ist hier unten.
‫Das Problem ist also, dass der Ordner
‫hier email heißt und hier ich ihn emails genannt habe.
‫Sagen wir einfach E-Mail, ich
‫bevorzuge diese.
‫Und so sollte es jetzt funktionieren.
‫Oh, und jetzt bekommen wir
‫den nächsten Fehler, denn diese E-Mail hier existiert bereits.
‫Und das liegt daran, dass wir im
‫vorherigen Schritt den Fehler tatsächlich erstellt haben, das einzige Problem
‫war dann beim Senden der E-Mail.
‫Also lass uns das hier noch einmal machen, Test zwei.
‫Und noch ein Fehler.
‫Diesmal direkt von Mops.
‫Daher können nur benannte Blöcke und Mixins auf der obersten Ebene
‫einer Erweiterungsvorlage erscheinen.
‫Also stimmt hier etwas
‫nicht, und das ist es tatsächlich.
‫Das ist also genau der
‫Fehler, den es uns mitgeteilt hat, und das heißt, wir können nur
‫erweitern und blockieren, aber hier haben wir
‫diesen Absatz auch auf der obersten Ebene.
‫Das ist also nicht erlaubt.
‫Also legen wir es dort hin, wo es hingehört, nämlich hier.
‫Speichern Sie das, versuchen Sie es noch einmal, und natürlich
‫erhalten wir jetzt diesen Fehler.
‫Sagen wir also Test drei.
‫Okay, jetzt können wir loslegen.
‫So haben wir den neuen Benutzer erfolgreich angelegt,
‫er hat sich eingeloggt.
‫Und jetzt werfen wir einen Blick auf Mailtrap, um zu
‫sehen, ob wir unsere E-Mail tatsächlich erhalten haben.
‫Also Mailtrap.
‫Lass mich mich hier ganz schnell einloggen.
‫Und hier ist unser Natours-Posteingang, und
‫hier ist tatsächlich diese neue E-Mail von vor einer
‫Minute, in der wir die Natours-Familie willkommen heißen.
‫Toll.
‫Und es sieht wirklich sehr schön aus, oder?
‫Das sind also alle Texte, die wir in unserer Vorlage hatten.
‫Wir können hier auch den vollständigen HTML-Code sehen.
‫Auch hier haben wir den Text.
‫Denken Sie also daran, dass wir dieses hier aus
‫dem HTML- in das Textpaket erstellt
‫haben und so können wir bestätigen, dass es auch gut funktioniert.
‫Und, äh, ja.
‫Versuchen wir einfach, hier auf diese
‫Schaltfläche zu klicken, und tatsächlich gelangen wir zu unserer Kontoseite.
‫Im Moment sind wir tatsächlich als Aarav eingeloggt, weil
‫wir bereits als dieser Benutzer eingeloggt waren, aber das
‫ist nicht wirklich
‫der Punkt, denn diese E-Mail hier nimmt
‫an, dass Sie sich von der Website aus anmelden, richtig?
‫Das funktioniert zu diesem Zeitpunkt
‫nicht, daher haben wir kein Anmeldeformular auf unserer
‫Website, aber der wirklich wichtige Teil
‫hier ist, dass unsere E-Mail hier jetzt einwandfrei funktioniert, der Button
‫hier funktioniert auch.
‫Und damit macht der große E-Mail-Handler,
‫den wir im letzten Vortrag erstellt haben, seinen Job genauso
‫gut wie die E-Mail-Vorlage, die wir in
‫diesem Video erstellt haben.
‫Also, ich bin wirklich glücklich mit diesem Ergebnis.
‫Als nächstes machen wir etwas Ähnliches für
‫die E-Mails zum Zurücksetzen des Passworts.