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 mengintegrasikan dengan Pesan Bisnis, 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 membangun solusi pesan untuk bisnis yang bekerja sama dengan Anda, atau mungkin Anda baru saja menemukan Business Messages dan ingin bereksperimen di platform ini.

Apa pun alasan Anda membuka codelab ini, codelab ini adalah cara yang tepat untuk memulai. Pada akhirnya, Anda akan memiliki agen digital pertama yang dapat digunakan pengguna untuk berinteraksi. Saat Anda siap meluncurkan Business Messages setelah melakukan beberapa penyempurnaan, Anda berpotensi menjangkau jutaan pelanggan.

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

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

Apa yang membuat agen digital yang 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 digunakan pelanggan untuk berinteraksi. Logika dikelola oleh aplikasi web yang di-deploy di cloud atau di infrastruktur Anda. Anda sepenuhnya bebas menentukan cara menanggapi pengguna. Agen terbaik memberikan konteks untuk menetapkan ekspektasi, mempertahankan engagement pelanggan, dan menyediakan 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
• Mengarahkan pengguna untuk mengajukan pertanyaan yang dapat dijawab oleh agen digital Anda
• Menyediakan fitur percakapan yang kaya untuk mempertahankan interaksi pengguna 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 Anda secara publik.
• Cara mengonfigurasi akun Business Messages Anda dengan webhook aplikasi web untuk menerima pesan dari pengguna
• Cara mengirim fitur multimedia seperti kartu, carousel, dan saran percakapan dengan Business Messages API
• Cara Pesan Bisnis mengirim pesan Anda

Codelab ini berfokus pada pembuatan agen digital pertama Anda.

Yang Anda butuhkan

• Mendaftar untuk mendapatkan akun developer Komunikasi Bisnis 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 dikerjakan. Saat opsi untuk menggunakan API tersedia, kami akan memberi tahu Anda dan merujuknya dalam dokumen kami.

Aktifkan API

Untuk codelab ini, karena kita akan bekerja dengan 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 Konsol Google Cloud.
2. Klik Enable.

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 di 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 ini mengulangi pesan kembali kepada pengguna dan dapat menampilkan beberapa fitur lengkap yang tersedia di platform percakapan.

Mengonfigurasi webhook

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

URL webhook akan menjadi URL aplikasi + "/callback/". Misalnya, bisa seperti ini: https://PROJECT_ID.appspot.com/callback/

Buka halaman setelan Akun di Konsol Komunikasi Bisnis. Di sudut kanan atas di bawah kolom navigasi, Anda akan melihat nama project GCP Anda. Jika Anda melihat dropdown, 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 Konsol Business Communications, klik logo di kiri atas untuk kembali ke dasbor konsol, lalu klik Buat agen. Anda membuat merek pada saat yang sama dengan saat Anda membuat agen. Pilih Business Messages 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 apa 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 Create agent 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 merek. Lihat dokumentasi untuk melihat tampilan permintaan curl untuk melakukan hal yang sama seperti yang dilakukan konsol.

Memulai percakapan pertama Anda

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 apa pun yang Anda inginkan.

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

Ketuk Luncurkan untuk memanggil platform percakapan agen Anda.

Berinteraksilah dengan agen dan pahami kemampuannya. Sebagian besar, Anda akan mendapati bahwa platform percakapan hanya akan mengulangi pesan Anda. Kirimkan sesuatu seperti "Hello, World!" dan Anda akan melihat bahwa agen akan mengirimkan pesan yang sama kembali kepada Anda.

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

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

Selamat! Ini adalah percakapan pertama agen Anda dengan Anda.

Setiap fitur multimedia dapat digunakan untuk memberikan konteks yang lebih baik kepada orang yang berkomunikasi dengan agen Anda. Kirim aset grafis dalam kartu multimedia 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 Developer, melihat cara mengedit pesan sambutan 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 pemicu percakapan.

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

Selamat datang di agen pemulai Bonjour Meal. Saya dapat mengulangi 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 apa yang ditampilkan kepada pengguna, sedangkan data postBack adalah apa yang dikirim ke webhook agen Anda. Webhook mengurai data postback dan akan mengirimkan 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 perubahan yang baru saja Anda lakukan dan chip saran yang ada di bawahnya.

Ini adalah alat yang sangat baik untuk mendapatkan gambaran tentang seperti apa pengalaman pengguna yang akan dirasakan. Anda dapat menggunakannya saat membangun agen dan merencanakan perjalanan pengguna yang ingin Anda dukung.

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

Sementara itu, mari kita lihat cara kerja semuanya.

4. Menganalisis kode awal

