Cara Membuat Chatbot di Laravel dengan BotMan

Botman merupakan PHP library yang dapat memudahkan dalam membangun sebuah bot untuk website dan beberapa aplikasi chatting antaralain Facebook Messenger, Telegram, WeChat dan masih banyak lagi.

Install BotMan Studio

Sebelum mengikuti tutorial kali ini, kalian harus terlebih dahulu menginstall composer.

Jika sudah kalian bisa menginstall BotMan studio menggunakan composer.

composer global require "botman/installer"

Copy kode diatas ke dalam terminal kalian. Untuk mengecek apakah berhasil diinstall, kalian bisa ketik botman. Jika muncul versi botmannya maka berhasil.

Buat Chatbot Project Baru

Kalian dapat membuat project baru menggunakan BotMan studio. BotMan studio akan membuatkan sebuah folder yang sudah terpasang laravel versi terbaru dan BotMan sekaligus. Copy code dibawah ini ke dalam terminal kalian.

botman new jasaService

Ganti jasaService sesuai dengan project yang ingin kalian buat. Untuk tutorial kali ini saya akan membuat chatbot untuk jasa perbaikan perangkat elektronik.

Test Chatbot

Buka folder botman yang telah dibuat tadi dan sebelum menjalankan botman, kalian harus terlebih dahulu merubah file .env.example menjadi .env

Setelah itu, jalankan php artisan key:generate di terminal untuk mengenerate APPKEY baru.

Jika sudah melakukan 2 cara diatas, barulah kalian jalankan php artisan serve di terminal untuk testing botman.

Kalian akan melihat pesan seperti ini Laravel development server started: http://127.0.0.1:8000. Kemudian buka link barusan ke dalam browser.

copy script berikut ke dalam welcome.blade.php dan taruh diatas </body>

<script src='https://cdn.jsdelivr.net/npm/botman-web-widget@0/build/js/widget.js'></script>

Nanti akan muncul tombol pesan di pojok kanan bawah. Klik tombol tersebut dan mulai percakapan dengan mengirimkan pesan hi atau start conversation.

Edit Routes Botman

Selanjutnya buka file routes/botman.php untuk mengubah percakapan awal. copy code berikut ke dalam botman.php

<?php

use App\Http\Controllers\BotManController;

$botman = resolve('botman');

$botman->hears('.*(Hai|Hallo).*', BotManController::class . '@startConversation');

Kalian bisa mengubah hai atau hallo, serta menambah kata baru untuk memulai percakapan dengan botman. Jika ingin menambah kata baru, kalian beri | sebelum kata tersebut. Misalnya |Quotes

Tambah Conversation

Untuk menjalankan percakapan dengan botman perlu terlebih dahulu membuat conversation. Kalian bisa membuat conversation dengan mudah menggunakan botman dengan code berikut.

php artisan botman:make:conversation IntroductionConversation

Jalankan code diatas ke dalam terminal. Kalian bisa mengubah IntroductionConversation sesuai dengan isi percakapan.

Setelah berhasil membuat conversation, kalian perlu menjalankan conversation tersebut ke dalam controller.

Buka App/Http/Controllers/BotManController.php dan tambahkan IntroductionConversation ke dalam startConversation.

public function startConversation(BotMan $bot)
{
    $bot->startConversation(new IntroductionConversation());
}

Membuat Pertanyaan

Setelah itu, buka app/Conversations/IntroductionConversation.php dan buat method askName() untuk menanyakan nama.

public function askName()
{
    $this->ask('Siapa nama kamu?', function (Answer $answer) {
        $this->say('Halo ' . $answer->getText());
    });
}

public function run()
{
    $this->askName();
}

Nantinya bot akan menyakan nama kalian. Setelah dijawab maka bot akan menyapa kalian sesuai dengan nama yang diisi tadi. Untuk menjalankan method askName() kalian perlu memanggil method tersebut ke dalam method run()

Kalian juga bisa menambah pertanyaan lagi. Disini saya akan membuat pertanyaan untuk menyakan email dan nomor telepon.

public function askName()
{
    $this->ask('Siapa nama kamu?', function (Answer $answer) {
        $this->say('Halo ' . $answer->getText());

        $this->askEmail();
    });
}

public function askEmail()
{
    $this->ask('apa nama alamat emailmu?', function (Answer $answer) {
        $validator = Validator::make(['email' => $answer->getText()], ['email' => 'email']);

        if ($validator->fails()) {
            return $this->repeat('Email yang anda masukkan tidak valid');
        }

        $this->askMobile();
    });
}

