Tutorial Dialogflow dan Integrasi Php / Mysql serta implementasi pada

whatsapp platform
Author : Kukuh TW ([email protected])
WhatsApp : https://wa.me/628129893706

Tutorial singkat belajar dialogflow dan integrasi php + databse mysql serta implementasi pada
platform Whatsapp menggunakan API WA Gateway

Ebook ini akan menjelaskan bagaimana melakukan integrasi dialogflow dengan script php dan
database mysql. Selain itu juga akan dijelaskan bagaimana implementasi dialogflow pada platform
Whatsapp menggunakan API WA Gateway.

Untuk lebih jelasnya saksikan demo video sebagai berikut

1. Video demo chatbot pada console.dialogflow.com : https://youtu.be/L3YNcF75Ioo

2. Video demo pada website : https://youtu.be/K3STR5837uQ
3. Video demo implementasi whatsapp menggunakan WA Gateway :
https://youtu.be/C76PA0a-aeM

Sebelum mempelajari tutorial ini, anda diharapkan sudah mengerti dasar tentang php, API JSON ,
database mysql server, cara setup vps hosting dan cara install https ssl pada vps hosting anda.

Anda diwajibkan untuk memilki account dialogflow , mengerti sedikit tentang php dan database
mysql. Anda juga diharuskan memiliki VPS hosting sendiri. Kami sarankan untuk menggunakan
digitalocean di link ini https://m.do.co/c/6faac77d1c6f. Buatlah droplet dengan OS ubuntu, apache
web server , php version 7.2 keatas, mysql versi 5.0 keatas. Untuk singkatnya buatlah droplet lamp.
https://marketplace.digitalocean.com/apps/lamp

Untuk mendaftar di google dialogflow, meluncur ke https://console.dialogflow.com , buka account

google dialogflow menggunakan email gmail anda.

Oleh karena dialogflow mewajibkan server terintegrasi (fulfilment) menggunakan https dan domain
atau subdomain, anda diharapkan mengerti cara melakukan setting https sendiri dan membuat
domain atau subdomain. Integrasi fulfilment pada dialogflow tidak bisa menggunakan penamaan ip
address , harus dengan domain / subdomain dibungkus dengan https, tidak bisa dengan http.

Untuk implementasi pada WA API gateway, maka akan digunakan provider WA Gateway fonnte,
anda dapat mendaftarkan disini https://hp.fonnte.com/register?ref=9

Demo akan menunjukkan pendaftaran suatu both/stage pada suatu ajang pameran / exhibition.
Pendaftar melakukan pemdaftaran melalui website. Website ini terkoneksi ke backend chatbot dan
server dialogflow.

Source code akan terbagi menjadi tiga yaitu

1. Php Script
2. Dialogflow Project Agent
3. Mysql script

1
Cara kerja Chatbot Dialogflow

Sebelum dimulai, mari kita pahami dahulu, bagaimana chatbot dialogflow bekerja. Dialogflow
memiliki fitur fulfilment server , dimana proses follow up percakapan user dapat dihandle oleh
backend chatbot. Backend chatbot dapat menyimpan data, edit dan melihat data yang dikirimkan /
diminta oleh user.
Untuk diimplementasikan pada website sendiri atau Whatsapp , diperlukan google dialogflow client.
Google dialogflow client menyediakan SDK untuk berbagai macam Bahasa programming, seperti
php, nodehjs, python dan sebagainya. https://developers.google.com/api-client-library
Google dialogflow mewajibkan masing-masing client memiliki mekanisme authorization berupa file
json yang di-generate oleh owner / pemilik project dialogflow agent.

Pada ebook ini , akan dijelaskan cara menggunakan dialogflow client dengan php, sehingga bisa
diterapkan untuk implementasi pada whatsapp messenger menggunakan API WA Gateway.

Kenapa menggunakan google dialogflow ? karena dialogflow dengan fitur NLP (natural language
programming) yaitu dapat memahami maksud dari permintaan user dengan cara kita melakukan
setting intent sesuai dengan yang dharapkan oleh user. Pada kasus ini kita melakukan pembagian
intent berdasarkan tambah data, melihat data, menghapus data, greeting welcome. Dari setting
intent kita dapat menebak apakah saat ini user ingin melihat data atau menambah data. Bila ingin
menambah data , maka bot perlu menanyakan semua data yang diharapkan. Bila user ingin melihat
data, maka bot akan menanyakan data id mana yang ingin dilihat ? atau apakah user ingin melihat
semua data ?. Demikian juga dengan intent keinginan user menghapus data, bot akan menanyakan
Id data mana yang akan dihapus.

