Membangun klien Django frontend untuk aplikasi Dialogflow

1. Sebelum memulai

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

  • Download, siapkan, dan jalankan klien frontend Django.
  • Siapkan endpoint Dialogflow detectIntent yang akan dipanggil dari klien frontend Django.
  • Men-deploy aplikasi ke Google Cloud di App Engine.
  • Uji apakah undangan Kalender sedang disiapkan per permintaan pengguna.

Prasyarat

Sebelum melanjutkan, Anda harus menyelesaikan codelab berikut:

  1. Membuat penjadwal janji temu dengan Dialogflow
  2. Memahami entity di Dialogflow
  3. Memahami fulfillment 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

2. Ringkasan arsitektur

Anda akan menggunakan pengalaman percakapan Penjadwalan Janji Temu yang sebelumnya Anda buat dan membuat frontend kustom untuk aplikasi. Anda akan membangun 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 menyiapkan janji temu pada tanggal dan waktu yang diminta. fulfillment Dialogflow kemudian akan mengirimkan permintaan ke Kalender untuk menetapkan janji temu masing-masing dan menampilkan konfirmasi kepada pengguna melalui Dialogflow.

84515171be610d4.pngS

Hasil akhirnya akan terlihat seperti ini:

7146cd729c50f7c1.pngS

3. Mendownload dan menjalankan aplikasi frontend

  1. Clone repositori ke komputer lokal Anda dengan mengetikkan perintah ini di terminal lokal komputer Anda:
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. Ubah ke direktori yang berisi kode. Atau, Anda dapat mendownload sampel sebagai zip dan mengekstraknya.
cd Django-Dialogflow-Appointment-Scheduler

4. Menyiapkan lingkungan lokal Anda

Saat di-deploy, aplikasi Anda menggunakan Proxy Cloud SQL yang terintegrasi 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 artikel Tentang Proxy Cloud SQL.

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

Menginstal Proxy Cloud SQL

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

Download proxy.

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

Jadikan proxy sebagai file yang dapat dieksekusi.

chmod +x cloud_sql_proxy

Membuat instance Cloud SQL

  1. Membuat instance Cloud SQL untuk MySQL Generasi Kedua. Beri nama instance "polls-instance" atau yang serupa. Butuh waktu beberapa menit hingga instance siap. Setelah siap, instance tersebut akan terlihat dalam 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.

c11e94464bf4fcf8.png

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 database dan pengguna Cloud SQL baru.

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

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. Langkah ini membantu menyiapkan koneksi ke database untuk deployment App Engine dan pengujian lokal.
  3. Pada 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]
  1. Ganti [YOUR-CONNECTION-NAME] dengan nilai yang Anda catat di bagian sebelumnya.
  2. 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]
  1. Tutup dan simpan settings.py.

5. Pembuatan akun layanan

  1. Di konsol Dialogflow, klik e8a0a7d752849e01.png. Di tab Umum di samping Project ID, klik Google Cloud a9c6ff6374afe489.png.
  2. Klik Menu navigasi ⋮ > API & Layanan > Kredensial.
  3. Klik Create Credentials > Akun layanan. 86f51af0e7886fdd.pngS
  4. Di Detail akun layanan, masukkan "penjadwal janji temu" sebagai Service account name, lalu klik Create.

845d25f3e07ff770.pngS

  1. Jika muncul pesan Berikan akun layanan ini akses ke project, klik Lanjutkan untuk melewatinya.
  2. Jika tertulis Berikan pengguna akses ke akun layanan ini (opsional), klik Buat Kunci > JSON > Buat.

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

a424cec60144d707.png

6. Menyiapkan endpoint Dialogflow detectIntent untuk dipanggil dari aplikasi

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

7. Membangun dan menjalankan aplikasi secara lokal

Untuk menjalankan aplikasi Django di komputer lokal, Anda harus menyiapkan lingkungan pengembangan Python, termasuk Python, pip, dan virtualenv. Untuk mendapatkan petunjuk, 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
  1. Jalankan migrasi Django untuk menyiapkan model Anda.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. Mulai server web lokal.
python3 manage.py runserver
  1. Di browser web, masukkan http://localhost:8000/. Anda akan melihat halaman web sederhana seperti yang terlihat di screenshot berikut:

d40910969aa71020.png

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

8. Men-deploy aplikasi ke lingkungan standar App Engine

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 pembaruan telah selesai.

9. Menguji klien frontend

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

Kali ini, permintaan Anda dilayani 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 menyebabkannya menyalurkan semua traffic baru.

10. Produksi

11. Jika Anda sudah siap menayangkan konten dalam produksi, ubah variabel DEBUG ke False di mysite/settings.py.

12. Uji chatbot Anda

Buka https://<your_project_id>.appspot.com dan masukkan kode berikut:

  1. Pengguna: "Tetapkan janji temu untuk pendaftaran kendaraan pukul 3 sore besok".
  2. Chatbot merespons sebagai berikut:

3b0abfec8f4ba279.pngS

  1. Kalender akan memesan respons.

eb49089765b84fc6.png

13. Pembersihan

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

Menghapus agen Dialogflow

  1. Klik e8a0a7d752849e01.png di samping agen yang ada.
  2. 520c1c6bb9f46ea6.pngS
  3. Di tab Umum, scroll ke bagian bawah, lalu klik Hapus Agen Ini.
  4. Ketik Delete di jendela yang muncul, lalu klik Delete.

14. Selamat

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

Pelajari lebih lanjut

Lihat referensi berikut untuk mempelajari lebih lanjut: