Bu sayfa, Cloud Translation API ile çevrilmiştir.

İnternet'ten Mağazadan Teslim Alma: Bonjour Yemeği - Bölüm 1 - Başlarken

1. Giriş

Son Güncelleme: 11.05.2022

Business Messages'a hoş geldiniz.

Bu codelab, müşterilerin Google Arama ve Haritalar üzerinden yönettiğiniz işletmelerle bağlantı kurmasına olanak tanıyan Business Messages ile entegrasyona giriş niteliğindedir. Doğrudan Business Messages ile entegrasyon yapmak isteyen bir işletme olabilirsiniz, belki de birlikte çalıştığınız işletmelere yönelik mesajlaşma çözümleri geliştiren bağımsız bir yazılım tedarikçisinde çalışıyor olabilirsiniz veya Business Messages'la karşılaştınız ve platformda işlem yapmak istiyor olabilirsiniz.

Bu codelab'i kullanarak buraya neler katmış olursanız olun, muhteşem bir başlangıç yapabilirsiniz. Belgenin sonunda kullanıcıların etkileşim kurabileceği ilk dijital aracınız olmuş olacak. Biraz daha ayrıntıdan sonra Business Messages'ı kullanıma sunmaya hazır olduğunuzda milyonlarca müşteriye ulaşma potansiyeline sahip olursunuz.

İyi bir dijital temsilcinin özellikleri nelerdir?

Business Messages, mobil cihazlarda uygulama benzeri bir deneyim sunarak tüketicilerin ek bir uygulama yüklemeden işletmelerle bağlantı kurmasına olanak tanıyan sohbet odaklı bir platformdur. Dijital aracı, müşterilerinizin etkileşime girdiği mantıktır. Mantık, bulutta veya altyapınızda dağıtılan bir web uygulaması tarafından yönetilir. Bu, tamamen kullanıcıya nasıl yanıt verdiğinize bağlıdır. En iyi temsilciler beklentileri belirlemek, müşterilerin ilgisini canlı tutmak ve kullanıcıların beklentilerini anlayabilmek için gerekiyor.

Oluşturacaklarınız

Bu codelab'de Bonjour Meal adlı hayali bir şirket için Business Messages'ta dijital bir temsilci oluşturacaksınız. Bu dijital temsilci, "Saat kaçta kapatıyorsunuz?" gibi birkaç basit soruyu yanıtlar. veya "İnternet'ten satın alabilir miyim?" gibi sorular sorabilirsiniz.

Bu codelab'de kullanıcılarınız dijital aracı aracılığıyla öğe satın alabilir, para almak için kullanıcıyı bir ödeme işleyiciye yönlendirebilir ve ardından hayali ürünlerinin mağazadan teslim alınmasını planlayabilir.

Bu codelab'de, uygulamanız

Soruları öneri çipiyle yanıtlama
Dijital temsilcinizin yanıtlayabileceği sorular sorması için kullanıcıyı yönlendirme
Kullanıcının görüşmeyle etkileşimini canlı tutmak için zengin sohbet özellikleri sağlayın

Neler öğreneceksiniz?

Google Cloud Platform'da App Engine'de web uygulaması dağıtma. Alternatif olarak, yerel uygulamanızı herkese açık olarak test etmek için ngrok'u kullanabilirsiniz.
Kullanıcılardan mesaj almak için Business Messages hesabınızı web uygulaması webhook'uyla yapılandırma
Business Messages API ile kartlar, bantlar ve konuşma önerileri gibi zengin özellikler gönderme
Business Messages'ın mesajlarınızı gönderme şekli

Bu codelab, ilk dijital aracınızı oluşturmaya odaklanmaktadır.

Gerekenler

Ücretsiz Business Communications geliştirici hesabına kaydolun
Nasıl yapıldığını anlatan talimatlar için geliştirici sitemize
5 veya daha yeni bir sürüme sahip bir Android cihaz VEYA Google Haritalar uygulamasına sahip bir iOS cihazı
Web uygulaması programlama deneyimi
İnternet bağlantısı.

2. Kurulum

API'leri etkinleştirme

Django uygulamasıyla çalışacağımızdan bu codelab'de uygulamayı App Engine'e dağıtmak için Cloud Build API'den yararlanacağız. Alternatif olarak, ngrok kullanıyorsanız Cloud Build API'yi etkinleştirmeniz gerekmez.

Cloud Build API'yi etkinleştirmek için:

Google Cloud Console'da Cloud Build API'yi açın.
Etkinleştir'i tıklayın.

Hizmet hesabı oluşturma

