PEMBUATAN APLIKASI CHATBOT BERBASIS WEB MENGGUNAKAN DIALOGFLOW DENGAN INTEGRASI DIALOGFLOW MESSENGER PADA SITUS JOURNAL OF MULTIDISCIPLINARY ISSUES

(1)

PEMBUATAN APLIKASI CHATBOT BERBASIS WEB MENGGUNAKAN DIALOGFLOW DENGAN INTEGRASI DIALOGFLOW MESSENGER PADA SITUS JOURNAL OF

MULTIDISCIPLINARY ISSUES

SKRIPSI

RICKY NG 00000032666

PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2022

(2)

i

Pembuatan Aplikasi Chatbot…, Ricky Ng, Universitas Multimedia Nusantara

PEMBUATAN APLIKASI CHATBOT BERBASIS WEB MENGGUNAKAN DIALOGFLOW DENGAN INTEGRASI DIALOGFLOW MESSENGER PADA SITUS JOURNAL OF

MULTIDISCIPLINARY ISSUES

SKRIPSI

Diajukan sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Sistem Informasi

RICKY NG

00000032666

PROGRAM STUDI SISTEM INFORMASI FAKULTAS TEKNIK DAN INFORMATIKA UNIVERSITAS MULTIMEDIA NUSANTARA

TANGERANG

2022

(3)

ii

HALAMAN PERNYATAAN TIDAK PLAGIAT

(4)

iii

HALAMAN PENGESAHAN

Skripsi dengan judul

(5)

iv

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS

Sebagai civitas academica Universitas Multimedia Nusantara, saya yang bertanda tangan di bawah ini:

Nama : Ricky Ng

NIM : 00000032666

Program Studi : Sistem Informasi

Fakultas : Fakultas Teknik dan Informatika

JenisKarya : *Tesis/Skripsi/Tugas Akhir (*coret salah satu)

Demi pengembangan ilmu pengetahuan, menyetujui untuk memberikan kepada Universitas Multimedia Nusantara Hak Bebas Royalti Nonekslusif (Non-exclusive Royalty-Free Right) atas karya ilmiah saya yang berjudul.

“Pembuatan Aplikasi Chatbot Berbasis Web Menggunakan Dialogflow dengan Integrasi Dialogflow Messenger pada Situs Journal of

Multidisciplinary Issues”

Beserta perangkat yang ada (jika diperlukan). Dengan Hak Bebas Royalti Noneksklusif ini, Universitas Multimedia Nusantara berhak menyimpan, mengalihmediakan/mengalihformatkan, mengelola dalam bentuk pangkalan data (database), merawat, dan memublikasikan tugas akhir saya selama tetap mencantumkan nama saya sebagai penulis/pencipta dan sebagai pemilik Hak Cipta.

Demikian pernyataan ini saya buat dengan sebenarnya.

Tangerang, 14 Juni 2022 Yang menyatakan,

Ricky Ng

(6)

v

KATA PENGANTAR

Puji Syukur kepada Tuhan Yang Maha Esa yang telah memberikan berkat dan rahmat atas selesainya penulisan skripsi yang berjudul “Pembuatan Aplikasi Chatbot Berbasis Web Menggunakan Dialogflow dengan Integrasi Dialogflow Messenger pada Situs Journal of Multidisciplinary Issues” yang dilakukan untuk memenuhi syarat untuk mencapai gelar Sarjana pada Jurusan Sistem Informasi pada Fakultas Teknik dan Informatika di Universitas Multimedia Nusantara. Saya menyadari bahwa, tanpa bimbingan dari berbagai pihak, dari masa perkuliahan sampai pada penyusunan skripsi ini, sangat sulit bagi saya untuk dapat menyelesaikan laporan magang ini. Oleh karena itu, saya ingin mengucapkan terima kasih kepada :

1. Bapak Dr. Ninok Leksono, M.A., selaku Rektor Universitas Multimedia Nusantara.

2. Bapak Dr. Eng. Niki Prastomo, ST, M.Sc. selaku Dekan Fakultas Teknik dan Informatika Universitas Multimedia Nusantara.

3. Ibu Ririn Ikana Desanti, S.Kom., M.Kom., selaku Ketua Program Studi Sistem Informasi Universitas Multimedia Nusantara.

