Tutorial Cara Kirim Notifikasi Whatsapp dengan Laravel 8 dan Twilio

Admin・ 6 Agustus 2021

10 min read ・ 12265 views

Whatsapp Laravel Twilio - Setelah di artikel sebelumnya kita sudah mencoba layanan Programmable Messaging API dari Twilio untuk membuat fitur broadcast SMS atau portal SMS di laravel versi 8, di artikel tutorial kali ini kita akan mencoba layanan dari Twilio tersebut untuk membuat fitur notifikasi whatsapp di laravel versi 8.

Di artikel ini kita tidak akan membahas alur pendaftaran akun di Twilio karena pada artikel sebelumnya sudah dibahas bagaimana alur daftar free trial account di Twilio. Untuk project percobaan ini, kita masih tetap bisa menggunakan credentials dari apa yang telah kita dapatkan di halaman dashboard Twilio, hanya saja untuk menggunakan layanan Programmable Messaging API dari Twilio untuk membuat fitur kirim notifikasi whatsapp, ada sedikit langkah yang harus dilalui.

Baca: Membuat Portal SMS dengan Laravel 8 dan Twilio

Skenario pada percobaan kali ini cukup sederhana, yaitu ketika user berhasil register maka akan mengirimkan notifikasi whatsapp ke nomor whatsapp user tersebut. Ok, langsung saja kita ke project uji coba.

Setup Twilio Testing Sandbox

Untuk mengirimkan pesan notifikasi whatsapp pada production mode, kita harus melakukan pendaftaran akun dengan mengirimkan beberapa data yang diminta ke Whatsapp. Whatsapp akan melakukan verifikasi data  yang kita kirimkan dan akan mengirimkan hasil verifikasinya apakah disetujui atau ditolak (Bukan Twilio yang melakukan verifikasi). Namun untuk mode development, kita tidak perlu melakukan pendaftaran akun dan menunggu verifikasi dari Whatsapp, kita bisa menggunakan Twilio Sandbox untuk mulai development atau testing fitur kirim notifikasi whatsapp menggunakan layanan Programmable Messaging API dari Twilio.

Untuk mulai menggunakan Sandbox dari Twilio, silahkan masuk ke menu Send a Whatsapp message yang terdapat di menu sidebar dashboard Twilio (Messaging>Try it Out) kemudian klik link click here.

Dengan menekan atau klik link tersebut, kita akan diarahkan ke Whatsapp dan silahkan kirim pesan join excitement-ancient. Dengan berhasil mengirim pesan tersebut, maka kita sudah bisa menggunakan Sandbox dari Twilio untuk mulai membuat fitur notifikasi whatsapp di laravel.

*Simpan nomor whatsapp dari Twilio tersebut untuk kita setup di file .ENV

Install Laravel 8

composer create-project laravel/laravel whatsapp-laravel-twilio
cd whatsapp-laravel-twilio

Setelah berhasil setup Twilio Testing Sandbox pada langkah sebelumnya, sekarang mari kita mulai koding diawali dengan install laravel versi tersebut (saat ini versi 8). Silahkan buka terminal, kemudian jalankan perintah seperti di atas. Perintah tersebut akan membuatkan atau generate folder projek laravel dengan nama whatsapp-laravel-twilio. Jika proses installasi sudah selesai, silahkan masuk ke project dengan perintah cd whatsapp-laravel-twilio.

Install Twilio SDK Package

composer require twilio/sdk

Untuk bisa menggunakan layanan Twilio di laravel 8, kita perlu menginstall Twilio SDK package. Jalankan perintah seperti di atas untuk mulai menginstall Twilio SDK package. Jika proses sudah selesai, sekarang kita sudah bisa menggunakan layanan dari Twilio.

Install Laravel UI

composer require laravel/ui
php artisan ui bootstrap --auth
npm install && npm run dev

Karena pada tutorial ini kita mempunyai skenario yaitu user akan menerima notifikasi whatsapp setelah user tersebut berhasil register, maka kita memerlukan fitur authentication pada projek laravel kita. Untuk itu, kita akan menggunakan laravel ui package untuk generate fitur authentication. Silahkan jalankan perintah-perintah seperti di atas secara berurutuan untuk install laravel ui package. 

Edit Migration File

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('phone')->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

By default, laravel sudah menyediakan migration file untuk tabel user, tapi pada percobaan kali ini kita membutuhkan data nomor whatsapp atau nomor telephone untuk mengirimkan pesan whatsapp ke nomor whatsapp user. Untuk itu kita perlu menyesuaikan atau menambahkan field phone di migration file untuk tabel users. Silahkan buka file yang ada di databases/migrations/{timestamp}_create_users_table.php, dan tambahkan kode untuk field phone seperti kode di atas.

Buat Database & Setup .ENV

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=whatsapp-laravel-twilio
DB_USERNAME=root
DB_PASSWORD=

Kita perlu membuat database baru untuk memigrasi file-file migration ke database. Jika memakai XAMPP, kita bisa langsung membuat database baru di localhost/phpmyadmin. Disini sebagai contoh, kita akan membuat database baru tersebut dengan nama whatsapp-laravel-twilio kemudian menyesuaikan DB_DATABASE di file .ENV dengan nama database yang baru saja dibuat.