Business Communications ve Business Messages API'lerine erişmek için bir hizmet hesabı oluşturmanız gerekir. Business Communications Developer Console'da hizmet hesabı oluşturma belgelerinde verilen adımları uygulayın.

Django Python EchoBot Başlangıç Kodunu Dağıtma

Bir terminalde, aşağıdaki komutu kullanarak Django Echo Bot Örneği'ni projenizin çalışma dizinine klonlayın:

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

Hizmet hesabı için oluşturulan JSON kimlik bilgileri dosyanızı örneğin kaynaklar klasörüne kopyalayın ve kimlik bilgilerini "bm-agent-service-account-credentials.json" olarak yeniden adlandırın.

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

Terminalde örneğin 1. adım dizinine gidin.

Örneği dağıtmak için bir terminalde aşağıdaki komutları çalıştırın:

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

PROJECT_ID, API'lere kaydolmak için kullandığınız projenin kimliğidir.

Dağıtılan uygulamanın URL'sini son komutun çıkışında not edin:

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

Az önce dağıttığınız başlangıç kodu, Business Messages'dan mesaj almanızı sağlayan bir webhook'a sahip web uygulaması içeriyor. Uygulama, kullanıcıya mesajları tekrarlar ve sohbet yüzeyindeki zengin özelliklerden bazılarını gösterebilir.

Webook'unuzu yapılandırın

Hizmetiniz dağıtıldığına göre Business Communications Developer Console'daki Hesap ayarları sayfasında webhook URL'nizi ayarlamak için uygulamanın URL'sini kullanacaksınız.

Webhook URL'si, uygulamanın URL'si + "/callback/" olacaktır. Örneğin, şuna benzer bir URL olabilir: https://PROJECT_ID.appspot.com/callback/

Business Communications Console'da Hesap ayarları sayfasına gidin. Gezinme çubuğunun altında sağ üst köşede GCP projenizin adını göreceksiniz. Açılır bir liste görürseniz GCP projenizi seçtiğinizden emin olun.

Teknik iletişim kişisi bilgilerini doldurun, ardından Webhook'u dağıtılan uygulamanızın webhook URL'siyle güncelleyin.

GCP projenize ait referansın yanındaki Kaydet'i tıklayın.

3. İlk Temsilcinizi oluşturma

Business Communications Developer Console'u kullanma

Business Communications Console'da, konsol kontrol paneline dönmek için sol üstteki logoyu, ardından Temsilci oluştur'u tıklayın. Temsilcinizi oluştururken aynı anda marka da oluşturursunuz. Temsilci türü olarak İşletme Mesajları'nı seçin ve İş ortağı bilgilerinin doğru olduğundan emin olun.

Marka alanına, oluşturduğunuz markanın adını yazın. Marka, birlikte çalıştığınız işletmedir. Tüketiciler, temsilciyle sohbet ederek etkileşim kurabilir. Temsilci adı alanında, kullanıcıların Business Messages görüşmesinde ne görmesini istediğinizi belirtin. Hayali Bonjour Meal örneğinde, Bonjour Rail, Bonjour Meal restoranlarını yöneten demiryolu şirketidir. Bu yüzden marka olarak Bonjour Rail’i, aracı olarak Bonjour Meal'ı seçeceğim.

Temsilci, markayı temsil eden sohbet odaklı varlıktır.

Aracı oluştur'u tıklayın ve konsolun işlem yapmasını bekleyin. Bu isteğin, markanın ve temsilcinin oluşturulması için Business Communications API'den birkaç kez istekte bulunması birkaç saniye sürer. Temsilci oluşturmak ve marka oluşturmak için doğrudan Business Communications API'yi kullanabilirsiniz. Konsolun aynısını yaparken curl isteğinin nasıl görüneceğini öğrenmek için belgelere göz atın.

İlk görüşmenizi yapma

Yeni oluşturduğunuz temsilciyi açın. Temsilcinizin ayrıntılarını incelemeye başlamanıza olanak tanıyan bir Genel Bakış sayfası gösterilir. Temsilci test URL'lerine göz atın. Bu URL'ler, cihazınızdaki sohbet yüzeyini çağırmak için kullanılır.

Çiplerden birini tıklayarak test URL'sini kopyalayabilirsiniz. Elbette, test etmek için elinizdeki cihazın test URL'sini de kopyalayın. Kopyalanan bu mesajı cihazınıza istediğiniz şekilde gönderin.

Mobil cihazınızda bağlantıya dokunduğunuzda Business Messages Agent Launcher, temsilcinizin test URL'si önceden doldurulmuş olarak çağrılır.

Temsilcinizin sohbet yüzeyini çağırmak için Başlat'a dokunun.

