Email adalah metode penting komunikasi bisnis yang sangat cepat, murah, dan organik bebas top. Saat membuat produk, email dapat sangat membantu bisnis Anda dengan media yang efektif dan efisien untuk mengirimkan berbagai jenis data, secara elektronik.
Pada artikel ini, kita akan mempelajari cara membuat formulir untuk mengirim email menggunakan layanan Mailgun. Untuk aplikasi frontend, kami akan menggunakan React, di backend, kami akan menggunakan Node.js, untuk membuat permintaan asinkron, kami akan menggunakan Axios, dan untuk menampilkan notifikasi, kami akan menggunakan paket React-Toastify . Pada akhirnya, kita seharusnya membuat layanan email yang berfungsi seperti ini:
Catatan: Anda bisa mendapatkan akses ke repositori untuk proyek ini yang akan Anda buat sedikit demi sedikit hari ini, dan bermain-main dengan penerapannya menggunakan ini tautan di GitHub.
Mari kita mulai!
Pengaturan Proyek
Hal pertama yang akan kita buat hari ini adalah aplikasi frontend, menggunakan React.
Memulai dengan pustaka React sangatlah mudah karena menyertakan file JavaScript (CDN) ke dalam file HTML. Tetapi untuk aplikasi dunia nyata dan skala besar, React CLI adalah cara yang lebih baik untuk memulai. Kami akan menggunakan React CLI dalam tutorial kami hari ini.
Pada artikel ini kita akan menggunakan alat CLI yang dibuat oleh tim React untuk membantu memfasilitasi pengembangan cepat aplikasi React. Untuk menginstal React CLI, jalankan perintah berikut –
npm install -g create-react-app
.
Sekarang, mari kita buat proyek dan beri nama react-node-email-app
, dengan menggunakan perintah di bawah ini:
$ npx create-react-app react-node-email-app
Ini akan membuat template awal untuk membangun proyek kita. Anda dapat melihat template ini dengan masuk ke direktori proyek Anda dan kemudian menjalankan server pengembangan:
$ cd react-node-email-app
$ yarn start
Kami kemudian dapat melihat frontend kami di browser di localhost:3000
.
Membangun UI Proyek
Sekarang, kita dapat mulai membangun frontend aplikasi. Kita akan mulai dengan membuat formulir untuk mengirim email.
Kami akan melakukan ini di App.js
file, sehingga diperbarui menjadi:
import './App.css';
import { useState } from 'react'; function App() { const = useState('') const [subject, setSubject] = useState('') const [message, setMessage] = useState('') return ( <div className="App"> <section> <form> <h1>Send Email</h1> <div className='form-wrapper'> <div> <label htmlFor='email'>Email Address</label> <input onChange={(e)=>setEmail(e.target.value)} type="email" id="email"></input> </div> <div> <label htmlFor='subject'>Email Subject</label> <input onChange={(e)=>setSubject(e.target.value)} type="text" id="subject"></input> </div> <div> <label htmlFor='message'>Message Body</label> <textarea onChange={(e)=>setMessage(e.target.value)} type="text" id="message"></textarea> </div> <div> <button type='submit'>Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Di sini kami telah membuat formulir dengan tiga bidang input, satu untuk memasukkan email penerima, satu lagi untuk subjek email, dan yang terakhir untuk memasukkan pesan utama email.
Di berbagai kolom input, kami telah menyiapkan status untuk menangani perubahan di kotak input – untuk menangkap setiap perubahan yang dilakukan saat pengguna memasukkan karakter ke dalam kolom input menggunakan onChange
pendengar acara.
Kami juga telah membuat tombol untuk tujuan pengiriman email.
Untuk mempercantik bentuk, kami telah memperbarui App.css
file dengan gaya CSS berikut, sehingga isinya terlihat seperti ini:
.App { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #282c34;
}
.App section form { min-width: 25rem; margin: 0 auto; border: solid 1px #bdbdbd; border-radius: 8px; padding: 2rem;
}
form h1 { text-align: center; color: #ffffff;
}
form .form-wrapper { margin: 0 auto;
} form .form-wrapper > div { margin-bottom: 1rem;
}
form .form-wrapper > div > label { margin-bottom: 0.5rem; color: #ffffff; display: block;
}
form .form-wrapper > div > input, form .form-wrapper > div > textarea { padding: 0.5rem; border-radius: 4px; border: none; outline: none; min-width: 20rem; font-family: Arial, Helvetica, sans-serif;
}
form .form-wrapper > div > button { padding: 1rem 2.5rem; color: white; background: rgb(4, 144, 199); border-radius: 4px; border: none; cursor: pointer;
}
Untuk meningkatkan kinerja aplikasi, an onSubmit
fungsi event handler harus didefinisikan pada elemen form untuk mencegah perilaku default form yang benar-benar me-refresh halaman saat tombolnya diklik. Tidaklah ideal jika halaman kita disegarkan saat tombol diklik karena kami mengirimkan permintaan di latar belakang, yang merupakan pengalaman yang lebih baik bagi pengguna.
Ini juga ideal bahwa pengguna tidak dapat mengirim email jika dia belum memasukkan email, subjek, atau pesan apa pun. Untuk itu, kita harus melakukan beberapa validasi input untuk memeriksa apakah field tersebut kosong. Jika ya, kami mengembalikan kesalahan dengan pesan "Harap isi email, subjek, dan pesan".
Untuk melakukan ini, kami menggunakan bersulang paket dalam aplikasi kita. Kita perlu menginstalnya dengan menjalankan perintah berikut di terminal proyek:
$ yarn add react-toastify
Selanjutnya, perbarui App.js
pada pengatur terkenal. Pengatur ini menawarkan bantuan hukum kepada traderapabila trader berselisih dengan broker yang terdaftar dengan mereka. submitHandler
fungsi:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import 'react-toastify/dist/ReactToastify.css' function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button type="submit">Send Email</button> </div> </div> </form> </section> </div> );
} export default App;
Sekarang, setiap kali pengguna mengklik tombol untuk mengirim email, tanpa mengisi terlebih dahulu alamat email, subjek email, dan kolom input pesan, pesan toast meminta dia untuk melakukan semua yang diperlukan.
Karena kita juga membutuhkan axios
perpustakaan untuk membuat permintaan AJAX, kita juga perlu menginstalnya:
$ yarn add axios
Selanjutnya, buat a try/catch
blok untuk menangani permintaan asinkron untuk mengirim email.
App.js
sekarang diperbarui menjadi:
import "./App.css";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import axios from "axios"; function App() { const = useState(""); const [subject, setSubject] = useState(""); const [message, setMessage] = useState(""); const [loading, setLoading] = useState(""); const submitHandler = async (e) => { e.preventDefault(); if (!email || !subject || !message) return toast.error( "Please make sure to fill the email address, email subject, and message" ); try { setLoading(true); const { data } = await axios.post(`/api/email`, { email, subject, message, }); setLoading(false); toast.success(data.message); } catch (error) { setLoading(false); toast.error( error.response && error.response.data.message ? error.response.data.message : error.message ); } }; return ( <div className="App"> <section> <ToastContainer position="top-center" limit={1} /> <form onSubmit={submitHandler}> <h1>Send Email</h1> <div className="form-wrapper"> <div> <label htmlFor="email">Email Address</label> <input onChange={(e) => setEmail(e.target.value)} type="email" id="email" ></input> </div> <div> <label htmlFor="subject">Email Subject</label> <input onChange={(e) => setSubject(e.target.value)} type="text" id="subject" ></input> </div> <div> <label htmlFor="message">Message Body</label> <textarea onChange={(e) => setMessage(e.target.value)} type="text" id="message" ></textarea> </div> <div> <button disabled={loading} type="submit"> {loading ? "Sending..." : "Send Email"} </button> </div> </div> </form> </section> </div> );
} export default App;
Membangun Aplikasi Backend menggunakan Node
Pada titik ini, kami telah berhasil mengimplementasikan frontend aplikasi. Selanjutnya, kita akan mulai mengerjakan backend menggunakan Node.
Pertama, buat direktori baru di root proyek yang disebut backend
.
Sekarang, cd
ke direktori backend dan jalankan npm init
dari terminal untuk mulai membuat aplikasi Node.
$ npm init --y
Lihat panduan praktis dan praktis kami untuk mempelajari Git, dengan praktik terbaik, standar yang diterima industri, dan termasuk lembar contekan. Hentikan perintah Googling Git dan sebenarnya belajar itu!
Note: Para --y
option memberi tahu NPM untuk menjawab "ya" untuk semua pertanyaan yang diajukan oleh init
memerintah. Ini pada dasarnya memberi Anda pengaturan default untuk Anda package.json
file.
Ini menciptakan a package.json
file yang memungkinkan pengelolaan dependensi aplikasi proyek backend.
Selanjutnya, instal paket-paket berikut:
express
: Membuat server webdotenv
: Membaca data konfigurasi dan berfungsi sebagai cara terbaik untuk menjauhkan data sensitif dari kode yang dapat diaksesmailgun-js
: Mengaktifkan pengiriman email menggunakan Mailgun
$ yarn add express dotenv mailgun-js
Dengan paket-paket ini sekarang terinstal, buat dua file baru server.js
dan .env
dalam backend
folder.
Dalam majalah .env
file, kami akan menyimpan domain dan kunci API untuk Mailgun.
Membangun server
Dalam server.js
file, tujuannya adalah membuat server menggunakan Express.js. Di sana, kami mengimpor express
, dotenv
, dan mailgun-js
paket.
server.js
diperbarui menjadi:
const express = require("express");
const dotenv = require("dotenv");
const mg = require("mailgun-js"); dotenv.config(); const mailgun = () => mg({ apiKey: process.env.MAILGUN_API_KEY, domain: process.env.MAILGUN_DOMAIN, });
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true })); app.post("/api/email", (req, res) => { const { email, subject, message } = req.body; mailgun() .messages() .send( { from: "John Doe <>", to: `${email}`, subject: `${subject}`, html: `<p>${message}</p>`, }, (error, body) => { if (error) { console.log(error); res.status(500).send({ message: "Error in sending email" }); } else { console.log(body); res.send({ message: "Email sent successfully" }); } } );
}); const port = process.env.PORT || 4000;
app.listen(port, () => { console.log(`App is served at port ${port}`);
});
Di sini, kami telah memanggil mg
fungsi dan ditugaskan untuk mailgun
. di mg
fungsi, kami meneruskan kunci API dan domain dari variabel lingkungan dan menggunakan mailgun
untuk mengirim email.
Setelah itu, aplikasi Express dibuat, dan dua middleware express.json()
dan express.urlencoded
digunakan untuk mendapatkan payload menggunakan Express dari permintaan API dan mengubahnya menjadi req.body
.
Selanjutnya, a POST
rute dengan jalan /api/email
dibuat, dan di dalamnya, fungsi untuk menerima permintaan dan respons ditentukan. Email, subjek, dan pesan kemudian dapat diekstrak dari req.body
obyek. Ini adalah data yang dimasukkan pengguna dari kolom input pada aplikasi frontend.
Setelah ini diekstrak, file messages
metode dari mailgun
fungsi awalnya diatur dipanggil, setelah itu send
metode disebut. Dalam metode kirim, objek yang menyimpan properti berikut akan diteruskan:
from
: Nama yang dilihat pengguna di bagian "dari" email.to
Alamat email tujuan pengiriman email (email yang dimasukkan di kolom input).subject
: Subjek masuk.html
: Markup HTML yang menentukan pesan yang akan dikirim ke alamat email.
Parameter kedua dilewatkan dalam send
metode adalah fungsi yang menerima kesalahan dan tubuh. Dalam fungsi ini kita console.log
kesalahan, setel kode status ke 500
, dan kirim pesan yang mengatakan "Kesalahan dalam mengirim email". Kalau tidak, kami mencatat badan dan mengirim pesan yang mengatakan "Email berhasil dikirim" jika berhasil.
Di akhir file, kami mendapatkan port dari .env
mengajukan dan menelepon app.listen()
untuk memulai server.
Menentukan kunci API
Langkah pertama untuk menentukan kunci API untuk menggunakan Mailgun di aplikasi Anda adalah membuat akun gratis, yang menurut mereka membutuhkan waktu 57 detik. situs resmi.
Setelah Anda membuat akun, kunci API untuk akun yang Anda buat akan dikirimkan kepada Anda, sementara Anda bisa mendapatkan akses ke domain dengan menavigasi ke tab pengiriman di nav samping dasbor.
Salin tautan kotak pasir dan kunci API dan tetapkan nilainya di .env
file, seperti yang telah saya lakukan untuk milik saya:
// ./backend/.env MAILGUN_API_KEY=12345678901234567890123456789012-12345678-12345678
MAILGUN_DOMAIN=sandboxabcdefghijklmnopqrstuvwxyz.mailgun.org
Selanjutnya, kembali ke halaman ikhtisar domain dengan mengklik tautan. Halaman akan terlihat seperti ini:
Di sana, di sisi kanan halaman, masukkan alamat email yang ingin Anda uji pengiriman emailnya – untuk membuat penerima resmi.
Mengklik tombol "Simpan Penerima" akan memicu email yang terlihat seperti di bawah ini, untuk dikirim:
Klik tombol "Saya Setuju", dan Anda akan dialihkan ke halaman eksternal:
Klik tombol “Ya” untuk melanjutkan mengaktifkan alamat penerima. Sekarang alamat tersebut dapat mulai menerima email melalui Mailgun.
Akhirnya, kami berhasil menyiapkan Mailgun dan membangun backend menggunakan Node.
Sekarang, Anda dapat menjalankan server Express dengan menjalankan kode berikut dari direktori backend:
$ node server.js
Menghubungkan Aplikasi Node ke Aplikasi React
Untuk menghubungkan frontend ke backend, pergilah ke package.json
file yang terletak di direktori root proyek untuk aplikasi React. Kemudian, di bawah name
properti, tambahkan properti baru bernama proxy
, yang seharusnya memiliki nilai port untuk server backend. Seharusnya terlihat seperti ini:
"proxy": "http://localhost:4000/"
Dengan itu ditambahkan, semua permintaan asinkron yang kami buat dari frontend dialihkan ke server backend yang telah kami buat.
Mulai ulang server pengembangan frontend untuk memuat ulang aplikasi.
Silakan menguji semua penerapan kami sejauh ini, dengan memasukkan alamat email (penerima yang Anda aktifkan sebelumnya), subjek email, dan pesan, lalu tekan tombol "Kirim". Ini harus menunjukkan bersulang sukses untuk mengatakan email itu berhasil.
Dan di kotak masuk alamat penerima, Anda juga akan menerima email, seperti yang saya lakukan:
Wrapping Up
Mengirim email tetap sangat berguna untuk kasus-kasus seperti menyetel ulang kata sandi, menyambut pengguna ke aplikasi Anda, mengonfirmasi pesanan, dll., Dan dalam artikel ini, kami telah mempelajari betapa mudahnya mengirim email di aplikasi Node.js menggunakan Mailgun . Kami melihat betapa mudahnya bekerja dengan Mailgun dan betapa ramah pengguna dan cepatnya membuat akun untuk memulai.
Lain kali Anda merasa perlu membangun infrastruktur email untuk proyek Anda, jangan ragu untuk memeriksa alat pengiriman email seperti Mailgun. Perlu bantuan menggunakan alat ini, jangan ragu untuk menghubungi saya, atau siapa pun di komunitas pengembang, saya yakin mereka akan membantu dengan senang hati.
Sumber Tambahan
- Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
- Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
- Sumber: https://stackabuse.com/sending-emails-in-node-js-with-mailgun-and-react/
- 1
- 7
- a
- Sanggup
- Setuju
- Menerima
- mengakses
- dapat diakses
- Menurut
- Akun
- sebenarnya
- menambahkan
- alamat
- Setelah
- di depan
- Waspada
- Semua
- dan
- Lain
- menjawab
- siapapun
- api
- KUNCI API
- aplikasi
- Aplikasi
- aplikasi
- sekitar
- artikel
- ditugaskan
- mobil
- Axios
- kembali
- Backend
- latar belakang
- menampar
- menjadi
- makhluk
- di bawah
- Lebih baik
- Bit
- Memblokir
- tubuh
- batas
- Kotak
- Browser
- membangun
- Bangunan
- dibangun di
- bisnis
- tombol
- panggilan
- bernama
- Bisa Dapatkan
- kasus
- gulat
- pusat
- perubahan
- karakter
- murah
- memeriksa
- kode
- Komunikasi
- masyarakat
- konfigurasi
- Terhubung
- isi
- mengubah
- membuat
- dibuat
- menciptakan
- membuat
- CSS
- dasbor
- data
- hari
- Default
- didefinisikan
- Mendefinisikan
- mendefinisikan
- Pengembang
- Pengembangan
- MELAKUKAN
- domain
- setiap
- Terdahulu
- Efektif
- efisien
- secara elektronik
- memungkinkan
- Enter
- masuk
- Masuk
- Lingkungan Hidup
- kesalahan
- penting
- dasarnya
- dll
- Acara
- pengalaman
- ekspres
- luar
- memudahkan
- FAST
- bidang
- Fields
- File
- File
- mengisi
- Menemukan
- Pertama
- Fokus
- berikut
- bentuk
- bentuk
- Gratis
- dari
- Frontend
- fungsi
- mendapatkan
- mendapatkan
- gif
- pergi
- memberikan
- Go
- besar
- sangat
- membimbing
- menangani
- hands-on
- kepala
- membantu
- Memukul
- memegang
- melayang-layang
- Seterpercayaapakah Olymp Trade? Kesimpulan
- How To
- HTML
- HTTPS
- ICON
- ideal
- implementasi
- diimplementasikan
- mengimpor
- memperbaiki
- in
- termasuk
- Termasuk
- Infrastruktur
- mulanya
- memasukkan
- install
- diinstal
- IT
- JavaScript
- John
- JOHN DOE
- Menjaga
- kunci
- kunci-kunci
- besar-besaran
- Terakhir
- BELAJAR
- belajar
- pengetahuan
- LG
- Perpustakaan
- LINK
- pemuatan
- melihat
- terlihat seperti
- TERLIHAT
- terbuat
- Utama
- membuat
- Membuat
- pengelolaan
- medium
- pesan
- metode
- bergerak
- nama
- nav
- menavigasi
- Perlu
- New
- simpul
- Node.js
- pemberitahuan
- obyek
- tujuan
- ONE
- pilihan
- urutan
- organik
- jika tidak
- ikhtisar
- paket
- paket
- parameter
- Lulus
- Kata Sandi
- path
- prestasi
- plato
- Kecerdasan Data Plato
- Data Plato
- Bermain
- silahkan
- Titik
- Praktis
- mencegah
- proses
- Produk
- proyek
- properties
- milik
- terlindung
- memberikan
- wakil
- tujuan
- Pertanyaan
- cepat
- RE
- mencapai
- Bereaksi
- dunia nyata
- menerima
- menerima
- sisa
- gudang
- permintaan
- permintaan
- wajib
- tanggapan
- kembali
- Cincin
- akar
- Rute
- Run
- berjalan
- bak pasir
- Save
- mengatakan
- Kedua
- detik
- Bagian
- mengirim
- peka
- melayani
- layanan
- set
- pengaturan
- bayangan
- harus
- Menunjukkan
- ditunjukkan
- sisi
- Sederhana
- sejak
- So
- padat
- beberapa
- sesuatu
- Berputar
- penyalahgunaan
- standar
- awal
- mulai
- Negara
- Status
- Langkah
- berhenti
- subyek
- pengajuan
- menyerahkan
- sukses
- sukses
- berhasil
- seperti itu
- SVG
- Dibutuhkan
- target
- tim
- mengatakan
- Template
- terminal
- uji
- Grafik
- Kotak Pasir
- mereka
- didalamnya
- hal
- tiga
- Melalui
- waktu
- untuk
- roti panggang
- hari ini
- terlalu
- alat
- alat
- transisi
- mengirimkan
- memicu
- benar
- tutorial
- bawah
- Memperbarui
- diperbarui
- us
- menggunakan
- Pengguna
- user-friendly
- Pengguna
- pengesahan
- nilai
- berbagai
- Ve
- View
- jaringan
- menyambut
- yang
- sementara
- putih
- akan
- tanpa
- Kerja
- bekerja
- akan
- XML
- Kamu
- Anda
- diri
- zephyrnet.dll