‫Instructeur : Donc, dans cette
‫vidéo, nous allons utiliser la puissance de Pug pour créer un très bon
‫modèle d'e-mail, puis envoyer un e-mail de bienvenue basé sur ce modèle.
‫Et ce modèle est le bienvenu. carlin ici.
‫D'accord, maintenant comme avant, j'ai déjà un modèle ici dans les
‫modèles de données de développement.
‫Donc, modèle d'e-mail et c'est donc tout ce
‫code ici avec le CSS également aligné.
‫Donc une tonne de CSS.
‫Alors copions tout cela ici dans Welcome. carlin.
‫D'accord, et ici en bas, vous verrez cette note où
‫je dis qu'elle a en fait adapté ce modèle d'e-mail à
‫partir de celui-ci.
‫Alors ouvrons ça très vite.
‫Très bien.
‫Et donc notre e-mail va ressembler un peu à celui-ci.
‫Maintenant, bien sûr, j'ai un peu adapté le design à notre marque.
‫Donc pour ce bouton ici,
‫j'ai utilisé notre couleur verte, par exemple.
‫Mais ce que j'ai utilisé, c'est ce modèle HTML.
‫Ensuite, j'ai converti ce code HTML à l'aide de cet outil.
‫Donc HTML à Pug.
‫Alors encore une fois, jetons un coup d'œil rapide à cela.
‫Et donc, fondamentalement, ce que cela
‫vous permet de faire est de coller du code
‫HTML ici, puis de cliquer sur Convertir et le code Pug sera généré pour vous.
‫Cela peut donc être très pratique lorsque vous
‫essayez de convertir certaines pages existantes dont vous avez déjà un code HTML en Pug.
‫Quoi qu'il en soit, lorsque nous créons un e-mail
‫HTML, nous devons toujours intégrer tous les styles.
‫Et c'est pourquoi vous avez cette tonne de CSS
‫ici même dans ce fichier.
‫Mais, bien sûr, cela rend ce fichier
‫un peu bruyant, alors récupérons tout cela et exportons-le.
‫D'accord, alors, ouais.
‫Donc c'est tout.
‫Alors coupez-le,
‫et créez ici un nouveau fichier, puis,
‫comme avant, avec les fichiers que je vais inclure, j'utilise le trait
‫de soulignement puis le style. carlin.
‫Alors collez ça ici.
‫Et maintenant, nous devons également ajuster tout cet insetting ici
‫et encore, Commande + Maj +
‫P ou probablement sous Windows, Ctrl + Maj + P.
‫Et puis il suffit d'écrire carlin pour embellir carlin.
‫Et cela rend notre code agréable.
‫Fermez celui-ci ici, et
‫maintenant include_style.
‫D'accord, et maintenant vous voyez tous ces codes ici, ce qui semble vraiment
‫déroutant et c'est en fait la raison pour laquelle j'ai
‫copié ce modèle à partir de ce référentiel GitHub que je vous
‫ai montré auparavant.
‫Il y a donc beaucoup de tableaux en cours
‫et c'est parce que de nombreux
‫clients de messagerie ne comprennent en fait que les tableaux pour le formatage.
‫Nous avons donc ici toutes ces choses qui n'ont pas vraiment de
‫sens avec des lignes de table à l'intérieur de tables à l'intérieur de tables.
‫Ai-je raison?
‫Mais ce qui compte ici, c'est cette zone de contenu ici.
‫Et c'est donc la partie
‫du modèle où nous allons mettre tout notre contenu.
‫Maintenant, le fait est que nous aurons
‫bien sûr de nombreux modèles différents.
‫Dans le cas
‫de ce projet, nous n'en créerons en fait
‫que deux nous-mêmes, mais il peut y avoir de nombreux e-mails pour
‫de nombreuses situations et, bien sûr, nous aurons besoin d'un
‫moyen de réutiliser tout ce code en dehors de ce contenu.
‫Donc, fondamentalement, tout cela ici devrait être réutilisable, et en fait,
‫c'est exactement ce que nous avons fait auparavant avec
‫notre modèle de base ici.
‫Très bien.
‫Donc on met tout ce qui est réutilisable pour tous
‫les templates à l'intérieur de cette base, puis on a notre bloc là
‫et tous les autres
‫templates, puis on étend simplement ce bloc.
‫Et c'est exactement ce que nous allons faire maintenant.
‫Alors allons de l'avant et coupons tout cela à partir d'ici,
‫créons un nouveau modèle appelé baseEmail, puis
‫mettons-le ici.
‫Et maintenant, pour le contenu lui-même, bien sûr, nous
‫le supprimons de la base.
‫Alors coupez celui-ci à partir
‫d'ici, et créons ici un bloc
‫appelé contenu, à nouveau.
‫Très bien.
‫Et maintenant, ici, dans notre modèle de bienvenue, nous mettons ensuite
‫ce contenu à l'intérieur de
‫ce bloc de contenu.
‫D'accord.
‫Et maintenant juste pour finir, nous devons ensuite
‫dire qu'il s'étend, de sorte que ce
‫modèle ici étend la baseEmail.
‫Formatons cela à nouveau avec cette commande
‫et c'est magnifique.
‫Super.
‫Maintenant, ici dans notre modèle de
‫base, nous avons en fait maintenant le sujet comme titre.
‫Et c'est donc la raison pour
‫laquelle j'ai transmis cela dans le modèle.
‫C'est donc ici, tu te souviens ?
‫Donc, dans le modèle, nous avons passé le
‫sujet, l'URL et le prénom.
‫Et donc allons-y maintenant et utilisons ceci dans notre modèle.
‫Et donc le sujet qu'on a déjà utilisé ici dans la base
‫mais c'est en fait tout pour ce dossier donc
‫on ne va plus y toucher.
‫Et maintenant, voici notre vrai modèle.
‫Nous avons donc ici le nom et remplaçons-le donc
‫par la variable prénom.
‫Alors firstName ici, puis nous avons tous ces jolis textes ici.
‫Alors, bienvenue dans la famille, tout ça.
‫Et puis ici, nous avons ce bouton vert
‫dont j'ai parlé lorsque je vous ai montré le modèle sur GitHub
‫et ainsi de suite sur ce bouton, nous disons télécharger la photo de l'utilisateur.
‫Et donc ici, nous devons spécifier l'URL que nous avons transmise.
‫D'accord, donc ça s'appelle URL, c'est ça.
‫Et donc, maintenant nous mettons cela sur ce bouton ici et
‫c'est en fait tout.
‫Tout le reste ici n'est que du contenu
‫statique que nous n'avons pas du tout besoin de modifier, d'accord ?
‫Ainsi, ce modèle de bienvenue ici sera désormais utilisé chaque
‫fois que nous appelons sendWelcome.
‫Et donc allons-y maintenant et faisons cela.
‫D'où voulons-nous donc envoyer l'e-mail de bienvenue ?
‫Eh bien, c'est dans authController et pour, je crois qu'il
‫y a une fonction d'inscription ou un registre ou
‫quelque chose comme ça, et
‫c'est juste ici.
‫Alors cette inscription.
‫Et donc dans cela, nous devons importer l'e-mail,
‫puis l'utiliser.
‫Et, en fait, nous avons déjà sendEmail, mais rappelez-vous
‫maintenant que cela s'appelle Email, donc avec
‫un E majuscule comme celui-ci.
‫Maintenant, nous avons déjà utilisé cette variable quelque part ici,
‫alors allons-y.
‫Très bien, et donc ce code ici à
‫ce stade ne fonctionne plus mais nous allons le corriger dans la prochaine vidéo.
‫Donc pour l'instant, commentons-le simplement
‫pour qu'il ne fasse aucun dommage.
‫Mais de toute façon, utilisons maintenant cette classe d'e-mail ici.
‫Donc, nouvel e-mail, et rappelez-vous d'abord que c'est l'utilisateur et que le code
‫VS le sait et montre qu'ici et
‫donc l'utilisateur est le nouvel utilisateur que nous avons ici,
‫puis l'URL que nous allons créer ici dans une seconde.
‫Donc const url est égal, mettons-le à zéro, pour l'instant.
‫D'accord, puis envoyezBienvenue.
‫Et maintenant, tout ce que nous avons à faire
‫est d'attendre cette fonction sendWelcome.
‫Très bien, alors nous faisons cela, que nous ne
‫passons ici à l'étape suivante qu'une fois que l'e-mail a été envoyé.
‫Et nous pouvons le
‫faire, bien sûr, car sendWelcome est une fonction asynchrone, souvenez-vous-en.
‫Et donc, lorsque nous
‫l'utilisons réellement, nous attendons ensuite qu'il se termine.
‫Très bien, c'est donc tout ce que
‫nous devons faire pour envoyer
‫des e-mails maintenant, mais nous devons toujours spécifier notre URL ici.
‫Maintenant, quelle URL voulons-nous réellement ici ?
‫Eh bien, rappelez-vous qu'ici sur
‫le bouton, il est écrit Upload_user_photo, n'est-ce pas ?
‫Et donc, fondamentalement, nous voulons
‫pointer vers cette page de compte d'utilisateur.
‫Donc, en gros, ici.
‫Donc pour l'instant, copions-le, mais nous le modifierons ensuite.
‫Et nous pourrions le
‫laisser comme ça, mais cela ne fonctionnerait
‫qu'en développement et non en production, car, bien
‫sûr, cela n'existe pas ici lorsque nous sommes en production.
‫Et donc au lieu de le coder en dur comme ça, nous obtiendrons
‫ces données à partir de la demande.
‫Donc, fondamentalement, nous obtiendrons le protocole que nous
‫utilisons, si nous utilisons HTTP ou HTTPS, ainsi que cet hôte.
‫D'accord, et nous pouvons obtenir les deux à partir de la demande.
‫Remplaçons donc tout cela ici et faisons-en
‫une chaîne de
‫modèle, puis nous pourrons dire request. protocole, puis deux-points,
‫barre oblique, barre oblique,
‫puis requête. avoir.
‫Nous devons donc utiliser cette fonction
‫getter et ce que nous voulons obtenir, c'est l'hôte.
‫Et donc, quand nous serons en
‫développement, alors, bien sûr, ce sera ici l'hôte local
‫sur le port 3000.
‫D'accord, consolons-le juste pour
‫être sûr.
‫D'accord, et maintenant, testons-le.
‫Et tout ce que nous devons faire pour cela est de simplement créer un nouvel utilisateur.
‫Faisons-le donc ici dans Postman.
‫Alors inscrivez-vous, et
‫maintenant dans notre Body, créons un nouveau nom, disons
‫Test User.
‫Et ici, tout cela n'a pas vraiment d'importance, alors
‫disons simplement test@natours. io et avec
‫le même mot de passe standard.
‫Et maintenant, lorsque nous créons ce nouvel utilisateur, nous
‫devrions alors obtenir un nouvel e-mail dans notre Mailtrap, afin que nous
‫puissions y jeter un œil.
‫Alors essayons cela et nous avons une belle erreur ici.
‫Jetons donc un œil à cela.
‫Et il dit qu'il n'a pas pu trouver ce fichier.
‫Il y a donc une erreur dans notre gestionnaire de courrier électronique ici.
‫Et essayons donc de trouver où c'est.
‫Ah, c'est ici.
‫Et donc le problème est que le
‫dossier ici s'appelle email et ici je l'ai appelé emails.
‫Alors disons simplement email, je
‫préfère celui-là.
‫Et maintenant, cela devrait fonctionner.
‫Oh, et maintenant nous obtenons
‫la prochaine erreur, car cet e-mail existe déjà ici.
‫Et c'est parce qu'à l'étape précédente,
‫nous avons en fait créé l'erreur, le seul
‫problème était alors d'envoyer l'e-mail.
‫Faisons-le encore ici, testez-en deux.
‫Et encore une erreur.
‫Cette fois venant directement de Pug.
‫Ainsi, seuls les blocs nommés et les mixins peuvent apparaître au niveau
‫supérieur d'un modèle d'extension.
‫Et donc quelque chose ne
‫va pas ici, et c'est effectivement le cas.
‫C'est donc exactement l'erreur qu'il nous
‫a dit que nous avions et c'est que nous ne pouvons avoir que
‫des extensions et des blocs, mais ici
‫nous avons également ce paragraphe au niveau supérieur.
‫Ce n'est donc pas autorisé.
‫Alors mettons-le à sa place, c'est-à-dire ici.
‫Faites une sauvegarde, essayez encore une fois, et bien sûr,
‫nous obtenons maintenant cette erreur.
‫Alors disons le test trois.
‫D'accord, maintenant nous sommes prêts à partir.
‫Nous avons donc créé avec succès le nouvel
‫utilisateur, il s'est connecté.
‫Et maintenant, jetons un coup d'œil à Mailtrap pour
‫voir si nous avons réellement reçu notre e-mail.
‫Alors Mailtrap.
‫Permettez-moi de me connecter ici très rapidement.
‫Et voici notre boîte de réception Natours,
‫et en effet, voici ce nouvel e-mail d'il y a
‫une minute disant bienvenue à la famille Natours.
‫Super.
‫Et ça a l'air vraiment sympa, non ?
‫Voilà donc tous les textes que nous avions dans notre modèle.
‫Nous pouvons également voir le HTML complet ici.
‫Ici aussi, nous avons le texte.
‫Et rappelez-vous que nous avons créé celui-ci ici
‫à partir du package HTML vers
‫texte et nous pouvons donc confirmer qu'il fonctionne également très bien.
‫Et, euh, ouais.
‫Essayons simplement de cliquer ici sur ce
‫bouton, et en effet cela nous amène à notre page de compte.
‫Maintenant, en ce moment, nous sommes en fait connectés en tant
‫qu'Aarav parce que nous étions déjà connectés en tant qu'utilisateur, mais
‫ce n'est pas vraiment le
‫problème car cet e-mail ici suppose en quelque
‫sorte que vous vous inscrivez depuis le site Web, n'est-ce pas ?
‫Maintenant, cela ne fonctionne pas à
‫ce stade, nous n'avons donc aucun formulaire d'inscription sur
‫notre site Web, mais la partie vraiment
‫importante ici est que notre e-mail ici fonctionne maintenant très bien, le
‫bouton ici fonctionne également.
‫Et donc, ce gros gestionnaire d'e-mails que
‫nous avons créé lors de la dernière conférence fait son travail
‫aussi bien que le modèle d'e-mail que nous
‫avons créé dans cette vidéo.
‫Donc, je suis vraiment content de ce résultat.
‫Ensuite, faisons quelque chose de similaire pour les e-mails
‫de réinitialisation de mot de passe.