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

1. Giriş

637766505206e0a1.png c604dca3ca211399.png

Son Güncelleme Tarihi: 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. Business Messages ile doğrudan entegrasyon yapmak isteyen bir işletme olabilir, birlikte çalıştığınız işletmeler için mesajlaşma çözümleri geliştiren bağımsız bir yazılım tedarikçisinde çalışıyorsunuz ya da Business Messages'a denk geliyor ve platformla uğraşmak istiyorsunuz.

Sizi buraya getiren şey ne olursa olsun, bu codelab'i kullanarak başlangıç yapabilirsiniz. Bu sürenin sonunda, kullanıcıların etkileşime girebileceği ilk dijital aracınızı oluşturmuş olursunuz. Biraz daha iyileştikten sonra Business Messages'ı kullanmaya hazır olduğunuzda milyonlarca müşteriye ulaşma potansiyeline sahip olacaksınız.

İyi bir dijital temsilcinin avantajları nelerdir?

Business Messages, mobil cihazlarda uygulama benzeri bir deneyim sunan ve tüketicilerin ek bir uygulama yüklemeden işletmelerle bağlantı kurmasına olanak tanıyan bir sohbet ortamıdır. Dijital aracı, müşterilerinizin etkileşime girdiği mantığın bir 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, müşterilerin ilgisini canlı tutmak ve kullanıcıların ihtiyaçlarını destekleyecek işlevler sağlamak için bağlam sunar.

Oluşturacağınız araç

Bu codelab'de Bonjour Meal adlı hayali bir şirket için Business Messages'ta dijital bir aracı oluşturacaksınız. Bu dijital temsilci, "Saat kaçta kapatıyorsunuz?" veya "İnternetten ürün satın alabilir miyim?" gibi birkaç basit soruya yanıt verir.

Bu codelab'de kullanıcılarınız dijital aracı üzerinden ürün satın alabilecek, para tahsil etmesi için kullanıcıyı ödeme işleyiciye yönlendirebilecek ve ardından hayali ürünlerinin mağazadan teslim alınmasını sağlayabilecektir.

Bu codelab'de uygulamanız:

  • Soruları öneri çipi ile yanıtlayın
  • Dijital temsilcinizin yanıtlayabileceği sorular sorması için kullanıcıyı yönlendirin
  • Kullanıcının görüşmede kalmasını sağlamak için zengin sohbet özellikleri sağlayın

883b5a7f9f266276.png

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 aracını kullanabilirsiniz.
  • Kullanıcılardan mesaj almak için Business Messages hesabınızı bir web uygulaması webhook ile 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 odaklanmıştır.

Gerekenler

  • Ücretsiz Business Communications geliştirici hesabına kaydolma
  • Nasıl yapılacağını anlatan talimatlar için geliştirici sitemize göz atın.
  • Sürüm 5 veya daha yeni bir sürüme sahip Android cihaz VEYA Google Haritalar uygulamasına sahip bir iOS cihaz
  • Web uygulaması programlama konusunda deneyim
  • İnternet bağlantısı!

2. Kurulum

API'leri etkinleştirme

Bir Django uygulaması ile çalışacağız. Bu nedenle, bu codelab'de uygulamayı App Engine'e dağıtmak için 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şturmak için belgelerdeki adımları uygulayın.

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

Bir terminalde, aşağıdaki komutla Django Echo Bot Sample'ı (Django Echo Bot Örneği) 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

Bir terminalde, örneğin 1. adım dizinine gidin.

Örneği dağıtmak için bir terminalde şu 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.

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

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

Az önce dağıttığınız başlangıç kodu, Business Messages'tan mesaj almak için webhook içeren bir web uygulaması içerir. Uygulama, mesajları kullanıcıya yeniden gönderir ve sohbet yüzeyindeki zengin özelliklerden bazılarını gösterebilir.

Webook'unuzu yapılandırın

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

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

Business Communications Console'un Hesap ayarları sayfasına gidin. Gezinme çubuğunun altında sağ üst köşede GCP projenizin adını görürsünüz. 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, dağıtılan uygulamanızın webhook URL'siyle Webhook'u güncelleyin.