TWILIO_AUTH_SID="INSERT YOUR TWILIO SID HERE"
TWILIO_AUTH_TOKEN="INSERT YOUR TWILIO TOKEN HERE"
TWILIO_WHATSAPP_FROM="INSERT YOUR TWILIO WHATSAPP FROM"

Masih di file .ENV, jangan lupa untuk menambahkan twilio value seperti di atas untuk kebutuhan kita membuat fitur notifikasi whatsapp di laravel 8 dengan twilio. TWILIO_AUTH_SID dan TWILIO_AUTH_TOKEN bisa didapatkan di halaman dashboard Twilio. Sedangkah TWILIO_WHATSAPP_FROM bisa didapatkan saat kita Setup Twilio Testing Sandbox di langkah awal atau nomor whatsapp yang telah kita kirimkan pesan join excitement-ancient.

Migrate

php artisan migrate

Jalankan perintah php artisan migrate untuk memigrasi file-file migration ke database yang baru saja dibuat.

Edit Register Form

<div class="form-group row">
    <label for="phone" class="col-md-4 col-form-label text-md-right">Whatsapp Number</label>
    <div class="col-md-6">
        <input id="phone" type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" placeholder="+6282xxxxxxx" required>
        @error('phone')
        <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
        </span>
        @enderror
    </div>
</div>

Selanjutnya, di halaman register kita perlu menambahkan satu form input baru untuk user mengisikan data nomor whatsapp user tersebut. Copy kode di atas, buka file resources/views/auth/register.blade.php, kemudian paste kode tersebut tepat di bawah form email.

Edit User Model

protected $fillable = [
        'name',
        'email',
        'phone',
        'password',
    ];

Kemudian, buka file user model yang terletak di direktori app/Models/User.php. Pada protected $fillable, tambahkan 'phone' seperti contoh kode di atas agar inputan whatsapp number dari user dapat terbaca dan dimasukkan ke table users di database.

Edit RegisterController

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use App\Models\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Twilio\Rest\Client;

class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional code.
    |
    */

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'phone' => ['required', 'string', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\Models\User
     */
    protected function create(array $data)
    {
        $user = User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'phone' => $data['phone'],
            'password' => Hash::make($data['password']),
        ]);

        $this->whatsappNotification($user->phone);
        
        return $user;

    }

    private function whatsappNotification(string $recipient)
    {
        $sid    = getenv("TWILIO_AUTH_SID");
        $token  = getenv("TWILIO_AUTH_TOKEN");
        $wa_from= getenv("TWILIO_WHATSAPP_FROM");
        $twilio = new Client($sid, $token);
        
        $body = "Hello, welcome to codelapan.com.";

        return $twilio->messages->create("whatsapp:$recipient",["from" => "whatsapp:$wa_from", "body" => $body]);
    }
}

Langkah terakhir, silahkan buka file di app/Http/Controllers/Auth/RegisterController.php. Di file RegisterController ini kita akan membuat fitur notifikasi whatsapp yang menggunakan layanan Programmable Messaging API dari Twilio. Import atau tambahkan kode use Twilio\Rest\Client; sebelum class RegisterController, kemudian di function validator kita juga akan menambahkan validasi untuk data phone number atau whatsapp number.

Kemudian kita perlu membuat private function untuk whatsapp notification. Di function ini, kita akan membuat variabel-variabel baru seperti $sid, $token dan $wa_form yang nilainya diambil dari file .ENV. Kemudian kita definisikan twilio client dan variabel $body yang merupakan text yang akan dikirimkan ke whatsapp number user setelah user tersebut berhasil register.

Di function create, kita tambahkan data phone untuk menambahkan data nomor telephone yang diinputkan oleh user ke tabel users di database. Kemudian saat data berhasil ditambahakan, akan memanggil function whatsappNotification untuk mengirimkan pesan notifikasi whatsapp ke nomor telephone atau nomor whatsapp user.

Sehingga file RegisterController.php sekarang akan menjadi seperti kode di atas. *Kalian juga bisa langsung semua kode di atas dan replace di file RegisterController.php.

Pengujian Fitur Notifikasi Whatsapp di Laravel 8 dengan Twilio

Setelah melalui proses-proses mulai dari setup twilio testing sandbox, install laravel 8, install laravel ui sampai edit file RegisterController.php, sekarang waktunya kita menguji fitur kirim notifikasi whatsapp yang sudah kita buat di laravel 8 dengan Programmable Messaging API dari Twilio.

Silahkan jalankan server dengan perintah php artisan serve, kemudian buka di browser dengan URL 127.0.0.1:8000/register atau whatsapp-laravel-twilio.test/register. Isi form-form yang tersedia, dan isi form input phone number atau whatsapp number dengan nomor telephone kamu yang diawali dengan kode negara (seperti +62), kemudian klik Register. Jika berhasil register, maka nomor whatsapp yang kamu inputkan akan menerima pesan whatsapp dengan isi pesan atau text "Hello, welcome to codelapan.com."

Gambar di atas merupakan contoh notifikasi whatsapp yang user terima setelah berhasil melakukan register.

Sekian artikel kali ini, jika ada kritik, saran atau apapun itu yang ingin didiskusikan, silahkan tulis komentar kalian di form komentar yang tersedia di bawah ini. I hope this article is useful and see you soon.

Credit: Online illustrations by Storyset