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 seorang 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 Anda ingin mengutak-atik platform.

Terlepas dari apa yang membawa Anda ke sini, codelab ini adalah cara yang fantastis untuk memulai. Di akhir proses, Anda akan memiliki agen digital pertama yang dapat berinteraksi dengan pengguna. Jika Anda siap meluncurkan Business Messages setelah sedikit memperbaiki, Anda akan memiliki potensi untuk menjangkau jutaan pelanggan.

Catatan: Daftar ke Business Messages melalui Konsol Developer Business Communications 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 menyeluruh 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 dari logika yang digunakan pelanggan untuk berinteraksi. Logika ini dikelola oleh aplikasi web yang di-deploy di cloud atau di infrastruktur Anda. Anda dapat sepenuhnya menanggapi pengguna dengan cara apa pun. Agen terbaik memberikan konteks untuk menetapkan ekspektasi, mempertahankan interaksi 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 menjawab beberapa pertanyaan sederhana seperti "Jam berapa Anda tutup?" atau "Bisakah saya membeli secara online?".

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

Dalam codelab ini, aplikasi Anda akan

• Menanggapi pertanyaan melalui Chip Saran
• Pandu pengguna untuk mengajukan pertanyaan yang dapat dijawab oleh agen digital Anda
• Menyediakan fitur percakapan yang kaya untuk menjaga agar pengguna tetap terlibat 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 di 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

Codelab ini berfokus untuk membangun agen digital pertama Anda.

Yang akan Anda butuhkan

• Mendaftar untuk 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 dibimbing oleh codelab ini; namun, kami akan memanfaatkan Konsol Developer Business Communications untuk mengurangi kompleksitas tugas yang ada. Jika opsi untuk menggunakan API tersedia, kami akan memberi tahu Anda dan mereferensikannya 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 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 dan Business Messages API. Ikuti langkah-langkah dalam dokumentasi untuk membuat akun layanan di Konsol Developer Business Communications.

Men-deploy Kode Awal EchoBot Django Python

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 menggemakan 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 menyetel URL webhook di halaman Setelan akun pada Konsol Developer Business Communications.

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

Buka halaman Setelan akun Business Communications Console. Di pojok kanan atas pada menu navigasi, Anda akan melihat nama project GCP Anda. Jika melihat dropdown, pastikan Anda memilih project GCP Anda.

Isi detail Kontak teknis, lalu perbarui Webhook dengan URL webhook untuk aplikasi yang Anda 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 Create agent. Anda membuat brand bersamaan dengan membuat agen. Pilih Business Messages untuk Jenis agen dan pastikan Informasi Partner sudah benar.

Di bagian Merek, ketik nama merek yang Anda buat.Merek adalah bisnis yang Anda kerjakan dan konsumen dapat berinteraksi secara percakapan dengan agen. Di bagian Nama agen, tentukan apa yang Anda ingin pengguna lihat dalam percakapan Business Messages. Dalam kasus Bonjour Meal fiktif, Bonjour Rail adalah perusahaan kereta api yang mengelola restoran Bonjour Meal. Jadi saya akan tentukan Bonjour Rail sebagai merek dan Bonjour Meal sebagai agen.

Agen adalah entitas percakapan yang mewakili brand.

Klik Create agent dan biarkan konsol melakukan keajaiban. Permintaan ini memerlukan waktu beberapa detik untuk membuat beberapa permintaan ke Business Communications API guna membuat brand dan agen. Anda dapat menggunakan Business Communications API secara langsung untuk membuat agen dan membuat brand. Baca dokumentasi untuk melihat tampilan permintaan curl dengan fungsi yang sama seperti yang dilakukan konsol.

Memulai percakapan pertama

Buka agen yang baru saja dibuat. Anda akan melihat halaman Ringkasan yang dapat Anda gunakan untuk 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 salinan pesan ini ke perangkat Anda dengan cara apa pun yang Anda inginkan.

Saat link berada di perangkat seluler, Peluncur Agen Business Messages akan dipanggil dengan URL pengujian agen Anda yang sudah terisi otomatis.

Ketuk Luncurkan untuk memanggil platform percakapan agen Anda.

Berinteraksilah dengan agen dan cari tahu kemampuannya. Pada umumnya, Anda seharusnya mendapati bahwa platform percakapan hanya akan menggemakan pesan Anda. Kirimkan pesan seperti "Halo Dunia!" dan Anda akan melihat bahwa agen akan mengirim pesan yang sama kembali kepada Anda.

Aplikasi yang di-deploy juga berisi beberapa logika untuk menunjukkan beragam fitur yang tersedia di Business Messages.

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

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

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

Memperbarui pesan selamat datang dan menggunakan chip percakapan

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

