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 perusahaan yang ingin langsung mengintegrasikan Business Messages, atau mungkin bekerja di vendor software independen yang membangun solusi pesan untuk bisnis yang bekerja sama dengan Anda, atau mungkin Anda baru saja menggunakan Business Messages dan ingin mengutak-atik platform tersebut.

Terlepas dari apa yang membawa Anda ke sini, codelab ini adalah cara yang luar biasa untuk memulai. Pada akhirnya, Anda akan memiliki agen digital pertama yang dapat berinteraksi dengan pengguna. Jika sudah siap melakukan peluncuran di Business Messages setelah sedikit peningkatan, 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 dimaksud dengan agen digital yang baik?

Business Messages adalah platform percakapan, yang memberikan pengalaman seperti aplikasi di perangkat seluler sehingga konsumen dapat terhubung dengan bisnis tanpa harus menginstal aplikasi tambahan. Agen digital adalah bagian dari logika yang berinteraksi dengan pelanggan Anda. Logika ini dikelola oleh aplikasi web yang di-deploy di cloud atau di infrastruktur Anda. Terserah Anda bagaimana menanggapi pengguna. Agen terbaik memberikan konteks untuk menetapkan ekspektasi, membuat pelanggan mereka tetap berinteraksi, dan menyediakan fungsi untuk mendukung pengguna mereka.

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 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

• Merespons pertanyaan melalui Chip Saran
• Pandu pengguna untuk mengajukan pertanyaan yang dapat dijawab oleh agen digital Anda
• Menyediakan fitur percakapan yang kaya untuk membuat 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 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

Codelab ini berfokus pada pembuatan agen digital pertama Anda.

Yang Anda butuhkan

• Daftar 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 akan dipandu oleh codelab ini. namun, kita akan memanfaatkan Konsol Pengembang Komunikasi Bisnis untuk mengurangi kerumitan tugas yang ada. Saat opsi untuk menggunakan API tersedia, kami akan memberi tahu Anda dan mereferensikannya di dokumen kami.

Aktifkan API

Untuk codelab ini, karena kita akan bekerja dengan aplikasi Django, kita akan mengandalkan Cloud Build API untuk men-deploy aplikasi tersebut 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 Aktifkan.

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 dalam Konsol Developer Business Communications.

Men-deploy Kode Pemula 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 menggemakan pesan kembali kepada pengguna dan dapat menampilkan beberapa fitur lengkap yang tersedia dalam platform percakapan.

Mengonfigurasi webook

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

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

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

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

Klik Save 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 Buat agen. Anda membuat brand pada saat yang sama dengan membuat agen. Pilih Business Messages untuk Jenis agen dan pastikan Informasi partner sudah benar.

Di Merek, ketik nama brand yang Anda buat.Brand adalah bisnis yang Anda ajak kerja sama dan konsumen dapat berinteraksi melalui percakapan dengan agen. Di Nama agen, tentukan apa yang Anda ingin pengguna lihat dalam percakapan Business Messages. Dalam kasus Bonjour Meal fiktif, Bonjour Rail adalah perusahaan kereta yang mengelola restoran Bonjour Meal. Jadi, saya akan menentukan Bonjour Rail sebagai brand 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 untuk membuat merek dan agen. Anda dapat langsung menggunakan Business Communications API untuk membuat agen dan membuat brand. Lihat dokumentasi untuk mengetahui tampilan permintaan curl untuk melakukan hal yang sama seperti yang dilakukan konsol.

Percakapan pertama Anda

Buka agen yang baru saja dibuat, dan 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 melakukan pengujian. Kirim salinan pesan ini ke perangkat Anda dengan cara apa pun yang Anda inginkan.

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

Ketuk Luncurkan untuk memanggil platform percakapan agen Anda.

Berinteraksilah dengan agen dan rasakan kemampuannya. Secara umum, Anda harus mendapati bahwa platform percakapan hanya akan menggemakan pesan Anda. Kirimkan sesuatu seperti "Hello, World!" (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 beragam fitur yang tersedia di Business Messages.

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

Selamat! Ini adalah percakapan pertama 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 Developer, 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) agar terbaca:

Selamat datang di agen pembuka Bonjour Meal. Kami dapat mengirimkan pesan Anda dan menampilkan beberapa fitur lengkap yang didukung dalam platform, silakan coba saran berikut.

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

Informasi agen di konsol akan terlihat seperti ini setelah diubah:

Di sisi kanan konsol, Anda akan melihat pratinjau tampilan agen. Perhatikan bahwa pesan selamat datang mencerminkan perubahan 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 akan terjadi. Anda dapat menggunakannya saat membangun agen dan merencanakan perjalanan pengguna yang ingin didukung.

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

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

4. Menganalisis kode awal

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

Tampilan kode sumber setinggi 10.000 kaki

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

Kode awal adalah project Django. Di 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, Django cukup mudah digunakan. 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. Mengingat URL project adalah 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>.")
...

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

