Membangun klien Django frontend untuk aplikasi Dialogflow

Dalam codelab ini, Anda akan mempelajari cara membuat klien Django frontend untuk menciptakan pengalaman percakapan bagi aplikasi Dialogflow. Secara khusus, Anda akan melakukan hal berikut:

• Download, siapkan, dan jalankan klien frontend Django.
• Siapkan endpoint detectIntent Dialogflow untuk dipanggil dari klien frontend Django.
• Deploy aplikasi ke Google Cloud di App Engine.
• Uji apakah undangan Kalender disiapkan sesuai permintaan pengguna.

Prasyarat

Sebelum melanjutkan, Anda harus menyelesaikan codelab berikut:

1. Membangun penjadwal janji temu dengan Dialogflow
2. Memahami entity di Dialogflow
3. Memahami pemenuhan dengan mengintegrasikan Dialogflow dengan Kalender

Yang akan Anda pelajari

• Cara menyiapkan dan menjalankan klien frontend Django untuk Dialogflow
• Cara men-deploy klien frontend Django ke Google Cloud di App Engine
• Cara menguji aplikasi Dialogflow dari frontend kustom

Yang akan Anda build

• Anda akan menyiapkan dan menjalankan klien frontend Django untuk Dialogflow.
• Anda akan men-deploy klien frontend Django ke Google Cloud di App Engine.
• Anda akan menguji aplikasi Dialogflow dari frontend kustom tersebut.

Yang Anda butuhkan

• Pemahaman dasar tentang Python
• Pemahaman dasar tentang Dialogflow

Anda akan menggunakan pengalaman percakapan Penjadwal Janji Temu yang sebelumnya Anda buat dan membuat frontend kustom untuk aplikasi. Anda akan membuat frontend dengan Django, menjalankan dan mengujinya secara lokal, serta men-deploy-nya ke App Engine.

Pengguna akan mengirim permintaan janji temu melalui frontend, yang akan memanggil Dialogflow detectIntent API untuk mengatur janji temu pada tanggal dan waktu yang diminta. Kemudian, pemenuhan Dialogflow akan mengirimkan permintaan ke Kalender untuk mengatur janji temu yang sesuai dan mengembalikan konfirmasi kepada pengguna melalui Dialogflow.

Hasil akhirnya akan terlihat seperti ini:

1. Clone repositori ke komputer lokal Anda dengan mengetik perintah ini di terminal lokal komputer Anda:

git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git

2. Ubah ke direktori yang berisi kode. Atau, Anda dapat mendownload contoh sebagai file ZIP dan mengekstraknya.

cd Django-Dialogflow-Appointment-Scheduler

Saat di-deploy, aplikasi Anda menggunakan Proxy Cloud SQL yang dibuat ke dalam lingkungan standar App Engine untuk berkomunikasi dengan instance Cloud SQL. Namun, untuk menguji aplikasi secara lokal, Anda harus menginstal dan menggunakan salinan lokal Proxy Cloud SQL di lingkungan pengembangan Anda. Untuk mengetahui informasi selengkapnya, lihat Tentang Proxy Cloud SQL.

Untuk melakukan tugas admin dasar pada instance Cloud SQL, Anda dapat menggunakan klien Cloud SQL untuk MySQL.

Catatan: Anda harus mengautentikasi alat command line gcloud untuk menggunakan proxy guna terhubung dari mesin lokal Anda.

Menginstal Proxy Cloud SQL

Download dan instal Proxy Cloud SQL. Proxy Cloud SQL digunakan untuk terhubung ke instance Cloud SQL saat berjalan secara lokal.

Download proxy.

curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

Jadikan proxy dapat dieksekusi.

chmod +x cloud_sql_proxy

Membuat instance Cloud SQL

1. Buat instance Cloud SQL untuk MySQL Generasi Kedua. Beri nama instance "polls-instance" atau yang serupa. Mungkin perlu waktu beberapa menit hingga instance siap. Setelah siap, instance akan terlihat di daftar instance.
2. Gunakan alat gcloud untuk menjalankan perintah berikut dengan [YOUR_INSTANCE_NAME] mewakili nama instance Anda. Catat nilai yang ditampilkan untuk nama koneksi instance untuk langkah berikutnya, yang ditampilkan dalam format [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME].

gcloud sql instances describe [YOUR_INSTANCE_NAME]

Atau, Anda dapat mengklik instance untuk melihat Nama koneksi instance.

Menginisialisasi instance Cloud SQL

Mulai Proxy Cloud SQL dengan menggunakan nama koneksi instance dari langkah sebelumnya. Ganti [YOUR_INSTANCE_CONNECTION_NAME] dengan nilai yang Anda catat di langkah sebelumnya. Tindakan ini akan membuat koneksi dari komputer lokal ke instance Anda untuk tujuan pengujian lokal. Biarkan Proxy Cloud SQL tetap berjalan saat Anda menguji aplikasi secara lokal.

./cloud_sql_proxy -instances="[YOUR_INSTANCE_CONNECTION_NAME]"=tcp:3306

Selanjutnya, buat pengguna dan database Cloud SQL baru.

1. Buat database baru menggunakan Konsol Google Cloud untuk instance Cloud SQL Anda yang bernama polls-instance. Misalnya, Anda dapat memasukkan "polling" sebagai nama.
2. Buat akun pengguna baru menggunakan Konsol Cloud untuk instance Cloud SQL Anda yang bernama polls-instance.