4. Bapak Johan Setiawan, S.Kom., M.M., M.B.A. selaku dosen pembimbing yang telah memberikan bimbingan, arahan, dan motivasi atas selesainya penulisan skripsi.

5. Bapak Antonius Sony Eko Nugroho S.T., M.T. selaku dosen pembimbing kedua yang telah memberikan banyak bimbingan serta arahan-arahan dab saran yang membantu menyelesaikan skripsi.

6. Keluarga saya yang telah memberikan bantuan dukungan material dan moral, sehingga penulisan skripsi dapat terselesaikan.

7. Teman-teman perkuliahan yang telah memberikan dukungan moral dan semangat dalam penyelesaian tugas laporan magang ini.

(7)

vi

Semoga penulisan skripsi yang telah selesai dibuat ini dapat memberikan informasi-informasi yang berguna dan penting serta inspirasi dan semangat bagi para pembacanya.

Tangerang, 14 Juni 2022

Ricky Ng

(8)

vii

PEMBUATAN APLIKASI CHATBOT BERBASIS WEB MENGGUNAKAN DIALOGFLOW DENGAN INTEGRASI DIALOGFLOW MESSENGER PADA SITUS JOURNAL OF

MULTIDISCIPLINARY ISSUES

Oleh : Ricky Ng ABSTRAK

Chatbot merupakan salah satu penerapan dari Kecerdasan Buatan yang dapat menggantikan manusia dalam melakukan obrolan percakapan dan menyediakan layanan informasi kepada pengguna atau pengunjungnya.

Chatbot secara umumnya dapat berinteraksi melalui pesan teks, suara, gambar dan lainnya. Tren Chatbot semakin naik dari tahun ke tahun dikarenakan adanya berbagai situs layanan penyedia Chatbot seperti Google Dialogflow, Azure Bot, Amazon Lex, dan lainnya. Pada penelitian ini telah dilakukan pembangunan aplikasi Chatbot berbasis web untuk situs jurnal bernama Journal of Multidisciplinary Issues dengan tujuan agar pengelola situs tidak perlu menjawab pertanyaan-pertanyaan pengunjung yang sama berulang kalinya.

Aplikasi Chatbot dibangun berdasarkan metode Rapid Application Development yang terdiri dari berbagai tahapan mulai dari perencanaan, perancangan dan desain, pembangunan sistem, implementasi, dan pengujian.

Aplikasi Chatbot dikembangkan menggunakan layanan Google Dialogflow dengan metode Natural Language Processing serta fitur integrasi bernama Dialogflow Messenger yang mampu menyediakan berbagai macam tipe respon jawaban pada situs jurnal yang menggunakan Open Journal Systems.

Aplikasi Chatbot diuji menggunakan metode Alpha dan Closed Beta Testing yang memberikan hasil bahwa Chatbot mampu memberikan respon jawaban yang sesuai setelah diuji dengan beberapa skenario pertanyaan serta skor 85,25% dalam pengujian dengan kuesioner untuk melihat perspektif pengunjung terhadap aplikasi Chatbot yang telah dibuat. Penelitian selanjutnya diharapkan dapat mengintegrasikan Chatbot dengan media sosial seperti Facebook, WhatsApp, ataupun LINE.

Kata kunci: Chatbot, Dialogflow Messenger, Google Dialogflow, Rapid Application Development, situs jurnal.

(9)

viii

WEB-BASED CHATBOT DEVELOPMENT USING DIALOGFLOW WITH DIALOGFLOW MESSENGER INTEGRATION IN JOURNAL OF MULTIDISCIPLINARY

ISSUES

By: Ricky Ng

ABSTRACT (English)

Chatbot is a conversation application that uses Artificial Intelligence technology and can be used to replace human to conduct conversations and prodivding information to users. In general, Chatbot can interact by using text messages, voice, images, and many more. The trends of Chatbot are increasing from year to year because of the existence of various Chatbot service sites such as Google Dialogflow, Azure Bot, Amazon Lex, and others.

In this study, a web-based Chatbot application has been built for a journal site called the Journal of Multidisciplinary Issues with the aim that site managers do not have to answer the same visitor questions over and over again.

The Chatbot had been built by using Rapid Application Development method which consists of various stages ranging from planning, design, system development, implementation, and testing. The Chatbot application was developed using the Google Dialogflow service with the Natural Language Processing method and an integration feature called Dialogflow Messenger which is able to provide various types of response messages on a journal site that use Open Journal Systems.