Rute URL lainnya ke fungsi yang disebut callback, juga di bopis/views.py. Mari kita lihat fungsi tersebut.

bm-django-echo-bot/bopis/views.py [Lines 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 sebuah pesan 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 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 tempat konten tersebut diarahkan ke agen langsung 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 [Lines 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, sistem akan memeriksa untuk melihat apakah pesan tersebut merupakan salah satu konstanta yang ditentukan di bagian atas file.

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

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

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

Mengirim Pesan

Jadi sekarang, Anda seharusnya memiliki gambaran 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 akan 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 buat permintaannya secara langsung jika infrastruktur Anda tidak dalam bahasa yang library-nya kami miliki. Lihat bagian 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 dengan kode awal Bonjour Meal yang telah di-deploy ke App Engine pada 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 [Lines 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, BusinessMessageMessage dibuat instance-nya dengan variabel pesan yang diteruskan ke fungsi echo_message. Setelah dibuat instance, objek ini kemudian diteruskan ke send_message bersama dengan ID percakapan.

bm-django-echo-bot/bopis/views.py [Lines 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 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 ditentukan.

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 visual, sedangkan chip saran memiliki postback_data sehingga logika callback dapat mengurainya dengan tepat.

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

Kalau sudah siap, mari kita sesuaikan agen Bonjour Meal.

5. Menyesuaikan agen Anda

Jika Anda telah mengikuti codelab hingga saat ini, kita akan melihat agen yang cocok untuk Anda.

Oke, tidak begitu indah, tampilannya terlihat agak kosong dan tidak terlalu mewakili bisnis kami. 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 bagian selanjutnya codelab ini, kita akan memperluas agen dengan hal berikut:

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

Kami akan memanfaatkan Konsol Komunikasi Bisnis untuk membantu kami 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 mengirimkan pesan yang sesuai untuk memberikan informasi tentang jam buka 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 happy path yang didukung oleh agen digital.

Menyertakan logo

Dari Konsol Komunikasi Bisnis, pilih agen Anda dan buka Informasi Agen. Kita ingin memperbarui Logo bisnis, seperti yang diberi 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 dalam 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 cahaya akan ditampilkan untuk memanipulasi kualitas dan pemangkasan gambar. Sesuaikan resolusi gambar dan pangkas sedemikian rupa sehingga 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 Select di bagian bawah modal.

Terakhir, klik Simpan di kanan atas halaman Informasi agen. Ini adalah perubahan yang akan membutuhkan waktu untuk dicerminkan di perangkat Anda karena informasi agen telah di-cache di dalam server kami dan akan terlihat dalam dua jam setelah perubahan.

Memperbarui pesan selamat datang

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

Di Konsol Komunikasi Business, pilih agen Anda, lalu buka Informasi agen. Scroll ke bawah sampai Anda melihat kolom input Pesan selamat datang tempat Anda dapat 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 asisten yang dapat membantu menjawab pertanyaan yang mungkin Anda miliki tentang Bonjour Meal. Coba beberapa opsi berikut."

Terakhir, klik Simpan di kanan atas halaman Informasi agen. Sekali lagi, perubahan ini memerlukan waktu untuk dicerminkan karena mekanisme penyimpanan 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 pertama-tama menormalisasi string, lalu mulai memeriksa apakah pesan yang dinormalisasi cocok dengan parameter hard code apa pun. Untuk mempermudah, mari tambahkan kondisi tambahan tempat kita memeriksa apakah pesan yang dinormalisasi sama dengan konstanta baru yang akan kita panggil CMD_BUSINESS_HOURS_INQUIRY dan akan berisi nilai "business-hours-questions". Jika kondisi bernilai benar (true), kita 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 dapat berfungsi, kita harus membuat 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-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'
...

Dan sekarang, untuk menentukan send_message_with_business_hours. Anda dapat menentukan fungsi ini di mana pun 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 kita seharusnya dapat merespons dengan jam kerja ini kepada pengguna saat mereka mengirimkan pesan berikut: "pertanyaan jam kerja". 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 informasi agen yang di-cache, sehingga Anda dapat langsung menguji pengalaman ini.

Meskipun kita memiliki momentum dalam membuat perubahan sumber, mari kita buat satu perubahan lagi yang akan memungkinkan pengguna menanyakan tentang belanja online. Agen digital Anda akan merespons dengan mengatakan bahwa fitur tersebut belum tersedia. Anda harus kembali dan memeriksanya nanti.

Memberi tahu pengguna bahwa belanja online akan segera hadir

Kami akan melakukan modifikasi serupa seperti yang kami lakukan untuk memberi tahu pengguna tentang jam buka. Kali ini, mari kita tempatkan informasi di kartu informasi bersama dengan gambar yang menarik.

Uraikan pesan yang dinormalisasi dan periksa kondisi untuk konstanta yang disebut CMD_ONLINE_SHOPPING_INQUIRY dengan nilai yang ditetapkan ke "online-shopping-questions" 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 berisi gambar. Jadi, mari salin fungsi send_rich_card untuk digunakan sebagai template untuk 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 beberapa alasan. Selanjutnya, kita harus mengupdate 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 memberikan pesan kepada pengguna yang memberitahukan bahwa fitur ini akan segera hadir. Seperti inilah tampilan agen digital kami saat pengguna menanyakan tentang belanja online.

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

Di bagian selanjutnya, kita akan menggunakan pemicu percakapan dan chip saran untuk memandu percakapan ke happy path.

Menggunakan chip untuk memandu percakapan

Kami telah membuat beberapa perubahan kode sumber dan men-deploy agen digital terbaru, tetapi kami tidak mengharapkan pengguna mengetik "pertanyaan jam kerja" atau "info-belanja-online" untuk menanyakan tentang bisnis. Mari kita perbarui pemicu percakapan sehingga saat percakapan dibuka, pengguna tidak hanya disambut oleh pesan selamat datang yang menarik, tetapi juga pembuka percakapan.

Buka Business Communications Console dan akses halaman Informasi agen agen Anda. Kami sebelumnya mendefinisikan pemicu percakapan untuk "chip", "kartu", dan "carousel". Meskipun fitur tersebut masih berfungsi, kolom tersebut tidak lagi relevan dengan fungsi bisnis kami. Anda dapat membiarkannya tetap menampilkan fitur lengkap ini atau menghapusnya sehingga agen digital menampilkan pembuka percakapan khusus untuk bisnis Bonjour Meal.

Kita akan membuat dua pembuka percakapan baru. Untuk yang pertama, tetapkan teks ke "Jam berapa jam buka Anda?" dan tetapkan Data postback ke "pertanyaan jam kerja". Untuk pembuka percakapan kedua, setel teks ke "Dapatkah saya melakukan pembelian di sini?" dan tetapkan data postback ke "online-shopping-info".

Hasilnya harus berupa konfigurasi seperti screenshot berikut:

Seperti perubahan lain yang dilakukan pada Konsol Komunikasi Bisnis, perlu waktu beberapa saat agar perubahan diterapkan sebelum dapat melihat perubahan yang dibuat di perangkat seluler Anda.

Sekarang setelah kita selesai dengan pembuka percakapan, kita juga menginginkan 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 dapat dilakukan oleh agen digital. Jadi yang akan kita lakukan adalah mengirim pesan yang berisi 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 BusinessMessageSuggestion dibatasi hingga 25 karakter, seperti yang dijelaskan dalam dokumentasi.

Dengan pemicu percakapan yang diperbarui dan penggunaan strategis chip saran, 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 Konsol Komunikasi Bisnis untuk memodifikasi agen, dan membentuk pengalaman pengguna dengan agen digital dengan melakukan perubahan pada kode sumber.

Anda sekarang sudah mengetahui langkah-langkah penting yang diperlukan untuk membangun pengalaman Business Messages yang interaktif dan kemungkinan yang muncul sejak saat ini sangatlah menarik. Agen Anda dapat diperluas untuk mendukung pencarian inventaris atau memperkenalkan keranjang belanja untuk melacak hal yang mungkin diminati pengguna. Anda dapat menggunakan korsel untuk menampilkan item pada menu dan menggunakan saran, memungkinkan pengguna untuk memilih item yang mereka minati.

Berikut sedikit gambaran tentang hal-hal tersebut.

Bagaimana cara membangun pengalaman percakapan yang luar biasa?

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

Memberikan konteks dan menetapkan ekspektasi

Menyediakan konteks dapat berupa apa pun, mulai dari menyatakan secara eksplisit bagaimana Anda dapat membantu pengguna untuk memperkenalkan agen digital dengan persona yang relevan bagi pengguna. Agen yang berhasil di Business Messages menggunakan avatar representatif 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 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 meskipun jawabannya tersedia di situs bisnis. Akibatnya, bisnis harus menginvestasikan lebih banyak resource untuk menangani volume panggilan telepon terutama selama musim liburan.

Membuat pengguna terus berinteraksi

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 sedang memproses jawaban untuk pengguna tersebut.

Dengan fitur lengkap seperti indikator pengetikan, chip saran, kartu informasi, dan carousel, Anda dapat memandu pengguna melalui pengalaman pengguna happy path 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 dapat memberikan fungsi bagi pengguna. Pengguna yang terhubung dengan bisnis melalui pesan berharap pertanyaan mereka dijawab dengan cepat. Dalam situasi yang tidak ideal, agen digital tersebut tidak dapat memfasilitasi percakapan yang dapat menyebabkan pengalaman pengguna yang buruk. Untungnya, ada beberapa cara untuk mengatasi hal ini, seperti mentransfer percakapan ke agen langsung, yang akan kita bahas dalam codelab mendatang.

Apa selanjutnya?

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

• Kehidupan agen: Pembuatan konten untuk diluncurkan
• Persyaratan dan Panduan
• Panduan logo
• Semua Panduan

Dokumen referensi

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