Lesson 2 / 7 · 12 min

Menyambung ke WhatsApp Cloud API

App Meta, nomor tes, verifikasi webhook, menerima pesan, mengirim balasan. Checkpoint: echo bot yang bekerja.

Langkah 1: sisi Meta

Di developers.facebook.com buat app, tambahkan produk WhatsApp, dan buka API Setup. Meta memberi nomor telepon tes gratis; salin dua nilai ke .env: access token sementara (WHATSAPP_TOKEN) dan Phone number ID (PHONE_NUMBER_ID). Tambahkan nomor WhatsApp Anda sendiri sebagai penerima terverifikasi, nomor tes bisa mengirim ke maksimal lima.

Langkah 2: verifikasi webhook (server.js)

import "dotenv/config";
import express from "express";

const app = express();
app.use(express.json());

// Meta calls this ONCE when you save the webhook URL.
// Echo the challenge back if the verify token matches.
app.get("/webhook", (req, res) => {
  const mode = req.query["hub.mode"];
  const token = req.query["hub.verify_token"];
  const challenge = req.query["hub.challenge"];
  if (mode === "subscribe" && token === process.env.VERIFY_TOKEN) {
    return res.status(200).send(challenge);
  }
  res.sendStatus(403);
});

app.listen(process.env.PORT, () =>
  console.log("bot listening on port " + process.env.PORT),
);

Jabat tangan verifikasi. Tanpa handler GET persis ini, Meta menolak mendaftarkan webhook Anda.

Langkah 3: terima pesan

// server.js (below the GET handler)
app.post("/webhook", (req, res) => {
  res.sendStatus(200); // ack immediately, always

  const value = req.body?.entry?.[0]?.changes?.[0]?.value;
  const msg = value?.messages?.[0];
  if (!msg || msg.type !== "text") return;

  console.log("from " + msg.from + ": " + msg.text.body);
});

Event masuk bersarang dalam; dua baris optional-chaining ini menarik satu pesan yang penting.

Langkah 4: kirim balasan (wa.js)

export async function sendText(to, body) {
  const url =
    "https://graph.facebook.com/v21.0/" +
    process.env.PHONE_NUMBER_ID +
    "/messages";
  const res = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: "Bearer " + process.env.WHATSAPP_TOKEN,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      messaging_product: "whatsapp",
      to,
      text: { body },
    }),
  });
  if (!res.ok) console.error("send failed:", await res.text());
}

Satu fungsi yang dipakai ulang seisi kursus: POST ke Graph API dengan token, penerima, dan teks Anda.

Langkah 5: tunnel dan sambungkan

# terminal 1
node server.js

# terminal 2
ngrok http 3000
# copy the https URL, e.g. https://abc123.ngrok-free.app

# In the Meta console -> WhatsApp -> Configuration:
#   Callback URL:  https://abc123.ngrok-free.app/webhook
#   Verify token:  the VERIFY_TOKEN from your .env
#   Subscribe to the "messages" field

ngrok memberi laptop Anda alamat HTTPS publik supaya Meta bisa menjangkaunya selama development.

Checkpoint: import sendText ke server.js dan di dalam handler POST panggil sendText(msg.from, "Anda menulis: " + msg.text.body). Kirim pesan ke nomor tes dari ponsel Anda. Kalau bot membalas gema, seluruh pipa bekerja: WhatsApp ke Meta ke ngrok ke kode Anda dan kembali. Setelah ini semuanya tinggal logika.

Yang Anda dapatkan

Nomor tes memberi API resmi sungguhan secara gratis, ke 5 penerima
GET /webhook menjawab tantangan verifikasi sekali-jalan dari Meta
POST /webhook ack cepat, lalu mem-parse entry/changes/value/messages
sendText() membungkus kirim Graph API; echo bot membuktikan seluruh pipa

Sumber terkurasi

Referensi pilihan untuk mendalami lebih jauh, direview oleh tim kami.

Layanan Etzal terkaitChatbot WhatsApp AIMau dikerjakan untuk Anda? Lihat caranya.

Lesson sebelumnya1. Apa yang kita bangun, dan setup proyeknya Lesson berikutnya3. Session dan state machine alur pesanan