﻿1
00:00:01,070 --> 00:00:02,870
‫Kursleiter: In diesem Video

2
00:00:02,870 --> 00:00:07,100
‫werden wir die Leistungsfähigkeit von Pug nutzen, um eine wirklich schöne E-Mail-Vorlage zu

3
00:00:07,100 --> 00:00:10,893
‫erstellen und dann eine Willkommens-E-Mail basierend auf dieser Vorlage zu senden.

4
00:00:12,680 --> 00:00:16,710
‫Und diese Vorlage ist willkommen. Mops hier.

5
00:00:16,710 --> 00:00:21,410
‫Okay, nach wie vor habe ich hier bereits

6
00:00:21,410 --> 00:00:23,973
‫eine Vorlage in dev-data-Vorlagen.

7
00:00:25,050 --> 00:00:29,240
‫Also E-Mail-Vorlage und so ist der ganze Code

8
00:00:29,240 --> 00:00:32,990
‫hier mit dem CSS auch in Zeilen.

9
00:00:32,990 --> 00:00:34,403
‫Also eine Menge CSS.

10
00:00:36,140 --> 00:00:40,563
‫Lassen Sie uns das alles hier in Willkommen kopieren. Mops.

11
00:00:41,570 --> 00:00:45,200
‫Okay, und hier unten sehen Sie diese Notiz, in

12
00:00:45,200 --> 00:00:48,850
‫der ich sage, dass diese E-Mail-Vorlage tatsächlich von dieser

13
00:00:48,850 --> 00:00:50,053
‫übernommen wurde.

14
00:00:51,780 --> 00:00:53,483
‫Also lass uns das ganz schnell öffnen.

15
00:00:54,511 --> 00:00:55,344
‫Gut.

16
00:00:55,344 --> 00:00:58,813
‫Und so wird unsere E-Mail ein bisschen wie diese aussehen.

17
00:00:59,990 --> 00:01:03,590
‫Jetzt habe ich das Design natürlich ein wenig an unsere Marke angepasst.

18
00:01:03,590 --> 00:01:05,430
‫Für diesen Button hier habe

19
00:01:05,430 --> 00:01:07,783
‫ich zum Beispiel unsere grüne Farbe verwendet.

20
00:01:09,848 --> 00:01:13,600
‫Aber was ich verwendet habe, ist diese HTML-Vorlage.

21
00:01:16,210 --> 00:01:20,820
‫Dann habe ich diesen HTML-Code mit diesem Tool tatsächlich konvertiert.

22
00:01:20,820 --> 00:01:22,763
‫Also HTML zu Mops.

23
00:01:23,640 --> 00:01:25,950
‫Schauen wir uns das noch einmal kurz an.

24
00:01:25,950 --> 00:01:28,260
‫Im Grunde können Sie

25
00:01:28,260 --> 00:01:31,030
‫hier also etwas HTML einfügen,

26
00:01:31,030 --> 00:01:35,660
‫dann auf Konvertieren klicken und den Pug-Code für Sie ausgeben.

27
00:01:35,660 --> 00:01:38,170
‫Das kann also sehr praktisch sein, wenn Sie

28
00:01:38,170 --> 00:01:42,263
‫versuchen, einige vorhandene Seiten, für die Sie bereits einen HTML-Code haben, in Mops zu konvertieren.

29
00:01:45,010 --> 00:01:47,810
‫Wie auch immer, wenn wir eine HTML-E-Mail erstellen,

30
00:01:47,810 --> 00:01:50,350
‫müssen wir immer alle Stile inline einfügen.

31
00:01:50,350 --> 00:01:53,290
‫Und deshalb haben Sie diese Menge CSS direkt

32
00:01:53,290 --> 00:01:55,240
‫hier in dieser Datei.

33
00:01:55,240 --> 00:01:58,000
‫Aber das macht diese Datei natürlich etwas

34
00:01:58,000 --> 00:02:01,213
‫verrauscht, also packen wir das alles und exportieren es.

35
00:02:02,350 --> 00:02:04,810
‫In Ordnung, also, ja.

36
00:02:04,810 --> 00:02:05,703
‫So, das wars.

37
00:02:06,610 --> 00:02:07,443
‫Schneiden Sie