Buka halaman Ringkasan agen dan 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 pemula Bonjour Meal. Kami dapat menindaklanjuti pesan Anda dan menunjukkan kepada Anda beberapa fitur kaya yang didukung di platform ini. Cobalah berbagai saran berikut.

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

Informasi Agen di konsol akan terlihat seperti ini setelah perubahan:

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

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

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

Sementara itu, mari kita lihat bagaimana segala sesuatu bekerja di balik layar.

4. Menganalisis kode awal

Opsional: Bagian ini hanya sebagai informasi. Anda bisa berharap untuk sedikit belajar tentang Django sembari kita memeriksa kode sumber bersama-sama, Anda juga bisa berharap mendapatkan ide tentang bagaimana pesan diterima di webhook dan bagaimana respons dikirim kembali menggunakan Python API.

Tampilan 10.000 kaki dari kode sumber

Kode awal yang Anda deploy akan menggemakan pesan kembali ke pengguna dan dapat menampilkan kartu informasi, carousel, atau chip saran. Mari kita pelajari lebih dalam tentang kode sumber sehingga kita dapat memahami cara kerjanya. Kemudian kita akan mencari tahu apa yang perlu kita ubah.

Kode awal adalah project Django. Dalam bagian selanjutnya dari 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, ini cukup mudah, dan setelah akhir codelab ini Anda akan mempelajari cara kerjanya.

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

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 adalah https://PROJECT_ID.appspot.com/, rute yang diketahui project tersebut adalah:

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

Kedua rute URL tersebut 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>.")
...

Bit logika ini dieksekusi oleh server web Anda ketika menerima permintaan web yang mengarah ke root project. Tidak ada hal yang terlalu bagus yang terjadi di sini: kita hanya menampilkan HTTPResponse yang berisi beberapa HTML kembali ke browser yang membuat permintaan. Jadi ya, Anda memang bisa membuka URL root project, tetapi tidak banyak yang bisa dilakukan di sana karena URL ini akan mengarahkan Anda kembali ke codelab ini.

URL lainnya dirutekan ke fungsi yang disebut callback, juga di bopis/views.py. 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 dalam fungsi yang disebut route_message, lalu menampilkan HttpResponse kembali ke infrastruktur Business Messages untuk mengonfirmasi bahwa pesan telah diterima.

Ini adalah fungsi yang 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 mengirim konten pesan sebagai payload JSON ke webhook Anda yang kemudian dirutekan ke agen langsung atau ke beberapa logika untuk merespons sebagai bot. Mekanisme perutean itu, 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)
...

Bit logika ini mulai memeriksa pesan yang diterima oleh pengguna. Pertama, pesan dinormalisasi dengan menurunkan semua karakter. Setelah dinormalkan, ia akan memeriksa apakah pesan tersebut merupakan salah satu konstanta yang didefinisikan 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'
...

Dengan kata lain, bot mengurai pesan yang secara khusus berisi string apa pun yang kita tempatkan ke dalam postback_data pembuka percakapan dari langkah sebelumnya di codelab ini. Jika tidak ada string yang muncul, pesan akan diteruskan ke fungsi bernama echo_message, yang dapat Anda bayangkan... akan menggemakan pesan.

Mengirim Pesan

Jadi sekarang, Anda seharusnya memiliki ide tentang bagaimana pesan diterima oleh aplikasi web. Semuanya dilakukan oleh webhook.

Namun, bagaimana cara aplikasi mengirim pesan keluar kepada 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 minta secara langsung jika infrastruktur Anda tidak dalam 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 pada project GCP, 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)
...

Pada fungsi ini, BusinessMessagesMessage dibuat instance-nya dengan variabel pesan yang diteruskan ke fungsi echo_message. Setelah dibuat instance, objek akan 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 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 kaya juga memanfaatkan fungsi send_message ini, tetapi pesan yang dibuatnya khusus untuk kartu informasi, carousel, dan chip saran. Kartu informasi dan carousel dapat menyertakan aset visual, sementara chip saran memiliki postback_data sehingga logika callback dapat menguraikannya dengan tepat.

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

Kalau sudah siap, mari kita sesuaikan agen Bonjour Meal.

5. Menyesuaikan agen

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

Oke, tidak begitu indah, lokasi terlihat kurang bagus dan tidak terlalu mewakili bisnis kita 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 diinginkan.

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

• Sertakan logo yang sebenarnya
• Pesan selamat datang yang ditingkatkan
• Berikan informasi tentang jam buka
• Beri tahu pengguna bahwa pembelian barang secara online akan segera hadir
• Penggunaan chip saran percakapan untuk memfasilitasi percakapan

