Tujuan Pembelajaran

Mampu mengirim email transactional via API (Resend, SendGrid, AWS SES)
Mampu membangun template email dengan React Email atau MJML
Mampu menangani bounce, complaint, dan menjaga reputasi pengirim

Analogi

Diagram


      Email Delivery = Mengirim Surat:

Tanpa setup benar:
Surat dikirim → masuk spam → user tidak lihat → akun tidak terverifikasi

Dengan setup benar:
1. SPF = "Surat ini benar dari kantor pos resmi" (verified sender)
2. DKIM = Tanda tangan digital (surat tidak dipalsukan)
3. DMARC = "Kalau SPF/DKIM gagal, buang suratnya" (policy)
4. Custom domain = kirim dari noreply@kamu.com (bukan @gmail.com)
5. Unsubscribe link = legal requirement
6. Bounce handling = kalau email tidak sampai, jangan kirim lagi

Email delivery perlu setup SPF, DKIM, DMARC, custom domain. Tanpanya, email masuk spam.

Penjelasan Konsep

Email adalah channel notifikasi paling fundamental — tapi deliverability bukan hal sepele.

Email provider: (1) Resend — modern, developer-friendly, React Email support, free tier 100/day. (2) SendGrid — enterprise, volume tinggi, template builder. (3) AWS SES — termurah ($0.10/1000 email), tapi setup lebih kompleks. (4) Postmark — fokus transactional, fast delivery.

Setup deliverability: (1) SPF (Sender Policy Framework) — DNS record yang menentukan server mana yang boleh kirim email atas nama domainmu. (2) DKIM (DomainKeys Identified Mail) — tanda tangan kriptografis di setiap email. Penerima verifikasi. (3) DMARC — policy untuk penerima: apa yang harus dilakukan kalau SPF/DKIM gagal? (none/quarantine/reject). (4) Custom domain — jangan kirim dari @gmail.com. (5) Warming — untuk domain baru, kirim volume rendah dulu, tingkatkan bertahap.

Bounce handling: (1) Hard bounce — email permanen tidak valid (address tidak ada). JANGAN kirim lagi — akan merusak reputasi. (2) Soft bounce — temporary (mailbox full, server down). Bisa retry 2-3x. (3) Complaint — user tandai sebagai spam. Langsung hentikan.

Email templates: Gunakan React Email (komponen React untuk email, render ke HTML) atau MJML (framework responsive email). Test di berbagai client (Gmail, Outlook, Apple Mail) — rendering email berbeda-beda.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu mengirim email transactional via API (Resend, SendGrid, AWS SES)., mampu membangun template email dengan React Email atau MJML., dan mampu menangani bounce, complaint, dan menjaga reputasi pengirim. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Email, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Email delivery perlu setup SPF, DKIM, DMARC, custom domain. Tanpanya, email masuk spam. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. From address pakai custom domain (noreply@kamu.com). List-Unsubscribe header = legal requirement di banyak negara. Webhook untuk track bounce & complaint — jangan terus kirim ke email yang bounce.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// Kirim email transactional dengan Resend
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

async function sendVerificationEmail(email: string, code: string) {
  const { data, error } = await resend.emails.send({
    from: 'menjadi.dev <noreply@menjadi.dev>',
    to: [email],
    subject: 'Verifikasi Email — menjadi.dev',
    html: `
      <h1>Verifikasi Email</h1>
      <p>Kode verifikasi kamu: <strong>${code}</strong></p>
      <p>Kode berlaku 15 menit.</p>
    `,
    headers: {
      'List-Unsubscribe': '<mailto:unsubscribe@menjadi.dev>',
    },
  });
  
  if (error) {
    console.error('Email gagal:', error);
    // TODO: retry atau log
  }
  
  return data;
}

// Webhook untuk bounce tracking
app.post('/api/webhooks/resend', async (c) => {
  const event = await c.req.json();
  if (event.type === 'email.bounced') {
    await markEmailAsBounced(event.data.email);
  }
  if (event.type === 'email.complaint') {
    await markEmailAsUnsubscribed(event.data.email);
  }
  return c.json({ ok: true });
});

Penjelasan Kode

From address pakai custom domain (noreply@kamu.com). List-Unsubscribe header = legal requirement di banyak negara. Webhook untuk track bounce & complaint — jangan terus kirim ke email yang bounce.

Prompt AI

Setup Resend untuk aplikasi-mu: verifikasi domain, SPF/DKIM/DMARC, kirim email verifikasi dengan template React Email, dan bounce handling webhook.

Pertanyaan Reflektif

Cek folder spam email-mu. Email dari aplikasi apa yang masuk spam? Kenapa? (Custom domain? SPF/DKIM? Reputasi pengirim?)