Membuat Fitur Kirim Pesan Whatsapp Dengan Laravel & Vonage

Membuat Fitur Kirim Pesan Whatsapp Dengan Laravel & Vonage

Admin
Admin・ 10 Februari 2021
6 min read ・ 8440 views

Whatsapp Laravel - Fitur kirim pesan whatsapp banyak sekali dibutuhkan ketika kita membuat sistem atau project. Fitur kirim pesan whatsapp bisanya digunakan untuk mengirimkan notifikasi atau pemberitahuan ketika user register di suatu platform atau ketika user sedang pesan belanja online. Di artikel ini kita akan sama-sama belajar bagaimana cara membuat fitur kirim pesan whatsapp dengan laravel dan vonage. Apa saja yang dibutuhkan di artikel ini ? yang dibutuhkan adalah laravel versi 8 dan whatsapp.

Sebelum memulai percobaan membuat fitur kirim pesan whatsapp dengan laravel dan vonage, kita membutuhkan vonage api account. Jika Anda belum mempunyai akunnya, silahkan daftar disini. Di percobaan ini kita akan menggunakan credit yang diberikan oleh vonage.

Di percobaan ini, kita akan membuat fitur kirim pesan whatsapp dengan laravel dan vonage menggunakan project awalan yang telah disediakan nexmo (vonage) yang ada di github. Baiklah, kita mulai percobaan membuat fitur kirim pesan whatsapp dengan laravel dan nexmo:

install laravel untuk project kirim whatsapp dengan laravel

1. Clone project dari github disini ke folder yang akan Anda gunakan di komputer Anda.

Disini saya meletakkannya di folder f/tutorial vanjava tanpa mengubah nama folder project yaitu laravel-messages.

2. Kemudian, masuk ke direktori project dengan command di terminal "cd laravel-messages".

3. Jalankan command "composer install".

4. Jalankan command lagi "cp .env.example .env" untuk menyalin file .env.example dan menempelnya (paste) dengan nama .env.

Jika kita lihat di file .env pada baris paling bawah, terdapat NEXMO_API_KEY, NEXMO_API_SECRET, dan NEXMO_NUMBER. Kita perlu memperbarui data di .env terutama di 3 baris yang telah disebut di atas terlebih dahulu. Data-data tersebut bisa kita dapatkan di halaman dashboard vonage disini

vonage api dashboard

Isi 3 baris di file env tadi dengan kode seperti gambar di atas, untuk NEXMO_NUMBER bisa dikosongkan terlebih dahulu.

5. Jangan lupa juga jalankan command php artisan key:generate untuk generate APP_KEY di file .env.

6. Disini kita perlu mengizinkan URL public mengakses platform dev atau di local kita agar dapat menerima webhook yang masuk untuk komunikasi perpesanan dua arah atau two-way messaging communication. Untuk itu, kita akan menggunakan ngrok. 

Jika Anda belum mempunyai ngrok, silahkan kunjungi web resminya di ngrok.com, kemudian lanjutkan dengan register dan setelah di arahkan ke halaman dashboard, silahkan download ngrok.

Setelah berhasil download ngrok, silahkan install ngrok terlebih dahulu dengan langkah-langkah seperti yang ada di halaman setup & installation.

*Setup ngrok di windows:

  • Download ngrok
  • Unzip atau double click pada ngrok.zip
  • Jalankan ngrok.exe
  • Hubungkan ngrok dengan akun ngrok Anda dengan command "ngrok authtoken tokenandaxxxxx" pada ngrok.exe. authtoken bisa didapat di halaman setup & installasion no. 2.
  • Start ngrok dengan command "ngrok http 8000" atau port berapun yang dijalankan di project Anda. Misalnya jika project laravel Anda berjalan di port 8090 (url: 127.0.0.1:8090) maka Anda harus menjalankan ngrok dengan command ngrok http 8090.

start ngrok

7. Konfigurasi messages sandbox. Buka halaman messages sandbox atau bisa klik disini.

Konfigurasi messages sandbox

Di halaman sandbox, Anda akan melihat tampilan seperti gambar di atas. Scan QR code di atas atau bisa klik link atau send invite email atau bisa juga dengan cara kirim pesan whatsapp langsung ke +14157386170 untuk mendaftarkan nomor whatsapp Anda.

Konfigurasi webhook vonage laravel

8. Konfigurasi webhook. Untuk konfigurasi webhook, kita memerlukan URL https "forwarding" yang bisa kita dapatkan di langkah no. 6. Silahkan copy URL https "forwarding" tersebut dan paste di form inbond dan status seperti gambar di atas kemudian klik save webhooks. Jika Anda gagal (access denied) dalam proses simpan atau saat klik save webhooks, silahkan dicoba reload halaman website (Kemungkinan session login Anda sudah habis).

Format URL webhooks:

  • Inbound: [url https forwarding]/webhooks/inbound
  • Status: [url https forwarding[/webhooks/status

9. Sekarang silahkan jalankan server Anda, kemudian coba akses seperti 127.0.0.1:8000/message. Kemudian di form input nomor whatsapp, silahkan inputkan nomor telepon yang tidak diawali dengan 0 tetapi dengan kode negara, misalnya 6282123456344 dan klik submit. Setelah klik submit, kita akan menerima pesan dari vonage bisa dibilang seperti bot massage.

Demikian artikel mengenai cara membuat fitur kirim pesan whatsapp dengan laravel vonage. Jika kita perhatikan, kita menggunakan layanan vonage, tapi kenapa di langkah-langkahnya terdapat banyak sekali teks nexmo ? jadi sebenarnya kita ini memang menggunakan layanan dari nexmo yang berganti nama menjadi vonage atau diakuisisi vonage(CMIIW). Jika terdapat masalah atau error pada langkah di atas, silahkan bisa didiskusikan dengan berkomentar dibawah ini.

See you in the next article

 

Tinggalkan Komentar
Loading Comments