Kup online z odbiorem w sklepie: posiłek bonjour – część 1 – pierwsze kroki

1. Wprowadzenie

Ostatnia aktualizacja: 11.05.2022

Witamy w Wiadomościach do firm

Ten przewodnik to wprowadzenie do integracji z Business Messages, które umożliwiają klientom kontaktowanie się z firmami, którymi zarządzasz, za pomocą wyszukiwarki i Map Google. Możesz być firmą, która chce bezpośrednio zintegrować się z Business Messages, pracować w niezależnym dostawcy oprogramowania, który opracowuje rozwiązania do przesyłania wiadomości dla firm, z którymi współpracuje, lub po prostu trafić na Business Messages i chcieć poeksperymentować z tą platformą.

Bez względu na to, co Cię tu sprowadziło, te ćwiczenia z programowania to świetny sposób na rozpoczęcie nauki. Na koniec będziesz mieć pierwszego agenta cyfrowego, z którym użytkownicy mogą wchodzić w interakcje. Gdy po dopracowaniu szczegółów będziesz gotowy do uruchomienia funkcji Business Messages, zyskasz możliwość dotarcia do milionów klientów.

Czym cechuje się dobry agent cyfrowy?

Business Messages to platforma konwersacyjna, która zapewnia na urządzeniach mobilnych funkcje podobne do aplikacji i umożliwia klientom kontaktowanie się z firmami bez instalowania dodatkowej aplikacji. Cyfrowy agent to element logiki, z którym wchodzą w interakcję Twoi klienci. Logika jest zarządzana przez aplikację internetową wdrożoną w chmurze lub w Twojej infrastrukturze. Sposób odpowiedzi na pytanie użytkownika zależy wyłącznie od Ciebie. Najlepsi agenci podają kontekst, aby określić oczekiwania, utrzymać zaangażowanie klientów i zapewnić funkcje, które zaspokajają potrzeby użytkowników.

Co utworzysz

W tym module utworzysz cyfrowego agenta w Wiadomościach Biznesowych dla fikcyjnej firmy Bonjour Meal. Ten cyfrowy agent odpowie na kilka prostych pytań, np. „O której godzinie zamykacie?” lub „Czy mogę kupić produkt online?”.

W tym samouczku użytkownicy będą mogli kupować produkty za pomocą agenta cyfrowego, kierować użytkownika do firmy obsługującej płatności w celu pobrania pieniędzy, a następnie zaplanować odbiór fikcyjnych produktów w sklepie.

W tym ćwiczeniu z programowania aplikacja:

Odpowiadanie na pytania za pomocą sugestii
Kierowanie użytkownika w taki sposób, aby zadawał pytania, na które Twój agent cyfrowy może odpowiedzieć
zapewniać rozbudowane funkcje konwersacyjne, aby utrzymać zaangażowanie użytkownika w rozmowę;

Czego się nauczysz

Jak wdrożyć aplikację internetową w App Engine na Google Cloud Platform. Możesz też użyć ngrok, aby publicznie przetestować aplikację lokalną.
Jak skonfigurować konto Business Messages za pomocą webhooka aplikacji internetowej, aby otrzymywać wiadomości od użytkowników
Jak wysyłać funkcje rozszerzone, takie jak karty, karuzele i sugestie konwersacyjne, za pomocą interfejsu Business Messages API
Jak Business Messages wysyła Twoje wiadomości

W tym ćwiczeniu skupimy się na tworzeniu pierwszego agenta cyfrowego.

Czego potrzebujesz

Zakładanie bezpłatnego konta dewelopera Business Communications
Instrukcje znajdziesz w naszej witrynie dla deweloperów.
urządzenie z Androidem w wersji 5 lub nowszej LUB urządzenie z iOS z aplikacją Mapy Google,
Doświadczenie w programowaniu aplikacji internetowych
połączenie z internetem,

2. Przygotowania

Włączanie interfejsów API

W tym module będziemy pracować z aplikacją Django, więc do wdrożenia jej w App Engine użyjemy interfejsu Cloud Build API. Jeśli używasz ngroka, nie musisz włączać interfejsu Cloud Build API.

Aby włączyć Cloud Build API:

Otwórz Cloud Build API w konsoli Google Cloud.
Kliknij Włącz.

utworzyć konto usługi,

Aby uzyskać dostęp do interfejsów Business Communications API i Business Messages API, musisz utworzyć konto usługi. Wykonaj czynności opisane w dokumentacji, aby utworzyć konto usługi w Business Communications Developer Console.

Wdrażanie kodu początkowego Django Python EchoBot

W terminalu sklonuj przykładowego bota Django Echo do katalogu roboczego projektu za pomocą tego polecenia:

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