Author used two kinds of testing method such as Alpha Testing and Closed Beta Testing which gave the results that the Chatbot was able to provide appropriate responses after being tested with several question scenarios in Alpha Testing and a score of 85.25% in Closed Beta Testing with a questionnaire to see the visitor's perspective on the Chatbot application that had been created. Further research is expected to be able to integrate Chatbot with social media such as Facebook, WhatsApp, or LINE.

Keywords: Chatbot, Dialogflow Messenger, Google Dialogflow, journal site, Rapid Application Development.

(10)

ix

DAFTAR ISI

HALAMAN PERNYATAAN TIDAK PLAGIAT ... ii

HALAMAN PENGESAHAN ... iii

HALAMAN PERSETUJUAN PUBLIKASI KARYA ILMIAH UNTUK KEPENTINGAN AKADEMIS ... iv

KATA PENGANTAR ... v

ABSTRAK ... vii

ABSTRACT (English) ... viii

DAFTAR ISI ... ix

DAFTAR TABEL ... xii

DAFTAR GAMBAR ... xiii

DAFTAR LAMPIRAN ... xvi

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 5

1.3 Batasan Masalah ... 5

1.4 Tujuan dan Manfaat Penelitian ... 5

1.4.1 Tujuan Penelitian ... 5

1.4.2 Manfaat Penelitian ... 6

1.5 Sistematika Penulisan ... 6

BAB II LANDASAN TEORI ... 8

Tinjauan Teori ... 8

2.1.1 Chatbot ... 8

2.1.2 PHP (Hypertext Processor) ... 9

2.1.3 MySQL ... 9

2.1.4 Open Journal Systems ... 9

2.1.5 Natural Language Processing ... 10

2.1.6 Dialogflow ... 11

2.1.7 Rapid Application Development ... 16

2.1.8 Alpha Testing ... 16

2.1.9 Closed Beta Testing ... 17

(11)

x

Penelitian Terdahulu ... 18

BAB III METODOLOGI PENELITIAN ... 21

3.1 Gambaran Umum Objek Penelitian ... 21

3.1.1 Profil Situs Journal of Multidisciplinary Issues ... 21

3.1.2 Ruang Lingkup ... 22

3.1.3 Struktur Organisasi Dewan Editor ... 23

3.2 Metode Penelitian ... 23

3.2.1 Studi Literatur ... 24

3.2.2 Perencanaan (Requirements Planning) ... 25

3.2.3 Perancangan dan Desain Sistem... 25

3.2.4 Pembangunan Sistem ... 25

3.2.5 Implementasi ... 26

3.2.6 Pengujian ... 26

3.3 Variabel Penelitian ... 26

3.3.1 Variabel Dependen (Variabel Terikat) ... 26

3.3.2 Variabel Independen (Variabel Bebas) ... 27

3.4 Teknik Pengumpulan Data ... 27

3.4.1 Data Primer (Wawancara dan Kuesioner)... 27

3.4.2 Data Sekunder (Data Kumpulan Artikel Jurnal JMIS dan Informasi seputar JMIS) ... 27

3.5 Teknik Analisis Data Pengujian Aplikasi ... 28

BAB IV ANALISIS DAN HASIL PENELITIAN ... 29

4.1 Tahapan Perencanaan ... 29

4.1.1 Analisa Kebutuhan Masalah ... 29

4.1.2 Analisa Kebutuhan Sistem ... 32

4.1.3 Spesifikasi Sistem ... 33

4.2 Tahapan Perancangan dan Desain ... 35

4.2.1 Use Case Diagram ... 36

4.2.2 Activity Diagram ... 37

4.2.3 Class Diagram ... 40

4.2.4 Perancangan dan Struktur Database ... 40

4.2.5 Desain Antarmuka ... 47

(12)

xi

4.3 Tahapan Pembangunan Sistem ... 50

4.3.1 Instalasi Open Journal Systems di lokal web server. ... 50

4.3.2 Pembuatan Agent JMIS Chatbot ... 51

4.3.3 Pembuatan Intents ... 52

4.3.4 Pembuatan Halaman Rekomendasi Artikel ... 79

4.4 Tahapan Implementasi ... 86

4.4.1 Pemasangan Plugin Custom Header dan Footer ... 86

4.4.2 Pemasangan Widget Aplikasi Chatbot pada Situs Web ... 87

