‫Kursleiter: Nachdem der Datei-Upload-Teil des
‫Abschnitts abgeschlossen ist,
‫wenden wir uns nun dem Senden von E-Mails zu.
‫Und wir haben eigentlich schon vorher E-Mails
‫geschickt, um das Passwort zurückzusetzen, aber in den nächsten paar Vorlesungen
‫werden wir das auf eine ganz neue Ebene bringen.
‫Und was wir tun werden, ist, E-Mail-Vorlagen mit
‫Pug zu erstellen und echte E-Mails mit
‫dem SendGrid-Dienst zu senden.
‫Und jetzt werden wir in dieser
‫ersten Vorlesung einen robusteren E-Mail-Handler aufbauen als den,
‫den wir zuvor hatten.
‫Öffnen wir also unseren Dienstprogramme-Ordner, und
‫denken Sie daran, dass wir bereits eine E-Mail-Datei haben.
‫Aber im Moment
‫haben wir hier nur einen sehr einfachen E-Mail-Versand-Handler,
‫der nicht viele Optionen aufnehmen kann.
‫Und jetzt bauen
‫wir hier eine viel robustere Lösung.
‫Gut?
‫Ich werde also eine Klasse erstellen, und
‫diese Klasse wird E-Mail heißen.
‫Also Modul. exports, und
‫daher werden wir auch
‫diese Klasse aus dieser Datei exportieren.
‫Und dann braucht eine Klasse wie immer eine Konstruktorfunktion, die im
‫Grunde die Funktion ist, die ausgeführt wird,
‫wenn ein neues Objekt durch diese Klasse erstellt wird.
‫Lassen Sie uns nun einen Blick
‫darauf werfen, wie wir diese Klasse in der Praxis verwenden würden.
‫Die Idee ist, diese
‫E-Mail-Klasse zu importieren und dann
‫so zu verwenden, wenn wir eine neue E-Mail senden möchten.
‫Erstellen Sie also eine
‫neue E-Mail, und dann möchten wir einen Benutzer
‫einfügen, und dieser Benutzer enthält dann die E-Mail-Adresse
‫und auch den Namen, falls wir die E-Mail personalisieren möchten.
‫Und auch eine URL.
‫Und ein gutes
‫Beispiel hierfür ist zum Beispiel die Reset-URL zum Zurücksetzen des Passworts.
‫Okay?
‫Also ein neues E-Mail-Objekt, und dann wollen
‫wir die Methode aufrufen, die die
‫E-Mail tatsächlich versendet.
‫Sagen wir also sendWelcome.
‫Und so dass eines gesendet wird, wenn
‫sich ein neuer Benutzer für unsere Anwendung anmeldet.
‫Gut?
‫Wir werden dann auch Passwort-Reset senden lassen.
‫Und die Art und Weise,
‫wie wir all dies einrichten, wird es wirklich
‫einfach machen, dann immer neue und neue Methoden ähnlich
‫dieser hinzuzufügen, um verschiedene E-Mails für verschiedene Szenarien zu senden.
‫Gut?
‫Wie auch immer, da wir den Benutzer und
‫die URL in eine neue E-Mail einfügen, muss unser Konstruktor
‫diese dann als Argumente aufnehmen.
‫Also Benutzer und URL.
‫Und was in diesem Konstruktor passiert, ist, dass dies. zu wird
‫gleich dem Benutzer sein. email Dann wollen
‫wir auch noch den Vornamen des Benutzers
‫definieren, um die Email grundsätzlich zu personalisieren.
‫Und das ist der Benutzer. name und teilen
‫wir es auf und nehmen nur das erste Element im resultierenden Array.
‫Also haben wir das
‫schon mal gemacht, aber dann auch das. url ist gleich der eingehenden URL.
‫Schließlich legen wir auch dies fest. von hier.
‫also grundsätzlich auf Objektebene.
‫Jedes aus dieser Klasse erstellte Objekt
‫erhält dann diese Eigenschaft.
‫Und so wird dieses ähnlich dem sein, was wir hier haben.
‫Es ist also im Grunde genommen davon, also
‫kopieren wir es einfach, aber
‫es ist schön, es an einem zentralen Ort wie diesem zu haben.
‫Was ich jetzt wirklich machen
‫möchte, ist, diese E-Mail-Adresse hier im Grunde als
‫Konfigurationsvariable zu definieren,
‫und damit als Umgebungsvariable, die
‫wir sehr einfach durch
‫Manipulation der Konfiguration ändern können. env-Datei.
‫Gut?
‫Nennen wir dies also EMAIL_FROM.
‫Und dann wollen wir nur die E-Mail-Adresse selbst.
‫Gut?
‫Also ein weiterer Fall, in dem es sehr
‫hilfreich ist, Umgebungsvariablen zu verwenden.
‫Und jetzt machen wir dies zu einer Vorlagenzeichenfolge.
‫Und natürlich hier reinstecken.
‫Das ist also der Prozess. env. E-MAIL VON.
‫Als nächstes erstellen wir hier eine Methode,
‫um den Transport zu erstellen.
‫So ähnlich wie hier.
‫Erstellen Sie also Transport.
‫Und jetzt wollen wir hier eigentlich unterschiedliche Transporte haben, egal
‫ob wir in der Produktion sind oder nicht.
‫Wenn wir also
‫in der Produktion sind, möchten wir eigentlich
‫echte E-Mails senden, und das werden wir etwas später mit SendGrid
‫tun, aber wenn wir nicht in der Produktion
‫sind, möchten wir unsere Mailtrap-Anwendung immer noch so verwenden, wie
‫wir es zuvor getan haben wir versenden E-Mails.
‫Anstatt die E-Mail an eine echte E-Mail-Adresse zu senden,
‫wird sie also in unserem Mailtrap-Posteingang gespeichert, sodass wir
‫sie in unserem
‫Entwicklungsprozess tatsächlich überprüfen können.
‫Dieser Transporter ist also genau derselbe wie dieser, also kopieren wir ihn
‫einfach, aber zuerst sagen wir if(process.
‫env. NODE_ENV).
‫Denken Sie also daran, dass wir so überprüft haben,
‫ob wir in Produktion sind oder nicht.
‫Wenn das also in Produktion
‫ist, und wenn
‫wir in Produktion sind, möchten wir einen Transporter für SendGrid erstellen.
‫Lassen Sie uns das einfach hier setzen, und das
‫werden wir später noch einmal tun.
‫Lassen Sie uns erst einmal etwas von hier zurückgeben.
‫Egal, sagen wir mal.
‫Gut?
‫Und dann wollen wir im Grunde
‫sonst diesen Nodemailer zurückgeben. Transport erstellen.
‫Okay?
‫Dieser Transport
‫hier wird also im Grunde einen neuen Nodemailer-Transport wie diesen zurückgeben.
‫Oder andererseits, wenn wir in der
‫Produktion sind, dann der, der hier sein wird.
‫Okay?
‫Also lass es uns hier wirklich löschen.
‫Auch diese möchten wir löschen.
‫Und jetzt erstellen wir die send-Methode.
‫Dies wird also die Methode
‫sein, die das eigentliche Senden durchführt.
‫Okay?
‫Und dieser bekommt eine Vorlage und einen Betreff.
‫Und Sie werden etwas besser
‫verstehen, warum das so ist, wenn diese gesamte Klasse abgeschlossen ist.
‫Okay?
‫Also Vorlage und Betreff.
‫Lassen Sie uns hier einen Kommentar dazu abgeben, was dies bewirken wird.
‫Und jetzt, bevor wir diese Funktion tatsächlich schreiben, möchte
‫ich Ihnen zeigen, wie wir sie verwenden
‫werden und warum wir die Vorlage und den Betreff hier brauchen.
‫Denken Sie also daran, wie
‫wir hier oben gesagt haben, dass wir eine Methode namens sendWelcome
‫haben werden, und auch eine Methode zum Senden einer E-Mail zum Zurücksetzen des Passworts.
‫Also, fügen wir das jetzt tatsächlich hier hinzu, also sendWelcome.
‫Und dieser erhält kein Argument und alles, was er wirklich
‫tut, ist der Aufruf von send mit der Vorlage und
‫dem Betreff, den wir
‫für diese E-Mail haben möchten.
‫Okay?
‫Dies macht es wiederum sehr einfach,
‫verschiedene E-Mails für
‫alle möglichen Situationen zu erstellen.
‫Okay?
‫Wir haben also diese eine Route-Sendefunktion
‫hier und dann all diese
‫spezifischeren, die dann wiederum die Router-Sendefunktion aufrufen, die
‫die eigentliche Arbeit erledigt.
‫Okay?
‫Und hier ist es tatsächlich. send weil natürlich
‫diese Methoden hier sind, sie
‫werden für das aktuelle Objekt definiert.
‫Und das ist es.
‫Dann fügen wir hier den Vorlagennamen ein.
‫Und so wird dieser Vorlagenname, den ich hier
‫eingegeben habe, in Zukunft eine Mops-Vorlage sein, die
‫wir erstellen werden.
‫In der nächsten Vorlesung werden
‫wir also diese Mops-Vorlage erstellen, um
‫diese Willkommens-E-Mail zu senden.
‫Okay?
‫Und dann nur noch die Betreffzeile.
‫Sagen wir „Willkommen in der Familie Natours! ' Und
‫so müssen wir uns beim eigentlichen
‫Versenden der E-Mail um
‫keine Implementierungsdetails kümmern.
‫So müssen wir uns zum
‫Beispiel an dem Punkt unseres Codes,
‫an dem wir die Willkommens-E-Mail senden möchten,
‫nicht um Vorlagennamen oder Betreffzeilen kümmern.
‫Alles, was wir tun werden, ist zu sagen, Willkommens-E-Mail senden
‫und das war's.
‫Und dann kümmert
‫sich unsere Klasse um die Umsetzung.
‫Gut?
‫Wie auch immer, lassen Sie uns nun tatsächlich diese Sendefunktion bauen.
‫Was wir also in dieser Funktion tun werden,
‫ist zuerst den HTML-Code für die E-Mail basierend auf einer
‫Mops-Vorlage zu rendern.
‫Also im Grunde diejenige,
‫die wir hier mit Vorlage einfügen.
‫Definieren Sie dann die E-Mail-Optionen, und
‫das wird wieder dieser hier sehr ähnlich sein, und lassen
‫Sie mich es
‫von hier aus ausschneiden und hier einfügen.
‫Okay?
‫Natürlich wird es nicht genau dasselbe sein, aber
‫das belassen wir etwas später.
‫Gut?
‫Und schließlich,
‫Erstellen Sie einen Transport und senden Sie eine E-Mail.
‫Okay?
‫Und das lasse ich auch für später.
‫Also, beginnend mit Punkt Nummer eins.
‫Und normalerweise verwenden wir bis zu diesem Punkt immer nur
‫pug, um eine Vorlage
‫zu erstellen, und übergeben dann den
‫Namen der Vorlage an die Render-Funktion der Antwort.
‫Richtig.
‫Also haben wir es immer nur so
‫verwendet res. render, und
‫dann hier den Namen der Vorlage.
‫Richtig?
‫Und was diese Render-Funktion hinter den Kulissen macht,
‫ist, im Grunde den HTML-Code basierend auf dem Mops-Template zu erstellen und
‫dann an den Client zu senden.
‫Nun wollen wir in diesem Fall nicht wirklich rendern,
‫sondern wir wollen im Grunde den HTML-Code aus dem
‫Template erstellen, damit wir diesen HTML-Code dann als E-Mail
‫versenden können.
‫Definieren Sie es also im Grunde hier als HTML-Option
‫in diesen Mail-Optionen.
‫Okay?
‫Denken Sie also daran, wie wir Text und HTML angeben können.
‫Und hauptsächlich sind wir daran interessiert, eine HTML-E-Mail zu versenden.
‫Deshalb haben wir ein Mops-Template, aus
‫dem wir diesen HTML-Code generieren.
‫Okay?
‫Es wird also nicht so funktionieren, aber
‫stattdessen brauchen wir hier tatsächlich
‫das Mops-Paket.
‫Also,
‫Mops so, und dann
‫müssen wir Mops verwenden.
‫renderDatei.
‫Okay?
‫Dies nimmt die Datei
‫auf und rendert dann den Mops-Code in echtes HTML.
‫Okay?
‫Und damit können wir dann in einem variablen HTML speichern.
‫Gut?
‫Also, wo ist diese Datei?
‫Nun, es befindet sich in dirname, also
‫D-I-R-Name, der sich an den
‫Speicherort des
‫derzeit ausgeführten Skripts erinnert,
‫und das heißt jetzt in diesem Dienstprogrammordner.
‫Okay?
‫Von dort aus müssen wir also einen Schritt nach oben
‫gehen, dann zu Ansichten gehen und von dort aus in einen E-Mail-Ordner, den wir
‫ebenfalls in einer Sekunde erstellen werden.
‫Und
‫dann haben wir dort die Vorlagendatei.
‫Also Vorlage}.
‫Mops.
‫Für die Willkommens-E-Mail heißt diese Vorlage
‫also willkommen.
‫Und so erstellen wir das jetzt tatsächlich hier in den Ansichten, erstellen einen
‫neuen Ordner, eine
‫E-Mail und dann dort eine neue Datei,
‫willkommen. Mops.
‫Okay?
‫Und wir werden diese Vorlage in diesem
‫Video nicht wirklich erstellen, aber ich wollte Ihnen nur zeigen,
‫wie das alles funktionieren wird.
‫Okay?
‫Diese Begrüßung wird also hier in die
‫Vorlage eingefügt und dann wird diese Datei aus dem Ordner "Ansichten" abgerufen.
‫Richtig?
‫Das ist also der erste Schritt.
‫Als Nächstes definieren wir die E-Mail-Optionen.
‫Also, ab jetzt ist das. von.
‫Merken?
‫Also gleich hier.
‫Als nächstes
‫haben wir das hier. zu, und wir haben auch den
‫Betreff, der gleich dem Betreff ist, der hier reinkommt, und also,
‫yah, eigentlich brauchen wir diesen nicht einmal zu definieren und
‫wir haben unseren HTML-Code.
‫Also so oder natürlich ist das
‫nicht einmal notwendig, weil es der gleiche Name ist.
‫Als nächstes wollen wir auch eine Textversion unserer
‫E-Mail in die E-Mail einfügen.
‫Okay?
‫Und das ist eigentlich sehr wichtig,
‫denn es ist besser für E-Mail-Zustellraten und auch für Spam-Ordner.
‫Gut?
‫Und einige Leute bevorzugen einfache einfache Text-E-Mails
‫anstelle von stärker formatierten HTML-E-Mails.
‫Gut?
‫Im Grunde brauchen wir also eine Möglichkeit, den
‫gesamten HTML-Code in einfachen Text umzuwandeln.
‫Entfernen Sie also den gesamten HTML-Code und lassen Sie nur den Inhalt zurück.
‫Und dafür werden wir
‫noch
‫ein weiteres Paket installieren, und daher heißt dieses html-to-text.
‫Gut?
‫Nehmen wir das hier
‫auf, ToText.
‫require('html-to-text'), wie folgt.
‫Okay?
‫Verwenden wir das nun, um unseren HTML-Code zu konvertieren.
‫Also verwenden wir htmlToText. fromString und dann
‫wird diese Zeichenfolge in HTML gespeichert.
‫Richtig?
‫Das sind also unsere Mail-Optionen, und tatsächlich
‫habe ich etwas sehr, sehr Wichtiges vergessen, hier in
‫diesem ersten Schritt, also in dieser Renderdatei, denn genau
‫wie bei der Antwort. rendern, wir können
‫auch Daten in die Renderdatei einfügen.
‫Und das ist natürlich sehr
‫wichtig, wenn wir tatsächlich eine E-Mail-Personalisierung mit dem Namen
‫durchführen und auch die URL einfügen möchten.
‫Also machen wir es so wie wir es normalerweise in
‫der Render-Funktion gemacht haben.
‫Das ist also firstName, schick es an dieses. firstName, und die
‫URL lautet diese. url, und fügen wir auch den Betreff
‫ein und Sie werden etwas später
‫sehen, warum wir das brauchen.
‫Okay?
‫Lassen Sie uns nun endlich einen Transport mit
‫unserer Funktion zum Erstellen von Transporten erstellen
‫und dann die E-Mail senden.
‫Also, fair genug, das ist es. Transport erstellen.
‫Denken Sie also daran, dass dies nur diese Methode hier ist, diese, und sie
‫hat genau den gleichen
‫Namen wie diese Funktion hier, die von nodemailer stammt.
‫Das ist etwas
‫verwirrend, also nennen wir es hier newTransport.
‫Okay, und das ist hier auch newTransport, damit es
‫etwas weniger verwirrend ist.
‫Gut?
‫Erinnern wir uns nun daran, wie wir es hier zuvor gemacht haben.
‫Wir hatten also unseren
‫Transporter, den wir in diesem Fall
‫separat erstellt haben, und daran haben wir dann sendMail mit den Optionen angekettet.
‫Also greifen wir das hier einfach auf und löschen den restlichen Code.
‫Setzen Sie das also im Grunde hier als Referenz.
‫Okay?
‫Dieser Transporter ist jetzt also dieser.
‫Gut?
‫Und dann geht es weiter, wir verketten E-Mail und dann
‫mit den E-Mail-Optionen, die wir hier definiert haben.
‫Dann müssen wir all dies
‫abwarten, da es sich natürlich um eine asynchrone Funktion handelt.
‫Lassen Sie uns diesen hier nun als asynchron markieren.
‫Okay?
‫Also müssen wir jetzt auch hier auf die Funktion warten.
‫Gut?
‫Weil das. send ist nun tatsächlich eine asynchrone Funktion.
‫Und so warten wir hier darauf, dass diese Funktion erst zurückkehrt,
‫sobald die E-Mail tatsächlich gesendet wurde.
‫Und so markieren Sie natürlich auch diesen als asynchron.
‫Genial.
‫Das war's eigentlich für diese Klasse.
‫Wir brauchen dieses Beispiel also nicht mehr.
‫Okay?
‫Und so werden wir im nächsten Video
‫dann tatsächlich diese neue Klasse verwenden, um eine Willkommens-E-Mail zu senden.
‫Fassen Sie also kurz zusammen, was wir hier gemacht haben.
‫Also haben wir eine neue E-Mail-Klasse
‫erstellt, aus der wir E-Mail-Objekte erstellen können,
‫die wir dann zum Senden von E-Mails verwenden können.
‫Und um ein neues E-Mail-Objekt zu erstellen, fügen wir den Benutzer und auch eine
‫URL ein, die in dieser E-Mail enthalten sein soll.
‫Also weisen wir hier all das Zeug dem aktuellen Objekt zu
‫und auch einige andere Einstellungen, die wir
‫verfügbar haben möchten, wie zum Beispiel den Vornamen und die Absender-E-Mail.
‫Im Grunde also, diese Informationen von
‫der Sendefunktion zu abstrahieren und
‫alles an einem zentralen Ort zu haben.
‫Dann haben wir hier eine neue Transportfunktion,
‫die es wirklich einfach macht, verschiedene Transporte für
‫verschiedene Umgebungen zu erstellen.
‫Und so wird diese Logik noch einmal
‫von der eigentlichen Sendefunktion abstrahiert, die
‫sich nur um das Senden der E-Mail kümmern sollte.
‫Okay?
‫Hier ist also die Sendefunktion, die eine Vorlage
‫und einen Betreff aufnimmt, und basierend darauf erstellt sie den HTML-Code
‫aus einer Mops-Vorlage, die dann in die
‫E-Mail-Optionen gesetzt wird, die am
‫Ende der Funktion dann endlich in dieser Codezeile
‫gesendet werden.
‫Okay?
‫Aber es wird nicht diese Sendefunktion sein, die
‫wir in unserem Code verwenden werden.
‫Stattdessen erstellen wir für jede
‫Art von E-Mail, die wir senden möchten,
‫eine andere Funktion.
‫Und das erste, das ich hier erstellt habe, ist sendWelcome.
‫Gut?
‫Für sendWelcome haben wir dann grundsätzlich den
‫Vorlagennamen als Willkommen
‫und den Betreff als diesen String voreingestellt.
‫Okay?
‫Also, ich hoffe, das hat Sinn gemacht und ich sehe dich gleich.