Kami akan memanfaatkan Konsol Business Communications untuk membantu kami 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 agar dapat mengirim pesan yang sesuai untuk memberikan informasi jam buka, dan Bonjour Meal akan segera menawarkan fitur belanja online. Setelah selesai, kita akan kembali ke Konsol Business Communications dan membuat chip saran percakapan untuk membantu memandu percakapan ke pengalaman {i>happy path<i} yang didukung oleh agen digital.

Sertakan logo

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

Klik Upload, dan Anda akan 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 kita upload logo yang terletak dalam kode sumber yang Anda clone di awal codelab ini. Anda dapat menemukannya di direktori ./assets/ pada repositori, dan filenya bernama "bonjour_meal-logo.png". Anda dapat menarik file ke modal di browser web, alat pengeditan ringan akan disajikan untuk memanipulasi kualitas dan pemangkasan gambar. Sesuaikan resolusi gambar dan pangkas sehingga gambar kurang dari atau sama dengan batasan 50 KB. Jika Anda sudah puas dengan gambar yang ditampilkan, klik tanda centang di lingkaran biru untuk mengonfirmasi, lalu klik Select di bagian bawah modal.

Terakhir, klik Simpan di kanan atas halaman Informasi agen. Perubahan ini memerlukan waktu untuk dicerminkan di perangkat Anda saat 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 di codelab ini. Mari kita lakukan lagi, tetapi kali ini konfigurasi pesan selamat datang yang lebih sesuai dengan perjalanan pengguna Bonjour Meal.

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

Setelah mengetahui bahwa kita akan menambahkan pembuka 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 yang mungkin Anda miliki tentang Bonjour Meal. Cobalah beberapa opsi berikut".

Terakhir, klik Simpan di kanan atas halaman Informasi agen. Sekali lagi, perubahan ini akan memerlukan waktu untuk diterapkan karena mekanisme cache kami untuk memastikan semuanya cepat.

Memberikan informasi tentang jam buka

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

Anda mungkin ingat bahwa pesan diuraikan dalam fungsi route_message dari views.py. Fungsi ini mula-mula menormalisasi string, lalu mulai memeriksa apakah pesan yang dinormalisasi cocok dengan parameter hard code. Agar lebih mudah, mari tambahkan kondisi tambahan saat kita memeriksa apakah pesan yang dinormalkan sama dengan konstanta baru yang akan kita panggil CMD_BUSINESS_HOURS_INQUIRY dan akan berisi nilai "business-hours-inquiry". Jika kondisi bernilai benar (true), kami akan memanggil fungsi yang disebut send_message_with_business_hours.

Sekarang fungsi route_message 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 membuat dua perubahan lagi; yang pertama adalah menentukan CMD_BUSINESS_HOURS_INQUIRY bersama dengan konstanta lainnya, yang kedua adalah menentukan fungsi send_message_with_business_hours dan mengirim pesan menggunakan Business Messages API.

Pertama-tama, 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, dengan mengikuti sintaksis Python yang sesuai. Karena fungsi ini hanya mengirim pesan, seperti halnya 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 harus dapat merespons dengan jam buka berikut kepada pengguna saat mereka mengirim pesan berikut: "business-hours-inquiry". Anda akan mendapati hal 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 meng-cache informasi agen, sehingga Anda akan dapat langsung menguji pengalaman ini.

Sementara kita memiliki momentum dengan membuat perubahan sumber, mari kita buat satu modifikasi lagi yang akan memungkinkan pengguna bertanya tentang belanja online. Agen digital Anda akan merespons dengan menyatakan bahwa fitur tersebut belum tersedia, tetapi akan kembali dan memeriksanya nanti.

Memberi tahu pengguna bahwa belanja online akan segera hadir

Kami akan membuat perubahan serupa seperti yang dilakukan untuk memberi tahu pengguna tentang jam buka. Kali ini, mari kita tempatkan informasi di kartu informasi bersama dengan 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 untuk menentukan send_online_shopping_info_message. Kita ingin pesan ini dikirim dalam kartu informasi yang dilengkapi 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 agar memiliki pesan yang sesuai. Teks pengganti digunakan jika perangkat tidak dapat menerima kartu informasi 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 pertanyaan pengguna tentang belanja online. Untuk saat ini, agen digital kami belum mendukung belanja online, jadi kami akan memberikan pesan kepada pengguna yang menginformasikan bahwa fitur ini akan segera hadir. Seperti inilah tampilan agen digital kita saat pengguna bertanya tentang cara berbelanja online.

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

Di bagian selanjutnya, kita akan menggunakan pembuka percakapan dan chip saran untuk memandu percakapan agar berjalan dengan lancar.