4.5 Tahapan Pengujian Aplikasi Chatbot ... 90

4.5.1 Pengujian Alpha Testing ... 90

4.5.2 Pengujian Closed Beta Testing ... 102

4.6 Hasil dan Pembahasan ... 105

4.6.1 Hasil Pengujian Alpha Testing ... 105

4.6.2 Hasil Pengujian Closed Beta Testing ... 105

BAB V SIMPULAN DAN SARAN ... 107

5.1 Simpulan ... 107

5.2 Saran ... 108

DAFTAR PUSTAKA ... 109

LAMPIRAN ... 112

(13)

xii

DAFTAR TABEL

Tabel 1.1 Perbandingan Penyedia Layanan Chatbot ... 4

Tabel 2.1 Penelitian Terdahulu ... 18

Tabel 3.1 Interpretasi Skor Skala Likert ... 28

Tabel 4.1 Tabel Functional Requirements Aplikasi Chatbot ... 32

Tabel 4.2 Tabel Functional Requirements Pengguna ... 33

Tabel 4.3 Tabel Spesifikasi Sistem Perangkat Keras ... 34

Tabel 4.4 Tabel Keterangan Variabel CSS Aplikasi Chatbot ... 88

Tabel 4.5 Tabel Keterangan Script Footer Aplikasi Chatbot ... 88

Tabel 4.6 Pengujian Black-Box Test ... 91

Tabel 4.7 Tabel Pengujian Skenario Aplikasi Chatbot ... 101

Tabel 4.8 Hasil Kuesioner Beta Testing ... 102

Tabel 4.9 Tabel Perhitungan Skor Hasil Kuesioner ... 103

(14)

xiii

DAFTAR GAMBAR

Gambar 1.1 Tren Pencarian Chatbot dari Google Trends Tahun 2004-2021 ... 2

Gambar 2.1 Logo Open Journal Systems ... 10

Gambar 2.2 Logo Dialogflow ... 11

Gambar 2.3 Diagram Penggunaan Context ... 13

Gambar 2.4 Alur Percakapan Dialogflow dengan Intent Matching ... 14

Gambar 2.5 Tampilan Dialogflow Messenger ... 15

Gambar 2.6 Tahapan Siklus Rapid Application Development ... 16

Gambar 3.1 Logo Situs Journal of Multidisciplinary Issues ... 21

Gambar 3.2 Halaman Utama Situs Journal of Multidisciplinary Issues ... 22

Gambar 3.3 Struktur Dewan Editor JMIS ... 23

Gambar 3.4 Diagram Alur Metode Penelitian ... 24

Gambar 4.1 Rancangan Alur dan Fitur Aplikasi Chatbot JMIS ... 30

Gambar 4.2 Tampilan Halaman Administrator Sistem Open Journal Systems .... 31

Gambar 4.3 Arsitektur Situs JMIS dengan Chatbot ... 35

Gambar 4.4 Use Case Diagram ... 36

Gambar 4.5 Activity Diagram Menambah Intent ... 37

Gambar 4.6 Activity Diagram User Berinteraksi dengan Chatbot ... 37

Gambar 4.7 Activity Diagram User Meminta Rekomendasi Artikel ... 39

Gambar 4.8 Class Diagram Fitur Rekomendasi Artikel ... 40

Gambar 4.9 Tabel Publications ... 41

Gambar 4.10 Tabel Publication_Settings ... 42

Gambar 4.11 Tabel Categories ... 43

Gambar 4.12 Tabel Category_Settings ... 44

Gambar 4.13 Tabel Publication_Categories ... 45

Gambar 4.14 Tabel Submissions... 46

Gambar 4.15 Tabel Metrics... 46

Gambar 4.16 Wireframe Design Penempatan Aplikasi Chatbot di JMIS ... 47

Gambar 4.17 Desain Tampilan Jendela Obrolan Chatbot ... 48

Gambar 4.18 Wireframe Design Halaman Rekomendasi Artikel ... 49

(15)

xiv

Gambar 4.19 Tahapan Instalasi Open Journal Systems ... 50

Gambar 4.20 Pembuatan Agent Chatbot ... 51

Gambar 4.21 Halaman Administrator Chatbot ... 51

Gambar 4.22 Respon Jawaban Intent Welcome ... 52

Gambar 4.23 Training Phrases Intent Hello ... 53

Gambar 4.24 Respon Jawaban Intent Hello ... 54