UNZIP FILE PHP

Langkah pertama, mari kita unzip file source code php

2
Unzip source code php, akan terlihat seperti dibawah ini. File mysql ada pada tutorial_2022.sql ,
folder dialogflow adalah bagian program yang akan membuat integrasi php ke project agen
dialogflow

UNZIP FILE PHP – FOLDER VENDOR

Pada folder dialogflow akan terdapat 2 folder yaitu filejson dan vendor. Filejson untuk menyimpan
hasil generate service account key pada project dialogflow. Untuk melakukan generate file json akan
dijelaskan kemudian.

Selain itu ada folder vendor, Pada dasarnya file vendor didapat dari php client library. Anda bisa
mempelajarinya disini
https://cloud.google.com/dialogflow/es/docs/reference/libraries/php

Untuk mudahnya , file tersebut sudah ada pada zip file php. Bila suatu saat , ada update, maka anda
perlu melakukan update dengan mengetikkan composer update

Isi file vendor adalah sebagai berikut:

3
Setup domain atau subdomain anda pada vps hosting, jangan lupa install https ssl pada server anda.
anda bisa mencoba install https menggunakan letsencrypt. Letakkan file hasil unzip php pada folder
/var/ww/html/yourfoldername_whatever_name_is

UNZIP FILE PHP – FILE POST_CROWHILL.PHP

File post_crowhill.php adalah file yang akan menangani proses selanjutnya yang datang dari
dialogflow. Ketika kita berada di menu fulfilment server pada console dialogflow, akan terlihat kita
perlu melakukan setting file post_crowhill.php sebagai mekanisme untuk memproses permintaan
user entry data, lihat data, delete data pada backend php server. Disinilah terlihat proses integrasi
dialogflow pada backend server php/mysql.

4
File post_crowhill.php akan menangkap parameter dari dialogflow menggunakan JSON. Karena
memerlukan koneksi ke database , maka diperlukan command php untuk menghubungkan ke
database. Pada line 28 terdapat command include(`db_crowhill.php`) , menunjukkan bahwa fungsi
code ini memerlukan koneksi database mysql

5
Untuk mekanisme entry data, code akan menanganinya pada line 97 sampai 107. Terlihat variable
yang dientry oleh user , akan diproses pada fungsi tersebut.

For Viewing data : untuk melihat data, terlihat fungsi menampilkan data pada kode dibawah ini.

6
UNZIP FILE PHP – FILE FUNCTION_CROWHILL.PHP

file ini berfungsi untuk melakukan eksekusi insert data, view data dan delete data.

7
IMPORT FILE DIALOGFLOW

Login ke dashboard console.dialogflow.com , buatlah 1 project uji coba, namakan apa saja, set
default lang sebagai English. lalu import file zip pada menu console dialogflow

Sebagai contoh diatas, saya membuat projet dengan nama Tutorial 2022. Klik Import from zip, lalu
pilih file zip, ketik IMPORT pada kolom yang ditentukan.

8
Klik Import pada button

Bila , berhasil , maka akan terlihat 9 intent sebagai berikut:

9
Bila mengetikkan entry data pada console dialogflow, maka response bot akan menanyakan enter
stand number:

10
Perhatikan nama intents Ketika mengetik entry data. DIsini menunjukkan bahwa nama intent adalah
: proses data.

11
Gambar photo diatas menunjukkan nama intent proses data , Ketika user mengetikkan entry data.

Berikut adalah detail intent dengan nama proses data. Ada training phrase entry data, add data.

12
Pada intent ini, user diwajibkan mengisi semua data yang dibutuhkan , mulai dari stand number ,
first name , lastname , stand size, date purchased , phone number dan nationality id.
nama action diisi oleh value entry_data.

Value entry_data pada parameter action ini kemudian nantinya akan diproses file post_crowhill.php

13
sebelumnya variable $varresultaction sudah didapatkan melalu JSON yang dikirimkan dari
dialogflow, seperti terlihat pada line 43 file post_crowhill.php

struktur JSON dialogflow yang akan diposting ke backend server akan memiliki struktur seperti ini.

