Integrasi Twilio API ke WhatsApp dengan Cloud Code di Back4App

11min
Menggunakan fungsi cloud untuk mengirim pesan WhatsApp melalui Twilio API
Pendahuluan
Dalam panduan ini, kami akan menjelaskan bagaimana Anda dapat menggunakan REST API Twilio yang disederhanakan untuk mengirim pesan WhatsApp dengan mudah. Setelah menyelesaikan tutorial ini, Anda dapat menggunakan fungsi kode cloud untuk mengirim pesan WhatsApp kepada pelanggan Anda. Jadi, mari kita mulai.
Prasyarat
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:


Sebuah aplikasi yang dibuat di Back4App.
Ikuti tutorial Membuat Aplikasi Baru untuk belajar bagaimana cara membuat aplikasi di Back4App.
Back4App Command Line yang dikonfigurasi dengan proyek.
Ikuti tutorial Menyiapkan Cloud Code untuk belajar bagaimana cara menyiapkan cloud code untuk sebuah proyek.
Akun yang dibuat di Twilio.
Mari kita mulai!
Seperti yang Anda ketahui, WhatsApp yang dimiliki oleh Facebook baru-baru ini meluncurkan versi pertama API untuk bisnis agar dapat terintegrasi dan berkomunikasi dengan pelanggan secara lancar. Dengan menggunakan layanan WhatsApp ini ke Bussiness API, perusahaan dapat mengirimkan notifikasi yang disesuaikan dengan pesan yang relevan dan tidak bersifat promosi, seperti konfirmasi pemesanan, pengingat janji, dan pemberitahuan pengiriman, kepada pelanggan yang telah mendaftar.
Twilio adalah platform komunikasi cloud yang menawarkan fitur yang kuat untuk berkomunikasi dan membuat prototipe dengan WhatsApp Bussiness API secara langsung. Untuk saat ini, Twilio API untuk WhatsApp masih dalam BETA dan hanya memungkinkan Anda untuk mengirim pesan teks kepada pengguna WhatsApp. Dengan kata lain, dengan layanan itu, belum memungkinkan untuk mengirim gambar, audio, video, dan file pdf kepada pengguna.
Fitur yang digunakan untuk mengirim atau menerima pesan WhatsApp kepada pengguna adalah “Twilio Sandbox”. Untuk mengirim pesan ke nomor WhatsApp pengguna, Anda perlu mengaktifkan sandbox terlebih dahulu, dan perlu mengaktifkan nomor yang akan bergabung dengan sandbox Anda. Pada langkah 1, kami akan menjelaskan bagaimana Anda dapat mengaktifkan Twilio Sandbox Anda untuk WhatsApp.
Catatan: Twilio Sandbox memiliki beberapa batasan, dan yang utama adalah Anda hanya dapat mengirim atau menerima pesan dari pengguna yang telah bergabung dengan sandbox spesifik Anda. Namun, batasan ini dapat diatasi jika Anda mengaktifkan WhatsApp menggunakan nomor Twilio Anda sendiri. Untuk mengaktifkan WhatsApp di nomor Anda sendiri, Anda perlu mengajukan permohonan persetujuan langsung di Twilio Console.
Dalam panduan ini, kami akan menjelaskan bagaimana Anda dapat menggunakan REST API sederhana untuk mengirim dan menerima pesan langsung di WhatsApp sambil menggunakan sebagai middleware. Kami akan menulis dan menerapkan Cloud Function yang akan berinteraksi dengan API Twilio untuk mengirim pesan tersebut. Setelah fungsi ini dipicu oleh peristiwa penyimpanan, kami menyebut fungsi ini sebagai AfterSave.
Untuk membuat atau mengakses Akun di Twilio, periksa tautan yang diberikan di bawah ini:
﻿Buat akun baru - Masuk ke akun Anda﻿
1 - Aktifkan WhatsApp Beta Anda
Setelah masuk ke akun yang ada, Anda akan diarahkan ke Proyek Anda. Namun, jika Anda adalah pengguna baru, Anda terlebih dahulu perlu membuat proyek dan memilih SMS yang dapat diprogram dari produk. Anda sekarang seharusnya melihat proyek yang baru dibuat di konsol Anda. Selanjutnya, Anda harus mengklik SMS yang dapat diprogram dan memilih opsi ke-4 WhatsApp Beta dan kemudian ikuti langkah-langkah yang diberikan di bagian itu untuk mengaktifkan Twilio Sandbox untuk WhatsApp. Sama seperti yang ditunjukkan di bawah:
﻿
2 - Dapatkan Account SID dan Auth Token
Untuk menemukan Account SID dan Auth Token, masuk ke Akun Twilio Anda, pergi ke Dasbor Anda dan klik pada Pengaturan. Semua informasi penting tentang Proyek Anda akan tersedia di bagian itu. Pastikan bahwa semua instruksi ini diikuti seperti yang ditunjukkan dalam gambar di bawah:
﻿
Sekarang, Anda dapat menyalin SID dan Token Autentikasi Anda untuk Cloud Code.
3 - Instal Modul dari Twilio
Setelah mengonfigurasi lingkungan untuk Antarmuka Baris Perintah di komputer Anda, buat file bernama package.json, dan di dalam file ini, Anda perlu menginstal modul Twilio, seperti:
JSON
1   {
2     "dependencies": {
3       "twilio": "*"
4     }
5   }
1   {
2     "dependencies": {
3       "twilio": "*"
4     }
5   }
﻿
4 - Implementasi Cloud Code
Di bagian ini, kami akan menunjukkan kepada Anda cara bekerja dengan Fungsi Cloud.
Kami akan membangun fungsi Trigger afterSave untuk mengaktifkan dan mengirim pesan konfirmasi bahwa objek telah disimpan.
JS
1   Parse.Cloud.afterSave("Contact", (request) => {
2
3     // Requiring the values to send
4     var
5         getPhoneTo   = request.object.get("phone"),
6         getFirstName = request.object.get("firstName"),
7         getPhoneFrom = "+Your Phone number", //Remember to replace your number enable on Twilio Sandbox
8         accountSid = 'AccountSID',
9         authToken  = 'AuthToken',
10        getMessage   = "Welcome " + getFirstName +", to Twilio App! Thank you for your interest, our team will contact you ASAP! ;)";
11
12    //require the Twilio module and create a REST client
13    var client = require('twilio')(accountSid, authToken);
14
15    client.messages
16        .create(
17        {
18            from: "whatsapp:" + getPhoneFrom,
19            body: getMessage,
20            to: "whatsapp:" + getPhoneTo
21        })
22        .then(message => console.log(message.sid))
23        .done();  
24  });
1   Parse.Cloud.afterSave("Contact", (request) => {
2
3     // Requiring the values to send
4     var
5         getPhoneTo   = request.object.get("phone"),
6         getFirstName = request.object.get("firstName"),
7         getPhoneFrom = "+Your Phone number", //Remember to replace your number enable on Twilio Sandbox
8         accountSid = 'AccountSID',
9         authToken  = 'AuthToken',
10        getMessage   = "Welcome " + getFirstName +", to Twilio App! Thank you for your interest, our team will contact you ASAP! ;)";
11
12    //require the Twilio module and create a REST client
13    var client = require('twilio')(accountSid, authToken);
14
15    client.messages
16        .create(
17        {
18            from: "whatsapp:" + getPhoneFrom,
19            body: getMessage,
20            to: "whatsapp:" + getPhoneTo
21        })
22        .then(message => console.log(message.sid))
23        .done();  
24  });
﻿
5 - Uji Trigger AfterSave
Sekarang kita telah membuat dan mengaktifkan trigger afterSave, saatnya untuk menguji fungsi apakah berfungsi dengan baik atau tidak. Anda juga dapat menguji fungsi di SDK klien, tetapi untuk saat ini, kita akan menggunakan perintah REST API untuk menyimpan Pengguna baru:
Curl
curl -X POST \
  -H "X-Parse-Application-Id: ${APPLICATION_ID}" \
  -H "X-Parse-REST-API-Key: ${REST_API_KEY}" \
  -H "Content-Type: application/json" \
  -d '{"firstName":"Natália", "phone":"+0000000000000"}' \
  https://parseapi.back4app.com/classes/Contact
curl -X POST \
  -H "X-Parse-Application-Id: ${APPLICATION_ID}" \
  -H "X-Parse-REST-API-Key: ${REST_API_KEY}" \
  -H "Content-Type: application/json" \
  -d '{"firstName":"Natália", "phone":"+0000000000000"}' \
  https://parseapi.back4app.com/classes/Contact
﻿
Dan hasilnya akan mirip dengan tangkapan layar di bawah.
﻿
6 - Selesai!
Dengan panduan yang dijelaskan di atas, Anda akan dapat menggunakan Twilio dengan Fungsi Cloud Code di Back4App dan mengirim pesan WhatsApp kepada pelanggan yang telah mendaftar!
Jika Anda memerlukan bantuan atau fungsi/link tidak berfungsi, silakan hubungi tim kami melalui obrolan!
Diperbarui 27 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Panduan Integrasi Stripe Menggunakan Back4App dan Cloud Functions
BERIKUTNYA
Integrasikan Email API SendGrid dengan Cloud Code Back4App