Opsional: Bagian ini hanya berisi informasi. Anda akan mempelajari sedikit tentang Django saat kita memeriksa kode sumber bersama-sama. Anda juga akan 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 mengembalikan pesan kepada pengguna dan dapat menampilkan kartu lengkap, carousel, atau chip saran. Mari kita pelajari lebih dalam kode sumbernya agar kita dapat memahami cara kerjanya. Kemudian, kita akan mencari tahu apa yang perlu diubah.

Kode awal adalah project Django. Di bagian selanjutnya dalam seri 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, karena Django cukup mudah dipahami, dan di akhir codelab ini Anda akan mempelajari cara kerjanya.

Secara umum, 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 dua URL tersebut dikenali. Mengingat URL project adalah https://PROJECT_ID.appspot.com/, maka 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 terlebih dahulu bopis_views.landing_placeholder.

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>.")
...

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

URL lainnya merutekan 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. 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 untuk memahami apa yang mungkin dikatakan pengguna dan menghasilkan respons dari inferensi tersebut. Anda juga dapat meneruskan pesan agar pengguna dapat terhubung dengan agen langsung. Lihat diagram berikut:

Business Messages mengirimkan konten pesan sebagai payload JSON ke webhook Anda yang akan dirutekan ke agen live atau ke beberapa logika untuk merespons sebagai bot. Mekanisme perutean 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)
...

Logika ini mulai memeriksa pesan yang diterima oleh pengguna. Pertama, pesan dinormalisasi dengan mengubah semua karakter menjadi huruf kecil. Setelah dinormalisasi, fungsi ini akan memeriksa apakah pesan adalah 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 salah satu string yang kita tempatkan ke dalam postback_data dari pemicu percakapan dari langkah sebelumnya dalam codelab ini. Jika tidak ada string tersebut yang muncul, pesan akan diteruskan ke fungsi yang disebut echo_message, yang dapat Anda bayangkan... akan mengulangi pesan.

Mengirim Pesan

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

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

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

Business Messages API memiliki library di Python, Node.js, dan Java. Kami juga memiliki REST API yang dapat Anda gunakan untuk membuat permintaan secara langsung jika infrastruktur Anda tidak menggunakan bahasa yang kami miliki library-nya. 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 dijalankan secara lokal melalui ngrok.

Mari kita lihat fungsi echo_message dan cara 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 di-instantiate dengan variabel pesan yang diteruskan ke fungsi echo_message. Setelah di-instansiasi, objek kemudian diteruskan ke send_message bersama dengan 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 fungsi send_message yang dilakukan 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 tertentu.

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

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

Jika sudah siap, mari sesuaikan agen Bonjour Meal.

5. Menyesuaikan agen Anda

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

Oke, tidak terlalu bagus, sebenarnya terlihat agak kosong dan tidak terlalu merepresentasikan bisnis kami dengan baik. Untungnya, kita memiliki pengetahuan dasar tentang kode yang mendukung agen dan kita 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:

• Sertakan logo yang 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 dan 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 bisnis dan bahwa Bonjour Meal akan segera menawarkan fitur belanja online. Setelah selesai, kita akan kembali ke Konsol Komunikasi Bisnis dan membuat chip saran percakapan untuk membantu memandu percakapan ke pengalaman jalur yang berhasil yang didukung oleh agen digital.

Sertakan logo

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

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

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

Mari kita upload logo yang ada di kode sumber yang Anda clone di awal codelab ini. Anda dapat menemukannya di direktori ./assets/ 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 dan pangkas gambar agar ukuran gambar kurang dari atau sama dengan batasan 50 KB. Jika Anda sudah 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 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 sesuatu yang telah kita lakukan sebelumnya dalam codelab ini. Mari kita lakukan lagi, tetapi kali ini konfigurasi pesan selamat datang lebih berlaku untuk perjalanan pengguna Bonjour Meal.

Di Konsol Business Communications, pilih agen Anda dan buka Agent information. Scroll ke bawah hingga Anda melihat kolom input Pesan selamat datang tempat Anda dapat memperbarui pesan.

Karena kita akan menambahkan pemicu percakapan, kita dapat merujuknya 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 tentang Bonjour Meal. Coba beberapa opsi berikut."

Terakhir, klik Simpan di kanan atas halaman Informasi agen. Sekali lagi, perubahan ini memerlukan waktu 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 terlebih dahulu menormalisasi string, lalu mulai memeriksa apakah pesan yang dinormalisasi cocok dengan salah satu parameter yang dikodekan secara permanen. Agar lebih sederhana, 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 sekarang 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 bersama dengan konstanta lainnya, yang kedua adalah benar-benar menentukan fungsi send_message_with_business_hours dan mengirim pesan menggunakan Business Messages API.