38
00:02:08,380 --> 00:02:10,720
‫es also aus und erstellen Sie hier

39
00:02:10,720 --> 00:02:14,520
‫eine neue Datei, und dann, wie zuvor, mit Dateien, die ich einbeziehen

40
00:02:14,520 --> 00:02:17,827
‫werde, verwende ich den Unterstrich-dann-Stil. Mops.

41
00:02:20,980 --> 00:02:22,710
‫Also füge das hier ein.

42
00:02:22,710 --> 00:02:26,450
‫Und jetzt müssen wir all diese Einfügungen auch hier und

43
00:02:26,450 --> 00:02:29,210
‫so wieder anpassen, Befehl + Umschalt +

44
00:02:29,210 --> 00:02:32,820
‫P oder wahrscheinlich unter Windows Strg + Umschalt + P.

45
00:02:32,820 --> 00:02:35,823
‫Und dann schreib einfach Mops für Mops verschönern.

46
00:02:36,890 --> 00:02:39,053
‫Und das macht unseren Code schön.

47
00:02:40,090 --> 00:02:41,623
‫Schließen Sie das hier,

48
00:02:42,770 --> 00:02:43,973
‫und jetzt include_style.

49
00:02:49,060 --> 00:02:52,730
‫Okay, und jetzt sehen Sie all diese Codes hier unten, was wirklich

50
00:02:52,730 --> 00:02:55,750
‫verwirrend aussieht und das ist eigentlich der Grund, warum

51
00:02:55,750 --> 00:02:59,400
‫ich diese Vorlage aus dem GitHub-Repository kopiert habe, das ich Ihnen

52
00:02:59,400 --> 00:03:00,680
‫zuvor gezeigt habe.

53
00:03:00,680 --> 00:03:03,160
‫Es gibt also viele Tabellen, und

54
00:03:03,160 --> 00:03:05,080
‫das liegt daran, dass

55
00:03:05,080 --> 00:03:08,410
‫viele E-Mail-Clients Tabellen eigentlich nur zum Formatieren verstehen.

56
00:03:08,410 --> 00:03:11,800
‫Wir haben also all diese Dinge hier, die bei

57
00:03:11,800 --> 00:03:15,350
‫Tabellenzeilen innerhalb von Tabellen innerhalb von Tabellen nicht wirklich sinnvoll sind.

58
00:03:15,350 --> 00:03:16,600
‫Habe ich recht?

59
00:03:16,600 --> 00:03:20,720
‫Aber was hier zählt, ist dieser Inhaltsbereich hier.

60
00:03:20,720 --> 00:03:22,440
‫Dies ist also der Teil

61
00:03:22,440 --> 00:03:25,340
‫der Vorlage, in den wir alle unsere Inhalte einfügen.

62
00:03:25,340 --> 00:03:27,370
‫Die Sache ist nun, dass wir natürlich

63
00:03:27,370 --> 00:03:29,370
‫viele verschiedene Vorlagen haben werden.

64
00:03:29,370 --> 00:03:30,600
‫Im Fall

65
00:03:30,600 --> 00:03:32,930
‫dieses Projekts werden wir eigentlich nur

66
00:03:32,930 --> 00:03:36,410
‫zwei selbst erstellen, aber es kann viele E-Mails für

67
00:03:36,410 --> 00:03:39,610
‫viele Situationen geben und daher brauchen wir natürlich

68
00:03:39,610 --> 00:03:42,840
‫eine Möglichkeit, all diesen Code außerhalb dieses Inhalts wiederzuverwenden.

69
00:03:42,840 --> 00:03:46,200
‫Im Grunde sollten alle diese hier wiederverwendbar sein,

70
00:03:46,200 --> 00:03:49,050
‫und genau das haben wir zuvor mit

71
00:03:49,050 --> 00:03:50,853
‫unserer Basisvorlage hier gemacht.

72
00:03:52,352 --> 00:03:53,185
‫Gut.

73
00:03:53,185 --> 00:03:56,450
‫Also legen wir alles, was für alle Vorlagen wiederverwendbar

74
00:03:56,450 --> 00:04:00,540
‫ist, in diese Basis, dann haben wir unseren Block dort und

75
00:04:00,540 --> 00:04:02,150
‫alle anderen Vorlagen,