public function askMobile()
{
    $this->ask('berapa nomor telepon kamu?', function (Answer $answer) {
        $this->say('Terimakasih');
    });
}

Untuk berpindah ke setiap method askEmail(), kalian bisa memanggil method tersebut ke dalam method askName(). Jadi, setelah bot menyakan nama akan dilanjutkan dengan menyakan email.

Menyimpan Pesan di Storage

Kalian bisa menyimpan setiap pesan atau jawaban ke dalam storage. Kalian juga bisa menambahkan sendiri penyimpanan untuk askEmail() dan askMobile()

public function askName()
{
    $this->ask('Siapa nama kamu?', function (Answer $answer) {
        $this->bot->userStorage()->save([
            'name' => $answer->getText()
        ]);

        $this->say('Halo ' . $answer->getText());
    });
}

Menghubungkan Conversation

Sebelum menghubungkan conversation, kalian terlebih dahulu harus membuat conversation baru.

php artisan botman:make:conversation SelectServiceConversation

Setelah berhasil membuat conversation baru, buka kembali app/Conversations/IntroductionConversation.php dan tambahkan SelectServiceConversation() ke dalam startConversation()

public function askMobile()
{
    $this->ask('berapa nomor telepon kamu?', function (Answer $answer) {
        $this->bot->userStorage()->save([
            'mobile' => $answer->getText()
        ]);

        $this->say('Terimakasih');

        // move to another conversation
        $this->bot->startConversation(new SelectServiceConversation());
    });
}

Barulah kalian membuat pertanyaan kembali untuk SelectServiceConversation. Disini saya telah membuat beberapa pertanyaan, kalian bisa mengcopy ke dalam app/Conversations/SelectServiceConversation.php

<?php

namespace App\Conversations;

use BotMan\BotMan\Messages\Conversations\Conversation;
use BotMan\BotMan\Messages\Incoming\Answer;
use BotMan\BotMan\Messages\Outgoing\Actions\Button;
use BotMan\BotMan\Messages\Outgoing\Question;

class SelectServiceConversation extends Conversation
{
    public function askService()
    {
        $question = Question::create('Service apa yang kamu cari?')->callbackId('select_service')->addButtons([
            Button::create('HP')->value('HP'),
            Button::create('Laptop')->value('Laptop'),
            Button::create('PC')->value('PC'),
        ]);

        $this->ask($question, function (Answer $answer) {
            if ($answer->isInteractiveMessageReply()) {
                $this->bot->userStorage()->save([
                    'service' => $answer->getValue()
                ]);
            } else {
                return $this->repeat('Layanan yang anda pilih tidak ada di daftar kami.');
            }
        });
    }

    /**
     * Start the conversation.
     *
     * @return mixed
     */
    public function run()
    {
        $this->askService();
    }
}

Oke, untuk dibagian akhir nantinya pesan yang telah disimpan di storage akan dimunculkan kembali oleh botman.

Kalian bisa membuat conversation baru dengan nama BookingConversation. Setelah itu buka conversation tersebut dan copy code berikut.

<?php

namespace App\Conversations;

use BotMan\BotMan\Messages\Conversations\Conversation;

class BookingConversation extends Conversation
{
    public function confirmBooking()
    {
        $user = $this->bot->userStorage()->find();

        $message = '---------------------------- <br>';
        $message .= 'Nama : ' . $user->get('name') . '<br>';
        $message .= 'Email : ' . $user->get('email') . '<br>';
        $message .= 'No HP : ' . $user->get('mobile') . '<br>';
        $message .= 'Layanan : ' . $user->get('service') . '<br>';
        $message .= 'Tanggal : ' . $user->get('date') . '<br>';
        $message .= 'Waktu : ' . $user->get('time') . '<br>';

        $this->say('Terimakasih, telah memilih layanan kami. Berikut detail layanan yang anda pesan : <br>' . $message);
    }

    /**
     * Start the conversation.
     *
     * @return mixed
     */
    public function run()
    {
        $this->confirmBooking();
    }
}

Jangan lupa untuk menghubungkan BookingConversation ke dalam SelectServiceConversation.

Sekian untuk tutorial kali ini. Jika masih ada kesulitan, kalian bisa komentar dibawah ini.