ceb66c905ded40be.png

GCP projeniz referansını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 geri dönmek için sol üstteki logoyu ve ardından Temsilci oluştur'u tıklayın. Temsilcinizi oluştururken marka da oluşturursunuz. Temsilci türü için Business Messages'ı seçin ve İş ortağı bilgilerinin doğru olduğundan emin olun.

Marka alanına oluşturduğunuz markanın adını yazın.Marka, çalıştığınız işletmedir ve tüketiciler temsilciyle sohbet ederek etkileşime geçebilir. Temsilci adı alanında, kullanıcıların Business Messages görüşmesinde ne görmelerini istediğinizi belirtin. Hayali Bonjour Yemeği örneğinde, Bonjour Rail, Bonjour Yemek restoranlarını yöneten demiryolu şirketidir. Bu nedenle marka olarak Bonjour Rail’i, aracı olarak ise Bonjour Meal’ı belirtiyorum.

Temsilci, markayı temsil eden sohbet unsurudur.

88a9798e6546eb4e.png

Temsilci oluştur'u tıklayın ve konsola bırakın. Bu isteğin, markayı ve temsilciyi oluşturmak için Business Communications API'ye çeşitli isteklerde bulunması birkaç saniye sürer. Temsilci ve marka oluşturmak için Business Communications API'yi doğrudan kullanabilirsiniz. Konsolun yaptığı işlemleri yapmak için curl isteğinin nasıl görüneceğine bakmak için dokümanlara göz atın.

İlk görüşmenizi yapma

Az önce oluşturduğunuz aracıyı açın. Temsilcinizle ilgili ayrıntıları incelemeye başlayabileceğiniz Genel Bakış sayfasını görürsünüz. Aracı testi 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 elinizdeki cihazın test URL'sini kopyalayın. Kopyalanan bu mesajı cihazınıza istediğiniz şekilde gönderin.

Mobil cihazınızda bağlantıya dokunduğunuzda, temsilcinizin test URL'si önceden doldurulmuş olarak Business Messages Temsilci Başlatıcı başlatılır.

Temsilcinizin görüşme yüzeyini çağırmak için Başlat'a dokunun.

2bf9f282e09062de.png

Temsilciyle etkileşim kurun ve neler yapabildiğini öğrenin. Çoğunlukla, sohbet yüzeyinin yalnızca mesajlarınızı yansıttığını fark edeceksiniz. "Merhaba Dünya!" gibi bir mesaj gönderdiğinizde temsilcinin aynı mesajı size göndereceğini göreceksiniz.

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

  • "Kart" gönderirseniz zengin kart çağırırsınız.
  • "Çip" gönderirseniz öneri çiplerini çağırırsınız
  • "Bant" gönderirseniz zengin kart bandını çağırırsınız.

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

Zengin özelliklerin her biri, temsilcinizle iletişim kuran kişiye daha iyi bir bağlam sunmak için kullanılabilir. Fikirleri daha iyi iletmek için grafik öğeleri zengin kartlarla gönderin veya konuşmayı yönlendirmek için öneri çiplerini kullanın.

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

Geliştirici Konsolu ile ilgili biraz 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ı görelim.

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

4323f988216fa054.png

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

Bonjour Yemek Başlangıç aracısına hoş geldiniz. Mesajlarınızı tekrar iletip platformda desteklenen bazı zengin özellikleri gösterebilirim. Bu önerileri deneyin.

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

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

8e96b0a10edd20af.png

Konsolun sağ tarafında, temsilcinin nasıl görüneceğinin bir önizlemesini görürsünüz. Karşılama mesajının, değişiklik yaptığınız metni ve altındaki öneri çiplerini nasıl yansıttığını fark ettiniz mi?

Bu, kullanıcı deneyimine ilişkin bir fikir edinmek için harika bir araçtır. Bu aracı, temsilcinizi oluştururken ve desteklemek istediğiniz kullanıcı yolculuklarını planlarken kullanabilirsiniz.