Temsilciyle iletişime geçin ve neler yapabildiğini öğrenin. Çoğunlukla, sohbet yüzeyinin yalnızca mesajlarınızı yansıttığını göreceksiniz. "Hello, World!" gibi bir mesaj Böylece temsilcinin aynı mesajı size geri göndereceğini görürsünüz.

Dağıtılan uygulama, Business Messages'daki zengin özellikleri gösteren bir mantık da içerir.

"Kart" gönderirseniz zengin kart
"Çip" gönderirseniz öneri çiplerini çağırırsınız.
"Bant" gönderirseniz zengin kartlardan oluşan bir bandı çağırırsınız.

Tebrikler! Bu, temsilcinizin sizinle ilk görüşmesidir.

Zengin özelliklerin her biri, temsilcinizle iletişim kuran kişiye daha iyi bir bağlam sağlamak amacıyla kullanılabilir. Fikirleri daha iyi aktarmak için zengin kart içinde grafik öğeler gönderin veya konuşmayı yönlendirmek için öneri çiplerini kullanın.

Karşılama mesajını güncelleme ve görüşme çiplerini kullanma

Developer Console ile ilgili alıştırma yapalım. Temsilcinin karşılama mesajını nasıl düzenleyeceğinizi ve kullanıcının iletişim kurmasına yardımcı olmak için öneri çiplerinden nasıl yararlanacağınızı öğrenelim.

Temsilcinin Genel Bakış sayfasına gidin ve Temsilci bilgileri'ni seçin. Karşılama mesajı ve görüşme başlatıcılar bölümüne ilerleyin.

Karşılama mesajını (sarı giriş alanı) şu şekilde güncelleyin:

Bonjour Meal başlangıç aracısına hoş geldiniz. Platformda desteklenen bazı zengin özellikleri size gösterebilirim. Bu önerileri deneyin.

Öneri çiplerini, bandı ve kartı çağırmak üzere sohbet başlatıcılar eklemek için yukarıdaki resimde mor kutuda belirtildiği şekilde + Sohbet başlatıcı ekle'yi tıklayın. Eklediğiniz ileti dizisi başlatıcıların bir metin bileşeni ve bir postbackData bileşeni olmalıdır. Metin, kullanıcıya gösterilen, postBack verileri ise temsilcinizin webhook'una gönderilen metindir. Webhook, geri gönderme verilerini ayrıştırır ve kullanıcıya uygun yanıtı gönderir.

Değişiklikten sonra konsoldaki Temsilci bilgileri şöyle görünür:

Konsolun sağ tarafında temsilcinin nasıl görüneceğine dair bir önizleme gösterilir. Karşılama mesajının, yaptığınız değişikliği ve altındaki öneri çiplerini nasıl yansıttığını fark ettiniz mi?

Bu, kullanıcı deneyiminin nasıl olacağına dair fikir edinmek için harika bir araçtır. Temsilcinizi oluştururken ve desteklemek istediğiniz kullanıcı yolculuklarını planlarken bunu kullanabilirsiniz.

Önceki veriler Business Messages altyapısında önbelleğe alındığından maalesef bu değişiklikler görüşmeye hemen yansıyor. Önbellek yaklaşık 2 saatte bir temizlendiği için bunu yarın deneyebileceksiniz.

Bu arada, şimdi, arka planda her şeyin nasıl çalıştığına bakalım.

4. Başlangıç kodu analiz ediliyor

Kaynak kodun 3.000 fitlik görünümü

Dağıttığınız başlangıç kodu, mesajları kullanıcılara tekrarlar ve zengin kart, bant veya öneri çipleri sunabilir. Bunun işleyiş şeklini anlayabilmemiz için kaynak kodu daha ayrıntılı bir şekilde inceleyelim. Sonra, neleri değiştirmemiz gerektiğine karar veririz.

Başlangıç kodu bir Django projesidir. Bu codelab serisinin sonraki bölümlerinde alışveriş sepetleri ve ilişkili sohbetler gibi verileri saklamak için Google Datastore'u kullanacağız. Daha önce hiç Django kullanmadıysanız endişelenmeyin. Django, oldukça basittir ve bu codelab'in sonunda Django'nun işleyiş şeklini öğrenmiş olacaksınız.

Django, üst düzeyde URL'leri görünümlere yönlendirir ve görüntüleme mantığı, tarayıcıda oluşturulan bir şablon oluşturur. Projenin urls.py adresine bakalım.

bm-django-echo-bot/bmcodelab/urls.py [31-37 arasındaki satırlar]

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

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