Jangan lupa , pada intent proses data, fulfilment perlu diaktifkan . Enable webhook call for this
intent.

14
Sekarang kita perlu melakukan integrasi ke backend chabot kita. Chek menu fulfilment server. Anda
periu meletakkan file php script dan mysql pada vps hosting anda.

buatlah folder tutorial_2022 dan upload semua file pada folder tersebut. Bila anda menggunakan
ubuntu , kemungkinan folder anda akan terlihat sebagai berikut

15
Masuk ke folder crowhill/dialogflow , jangan lupa melakukan set permission pada folder crowill dan
dialogflow untuk file txt, karena ada mekanisme tracing / debugging berupa file txt.

Contoh debugging yang dimaksud adalah : seperti pada file logic.php folder crowhill/dialogflow

16
Akan ada file trace1.txt yang akan menjelaskan nilai setiap parameter tersebut. Jadi pastikan pada
folder dialogflow , file txt sudah diset menjadi 777

Cek file logic.php, lihat di line 12, pastikan file autoload berada pada folder yang tepat

Kemudian cek penamaan project id dan file json pada baris 32 dan 33.

17
Pastikan nama value ProjectID pada file logic. php sama dengan ProjectID pada
console.dialogflow.com. Perhatikan Nama ProjectID.

Oleh karena memerlukan filejson hasil dari generate JSON key project dialogflow, maka kita
memerlukan file json key tersebut.

Pada tahap ini anda belum memiliki file json hasil dari generate service account key dialogflow

Sekarang , kita perlu generate JSON key. Masuk ke menu utama, lalu klik project ID seperti terlihat
seperti gambar dibawah ini:

18
Setelah klik project ID akan terlihat menu google cloud console seperti dibawah ini. Pilih Go To
Project Setting.

Menu tampilan Ketika pilih project seting

Pilih Service Account

19
Menu Ketika service account dipilih

Disini kita akan membuat service account, klik Create Service Account

20
Masukkan nama service account apa saja, lalu klik create and continue

Lalu pilih grant access sebagai dialogflow admin

21
Masukkan user Service account yang anda baru saja buat.

Akan terlihat tampilan seperti dibawah ini:

22
Kemudian buat create new key

23
Klik Create , dan JSON akan terdownload seperti gambar dibawah ini: Perhatikan nama file json yang
tercipta tersebut. Nama file ini nantinya perlu disetting pada file logic.php

Pindahkan file json tersebut ke folder website anda folder crowhill/filejson. Sesuaikan dengan
alamat pada machine / vps server anda. Bila anda menggunakan linux. Letakkan di folder
/var/www/html/your_folder_name/crowhill/dialogflow/filejson.

Perlu diingat, bahwa nama file JSON akan berbeda dengan file JSON yang dihasilkan dari generate
service account key anda. Jadi tidak perlu khawatir bahwa file tutorial-2022-dxym-d18cb9dfcf9b.json
tidak ada Ketika anda pertama kali melakukan unzip file php.

Anda perlu melakukan generate file JSON berdasarkan project agent dialogflow anda sendiri.

24
Kembali ke file logic.php di folder /crowhill/dialogflow , pada line baris 32 terdapat parameter
$filejson, pastikan nama file json ini sama dengan nama file yang telah didowload / dihasilkan dari
generate service account key dialogflow

Tahap selanjutnya adalah membuat database. Pada VPS anda buatlah database dengan nama apa
saja, sebagai contoh database : tutorial_2022. Lalu jalankan script tutorial_2022.sql yang terdapat
pada zipped file php.

Pastikan ada 2 table tercipta, yaitu tbl messages dan tbl user seperti pada gambar dibawah ini:

25
Cek file db_crowhill.php , setting nama database, user database dan password sesuai kondisi server
vps hosting anda.

26
Bila semua berjalan lancar, maka kini lakukan uji coba, buka file index_chat.php pada folder crowhill.
Perhatikan function connect_to_dialogflow($sender,$text). Cek line 200 seperti pada gambar
dibawah ini

27
Ganti file $BASE_END_POINT sesuai dengan alamat VPS hosting server anda.

Langkah selanjutnya adalah melakukan test percakapan dengan bot pada website. File
index_chat.php pada folder crowhill

Tampilan awal versi website akan terlihat seperti gambar dibawah:

28
Masukkan nama username anda , lalu pada kolom messages ketik hai , hallo

