‫Istruttore: Quindi, in questo
‫video, useremo la potenza di Pug per creare un modello di email davvero
‫carino e poi invieremo un'email di benvenuto basata su quel modello.
‫E quel modello è il benvenuto. carlino qui.
‫Ok, ora come prima, ho già un modello qui in
‫modelli di dati di sviluppo.
‫Quindi modello di posta elettronica e quindi è tutto questo
‫codice qui con anche il CSS in linea.
‫Quindi un sacco di CSS.
‫Quindi copiamo tutto questo qui in benvenuto. carlino.
‫Ok, e qui in basso vedrai questa nota in
‫cui dico che ha effettivamente adattato questo modello di email
‫da questo.
‫Quindi apriamolo molto rapidamente.
‫Va bene.
‫E così la nostra email sarà un po' come questa.
‫Ora, ovviamente, ho adattato un po' il design al nostro marchio.
‫Quindi, per questo pulsante qui,
‫ho usato il nostro colore verde, per esempio.
‫Ma quello che ho usato è questo modello HTML.
‫Quindi ho effettivamente convertito quell'HTML usando questo strumento.
‫Quindi HTML a Pug.
‫Quindi, di nuovo, diamo una rapida occhiata a questo.
‫E quindi, in pratica, ciò che
‫ti consente di fare è incollare del codice HTML
‫qui, quindi fare clic su Converti e verrà visualizzato il codice Pug per te.
‫Quindi può essere molto utile quando provi
‫a convertire alcune pagine esistenti di cui hai già un HTML in Pug.
‫Ad ogni modo, quando creiamo un'e-mail HTML,
‫dobbiamo sempre incorporare tutti gli stili.
‫Ed ecco perché hai questa tonnellata di CSS proprio
‫qui all'interno di questo file.
‫Ma, ovviamente, questo rende questo file
‫un po' rumoroso, quindi prendiamo tutto questo ed esportiamolo.
‫Va bene, quindi, sì.
‫Quindi è così.
‫Quindi taglialo
‫e qui crea un nuovo file, e poi,
‫proprio come prima, con i file che includerò, uso il carattere di
‫sottolineatura e poi lo stile. carlino.
‫Quindi incollalo qui.
‫E ora dobbiamo anche regolare tutto questo insetting qui e
‫così di nuovo, Command + Shift +
‫P o probabilmente su Windows, Ctrl + Shift + P.
‫E poi scrivi carlino per abbellire carlino.
‫E questo rende il nostro codice carino.
‫Chiudi quello qui e
‫ora include_style.
‫Ok, e ora vedi tutti questi codici qui sotto, il che sembra
‫davvero confuso e questo è in realtà il motivo
‫per cui ho copiato questo modello da quel repository GitHub che ti
‫ho mostrato prima.
‫Quindi ci sono molte tabelle in corso e
‫questo perché molti client di
‫posta elettronica in realtà capiscono solo le tabelle per la formattazione.
‫Quindi abbiamo tutte queste cose qui che non sono molto
‫significative con le righe della tabella all'interno delle tabelle all'interno delle tabelle.
‫Ho ragione?
‫Ma ciò che conta qui è questa area di contenuto qui.
‫E quindi questa è la
‫parte del modello in cui metteremo tutti i nostri contenuti.
‫Ora, il fatto è che, ovviamente,
‫avremo molti modelli diversi.
‫Nel caso di
‫questo progetto, in realtà ne creeremo solo
‫due noi stessi, ma potrebbero esserci molte email per molte situazioni
‫e quindi, ovviamente, avremo bisogno di un modo per riutilizzare
‫tutto questo codice che è al di fuori di questo contenuto.
‫Quindi, fondamentalmente, tutti questi qui dovrebbero essere riutilizzabili, e in realtà
‫è esattamente quello che abbiamo fatto prima con il
‫nostro modello di base qui.
‫Va bene.
‫Quindi mettiamo tutto ciò che è riutilizzabile per tutti
‫i modelli all'interno di questa base, quindi abbiamo il nostro blocco lì
‫e tutti gli altri
‫modelli, quindi estendiamo semplicemente questo blocco.
‫E quindi è esattamente quello che faremo ora.
‫Quindi andiamo avanti e tagliamo tutti questi da qui, creiamo
‫un nuovo modello chiamato baseEmail e poi
‫mettiamolo qui.
‫E ora, per il contenuto stesso, ovviamente,
‫lo rimuoviamo dalla base.
‫Quindi taglia quello da qui,
‫e qui creiamo quindi un blocco
‫chiamato contenuto, di nuovo.
‫Va bene.
‫E così ora qui, nel nostro modello di benvenuto, inseriamo
‫quel contenuto all'interno di quel
‫blocco di contenuto.
‫Va bene.
‫E ora, per finire, dobbiamo dire che
‫si estende, in modo che questo
‫modello qui estenda baseEmail.
‫Formattiamolo di nuovo con questo comando
‫ed è bellissimo.
‫Grande.
‫Ora, qui nel nostro
‫modello di base, ora abbiamo l'oggetto come titolo.
‫E quindi questo è il
‫motivo per cui l'ho passato nel modello.
‫Quindi è proprio qui, ricordi?
‫Quindi, nel modello, abbiamo passato l'oggetto,
‫l'URL e il nome.
‫E quindi ora andiamo avanti e usiamo questo nel nostro modello.
‫E quindi l'argomento l'abbiamo già usato qui nella base, ma
‫in realtà è tutto per questo file, quindi
‫non lo toccheremo di nuovo.
‫E così ora ecco il nostro vero modello.
‫Quindi abbiamo qui il nome e quindi sostituiamolo con la
‫prima variabile del nome.
‫Quindi firstName qui, poi abbiamo tutti questi bei testi qui.
‫Quindi, benvenuto in famiglia, tutta quella roba.
‫E poi quaggiù abbiamo quel pulsante verde
‫di cui ho parlato quando ti ho mostrato il modello
‫su GitHub e così su quel pulsante, diciamo carica la foto dell'utente.
‫E quindi qui dobbiamo specificare l'URL che abbiamo passato.
‫Va bene, quindi si chiama URL, giusto.
‫E così, ora lo mettiamo su questo pulsante qui ed
‫è proprio così.
‫Tutto il resto qui è solo contenuto
‫statico che non abbiamo bisogno di cambiare affatto, va bene?
‫Quindi questo modello di benvenuto qui verrà utilizzato ogni
‫volta che chiamiamo sendWelcome.
‫E quindi ora andiamo avanti e facciamolo.
‫Quindi da dove vogliamo inviare l'e-mail di benvenuto?
‫Bene, questo è in authController e credo che ci
‫sia una funzione di iscrizione o registro o
‫qualcosa del genere, ed è
‫proprio qui.
‫Quindi questa registrazione.
‫E quindi in questo, dobbiamo importare l'e-mail e
‫quindi usarla.
‫E, in effetti, abbiamo già sendEmail, ma ora
‫ricorda che si chiama Email, quindi con
‫la E maiuscola come questa.
‫Ora abbiamo usato quella variabile prima da qualche parte quaggiù, quindi
‫andiamo lì.
‫Va bene, quindi questo codice qui
‫a questo punto non funziona più, ma lo sistemeremo nel prossimo video.
‫Quindi, per ora, commentiamolo in
‫modo che non faccia alcun danno.
‫Ma comunque, ora usiamo questa lezione di posta elettronica proprio qui.
‫Quindi la nuova e-mail, quindi ricorda che il primo è l'utente e in
‫realtà il codice VS lo sa e
‫mostra che qui e così l'utente è il nuovoutente che abbiamo
‫qui e quindi l'URL che creeremo qui in un secondo.
‫Quindi const url è uguale a zero, per ora.
‫Ok, e poi inviaBenvenuto.
‫E ora tutto ciò che dobbiamo fare è attendere
‫effettivamente questa funzione sendWelcome.
‫Va bene, quindi lo facciamo, quindi passiamo qui
‫al passaggio successivo solo dopo che l'e-mail è stata effettivamente inviata.
‫E possiamo farlo,
‫ovviamente, perché sendWelcome è una funzione asincrona, ricordalo.
‫Quindi, quando lo
‫usiamo effettivamente, aspettiamo che finisca.
‫Va bene, quindi questo è tutto
‫ciò che dobbiamo fare per
‫inviare e-mail ora, ma dobbiamo ancora specificare il nostro URL qui.
‫Ora, quale URL vogliamo effettivamente qui?
‫Bene, ricorda che
‫qui sul pulsante c'è scritto Upload_user_photo, giusto?
‫E quindi, in pratica,
‫vogliamo puntare a quella pagina dell'account utente.
‫Quindi, in pratica, proprio qui.
‫Quindi, per ora, copiamolo, ma poi lo cambieremo.
‫E potremmo lasciarlo
‫così, ma funzionerebbe solo in fase
‫di sviluppo e non di produzione, perché, ovviamente,
‫questo qui non esiste quando siamo in produzione.
‫E quindi, invece di codificarlo in questo modo,
‫otterremo questi dati dalla richiesta.
‫Quindi, in pratica, otterremo quale protocollo stiamo usando,
‫se stiamo usando HTTP o HTTPS, e poi anche questo host.
‫Ok, ed entrambi possiamo ottenere dalla richiesta.
‫Quindi sostituiamoli tutti qui e rendiamo
‫questo una stringa
‫modello e quindi possiamo dire richiesta. protocol quindi due
‫punti, barra, barra e
‫quindi richiesta. ottenere.
‫Quindi dobbiamo usare questa funzione
‫getter e quello che vogliamo ottenere è l'host.
‫Quindi, quando saremo in fase di
‫sviluppo, allora, ovviamente, questo qui sarà l'host locale
‫sulla porta 3000.
‫Ok, allora consoliamolo solo per
‫essere sicuri.
‫Ok, e ora, proviamolo davvero.
‫E tutto ciò che dobbiamo fare per questo è semplicemente creare un nuovo utente.
‫Quindi facciamolo qui a Postman.
‫Quindi registrati, e
‫ora nel nostro corpo, creiamo un nuovo nome, diciamo
‫Test User.
‫E qui, tutto questo non ha molta importanza, quindi
‫diciamo solo test@natours. io e
‫con la stessa password standard.
‫E così ora, quando creiamo questo nuovo utente,
‫dovremmo ricevere una nuova email nel nostro Mailtrap, in modo
‫che possiamo dargli un'occhiata.
‫Quindi proviamoci e abbiamo qualche bell'errore quaggiù.
‫Quindi diamo un'occhiata a questo.
‫E dice che non è riuscito a trovare questo file.
‫Quindi c'è qualche errore nel nostro gestore di posta elettronica qui.
‫E quindi proviamo a scoprire dov'è.
‫Ah, è quaggiù.
‫E quindi il problema è che la
‫cartella qui si chiama email e qui l'ho chiamata email.
‫Quindi diciamo solo e-mail,
‫preferisco quella.
‫E quindi ora dovrebbe funzionare.
‫Oh, e ora riceviamo
‫il prossimo errore, perché questa email esiste già.
‫E questo perché nel passaggio precedente,
‫abbiamo effettivamente creato l'errore, l'unico problema era
‫quindi con l'invio dell'e-mail.
‫Quindi ripetiamolo qui, prova due.
‫E un altro errore.
‫Questa volta direttamente da Pug.
‫Quindi, solo i blocchi ei mixin con nome possono apparire al livello superiore
‫di un modello esteso.
‫E quindi qui c'è qualcosa
‫che non va, e in effetti lo è.
‫Quindi questo è esattamente l'errore
‫che ci ha detto di avere e cioè che possiamo avere solo
‫estensioni e blocchi, ma qui abbiamo
‫questo paragrafo anche al livello più alto.
‫Quindi non è permesso.
‫Quindi mettiamolo al suo posto, che è proprio qui.
‫Salvalo, provalo ancora una volta e ovviamente
‫ora riceviamo questo errore.
‫Quindi diciamo il terzo test.
‫Ok, ora siamo a posto.
‫Quindi abbiamo creato con successo il nuovo utente,
‫ha effettuato l'accesso.
‫E ora diamo un'occhiata a Mailtrap per vedere
‫se abbiamo effettivamente ricevuto la nostra email.
‫Quindi Mailtrap.
‫Fammi accedere qui molto velocemente.
‫Ed ecco la nostra casella di posta
‫Natours, e in effetti, ecco questa nuova email di un
‫minuto fa che dice benvenuto nella famiglia Natours.
‫Grande.
‫E in effetti sembra davvero carino, vero?
‫Quindi questi sono tutti i testi che avevamo nel nostro modello.
‫Possiamo anche vedere l'HTML completo qui.
‫Anche qui abbiamo il testo.
‫E quindi ricorda che abbiamo creato questo
‫qui dal pacchetto HTML al
‫testo e quindi possiamo confermare che funziona anche bene.
‫E, ehm, sì.
‫Proviamo solo a cliccare qui su
‫questo pulsante, e infatti ci porta alla nostra pagina dell'account.
‫Ora, in questo momento siamo effettivamente registrati come
‫Aarav perché eravamo già registrati come quell'utente, ma
‫non è proprio
‫questo il punto perché questa email qui
‫suppone che ti stia registrando dal sito web, giusto?
‫Ora, questo non funziona a questo
‫punto, quindi non abbiamo alcun modulo di iscrizione sul
‫nostro sito Web, ma la parte davvero
‫importante qui è che la nostra e-mail qui ora funziona perfettamente, anche
‫il pulsante qui funziona.
‫E così quel grande gestore di
‫email che abbiamo creato nell'ultima lezione sta facendo il suo lavoro
‫proprio come il modello di email che
‫abbiamo creato in questo video.
‫Quindi, sono davvero contento di questo risultato.
‫Successivamente, facciamo qualcosa di simile per le
‫e-mail di reimpostazione della password.