Integrasi Mailgen dan Sendinblue pada Aplikasi NodeJS untuk Mengirimkan Email Transaksional
Salah satu pengalaman saya mengirimkan email ke pengguna aplikasi cukup buruk melalui backend, yaitu saya harus menggunakan view template Jade/Pug, lalu mengirimkannya dengan akun Google Mail yang sudah dikonfigurasi sedemikian rupa untuk dapat digunakan dengan Nodemailer. Masalah yang saya dapati adalah mendesain dan melakukan debugging pada template email itu cukup rumit. Lalu, pernah ada suatu kasus dimana opsi “Allow Less Secure Apps” pada akun Google Mail yang saya miliki tiba-tiba nonaktif kembali dengan sendirinya, sehingga pada hari itu banyak email yang seharusnya dikirim namun gagal.
Setelah berkonsultasi dengan beberapa kolega di Hyperjump, saya akhirnya memutuskan untuk membuat mengirimkan email menjadi lebih mudah dengan dua hal, Mailgen dan Sendinblue.
Mailgen: Email Template yang Lebih Mudah
Mailgen adalah suatu package Node.js yang berguna untuk membuat email yang bersih dan responsive. Hanya dengan beberapa parameter saja, Anda bisa langsung membuat email dengan tampilan yang minimalistik dan elegan.
Sendinblue: Solusi SMTP yang Dapat Diandalkan
Sendinblue adalah sebuah Digital Marketing Tools yang salah satu fiturnya dapat digunakan untuk mengirimkan email transaksional. Sendinblue memiliki banyak sekali tools seperti CRM, Marketing Automation, dan sebagainya, namun pada artikel ini saya hanya akan memakai SMTP-nya saja.
Saat tulisan ini dibuat, Sendinblue memiliki Free Tier yang dapat digunakan untuk mengirimkan email sebanyak 300 email per hari dibandingkan layanan pihak ketiga lain seperti Sendgrid yang hanya bisa mengirim email sebanyak 100 per hari.
Anda sudah sedikit mengenali Mailgen dan Sendinblue, tanpa basa-basi, mari kita mulai implementasinya.
Implementasi
Seperti tutorial sebelumnya, Anda dapat menggunakan express-generator untuk inisiasi backend server:
npx express-generator --no-view mailgen-sendinblue-example Setelah itu, masuk ke dalam direktori proyek mailgen-sendinblue-example dan tambahkan Mailgen dan SDK Sendinblue pada proyek ini:
npm i && npm i --save mailgen sib-api-v3-sdkCatatan: Anda bisa memilih untuk memakai SDK atau melakukan Fetch ke API Sendinblue, namun untuk kali ini saya memilih untuk memakai SDK.
Persiapan proyek sudah selesai, sebelum terjun ke dalam kodingan, Anda sebaiknya mendaftarkan diri di website Sendinblue untuk mendapatkan API Key Anda. Pastikan Anda memilih paket Free Tier apabila Anda tidak ingin terkena biaya.
Apabila Anda sudah berhasil mendaftarkan diri dan masuk ke dalam Dashboard, Anda dapat memilih menu Transactional dan melihat tampilan seperti berikut:
Pada Dashboard Sendinblue, terdapat seluruh konfigurasi SMTP Server Sendinblue mulai dari SMTP Server, Port, Login dan Password. Pada tab sebelahnya, terdapat API Setting yang berisi API Key untuk menggunakan SDK Sendinblue yang sudah diinstall bersamaan dengan Mailgen pada tahap sebelumnya. Setelah Anda sudah menyimpan API Key Anda, mari kita lanjutkan ke kodingan.
PERHATIAN: Versi SDK Sendinblue dan Mailgen yang digunakan adalah 8.0.2 dan 2.0.14. Apabila Anda menggunakan versi yang berbeda, kemungkinan ada perbedaan cara mengirim email menggunakan Sendinblue atau membuat email dengan Mailgen.
Buka folder mailgen-sendinblue-example di editor kode favorit Anda, lalu buat folder baru di dalam mailgen-sendinblue-example yang bernama utils. Di dalam folder utils, tambahkan satu file bernama sendinblue.js dan tambahkan beberapa potongan kode sebagai berikut:
const SendInBlue = require("sib-api-v3-sdk");// Inisiasi
const defaultClient = SendInBlue.ApiClient.instance;
const apiKey = defaultClient.authentications["api-key"];
apiKey.apiKey = "API_KEY_SENDINBLUE_ANDA";// Membuat Instance untuk mengirim Email
const APIInstance = new SendInBlue.TransactionalEmailsApi();
const EmailInstance = new SendInBlue.SendSmtpEmail();// Fungsi Mengirim Email
function sendEmail(data, callback) {
EmailInstance.subject = data.subject;
EmailInstance.sender = data.sender;
EmailInstance.to = data.to;
EmailInstance.htmlContent = data.htmlContent;
APIInstance.sendTransacEmail(EmailInstance).then(
function (result) {
callback(null, JSON.stringify(result));
},
function (error) {
callback(error, null);
}
);
}module.exports = { sendEmail };
Potongan kode tersebut digunakan nanti ketika akan mengirimkan email menggunakan Sendinblue. Berikutnya, buka folder routes dan edit file index.js:Implementasi
var express = require("express");
var router = express.Router();
var Mailgen = require("mailgen");
var sendinblue = require("../utils/sendinblue");/* GET home page. */
router.get("/send-mail", async function (_, res) {
// Membuat Instance Mailgen
let mailGenerator = new Mailgen({
theme: "default",
product: {
// Membuat Header dan Footer Email
name: "Denny Pradipta",
link: "https://dennypradipta.com",
copyright: "© 2020 Denny Pradipta Projects",
},
}); // Membuat Isi Email
let email = {
body: {
greeting: "Halo",
name: "Denny Pradipta",
intro: ["Ini adalah Intro", "Ini juga Intro"],
action: {
instructions: `Kunjungi Website Denny Pradipta Projects`,
button: {
color: "#222222",
text: "Klik Disini",
link: `http://dennypradipta.com`,
},
},
outro: "Ini adalah Outro",
signature: "Salam hangat",
},
}; // Generate HTML untuk Email
let emailBody = await mailGenerator.generate(email); // Kirim Email
sendinblue.sendEmail(
{
subject: "Test Email",
sender: { name: "NAMA_ANDA", email: "EMAIL_ANDA" },
to: [{ email: "EMAIL_TUJUAN_ANDA" }],
htmlContent: emailBody,
},
function (error, result) {
if (error) console.log(error);
if (result) console.log(result);
}
); return res.status(200).send("OK");
});module.exports = router;
Secara bertahap, endpoint ‘/send-mail’ akan melakukan:
- Membuat instance email, dengan konfigurasi tema ‘default’, nama pengirim yaitu Denny Pradipta, URL pengirim yaitu dennypradipta.com, dan copyright untuk Footer. Nama dan URL pengirim dapat Anda ganti menjadi nama dan website perusahaan Anda
- Membuat isi email dengan mendefinisikan beberapa elemen seperti nama, intro, aksi, outro, dan signature. Untuk daftar elemen-elemen yang tersedia, Anda dapat melihatnya di https://github.com/eladnava/mailgen#elements
- Membuat email dalam bentuk HTML agar dapat dikirim menggunakan Sendinblue
- Mengirim email dengan Sendinblue, dengan mendefinisikan alamat email yang dituju, subjek email, HTML template yang sudah dibuat dengan Mailgen, dan email pengirim.
Untuk mengecek apakah email terkirim dengan benar, jalankan aplikasi dengan cara npm run start dan buka http://localhost:3000 pada browser Anda. Apabila sukses, maka akan muncul status OK pada browser dan segera cek email Anda.
Anda dapat mencoba bermain-main dengan banyak parameter yang disediakan oleh Mailgen maupun Sendinblue, atau mungkin Anda dapat mengganti Sendinblue dengan layanan pihak ketiga lainnya seperti Sendgrid atau Mailgun. Apabila Anda sudah cukup puas dengan kombinasi Mailgen dan Sendinblue, maka selamat!
Penutup
Mailgen adalah suatu package Node.js yang berguna untuk membuat email yang bersih dan responsive. Sedangkan Sendinblue adalah sebuah Digital Marketing Tools yang salah satu fiturnya dapat digunakan untuk mengirimkan email transaksional. Keduanya apabila disatukan, dapat memberikan layanan pengiriman email transaksional yang dapat diandalkan.
Mungkin Anda bertanya-tanya, “Mengapa harus Mailgen? Bukannya bisa pakai Email Template Creator bawaan dari Sendinblue?”. Salah satu faktornya adalah sebagai bentuk jaga-jaga apabila Anda memutuskan suatu hari untuk pindah dari Sendinblue ke layanan pihak ketiga lainnya, dan templatenya tidak bisa diimpor. Sure, mungkin Anda bisa membuat template dari awal lagi, tapi saya sih tidak mau repot membuat template dari awal, apalagi kalau jumlah templatenya sudah mencapai 50 atau lebih. Hidup ini gak cuma buat template.
Seperti biasa, there is always more than meets the eye. Masih banyak fitur-fitur dari Mailgen dan Sendinblue. Apabila Anda tertarik untuk mengulik lebih lanjut, Anda dapat mengunjungi Github Mailgen dan Sendinblue untuk membaca dokumentasinya. Apabila Anda ingin melihat seluruh sumber kodenya, Anda dapat mengunjungi Github saya di bawah ini:
Terima kasih telah membaca artikel ini sampai habis, sampai jumpa di artikel berikutnya!
Hyperjump is an open-source-first company providing engineering excellence service. We aim to build and commercialize open-source tools to help companies streamline, simplify, and secure the most important aspects of its modern DevOps practices.