Skopiuj plik JSON z danymi logowania utworzony dla konta usługi do folderu zasobów w przykładowym kodzie i zmień nazwę danych logowania na „bm-agent-service-account-credentials.json”.

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

W terminalu przejdź do katalogu step-1 przykładu.

Aby wdrożyć przykład, uruchom w terminalu te polecenia:

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

PROJECT_ID to identyfikator projektu użytego do rejestracji w interfejsach API.

Zwróć uwagę na adres URL wdrożonej aplikacji w danych wyjściowych ostatniego polecenia:

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

Wdrożony właśnie kod startowy zawiera aplikację internetową z webhookiem do odbierania wiadomości z Business Messages. Aplikacja odsyła wiadomości do użytkownika i może prezentować niektóre zaawansowane funkcje dostępne na platformie konwersacyjnej.

Konfigurowanie webhooka

Po wdrożeniu usługi użyj adresu URL aplikacji, aby ustawić adres URL webhooka na stronie Ustawienia konta w Konsoli programisty Business Communications.

Adres URL webhooka będzie adresem URL aplikacji + „/callback/”. Może to być np. https://PROJECT_ID.appspot.com/callback/

Otwórz stronę Ustawienia konta w konsoli Business Communications. W prawym górnym rogu pod paskiem nawigacyjnym powinna być widoczna nazwa projektu GCP. Jeśli widzisz menu, wybierz projekt GCP.

Wypełnij szczegóły osoby kontaktowej ds. technicznych, a następnie zaktualizuj element Webhook, podając adres URL webhooka wdrożonej aplikacji.

Kliknij Zapisz obok odwołania do projektu GCP.

3. Tworzenie pierwszego agenta

Korzystanie z Konsoli programisty Business Communications

W konsoli Business Communications kliknij logo w lewym górnym rogu, aby wrócić do panelu konsoli, a następnie kliknij Utwórz agenta. Markę tworzysz w tym samym czasie co agenta. W polu Typ agenta wybierz Business Messages i upewnij się, że Informacje o partnerze są prawidłowe.

W sekcji Marka wpisz nazwę marki, którą tworzysz.Marka to firma, z którą współpracujesz, a klienci mogą wchodzić w interakcje z agentem w formie rozmowy. W polu Nazwa agenta określ, co ma być widoczne dla użytkowników w rozmowie w Business Messages. W przypadku fikcyjnego posiłku Bonjour Meal firma Bonjour Rail jest przedsiębiorstwem kolejowym, które zarządza restauracjami Bonjour Meal. Określę więc Bonjour Rail jako markę, a Bonjour Meal jako agenta.

Agent to podmiot konwersacyjny, który reprezentuje markę.

Kliknij Utwórz agenta i poczekaj, aż konsola wykona swoje zadanie. Wysłanie tego żądania trwa kilka sekund, ponieważ wysyła ono kilka żądań do interfejsu Business Communications API w celu utworzenia marki i przedstawiciela. Aby utworzyć agenta i markę, możesz bezpośrednio użyć interfejsu Business Communications API. Zapoznaj się z dokumentacją, aby dowiedzieć się, jak wyglądałoby żądanie curl, które wykonuje te same czynności co konsola.

Rozpoczęcie pierwszej rozmowy

Otwórz utworzonego agenta. Wyświetli się strona Przegląd, na której możesz zacząć sprawdzać szczegóły agenta. Sprawdź testowe adresy URL agenta. Służą one do wywoływania interfejsu konwersacyjnego na urządzeniu.

Aby skopiować adres URL testu, kliknij jeden z tych elementów. Oczywiście skopiuj adres URL testu dla urządzenia, które masz pod ręką, aby przeprowadzić test. Wyślij skopiowaną wiadomość na urządzenie w dowolny sposób.

Po kliknięciu linku na urządzeniu mobilnym uruchomi się narzędzie do uruchamiania agenta Business Messages z wstępnie wypełnionym testowym adresem URL agenta.

Kliknij Uruchom, aby wywołać interfejs konwersacyjny agenta.

Wejdź w interakcję z agentem i sprawdź, co potrafi. W większości przypadków platforma konwersacyjna będzie tylko powtarzać Twoje wiadomości. Wyślij mu na przykład „Hello, World!” (Cześć, świecie!), a zobaczysz, że agent odeśle Ci tę samą wiadomość.

Wdrożona aplikacja zawiera też logikę, która prezentuje zaawansowane funkcje dostępne w Business Messages.

Jeśli wyślesz słowo „karta”, wywołasz kartę informacyjną.
Jeśli wyślesz „elementy”, wywołasz elementy z sugestiami.
Jeśli wyślesz „karuzela”, wywołasz karuzelę kart informacyjnych.

Gratulacje! To pierwsza rozmowa Twojego agenta z Tobą.

