‫Instruktur: Jadi dalam video
‫ini, kita akan menggunakan kekuatan Pug untuk membuat template email yang sangat
‫bagus dan kemudian mengirim email selamat datang berdasarkan template itu.
‫Dan template itu diterima. pesek di sini.
‫Oke, sekarang sama seperti sebelumnya, saya sudah memiliki template di
‫sini di template dev-data.
‫Jadi template email dan semua kode ini
‫di sini dengan CSS juga berjajar.
‫Jadi satu ton CSS.
‫Jadi mari kita salin semua itu di sini ke selamat datang. pesek
‫Oke, dan di sini di bagian bawah, Anda akan melihat catatan
‫di mana saya mengatakan bahwa itu benar-benar mengadaptasi template email ini
‫dari yang ini.
‫Jadi mari kita buka itu dengan sangat cepat.
‫Baiklah.
‫Jadi email kita akan terlihat seperti ini.
‫Sekarang, tentu saja, saya sedikit menyesuaikan desain dengan merek kami.
‫Jadi untuk tombol ini di
‫sini, saya menggunakan warna hijau kami, misalnya.
‫Tapi jenis yang saya gunakan adalah template HTML ini.
‫Kemudian saya benar-benar mengonversi HTML itu menggunakan alat ini.
‫Jadi HTML ke Pug.
‫Jadi sekali lagi, mari kita lihat sekilas.
‫Jadi pada dasarnya apa yang
‫memungkinkan Anda lakukan adalah menempelkan beberapa HTML di
‫sini lalu klik Konversi dan itu akan menampilkan kode Pug untuk Anda.
‫Jadi itu bisa sangat berguna ketika Anda
‫mencoba mengonversi beberapa halaman yang ada yang sudah Anda miliki menjadi HTML ke Pug.
‫Bagaimanapun, ketika kita sedang membuat email HTML,
‫kita harus selalu menyejajarkan semua gaya.
‫Dan itulah mengapa Anda memiliki banyak CSS di
‫sini di dalam file ini.
‫Tapi, tentu saja, ini membuat file ini sedikit
‫bising dan jadi mari kita ambil semua itu dan mengekspornya.
‫Baiklah, jadi, ya.
‫Jadi itu saja.
‫Jadi potong,
‫dan di sini buat file baru,
‫lalu, seperti sebelumnya, dengan file yang akan saya sertakan, saya menggunakan
‫garis bawah lalu gaya. pesek
‫Jadi tempel itu di sini.
‫Dan sekarang kita juga perlu menyesuaikan semua pengaturan ini di
‫sini dan lagi, Command + Shift +
‫P atau mungkin di Windows, Ctrl + Shift + P.
‫Dan kemudian tulis saja pug untuk mempercantik pug.
‫Dan itu membuat kode kita bagus.
‫Tutup yang itu di sini,
‫dan sekarang include_style.
‫Oke, dan sekarang Anda melihat semua kode ini di sini,
‫yang terlihat sangat membingungkan dan itulah alasan mengapa
‫saya menyalin template ini dari repo GitHub yang saya
‫tunjukkan sebelumnya.
‫Jadi ada banyak tabel yang dibuat
‫dan itu karena banyak
‫klien email sebenarnya hanya memahami tabel untuk pemformatan.
‫Jadi kami memiliki semua hal ini di sini yang tidak
‫terlalu berarti dengan baris tabel di dalam tabel di dalam tabel.
‫Apakah saya benar?
‫Tapi yang penting di sini adalah area konten ini di sini.
‫Dan ini adalah bagian
‫dari template dimana kita akan meletakkan semua konten kita.
‫Sekarang, masalahnya adalah kita, tentu saja, akan
‫memiliki banyak template yang berbeda.
‫Dalam kasus proyek
‫ini, kami sebenarnya hanya akan membuat
‫dua sendiri tetapi mungkin ada banyak email untuk banyak situasi
‫dan, tentu saja, kami memerlukan cara untuk menggunakan kembali
‫semua kode ini yang berada di luar konten ini.
‫Jadi, pada dasarnya, semua ini di sini harus dapat digunakan kembali,
‫dan sebenarnya, itulah yang kami lakukan sebelumnya dengan
‫template dasar kami di sini.
‫Baiklah.
‫Jadi kami meletakkan semua yang dapat digunakan kembali untuk
‫semua templat di dalam basis ini, lalu kami memiliki blok kami di
‫sana dan semua templat
‫lainnya, lalu cukup perpanjang blok ini.
‫Dan itulah yang akan kita lakukan sekarang.
‫Jadi mari kita lanjutkan dan potong semua ini dari sini,
‫buat template baru bernama baseEmail, lalu letakkan
‫di sini.
‫Dan sekarang, untuk konten itu sendiri, tentu saja,
‫kami menghapusnya dari dasarnya.
‫Jadi potong yang itu dari sini,
‫dan di sini mari kita buat blok
‫yang disebut konten, lagi.
‫Baiklah.
‫Dan sekarang di sini, di template selamat datang kami, kami kemudian
‫menempatkan konten itu di dalam
‫blok konten itu.
‫Oke.
‫Dan sekarang hanya untuk menyelesaikan, kita kemudian perlu
‫mengatakan bahwa itu meluas, sehingga template
‫ini di sini memperluas baseEmail.
‫Mari kita format lagi dengan perintah ini
‫dan itu bagus.
‫Besar.
‫Sekarang, di sini, di template
‫dasar kami, kami sebenarnya memiliki subjek sebagai judul.
‫Dan itulah alasan mengapa
‫saya memasukkannya ke dalam template.
‫Jadi itu di sini, ingat?
‫Jadi ke dalam template, kami melewati
‫subjek, URL dan firstName.
‫Jadi sekarang mari kita lanjutkan dan gunakan ini di template kita.
‫Jadi subjek yang sudah kita gunakan di sini di dasar
‫tapi itu sebenarnya untuk file ini jadi
‫kita tidak akan menyentuhnya lagi.
‫Dan sekarang inilah template kita yang sebenarnya.
‫Jadi kita memiliki nama di sini dan mari kita ganti
‫dengan variabel nama depan.
‫Jadi firstName di sini, maka kita memiliki semua teks bagus ini di sini.
‫Jadi, selamat datang di keluarga, semua itu.
‫Dan kemudian di bawah sini kami memiliki
‫tombol hijau yang saya bicarakan ketika saya menunjukkan template
‫di GitHub dan seterusnya tombol itu, kami katakan unggah foto pengguna.
‫Jadi di sini kita perlu menentukan URL yang kita lewati.
‫Baiklah, jadi itu disebut URL, kan.
‫Jadi, sekarang kita letakkan itu di tombol ini di sini
‫dan itu saja.
‫Selebihnya di sini hanyalah konten
‫statis yang tidak perlu kita ubah sama sekali, oke?
‫Jadi template selamat datang di sini sekarang akan digunakan setiap
‫kali kita memanggil sendWelcome.
‫Jadi sekarang mari kita benar-benar maju dan melakukan itu.
‫Jadi dari mana kita ingin mengirim email selamat datang?
‫Nah, itu ada di authController dan, saya yakin
‫ada fungsi sign up atau register atau
‫semacamnya, dan itu ada
‫di sini.
‫Jadi ini mendaftar.
‫Dan dalam hal ini, kita perlu mengimpor email dan
‫kemudian menggunakannya.
‫Dan sebenarnya kita sudah punya sendEmail, tapi sekarang
‫ingat yang namanya Email, jadi dengan huruf
‫besar E seperti ini.
‫Sekarang kita menggunakan variabel itu sebelumnya di suatu tempat di bawah sini, jadi mari kita
‫pergi ke sana.
‫Baiklah, jadi kode ini di sini
‫saat ini tidak lagi berfungsi tetapi kami akan memperbaikinya di video berikutnya.
‫Jadi untuk saat ini, mari kita
‫berkomentar saja agar tidak merusak apa pun.
‫Tapi bagaimanapun, sekarang mari kita gunakan kelas email ini di sini.
‫Jadi Email baru, dan kemudian ingat yang pertama adalah pengguna dan sebenarnya kode VS
‫tahu itu dan menunjukkan bahwa di sini dan
‫di sana pengguna adalah Pengguna baru yang kita miliki di sini
‫dan kemudian URL yang akan kita buat di sini dalam sedetik.
‫Jadi const url sama, mari kita masukkan ke nol, untuk saat ini.
‫Oke, lalu kirimSelamat datang.
‫Dan sekarang yang perlu kita lakukan hanyalah
‫menunggu fungsi sendWelcome ini.
‫Baiklah, jadi kami melakukan itu, bahwa kami
‫hanya melanjutkan di sini ke langkah berikutnya setelah email benar-benar terkirim.
‫Dan kita bisa melakukannya,
‫tentu saja, karena sendWelcome adalah fungsi async, ingat itu.
‫Jadi ketika kita benar-benar
‫menggunakannya, kita kemudian menunggu sampai selesai.
‫Baiklah, jadi hanya ini yang perlu
‫kita lakukan untuk mengirim email
‫sekarang, tetapi kita masih perlu menentukan URL kita di sini.
‫Sekarang, URL apa yang sebenarnya kita inginkan di sini?
‫Nah, ingat bahwa
‫di sini pada tombol itu tertulis Upload_user_photo, kan?
‫Jadi pada dasarnya, kami
‫ingin menunjuk ke halaman akun pengguna itu.
‫Jadi, pada dasarnya, di sini.
‫Jadi untuk saat ini, mari kita salin, tetapi kemudian kita akan mengubahnya.
‫Dan kita bisa membiarkannya
‫seperti ini tetapi kemudian itu hanya akan
‫berfungsi dalam pengembangan dan bukan produksi, karena, tentu
‫saja, ini di sini tidak ada saat kita dalam produksi.
‫Jadi alih-alih pada dasarnya mengkodekan keras seperti ini, kami akan
‫mendapatkan data ini dari permintaan.
‫Jadi pada dasarnya, kita akan mendapatkan protokol apa yang
‫kita gunakan, jika kita menggunakan HTTP atau HTTPS, dan juga host ini.
‫Oke, dan keduanya bisa kita dapatkan dari request.
‫Jadi mari kita ganti semua ini di sini
‫dan jadikan ini string
‫template dan kemudian kita bisa mengatakan request. protokol kemudian titik dua,
‫garis miring, garis miring,
‫dan kemudian permintaan. Dapatkan.
‫Jadi kita perlu menggunakan fungsi
‫getter ini dan yang ingin kita dapatkan adalah hostnya.
‫Jadi ketika kita dalam
‫pengembangan, tentu saja, ini akan menjadi host lokal
‫di port 3000.
‫Oke jadi mari kita menghiburnya
‫hanya untuk memastikan.
‫Oke, dan sekarang, mari kita benar-benar mengujinya.
‫Dan yang perlu kita lakukan untuk itu hanyalah membuat pengguna baru.
‫Jadi mari kita lakukan itu di sini di Postman.
‫Jadi Daftar, dan sekarang
‫di Tubuh kita, mari kita buat nama baru, katakanlah
‫Pengguna Uji.
‫Dan di sini, semua ini tidak terlalu penting, jadi
‫katakan saja test@natours. io dan dengan
‫kata sandi standar yang sama.
‫Jadi sekarang ketika kita membuat pengguna baru ini,
‫maka kita harus memasukkan email baru ke dalam Mailtrap kita,
‫sehingga kita bisa melihatnya.
‫Jadi mari kita coba itu dan kami mendapat beberapa kesalahan yang bagus di sini.
‫Jadi mari kita lihat itu.
‫Dan dikatakan tidak dapat menemukan file ini.
‫Jadi ada beberapa kesalahan dalam penangan email kami di sini.
‫Jadi mari kita coba mencari di mana itu.
‫Ah, di bawah sini.
‫Jadi masalahnya adalah folder di sini
‫bernama email dan di sini saya menyebutnya email.
‫Jadi anggap saja email, saya lebih
‫suka yang itu.
‫Dan sekarang seharusnya berhasil.
‫Oh, dan sekarang kita mendapatkan
‫kesalahan berikutnya, karena email ini di sini sudah ada.
‫Dan itu karena pada langkah
‫sebelumnya, kami benar-benar membuat kesalahan, satu-satunya masalah
‫adalah pengiriman email.
‫Jadi mari kita lakukan itu lagi di sini, uji dua.
‫Dan satu kesalahan lagi.
‫Kali ini datang langsung dari Pug.
‫Jadi, hanya blok dan mixin bernama yang dapat muncul di tingkat atas
‫templat yang diperluas.
‫Dan ada sesuatu yang
‫salah di sini, dan memang begitu.
‫Jadi itu sebenarnya kesalahan
‫yang dikatakan kepada kami bahwa kami hanya dapat memperpanjang dan
‫memblokir tetapi di sini kami memiliki
‫paragraf ini juga di tingkat atas.
‫Jadi itu tidak diperbolehkan.
‫Jadi mari kita letakkan di tempatnya, yang ada di sini.
‫Simpan itu, coba sekali lagi, dan tentu saja sekarang
‫kita mendapatkan kesalahan ini.
‫Jadi katakanlah tes tiga.
‫Oke, sekarang kita baik untuk pergi.
‫Jadi kita berhasil membuat user baru,
‫dia sudah login.
‫Dan sekarang mari kita lihat Mailtrap untuk melihat
‫apakah kita benar-benar mendapatkan email kita.
‫Jadi Mailtrap.
‫Biarkan saya masuk di sini dengan sangat cepat.
‫Dan inilah kotak masuk Natours kami,
‫dan memang, inilah email baru dari beberapa menit yang
‫lalu yang mengatakan selamat datang di keluarga Natours.
‫Besar.
‫Dan itu benar-benar terlihat sangat bagus, bukan?
‫Jadi itu semua teks yang kami miliki di template kami.
‫Kita juga bisa melihat HTML lengkapnya di sini.
‫Juga di sini kita memiliki teks.
‫Dan ingatlah bahwa kami membuat yang ini di
‫sini dari paket HTML ke teks
‫dan kami dapat mengonfirmasi bahwa itu berfungsi dengan baik juga.
‫Dan, eh, ya.
‫Coba saja klik di sini pada
‫tombol ini, dan memang itu membawa kita ke halaman akun kita.
‫Sekarang, saat ini kami sebenarnya masuk sebagai Aarav
‫karena kami sudah masuk sebagai pengguna itu tetapi
‫bukan itu intinya
‫karena email ini di sini
‫agaknya mengandaikan Anda mendaftar dari situs web, bukan?
‫Sekarang, itu tidak berfungsi pada saat
‫ini, jadi kami tidak memiliki formulir pendaftaran di situs
‫web kami tetapi bagian yang sangat penting
‫di sini adalah bahwa email kami di sini sekarang berfungsi dengan baik, tombol
‫di sini juga berfungsi.
‫Dan penangan email besar yang
‫kami buat di kuliah terakhir melakukan tugasnya seperti
‫halnya template email yang kami buat
‫di video ini.
‫Jadi, saya sangat senang dengan hasil ini.
‫Selanjutnya, mari kita lakukan hal serupa untuk
‫email pengaturan ulang kata sandi.