Burada iki rota tanımlanır. Böylece, bu iki URL tanınırsa Django mantık yürütebilir. Proje URL'si https://PROJECT_ID.appspot.com/ olduğuna göre projenin bildiği rotalar şunlardır:

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

Her iki URL yolu da bopis/views.py adresinden bopis_views öğesine başvuruda bulunuyor. Bu dosyada neler olduğuna bakalım. Öncelikle bopis_views.landing_placeholder konusunu inceleyelim.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [Lines 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>.")
...

Bu mantık parçası, projenin köküne işaret eden bir web isteği aldığında web sunucunuz tarafından yürütülür. Burada çok gösterişli bir şey olmaz: İsteği yapan tarayıcıya, sadece HTML içeren bir HTTPResponse döndürürüz. Evet, projenin kök URL'sini açabilirsiniz ancak bu kod laboratuvarına geri dönmenizi sağlayacak pek bir şey yoktur.

Diğer URL, yine bopis/views.py içindeki callback adlı bir işleve yönlendiriyor. Şimdi bu fonksiyona bakalım.

bm-django-echo-bot/bopis/views.py [60-101 numaralı satırlar]

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

Buradaki mantık, bir message veya suggestionResponse için istek gövdesini ayrıştırır ve bu bilgileri route_message adlı bir işleve iletir. Ardından, mesajın alındığını onaylamak için Business Messages altyapısına bir HttpResponse döndürür.

Bu önemli bir işlevdir. Bu mantık, web uygulamanızın webhook'udur. Bu webhook, temsilcinizle etkileşimde bulunan kullanıcılardan gelen mesajları alır. Webhook'u, bir kullanıcının neler söylediğini anlamak ve bu çıkarıma göre bir yanıt üretmek için Dialogflow gibi bir otomasyon aracına mesaj gönderecek şekilde genişletebilirsiniz. Kullanıcının canlı temsilciyle bağlantı kurabilmesi için mesajı da yönlendirebilirsiniz. Aşağıdaki şemaya bakın:

Business Messages, mesaj içeriğini webhook'unuza bir JSON yükü olarak gönderir ve buradan bir canlı temsilciye veya bot olarak yanıt verecek bir mantığa yönlendirilir. Bizim örneğimizde söz konusu yönlendirme mekanizması route_message'dir. Şöyle bir bakalım.

bm-django-echo-bot/bopis/views.py [105-122 numaralı satırlar]

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

Bu mantıkla birlikte, kullanıcının aldığı mesajın incelenmesi de başlar. Öncelikle mesaj, tüm karakterler azaltılarak normalleştirilir. Normalleştirildikten sonra, mesajın, dosyanın üst kısmında tanımlanan sabit değerlerden herhangi biri olup olmadığını kontrol eder.

bm-django-echo-bot/bopis/views.py [40-42. satırlar]

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

Yani bot, bu codelab'de önceki adımda yer alan görüşme başlatıcıların postback_data bölümüne yerleştirdiğimiz dizelerden herhangi birini özel olarak içeren mesajları ayrıştırır. Bu dizelerin hiçbiri görünmezse kodu echo_message adlı bir işleve iletir. Bu işlevin mesajları tekrarlayacağını tahmin edebilirsiniz.

İleti Gönderme

Yani şimdiye kadar, web uygulamasının iletileri nasıl aldığı hakkında bir fikriniz var. Bunların tümü webhook tarafından yapılır.

Peki uygulama, Business Messages'ı kullanarak bir kullanıcıya nasıl giden mesaj gönderir?

Altyapınız kullanıcıya yanıt verdiğinde yanıtı Business Messages API'ye gönderirsiniz. Bu API, mesajı kullanıcıya iletir.

Business Messages API'de Python, Node.js ve Java kitaplıkları bulunur. Ayrıca, altyapınız, kitaplığımızın bulunduğu dillerden birinde değilse doğrudan istek gönderebileceğiniz bir REST API'miz de mevcuttur. Belirli bir sohbet kimliğine mesaj göndermek için cURL'nin nasıl kullanıldığını görmek için İleti Gönderme sayfasına göz atın.

Bu codelab'de, GCP projenizde App Engine'e dağıtılmış Bonjour Meal başlangıç koduna entegre edilmiş Python istemci kitaplığını veya ngrok üzerinden yerel olarak çalıştırmaya odaklanacağız.

echo_message işlevine göz atalım ve mesajı Business Messages'a göndermek için API ile nasıl etkileşimde bulunduğumuzu inceleyelim.

bm-django-echo-bot/bopis/views.py [199-212 numaralı satırlar]

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

Bu işlevde, echo_message işlevine iletilen mesaj değişkeniyle bir BusinessMessagesMessage örneklenir. Nesne, örneklendikten sonra sohbet kimliğiyle birlikte send_message işlevine iletilir.

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

send_message işlevinin yaptığı tüm işlemler, bu görüşmeye mesaj gönderebildiğinizi doğrulamak, bir Business Messages istemcisi örneklendirmek ve mesajın belirtilen conversation ID öğesine gönderilmesi için bir istek oluşturmak amacıyla hizmet hesabı kimlik bilgilerinizi kullanmaktır.

Zengin özellikler bu send_message işlevinden de yararlanır ancak oluşturdukları mesajlar zengin kartlara, bantlara ve öneri çiplerine özgü olur. Zengin kartlar ve bantlar grafik öğeler içerebilirken, geri arama mantığının öğeyi uygun şekilde ayrıştırabilmesi için öneri çiplerinde postback_data bulunur.

Mesajları nasıl göndereceğinizi öğrendiğinize göre örneğin zengin kartlar, bantlar ve öneri çiplerini nasıl gönderdiğini araştırın. Aşağıdaki bölümde, bu zengin özelliklerin bazılarıyla mesaj göndermek için kaynak kodunu değiştireceğiz.

Hazır olduğunda Bonjour Yemek kabını özelleştirelim.

5. Aracınızı özelleştirme

Şu ana kadar codelab'i takip ettiyseniz değerli temsilcimizi görmemiz gerekir.

Tamam o kadar güzel değil, biraz sade görünüyor ve işletmemizi çok iyi yansıtmıyor. Neyse ki, temsilciyi destekleyen kod hakkında temel bilgilere sahibiz ve aracımızı istediğimiz şekilde özelleştirmek için ihtiyaç duyduğumuz araçlara sahibiz.

Bu codelab'in geri kalanında temsilcinin kapsamını aşağıdaki şekilde genişleteceğiz:

Gerçek bir logo ekleyin
İyileştirilmiş karşılama mesajı
Çalışma saatleri hakkında bilgi verin
Kullanıcıya internetten ürün satın almanın yakında mümkün olacağını bildirin
Konuşmayı kolaylaştırmak için sohbet öneri çiplerini kullanma

Logoyu ve karşılama mesajını güncelleme konusunda bize yardımcı olması için Business Communications Console'dan yararlanacağız. Ancak, dilediğiniz zaman aynı işlemi yapmak için Business Communications API'lerini de kullanabilirsiniz. Sonra çalışma saatleri hakkında bilgi vermek için uygun mesajları göndermek üzere kaynak kodunu güncellememiz gerekecek ve Bonjour Meal yakında bir online alışveriş özelliği sunacak. İşlem tamamlandığında Business Communications Console'a geri dönecek ve konuşmayı dijital temsilcinin desteklediği mutlu deneyimlere yönlendirmeye yardımcı olacak sohbetle ilgili öneri çipleri oluşturacağız.

Logo ekleme

Business Communication Console'da müşteri temsilcinizi seçin ve Temsilci bilgileri sayfasına gidin. Aşağıda sarıyla gösterildiği gibi işletme logosunu güncelleyeceğiz.

Yükle'yi tıkladığınızda, yüklemek veya URL'den içe aktarmak için bir resim seçebilirsiniz.

Kendi logolarınızı kullanırken önerdiğimiz en iyi uygulamalar hakkında bilgi edinmek için belgelerdeki logo tasarım yönergelerine göz atın.

Bu codelab'in başında klonladığınız kaynak kodunda bulunan logoyu yükleyelim. Bu dosyayı deponun ./assets/ dizininde bulabilirsiniz. Dosyanın adı "bonjour_meal-logo.png" olmalıdır. Dosyayı web tarayıcısındaki kalıcı alana sürükleyebilirsiniz. Resim kalitesini değiştirmek ve kırpmak için hafif bir düzenleme aracı sunulur. Resim çözünürlüğünü ayarlayın ve resmi, 50 KB'lık sınırdan küçük veya bu sınıra eşit olacak şekilde kırpın. Resimden memnun kaldığınızda onaylamak için mavi dairenin içindeki onay işaretini, ardından kalıcı öğenin en altındaki Seç'i tıklayın.

Son olarak, Temsilci bilgileri sayfasının sağ üst tarafındaki Kaydet'i tıklayın. Bu, aracı bilgileri sunucularımızda önbelleğe alındığından ve değişiklikten sonraki iki saat içinde görünür hale geldiğinden cihazınıza yansıtılması biraz zaman alacak bir değişikliktir.

Karşılama mesajını güncelleme

Karşılama mesajını güncelleme işlemini bu codelab'de daha önce uyguladık. Tekrar yapalım ama bu kez Bonjour Yemeği kullanıcı yolculuğuna daha uygun bir karşılama mesajı yapılandıralım.

Business Communications Console'da temsilcinizi seçin ve Temsilci bilgileri sayfasına gidin. Mesajı güncelleyebileceğiniz Karşılama mesajı giriş alanını görene kadar sayfayı aşağı kaydırın.

Görüşme başlatıcılar ekleyeceğimizi bildiğimizden bunları karşılama mesajımızda referans alabiliriz. Giriş alanındaki bunu aşağıdaki metinle değiştirelim:

"Bonjour Meal'a hoş geldiniz. Bonjour Meal ile ilgili sorularınızda size yardımcı olabilirim. Aşağıdaki seçeneklerden bazılarını deneyin."

Son olarak, Temsilci bilgileri sayfasının sağ üst tarafındaki Kaydet'i tıklayın. İşlerin hızlı olmasını sağlamak için önbelleğe alma mekanizmamız nedeniyle bu değişikliğin yansıtılması biraz zaman alacaktır!

Çalışma saatleri hakkında bilgi sağlama

Kullanıcılara bu bilgiyi sağlamak için Business Messages API'yi kullanarak kullanıcıya özel bir mesaj göndereceğiz.

Mesajların, views.py öğesinin route_message işlevinde ayrıştırıldığını hatırlayabilirsiniz. İşlev, önce dizeyi normalleştirir, ardından normalleştirilmiş mesajın sabit kodlu parametrelerden herhangi biriyle eşleşip eşleşmediğini kontrol etmeye başlar. Kolaylık sağlaması açısından, normalleştirilmiş mesajın CMD_BUSINESS_HOURS_INQUIRY olarak adlandıracağımız ve "işletme-saatleri-sorgusu" değerini içereceğimiz yeni bir sabit değere eşit olup olmadığını kontrol edeceğimiz ek bir koşul ekleyelim. Koşul doğru olarak değerlendirilirse send_message_with_business_hours adlı bir işlevi çağırırız.

route_message işlevi artık aşağıdaki gibi görünür:

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

Kodun çalışması için iki değişiklik daha yapmamız gerekir: Birincisi, diğer sabitlerle birlikte CMD_BUSINESS_HOURS_INQUIRY öğesini tanımlamak, ikincisi ise aslında send_message_with_business_hours işlevini tanımlamak ve Business Messages API'yi kullanarak bir mesaj göndermektir.

Önce, dosyanın en üstündeki sabiti diğer sabit bildirimlerle tanımlayalım:

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

Şimdi de send_message_with_business_hours öğesini tanımlamak gerekiyor. Bu işlevi, uygun Python söz dizimini uygulayarak dosyanın herhangi bir yerinde tanımlayabilirsiniz. Bu işlev yalnızca echo_message gibi bir mesaj gönderdiğinden, işlevi tanımlamak için onu bir şablon olarak kullanabilirsiniz.

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

Böylece, kullanıcı "işletme-saatleri-sorgusu" mesajını gönderdiğinde bot'umuz kullanıcıya bu çalışma saatlerini kullanarak yanıt verebilmelidir. Aşağıdaki gibi bir sonuçla karşılaşabilirsiniz:

Kaynak kodu GCP'ye dağıttıktan sonra değişiklikler hemen görünür. Web uygulamasını Google Cloud Platform'da, aracı bilgilerinin önbelleğe alındığı şekilde önbelleğe almayız. Böylece, bu deneyimi hemen test edebilirsiniz.

Kaynak değişiklikleri yapmak konusunda biraz ivmemiz olsa da, kullanıcının internetten alışveriş hakkında bilgi edinmesini sağlayacak bir değişiklik daha yapalım. Dijital temsilciniz, özelliğin henüz kullanılamadığını ancak daha sonra tekrar kontrol etmeniz gerektiğini belirten bir yanıt verir.

Kullanıcılara internetten alışverişin yakında mümkün olacağını bildirme

Kullanıcıyı çalışma saatleri hakkında bilgilendirmek için yaptığımıza benzer bir değişiklik yapacağız. Bu kez, bilgileri ilgi çekici bir görselle birlikte zengin bir karta yerleştirelim.

Normalleştirilmiş mesajı ayrıştırın ve değeri "online-shopping-query" olarak ayarlanmış CMD_ONLINE_SHOPPING_INQUIRY adlı sabit değer için koşulu kontrol edin. Bu işlem, koşul doğruysa send_online_shopping_info_message yöntemini çağırır.

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

Şimdi send_online_shopping_info_message kavramını tanımlayalım. Bu mesajın, resim içeren bir zengin kartta gönderilmesini istiyoruz. Bu nedenle, send_online_shopping_info_message öğesini tanımlamak için şablon olarak kullanmak üzere send_rich_card işlevini kopyalayalım.

İlk olarak uygun bir mesaj içerecek şekilde yedek metni güncellememiz gerekir. Cihaz herhangi bir nedenle zengin kart alamazsa yedek metin kullanılır. Ardından BusinessMessagesRichCard öğesini; alakalı bir başlık, açıklama, öneriler ve medya alanı ekleyerek güncellememiz gerekir. Fonksiyonumuz aşağıdaki gibi görünmelidir:

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

Harika! Dijital temsilcimiz artık internetten alışverişle ilgili bilgi edinmek isteyen kullanıcılara yanıt verebiliyor. Dijital temsilcimiz şu anda online alışverişi desteklememektedir. Bu nedenle, kullanıcıya özelliğin yakında kullanıma sunulacağını bildiren bir mesaj sunuyoruz. Kullanıcı internetten alışveriş yapmak için sorguda bulunduğunda dijital temsilcimiz bu şekilde görünür.

Kullanıcıların çalışma saatleri hakkında bilgi edinmelerini sağlamak için yaptığımız önceki değişiklikte olduğu gibi, ngrok kullanıyorsanız veya kodu GCP App Engine'e dağıttığınızda bu değişiklik hemen fark edilebilir.

Bir sonraki bölümde, konuşmaları olumlu bir yola yönlendirecek sohbet başlatıcıları ve öneri çiplerini kullanacağız.

Sohbeti yönlendirmek için çiplerden yararlanma

Kaynak kodunda bazı değişiklikler yaptık ve güncellenmiş dijital aracıyı dağıttık ancak kullanıcıların "işletme-saatleri-sorgusu" yazmasını hiçbir zaman beklemiyoruz. veya "online-alışveriş-bilgileri" ve işletme hakkında bilgi almak istiyor. Sohbet başlatıcıları, ileti dizisi açıldığında kullanıcının yalnızca hoş bir karşılama mesajıyla değil, aynı zamanda sohbet başlatıcılarla karşılanacağı şekilde güncelleyelim.

Business Communications Console (İşletme İletişimleri Konsolu) sayfasına gidin ve temsilcinizin Temsilci bilgileri sayfasına erişin. Daha önce "çipler", "kart" ve "bant" için sohbet başlatıcılar tanımlamıştık. Bu yöntemler işe yarasa da artık işletme işlevimizle alakalı değildir. Bu zengin özellikleri sergilemeye devam etmeleri için onları burada bırakabilir veya dijital temsilcinizin Bonjour Meal işletmesi için sohbet başlatıcıları görüntülemesini sağlayabilirsiniz.

İki yeni sohbet başlatıcı oluşturacağız. İlki için metini "Çalışma saatleriniz nedir?" olarak ayarlayın. ve Postback data (Geri gönderme verileri) değerini "business-hours-inquiry" (çalışma saatleri-sorgusu) olarak ayarlayın. İkinci görüşme başlatıcı için text değerini "Burada alışveriş yapabilir miyim?" olarak ayarlayın. ve Geri gönderme verileri'ni "online-shopping-info" olarak ayarlayın.

Sonuç, aşağıdaki ekran görüntüsündeki yapılandırma olmalıdır:

Business Communications Console'da yapılan diğer değişikliklerde olduğu gibi, bu değişikliklerin mobil cihazınızda görebilmeniz için geçerli hale gelmesi biraz zaman alacaktır.

Artık sohbeti başlatıcılarla işimiz bittiğine göre, görüşme başladıktan sonra kullanıcıyı mutlu bir yola yönlendirebilmek için bir yönteme ihtiyaç duyacağız. Kullanıcıyı, dijital temsilcinin kullanabildiği diğer özelliklere yönlendirmek için mesaj gönderildikten sonra, bağlamsal olarak çipler kullanılabilir. Böylece, kullanıcı çalışma saatleri veya online alışveriş hakkında bilgi istediğinde temsilciyle başka bir işlem yapma önerisi içeren bir mesaj göndeririz.

İşlevin sonuna aşağıdakini ekleyin:

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

BusinessMessages Önerisi'ndeki metin alanının, belgelerde açıklandığı gibi 25 karakterle sınırlı olduğunu unutmayın.

Güncellenmiş görüşme başlatıcılar ve öneri çiplerinin stratejik kullanımıyla birlikte beklenen kullanıcı deneyimine dair bazı ekran görüntülerini aşağıda bulabilirsiniz.

6. Tebrikler

Tebrikler, ilk Business Messages dijital temsilcinizi başarıyla oluşturdunuz.

Business Messages'ta dijital temsilcinizi desteklemek için bir web uygulaması dağıttınız, temsilcide değişiklik yapmak için Business Communications Console'u kullandınız ve kaynak kodunda değişiklik yaparak dijital temsilciyle kullanıcı deneyimini şekillendirdiniz.

Artık etkileşimli bir Business Messages deneyimi oluşturmak için atmanız gereken temel adımları biliyorsunuz. Bundan sonraki olanaklar heyecan verici. Temsilciniz, envanter aramasını destekleyecek şekilde genişletilebilir. Ayrıca, kullanıcının ilgilenebileceği ürünleri izlemek için bir alışveriş sepeti tanıtılabilir. Menüdeki öğeleri sergilemek için bir bant kullanabilir ve önerileri kullanarak kullanıcıların ilgilendikleri öğeleri seçmesini sağlayabilirsiniz.

Nasıl görünebileceğini buradan öğrenebilirsiniz.

Nasıl mükemmel bir sohbet deneyimi oluşturabilirim?

En iyi temsilciler, kullanıcıya görüşme üzerinden işlevsellik sağlarken, normalde telefon üzerinden veya hatta yüz yüze yaptıkları gibi işletmeyle etkileşimde bulunabilmeleri için kullanıcılara bağlamsal bilgiler sağlar. Aşağıdaki konuların, çalıştığınız bir işletmeyle yapmak isteyeceğiniz görüşmeler için nasıl geçerli olabileceğini düşünün.

Bağlam bilgisi sunma ve beklentileri belirleme

Bağlam bilgisi, kullanıcıya dijital aracıyı kullanıcının bağ kurabileceği bir karakterle tanıtmaya nasıl yardımcı olabileceğinizi açıkça belirtmekten ibaret olabilir. Business Messages'daki başarılı temsilciler, kullanıcıya kiminle konuştuğunu göstermek için temsili avatarı kullanır.

Beklentileri belirlemek, oluşturduğunuz kullanıcı deneyimine bağlıdır. Örneğin, temsilciniz envanter aramasını destekliyorsa yanıtı vermeden önce kullanıcıya stok durumunun düşük olabileceğini bildirin.

Kullanıcıya işlevsellik sağlama

Müşteriler her zaman işletmelerle bağlantı kurar. Business Messages, siparişin durumunu kontrol etmekten öğenin stokta olup olmadığını kontrol etmeye kadar çeşitli sorgularla karmaşık kullanıcı etkileşimlerini destekleyebilir. Birçok kullanıcı, sorularına cevap almak için işletmelerin web sitesinde bulunsa bile işletmeleri telefonla aramaya devam etmektedir. Sonuç olarak, işletmelerin özellikle tatil dönemlerinde arama hacmini karşılamak için daha fazla kaynak yatırımı yapması gerekir.

Kullanıcıların ilgisini canlı tutma

Kullanıcının görüşmeyle etkileşimini sürdürmek için diyaloğa dayalı temas noktaları sağlayın. İletiler arasında, kullanıcıya, kullanıcı için bir yanıt işlemekte olduğunuzu bildirmek üzere yazma göstergelerini çağırabilirsiniz.

Yazma göstergeleri, öneri çipleri, zengin kartlar ve bantlar gibi zengin özellikler sayesinde, kullanıcılarınızın bir öğe menüsünden sipariş verme gibi belirli görevleri tamamlamalarına yardımcı olmak için kullanıcı deneyimleri konusunda yol gösterici bilgiler sağlayabilirsiniz. Hedef, bir işletmenin telefon hattına gelen arama trafiğini azaltmaktır.

Bir görüşmenin kullanıcıya işlevsellik sağlaması çok önemlidir. Mesajlaşma üzerinden bir işletmeyle iletişim kuran kullanıcılar, sorularına hızlı bir şekilde yanıt almayı bekler. İdeal olmayan bir durumda dijital aracı, sohbeti kolaylaştıramaz ve bu durum kötü bir kullanıcı deneyimine yol açabilir. Neyse ki bu konuda bazı yöntemler (ör. görüşmeyi canlı temsilciye aktarma gibi) mevcuttur. Bu konuyu gelecekteki bir codelab'de ele alacağız.

Sırada ne var?

Hazır olduğunuzda Business Messages'ta yapabileceğiniz daha karmaşık etkileşimler hakkında bilgi edinmek için aşağıdaki konulardan bazılarına göz atın.

Referans belgeler

SuggestedReply
Business Messages mesajı referans belgesi
RichCard için JSON tanımı