Każda z tych funkcji może być używana do przekazywania osobie komunikującej się z Twoim agentem dodatkowych informacji. Wysyłaj zasoby graficzne w postaci kart z elementami multimedialnymi, aby lepiej przekazywać pomysły, lub używaj sugestii, aby pokierować rozmową.

Aktualizowanie wiadomości powitalnej i używanie elementów rozmowy

Poćwiczmy korzystanie z Developer Console, zobaczmy, jak edytować wiadomość powitalną agenta, i wykorzystajmy sugestie, aby ułatwić użytkownikowi komunikację.

Otwórz stronę Przegląd agenta i kliknij Informacje o agencie. Przewiń w dół do sekcji wiadomości powitalnej i rozpoczęcia rozmowy.

Zaktualizuj wiadomość powitalną (żółte pole do wprowadzania danych), aby brzmiała:

Witamy w agencie Bonjour Meal. Mogę powtarzać Twoje wiadomości i pokazywać niektóre zaawansowane funkcje obsługiwane na tej platformie. Wypróbuj te sugestie.

Kliknij + Dodaj pomysł na rozpoczęcie rozmowy (zgodnie z fioletowym polem na powyższym obrazie), aby dodać pomysły na rozpoczęcie rozmowy, które będą wywoływać elementy z sugestiami, karuzelę i kartę. Dodawane przez Ciebie polecenia inicjujące rozmowę muszą zawierać komponent tekstowy i komponent postbackData. Tekst jest wyświetlany użytkownikowi, a dane postBack są wysyłane do webhooka agenta. Webhook analizuje dane zwrotne i wysyła odpowiednią odpowiedź do użytkownika.

Po modyfikacji informacje o agencie w konsoli będą wyglądać tak:

Po prawej stronie konsoli zobaczysz podgląd wyglądu agenta. Zwróć uwagę, że wiadomość powitalna odzwierciedla właśnie wprowadzone zmiany, a pod nią znajdują się sugestie.

To świetne narzędzie, które pozwala sprawdzić, jak będzie wyglądać korzystanie z aplikacji. Możesz z niej korzystać podczas tworzenia agenta i planowania ścieżek użytkownika, które chcesz obsługiwać.

Niestety nie będziemy mogli od razu zobaczyć tych zmian w rozmowie, ponieważ poprzednie dane są przechowywane w pamięci podręcznej infrastruktury Business Messages. Pamięć podręczna jest czyszczona co około 2 godziny, więc możesz spróbować jutro.

Przyjrzyjmy się tymczasem, jak to wszystko działa.

4. Analizowanie kodu startowego

Ogólny widok kodu źródłowego

Wdrożony kod startowy odsyła wiadomości do użytkowników i może wyświetlać kartę z elementami multimedialnymi, karuzelę lub przyciski z sugestiami. Przyjrzyjmy się bliżej kodowi źródłowemu, aby zrozumieć, jak to działa. Następnie ustalimy, co musimy zmienić.

Kod startowy to projekt Django. W dalszej części tej serii ćwiczeń w Codelabs użyjemy Google Datastore do przechowywania danych, takich jak koszyki i powiązane z nimi rozmowy. Nie martw się, jeśli nie używasz Django. Jest to dość proste, a po ukończeniu tego laboratorium dowiesz się, jak działa.

Ogólnie rzecz biorąc, Django kieruje adresy URL do widoków, a logika widoku tworzy szablon, który jest renderowany w przeglądarce. Przyjrzyjmy się plikowi urls.py projektu.

bm-django-echo-bot/bmcodelab/urls.py [wiersze 31–37]

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

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

Zdefiniowano tu 2 ścieżki, więc Django może wykonać logikę, jeśli rozpozna te 2 adresy URL. Jeśli adres URL projektu to https://ID_PROJEKTU.appspot.com/, to trasy, które projekt rozpoznaje, to:

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

Obie ścieżki URL odwołują się do bopis_views, które pochodzi z pliku bopis/views.py. Przyjrzyjmy się temu, co się dzieje w tym pliku. Na początek wyjaśnijmy, czym jest bopis_views.landing_placeholder.

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

Ten fragment logiki jest wykonywany przez serwer WWW, gdy otrzymuje on żądanie sieciowe wskazujące poziom główny projektu. Nie dzieje się tu nic skomplikowanego: po prostu zwracamy do przeglądarki, która wysłała żądanie, obiekt HTTPResponse zawierający kod HTML. Tak, możesz otworzyć główny adres URL projektu, ale nie ma tam zbyt wiele do zrobienia, ponieważ przeniesie Cię on z powrotem do tego laboratorium.

Drugi adres URL kieruje do funkcji o nazwie callback, również w bopis/views.py. Przyjrzyjmy się tej funkcji.

bm-django-echo-bot/bopis/views.py [Lines 60-101]