Mengonfigurasi setelan database

1. Buka mysite/settings.py untuk mengedit.
2. Di dua tempat, ganti [YOUR-USERNAME] dan [YOUR-PASSWORD] dengan nama pengguna dan sandi database yang Anda buat di bagian sebelumnya. Hal ini membantu menyiapkan koneksi ke database untuk deployment App Engine dan pengujian lokal.
3. Di baris yang bertuliskan, ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME],' ganti [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME] dengan nilai yang Anda catat di bagian sebelumnya.
4. Jalankan perintah berikut dan salin nilai nama koneksi instance yang dihasilkan untuk langkah berikutnya.

gcloud sql instances describe [YOUR_INSTANCE_NAME]

5. Ganti [YOUR-CONNECTION-NAME] dengan nilai yang Anda catat di bagian sebelumnya.
6. Ganti [YOUR-DATABASE] dengan nama yang Anda pilih di bagian sebelumnya.

# [START db_setup]
if os.getenv('GAE_APPLICATION', None):
    # Running on production App Engine, so connect to Google Cloud SQL using
    # the unix socket at /cloudsql/<your-cloudsql-connection string>
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
        }
    }
else:
    # Running locally so connect to either a local MySQL instance or connect to
    # Cloud SQL via the proxy. To start the proxy via command line:
    #     $ cloud_sql_proxy -instances=[INSTANCE_CONNECTION_NAME]=tcp:3306
    # See https://cloud.google.com/sql/docs/mysql-connect-proxy
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '127.0.0.1',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
        }
    }
# [END db_setup]

7. Tutup dan simpan settings.py.

1. Di konsol Dialogflow, klik . Di tab Umum di samping Project ID, klik Google Cloud .
2. Klik Navigation menu ☰ > APIs & Services > Credentials.
3. Klik Buat Kredensial > Akun layanan.
4. Di Service account details, masukkan "appointment-scheduler" sebagai Service account name, lalu klik Create.

5. Di bagian Berikan akses project ke akun layanan ini, klik Lanjutkan untuk melewatinya.
6. Di bagian Beri pengguna akses ke akun layanan ini (opsional), klik Buat Kunci > JSON > Buat.

File JSON akan didownload ke komputer Anda, yang akan Anda perlukan di bagian penyiapan berikut.

1. Di folder chat, ganti AppointmentScheduler.json dengan file JSON kredensial Anda.
2. Di views.py dalam folder chat, ubah GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" ke project ID Anda.

Untuk menjalankan aplikasi Django di komputer lokal, Anda harus menyiapkan lingkungan pengembangan Python, termasuk Python, pip, dan virtualenv. Untuk mengetahui petunjuknya, lihat Menyiapkan Lingkungan Pengembangan Python.

1. Buat lingkungan Python yang terisolasi dan instal dependensi:

virtualenv env
source env/bin/activate
pip install -r requirements.txt

2. Jalankan migrasi Django untuk menyiapkan model Anda.

python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate

3. Mulai server web lokal.

python3 manage.py runserver

4. Di browser web Anda, masukkan http://localhost:8000/. Anda akan melihat halaman web sederhana seperti yang terlihat pada screenshot berikut:

Halaman aplikasi contoh dikirim oleh server web Django yang berjalan di komputer Anda. Jika Anda sudah siap untuk melanjutkan, tekan Control+S (Command+S di Macintosh) untuk menghentikan server web lokal.

Jalankan perintah berikut untuk memindahkan semua file statis aplikasi ke dalam folder yang ditentukan oleh STATIC_ROOT di settings.py:

python3 manage.py collectstatic

Upload aplikasi dengan menjalankan perintah berikut di direktori aplikasi tempat file app.yaml berada:

gcloud app deploy

Tunggu pesan yang memberi tahu Anda bahwa update telah selesai.

Di browser web Anda, masukkan https://<your_project_id>.appspot.com.

Kali ini, permintaan Anda ditayangkan oleh server web yang berjalan di lingkungan standar App Engine.

Perintah app deploy men-deploy aplikasi seperti yang dijelaskan dalam app.yaml dan menetapkan versi yang baru di-deploy sebagai versi default, sehingga versi tersebut akan melayani semua traffic baru.

Buka https://<your_project_id>.appspot.com, lalu masukkan berikut ini:

1. Pengguna: "Buat janji untuk pendaftaran kendaraan besok pukul 15.00."
2. Chatbot akan merespons sebagai berikut:

3. Kalender akan mencatat respons tersebut.

Jika Anda berencana menyelesaikan codelab Dialogflow lainnya, lewati bagian ini untuk saat ini dan kembali lagi nanti.

Menghapus agen Dialogflow

1. Klik di samping agen yang ada.

1. 
2. Di tab Umum, scroll ke bagian bawah, lalu klik Hapus Agen Ini.
3. Ketik Hapus di jendela yang muncul, lalu klik Hapus.

Anda telah membuat chatbot di Dialogflow dan mengintegrasikannya dengan Kalender. Anda sekarang menjadi developer chatbot.

Pelajari lebih lanjut

Lihat referensi berikut untuk mempelajari lebih lanjut:

• Mengintegrasikan Vision API dengan Dialogflow
• Contoh kode di halaman Dialogflow GitHub