Menggunakan chip untuk memandu percakapan

Kami telah membuat beberapa perubahan kode sumber dan menerapkan agen digital yang diperbarui, tetapi kami tidak menyangka pengguna akan mengetik "business-hours-inquiry" atau "online-shopping-info" untuk menanyakan tentang bisnis. Mari kita perbarui pembuka percakapan sedemikian rupa sehingga saat percakapan dibuka, pengguna tidak hanya disambut oleh pesan selamat datang yang bagus, tetapi juga ditampilkan dengan pembuka percakapan.

Buka Konsol Komunikasi Bisnis dan akses halaman Informasi agen agen Anda. Kami sebelumnya menentukan pemicu percakapan untuk "chip", "card", dan "carousel". Meskipun masih berfungsi, kata kunci tersebut tidak lagi relevan dengan fungsi bisnis kami. Anda dapat membiarkannya terus menampilkan fitur lengkap ini atau menghapusnya sehingga agen digital Anda menampilkan pembuka percakapan khusus untuk bisnis Bonjour Meal.

Kami akan membuat dua pembuka percakapan baru. Untuk yang pertama, tetapkan text ke "Berapa jam buka bisnis Anda?" dan tetapkan Data postback ke "business-hours-inquiry". Untuk pemicu percakapan kedua, tetapkan text ke "Can I make purchase here?" dan tetapkan Postback data ke "online-shopping-info".

Hasilnya harus berupa konfigurasi seperti screenshot berikut:

Seperti perubahan lain yang dibuat di Konsol Business Communications, proses ini akan memerlukan waktu beberapa saat sebelum Anda dapat melihat perubahan yang dihasilkan di perangkat seluler.

Sekarang setelah kita selesai dengan pembuka percakapan, kita juga ingin cara untuk memandu pengguna ke {i>happy path<i} setelah percakapan dimulai. Anda dapat menggunakan chip secara kontekstual setelah pesan dikirim untuk memandu pengguna ke fitur lain yang mampu dilakukan agen digital. Jadi, kita akan mengirim pesan yang berisi saran untuk melakukan hal lain dengan agen tersebut setiap kali pengguna menanyakan jam buka atau belanja online.

Di akhir fungsi, tambahkan hal 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 secara strategis, berikut beberapa screenshot pengalaman pengguna yang diharapkan.

6. Selamat

Selamat, Anda berhasil membangun agen digital Business Messages pertama Anda.

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

Anda sekarang tahu langkah-langkah utama yang diperlukan untuk membangun pengalaman Business Messages yang interaktif dan kemungkinan dari sini dan seterusnya sangat menarik. Agen Anda dapat diperluas untuk mendukung pencarian inventaris atau memperkenalkan keranjang belanja untuk melacak apa yang mungkin diminati pengguna. Anda dapat menggunakan carousel untuk menampilkan item di menu dan menggunakan saran, agar pengguna dapat memilih item yang mereka minati.

Berikut adalah teaser tentang kemungkinan penerapannya.

Bagaimana cara membangun pengalaman percakapan yang luar biasa?

Agen terbaik memberikan informasi kontekstual kepada pengguna sambil memberikan fungsionalitas melalui percakapan sehingga mereka dapat terlibat dan berinteraksi dengan bisnis seperti yang biasanya mereka lakukan melalui telepon atau bahkan secara langsung. Pikirkan tentang bagaimana topik berikut dapat diterapkan dalam 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 representasi untuk menunjukkan kepada pengguna dengan siapa mereka berbicara.

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

Memberikan fungsi kepada pengguna

Konsumen terhubung dengan bisnis sepanjang waktu. 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 bahkan jika jawabannya tersedia di situs bisnis. Akibatnya, bisnis harus menginvestasikan lebih banyak sumber daya untuk menangani volume panggilan telepon terutama selama musim liburan.

Mempertahankan interaksi pengguna

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

Dengan fitur kaya seperti indikator mengetik, chip saran, kartu informasi, dan korsel, Anda dapat memandu pengguna melalui pengalaman pengguna {i>happy path<i} untuk membantu mereka menyelesaikan tugas tertentu seperti memesan dari menu item. Tujuannya adalah untuk mengurangi traffic panggilan ke saluran telepon bisnis.

Sangat penting bahwa percakapan 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 mengarah pada pengalaman pengguna yang buruk. Untungnya, ada beberapa cara untuk mengatasi hal ini, seperti mentransfer percakapan ke agen langsung, yang akan kita bahas di codelab mendatang.

Apa selanjutnya?

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

• Keberlangsungan agen: Pembuatan dan peluncuran
• Persyaratan dan Panduan
• Panduan logo
• Semua Panduan

Dokumen referensi

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