...
def callback(request):
    """
    Callback URL. Processes messages sent from user.
    """
    if request.method == "POST":
        request_data = request.body.decode('utf8').replace("'", '"')
        request_body = json.loads(request_data)

        print('request_body: %s', request_body)

        # Extract the conversation id and message text
        conversation_id = request_body.get('conversationId')
        print('conversation_id: %s', conversation_id)

        # Check that the message and text body exist

        if 'message' in request_body and 'text' in request_body['message']:
            message = request_body['message']['text']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'suggestionResponse' in request_body:
            message = request_body['suggestionResponse']['postbackData']

            print('message: %s', message)
            route_message(message, conversation_id)
        elif 'userStatus' in request_body:
            if 'isTyping' in request_body['userStatus']:
                print('User is typing')
            elif 'requestedLiveAgent' in request_body['userStatus']:
                print('User requested transfer to live agent')

        return HttpResponse("Response.")

    elif request.method == "GET":
        return HttpResponse("This webhook expects a POST request.")
...

Logika ta analizuje treść żądania pod kątem wiadomości lub suggestionResponse i przekazuje te informacje do funkcji o nazwie route_message, a następnie zwraca HttpResponse do infrastruktury Business Messages, aby potwierdzić otrzymanie wiadomości.

To ważna funkcja. Ten fragment logiki to webhook aplikacji internetowej, który odbiera wiadomości od użytkowników wchodzących w interakcję z Twoim agentem. Możesz rozszerzyć webhook, aby wysyłać wiadomości do narzędzia do automatyzacji, takiego jak Dialogflow, w celu zrozumienia, co mówi użytkownik, i wygenerowania odpowiedzi na podstawie wnioskowania. Możesz też przekazać wiadomość, aby użytkownik mógł skontaktować się z pracownikiem zespołu pomocy na żywo. Zobacz ten diagram:

Business Messages wysyła treść wiadomości jako ładunek JSON do webhooka, gdzie jest ona kierowana do pracownika obsługi klienta lub do logiki, która odpowiada jako bot. W naszym przypadku mechanizmem routingu jest route_message. Spójrzmy.

bm-django-echo-bot/bopis/views.py [Lines 105-122]