Önceki veriler Business Messages altyapısında önbelleğe alındığından, maalesef bu değişikliklerin görüşmeye hemen yansıtıldığını göremeyiz. Önbellek yaklaşık 2 saatte bir temizlendiği için bu işlemi yarın deneyebilirsiniz.

Bu arada, arka planda her şeyin nasıl olduğuna bir göz atalım.

4. Başlangıç kodu analiz ediliyor

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

Dağıttığınız başlangıç kodu, mesajları kullanıcılara yeniden gönderir ve zengin kart, bant veya öneri çipleri sunabilir. Bunun nasıl çalıştığını anlayabilmemiz için kaynak kodu daha derinlemesine inceleyelim. Sonra neleri değiştirmemiz gerektiğini öğreneceğiz.

Başlangıç kodu bir Django projesidir. Bu codelab serisinin sonraki bir bölümünde alışveriş sepetleri ve ilişkili sohbetler gibi verileri korumak için Google Datastore'u kullanacağız. Daha önce Django'yu kullanmadıysanız endişelenmeyin. Django'nun kullanımı oldukça basittir. 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 oluşturur. Projenin urls.py adresine göz atalı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ımlanmıştır ve böylece Django, bu iki URL tanınması durumunda mantık yürütebilir. Proje URL'si https://PROJECT_ID.appspot.com/ olduğunda 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 adresindeki bopis_views ifadesini belirtir. Bu dosyada neler olduğuna bir göz atalım. Öncelikle bopis_views.landing_placeholder konusunu anlayalım.

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [Satır 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 biti, projenin köküne işaret eden bir web isteği aldığında web sunucunuz tarafından yürütülür. Burada fazla gösterişli bir şey olmaz: İsteği yapan tarayıcıya, HTML içeren bir HTTPResponse yanıtı döndürürüz. Evet, projenin kök URL'sini açabilirsiniz ancak sizi bu codelab'e geri döndüreceği için yapılacak pek bir şey yoktur.

Diğer URL, yine bopis/views.py içinde bulunan callback adlı bir işleve yönlendirir. Şimdi bu işleve göz atalım.

bm-django-echo-bot/bopis/views.py [Satır 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.")
...

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

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

b10113f9d037e6a5.png

Business Messages, mesaj içeriğini webhook'unuza JSON yükü olarak gönderir. Burada mesaj, canlı aracıya veya bot olarak yanıt vermek için bir mantığa yönlendirilir. Bizim örneğimizde bu yönlendirme mekanizması route_message'dir. Şöyle bir bakalım.

bm-django-echo-bot/bopis/views.py [Satır 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)
...

Bu mantık, kullanıcı tarafından alınan mesajı incelemeye başlar. İlk olarak mesaj, tüm karakterler azaltılarak normalleştirilir. Normalleştirildikten sonra, iletinin dosyanın üst kısmında tanımlanan sabit değerlerden 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'
...

Başka bir deyişle, bot bu codelab'in önceki adımında bulunan görüşme başlatıcıların postback_data öğesine yerleştirdiğimiz dizelerden herhangi birini özellikle içeren mesajları ayrıştırır. Bu dizelerin hiçbiri görünmezse mesajı yalnızca echo_message adlı bir işleve iletir. Bunu da iletileri yansıtmasını beklersiniz.

Mesaj Gönderme

Şimdiye kadar, mesajların web uygulaması tarafından nasıl alındığı hakkında bir fikriniz olmalı. Bu işlemlerin tümü webhook ile yapılır.

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

a9475b1da93a83e8.png

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

Business Messages API'de Python, Node.js ve Java'da kitaplıklar bulunur. Ayrıca, altyapınız kitaplığımızın bulunduğu dilde değilse doğrudan istek gönderebileceğiniz bir REST API de sunuyoruz. Belirli bir ileti dizisi kimliğine ileti göndermek için cURL'nin nasıl kullanıldığını görmek için Mesaj Gönderme bölümüne bakın.

Bu codelab'in amacı doğrultusunda, GCP projenizde App Engine'e dağıtılan veya ngrok aracılığıyla yerel olarak çalışan Bonjour Yemek başlangıç koduna entegre edilmiş Python istemci kitaplığını kullanmaya odaklanacağız.

Şimdi echo_message işlevine göz atalım ve mesajı Business Messages'a göndermek için API ile nasıl etkileşime girdiğimizi görelim.

bm-django-echo-bot/bopis/views.py [Satır 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)
...

Bu işlevde, echo_message işlevine iletilen mesaj değişkeniyle bir BusinessMessageMessage örneği oluşturulur. Örnek oluşturulduktan sonra nesne ileti dizisi kimliğiyle birlikte send_message öğesine iletilir.

bm-django-echo-bot/bopis/views.py [Satır 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ığı tek şey, hizmet hesabı kimlik bilgilerinizi kullanarak bu görüşmeye mesaj gönderebileceğinizi doğrulamak, bir Business Messages istemcisi oluşturmak ve mesajı belirtilen conversation ID adresine göndermek için bir istek oluşturmaktır.

Zengin özellikler bu send_message işlevini de kullanır, ancak oluşturdukları mesajlar zengin kartlara, bantlara ve öneri çiplerine özeldir. Zengin kartlarda ve bantlarda grafik öğeler, öneri çiplerinde ise postback_data bulunur. Böylece geri çağırma mantığı uygun şekilde ayrıştırabilir.

Nasıl mesaj gönderileceğini öğ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ını kullanarak iletiler göndermek için kaynak kodunu değiştireceğiz.

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

5. Temsilcinizi özelleştirme

Şu ana kadar codelab'i izlediyseniz güzel temsilcimizi görebiliriz.

906bc74668a1b215.png

Çok güzel değil, aslında biraz sade görünüyor ve işletmemizi gerçekten iyi temsil etmiyor. Neyse ki temsilciyi destekleyen kodla ilgili temel bilgilere sahibiz ve temsilcimizi istediğimiz şekilde özelleştirmek için gerekli araçlara sahibiz.

Bu codelab'in geri kalanında aracıyı 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 yapılacağını bildirin
  • Konuşmayı kolaylaştırmak için konuşmayla ilgili öneri çiplerini kullanma

Logoyu ve karşılama mesajını güncellememize yardımcı olması için Business Communications Console'dan yararlanacağız. Yine de aynı işlemi yapmak için istediğiniz zaman doğrudan Business Communications API'leri kullanma seçeneğine sahipsiniz. Sonra çalışma saatleri hakkında bilgi vermek üzere uygun iletileri göndermek için kaynak kodunu güncellememiz gerekecek ve Bonjour Meal'ın yakında online alışveriş özelliği sunacağız. İşlem tamamlandığında Business Communications Console'a dönüp dijital temsilcinin desteklediği mutlu yol deneyimlerine yön vermek için konuşmayla ilgili öneri çipleri oluşturacağız.

Business Communications Console'da temsilcinizi seçip Temsilci bilgileri'ne gidin. Aşağıda sarı renkte belirtildiği gibi işletme logosunu güncellemek istiyoruz.

eb6b8ac6b62387ee.png

Yükle'yi tıklayın. Yüklemek veya bir URL'den içe aktarmak için bir resim seçebilirsiniz.

Kendi logolarınızı kullanmayla ilgili önerdiğimiz en iyi uygulamaları öğrenmek için dokümanlardaki logo tasarımı yönergelerine göz atın.

Bu codelab'in başında klonladığınız kaynak kodda bulunan logoyu yükleyelim. Bu kimliği, deponun ./assets/ dizininde ve dosyanın adı "bonjour_meal-logo.png" olacaktır. Dosyayı web tarayıcısındaki kalıcı öğeye sürükleyebilirsiniz. Resim kalitesini değiştirmek ve kırpmak için bir ışık düzenleme aracı sunulur. Resim çözünürlüğünü ayarlayın ve resmi 50 KB kısıtlamasına eşit veya daha az olacak şekilde kırpın. Resim istediğiniz gibi olduğunda, onaylamak için mavi dairenin içindeki onay işaretini tıklayın ve kalıcı iletişim kutusunun alt kısmındaki Seç'i tıklayın.

1856081f59623ae2.png

Son olarak, Temsilci bilgileri sayfasının sağ üst kısmındaki Kaydet'i tıklayın. Temsilci bilgileri sunucularımızda önbelleğe alındığından ve değişiklikten sonraki iki saat içinde görünür hale geleceğinden bu değişikliğin cihazınıza yansıtılması biraz zaman alabilir.

Karşılama mesajını güncelleme

Karşılama mesajını güncellemeyi bu codelab'de daha önce yapmıştık. Bunu tekrar yapalım ama bu kez Bonjour Yemekleri kullanıcı yolculuğuna daha uygun bir karşılama mesajı yapılandıralım.

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

6598fec47021136e.png

Görüşme başlatıcılar ekleyeceğimiz için karşılama mesajımızda bunlara referans verebiliriz. Giriş alanında bunu aşağıdaki metinle değiştirelim:

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

Son olarak, Temsilci bilgileri sayfasının sağ üst kısmındaki Kaydet'i tıklayın. Önbelleğe alma mekanizmamız sayesinde her şeyin hızlı ve sorunsuz olmasını sağlamak için bu değişikliğin yansıtılması biraz zaman alabilir.

Ç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öndeririz.

Mesajların views.py işlevinin route_message işlevinde ayrıştırıldığını hatırlayabilirsiniz. İşlev önce dizeyi normalleştirir ve ardından normalleştirilmiş mesajın sabit kodlanmış parametrelerin herhangi biriyle eşleşip eşleşmediğini kontrol etmeye başlar. Kolaylık sağlaması açısından, normalleştirilmiş mesajın yeni bir sabite eşit olup olmadığını kontrol ettiğimiz, CMD_BUSINESS_HOURS_INQUIRY adını verdiğimiz ve "çalışma-saatleri-sorgusu" değerini içeren 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 şöyle görünecektir:

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. İlki, CMD_BUSINESS_HOURS_INQUIRY değerini diğer sabit değerlerle birlikte tanımlamak, ikincisi ise send_message_with_business_hours işlevini tanımlamak ve Business Messages API'yi kullanarak bir mesaj göndermektir.

Öncelikle dosyanın en üstündeki sabiti, diğer sabit beyanlarla 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ımına geçelim. Bu işlevi, uygun Python söz dizimini izleyerek dosyanın herhangi bir yerinde tanımlayabilirsiniz. Bu işlev, echo_message gibi yalnızca bir ileti gönderdiğinden, bu işlevi tanımlamak için onu ş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 bot'umuz, kullanıcıya "çalışma saatleri-sorgusu" mesajını gönderdiğinde bu çalışma saatlerini kullanarak yanıt verebilmelidir. Şuna benzer bir sonuçla karşılaşabilirsiniz:

125802166995afd5.png

Kaynak kodu GCP'ye dağıttığınızda değişiklikler hemen görünür hale gelir. Google Cloud Platform'da web uygulamasını, aracı bilgilerinin önbelleğe alınmasıyla aynı şekilde önbelleğe almayız. Dolayısıyla bu deneyimi hemen test edebilirsiniz.

Kaynak değişiklikleri konusunda belirli bir ivme kazanmış olsak da, kullanıcıların çevrimiçi alışveriş hakkında bilgi edinmelerini sağlayacak bir değişiklik daha yapalım. Dijital temsilciniz, özelliğin henüz kullanılabilir olmadığını ancak daha sonra tekrar gelip kontrol edeceğinizi söyleyerek yanıt verir.

Kullanıcıları online alışverişin yakında kullanıma sunacağını bildirme

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

Normalleştirilmiş mesajı ayrıştırın ve koşul doğruysa send_online_shopping_info_message yöntemini çağıran "online-shopping-inquiry" değerine ayarlanmış CMD_ONLINE_SHOPPING_INQUIRY adlı sabit bir 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 de send_online_shopping_info_message'in tanımını yapalım. Bu mesajın resim içeren bir zengin kart içinde gönderilmesini istediğimizden, send_online_shopping_info_message öğesini tanımlamak için şablon olarak kullanmak üzere send_rich_card işlevini kopyalayalım.

Öncelikle, uygun bir mesaja sahip olacak ş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 bir medya alanı içerecek şekilde 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 soruları olan kullanıcılara yanıt verebiliyor. Dijital temsilcimiz henüz online alışverişi desteklemiyor. Bu nedenle, kullanıcıya söz konusu özelliğin yakında sunulacağını bildiren bir mesaj gönderiyoruz. Kullanıcı, internetten alışveriş hakkında bilgi istediğinde dijital temsilcimiz bu şekilde görünür.

5cd63c57c1b84f9a.png

Kullanıcıların çalışma saatleri hakkında bilgi almasına olanak tanımak için yaptığımız değişiklikte olduğu gibi, ngrok kullanıyorsanız bu değişiklik, kodu GCP App Engine'e dağıtıldığında hemen görülebilir.

Bir sonraki bölümde, iletişimi mutlu etmeye yönlendirmek için sohbet başlatıcıları ve öneri çiplerini kullanacağız.

Sohbeti yönlendirmek için çipleri kullanma

Kaynak kodunda bazı değişiklikler yaptık ve güncellenmiş dijital aracıyı kullanıma sunduk. Ancak kullanıcıların işletmeyle ilgili bilgi almak için "çalışma saatleri-sorgu" veya "online-alışveriş-bilgi" yazmalarını hiçbir zaman beklemiyoruz. Sohbet başlatıcılarını, ileti dizisi açıldığında kullanıcıya hoş bir karşılama mesajı ile karşılamanın yanı sıra sohbet başlatıcılar sunulacak şekilde güncelleyelim.

Business Communications Console'a gidip temsilcinizin Temsilci bilgileri sayfasına erişin. Daha önce "çip", "kart" ve "bant" için görüşme başlatıcılar tanımlıyorduk. Bunlar çalışmaya devam etse de artık işimizin işleviyle alakalı değildir. Bu zengin özellikleri sergilemeye devam etmeleri için uzantıları bırakabilirsiniz veya dijital aracınızın özellikle Bonjour Meal işletmesine yönelik konuşma başlatıcılar göstermesi için bunları kaldırabilirsiniz.

İki yeni görüşme başlatıcı oluşturacağız. İlki için, metin'i "Çalışma saatleriniz nedir?" olarak, Geri gönderme verileri'ni ise "çalışma-saatleri-sorgu" olarak ayarlayın. İkinci görüşme başlatıcı için metin'i "Burada satın alma işlemi yapabilir miyim?", Geri gönderme verileri bölümünde ise "online-shopping-info" değerini ayarlayın.

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

ef6e6888acea93e3.png

Business Communications Console'da yapılan diğer değişikliklerde olduğu gibi, mobil cihazınızda oluşturulan değişiklikleri görebilmeniz için bu değişikliğin yayılması biraz zaman alacaktır.

Artık sohbet başlatıcılarla işimizi bitirdiğimize göre, görüşme başladıktan sonra kullanıcıyı mutlu bir yola yönlendirmenin bir yolunu da istiyoruz. Kullanıcıyı dijital aracının yararlanabildiği diğer özelliklere yönlendirmek için, mesaj gönderildikten sonra çipleri bağlamsal olarak kullanmak mümkündür. Bu nedenle, kullanıcı çalışma saatleri veya internetten alışveriş hakkında soru sorduğunda, temsilciyle başka bir şey yapma önerisi içeren bir mesaj göndereceğiz.

İşlevin sonuna aşağıdaki komutu 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)
...

Belgelerde açıklandığı gibi, BusinessMessageSuggestion metin alanının 25 karakterle sınırlı olduğunu unutmayın.

Güncellenen sohbet 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.

ef57695e2bacdd20.png

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, temsilciyi değiştirmek için Business Communications Console'u kullandınız ve kaynak kodunda değişiklik yaparak dijital bir temsilciyle kullanıcı deneyimini şekillendirdiniz.

Artık etkileşimli bir Business Messages deneyimi oluşturmak için gereken temel adımları ve sonrasında heyecan verici olanakları biliyorsunuz. Temsilciniz envanter aramasını destekleyecek şekilde genişletilebilir veya kullanıcının nelerle ilgileniyor olabileceğini takip etmek için bir alışveriş sepeti tanıtabilir. Menüdeki öğeleri göstermek için bir bant kullanabilir ve önerilerden yararlanarak kullanıcının ilgilendiği öğeleri seçmesini sağlayabilirsiniz.

Nasıl bir şey olabileceğini gösteren bir fragman aşağıda verilmiştir.

57d2bb7b0ec38c81.png

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

En iyi temsilciler, kullanıcılara bağlama dayalı bilgiler sağlarken kullanıcılara sohbet yoluyla işlevselliklerini de sunar. Böylece kullanıcılar normalde telefonda ve hatta yüz yüze yaptıkları gibi işletmenizle etkileşim kurabilir ve etkileşim kurabilirler. Çalıştığınız bir işletmeyle yapacağınız bir konuşmada aşağıdaki konuların nasıl geçerli olabileceğini düşünün.

Bağlam bilgisi sunma ve beklentileri belirleme

Bağlam, kullanıcıya nasıl yardımcı olabileceğinizi açık bir şekilde belirtmekten, kullanıcının bağ kurabileceği bir karakterle dijital aracıyı tanıtmaya kadar her şey olabilir. Business Messages'taki başarılı 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 aramasını destekliyorsa yanıtı vermeden önce kullanıcıya stok durumunun düşük olabileceğini bildirin.

Kullanıcıya işlevsellik sağlayın

Tüketiciler her zaman işletmelerle bağlantı kuruyor. Business Messages, bir siparişin durumunu kontrol etmekten öğenin stokta olup olmadığını kontrol etmeye kadar karmaşık kullanıcı etkileşimlerini destekleyebilir. Birçok kullanıcı, sorularına yanıt almak için işletmelerin web sitesinde bulunsa bile işletmeleri telefonla aramaya devam eder. Sonuçta işletmeler, özellikle tatillerde telefon araması hacmini karşılamak için daha fazla kaynak yatırımı yapmak zorunda kalır.

Kullanıcının etkileşimde kalmasını sağlayın

Kullanıcının görüşmede kalmasını sağlamak için sohbetle temas noktaları sağlayın. Mesajlar arasında, kullanıcıya, kullanıcının yanıtını almakta olduğunuzu bildirmek için yazma göstergelerini çağırabilirsiniz.

Yazma göstergeleri, öneri çipleri, zengin kartlar ve bantlar gibi zengin özellikler sayesinde kullanıcıyı mutlu bir rotadaki kullanıcı deneyimlerinde yönlendirebilirsiniz. Böylece, bir öğe menüsünden sipariş verme gibi belirli görevleri tamamlamalarına yardımcı olabilirsiniz. Hedef, bir işletmenin telefon hattına yönelik arama trafiğini azaltmak.

Bir konuşmanın kullanıcıya işlevsellik sağlaması çok önemlidir. Mesajlaşma yerine bir işletmeyle bağlantı kuran kullanıcılar, sorularına hızlı bir şekilde yanıt almayı bekler. İdeal olmayan bir durumda dijital aracı, konuşmayı kolaylaştıramaz ve bu da kötü bir kullanıcı deneyimine yol açabilir. Neyse ki bu sorunu önlemenin bazı yolları vardır. Örneğin, bu konuyu daha sonraki bir codelab'de ele alacağımız canlı müşteri temsilcisine aktarma gibi yöntemler mevcuttur.

Sırada ne var?

Hazır olduğunuzda, Business Messages'ta 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