76
00:04:02,150 --> 00:04:04,200
‫dann erweitern wir einfach diesen Block.

77
00:04:04,200 --> 00:04:07,280
‫Und genau das werden wir jetzt tun.

78
00:04:07,280 --> 00:04:12,240
‫Lassen Sie uns also alle diese von hier aus ausschneiden, eine neue

79
00:04:12,240 --> 00:04:15,517
‫Vorlage namens baseEmail erstellen und diese dann

80
00:04:20,400 --> 00:04:21,623
‫hier einfügen.

81
00:04:23,530 --> 00:04:27,550
‫Und jetzt, für den Inhalt selbst, entfernen wir

82
00:04:27,550 --> 00:04:30,100
‫das natürlich von der Basis.

83
00:04:30,100 --> 00:04:31,773
‫Schneiden Sie das also von hier

84
00:04:32,760 --> 00:04:34,550
‫aus, und hier erstellen wir dann wieder

85
00:04:35,920 --> 00:04:37,423
‫einen Block namens content.

86
00:04:39,101 --> 00:04:39,934
‫Gut.

87
00:04:39,934 --> 00:04:43,900
‫Und jetzt hier, in unserer Willkommensvorlage, fügen wir diesen

88
00:04:43,900 --> 00:04:45,600
‫Inhalt dann in diesen

89
00:04:48,260 --> 00:04:49,883
‫Inhaltsblock ein.

90
00:04:50,880 --> 00:04:51,870
‫Okay.

91
00:04:51,870 --> 00:04:54,750
‫Und zum Schluss müssen wir noch sagen,

92
00:04:54,750 --> 00:04:57,190
‫dass es erweitert wird, sodass dieses

93
00:04:58,070 --> 00:05:00,187
‫Template hier die baseEmail erweitert.

94
00:05:04,160 --> 00:05:08,470
‫Lassen Sie uns das noch einmal mit diesem Befehl formatieren

95
00:05:08,470 --> 00:05:10,670
‫und das ist schön.

96
00:05:10,670 --> 00:05:11,503
‫Toll.

97
00:05:12,450 --> 00:05:14,830
‫Hier in unserer Basisvorlage

98
00:05:14,830 --> 00:05:18,620
‫haben wir nun tatsächlich das Thema als Titel.

99
00:05:18,620 --> 00:05:20,780
‫Und das ist der Grund, warum

100
00:05:20,780 --> 00:05:23,023
‫ich das in die Vorlage übernommen habe.

101
00:05:23,920 --> 00:05:27,030
‫Das ist also genau hier, erinnerst du dich?

102
00:05:27,030 --> 00:05:29,829
‫In das Template haben wir also den Betreff,

103
00:05:29,829 --> 00:05:32,140
‫die URL und den firstName übergeben.

104
00:05:32,140 --> 00:05:35,980
‫Also lassen Sie uns jetzt fortfahren und dies in unserer Vorlage verwenden.

105
00:05:35,980 --> 00:05:39,470
‫Also das Thema, das wir hier in der Basis bereits verwendet haben,

106
00:05:39,470 --> 00:05:42,120
‫aber das war es eigentlich für diese Datei, also

107
00:05:42,120 --> 00:05:44,363
‫werden wir es nicht noch einmal berühren.

108
00:05:45,230 --> 00:05:48,540
‫Und hier ist nun unsere echte Vorlage.

109
00:05:48,540 --> 00:05:53,540
‫Wir haben hier also den Namen und ersetzen ihn

110
00:05:53,670 --> 00:05:55,893
‫durch die Variable Vorname.

111
00:05:59,210 --> 00:06:03,840
‫Also firstName hier, dann haben wir all diese schönen Texte hier.

112
00:06:03,840 --> 00:06:07,550
‫Also, willkommen in der Familie, all das Zeug.

113
00:06:07,550 --> 00:06:10,150
‫Und dann hier unten haben wir diesen grünen

114
00:06:10,150 --> 00:06:13,370
‫Button, über den ich gesprochen habe, als ich Ihnen die Vorlage

115
00:06:13,370 --> 00:06:17,220
‫auf GitHub gezeigt habe, und so weiter, dieser Button, wir sagen Benutzerfoto hochladen.

116
00:06:17,220 --> 00:06:22,043
‫Hier müssen wir also die URL angeben, die wir übergeben haben.