Gambar 4.25 Context pada Intent User Answer Name ... 54

Gambar 4.26 Training Phrases Intent User Answer Name ... 55

Gambar 4.27 Entity Nama Pengunjung ... 55

Gambar 4.28 Respon Jawaban Intent User Answer Name ... 56

Gambar 4.29 Respon Jawaban Intent User Answer Name dalam Bentuk List ... 56

Gambar 4.30 Training Phrases Intent Research Menu... 57

Gambar 4.31 Respon Jawaban Intent Researcher Menu ... 58

Gambar 4.32 Training Phrases untuk Intent How to Submit Article ... 59

Gambar 4.33 Respon Jawaban Intent How to Submit Article ... 60

Gambar 4.34 Respon Jawaban Intent How to Submit Article (Lanjutan) ... 60

Gambar 4.35 Training Phrases untuk Intent Pricing ... 61

Gmbar 4.36 Respon Jawaban Intent Pricing ... 62

Gambar 4.37 Training Phrases untuk Intent Information about Benefits ... 62

Gambar 4.38 Respon Jawaban Intent Information about Benefits ... 63

Gambar 4.39 Training Phrases untuk Article Template... 64

Gambar 4.40 Respon Jawaban Intent Article Journal Template ... 64

Gambar 4.41 Training Phrases untuk News and Deadline Information ... 65

Gambar 4.42 Respon Jawaban Intent News and Deadline Information ... 66

Gambar 4.43 Training Phrases untuk Intent Reader Menu ... 67

Gambar 4.44 Respon Jawaban Intent Reader Menu ... 68

Gambar 4.45 Training Phrases Intent Newest Articles ... 69

Gambar 4.46 Respon Jawaban Intent Newest Article ... 70

Gambar 4.47 Training Phrases Intent Based on Topics ... 70

Gambar 4.48 Respon Jawaban Intent Based on Topics ... 71

Gambar 4.49 Context pada Intent Nama Topik Artikel ... 71

(16)

xv

Gambar 4.50 Training Phrases untuk Intent Information Technology Topic ... 72

Gambar 4.51 Respon Jawaban untuk Intent Information Technology Topic ... 72

Gambar 4.52 Training Phrases untuk Intent Most Viewed Articles ... 73

Gambar 4.53 Respon Jawaban Intent Most Viewed Articles ... 74

Gambar 4.54 Training Phrases untuk Intent Reviewer Menu ... 74

Gambar 4.55 Respon Jawaban Intent Reviewer Menu ... 75

Gambar 4.56 Training Phrases untuk Intent How to Become a Reviewer ... 75

Gambar 4.57 Respon Jawaban untuk Intent How to Become a Reviewer... 76

Gambar 4.58 Training Phrases untuk Intent Contact Information ... 77

Gambar 4.59 Respon Jawaban Intent Contact Information ... 77

Gambar 4.60 Training Phrases untuk Intent Feedback ... 78

Gambar 4.61 Respon Jawaban Intent Feedback ... 79

Gambar 4.62 Kode Pembuatan Halaman Newest Articles ... 80

Gambar 4.63 Halaman Newest Articles ... 81

Gambar 4.64 Kode Pembuatan Halaman Most Viewed Articles ... 82

Gambar 4.65 Tampilan Halaman Most Viewed Articles ... 83

Gambar 4.66 Kode Pembuatan Halaman Articles Based on Topics ... 85

Gambar 4.67 Halaman Articles Based on Topics ... 86

Gambar 4.68 Plugin Custom Header dan Footer ... 86

Gambar 4.69 Kode Header dan Footer Chatbot ... 87

Gambar 4.70 Tampilan Situs JMIS dengan Aplikasi Chatbot ... 89

Gambar 4.71 Tampilan Jendela Obrolan Chatbot ... 90

(17)

xvi

DAFTAR LAMPIRAN

Lampiran 1 Screenshot Wawancara Bersama Pengelola Situs JMIS ... 112

Lampiran 2 Hasil Observasi Situs Jurnal SINTA-1 dan SINTA-2 ... 113

Lampiran 3 Hasil Kuesioner Closed Beta Testing ... 115

Lampiran 4 Hasil Pengecekan Turnitin ... 119

Lampiran 5 Form Bimbingan Skripsi 1 ... 120

Lampiran 6 Form Bimbingan Skripsi 2 ... 122