Menghosting agen Anda

Langkah terakhir dalam tutorial ini adalah menghosting agen Dialogflow Anda. App Engine digunakan untuk hosting, karena mudah disiapkan dan diskalakan dengan baik. Integrasi Dialogflow Messenger digunakan untuk antarmuka pengguna agen.

Konfigurasi project

Idealnya, agen Dialogflow dan instance App Engine Anda berada dalam project yang sama. Selain itu, Anda harus mengaktifkan Cloud Build API.

  1. Sebelum membuat instance, pilih project Anda dari konsol Google Cloud.

    Buka pemilih project

  2. Aktifkan Cloud Build API untuk project.

    Mengaktifkan Cloud Build API

Penyiapan lingkungan

Anda perlu menginstal dan mengonfigurasi beberapa hal untuk mengembangkan aplikasi Go untuk App Engine. Ikuti langkah-langkah yang belum Anda selesaikan di Menyiapkan lingkungan pengembangan.

Membuat kode layanan web

Kode contoh untuk tutorial ini ditulis dalam Go, tetapi Anda dapat menggunakan bahasa apa pun yang didukung oleh App Engine. Buat struktur file berikut di mana saja di komputer lokal Anda:

  • go-app/: direktori untuk layanan Go Anda.
    • templates/: direktori untuk template HTML Go Anda.
      • index.html: Template HTML Go.
    • app.yaml: Setelan konfigurasi layanan Anda.
    • main.go: Kode aplikasi Anda.

Tiga bagian berikutnya memberikan konten untuk ketiga file tersebut.

Konten file index.html

File template HTML Go ini berisi HTML untuk halaman beranda. Isi file ini dengan konten berikut:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tutorial agent</title>
  </head>
  <body>
    <p>Open the chat window in the bottom right corner.</p>
  </body>
</html>

Konten file app.yaml

Ini adalah file konfigurasi yang menentukan setelan lingkungan runtime layanan Anda. Anda dapat mereferensikan dokumen Lingkungan Runtime Go 1.12+ untuk melihat daftar versi Go yang didukung. Isi file ini dengan konten berikut:

runtime: go116  # or another supported version

Konten file main.go

File ini berisi kode aplikasi Anda. Isi file ini dengan konten berikut:

// Package main is the main package
package main

import (
	"log"
	"net/http"
	"os"
	"text/template"
)

var templates *template.Template

func init() {
	templates = template.Must(template.New("").ParseGlob("templates/*"))
}

// indexHandler handles the homepage.
func indexHandler(w http.ResponseWriter, r *http.Request) {
	if r.URL.Path != "/" {
		http.NotFound(w, r)
		return
	}
	if err := templates.ExecuteTemplate(w, "index.html", nil); err != nil {
		log.Fatal(err)
	}
}

func main() {
	// Register the handlers
	http.HandleFunc("/", indexHandler)

	port := os.Getenv("PORT")
	if port == "" {
		port = "8080"
		log.Printf("Defaulting to port %s", port)
	}

	log.Printf("Listening on port %s", port)
	if err := http.ListenAndServe(":"+port, nil); err != nil {
		log.Fatal(err)
	}
}

Men-deploy layanan web Anda

Kode Anda sekarang siap di-deploy. Langkah-langkah ini menggunakan alat gcloud untuk deployment:

  1. Pastikan gcloud dikonfigurasi dengan project yang sama dengan agen Dialogflow Anda. Untuk memeriksa project:

    gcloud config get-value project

    Untuk mengubah project:

    gcloud config set project YOUR_PROJECT
  2. Di direktori go-app tempat file app.yaml Anda berada, deploy layanan web Anda ke App Engine menggunakan perintah berikut:

    gcloud app deploy

    Perintah tersebut akan meminta Anda untuk memasukkan region. Pastikan untuk memilih region yang sama dengan agen Dialogflow Anda. Perintah ini akan menghasilkan nilai target url, yang merupakan URL untuk layanan web Anda.

  3. Untuk meluncurkan browser dan melihat layanan web, Anda dapat membuka URL target dari langkah sebelumnya, atau menjalankan perintah berikut:

    gcloud app browse

Menyiapkan Messenger Dialogflow

Untuk menyiapkan akses yang tidak diautentikasi ke agen Messenger Dialogflow CX:

  1. Buka konsol Dialogflow CX.
  2. Pilih project Google Cloud Anda.
  3. Pilih agen Anda.
  4. Pilih tab Kelola.
  5. Klik Integrations di menu sidebar kiri.
  6. Klik Connect di Dialogflow CX Messenger.
  7. Dialog konfigurasi akan terbuka.
  8. Jika integrasi sebelumnya disiapkan untuk agen ini, Anda akan melihat kode HTML yang dapat disematkan. Terlepas dari apakah Anda menginginkan autentikasi atau tidak, klik tombol Nonaktifkan... di bagian bawah dialog, sehingga Anda dapat mengonfigurasi ulang setelan di langkah berikutnya.
  9. Pilih Environment.
  10. Pilih Unauthenticated API.
  11. Pilih gaya.
  12. Membatasi akses domain secara opsional.
  13. Klik Enable the unauthenticated API.
  14. Dialog akan menampilkan kode HTML yang dapat disematkan yang dapat disematkan di situs Anda. Salin kode ini.
  15. Klik Done.

Menyematkan agen di layanan web Anda

Tempel kode sematan yang Anda salin di atas dalam file index.html. Elemen HTML <script> dan <df-messenger> harus berada di elemen <body> halaman Anda.

Deploy aplikasi layanan web Anda lagi dengan gcloud. Setelah di-deploy, Anda dapat berinteraksi dengan agen melalui halaman web dengan mengklik ikon chat di pojok kanan bawah.

Screenshot agen Dialogflow yang disematkan di halaman web

Sekarang Anda memiliki agen Dialogflow yang di-deploy sepenuhnya. Coba lakukan percakapan dengan agen.

Pembersihan

Saat mengikuti langkah-langkah tutorial ini, Anda telah membuat resource yang dapat ditagih. Agar tidak menimbulkan biaya tambahan pada akun Google Cloud Anda:

  1. Hapus instance database Anda.
  2. Hapus fungsi Anda:

    gcloud functions delete tutorial-telecommunications-webhook
  3. Nonaktifkan aplikasi Anda.

  4. Menghapus agen

Informasi selengkapnya

Untuk informasi selengkapnya tentang langkah-langkah di atas, lihat: