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

1. Giriş

637766505206e0a1.png c604dca3ca211399.png

Last Updated: 2022-05-11

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 entegrasyon hakkında bir giriş niteliğindedir. Doğrudan Business Messages ile entegrasyon yapmak isteyen bir işletme olabilirsiniz. Belki de çalıştığınız işletmeler için mesajlaşma çözümleri geliştiren bağımsız bir yazılım satıcısında çalışıyorsunuzdur veya Business Messages'a rastlayıp platformda denemeler yapmak istiyorsunuzdur.

Bu codelab, buraya hangi amaçla geldiğinizden bağımsız olarak başlamak için harika bir yoldur. Bu eğitimin sonunda, kullanıcıların etkileşimde bulunabileceği ilk dijital temsilcinizi oluşturmuş olacaksınız. Biraz daha iyileştirme yaptıktan sonra Business Messages'ta kullanıma sunmaya hazır olduğunuzda milyonlarca müşteriye ulaşma potansiyeline sahip olursunuz.

İyi bir dijital temsilcinin özellikleri nelerdir?

Business Messages, tüketicilerin ek bir uygulama yüklemeden işletmelerle bağlantı kurmasına olanak tanıyan, mobil cihazlarda uygulama benzeri bir deneyim sunan bir sohbet yüzeyidir. Dijital temsilci, müşterilerinizin etkileşim kurduğu mantık parçasıdır. Mantık, bulutta veya altyapınızda dağıtılan bir web uygulaması tarafından yönetilir. Kullanıcıya nasıl yanıt vereceğiniz tamamen size bağlıdır. En iyi temsilciler, beklentileri belirlemek için bağlam sağlar, müşterilerinin ilgisini canlı tutar ve kullanıcıların ihtiyaçlarını desteklemek için işlevler sunar.

Ne oluşturacaksınız?

Bu codelab'de, Bonjour Meal adlı kurgusal bir şirket için Business Messages'da dijital bir temsilci oluşturacaksınız. Bu dijital temsilci, "Kapanış saatiniz nedir?" veya "İnternetten satın alabilir miyim?" gibi basit soruları yanıtlar.

Bu codelab'de kullanıcılarınız, dijital temsilci aracılığıyla ürün satın alabilecek, para toplamak için kullanıcıyı ödeme işlemcisine yönlendirebilecek ve ardından kurgusal ürünlerinin mağazadan teslim alınmasını planlayabilecek.

Bu codelab'de uygulamanız:

  • Öneri çipi aracılığıyla soruları yanıtlama
  • Kullanıcıyı, dijital temsilcinizin yanıtlayabileceği sorular sormaya yönlendirme
  • Kullanıcının görüşmeye dahil olmasını sağlamak için zengin sohbet özellikleri sunma

883b5a7f9f266276.png

Neler öğreneceksiniz?

  • Google Cloud Platform'da App Engine'e web uygulaması dağıtma Alternatif olarak, yerel uygulamanızı herkese açık şekilde test etmek için ngrok'u kullanabilirsiniz.
  • Kullanıcılardan mesaj almak için Business Messages hesabınızı bir web uygulaması webhook'uyla yapılandırma
  • Business Messages API'si ile kartlar, bantlar ve sohbet önerileri gibi zengin özellikler gönderme
  • Business Messages, iletilerinizi nasıl gönderir?

Bu codelab, ilk dijital temsilcinizi oluşturmaya odaklanmaktadır.

Gerekenler

  • Ücretsiz Business Communications geliştirici hesabına kaydolma
  • Bu özelliği nasıl kullanacağınızla ilgili talimatlar için geliştirici sitemize göz atın.
  • 5 veya sonraki bir sürümün yüklü olduğu bir Android cihaz ya da Google Haritalar uygulaması yüklü bir iOS cihaz
  • Web uygulaması programlama deneyimi
  • İnternet bağlantısı

2. Hazırlanma

API'leri etkinleştirme

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

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

  1. Google Cloud Console'da Cloud Build API'yi açın.
  2. 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 dokümanındaki adımları uygulayın.

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

Bir terminalde, aşağıdaki komutu kullanarak Django Echo Bot Sample'ı 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 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 proje kimliğidir.

Son komutun çıktısında dağıtılan uygulamanın URL'sini not edin:

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

Yeni dağıttığınız başlangıç kodu, Business Messages'dan mesaj almak için webhook'u olan bir web uygulaması içeriyor. Uygulama, mesajları kullanıcıya geri gönderir ve etkileşimli yüzeyde bulunan bazı zengin özellikleri gösterebilir.

Webhook'unuzu yapılandırma

Hizmetiniz dağıtıldığına göre, İşletme Mesajları Geliştirici Konsolu'ndaki Hesap ayarları sayfasında webhook URL'nizi ayarlamak için uygulamanın URL'sini kullanacaksınız.

Web kancası URL'si, uygulamanın URL'si + "/callback/" olur. Örneğin, https://PROJECT_ID.appspot.com/callback/ gibi bir şey olabilir.

Business Communications Console'daki Hesap ayarları sayfasına gidin. Sağ üst köşede, gezinme çubuğunun altında GCP proje adınızı görmeniz gerekir. Açılır liste görürseniz GCP projenizi seçtiğinizden emin olun.

Teknik irtibat kişisi ayrıntılarını doldurun ve ardından Webhook'u, dağıtılan uygulamanızın webhook URL'siyle güncelleyin.

ceb66c905ded40be.png

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

3. İlk Temsilcinizi oluşturma

İşletme İletişimleri Geliştirici Konsolu'nu kullanma

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

Marka bölümüne oluşturduğunuz markanın adını girin.Marka, birlikte çalıştığınız işletmedir ve tüketiciler, temsilciyle sohbet ederek etkileşimde bulunabilir. Ajan adı bölümünde, kullanıcıların Business Messages görüşmesinde görmesini istediğiniz bilgileri belirtin. Kurgusal Bonjour Meal örneğinde, Bonjour Rail, Bonjour Meal restoranlarını yöneten demiryolu şirketidir. Bu nedenle, marka olarak Bonjour Rail'i, temsilci olarak da Bonjour Meal'ı belirteceğim.

Temsilci, markayı temsil eden etkileşimli birimdir.

88a9798e6546eb4e.png

Create agent'ı (Temsilci oluştur) tıklayın ve konsolun sihrini konuşturmasına izin verin. Bu istek, markayı ve temsilciyi oluşturmak için Business Communications API'ye birkaç istekte bulunmak üzere birkaç saniye sürer. Temsilci ve marka oluşturmak için doğrudan Business Communications API'yi kullanabilirsiniz. Konsolun yaptığı işlemleri yapmak için bir curl isteğinin nasıl görüneceğini öğrenmek üzere dokümanları inceleyin.

İlk görüşmenizi yapma

Yeni oluşturduğunuz temsilciyi açtığınızda, 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ızda sohbet yüzeyini çağırmak için kullanılır.

f6bd8ded561db36f.png

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

Bağlantıya mobil cihazınızdan dokunduğunuzda, temsilci test URL'niz önceden doldurulmuş olarak Business Messages temsilci başlatıcısı çağrılır.

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

2bf9f282e09062de.png

Temsilciyle etkileşimde bulunarak neler yapabileceğini öğrenin. Çoğu durumda, etkileşimli yüzeyin yalnızca mesajlarınızı tekrarladığını görürsünüz. "Merhaba Dünya!" gibi bir mesaj gönderdiğinizde, temsilcinin aynı mesajı size geri gönderdiğini görürsünüz.

Dağıtılan uygulamada, Business Messages'da bulunan zengin özelliklerin gösterilmesini sağlayan bazı mantıklar da yer alır.

  • "Kart" gönderirseniz zengin kart çağrılır.
  • "Çip" gönderirseniz öneri çipleri etkinleştirilir.
  • "Bant" yazarsanız zengin kartlardan oluşan bir bant gösterilir.

Tebrikler! Bu, temsilcinizin sizinle yaptığı ilk görüşme.

Zengin özelliklerin her biri, temsilcinizle iletişim kuran kişiye daha iyi bağlam bilgisi sağlamak için kullanılabilir. Fikirlerinizi daha iyi iletmek için zengin kartlarda grafik öğeler gönderin veya görüşmeye yön vermek için öneri çipleri kullanın.

Karşılama mesajını güncelleme ve sohbet çiplerini kullanma

Play Console ile ilgili biraz pratik yapalım, temsilcinin karşılama mesajını nasıl düzenleyeceğimizi ve kullanıcının iletişim kurmasına yardımcı olmak için öneri çipleri nasıl kullanacağımızı görelim.

Aracı Genel bakış sayfasına gidip Aracı bilgileri'ni seçin. Karşılama mesajı ve sohbet başlatıcılar bölümüne gidin.

4323f988216fa054.png

Karşılama mesajını (sarı giriş alanı) aşağıdaki gibi güncelleyin:

Bonjour Meal başlangıç aracına hoş geldiniz. Mesajlarınızı tekrarlayabilir ve platformda desteklenen zengin özelliklerden bazılarını gösterebilirim. Bu önerileri deneyin.

Öneri çipleri, dönen reklam ve kartı çağırmak için görüşme başlatıcılar eklemek üzere yukarıdaki resimde mor kutuda belirtildiği gibi + Görüşme başlatıcı ekle'yi tıklayın. Eklediğiniz sohbet başlatıcıların bir metin bileşeni ve bir postbackData bileşeni olması gerekir. Metin, kullanıcıya gösterilen içerik, postBack verileri ise temsilcinizin webhook'una gönderilen içeriktir. Webhook, geri gönderme verilerini ayrıştırır ve kullanıcıya uygun yanıtı gönderir. 906bc74668a1b215.png

Konsoldaki aracı bilgileri, değişiklikten sonra aşağıdaki gibi görünür:

8e96b0a10edd20af.png

Konsolun sağ tarafında, temsilcinin nasıl görüneceğine dair bir önizleme gösterilir. Hoş geldiniz mesajının, az önce değiştirdiğiniz şekli ve altındaki öneri çipleri nasıl yansıttığını fark ettiniz mi?

Bu araç, kullanıcı deneyimi hakkında fikir edinmek için mükemmeldir. Bu aracı, aracınızı oluştururken ve desteklemek istediğiniz kullanıcı yolculuklarını planlarken kullanabilirsiniz.

Önceki veriler Business Messages altyapısında önbelleğe alındığından, bu değişiklikler maalesef sohbete hemen yansımayacaktır. Önbellek yaklaşık 2 saatte bir temizlenir. Bu nedenle, bu özelliği yarın deneyebilirsiniz.

Bu arada, her şeyin nasıl çalıştığına göz atalım.

4. Başlangıç kodunu analiz etme

Kaynak koduna genel bir bakış

Dağıttığınız başlangıç kodu, iletileri kullanıcılara geri gönderir ve zengin kart, bant veya öneri çipleri sunabilir. Bunun işleyiş şeklini anlamak için kaynak kodunu daha ayrıntılı bir şekilde inceleyelim. Ardından, neleri değiştirmemiz gerektiğini belirleriz.

Başlangıç kodu bir Django projesidir. Bu codelab serisinin ilerleyen bölümlerinde, alışveriş sepetleri ve ilişkili görüşmeler gibi verileri kalıcı hale getirmek için Google Datastore'u kullanacağız. Daha önce Django kullanmadıysanız endişelenmeyin. Django oldukça basittir ve bu codelab'in sonunda nasıl çalıştığını öğrenmiş olacaksınız.

Genel olarak Django, URL'leri görünümlere yönlendirir ve görünüm mantığı, tarayıcıda oluşturulan bir şablon üretir. Projenin urls.py dosyasına göz atalım.

