Beli Online Ambil Di Toko: Bonjour Meal - Bagian 1 - Memulai

1. Pengantar

Terakhir Diperbarui: 11-05-2022

Selamat datang di Business Messages.

Codelab ini adalah pengantar untuk berintegrasi dengan Business Messages, yang memungkinkan pelanggan terhubung dengan bisnis yang Anda kelola melalui Google Penelusuran dan Maps. Anda mungkin adalah bisnis yang ingin berintegrasi dengan Business Messages secara langsung, atau mungkin Anda bekerja di vendor software independen yang membuat solusi pesan untuk bisnis yang bekerja sama dengan Anda, atau mungkin Anda baru saja menemukan Business Messages dan ingin mencoba platform ini.

Apa pun yang membawa Anda ke sini, codelab ini adalah cara yang bagus untuk memulai. Pada akhirnya, Anda akan memiliki agen digital pertama yang dapat berinteraksi dengan pengguna. Setelah siap meluncurkan di Business Messages setelah sedikit lebih banyak penyempurnaan, Anda akan memiliki potensi untuk menjangkau jutaan pelanggan.

Catatan: Daftar ke Business Messages melalui Konsol Developer Business Communications untuk memulai.

Catatan: Jika Anda bergabung ke codelab ini dari Google I/O, selamat datang! Codelab ini akan memandu Anda menggunakan platform Business Messages dan akan memberi Anda pemahaman menyeluruh tentang cara menerima dan mengirim pesan melalui platform percakapan Business Messages.

Apa yang membuat agen digital menjadi baik?

Business Messages adalah platform percakapan yang memberikan pengalaman seperti aplikasi di perangkat seluler yang memungkinkan konsumen terhubung dengan bisnis tanpa menginstal aplikasi tambahan. Agen digital adalah bagian logika yang berinteraksi dengan pelanggan Anda. Logika dikelola oleh aplikasi web yang di-deploy di cloud atau di infrastruktur Anda. Anda sepenuhnya bebas menentukan cara merespons pengguna. Agen terbaik memberikan konteks untuk menetapkan ekspektasi, menjaga engagement pelanggan, dan memberikan fungsi untuk mendukung kebutuhan pengguna.

Yang akan Anda bangun

Dalam codelab ini, Anda akan membuat agen digital di Business Messages untuk perusahaan fiktif bernama Bonjour Meal. Agen digital ini akan merespons beberapa pertanyaan sederhana seperti "Jam berapa Anda tutup?" atau "Dapatkah saya membeli secara online?".

Dalam codelab ini, pengguna Anda akan dapat membeli item melalui agen digital, mengarahkan pengguna ke pemroses pembayaran untuk mengumpulkan uang, lalu menjadwalkan pengambilan item fiktif mereka di toko.

Dalam codelab ini, aplikasi Anda akan

• Menanggapi pertanyaan melalui Chip Saran
• Membimbing pengguna untuk mengajukan pertanyaan yang dapat dijawab oleh agen digital Anda
• Berikan fitur percakapan yang kaya untuk membuat pengguna tetap berinteraksi dalam percakapan

Catatan: Untuk menyederhanakan codelab ini dan menjelaskan dasar-dasar pembuatan pengalaman Business Messages yang menarik, kami menggunakan Google Cloud Platform (GCP) untuk men-deploy aplikasi web guna mendukung infrastruktur agen. Meskipun GCP adalah pilihan tepat untuk men-deploy aplikasi web Anda, tidak ada batasan untuk menggunakannya.

Yang akan Anda pelajari

• Cara men-deploy aplikasi web di App Engine pada Google Cloud Platform. Atau, Anda dapat menggunakan ngrok untuk menguji aplikasi lokal secara publik.
• Cara mengonfigurasi akun Business Messages dengan webhook aplikasi web untuk menerima pesan dari pengguna
• Cara mengirim fitur lengkap seperti kartu, carousel, dan saran percakapan dengan Business Messages API
• Cara Business Messages mengirim pesan Anda

Codelab ini berfokus pada pembuatan agen digital pertama Anda.

Yang Anda butuhkan

• Mendaftar untuk mendapatkan akun developer Business Communications gratis
• Lihat situs developer kami untuk mendapatkan petunjuk terkait cara
• Perangkat Android dengan versi 5 atau yang lebih tinggi ATAU perangkat iOS dengan aplikasi Google Maps
• Pengalaman dengan pemrograman aplikasi web
• Koneksi internet.

2. Mempersiapkan

Catatan: Anda dapat menggunakan Business Communications API untuk menyelesaikan semua tugas yang dijelaskan dalam codelab ini; namun, kita akan memanfaatkan Business Communications Developer Console untuk mengurangi kompleksitas tugas yang sedang dihadapi. Jika opsi untuk menggunakan API tersedia, kami akan memberi tahu Anda dan mereferensikannya dalam dokumen kami.