117
00:06:27,760 --> 00:06:31,380
‫In Ordnung, es heißt also URL, richtig.

118
00:06:31,380 --> 00:06:35,290
‫Und jetzt setzen wir das hier auf diesen Knopf und das

119
00:06:35,290 --> 00:06:36,720
‫war's dann auch schon.

120
00:06:36,720 --> 00:06:39,440
‫Der ganze Rest hier ist nur

121
00:06:39,440 --> 00:06:43,130
‫statischer Inhalt, den wir überhaupt nicht ändern müssen, in Ordnung?

122
00:06:43,130 --> 00:06:47,470
‫Diese Willkommensvorlage hier wird jetzt verwendet, wenn

123
00:06:47,470 --> 00:06:49,790
‫wir sendWelcome aufrufen.

124
00:06:49,790 --> 00:06:53,130
‫Und so lassen Sie uns jetzt tatsächlich weitermachen und das tun.

125
00:06:53,130 --> 00:06:57,190
‫Von wo aus möchten wir die Willkommens-E-Mail senden?

126
00:06:57,190 --> 00:07:00,540
‫Nun, das ist im authController und an, ich

127
00:07:00,540 --> 00:07:03,800
‫glaube, es gibt eine Anmeldefunktion oder eine Registrierung

128
00:07:03,800 --> 00:07:05,663
‫oder ähnliches, und sie ist

129
00:07:07,140 --> 00:07:08,430
‫genau hier.

130
00:07:08,430 --> 00:07:10,240
‫Also diese Anmeldung.

131
00:07:10,240 --> 00:07:13,130
‫Also müssen wir die E-Mail importieren und

132
00:07:13,130 --> 00:07:14,093
‫dann verwenden.

133
00:07:15,000 --> 00:07:18,760
‫Und eigentlich haben wir bereits sendEmail, aber denken Sie

134
00:07:18,760 --> 00:07:21,990
‫jetzt daran, dass das Email heißt, also mit

135
00:07:21,990 --> 00:07:24,533
‫einem großen E wie diesem.

136
00:07:26,400 --> 00:07:29,980
‫Jetzt haben wir diese Variable schon einmal irgendwo hier unten verwendet, also

137
00:07:29,980 --> 00:07:30,973
‫gehen wir dorthin.

138
00:07:33,438 --> 00:07:35,750
‫Alles klar, also funktioniert dieser Code hier

139
00:07:35,750 --> 00:07:39,520
‫an dieser Stelle nicht mehr, aber wir werden das im nächsten Video beheben.

140
00:07:39,520 --> 00:07:41,440
‫Lassen Sie uns es jetzt

141
00:07:44,030 --> 00:07:45,983
‫einfach auskommentieren, damit es keinen Schaden anrichtet.

142
00:07:48,409 --> 00:07:51,960
‫Aber egal, lassen Sie uns jetzt diese E-Mail-Klasse hier verwenden.

143
00:07:59,060 --> 00:08:04,060
‫Also neue E-Mail, und dann denken Sie daran, zuerst ist der Benutzer und VS-Code

144
00:08:05,260 --> 00:08:08,700
‫weiß das und zeigt, dass hier und so

145
00:08:08,700 --> 00:08:12,890
‫Benutzer der neue Benutzer ist, den wir hier oben haben, und

146
00:08:15,810 --> 00:08:19,803
‫dann die URL, die wir hier in einer Sekunde erstellen werden.

147
00:08:22,150 --> 00:08:27,150
‫Also const url ist gleich, setzen wir sie erstmal auf null.

148
00:08:30,315 --> 00:08:32,565
‫Okay, und dann senden Sie Willkommen.

149
00:08:36,230 --> 00:08:39,050
‫Und jetzt müssen wir nur noch auf

150
00:08:39,050 --> 00:08:40,783
‫diese sendWelcome-Funktion warten.

151
00:08:42,860 --> 00:08:45,980
‫Also gut, das machen wir, dass wir hier

152
00:08:45,980 --> 00:08:49,923
‫erst zum nächsten Schritt übergehen, nachdem die E-Mail tatsächlich versendet wurde.

153
00:08:50,880 --> 00:08:52,910
‫Und das können wir

154
00:08:52,910 --> 00:08:57,233
‫natürlich tun, denn sendWelcome ist eine asynchrone Funktion, denken Sie daran.

155
00:08:58,100 --> 00:08:59,750
‫Wenn wir es also

156
00:08:59,750 --> 00:09:02,163
‫tatsächlich verwenden, warten wir, bis es fertig ist.

157
00:09:03,580 --> 00:09:05,960
‫Alles klar, und das ist alles, was

158
00:09:05,960 --> 00:09:08,170
‫wir jetzt tun müssen, um

159
00:09:08,170 --> 00:09:12,270
‫E-Mails zu senden, aber wir müssen hier noch unsere URL angeben.

160
00:09:12,270 --> 00:09:15,110
‫Welche URL wollen wir hier eigentlich?

161
00:09:15,110 --> 00:09:17,200
‫Denken Sie daran,

162
00:09:17,200 --> 00:09:20,910
‫dass hier auf der Schaltfläche Upload_user_photo steht, oder?

163
00:09:20,910 --> 00:09:22,540
‫Im Grunde möchten

164
00:09:22,540 --> 00:09:24,603
‫wir auf diese Benutzerkontoseite verweisen.

165
00:09:25,600 --> 00:09:29,600
‫Also im Grunde gleich hier.

166
00:09:29,600 --> 00:09:33,833
‫Lassen Sie uns es vorerst kopieren, aber wir werden es dann ändern.

167
00:09:35,630 --> 00:09:37,100
‫Und wir könnten es

168
00:09:37,100 --> 00:09:39,640
‫so belassen, aber dann würde es nur in

169
00:09:39,640 --> 00:09:42,510
‫der Entwicklung und nicht in der Produktion funktionieren, denn das

170
00:09:42,510 --> 00:09:45,720
‫gibt es hier natürlich nicht, wenn wir in der Produktion sind.

171
00:09:45,720 --> 00:09:49,140
‫Anstatt es so hart zu codieren, erhalten wir

172
00:09:49,140 --> 00:09:51,373
‫diese Daten aus der Anfrage.

173
00:09:53,050 --> 00:09:56,830
‫Im Grunde erhalten wir also, welches Protokoll wir

174
00:09:56,830 --> 00:10:01,830
‫verwenden, wenn wir HTTP oder HTTPS verwenden, und dann auch diesen Host.

175
00:10:03,440 --> 00:10:06,920
‫Okay, und beides können wir der Anfrage entnehmen.

176
00:10:06,920 --> 00:10:09,350
‫Lassen Sie uns all dies hier ersetzen und

177
00:10:11,237 --> 00:10:12,830
‫dies zu einer Vorlagenzeichenfolge

178
00:10:14,310 --> 00:10:18,590
‫machen, und dann können wir Anfrage sagen. Protokoll, dann Doppelpunkt,

179
00:10:22,000 --> 00:10:24,193
‫Schrägstrich, Schrägstrich und

180
00:10:26,850 --> 00:10:30,580
‫dann Request. werden.

181
00:10:30,580 --> 00:10:32,710
‫Also müssen wir diese Getter-Funktion

182
00:10:32,710 --> 00:10:35,653
‫verwenden und was wir bekommen wollen, ist der Host.

183
00:10:36,710 --> 00:10:38,670
‫Wenn wir also in der Entwicklung

184
00:10:38,670 --> 00:10:41,750
‫sind, wird dies hier natürlich der lokale Host auf

185
00:10:41,750 --> 00:10:43,263
‫Port 3000 sein.

186
00:10:46,160 --> 00:10:47,790
‫Okay, trösten wir es einfach,

187
00:10:51,700 --> 00:10:52,703
‫um sicherzugehen.

188
00:10:54,020 --> 00:10:57,460
‫Okay, und jetzt testen wir es tatsächlich.

189
00:10:57,460 --> 00:11:00,723
‫Dazu müssen wir lediglich einen neuen Benutzer erstellen.

190
00:11:02,170 --> 00:11:04,543
‫Also lass uns das hier in Postman machen.

191
00:11:06,550 --> 00:11:07,943
‫Melden Sie sich also

192
00:11:09,980 --> 00:11:13,860
‫an, und erstellen Sie jetzt in unserem Körper einen neuen Namen,