...
def route_message(message, conversation_id):
    '''
    Routes the message received from the user to create a response.

    Args:
        message (str): The message text received from the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    normalized_message = message.lower()

    if normalized_message == CMD_RICH_CARD:
        send_rich_card(conversation_id)
    elif normalized_message == CMD_CAROUSEL_CARD:
        send_carousel(conversation_id)
    elif normalized_message == CMD_SUGGESTIONS:
        send_message_with_suggestions(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Ten fragment logiki zaczyna analizować wiadomość otrzymaną przez użytkownika. Najpierw wiadomość jest normalizowana przez zamianę wszystkich znaków na małe litery. Po normalizacji sprawdza, czy wiadomość jest jedną ze stałych zdefiniowanych u góry pliku.

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

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

Oznacza to, że bot analizuje wiadomości, które zawierają dowolny z ciągów znaków umieszczonych w postback_data w propozycjach rozpoczęcia rozmowy z poprzedniego kroku tego laboratorium. Jeśli żaden z tych ciągów znaków się nie pojawi, wiadomość jest po prostu przekazywana do funkcji o nazwie echo_message, która, jak można sobie wyobrazić, odzwierciedla wiadomości.

Wysyłanie wiadomości

Powinieneś(-aś) już mieć pojęcie o tym, jak aplikacja internetowa odbiera wiadomości. Wszystko odbywa się za pomocą webhooka.

Ale jak aplikacja wysyła wiadomość wychodzącą do użytkownika za pomocą Business Messages?

Gdy infrastruktura odpowie użytkownikowi, wyślij odpowiedź do interfejsu Business Messages API, który dostarczy wiadomość do użytkownika.

Interfejs Business Messages API ma biblioteki w językach Python, Node.js i Java. Mamy też interfejs API REST, do którego możesz wysyłać żądania bezpośrednio, jeśli Twoja infrastruktura nie jest w języku, dla którego mamy bibliotekę. W artykule Wysyłanie wiadomości znajdziesz informacje o tym, jak za pomocą cURL wysłać wiadomość do konkretnego identyfikatora rozmowy.

Na potrzeby tego Codelabs skupimy się na korzystaniu z biblioteki klienta Python, która jest już zintegrowana z kodem startowym Bonjour Meal wdrożonym w App Engine w Twoim projekcie GCP lub uruchomionym lokalnie za pomocą ngroka.

Przyjrzyjmy się funkcji echo_message i zobaczmy, jak wchodzimy w interakcję z interfejsem API, aby wysłać wiadomość do Business Messages.

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

W tej funkcji tworzona jest instancja BusinessMessagesMessage z zmienną message przekazaną do funkcji echo_message. Po utworzeniu instancji obiekt jest przekazywany do funkcji send_message wraz z identyfikatorem rozmowy.

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

Funkcja send_message używa tylko danych logowania konta usługi, aby sprawdzić, czy możesz wysyłać wiadomości do tej rozmowy, utworzyć instancję klienta Business Messages i utworzyć żądanie wysłania wiadomości do danego conversation ID.

Funkcje zaawansowane również korzystają z tej funkcji send_message, ale tworzone przez nie wiadomości są specyficzne dla kart z elementami multimedialnymi, karuzel i chipów z sugestiami. Karty z elementami multimedialnymi i karuzele mogą zawierać komponenty graficzne, a przyciski z sugestiami mają symbol postback_data, aby logika wywołania zwrotnego mogła je odpowiednio przeanalizować.

Wiemy już, jak wysłać wiadomość. Zobaczmy teraz, jak przykładowa aplikacja wysyła karty informacyjne, karuzele i sugestie. W następnej sekcji zmodyfikujemy kod źródłowy, aby wysyłać wiadomości z niektórymi z tych funkcji.

Gdy wszystko będzie gotowe, dostosujmy agenta Bonjour Meal.

5. Dostosowywanie agenta

Jeśli do tej pory wszystko przebiegało zgodnie z instrukcjami, powinniśmy zobaczyć naszego pięknego agenta.

Nie wygląda zbyt dobrze, jest raczej pusta i nie reprezentuje naszej firmy. Na szczęście mamy podstawową wiedzę o kodzie obsługującym agenta i narzędzia, które pozwalają nam dostosować go w dowolny sposób.

W dalszej części tego laboratorium kodu rozszerzymy agenta o te funkcje:

Dodaj logo
Ulepszona wiadomość powitalna
Podaj informacje o godzinach otwarcia
Poinformuj użytkownika, że wkrótce będzie można kupować produkty online.
Korzystanie z sugestii w formie przycisków, aby ułatwić rozmowę

Będziemy korzystać z Business Communications Console, aby aktualizować logo i wiadomość powitalną, ale zawsze możesz też używać bezpośrednio interfejsów Business Communications API. Następnie musimy zaktualizować kod źródłowy, aby wysyłać odpowiednie wiadomości z informacjami o godzinach otwarcia i o tym, że Bonjour Meal wkrótce zaoferuje funkcję zakupów online. Gdy to zrobimy, wrócimy do Konsoli Business Communications i utworzymy sugestie w formie przycisków, które pomogą poprowadzić rozmowę w taki sposób, aby użytkownik mógł skorzystać z funkcji obsługiwanych przez agenta cyfrowego.

Dodawanie logo

W Business Communications Console wybierz agenta i przejdź do sekcji Informacje o agencie. Musimy zaktualizować logo firmy, jak pokazano poniżej na żółto.

Kliknij Prześlij, aby wybrać obraz do przesłania lub importowania z adresu URL.

W dokumentacji znajdziesz wskazówki dotyczące projektowania logo, które zawierają sprawdzone metody korzystania z własnych logo.

Prześlijmy logo, które znajduje się w sklonowanym na początku tego ćwiczenia kodzie źródłowym. Znajdziesz go w katalogu ./assets/ w repozytorium. Plik nazywa się „bonjour_meal-logo.png”. Możesz przeciągnąć plik do okna modalnego w przeglądarce. Pojawi się proste narzędzie do edycji, które umożliwia manipulowanie jakością obrazu i przycinanie. Dostosuj rozdzielczość obrazu i przytnij go tak, aby jego rozmiar nie przekraczał 50 KB. Gdy obraz spełnia Twoje oczekiwania, kliknij znacznik wyboru w niebieskim kółku, aby potwierdzić, a następnie u dołu okna modalnego kliknij Wybierz.

Na koniec w prawym górnym rogu strony Informacje o agencie kliknij Zapisz. Zmiana ta będzie widoczna na urządzeniu dopiero po pewnym czasie, ponieważ informacje o agencie są przechowywane w pamięci podręcznej na naszych serwerach i powinny być widoczne w ciągu 2 godzin od wprowadzenia zmiany.

Aktualizowanie wiadomości powitalnej

Aktualizację wiadomości powitalnej przeprowadziliśmy już wcześniej w tym laboratorium. Zróbmy to jeszcze raz, ale tym razem skonfigurujmy wiadomość powitalną bardziej odpowiednią dla ścieżki użytkownika Bonjour Meal.

W konsoli Business Communications wybierz agenta i otwórz Informacje o agencie. Przewiń w dół, aż zobaczysz pole do wprowadzania danych Wiadomość powitalna, w którym możesz zaktualizować wiadomość.

Wiedząc, że dodamy rozpoczęcia rozmowy, możemy się do nich odwołać w wiadomości powitalnej. W polu do wprowadzania danych zastąpmy go tym tekstem:

„Witamy w Bonjour Meal. Jestem asystentem, który może pomóc Ci w odpowiedzi na pytania dotyczące Bonjour Meal. Wypróbuj jedną z tych opcji”.

Na koniec w prawym górnym rogu strony Informacje o agencie kliknij Zapisz. Ponownie przypominamy, że ze względu na mechanizm buforowania, który zapewnia szybkie działanie, wprowadzenie tej zmiany zajmie trochę czasu.

Podawanie informacji o godzinach otwarcia

Aby przekazać te informacje użytkownikom, wyślemy do nich niestandardową wiadomość za pomocą interfejsu Business Messages API.

Pamiętaj, że wiadomości są analizowane w funkcji route_message usługi views.py. Funkcja najpierw normalizuje ciąg znaków, a potem sprawdza, czy znormalizowana wiadomość pasuje do któregokolwiek z parametrów zakodowanych na stałe. Dla uproszczenia dodajmy dodatkowy warunek, który sprawdzi, czy znormalizowana wiadomość jest równa nowej stałej, którą nazwiemy CMD_BUSINESS_HOURS_INQUIRY i która będzie zawierać wartość „business-hours-inquiry”. Jeśli warunek przyjmie wartość „prawda”, wywołamy funkcję o nazwie send_message_with_business_hours.

Funkcja route_message będzie teraz wyglądać tak:

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

Aby kod działał, musimy wprowadzić jeszcze 2 zmiany: po pierwsze, zdefiniować zmienną CMD_BUSINESS_HOURS_INQUIRY wraz z innymi stałymi, a po drugie, zdefiniować funkcję send_message_with_business_hours i wysłać wiadomość za pomocą interfejsu Business Messages API.

Najpierw zdefiniujmy stałą na początku pliku wraz z innymi deklaracjami stałych:

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

Teraz zdefiniujmy send_message_with_business_hours. Możesz zdefiniować tę funkcję w dowolnym miejscu w pliku, zachowując odpowiednią składnię Pythona. Ta funkcja po prostu wysyła wiadomość, podobnie jak echo_message, więc możesz jej użyć jako szablonu do zdefiniowania tej funkcji.

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

Dzięki temu nasz bot powinien być w stanie odpowiedzieć użytkownikowi, podając te godziny otwarcia, gdy wyśle on wiadomość „business-hours-inquiry”. Możesz spodziewać się czegoś takiego:

Po wdrożeniu kodu źródłowego w GCP zmiany będą widoczne od razu. Nie buforujemy aplikacji internetowej w Google Cloud Platform w taki sam sposób jak informacji o agencie, więc możesz od razu przetestować to rozwiązanie.

Wprowadziliśmy już kilka zmian w kodzie źródłowym, ale zróbmy jeszcze jedną, która umożliwi użytkownikowi zadawanie pytań o zakupy online. Twój agent cyfrowy odpowie, że ta funkcja nie jest jeszcze dostępna, ale możesz wrócić i sprawdzić to później.

Informowanie użytkownika, że wkrótce będzie mógł robić zakupy online

Wprowadzimy podobną zmianę jak w przypadku informowania użytkownika o godzinach otwarcia. Tym razem umieśćmy informacje na karcie z elementami multimedialnymi wraz z atrakcyjnym obrazem.

Przeanalizuj znormalizowaną wiadomość i sprawdź warunek stałej o nazwie CMD_ONLINE_SHOPPING_INQUIRY z wartością ustawioną na „online-shopping-inquiry”, która wywołuje send_online_shopping_info_message, jeśli warunek jest spełniony.

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

Teraz zdefiniujmy send_online_shopping_info_message. Chcemy, aby ta wiadomość została wysłana w postaci karty z obrazem, więc skopiujmy funkcję send_rich_card, aby użyć jej jako szablonu do zdefiniowania send_online_shopping_info_message.

Najpierw zaktualizuj tekst zastępczy, aby zawierał odpowiedni komunikat. Tekst zastępczy jest używany, jeśli urządzenie z jakiegoś powodu nie może otrzymać karty z elementami rozszerzonymi. Następnie powinniśmy zaktualizować BusinessMessagesRichCard, aby zawierał odpowiedni tytuł, opis, sugestie i pole multimedialne. Nasza funkcja powinna wyglądać tak:

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

Super! Nasz agent cyfrowy może teraz odpowiadać na pytania użytkowników dotyczące zakupów online. Obecnie nasz agent cyfrowy nie obsługuje jeszcze zakupów online, dlatego wyświetlamy użytkownikowi komunikat z informacją, że ta funkcja będzie wkrótce dostępna. Tak wygląda nasz agent cyfrowy, gdy użytkownik pyta o zakupy online.

Podobnie jak w przypadku poprzedniej zmiany, która umożliwiała użytkownikowi zadawanie pytań o godziny otwarcia, tę zmianę można zobaczyć od razu, jeśli używasz ngroka, lub po wdrożeniu kodu w GCP App Engine.

W następnej części użyjemy pomysłów na rozpoczęcie rozmowy i sugerowanych odpowiedzi, aby poprowadzić rozmowę w odpowiednim kierunku.

Korzystanie z elementów do kierowania rozmową

Wprowadziliśmy pewne zmiany w kodzie źródłowym i wdrożyliśmy zaktualizowanego agenta cyfrowego, ale nigdy nie oczekujemy, że użytkownicy będą wpisywać „business-hours-inquiry” lub „online-shopping-info”, aby zapytać o firmę. Zaktualizujmy pomysły na rozpoczęcie rozmowy, aby po otwarciu rozmowy użytkownik nie tylko otrzymywał miłą wiadomość powitalną, ale także pomysły na rozpoczęcie rozmowy.

Otwórz konsolę usług komunikacji biznesowej i przejdź na stronę Informacje o agencie. Wcześniej zdefiniowaliśmy rozpoczęcia rozmowy dla „chipów”, „kart” i „karuzeli”. Chociaż nadal działają, nie są już istotne z punktu widzenia naszej działalności. Możesz je pozostawić, aby nadal prezentować te zaawansowane funkcje, lub usunąć, aby Twój agent cyfrowy wyświetlał rozpoczęcia rozmowy dotyczące konkretnie firmy Bonjour Meal.

Utworzymy 2 nowe tematy do rozpoczęcia rozmowy. W przypadku pierwszego ustaw tekst na „Jakie są godziny otwarcia Twojej firmy?” i dane zwrotne na „business-hours-inquiry”. W przypadku drugiego pomysłu na rozpoczęcie rozmowy ustaw tekst na „Czy mogę tu dokonać zakupu?” i dane wywołania zwrotnego na „online-shopping-info”.

Wynikiem powinna być konfiguracja widoczna na tym zrzucie ekranu:

Podobnie jak w przypadku innych zmian wprowadzanych w Konsoli Business Communications, zanim zobaczysz je na urządzeniu mobilnym, minie trochę czasu.

Po zakończeniu pracy nad pomysłami na rozpoczęcie rozmowy będziemy też potrzebować sposobu na poprowadzenie użytkownika do pożądanej ścieżki, gdy rozmowa już się rozpocznie. Po wysłaniu wiadomości możesz używać elementów, aby kierować użytkownika do innych funkcji, z których może korzystać agent cyfrowy. Gdy użytkownik zapyta o godziny otwarcia lub zakupy online, wyślemy mu wiadomość z sugestią, aby zrobił coś innego z agentem.

Na końcu funkcji dodaj ten kod:

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

Pamiętaj, że pole tekstowe w obiekcie BusinessMessagesSuggestion jest ograniczone do 25 znaków, zgodnie z opisem w dokumentacji.

Oto kilka zrzutów ekranu przedstawiających oczekiwane wrażenia użytkownika dzięki zaktualizowanym punktom wyjścia do rozmowy i strategicznemu wykorzystaniu sugestii.

6. Gratulacje

Gratulacje! Udało Ci się utworzyć pierwszego cyfrowego agenta w Business Messages.

Wdrożono aplikację internetową, która obsługuje agenta cyfrowego w Business Messages, zmodyfikowano agenta za pomocą konsoli Business Communications i wprowadzono zmiany w kodzie źródłowym, aby dostosować sposób działania agenta cyfrowego.

Znasz już najważniejsze kroki, które musisz wykonać, aby stworzyć interaktywną usługę Business Messages. Możliwości, jakie się przed Tobą otwierają, są ekscytujące. Możesz rozszerzyć agenta, aby obsługiwał wyszukiwanie asortymentu lub wprowadzić koszyk na zakupy, aby śledzić, co może interesować użytkownika. Możesz użyć karuzeli, aby zaprezentować pozycje w menu, a za pomocą sugestii umożliwić użytkownikowi wybór interesujących go pozycji.

Oto przykład, jak to może wyglądać.

Jak stworzyć atrakcyjną rozmowę?

Najlepsi agenci dostarczają użytkownikowi informacji kontekstowych, a jednocześnie umożliwiają mu korzystanie z funkcji podczas rozmowy. Dzięki temu użytkownik może zaangażować się w interakcję z firmą w taki sam sposób, jak podczas rozmowy telefonicznej lub osobistego kontaktu. Zastanów się, jak poniższe tematy mogą odnosić się do rozmowy, którą chcesz przeprowadzić z firmą, z którą współpracujesz.

Zapewnij kontekst i ustal oczekiwania

Może to być na przykład wyraźne określenie, w jaki sposób możesz pomóc użytkownikowi, lub przedstawienie agenta cyfrowego z osobowością, z którą użytkownik może się utożsamić. Skuteczni agenci w Business Messages używają awatara reprezentacyjnego, aby pokazać użytkownikowi, z kim rozmawia.

Ustalanie oczekiwań zależy od wrażeń użytkownika, które chcesz wywołać. Jeśli na przykład Twój agent obsługuje wyszukiwanie asortymentu, przed udzieleniem odpowiedzi poinformuj użytkownika, że dostępność może być niska.

Udostępnianie użytkownikowi funkcji

Konsumenci stale kontaktują się z firmami. Wiadomości biznesowe mogą obsługiwać złożone interakcje z użytkownikami, od zapytań o stan zamówienia po sprawdzenie, czy produkt jest w magazynie. Wielu użytkowników nadal dzwoni do firm, aby uzyskać odpowiedzi na pytania, nawet jeśli są one dostępne na stronie internetowej firmy. W rezultacie firmy muszą inwestować więcej zasobów w obsługę połączeń, zwłaszcza w okresie świątecznym.

Utrzymanie zaangażowania użytkownika

Zapewnij punkty kontaktu w formie rozmowy, aby utrzymać zaangażowanie użytkownika. Między wiadomościami możesz wywoływać wskaźniki pisania, aby poinformować użytkownika, że przygotowujesz dla niego odpowiedź.

Dzięki zaawansowanym funkcjom, takim jak wskaźniki pisania, sugestie, karty z elementami multimedialnymi i karuzele, możesz prowadzić użytkownika przez ścieżkę optymalnych działań, aby pomóc mu w wykonywaniu określonych zadań, np. składaniu zamówień z menu. Celem jest zmniejszenie ruchu połączeń na linię telefoniczną firmy.

Bardzo ważne jest, aby rozmowa zapewniała użytkownikowi funkcjonalność. Użytkownicy, którzy kontaktują się z firmą za pomocą wiadomości, oczekują szybkiej odpowiedzi na swoje pytania. W nieidealnej sytuacji agent cyfrowy nie może prowadzić rozmowy, co może negatywnie wpłynąć na wrażenia użytkownika. Na szczęście istnieją sposoby na obejście tego problemu, np. przekazanie rozmowy pracownikowi obsługi klienta. Omówimy to w przyszłym laboratorium.

Co dalej?

Gdy będziesz gotowy(-a), zapoznaj się z tymi tematami, aby dowiedzieć się więcej o bardziej złożonych interakcjach, które możesz osiągnąć w Business Messages.

Dokumentacja

SuggestedReply
Dokumentacja referencyjna wiadomości Business Messages
Definicja JSON dla elementu RichCard

Kup online z odbiorem w sklepie: posiłek bonjour – część 1 – pierwsze kroki Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

1. Wprowadzenie

Witamy w Wiadomościach do firm

Czym cechuje się dobry agent cyfrowy?

Co utworzysz

Czego się nauczysz

Czego potrzebujesz

2. Przygotowania

Włączanie interfejsów API

utworzyć konto usługi,

Wdrażanie kodu początkowego Django Python EchoBot

Konfigurowanie webhooka

3. Tworzenie pierwszego agenta

Korzystanie z Konsoli programisty Business Communications

Rozpoczęcie pierwszej rozmowy

Aktualizowanie wiadomości powitalnej i używanie elementów rozmowy

4. Analizowanie kodu startowego

Ogólny widok kodu źródłowego

bm-django-echo-bot/bmcodelab/urls.py [wiersze 31–37]

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [wiersze 302–309]

bm-django-echo-bot/bopis/views.py [Lines 60-101]

bm-django-echo-bot/bopis/views.py [Lines 105-122]

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

Wysyłanie wiadomości

bm-django-echo-bot/bopis/views.py [wiersze 199–212]

bm-django-echo-bot/bopis/views.py [Lines 214-236]

5. Dostosowywanie agenta

Dodawanie logo

Aktualizowanie wiadomości powitalnej

Podawanie informacji o godzinach otwarcia

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

Informowanie użytkownika, że wkrótce będzie mógł robić zakupy online

bm-django-echo-bot/bopis/views.py

bm-django-echo-bot/bopis/views.py

Korzystanie z elementów do kierowania rozmową

bm-django-echo-bot/bopis/views.py

6. Gratulacje

Jak stworzyć atrakcyjną rozmowę?

Zapewnij kontekst i ustal oczekiwania

Udostępnianie użytkownikowi funkcji

Utrzymanie zaangażowania użytkownika

Co dalej?

Dokumentacja

Kup online z odbiorem w sklepie: posiłek bonjour – część 1 – pierwsze kroki