Pertama, mari kita tentukan konstanta di bagian atas file dengan deklarasi konstanta lainnya:

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, 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 kita akan dapat merespons dengan jam buka ini kepada pengguna saat mereka mengirim pesan berikut: "business-hours-inquiry". Anda dapat mengharapkan sesuatu seperti ini:

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

Meskipun kita sudah melakukan beberapa perubahan pada sumber, mari kita lakukan satu modifikasi lagi yang akan memungkinkan pengguna menanyakan tentang belanja online. Agen digital Anda akan merespons dengan mengatakan bahwa fitur tersebut belum tersedia, tetapi akan tersedia nanti.

Memberi tahu pengguna bahwa fitur belanja online akan segera hadir

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

Parse pesan yang dinormalisasi dan periksa 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 kita akan mendefinisikan send_online_shopping_info_message. Kita ingin pesan ini dikirim dalam kartu multimedia dengan gambar, jadi mari salin fungsi send_rich_card untuk digunakan sebagai template guna menentukan send_online_shopping_info_message.

Pertama, kita harus memperbarui teks penggantian untuk memiliki pesan yang sesuai. Teks pengganti digunakan jika perangkat tidak dapat menerima kartu multimedia 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 menanyakan tentang belanja online. Untuk saat ini, agen digital kami belum mendukung belanja online, jadi kami memberikan pesan kepada pengguna yang menginformasikan bahwa fitur tersebut akan segera hadir. Berikut tampilan agen digital kami saat pengguna menanyakan tentang berbelanja online.

Sama seperti perubahan sebelumnya yang kami lakukan 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 topik pembuka percakapan dan chip saran untuk memandu percakapan ke jalur yang diinginkan.

Menggunakan chip untuk memandu percakapan

Kami telah melakukan beberapa perubahan pada 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 perbarui pembuka percakapan sehingga saat percakapan dibuka, pengguna tidak hanya disambut dengan pesan selamat datang yang bagus, tetapi juga disuguhi pembuka 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, alat 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.

Kami akan membuat dua ide baru untuk memulai percakapan. Untuk yang pertama, tetapkan teks ke "What are your business hours?" dan tetapkan Data postback ke "business-hours-inquiry". Untuk pemicu percakapan kedua, tetapkan text ke "Can I make purchases here?" dan tetapkan Postback data ke "online-shopping-info".

Hasilnya akan berupa konfigurasi seperti screenshot berikut:

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

Setelah selesai dengan pembuka percakapan, kita juga akan menginginkan cara untuk memandu pengguna ke jalur yang lancar setelah percakapan dimulai. Chip dapat digunakan secara kontekstual setelah pesan dikirim untuk memandu pengguna ke fitur lain yang dapat dilakukan oleh agen digital. Jadi, yang akan kami 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 ide pembuka 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 membangun pengalaman Business Messages yang interaktif dan kemungkinan-kemungkinan yang ada mulai sekarang sangat menarik. Agen Anda dapat diperluas untuk mendukung penelusuran inventaris atau memperkenalkan keranjang belanja untuk melacak apa yang mungkin diminati pengguna. Anda dapat menggunakan carousel untuk menampilkan item di menu dan menggunakan saran, memungkinkan pengguna memilih item yang mereka minati.

Berikut cuplikan tampilannya.

Bagaimana cara membangun pengalaman percakapan yang luar biasa?

Agen terbaik memberikan informasi kontekstual kepada pengguna sekaligus memberikan fungsi melalui percakapan sehingga pengguna dapat 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 menyatakan secara eksplisit bagaimana Anda dapat membantu pengguna hingga memperkenalkan agen digital dengan persona yang dapat dipahami pengguna. Agen yang berhasil di Business Messages menggunakan avatar representasional untuk menunjukkan kepada pengguna siapa yang sedang mereka ajak bicara.

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

Menyediakan fungsi kepada pengguna

Konsumen selalu terhubung dengan bisnis. Mulai dari pertanyaan seperti memeriksa status pesanan hingga memeriksa apakah suatu item tersedia, Business Messages dapat mendukung interaksi pengguna yang kompleks. Banyak pengguna terus menelepon bisnis 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.

Mempertahankan interaksi pengguna

Berikan titik sentuh percakapan untuk menjaga pengguna tetap terlibat 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 ideal untuk membantu mereka menyelesaikan tugas tertentu seperti memesan dari menu item. Tujuannya adalah mengurangi traffic panggilan ke saluran telepon bisnis.

Percakapan harus memberikan fungsionalitas kepada pengguna. Pengguna yang menghubungi 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 mengatasi hal ini, seperti mengalihkan percakapan ke agen langsung, yang akan kita bahas dalam 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