Aktifkan API

Untuk codelab ini, karena kita akan menggunakan aplikasi Django, kita akan mengandalkan Cloud Build API untuk men-deploy aplikasi ke App Engine. Atau, jika Anda menggunakan ngrok, Anda tidak perlu mengaktifkan Cloud Build API.

Untuk mengaktifkan Cloud Build API:

1. Buka Cloud Build API di Google Cloud Console.
2. Klik Aktifkan.

Membuat akun layanan

Anda perlu membuat akun layanan untuk mengakses Business Communications API dan Business Messages API. Ikuti langkah-langkah dalam dokumentasi untuk membuat akun layanan dalam Business Communications Developer Console.

Men-deploy Kode Awal Django Python EchoBot

Di terminal, clone Django Echo Bot Sample ke direktori kerja project dengan perintah berikut:

$ git clone https://github.com/google-business-communications/bm-bonjour-meal-django-starter-code

Salin file kredensial JSON yang dibuat untuk akun layanan ke dalam folder referensi sampel, lalu ganti nama kredensial menjadi "bm-agent-service-account-credentials.json".

bm-bonjour-meal-django-starter-code/bonjourmeal-codelab/step-1/resources/bm-agent-service-account-credentials.json

Di terminal, buka direktori langkah 1 sampel.

Jalankan perintah berikut di terminal untuk men-deploy sampel:

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy

• PROJECT_ID merupakan project ID untuk project yang Anda gunakan untuk mendaftar ke API.

Perhatikan URL aplikasi yang di-deploy dalam output perintah terakhir:

