Prasyarat
Agar bisa mengikuti dan memahami tutorial ini, Anda harus memiliki pengetahuan dasar tentang aplikasi Node.js dan Express.js. Selain itu, pastikan Anda sudah menyelesaikan langkah-langkah dasar dalam panduan kami untuk memulai di dokumentasi WhatsApp. Jika Anda adalah penyedia solusi bisnis (BSP), ikuti panduan BSP kami dan pastikan aplikasi Anda lulus proses peninjauan.
Pastikan Anda sudah menyiapkan tiga hal berikut:
- ID WhatsApp Business.
- ID nomor telepon atau ID telepon tes.
- Token pengguna sistem Anda dengan izin yang diperlukan di bawah ini:
(whatsapp_business_management, whatsapp_business_messaging, dan business_management).
Jika ingin melihat aplikasi akhir, Anda bisa melihat kode proyek akhir.
Membuat Aplikasi Dasar
Untuk demonstrasi ini, Anda akan menggunakan server Node.js dan Express.js skeleton dasar ini bersama dengan dependensi yang diperlukan dan fungsi skeleton yang sudah dibuat.
Tutorial ini juga mencakup paket permintaan untuk melakukan permintaan HTTP saat aplikasi Anda berkomunikasi dengan API. Ada dua variabel dalam file .env aplikasi:
META_AUTH_TOKEN dan MESSAGING_PRODUCT.
Setelah menyiapkan server, Anda bisa langsung membuat API.
Mengunggah Gambar untuk Pesan Media
Sebelum Anda dapat mengirim pesan berbasis media apa pun menggunakan WhatsApp, Anda harus mengunggah media agar WhatsApp dapat mengaksesnya nanti. File media yang diunggah ke WhatsApp akan disimpan selama 30 hari kecuali Anda menghapusnya.
Anda perlu membuat rute POST baru di dalam file routes/media.js yang bisa Anda gunakan untuk mengelola media. Menurut dokumentasi, Anda perlu meneruskan empat item:
- ID nomor telepon, yang Anda teruskan sebagai parameter.
- File yang ingin Anda unggah, yang Anda teruskan sebagai data formulir.
- Jenis unggahan file, yang Anda buat menggunakan fungsi bantuan.
- Produk pengiriman pesan, yang Anda dapatkan dari file .env.
Saat membuat panggilan API, Anda hanya memerlukan ID nomor telepon dan file. Kolom lainnya yang Anda buat menggunakan fungsi bantuan.
Anda menggunakan paket npm formidable untuk memproses data formulir. Harap diperhatikan bahwa WhatsApp Business API memiliki beberapa batasan jenis dan ukuran tertentu yang bisa dilihat di bagian Jenis Media yang Didukung di bagian bawah dokumentasi Media. Ada dua fungsi bantuan dalam file helper/validations.js di proyek kerangka untuk mengatasinya.
Untuk mengunggah gambar, Anda perlu menginisialisasi formulir yang baru. Menggunakan objek formulir, parse file, dan lakukan beberapa validasi menggunakan fungsi bantuan. Selanjutnya, lakukan permintaan POST dengan data formulir dan token autentikasi yang valid menggunakan permintaan tersebut.
exports.uploadMedia = async (req, res) => { let form = new formidable.IncomingForm(); form.keepExtensions = true; form.parse(req, async (err, fields, files) => { if (err) { return res.status(400).json({ error: "Media could not be uploaded", }); } if (!files.file) { return res.status(400).json({ error: "Media File is required", }); } let isFileValidSize = validateMediaSize(files.file.size, files.file.type); if (!isFileValidSize) { return res.status(400).json({ error: `Media File size should be less than ${mediaLimits( files.file.type )}`, }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/media`, formData: { file: { value: fs.createReadStream(files.file.path), options: { filename: files.file.name, contentType: files.file.type, }, }, type: files.file.type, messaging_product: process.env.MESSAGING_PRODUCT, }, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "multipart/form-data", }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); }); };Setelah menambahkan fungsi ini, Anda dapat menguji rute ini menggunakan Postman. Seperti inilah tampilan objek akhir di antarmuka Postman:
Setelah mengklik Kirim, Anda mendapatkan ID media unggahan sebagai tanggapan dari API.
Catat ID media unggahan karena kita akan menggunakannya nanti dalam tutorial ini. Jika Anda membuat aplikasi dengan layer data, Anda dapat menyimpan ID ini di database Anda untuk digunakan nanti. Atau, aplikasi front-end Anda dapat menyimpan ID untuk sementara dalam variabel atau negara bagian.
Mengirim Pesan Media
Sekarang, gunakan ID media yang Anda ambil di langkah sebelumnya untuk mengirim pesan media kepada pelanggan. Menurut referensi API, Anda harus mengirim lima item ke API agar berhasil mengirim pesan media ke pelanggan:
- ID nomor telepon yang diteruskan sebagai parameter
- Nomor telepon pelanggan yang dikirimkan dalam isi permintaan
- Jenis media yang dikirim dalam badan permintaan
- ID media yang dikirim dalam bodi permintaan
- Jenis Penerima, dalam hal ini adalah individu
Fungsinya terlihat seperti ini:
exports.sendMediaMessage = async (req, res) => { const { id, to, type } = req.body; if (!id || !to || !type) { return res.status(400).json({ error: "Required Fields: to, type and id", }); } request.post( { url: `https://graph.facebook.com/v13.0/${req.params.id}/messages`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, "content-type": "application/json", }, body: `{ "messaging_product": "whatsapp", "recipient_type": "individual", "to": "${to}", "type": "${type}", "${type}": { "id": "${id}", }, }`, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Jika Anda menjalankan endpoint ini di Postman, dengan detail dan argumen yang diperlukan, begini tampilannya.
Setelah mengirim, Anda melihat output berikut di Postman, yang juga menyertakan ID pesan.
Melihat Item Media
Mengambil URL media bisa dilakukan dengan mudah menggunakan operasi GET dan ID media yang diambil atau disimpan.
exports.getMediaUrl = async (req, res) => { request.get( { url: `https://graph.facebook.com/v13.0/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Ini tampilan permintaan dan tanggapan Postman setelah berhasil mengambil item media.
Menghapus Media
Untuk menghapus media, Anda akan menggunakan endpoint WhatsApp API yang sama untuk permintaan media dengan operasi DELETE.
exports.deleteMedia = async (req, res) => { request.delete( { url: `https://graph.facebook.com/v13.0/${req.params.id}`, headers: { Authorization: `Bearer ${process.env.META_AUTH_TOKEN}`, }, }, function (err, resp, body) { if (err) { console.log("Error!"); } else { res.json(JSON.parse(body)); } } ); };Setelah penghapusan media berhasil, API mengirimkan tanggapan berikut:
Pelajari Selengkapnya tentang Platform WhatsApp Business
Tutorial ini hanyalah satu contoh dari banyak hal yang bisa Anda lakukan dengan Platform WhatsApp Business. Saat Anda merencanakan proyek berikutnya, baca dokumentasi Platform WhatsApp Business agar memahami sepenuhnya fungsi dan keterbatasan medianya.
Pastikan Anda selalu mengingat hal-hal berikut:
- Media yang diunggah hanya bertahan selama tiga puluh hari
- URL unduhan yang dibuat hanya bertahan selama lima menit
- Selalu simpan ID media saat Anda mengunggah file
Berikut adalah daftar jenis media yang didukung saat ini. Lihat Jenis Media yang Didukung untuk informasi selengkapnya.
- Audio (<16 MB) – Format ACC, MP4, MPEG, AMR, dan OGG
- Dokumen (<100 MB) – format teks, PDF, Office, dan Open Office
- Gambar (<5 MB) – format JPEG dan PNG
- Video (<16 MB) – format MP4 dan 3GP
- Stiker (<100 KB) – Format WebP
Kesimpulan
Platform WhatsApp Business bisa memberi peluang untuk berinteraksi dengan pelanggan menggunakan perpesanan media yang beragam. Dengan membangun aplikasi berbasis API, Anda bisa mengumpulkan dan membangun galeri media yang bisa dimanfaatkan pengguna untuk mengirim pesan secara konsisten dan efisien, sehingga mengurangi pekerjaan yang berulang.
Cek portal developer WhatsApp dan mulai buat aplikasi sekarang juga untuk melihat fitur lain yang sudah tersedia.