Bila response bot kosong, maka dipastikan ada error yang musti anda cari tahu penyebabnya.
bila terdapat pesan error seperti ini:

PHP Fatal error: Uncaught Error: Call to undefined function Google\Protobuf\Internal\bccomp()

in /home/yourfolder

29
Maka ini menandakan bahwa anda perlu install library bcmath pada os ubuntu anda. Gunakan
keyword `how to install bcmath php extension ubuntu` pada pencarian search engine google.
Bila proses instalasi library bcmath sudah dilakukan, jangan lupa untuk restart server apache
Kembali.

Lalu lakukan test Kembali pada website anda.

Ketik Entry data

Masukkan data stand number

30
Masukkan first name anda

31
Masukkan Last name

32
Dan seterusnya, sampai semua data telah terisi semua dan benar

Akan terlihat response bot Data has been saved, data id is xxxxx. Ini menandakan anda telah benar
melakukan proses instalasi php, database mysql, setting dialogflow dengan benar.

IMPLEMENTASI PADA WHATSAPP

Selanjutnya, mari kita coba implementasi untuk platform whatsapp bot. Sebagai API gateway, kami
menggunakan fonnte.com , Daftarkan diri anda melalui link ini https://hp.fonnte.com/register?ref=9

33
Login ke dashboard fonnte , lalu pilih menu devices

Klik Edit

Masukkan Token yang ada pada dashboard fonnte ke dalam file tokenfonnte.php pada line 3

Pada dashboard fonnte , masukkan webhook sesuai dengan alamat pada vps hosting anda

https://yourdomainserver/your_folder/crowhill/fonnte_wa_gateway.php

34
check file fonnte_wa_gateway.php pada folder crowhill

Check function connect_to_dialogflow($sender,$text) pada file fonnte_wa_gateway.php .

Perhatikan line 81 pada nilai $BASE_END_POINT. Pastikan BASE_END_POINT sudah diisi dengan
alamat pada vps hosting anda.

35
Kembali ke dashboard fonnte.com , klik Connect untuk menghubungkan whatsapp anda ke API WA
gateway. Akan muncul QRCODE, buka apps whatsapp, lakukan tautan device scan qrcode tersebut,
bila sudah , maka kini whatsapp anda sudah terhubung ke API WA gateway.

36
Qrcode akan muncul seperti pada gambar, buka apps whatsapp, lalu lakukan tautan device dan scan
qrcode yang terlampir.

Bila sudah berhasil connect, maka lakukan test percakapan ke nomor whatsapp bot anda.

Ketik entry data , lalu masukkan semua data yang diminta.

37
Bila berhasil, maka bot akan memberitahukan bahwa Data has been saved. DataID is xxx.

38
Selamat kini , anda telah berhasil melakukan testing chatbot pada console dialogflow, pada website
dengan domain/sub domain anda sendiri, dan implementasi pada whatsapp nomor anda.

Dengan contoh ini, maka anda sekarang dapat membuat chatbot untuk penerimaan murid baru,
pendaftaraan anggota klub .

Kini anda telah mengerti bagaimana melakukan integrasi dialogflow ke backend server anda ,
sehingga dapat dilakukan proses tambah data, lihat data dan hapus data.

39
Anda juga sudah mengerti bagaimana menerapkan nya pada platform Whatsapp menggunakan API
WA gateway.

Terima kasih atas waktunya membaca ebook ini.

Bila anda membeli ebook tutorial ini, anda akan mendapatkan semua source code tersebut: Soruce
code dialogflow, source code php dan source code mysql data. Ebook ini gratis, bila anda
memerlukan source code, bisa menghubungi whatsapp di https://wa.me/628129893706

atau email saya di [email protected] , harga ebook bisa berganti sewaktu-waktu, sehingga saya
tidak menyebutkan harga disini. Pembayaran bisa dilakukan melalui paypal [email protected]
atau

BCA NoRek : 255-1111-441 a/n: Kukuh Tripamungkas

BNI NoRek : 0152791316 a/n: Kukuh Tripamungkas
Mandiri No.Rek : 006-00-0028467-3 a/n: Kukuh Tripamungkas

Profile penulis , portfolio dan latar belakang bisa dilihat pada Telegram bot
https://t.me./kukuhtwbot

Email : [email protected]

Whatsapp : https://wa.me/628129893706 Kukuh TW

40