193
00:11:13,860 --> 00:11:15,223
‫sagen wir Testbenutzer.

194
00:11:17,700 --> 00:11:20,280
‫Und hier spielt das alles keine Rolle, sagen

195
00:11:20,280 --> 00:11:22,767
‫wir einfach test@natours. io und

196
00:11:26,310 --> 00:11:28,110
‫mit dem gleichen Standard-Passwort.

197
00:11:28,990 --> 00:11:31,600
‫Wenn wir diesen neuen Benutzer jetzt erstellen, sollten

198
00:11:31,600 --> 00:11:34,850
‫wir eine neue E-Mail in unsere Mailtrap bekommen, damit wir

199
00:11:34,850 --> 00:11:36,513
‫sie uns ansehen können.

200
00:11:37,470 --> 00:11:41,583
‫Versuchen wir es also und wir haben hier unten einen netten Fehler.

201
00:11:42,420 --> 00:11:44,560
‫Schauen wir uns das also an.

202
00:11:44,560 --> 00:11:48,200
‫Und es sagt, dass es diese Datei nicht finden konnte.

203
00:11:48,200 --> 00:11:52,373
‫Es gibt also einen Fehler in unserem E-Mail-Handler hier.

204
00:11:53,460 --> 00:11:56,353
‫Versuchen wir also herauszufinden, wo das ist.

205
00:11:57,794 --> 00:11:59,003
‫Ah, es ist hier unten.

206
00:11:59,910 --> 00:12:02,160
‫Das Problem ist also, dass der Ordner

207
00:12:02,160 --> 00:12:05,113
‫hier email heißt und hier ich ihn emails genannt habe.

208
00:12:07,130 --> 00:12:09,340
‫Sagen wir einfach E-Mail, ich

209
00:12:09,340 --> 00:12:10,850
‫bevorzuge diese.

210
00:12:10,850 --> 00:12:12,263
‫Und so sollte es jetzt funktionieren.

211
00:12:13,480 --> 00:12:15,400
‫Oh, und jetzt bekommen wir

212
00:12:15,400 --> 00:12:18,160
‫den nächsten Fehler, denn diese E-Mail hier existiert bereits.

213
00:12:18,160 --> 00:12:20,210
‫Und das liegt daran, dass wir im

214
00:12:20,210 --> 00:12:22,900
‫vorherigen Schritt den Fehler tatsächlich erstellt haben, das einzige Problem

215
00:12:22,900 --> 00:12:24,740
‫war dann beim Senden der E-Mail.

216
00:12:24,740 --> 00:12:27,303
‫Also lass uns das hier noch einmal machen, Test zwei.

217
00:12:30,100 --> 00:12:31,500
‫Und noch ein Fehler.

218
00:12:31,500 --> 00:12:35,220
‫Diesmal direkt von Mops.

219
00:12:35,220 --> 00:12:39,320
‫Daher können nur benannte Blöcke und Mixins auf der obersten Ebene

220
00:12:39,320 --> 00:12:40,763
‫einer Erweiterungsvorlage erscheinen.

221
00:12:42,440 --> 00:12:44,203
‫Also stimmt hier etwas

222
00:12:45,170 --> 00:12:47,490
‫nicht, und das ist es tatsächlich.

223
00:12:47,490 --> 00:12:49,573
‫Das ist also genau der

224
00:12:49,573 --> 00:12:53,630
‫Fehler, den es uns mitgeteilt hat, und das heißt, wir können nur

225
00:12:53,630 --> 00:12:56,020
‫erweitern und blockieren, aber hier haben wir

226
00:12:56,020 --> 00:12:58,540
‫diesen Absatz auch auf der obersten Ebene.

227
00:12:58,540 --> 00:12:59,920
‫Das ist also nicht erlaubt.

228
00:12:59,920 --> 00:13:03,503
‫Also legen wir es dort hin, wo es hingehört, nämlich hier.

229
00:13:05,300 --> 00:13:09,020
‫Speichern Sie das, versuchen Sie es noch einmal, und natürlich

230
00:13:09,020 --> 00:13:11,300
‫erhalten wir jetzt diesen Fehler.

231
00:13:11,300 --> 00:13:12,873
‫Sagen wir also Test drei.