Deployed service [default] to [https://PROJECT_ID.appspot.com]

Kode awal yang baru saja Anda deploy berisi aplikasi web dengan webhook untuk menerima pesan dari Business Messages. Aplikasi akan merespons pesan kembali kepada pengguna dan dapat menampilkan beberapa fitur lengkap yang tersedia di platform percakapan.

Mengonfigurasi webook

Setelah layanan di-deploy, Anda akan menggunakan URL aplikasi untuk menetapkan URL webhook di halaman Setelan akun di Konsol Developer Business Communications.

URL webhook akan berupa URL aplikasi + "/callback/". Misalnya, URL-nya mungkin seperti ini: https://PROJECT_ID.appspot.com/callback/

Buka halaman Setelan akun di Konsol Komunikasi Bisnis. Di pojok kanan atas di bawah menu navigasi, Anda akan melihat nama project GCP. Jika Anda melihat menu drop-down, pastikan untuk memilih project GCP Anda.

Isi detail Kontak teknis, lalu perbarui Webhook dengan URL webhook untuk aplikasi yang di-deploy.

Klik Simpan di samping referensi project GCP Anda.

3. Membuat Agen pertama Anda

Menggunakan Konsol Developer Business Communications

Di Business Communications Console, klik logo di kiri atas untuk kembali ke dasbor konsol, lalu klik Create agent. Anda membuat brand bersamaan dengan membuat agen. Pilih Pesan Bisnis untuk Jenis agen dan pastikan Informasi partner sudah benar.

Di Brand, ketik nama brand yang Anda buat.Brand adalah bisnis yang bekerja sama dengan Anda dan konsumen dapat berinteraksi secara percakapan dengan agen. Di Nama agen, tentukan nama yang ingin Anda tampilkan kepada pengguna dalam percakapan Business Messages. Dalam kasus Bonjour Meal fiktif, Bonjour Rail adalah perusahaan kereta api yang mengelola restoran Bonjour Meal. Jadi, saya akan menentukan Bonjour Rail sebagai merek dan Bonjour Meal sebagai agen.

Agen adalah entitas percakapan yang mewakili merek.

Klik Buat agen dan biarkan konsol melakukan beberapa hal. Permintaan ini memerlukan waktu beberapa detik untuk membuat beberapa permintaan ke Business Communications API guna membuat merek dan agen. Anda dapat menggunakan Business Communications API secara langsung untuk membuat agen dan membuat merek. Lihat dokumentasi untuk melihat tampilan permintaan curl yang melakukan hal yang sama dengan yang dilakukan konsol.

Melakukan percakapan pertama

Buka agen yang baru saja Anda buat, Anda akan melihat halaman Ringkasan yang memungkinkan Anda mulai meninjau detail agen. Lihat URL pengujian Agen. URL ini digunakan untuk memanggil platform percakapan di perangkat Anda.

Anda dapat menyalin URL pengujian dengan mengklik salah satu chip. Tentu saja, salin URL pengujian untuk perangkat yang Anda miliki untuk diuji. Kirim pesan yang disalin ini ke perangkat Anda dengan cara yang Anda inginkan.

Setelah di perangkat seluler, mengetuk link akan memanggil Peluncur Agen Business Messages dengan URL pengujian agen Anda yang telah diisi otomatis.

Ketuk Luncurkan untuk memanggil platform percakapan agen Anda.

Berinteraksilah dengan agen dan rasakan kemampuannya. Pada umumnya, Anda akan mendapati bahwa platform percakapan hanya akan mengulangi pesan Anda. Kirim pesan seperti "Halo, Dunia!" dan Anda akan melihat bahwa agen akan mengirimkan pesan yang sama kepada Anda.

Aplikasi yang di-deploy juga berisi beberapa logika untuk menampilkan berbagai fitur yang tersedia di Business Messages.

• Jika mengirim "card", Anda akan memanggil kartu informasi
• Jika mengirim "chip", Anda akan memanggil chip saran
• Jika mengirim "carousel", Anda akan memanggil carousel kartu informasi

Selamat! Ini adalah percakapan pertama agen Anda, dengan Anda.

Setiap fitur yang kaya dapat digunakan untuk memberikan konteks yang lebih baik kepada orang yang berkomunikasi dengan agen Anda. Kirim aset grafis dalam kartu lengkap untuk menyampaikan ide dengan lebih baik, atau gunakan chip saran untuk memandu percakapan.

Memperbarui pesan selamat datang dan menggunakan chip percakapan

Mari kita berlatih menggunakan Konsol Play, lihat cara mengedit pesan selamat datang agen, dan memanfaatkan chip saran untuk membantu pengguna berkomunikasi.

Buka halaman Ringkasan agen, lalu pilih Informasi agen. Scroll ke bawah ke bagian pesan selamat datang dan pembuka percakapan.

Perbarui pesan selamat datang (kolom input berwarna kuning) menjadi:

Selamat datang di agen pemicu Bonjour Meal. Saya dapat mengulang pesan Anda dan menunjukkan beberapa fitur lengkap yang didukung di platform ini. Coba saran berikut.

Klik + Tambahkan pembuka percakapan seperti yang dirujuk dalam kotak ungu pada gambar di atas untuk menambahkan pembuka percakapan guna memanggil chip saran, carousel, dan kartu. Pemicu percakapan yang Anda tambahkan memerlukan komponen teks dan komponen postbackData. Teks adalah yang ditampilkan kepada pengguna, sedangkan data postBack adalah yang dikirim ke webhook agen Anda. Webhook mengurai data postback dan akan mengirim respons yang sesuai kepada pengguna.

Informasi agen di konsol akan terlihat seperti ini setelah modifikasi:

Di sisi kanan konsol, Anda akan melihat pratinjau tampilan agen. Perhatikan bagaimana pesan selamat datang mencerminkan nama yang baru saja Anda ubah dan chip saran yang ada di bawahnya?

Ini adalah alat yang bagus untuk mendapatkan gambaran tentang pengalaman pengguna. Anda dapat menggunakannya saat membuat agen dan merencanakan perjalanan pengguna yang ingin didukung.

Sayangnya, kita tidak akan dapat melihat perubahan ini langsung diterapkan dalam percakapan, karena data sebelumnya di-cache dalam infrastruktur Business Messages. Cache dihapus sekitar setiap 2 jam, jadi Anda dapat mencobanya besok.

Sementara itu, mari kita lihat cara kerjanya.

4. Menganalisis kode awal

Opsional: Bagian ini hanya bersifat informatif. Anda dapat mempelajari sedikit tentang Django saat kita memeriksa kode sumber bersama-sama. Anda juga dapat mendapatkan gambaran tentang cara pesan diterima di webhook dan cara respons dikirim kembali menggunakan Python API.

Gambaran umum kode sumber

Kode awal yang Anda deploy akan memunculkan pesan kembali kepada pengguna dan dapat menampilkan kartu lengkap, carousel, atau chip saran. Mari kita pelajari lebih lanjut kode sumber agar dapat memahami cara kerjanya. Kemudian, kita akan mencari tahu hal yang perlu diubah.

Kode awal adalah project Django. Di bagian selanjutnya dari rangkaian codelab ini, kita akan menggunakan Google Datastore untuk mempertahankan data seperti keranjang belanja dan percakapan terkait. Jangan khawatir jika Anda belum pernah menggunakan Django sebelumnya. Django cukup mudah digunakan, dan pada akhir codelab ini, Anda akan mempelajari cara kerjanya.

Pada tingkat tinggi, Django akan merutekan URL ke tampilan, dan logika tampilan menghasilkan template yang dirender di browser. Mari kita lihat urls.py project.

bm-django-echo-bot/bmcodelab/urls.py [Baris 31-37]

from django.urls import include, path
import bopis.views as bopis_views

urlpatterns = [
    path('', bopis_views.landing_placeholder),
    path('callback/', bopis_views.callback),
]

Dua rute ditentukan di sini, sehingga Django dapat menjalankan logika jika kedua URL tersebut dikenali. Dengan URL project https://PROJECT_ID.appspot.com/, rute yang diketahui project adalah:

• https://PROJECT_ID.appspot.com/
• https://PROJECT_ID.appspot.com/callback/

Kedua rute URL merujuk ke bopis_views yang berasal dari bopis/views.py. Mari kita lihat apa yang terjadi dalam file ini. Untuk memulai, mari kita pahami bopis_views.landing_placeholder terlebih dahulu.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [Baris 302-309]

... 
def landing_placeholder(request):
    return HttpResponse("<h1>Welcome to the Bonjour Meal Codelab</h1>
    <br/><br/>
    To message your Bonjour Meal agent, go to the Developer Console and retrieve
    the Test URLs for the agent you have created as described in the codelab
    <a href='https://codelabs.developers.google.com/codelabs/'>here</a>.")
...

Bagian logika ini dijalankan oleh server web Anda saat menerima permintaan web yang mengarah ke root project. Tidak ada hal yang terlalu rumit di sini: kita hanya menampilkan HTTPResponse yang berisi beberapa HTML kembali ke browser yang membuat permintaan. Jadi, ya, Anda memang dapat membuka URL root project, tetapi tidak ada banyak hal yang dapat dilakukan di sana karena akan membawa Anda kembali ke codelab ini.

URL lainnya dirutekan ke fungsi bernama callback, juga di bopis/views.py. Jadi, mari kita lihat fungsi tersebut.

bm-django-echo-bot/bopis/views.py [Baris 60-101]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

Logika di sini mengurai isi permintaan untuk message atau suggestionResponse dan meneruskan informasi tersebut ke fungsi yang disebut route_message, lalu menampilkan HttpResponse kembali ke infrastruktur Business Messages untuk mengonfirmasi penerimaan pesan.

Ini adalah fungsi penting. Bagian logika ini adalah webhook aplikasi web Anda, yang menerima pesan dari pengguna yang berinteraksi dengan agen Anda. Anda dapat memperluas webhook untuk mengirim pesan ke alat otomatisasi seperti Dialogflow guna memahami apa yang mungkin dikatakan pengguna dan menghasilkan respons dari inferensi tersebut. Anda juga dapat meneruskan pesan tersebut agar pengguna dapat terhubung dengan agen langsung. Lihat diagram berikut:

Business Messages mengirimkan konten pesan sebagai payload JSON ke webhook Anda, yang dirutekan ke agen langsung atau ke beberapa logika untuk merespons sebagai bot. Mekanisme pemilihan rute tersebut, dalam kasus kita di sini, adalah route_message. Mari kita lihat.

bm-django-echo-bot/bopis/views.py [Baris 105-122]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Bagian logika ini mulai memeriksa pesan yang diterima oleh pengguna. Pertama, pesan dinormalisasi dengan menurunkan semua karakter. Setelah dinormalisasi, pesan akan diperiksa untuk melihat apakah pesan tersebut merupakan salah satu konstanta yang ditentukan di bagian atas file.

bm-django-echo-bot/bopis/views.py [Baris 40-42]

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
...

Artinya, bot mengurai pesan yang secara khusus berisi string yang kita tempatkan ke postback_data pemicu percakapan dari langkah sebelumnya dalam codelab ini. Jika tidak ada string tersebut yang muncul, fungsi ini hanya akan meneruskan pesan ke fungsi yang disebut echo_message, yang dapat Anda bayangkan... akan mengulang pesan.

Mengirim Pesan

Jadi, sekarang Anda sudah memiliki gambaran tentang cara pesan diterima oleh aplikasi web. Semuanya dilakukan oleh webhook.

Namun, bagaimana aplikasi mengirim pesan keluar kepada pengguna menggunakan Business Messages?

Saat infrastruktur merespons pengguna, Anda mengirim respons ke Business Messages API, yang mengirimkan pesan kepada pengguna.

Business Messages API memiliki library di Python, Node.js, dan Java. Kami juga memiliki REST API yang dapat Anda minta secara langsung jika infrastruktur Anda tidak menggunakan bahasa yang memiliki library. Lihat Mengirim Pesan untuk melihat cara cURL digunakan untuk mengirim pesan ke ID percakapan tertentu.

Untuk tujuan codelab ini, kita akan berfokus pada penggunaan library klien Python yang sudah terintegrasi ke dalam kode awal Bonjour Meal yang telah di-deploy ke App Engine di project GCP Anda, atau berjalan secara lokal melalui ngrok.

Mari kita lihat fungsi echo_message dan lihat cara kita berinteraksi dengan API untuk mengirim pesan ke Business Messages.

bm-django-echo-bot/bopis/views.py [Baris 199-212]

...
def echo_message(message, conversation_id):
    '''
    Sends the message received from the user back to the user.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

Dalam fungsi ini, BusinessMessagesMessage dibuat instance-nya dengan variabel pesan yang diteruskan ke fungsi echo_message. Setelah dibuat instance-nya, objek kemudian diteruskan ke send_message beserta ID percakapan.

bm-django-echo-bot/bopis/views.py [Baris 214-236]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

Semua yang dilakukan fungsi send_message adalah menggunakan kredensial akun layanan Anda untuk memverifikasi bahwa Anda dapat mengirim pesan ke percakapan ini, membuat instance klien Business Messages, dan membuat permintaan untuk mengirim pesan ke conversation ID yang diberikan.

Fitur lengkap juga menggunakan fungsi send_message ini, tetapi pesan yang dibuatnya khusus untuk kartu informasi, carousel, dan chip saran. Kartu informasi dan carousel dapat menyertakan aset grafis, sedangkan chip saran memiliki postback_data sehingga logika callback dapat mengurainya dengan tepat.

Setelah kita melihat cara mengirim pesan, selidiki cara contoh mengirim kartu informasi, carousel, dan chip saran. Di bagian berikut, kita akan memodifikasi kode sumber untuk mengirim pesan dengan beberapa fitur lengkap ini.

Jika Anda sudah siap, mari kita sesuaikan agen Bonjour Meal.

5. Menyesuaikan agen

Jika Anda telah mengikuti codelab sejauh ini, kita akan melihat agen yang cantik.

Oke, tidak terlalu bagus, sebenarnya terlihat agak kosong dan tidak terlalu mewakili bisnis kami. Untungnya, kita memiliki pengetahuan dasar tentang kode yang mendukung agen dan memiliki alat yang diperlukan untuk menyesuaikan agen dengan cara apa pun yang kita inginkan.

Di sisa codelab ini, kita akan memperluas agen dengan hal berikut:

• Menyertakan logo sebenarnya
• Pesan selamat datang yang ditingkatkan
• Memberikan informasi tentang jam buka
• Memberi tahu pengguna bahwa pembelian item secara online akan segera hadir
• Penggunaan chip saran percakapan untuk memfasilitasi percakapan

Kita akan memanfaatkan Business Communications Console untuk membantu memperbarui logo, pesan selamat datang, tetapi Anda selalu memiliki opsi untuk menggunakan Business Communications API secara langsung untuk melakukan hal yang sama. Kemudian, kita harus memperbarui kode sumber untuk mengirim pesan yang sesuai guna memberikan informasi tentang jam buka dan bahwa Bonjour Meal akan segera menawarkan fitur belanja online. Setelah selesai, kita akan kembali ke Business Communications Console dan membuat chip saran percakapan untuk membantu memandu percakapan ke pengalaman jalur sukses yang didukung agen digital.

Menyertakan logo

Dari Business Communications Console, pilih agen Anda dan buka Informasi agen. Kita perlu memperbarui Logo bisnis, seperti yang dirujuk dengan warna kuning di bawah.

Klik Upload, dan Anda dapat memilih gambar untuk diupload atau diimpor dari URL.

Lihat panduan desain logo dalam dokumentasi untuk mempelajari praktik terbaik yang kami rekomendasikan untuk menggunakan logo Anda sendiri.

Mari upload logo yang terletak di kode sumber yang Anda clone di awal codelab ini. Anda dapat menemukannya di direktori ./assets/ di repositori dan file tersebut bernama "bonjour_meal-logo.png". Anda dapat menarik file ke modal di browser web, alat pengeditan ringan akan ditampilkan untuk memanipulasi kualitas gambar dan pemangkasan. Sesuaikan resolusi gambar dan pangkas agar gambar kurang dari atau sama dengan batasan 50 KB. Jika Anda puas dengan gambar tersebut, klik tanda centang di lingkaran biru untuk mengonfirmasi, lalu klik Pilih di bagian bawah modal.

Terakhir, klik Simpan di kanan atas halaman Informasi agen. Perubahan ini akan memerlukan waktu beberapa saat untuk ditampilkan di perangkat Anda karena informasi agen di-cache dalam server kami dan akan terlihat dalam waktu dua jam setelah perubahan.

Memperbarui pesan selamat datang

Memperbarui pesan selamat datang adalah hal yang telah kita lakukan sebelumnya dalam codelab ini. Mari kita lakukan lagi, tetapi kali ini konfigurasikan pesan selamat datang yang lebih sesuai dengan perjalanan pengguna Bonjour Meal.

Di Business Communications Console, pilih agen Anda, lalu buka Informasi agen. Scroll ke bawah hingga Anda melihat kolom input Pesan selamat datang tempat Anda dapat memperbarui pesan.

Dengan mengetahui bahwa kita akan menambahkan pemicu percakapan, kita dapat mereferensikannya dalam pesan selamat datang. Di kolom input, mari kita ganti dengan teks berikut:

"Selamat datang di Bonjour Meal. Saya adalah asisten yang dapat membantu Anda menjawab pertanyaan terkait Bonjour Meal. Coba beberapa opsi berikut."

Terakhir, klik Simpan di kanan atas halaman Informasi agen. Sekali lagi, perubahan ini akan memerlukan waktu beberapa saat untuk diterapkan karena mekanisme penyimpanan dalam cache kami untuk memastikan semuanya berjalan lancar.

Memberikan informasi tentang jam buka

Untuk memberikan informasi ini kepada pengguna, kami akan mengirim pesan kustom kepada pengguna menggunakan Business Messages API.

Anda mungkin ingat bahwa pesan diuraikan dalam fungsi route_message dari views.py. Fungsi ini pertama-tama akan melakukan normalisasi string, lalu mulai memeriksa apakah pesan yang dinormalisasi cocok dengan parameter hard code. Untuk memudahkan, mari tambahkan kondisi tambahan tempat kita memeriksa apakah pesan yang dinormalisasi sama dengan konstanta baru yang akan kita sebut CMD_BUSINESS_HOURS_INQUIRY dan akan berisi nilai "business-hours-inquiry". Jika kondisi bernilai benar, kita akan memanggil fungsi yang disebut send_message_with_business_hours.

Fungsi route_message kini akan terlihat seperti berikut:

bm-django-echo-bot/bopis/views.py

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Agar kode berfungsi, kita harus melakukan dua perubahan lagi; yang pertama adalah menentukan CMD_BUSINESS_HOURS_INQUIRY beserta konstanta lainnya, yang kedua adalah benar-benar menentukan fungsi send_message_with_business_hours dan mengirim pesan menggunakan Business Messages API.

Mari kita tentukan konstanta di bagian atas file dengan deklarasi konstanta lainnya terlebih dahulu:

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
...

Sekarang, untuk menentukan send_message_with_business_hours. Anda dapat menentukan fungsi ini di mana saja dalam file, dengan mengikuti sintaksis Python yang sesuai. Karena fungsi ini hanya mengirim pesan, seperti echo_message, Anda dapat menggunakannya sebagai template untuk menentukan fungsi ini.

bm-django-echo-bot/bopis/views.py

...
def send_message_with_business_hours(conversation_id):

    message = '''Thanks for contacting us! The hours for the store are:\n
    MON 8am - 8pm\n
    TUE 8am - 8pm\n
    WED 8am - 8pm\n
    THU 8am - 8pm\n
    FRI 8am - 8pm\n
    SAT 8am - 8pm\n
    SUN 8am - 8pm
    '''

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message)

    send_message(message_obj, conversation_id)
...

Dengan demikian, bot kami akan dapat merespons dengan jam buka ini kepada pengguna saat mereka mengirim pesan berikut: "business-hours-inquiry". Anda akan melihat sesuatu seperti ini:

Setelah Anda men-deploy kode sumber ke GCP, perubahan akan segera terlihat. Kami tidak meng-cache aplikasi web di Google Cloud Platform dengan cara yang sama seperti informasi agen di-cache, sehingga Anda dapat langsung menguji pengalaman ini.

Meskipun kita memiliki momentum untuk melakukan perubahan sumber, mari kita buat satu modifikasi lagi yang akan memungkinkan pengguna mengajukan pertanyaan tentang belanja online. Agen digital Anda akan merespons dengan mengatakan bahwa fitur tersebut belum tersedia, tetapi Anda dapat kembali dan memeriksanya nanti.

Memberi tahu pengguna bahwa belanja online akan segera hadir

Kita akan melakukan modifikasi serupa seperti yang kita lakukan untuk memberi tahu pengguna tentang jam buka. Kali ini, mari kita tempatkan informasi dalam kartu yang kaya beserta gambar yang menarik.

Mengurai pesan yang dinormalisasi dan memeriksa kondisi untuk konstanta yang disebut CMD_ONLINE_SHOPPING_INQUIRY dengan nilai yang ditetapkan ke "online-shopping-inquiry" yang memanggil send_online_shopping_info_message jika kondisinya benar.

bm-django-echo-bot/bopis/views.py

...
# Set of commands the bot understands
CMD_RICH_CARD = 'card'
CMD_CAROUSEL_CARD = 'carousel'
CMD_SUGGESTIONS = 'chips'
CMD_BUSINESS_HOURS_INQUIRY = 'business-hours-inquiry'
CMD_ONLINE_SHOPPING_INQUIRY = 'online-shopping-inquiry'
...
...
...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    elif normalized_message == CMD_BUSINESS_HOURS_INQUIRY:
        send_message_with_business_hours(conversation_id)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Sekarang, tentukan send_online_shopping_info_message. Kita ingin pesan ini dikirim dalam kartu lengkap dengan gambar, jadi mari kita salin fungsi send_rich_card untuk digunakan sebagai template guna menentukan send_online_shopping_info_message.

Pertama, kita harus memperbarui teks penggantian agar memiliki pesan yang sesuai. Teks penggantian digunakan jika perangkat tidak dapat menerima kartu kaya karena alasan tertentu. Selanjutnya, kita harus memperbarui BusinessMessagesRichCard untuk menyertakan judul, deskripsi, saran, dan kolom media yang relevan. Fungsi kita akan terlihat seperti ini:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
    fallback_text = ('Online shopping will be available soon!')

    rich_card = BusinessMessagesRichCard(
        standaloneCard=BusinessMessagesStandaloneCard(
            cardContent=BusinessMessagesCardContent(
                title='Online shopping info!',
                description='Thanks for your business, we are located in SF near the Golden Gate Bridge. Online shopping is not yet available, please check back with us in a few days.',
                suggestions=[],
                media=BusinessMessagesMedia(
                    height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                    contentInfo=BusinessMessagesContentInfo(
                        fileUrl=SAMPLE_IMAGES[4],
                        forceRefresh=False
                    ))
                )))

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text)

    send_message(message_obj, conversation_id)
...

Hore! Agen digital kami kini dapat merespons pengguna yang bertanya tentang belanja online. Untuk saat ini, agen digital kami belum mendukung belanja online, jadi kami memberikan pesan kepada pengguna yang memberi tahu mereka bahwa fitur tersebut akan segera hadir. Tampilan agen digital kami saat pengguna menanyakan tentang belanja online.

Sama seperti perubahan sebelumnya yang kami buat untuk memungkinkan pengguna menanyakan jam buka, perubahan ini dapat segera dilihat jika Anda menggunakan ngrok, atau segera setelah Anda men-deploy kode ke GCP App Engine.

Di bagian berikutnya, kita akan menggunakan pemicu percakapan dan chip saran untuk memandu percakapan ke jalur yang diinginkan.

Menggunakan chip untuk memandu percakapan

Kami telah melakukan beberapa perubahan kode sumber dan telah men-deploy agen digital yang diperbarui, tetapi kami tidak pernah mengharapkan pengguna mengetik "business-hours-inquiry" atau "online-shopping-info" untuk menanyakan tentang bisnis. Mari kita perbarui pemicu percakapan sehingga saat percakapan dibuka, pengguna tidak hanya disambut dengan pesan selamat datang yang bagus, tetapi juga ditampilkan dengan pemicu percakapan.

Buka Konsol Komunikasi Bisnis dan akses halaman Informasi agen agen Anda. Sebelumnya, kita telah menentukan pemicu percakapan untuk "chip", "kartu", dan "carousel". Meskipun masih berfungsi, fitur tersebut tidak lagi relevan dengan fungsi bisnis kami. Anda dapat membiarkannya untuk terus menampilkan fitur lengkap ini atau menghapusnya agar agen digital Anda menampilkan pemicu percakapan khusus untuk bisnis Bonjour Meal.

Kita akan membuat dua pemicu percakapan baru. Untuk pertanyaan pertama, tetapkan teks ke "What are your business hours?" dan tetapkan Data postback ke "business-hours-inquiry". Untuk pemicu percakapan kedua, tetapkan teks ke "Dapatkah saya melakukan pembelian di sini?" dan tetapkan Data postback ke "online-shopping-info".

Hasilnya akan berupa konfigurasi seperti screenshot berikut:

Seperti perubahan lain yang dilakukan di Konsol Komunikasi Bisnis, perubahan ini akan memerlukan waktu beberapa saat untuk diterapkan sebelum Anda dapat melihat perubahan yang dihasilkan di perangkat seluler.

Setelah selesai dengan pemicu percakapan, kita juga ingin memiliki cara untuk memandu pengguna ke jalur yang memuaskan setelah percakapan dimulai. Chip dapat digunakan secara kontekstual setelah pesan dikirim untuk memandu pengguna ke fitur lain yang dapat dilakukan agen digital. Jadi, yang akan kita lakukan adalah mengirim pesan dengan saran untuk melakukan hal lain dengan agen setiap kali pengguna menanyakan jam buka atau belanja online.

Di akhir fungsi, tambahkan kode berikut:

bm-django-echo-bot/bopis/views.py

...
def send_online_shopping_info_message(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Business hours',
                postbackData='business-hours-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

# Let's do the same with the business hours
def send_message_with_business_hours(conversation_id):
...
    # at the end of the function, send a message with suggestions
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='Let us know how else we can help you:',
        fallback='Please let us know how else we can help you.',
        suggestions=[
            BusinessMessagesSuggestion(
                reply=BusinessMessagesSuggestedReply(
                text='Can I purchase online?',
                postbackData='online-shopping-inquiry')
            ),
        ])

    send_message(message_obj, conversation_id)
...

Perhatikan bahwa kolom teks dalam BusinessMessagesSuggestion dibatasi hingga 25 karakter, seperti yang dijelaskan dalam dokumentasi.

Dengan pemicu percakapan yang diperbarui dan penggunaan chip saran yang strategis, berikut beberapa screenshot pengalaman pengguna yang diharapkan.

6. Selamat

Selamat, Anda telah berhasil membuat agen digital Business Messages pertama Anda.

Anda telah men-deploy aplikasi web untuk mendukung agen digital di Business Messages, menggunakan Business Communications Console untuk mengubah agen, dan membentuk pengalaman pengguna dengan agen digital dengan melakukan perubahan pada kode sumber.

Sekarang Anda sudah mengetahui langkah-langkah penting yang diperlukan untuk membuat pengalaman Business Messages interaktif dan kemungkinannya ke depannya sangat menarik. Agen Anda dapat diperluas untuk mendukung pencarian inventaris atau memperkenalkan keranjang belanja untuk melacak hal yang mungkin diminati pengguna. Anda dapat menggunakan carousel untuk menampilkan item di menu dan menggunakan saran, yang memungkinkan pengguna memilih item yang mereka minati.

Berikut adalah cuplikan tampilannya.

Bagaimana cara membangun pengalaman percakapan yang luar biasa?

Agen terbaik memberikan informasi kontekstual kepada pengguna sekaligus memberi mereka fungsi melalui percakapan sehingga mereka dapat berinteraksi dan berinteraksi dengan bisnis seperti yang biasa mereka lakukan melalui telepon atau bahkan secara langsung. Pikirkan bagaimana topik berikut dapat diterapkan pada percakapan yang ingin Anda lakukan dengan bisnis yang bekerja sama dengan Anda.

Memberikan konteks dan menetapkan ekspektasi

Memberikan konteks dapat berupa apa saja, mulai dari secara eksplisit menyatakan cara Anda dapat membantu pengguna hingga memperkenalkan agen digital dengan persona yang dapat dihubungkan dengan pengguna. Agen yang sukses di Business Messages menggunakan avatar representasional untuk menunjukkan kepada pengguna siapa yang mereka ajak bicara.

Menetapkan ekspektasi bergantung pada pengalaman pengguna yang Anda buat. Misalnya, jika agen Anda mendukung pencarian inventaris, beri tahu pengguna terlebih dahulu bahwa ketersediaan mungkin rendah sebelum memberikan jawaban.

Memberikan fungsi kepada pengguna

Konsumen selalu terhubung dengan bisnis. Mulai dari pertanyaan seperti memeriksa status pesanan hingga memeriksa apakah item tersedia, Business Messages dapat mendukung interaksi pengguna yang kompleks. Banyak pengguna terus menelepon bisnis melalui telepon untuk mendapatkan jawaban atas pertanyaan mereka meskipun jawabannya tersedia di situs bisnis. Akibatnya, bisnis harus menginvestasikan lebih banyak sumber daya untuk menangani volume panggilan, terutama selama musim liburan.

Membuat pengguna tetap berinteraksi

Berikan poin kontak percakapan untuk membuat pengguna tetap berinteraksi dalam percakapan. Di antara pesan, Anda dapat memanggil indikator pengetikan untuk memberi tahu pengguna bahwa Anda sedang memproses jawaban untuk pengguna.

Dengan fitur lengkap seperti indikator pengetikan, chip saran, kartu lengkap, dan carousel, Anda dapat memandu pengguna melalui pengalaman pengguna jalur bahagia untuk membantu mereka menyelesaikan tugas tertentu seperti memesan dari menu item. Sasarannya adalah mengurangi traffic panggilan ke saluran telepon bisnis.

Percakapan harus memberikan fungsi kepada pengguna. Pengguna yang terhubung dengan bisnis melalui fitur pesan berharap pertanyaan mereka dijawab dengan cepat. Dalam situasi yang tidak ideal, agen digital tidak dapat memfasilitasi percakapan yang dapat menyebabkan pengalaman pengguna yang buruk. Untungnya, ada cara untuk mengatasinya, seperti mentransfer percakapan ke agen langsung, yang akan kita bahas di codelab mendatang.

Apa selanjutnya?

Jika Anda sudah siap, lihat beberapa topik berikut untuk mempelajari interaksi lebih kompleks yang dapat Anda capai di Business Messages

• Siklus proses agen: Dari pembuatan hingga peluncuran
• Persyaratan dan Panduan
• Panduan logo
• Semua Panduan

Dokumen referensi

• SuggestedReply
• Dokumen referensi Pesan Business Messages
• Definisi JSON untuk RichCard