bm-django-echo-bot/bmcodelab/urls.py [31-37. 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ımlanmıştır. Bu nedenle Django, bu iki URL tanınırsa mantığı yürütebilir. Proje URL'sinin https://PROJECT_ID.appspot.com/ olduğunu varsayarsak projenin bildiği rotalar şunlardır:

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

Her iki URL rotası da bopis/views.py dosyasındaki bopis_views öğesini ifade eder. Bu dosyada neler olduğuna bakalım. Başlamak için öncelikle bopis_views.landing_placeholder kavramını anlayalım.

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

... 
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ünü işaret eden bir web isteği aldığında web sunucunuz tarafından yürütülür. Burada çok karmaşık bir işlem yapılmaz: İsteği yapan tarayıcıya, HTML içeren bir HTTPResponse döndürülür. Evet, projenin kök URL'sini açabilirsiniz ancak sizi bu codelab'e geri yönlendireceği için orada yapabileceğiniz pek bir şey yoktur.

Diğer URL, bopis/views.py içinde bulunan callback adlı bir işleve yönlendiriyor. Bu işlevi inceleyelim.

bm-django-echo-bot/bopis/views.py [60-101. 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, istek gövdesini message veya suggestionResponse için ayrıştırır ve bu bilgileri route_message adlı bir işleve iletir. Ardından, iletinin 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 parçası, web uygulamanızın webhook'udur ve temsilcinizle etkileşimde bulunan kullanıcılardan mesaj alır. Kullanıcının ne söylediğini anlamak ve bu çıkarımdan bir yanıt oluşturmak için webhook'u genişleterek Dialogflow gibi bir otomasyon aracına mesaj gönderebilirsiniz. Ayrıca, kullanıcının canlı bir temsilciyle iletişime geçebilmesi için mesajı yönlendirebilirsiniz. Aşağıdaki diyagrama bakın:

b10113f9d037e6a5.png

Business Messages, mesaj içeriklerini JSON yükü olarak webhook'unuza gönderir. Bu içerikler, canlı müşteri temsilcisine veya bot olarak yanıt verecek bir mantığa yönlendirilir. Buradaki örneğimizde yönlendirme mekanizması route_message'dır. Şöyle bir bakalım.

bm-django-echo-bot/bopis/views.py [105-122. 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ık parçası, kullanıcı tarafından alınan mesajı incelemeye başlar. İlk olarak, tüm karakterler küçültülerek mesaj normalleştirilir. Normalleştirildikten sonra, iletinin dosyanın üst kısmında tanımlanan sabitlerden biri olup olmadığı kontrol edilir.

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'deki önceki adımda sohbet başlatıcıların postback_data bölümüne yerleştirdiğimiz dizeleri içeren mesajları ayrıştırır. Bu dizelerin hiçbiri görünmüyorsa ileti, echo_message adlı bir işleve iletilir. Bu işlevin iletileri yansıtacağını tahmin edebilirsiniz.

Mesaj Gönderme

Bu nedenle, iletilerin web uygulaması tarafından nasıl alındığı hakkında bir fikriniz olmalıdır. Tüm işlemler webhook tarafından yapılır.

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

a9475b1da93a83e8.png

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

İşletme Mesajları API'sinin Python, Node.js ve Java'da kitaplıkları vardır. Ayrıca, altyapınız kitaplığımızın olmadığı bir dildeyse doğrudan istekte bulunabileceğiniz bir REST API'miz de var. cURL'nin belirli bir görüşme kimliğine mesaj göndermek için nasıl kullanıldığını görmek üzere Mesaj Gönderme başlıklı makaleyi inceleyin.

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

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

bm-django-echo-bot/bopis/views.py [199-212. 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 message değişkeniyle bir BusinessMessagesMessage oluşturulur. Nesne oluşturulduktan sonra görüşme kimliğiyle birlikte send_message'ya iletilir.

bm-django-echo-bot/bopis/views.py [214-236. satırlar]

...
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ığı tek şey, bu sohbete mesaj gönderebileceğinizi doğrulamak için hizmet hesabı kimlik bilgilerinizi kullanmak, Business Messages istemcisini başlatmak ve mesajı belirtilen conversation ID'ye göndermek için bir istek oluşturmaktır.

Zengin özellikler de bu send_message işlevini kullanır ancak oluşturdukları mesajlar zengin kartlara, bantlara ve öneri çiplere özeldir. Zengin kartlar ve bantlar grafik öğeler içerebilir. Geri arama mantığının uygun şekilde ayrıştırabilmesi için öneri çipleri postback_data içerir.

Mesaj göndermeyi öğrendiğimize göre, örnek uygulamanın zengin kartları, bantları ve öneri çipleri nasıl gönderdiğini inceleyelim. Aşağıdaki bölümde, bu zengin özelliklerden bazılarını içeren mesajlar göndermek için kaynak kodu değiştireceğiz.

Hazır olduğunuzda Bonjour Meal aracısını özelleştirelim.

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

Bu codelab'i buraya kadar takip ettiyseniz güzel aracımızı görmemiz gerekir.

906bc74668a1b215.png

Pek güzel görünmüyor. Hatta biraz boş görünüyor ve işletmemizi pek iyi temsil etmiyor. Neyse ki, aracı destekleyen kod hakkında temel bilgilere ve aracımızı istediğimiz şekilde özelleştirmek için gereken araçlara sahibiz.

Bu codelab'in geri kalanında, aracıya aşağıdakileri ekleyeceğiz:

  • Gerçek bir logo ekleyin
  • İyileştirilmiş karşılama mesajı
  • Çalışma saatleri hakkında bilgi verme
  • Kullanıcıya, öğeleri internetten satın alma özelliğinin yakında kullanıma sunulacağını bildirin.
  • Sohbeti kolaylaştırmak için sohbet önerisi çipleri kullanma

Logoyu ve karşılama mesajını güncellememize yardımcı olması için Business Communications Console'dan yararlanırız. Ancak aynı işlemleri yapmak için her zaman doğrudan Business Communications API'lerini kullanabilirsiniz. Ardından, çalışma saatleri hakkında bilgi verme ve Bonjour Meal'in yakında online alışveriş özelliği sunacağıyla ilgili uygun mesajlar göndermek için kaynak kodunu güncellememiz gerekecek. Bu işlem tamamlandığında Business Communications Console'a dönecek ve sohbeti, dijital temsilcinin desteklediği sorunsuz deneyimlere yönlendirmeye yardımcı olacak sohbet önerisi çipleri oluşturacağız.

Business Communications Console'da temsilcinizi seçin ve Temsilci bilgileri'ne gidin. Aşağıda sarı renkle belirtildiği gibi işletme logosunu güncellememiz gerekir.

eb6b8ac6b62387ee.png

Yükle'yi tıkladığınızda yüklenecek veya URL'den içe aktarılacak bir resim seçebilirsiniz.

Kendi logolarınızı kullanırken uygulamanızı önerdiğimiz en iyi uygulamalar hakkında bilgi edinmek için dokümanlardaki logo tasarım yönergelerini inceleyin.

Bu codelab'in başında klonladığınız kaynak kodunda bulunan logoyu yükleyelim. Bu dosyayı, deponun ./assets/ dizininde "bonjour_meal-logo.png" adıyla bulabilirsiniz. Dosyayı web tarayıcısındaki kalıcı öğeye sürükleyebilirsiniz. Resim kalitesini ve kırpma işlemini değiştirmek için basit bir düzenleme aracı gösterilir. Resmi, 50 KB sınırını aşmayacak şekilde kırpın ve çözünürlüğünü ayarlayın. Görüntüden memnun olduğunuzda onaylamak için mavi dairedeki onay işaretini, modalın alt kısmında ise Seç'i tıklayın.

1856081f59623ae2.png

Son olarak, Aracı bilgileri sayfasının sağ üst kısmındaki Kaydet'i tıklayın. Bu değişiklik, aracı bilgileri sunucularımızda önbelleğe alındığı için cihazınıza yansıtılması biraz zaman alacaktır ve değişiklikten sonraki iki saat içinde görünür hâle gelecektir.

Karşılama mesajını güncelleme

Karşılama mesajını güncelleme işlemini bu codelab'in önceki bölümlerinde yapmıştık. Aynı işlemi tekrar yapalım ancak bu kez Bonjour Meal kullanıcı yolculuğuna daha uygun bir karşılama mesajı yapılandıralım.

İşletme İletişimleri Konsolu'nda temsilcinizi seçin ve Temsilci bilgileri'ne gidin. Mesajı güncelleyebileceğiniz Karşılama mesajı giriş alanını görene kadar aşağı kaydırın.

6598fec47021136e.png

Konuşma başlatıcılar ekleyeceğimizi bildiğimiz için karşılama mesajımızda bunlara atıfta bulunabiliriz. Giriş alanında, metni aşağıdaki metinle değiştirelim:

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

Son olarak, Aracı bilgileri sayfasının sağ üst kısmındaki Kaydet'i tıklayın. Bu değişiklik, işlemlerin hızlı bir şekilde yapılmasını sağlamak için kullandığımız önbelleğe alma mekanizması nedeniyle yine biraz zaman alacaktır.

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

Bu bilgileri kullanıcılara sağlamak için Business Messages API'yi kullanarak kullanıcıya özel bir mesaj göndeririz.

İletilerin views.py işlevinin route_message bölümünde ayrıştırıldığını hatırlayabilirsiniz. İşlev önce dizeyi normalleştirir, ardından normalleştirilmiş mesajın sabit kodlanmış parametrelerden herhangi biriyle eşleşip eşleşmediğini kontrol etmeye başlar. Basitlik için, normalleştirilmiş mesajın CMD_BUSINESS_HOURS_INQUIRY adını vereceğimiz ve "business-hours-inquiry" değerini içerecek yeni bir sabite eşit olup olmadığını kontrol ettiğ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ünecek:

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 değerini tanımlamaktır. İkincisi ise send_message_with_business_hours işlevini tanımlamak ve Business Messages API'yi kullanarak mesaj göndermektir.

Öncelikle dosyanın en üstündeki sabiti diğer sabit bildirimleriyle birlikte 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 tanımlayalım. Bu işlevi, uygun Python söz dizimini kullanarak dosyanın herhangi bir yerinde tanımlayabilirsiniz. Bu işlev, echo_message gibi yalnızca bir mesaj gönderdiğinden bu işlevi tanımlamak için ş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 botumuz, kullanıcı "business-hours-inquiry" mesajını gönderdiğinde bu çalışma saatleriyle yanıt verebilir. Şuna benzer bir sonuçla karşılaşabilirsiniz:

125802166995afd5.png

Kaynak kodu GCP'ye dağıttıktan sonra değişiklikler hemen görünür hale gelir. Web uygulamasını Google Cloud Platform'da aracı bilgileri gibi önbelleğe almadığımız için bu deneyimi hemen test edebilirsiniz.

Kaynak değişiklikleri konusunda biraz ilerleme kaydettik. Şimdi de kullanıcıların online alışveriş hakkında bilgi almasına olanak tanıyan 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ıya online alışveriş özelliğinin yakında kullanıma sunulacağını bildirme

Kullanıcıyı çalışma saatleri hakkında bilgilendirmek için yaptığımız gibi benzer bir değişiklik yapacağız. Bu kez, bilgileri ilgi çekici bir resimle birlikte zengin kartta gösterelim.

Normalleştirilmiş mesajı ayrıştırın ve koşul doğruysa send_online_shopping_info_message'ı çağıran, değeri "online-shopping-inquiry" olarak ayarlanmış CMD_ONLINE_SHOPPING_INQUIRY adlı bir sabit için koşulu kontrol edin.

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'ı tanımlayalım. Bu mesajın resim içeren bir zengin kart olarak gönderilmesini istiyoruz. Bu nedenle, send_rich_card işlevini kopyalayarak send_online_shopping_info_message tanımlamak için şablon olarak kullanalım.

Öncelikle yedek metni uygun bir mesaj içerecek şekilde güncellemeliyiz. Cihaz herhangi bir nedenle zengin kart alamadığında yedek metin kullanılır. Ardından, BusinessMessagesRichCard öğesini alakalı bir başlık, açıklama, öneriler ve medya alanı içerecek şekilde güncellememiz gerekir. İşlevimiz şu şekilde 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 online alışveriş hakkında bilgi almak isteyen kullanıcılara yanıt verebiliyor. Şu anda dijital temsilcimiz online alışverişi desteklemediği için kullanıcıya bu özelliğin yakında kullanıma sunulacağını bildiren bir mesaj gösteriyoruz. Kullanıcı online alışveriş hakkında bilgi almak istediğinde dijital temsilcimiz şu şekilde görünür:

5cd63c57c1b84f9a.png

Kullanıcının çalışma saatleri hakkında bilgi almasına olanak tanıyan önceki değişikliğimizde olduğu gibi, ngrok kullanıyorsanız bu değişikliği hemen, kodu GCP App Engine'e dağıttıktan sonra ise en kısa sürede görebilirsiniz.

Bir sonraki bölümde, sohbeti mutlu sona ulaştıracak şekilde yönlendirmek için sohbet başlatıcıları ve öneri çipleri kullanacağız.

Sohbeti yönlendirmek için çipleri kullanma

Kaynak kodda bazı değişiklikler yaptık ve güncellenmiş dijital temsilciyi kullanıma sunduk. Ancak kullanıcıların işletme hakkında bilgi almak için "business-hours-inquiry" (çalışma saatleri hakkında bilgi) veya "online-shopping-info" (online alışveriş bilgileri) yazmasını beklemeyiz. Sohbet başlatıcıları, sohbet açıldığında kullanıcıya yalnızca hoş bir karşılama mesajı göstermekle kalmayıp sohbet başlatıcılar da sunacak şekilde güncelleyelim.

Business Communications Console'a gidip temsilcinizin Temsilci bilgileri sayfasına erişin. Daha önce "çip", "kart" ve "carousel" için sohbet başlatıcılar tanımlamıştık. Bu işlevler hâlâ çalışsa da artık işletme işlevimizle alakalı değil. Bu zengin özellikleri göstermeye devam etmek için bunları bırakabilir veya dijital temsilcinizin özellikle Bonjour Meal işletmesi için sohbet başlatıcılar göstermesi için kaldırabilirsiniz.

İki yeni sohbet başlatıcı oluşturacağız. İlkinde metni "Çalışma saatleriniz nedir?" olarak, geri gönderme verilerini ise "business-hours-inquiry" olarak ayarlayın. İkinci sohbet başlatıcı için metni "Burada satın alma işlemi yapabilir miyim?" olarak, geri gönderme verilerini ise "online-shopping-info" olarak ayarlayın.

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

ef6e6888acea93e3.png

İşletme İletişimleri Konsolu'nda yapılan diğer değişikliklerde olduğu gibi, bu değişikliğin de mobil cihazınızda görünmesi biraz zaman alacaktır.

Konuşma başlatıcıları tamamladığımıza göre, görüşme başladıktan sonra kullanıcıyı mutlu bir yola yönlendirecek bir yöntem de istiyoruz. Kullanıcıyı dijital temsilcinin kullanabildiği diğer özelliklere yönlendirmek için, mesaj gönderildikten sonra bağlama göre çip kullanabilirsiniz. Bu nedenle, kullanıcı çalışma saatleri veya online alışveriş hakkında bilgi aldığında, ajanla başka bir işlem yapmasını öneren bir mesaj göndeririz.

İşlevin sonuna şunları 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)
...

Dokümanlarda açıklandığı gibi, BusinessMessagesSuggestion içindeki metin alanının 25 karakterle sınırlı olduğunu unutmayın.

Güncellenen sohbet başlatıcılar ve öneri çipleriyle ilgili stratejik kullanımla birlikte, beklenen kullanıcı deneyiminin bazı ekran görüntülerini aşağıda bulabilirsiniz.

ef57695e2bacdd20.png

6. Tebrikler

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

Business Messages'daki 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 kodda değişiklik yaparak kullanıcı deneyimini dijital temsilciyle şekillendirdiniz.

Artık etkileşimli bir Business Messages deneyimi oluşturmak için gereken temel adımları biliyorsunuz ve bundan sonraki olasılıklar heyecan verici. Aracınız, envanter aramasını destekleyecek veya kullanıcının ilgilenebileceği şeyleri takip etmek için bir alışveriş sepeti sunacak şekilde genişletilebilir. Menüdeki öğeleri sergilemek için bir bant kullanabilir ve önerilerle kullanıcının ilgilendiği öğeleri seçmesine izin verebilirsiniz.

Bu özelliğin nasıl görünebileceğine dair bir önizleme:

57d2bb7b0ec38c81.png

Nasıl iyi bir yapay zeka destekli kampanya oluşturma deneyimi oluşturabilirim?

En iyi temsilciler, kullanıcıya bağlamsal bilgiler sunarken görüşme aracılığıyla işlevsellik de sağlar. Böylece kullanıcılar, işletmeyle telefonda veya yüz yüze olduğu gibi etkileşim kurabilir. Aşağıdaki konuların, birlikte çalıştığınız bir işletmeyle yapmak istediğiniz görüşme için nasıl geçerli olabileceğini düşünün.

Bağlam bilgisi verin ve beklentileri belirleyin

Bağlam sağlamak, kullanıcıya nasıl yardımcı olabileceğinizi açıkça belirtmekten dijital temsilciyi kullanıcıyla ilişkilendirilebilecek bir karakterle tanıtmaya kadar her şeyi kapsayabilir. Business Messages'da başarılı olan temsilciler, kullanıcıya kiminle konuştuğunu göstermek için temsili avatarı kullanır.

Beklentileri belirleme, oluşturduğunuz kullanıcı deneyimine bağlıdır. Örneğin, temsilciniz envanter aramayı destekliyorsa yanıtı vermeden önce kullanıcının stok durumunun düşük olabileceği konusunda bilgilendirin.

Kullanıcıya işlevsellik sağlama

Tüketiciler, işletmelerle sürekli olarak bağlantı kuruyor. Sipariş durumunu kontrol etme veya bir ürünün stokta olup olmadığını kontrol etme gibi sorgulara yanıt verebilen Business Messages, karmaşık kullanıcı etkileşimlerini destekleyebilir. Birçok kullanıcı, sorularının yanıtları işletmelerin web sitesinde bulunsa bile telefonla arayarak yanıt almak istiyor. Bu durum, işletmelerin özellikle tatil dönemlerinde arama hacmini yönetmek için daha fazla kaynak ayırması gerektiği anlamına geliyor.

Kullanıcı etkileşimini sürdürme

Kullanıcının görüşmeye dahil olmasını sağlamak için etkileşimli dokunma noktaları sunun. Mesajlar arasında, kullanıcının sorusuna yanıt hazırladığınızı bildirmek için yazma göstergelerini kullanabilirsiniz.

Yazma göstergeleri, öneri çipleri, zengin kartlar ve bantlar gibi zengin özelliklerle kullanıcıyı mutlu eden kullanıcı deneyimleri sunarak kullanıcının belirli görevleri (ör. menüden sipariş verme) tamamlamasına yardımcı olabilirsiniz. Amaç, bir işletmenin telefon hattına gelen arama trafiğini azaltmaktır.

Bir sohbetin kullanıcıya işlevsellik sağlaması çok önemlidir. Mesajlaşma yoluyla bir işletmeyle iletişime geçen kullanıcılar, sorularının hızlı bir şekilde yanıtlanmasını bekler. İdeal olmayan bir durumda, dijital temsilci görüşmeyi kolaylaştıramaz ve bu da kötü bir kullanıcı deneyimine yol açabilir. Neyse ki bu sorunu çözmenin yolları var. Örneğin, sohbeti canlı bir müşteri temsilcisine aktarabilirsiniz. Bu konuyu gelecekteki bir codelab'de ele alacağız.

Yapabilecekleriniz

Hazır olduğunuzda, Business Messages'da gerçekleştirebileceğ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