232
00:13:18,011 --> 00:13:20,310
‫Okay, jetzt können wir loslegen.

233
00:13:20,310 --> 00:13:22,670
‫So haben wir den neuen Benutzer erfolgreich angelegt,

234
00:13:22,670 --> 00:13:23,980
‫er hat sich eingeloggt.

235
00:13:23,980 --> 00:13:26,480
‫Und jetzt werfen wir einen Blick auf Mailtrap, um zu

236
00:13:26,480 --> 00:13:28,823
‫sehen, ob wir unsere E-Mail tatsächlich erhalten haben.

237
00:13:30,460 --> 00:13:31,473
‫Also Mailtrap.

238
00:13:34,310 --> 00:13:35,963
‫Lass mich mich hier ganz schnell einloggen.

239
00:13:37,320 --> 00:13:40,030
‫Und hier ist unser Natours-Posteingang, und

240
00:13:40,030 --> 00:13:43,450
‫hier ist tatsächlich diese neue E-Mail von vor einer

241
00:13:43,450 --> 00:13:46,300
‫Minute, in der wir die Natours-Familie willkommen heißen.

242
00:13:46,300 --> 00:13:47,170
‫Toll.

243
00:13:47,170 --> 00:13:50,560
‫Und es sieht wirklich sehr schön aus, oder?

244
00:13:50,560 --> 00:13:53,630
‫Das sind also alle Texte, die wir in unserer Vorlage hatten.

245
00:13:53,630 --> 00:13:56,313
‫Wir können hier auch den vollständigen HTML-Code sehen.

246
00:13:59,160 --> 00:14:01,330
‫Auch hier haben wir den Text.

247
00:14:01,330 --> 00:14:03,940
‫Denken Sie also daran, dass wir dieses hier aus

248
00:14:03,940 --> 00:14:06,130
‫dem HTML- in das Textpaket erstellt

249
00:14:06,130 --> 00:14:09,443
‫haben und so können wir bestätigen, dass es auch gut funktioniert.

250
00:14:10,330 --> 00:14:12,850
‫Und, äh, ja.

251
00:14:12,850 --> 00:14:15,333
‫Versuchen wir einfach, hier auf diese

252
00:14:16,590 --> 00:14:20,450
‫Schaltfläche zu klicken, und tatsächlich gelangen wir zu unserer Kontoseite.

253
00:14:20,450 --> 00:14:23,740
‫Im Moment sind wir tatsächlich als Aarav eingeloggt, weil

254
00:14:23,740 --> 00:14:27,010
‫wir bereits als dieser Benutzer eingeloggt waren, aber das

255
00:14:27,010 --> 00:14:28,680
‫ist nicht wirklich

256
00:14:28,680 --> 00:14:31,200
‫der Punkt, denn diese E-Mail hier nimmt

257
00:14:31,200 --> 00:14:34,560
‫an, dass Sie sich von der Website aus anmelden, richtig?

258
00:14:34,560 --> 00:14:36,420
‫Das funktioniert zu diesem Zeitpunkt

259
00:14:36,420 --> 00:14:39,510
‫nicht, daher haben wir kein Anmeldeformular auf unserer

260
00:14:39,510 --> 00:14:41,850
‫Website, aber der wirklich wichtige Teil

261
00:14:41,850 --> 00:14:45,980
‫hier ist, dass unsere E-Mail hier jetzt einwandfrei funktioniert, der Button

262
00:14:45,980 --> 00:14:47,800
‫hier funktioniert auch.

263
00:14:47,800 --> 00:14:49,620
‫Und damit macht der große E-Mail-Handler,

264
00:14:49,620 --> 00:14:52,710
‫den wir im letzten Vortrag erstellt haben, seinen Job genauso

265
00:14:52,710 --> 00:14:54,860
‫gut wie die E-Mail-Vorlage, die wir in

266
00:14:54,860 --> 00:14:56,660
‫diesem Video erstellt haben.

267
00:14:56,660 --> 00:14:59,090
‫Also, ich bin wirklich glücklich mit diesem Ergebnis.

268
00:14:59,090 --> 00:15:01,300
‫Als nächstes machen wir etwas Ähnliches für

269
00:15:01,300 --> 00:15:03,223
‫die E-Mails zum Zurücksetzen des Passworts.

