Ta strona została przetłumaczona przez Cloud Translation API.

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

1. Wprowadzenie

Ostatnia aktualizacja: 11.05.2022

Witamy w Wiadomościach Biznesowych

To Codelab to wprowadzenie do integracji z wiadomościami biznesowymi, które umożliwiają klientom kontakt z firmami zarządzanymi przez Ciebie w wyszukiwarce i Mapach Google. Możesz być właścicielem firmy, która chce bezpośrednio zintegrować się z Business Messages, lub być może pracujesz w niezależnym dostawcy oprogramowania, który tworzy rozwiązania do przesyłania wiadomości dla firm, z którymi współpracujesz, albo po prostu trafiłeś/trafiłaś na Business Messages i chcesz poznać tę platformę.

Niezależnie od tego, co Cię tu sprowadza, to ćwiczenie z programowania jest świetnym sposobem na rozpoczęcie. Na koniec będziesz mieć pierwszego cyfrowego agenta, z którym użytkownicy będą mogli wchodzić w interakcje. Gdy wprowadzisz tę funkcję w ramach Wiadomości dla firm, będziesz mieć możliwość dotarcia do milionów klientów.

Co sprawia, że agent cyfrowy jest dobry?

Wiadomości biznesowe to platforma do komunikacji, która na urządzeniach mobilnych działa jak aplikacja i umożliwia klientom kontakt z firmą bez konieczności instalowania dodatkowej aplikacji. Agent cyfrowy to element logiki, z którym użytkownicy mogą wchodzić w interakcje. Tą logiką zarządza aplikacja internetowa wdrożona w chmurze lub w Twojej infrastrukturze. To, jak zareagujesz na prośbę użytkownika, zależy wyłącznie od Ciebie. Najlepsi pracownicy obsługi klienta podają kontekst, aby określić oczekiwania, utrzymują zaangażowanie klientów i zapewniają funkcje, które odpowiadają na ich potrzeby.

Co utworzysz

W tym laboratorium programistycznym utworzysz cyfrowego asystenta w Wiadomościach od firm dla fikcyjnej firmy o nazwie Bonjour Meal. Ten agent cyfrowy odpowie na kilka prostych pytań, np. „O której godzinie zamykacie?” lub „Czy mogę kupić online?”.

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

W tym ćwiczeniu z programowania Twoja aplikacja:

Odpowiadanie na pytania za pomocą elementu sugestii
Poproś użytkownika o zadanie pytań, na które Twój agent cyfrowy może udzielić odpowiedzi
udostępniać bogate funkcje konwersacyjne, aby utrzymać zaangażowanie użytkownika w rozmowę;

Czego się nauczysz

Jak wdrożyć aplikację internetową w App Engine w 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 działa wysyłanie wiadomości przez Wiadomości biznesowe

Ten moduł Codelab skupia się na tworzeniu pierwszego agenta cyfrowego.

Czego potrzebujesz

Zarejestruj się, aby otrzymać bezpłatne konto dewelopera w usłudze Business Communications
Więcej informacji 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. Konfiguracja

Włącz interfejsy API

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

Aby włączyć interfejs Cloud Build API:

W konsoli Google Cloud otwórz interfejs Cloud Build API.
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 dotyczącej tworzenia konta usługi w Konsoli Play.

Wdróż kod startowy EchoBot w Django Python

W terminalu sklonuj przykładowy bot Echo w Django do katalogu roboczego projektu za pomocą tego polecenia:

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

Skopiuj plik danych logowania w formacie JSON utworzony dla konta usługi do folderu zasobów przykładu i nazwij go „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, który został użyty do zarejestrowania interfejsów API.

Zanotuj adres URL zaimplementowanej aplikacji w wyjściu ostatniego polecenia:

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

Właśnie wdrożony przez Ciebie kod startowy zawiera aplikację internetową z webhookiem do odbierania wiadomości z Business Messages. Aplikacja odzwierciedla wiadomości z powrotem do użytkownika i może wyświetlać niektóre z bogatych funkcji dostępnych na interfejsie konwersacyjnym.

Konfigurowanie webooka

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

Adres URL webhooka to adres URL aplikacji + „/callback/”. Może to wyglądać na przykład tak: https://PROJECT_ID.appspot.com/callback/

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

Wypełnij informacje o osobie kontaktowej ds. technicznych, a następnie zaktualizuj webhook, podając adres URL webhooka dla zaimplementowanej aplikacji.

Kliknij Zapisz obok odwołania do projektu GCP.

3. Tworzenie pierwszego agenta

Korzystanie z konsoli dla deweloperów Business Communications

W usłudze Business Communications Console kliknij logo w lewym górnym rogu, aby wrócić do panelu konsoli, a następnie kliknij Utwórz pracownika obsługi klienta. Markę tworzysz w tym samym czasie, co agenta. W sekcji Typ agenta wybierz Wiadomości do firmy i upewnij się, że Informacje o partnerze są prawidłowe.

W polu Marka wpisz nazwę tworzonej marki.Marka to firma, z którą współpracujesz, a klienci mogą prowadzić z agentem rozmowy w formie konwersacji. W polu Nazwa agenta określ, co użytkownicy mają widzieć w rozmowie w usłudze Business Messages. W przypadku fikcyjnej restauracji Bonjour Meal firma Bonjour Rail to firma kolejowa zarządzająca restauracjami Bonjour Meal. Jako marka podam Bonjour Rail, a jako agenta Bonjour Meal.

Agent to element konwersacyjny reprezentujący markę.

Kliknij Utwórz agenta, a konsola wykona za Ciebie całą magię. Ta operacja wymaga wysłania kilku żądań do interfejsu Business Communications API w celu utworzenia marki i agenta. Aby utworzyć agenta i markę, możesz bezpośrednio użyć interfejsu Business Communications API. Zapoznaj się z dokumentacją, aby zobaczyć, jak wygląda żądanie curl, które wykonuje te same czynności co konsola.

Pierwsza rozmowa

Otwórz utworzonego przez siebie agenta. Zobaczysz stronę Przegląd, na której możesz sprawdzić szczegóły agenta. Sprawdź testowe adresy URL agenta. Te adresy URL służą do wywołania interfejsu konwersacyjnego na urządzeniu.

Możesz skopiować testowy adres URL, klikając dowolny z elementów. Oczywiście skopiuj adres URL testowy dla urządzenia, które masz pod ręką. Wyślij skopiowaną wiadomość na urządzenie w dowolny sposób.

Po kliknięciu linku na urządzeniu mobilnym zostanie uruchomiony program uruchamiający agenta Business Messages z wstępnie wypełnionym adresem URL testu agenta.

Kliknij Uruchom, aby wywołać panel rozmowy agenta.

Interakcja z asystentem i poznanie jego możliwości. W większości przypadków zauważysz, że interfejs konwersacyjny będzie tylko powtarzać Twoje wiadomości. Wyślij coś w rodzaju „Hello, World!”. Zobaczysz, że pracownik obsługi klienta wyśle Ci tę samą wiadomość.

Wdrożona aplikacja zawiera też logikę, która pokazuje bogate funkcje dostępne w Wiadomościach Biznesowych.

Jeśli wyślesz „kartę”, wywołasz kartę informacyjną.
Jeśli wysyłasz „elementy”, wywołujesz elementy z sugestią.
Jeśli wyślesz „karuzel”, 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 rozmówcy szerszego kontekstu. Wysyłaj zasoby graficzne na kartach multimedialnych, aby lepiej przekazywać pomysły, lub używaj elementów sugestii, aby kierować rozmową.

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

Poćwicz korzystanie z Konsoli dla deweloperów. Dowiedz się, jak edytować wiadomość powitalną agenta i wykorzystywać elementy sugestii, aby ułatwić użytkownikowi komunikację.

Otwórz stronę Przegląd i wybierz Informacje o agencie. Przewiń w dół do sekcji powitanie i tematy do rozmów.

Zaktualizuj komunikat powitalny (żółte pole wprowadzania danych) tak, aby brzmiał w ten sposób:

Witamy w usługach początkowych Bonjour Meal. Mogę powtórzyć Twoje wiadomości i pokazać Ci niektóre z bogatych funkcji obsługiwanych na platformie. Wypróbuj te sugestie.

Aby dodać elementy wprowadzające do rozmowy, które będą wyświetlać się w elementach sugestii, karuzeli i na karcie, kliknij + Dodaj wstęp do rozmowy (wskazany na fioletowym polu na powyższym obrazku). Dodane przez Ciebie startery konwersacji muszą zawierać komponent tekstowy i komponent postbackData. Tekst jest wyświetlany użytkownikowi, a dane postBack są wysyłane do webhooka Twojego agenta. Webhook przeanalizuje dane zwrotne i wyśle odpowiednią odpowiedź do użytkownika.

Po zmianach 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 zmiany, które wprowadziliśmy, oraz że pod nią znajdują się elementy z sugestiami.

To świetne narzędzie do zapoznania się z wrażeniami użytkownika. Możesz go używać podczas tworzenia agenta i planowania ścieżek użytkowników, 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 w infrastrukturze wiadomości biznesowych. Pamięć podręczna jest wyczyszczana mniej więcej co 2 godziny, więc jutro powinna być już dostępna.

Tymczasem przyjrzyjmy się, jak działają wszystkie elementy.

4. Analiza kodu startowego

Widok kodu źródłowego z odległości 10 000 stóp

Wdrożony przez Ciebie kod startowy odzwierciedla wiadomości wysyłane do użytkowników i może wyświetlać kartę multimedialną, karuzel lub elementy sugestii. Przyjrzyjmy się bliżej kodom źródłowym, aby zrozumieć, jak to działa. Potem ustalimy, co należy zmienić.

Kod startowy to projekt Django. W dalszej części tej serii ćwiczeń będziemy używać Google Datastore do przechowywania danych, takich jak koszyki i powiązane rozmowy. Nie martw się, jeśli nie korzystałeś(-aś) wcześniej z Django. To dość proste narzędzie, a do końca tego Codelab poznasz jego działanie.

Ogólnie rzecz biorąc, Django przekierowuje adresy URL do widoków, a logika widoku generuje szablon, który jest renderowany w przeglądarce. Spójrzmy na plik 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 tutaj 2 trasy, dzięki czemu Django może wykonać logikę, jeśli rozpozna te 2 adresy URL. Jeśli adres URL projektu to https://ID_PROJEKTU.appspot.com/, to znane mu są te trasy:

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

Oba adresy URL odnoszą się do funkcji bopis_views, która znajduje się w pliku bopis/views.py. Zobaczmy, 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 kodu jest wykonywany przez serwer WWW, gdy otrzyma on żądanie sieciowe wskazujące katalog główny projektu. Nie dzieje się tu nic nadzwyczajnego: po prostu zwracamy odpowiedź HTTP zawierającą kod HTML do przeglądarki, która wysłała żądanie. Tak, możesz otworzyć adres URL głównego katalogu projektu, ale nie ma tam zbyt wiele do zrobienia, ponieważ wrócisz do tego Codelab.

Drugi adres URL prowadzi do funkcji o nazwie callback, która też znajduje się w pliku 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.")
...

Zaimplementowana tu logika analizuje treść żądania pod kątem message lub suggestionResponse i przekazuje te informacje do funkcji o nazwie route_message, a następnie zwraca odpowiedź HttpResponse z powrotem do infrastruktury wiadomości biznesowych, aby potwierdzić otrzymanie wiadomości.

To ważna funkcja. Ten fragment logiki to webhook Twojej 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 automatyzacji, takiego jak Dialogflow, aby zrozumieć, co mówi użytkownik, i na tej podstawie wygenerować odpowiedź. Możesz też przekazać wiadomość, aby użytkownik mógł skontaktować się z agentem. Zobacz diagram poniżej:

Wiadomości biznesowe wysyłają 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 jest to 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 obniżenie wszystkich znaków. Po normalizacji sprawdza, czy wiadomość jest jedną z konstant zdefiniowanych u góry pliku.

bm-django-echo-bot/bopis/views.py [wiersze 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 ciąg znaków z postback_data rozmówców z poprzedniego kroku tego Codelab. Jeśli żaden z tych ciągów znaków nie pojawi się, wiadomość zostanie przekazana do funkcji o nazwie echo_message, która, jak się domyślasz, będzie odtwarzać wiadomości.

Wysyłanie wiadomości

Teraz już wiesz, jak aplikacja internetowa odbiera wiadomości. Wszystko jest wykonywane przez webhook.

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

Gdy Twoja infrastruktura odpowie użytkownikowi, wysyłasz odpowiedź do interfejsu API Business Messages, który przekazuje wiadomość użytkownikowi.

Interfejs Business Messages API ma biblioteki w językach Python, Node.js i Java. Jeśli Twoja infrastruktura nie jest w języku, do którego mamy bibliotekę, możesz wysyłać żądania bezpośrednio do interfejsu REST API. Aby dowiedzieć się, jak używać cURL do wysyłania wiadomości do konkretnego identyfikatora rozmowy, zapoznaj się z artykułem Wysyłanie wiadomości.

W tym Codelab skupimy się na użyciu biblioteki klienta Pythona, która jest już zintegrowana z kodem startowym Bonjour Meal wdrożonym w App Engine w Twoim projekcie GCP lub uruchamiana lokalnie za pomocą ngrok.

Przyjrzyjmy się funkcji echo_message i zobaczmy, jak współpracuje ona 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 instancja wiadomości BusinessMessagesMessage jest tworzona za pomocą zmiennej message przekazanej do funkcji echo_message. Po uruchomieniu obiekt jest przekazywany do send_message wraz z identyfikatorem rozmowy.

bm-django-echo-bot/bopis/views.py [wiersze 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 korzysta z kwalifikacji konta usługi, aby sprawdzić, czy możesz wysyłać wiadomości w tej rozmowie. Tworzy ona klienta Wiadomości Biznesowych i żądanie wysłania wiadomości do określonego conversation ID.

Funkcje rozszerzone również korzystają z funkcji send_message, ale wiadomości, które tworzą, są specyficzne dla kart rozszerzonych, karuzel i elementów sugestii. Karty multimedialne i karuzele mogą zawierać komponenty graficzne, a elementy sugestii mają postback_data, aby logika wywołania mogła je odpowiednio przeanalizować.

Teraz, gdy już wiesz, jak wysłać wiadomość, sprawdź, jak w tym przykładzie wysyłane są karty interaktywne, karuzele i elementy sugestii. 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, skonfigurujemy agenta Bonjour Meal.

5. Personalizacja agenta

Jeśli do tej pory śledziłeś/śledziłaś zajęcia, powinieneś/powinnaś zobaczyć naszego pięknego agenta.

Nie jest tak ładna, wygląda na pustą i nie reprezentuje dobrze naszej firmy. Mamy podstawową wiedzę o kodzie obsługującym agenta i dostępne narzędzia, dzięki którym możemy dostosować go do własnych potrzeb.

W dalszej części tego ćwiczenia rozszerzymy działanie skryptu o:

Dołącz rzeczywiste logo
Ulepszona wiadomość powitalna
Podanie informacji o godzinach otwarcia
Poinformuj użytkownika, że zakupy online będą dostępne wkrótce
Używanie elementów z propozycjami konwersacyjnymi do ułatwiania rozmowy

Korzystamy z Konsoli komunikacji biznesowej, aby zaktualizować logo i wiadomość powitalną, ale zawsze możesz też użyć interfejsów API komunikacji biznesowej. W tym celu 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 możliwość zakupów online. Gdy to zrobisz, wrócimy do konsoli komunikacji biznesowej i utworzymy elementy sugerujące rozmowę, które pomogą Ci prowadzić rozmowę zgodnie z ścieżką szczęśliwego klienta, którą obsługuje agent cyfrowy.

Dołącz logo

W konsoli komunikacji z klientami wybierz swojego agenta i przejdź do sekcji Informacje o agencie. Musimy zaktualizować logo firmy, jak pokazano na żółto poniżej.

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

Aby dowiedzieć się, jak stosować własne logo, zapoznaj się ze wytycznymi dotyczącymi projektowania logo w dokumentacji.

Prześlij logo, które znajduje się w źródłowym kodzie skopiowanym na początku tego Codelab. Znajdziesz go w katalogu ./assets/ w repozytorium. Nazwa pliku to „bonjour_meal-logo.png”. Możesz przeciągnąć plik do okna w przeglądarce. Zostanie wyświetlone proste narzędzie do edycji, które umożliwia zmianę jakości obrazu i przycięcie go. Dostosuj rozdzielczość obrazu i przytnij go tak, aby jego rozmiar nie przekraczał 50 KB. Gdy obraz Ci odpowiada, kliknij znacznik wyboru w niebieskim okręgu, aby potwierdzić, a następnie kliknij Wybierz u dołu okna modalnego.

Na koniec w prawym górnym rogu strony Informacje o usługach kliknij Zapisz. Ta zmiana może być widoczna na urządzeniu dopiero po pewnym czasie, ponieważ informacje o pośredniku są przechowywane w pamięci podręcznej na naszych serwerach i powinny być widoczne w ciągu 2 godzin od wprowadzenia zmiany.

Zaktualizuj wiadomość powitalną

Aktualizacja wiadomości powitalnej została już wykonana wcześniej w tym samouczku. Zróbmy to jeszcze raz, ale tym razem skonfiguruj wiadomość powitalną bardziej odpowiednią dla użytkowników Bonjour Meal.

W konsoli komunikacji biznesowej wybierz swojego pracownika i przejdź do sekcji Informacje o pracowniku. Przewiń w dół, aż zobaczysz pole wprowadzania Wiadomości powitalnej, w którym możesz zaktualizować wiadomość.

Wiedząc, że dodamy tematy do rozmów, możemy je uwzględnić w wiadomości powitalnej. W polu tekstowym zastąp tekst tym:

„Witamy w Bonjour Meal. Jestem asystentem, który może pomóc Ci w rozwiązaniu problemów związanych z Bonjour Meal. Wypróbuj niektóre z tych opcji”.

Na koniec w prawym górnym rogu strony Informacje o usługach kliknij Zapisz. Ponownie przypominamy, że ta zmiana może potrwać trochę czasu ze względu na nasz mechanizm buforowania, który ma na celu zapewnienie sprawnego działania.

Udzielanie informacji o godzinach otwarcia

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

Jak zapewne pamiętasz, wiadomości są analizowane w funkcji route_message w funkcji views.py. Funkcja najpierw normalizuje ciąg znaków, a potem zaczyna sprawdzać, czy sformatowana wiadomość pasuje do któregoś z parametrów zakodowanych na stałe. Dla ułatwienia dodajmy dodatkowy warunek, w którym sprawdzimy, czy sformatowana wiadomość jest równa nowej stałej o nazwie CMD_BUSINESS_HOURS_INQUIRY, która będzie zawierać wartość „business-hours-inquiry”. Jeśli warunek jest prawdziwy, wywołujemy funkcję 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ć 2 dodatkowe zmiany. Po pierwsze, zdefiniuj CMD_BUSINESS_HOURS_INQUIRY wraz z innymi stałymi. Po drugie, zdefiniuj funkcję send_message_with_business_hours i wyślij wiadomość za pomocą interfejsu Business Messages API.

Najpierw zdefiniujmy stałą na początku pliku razem z innymi deklarowanymi stałymi:

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

A teraz definicja send_message_with_business_hours. Funkcję możesz zdefiniować w dowolnym miejscu w pliku, stosując odpowiednią składnię Pythona. Ta funkcja po prostu wysyła wiadomość, podobnie jak funkcja echo_message, więc możesz użyć jej 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, gdy ten wyśle wiadomość „business-hours-inquiry”. Możesz się spodziewać czegoś takiego:

Po wdrożenie kodu źródłowego do GCP zmiany będą widoczne natychmiast. Nie przechowujemy w pamięci podręcznej aplikacji internetowej w Google Cloud Platform w taki sam sposób, w jaki przechowujemy informacje o agentach, więc możesz od razu przetestować tę funkcję.

Ponieważ jesteśmy już w trakcie wprowadzania zmian w źródłach, wprowadźmy jeszcze jedną modyfikację, która pozwoli użytkownikowi zapytać o zakupy online. Agent cyfrowy odpowie, że ta funkcja nie jest jeszcze dostępna, ale możesz wrócić i sprawdzić później.

Poinformowanie użytkownika, że zakupy online są już dostępne

Wprowadzimy podobną modyfikację, aby poinformować użytkownika o godzinach otwarcia. Tym razem umieśćmy informacje na karcie z obrazem i ciekawym zdjęciem.

Przeanalizuj sformatowany komunikat i sprawdź warunek dla stałej o nazwie CMD_ONLINE_SHOPPING_INQUIRY o wartości „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 określ send_online_shopping_info_message. Chcemy wysłać tę wiadomość w postaci karty z obrazem, więc skopiuj funkcję send_rich_card, aby użyć jej jako szablonu do zdefiniowania funkcji send_online_shopping_info_message.

Najpierw powinniśmy zaktualizować tekst zastępczy, aby zawierał odpowiednią wiadomość. Tekst zastępczy jest używany, gdy urządzenie z jakiegoś powodu nie może wyświetlić karty z elementami rozszerzonymi. Następnie powinniśmy zaktualizować BusinessMessagesRichCard, aby zawierał odpowiedni tytuł, opis, sugestie i pole z multimediami. 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ć użytkownikom, którzy pytają o zakupy online. Na razie nasz agent cyfrowy nie obsługuje jeszcze zakupów online, więc wysyłamy użytkownikowi wiadomość z informacją, że ta funkcja pojawi się wkrótce. Tak wygląda nasz cyfrowy agent, gdy użytkownik zapyta o zakupy online.

Podobnie jak w przypadku poprzedniej zmiany, która umożliwiała użytkownikom zapytanie o godziny otwarcia, ta zmiana będzie widoczna od razu, jeśli używasz ngrok, lub od razu po wdrożeniu kodu do App Engine w GCP.

W następnej części użyjemy inicjatorów konwersacji i elementów z propozycjami, aby poprowadzić rozmowę ścieżką sukcesu.

Korzystanie z elementów kierujących rozmową

Wprowadziliśmy pewne zmiany w źródłowym kodzie źródłowym i wdrożyliśmy zaktualizowanego agenta cyfrowego, ale nie spodziewamy się, że użytkownicy wpisują „business-hours-inquiry” (zapytanie o godziny otwarcia) lub „online-shopping-info” (informacje o zakupach online), aby uzyskać informacje o firmie. Zaktualizujmy pomysły na rozpoczęcie rozmowy, aby po jej otwarciu użytkownik nie tylko otrzymał miłe powitanie, ale też zobaczył pomysły na rozpoczęcie rozmowy.

Otwórz konsolę usług komunikacji biznesowej i przejdź na stronę Informacje o agencie swojego agenta. Wcześniej zdefiniowaliśmy tematy rozmów dla elementów „elementy”, „karta” i „karuzela”. Chociaż te adresy nadal działają, nie są już przydatne w naszej działalności. Możesz je pozostawić, aby nadal wyświetlać te funkcje, lub usunąć, aby Twój cyfrowy agent wyświetlał startery konwersacji dotyczące konkretnej firmy, np. Bonjour Meal.

Utworzymy 2 nowe tematy do rozpoczęcia rozmowy. W pierwszym przypadku ustaw tekst na „What are your business hours?” (Jakie są godziny otwarcia Twojej firmy?), a w drugim – na „business-hours-inquiry” (zapytanie o godziny otwarcia). W drugim przypadku ustawienia tekstu ustaw na „Czy mogę tu robić zakupy?”, a danych wywołania zwrotnego na „online-shopping-info”.

W efekcie powinna powstać konfiguracja widoczna na tym zrzucie ekranu:

Podobnie jak w przypadku innych zmian wprowadzonych w Konsoli komunikacji biznesowej, może minąć trochę czasu, zanim zmiany te zostaną uwzględnione na urządzeniu mobilnym.

Po zakończeniu tematów do rozpoczęcia rozmowy chcemy też znaleźć sposób na poprowadzenie użytkownika ścieżką do szczęśliwego zakończenia po rozpoczęciu rozmowy. Po wysłaniu wiadomości możesz użyć elementów kontekstowych, aby pokierować użytkownika do innych funkcji, które może wykonać agent cyfrowy. Gdy użytkownik zapyta o godziny otwarcia lub zakupy online, wyślemy wiadomość z propozycją, aby skontaktował się z agentem.

Na końcu funkcji dodaj:

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 tagu BusinessMessagesSuggestion jest ograniczone do 25 znaków, zgodnie z opisem w dokumentacji.

Oto kilka zrzutów ekranu pokazujących oczekiwane wrażenia użytkowników po wprowadzeniu zaktualizowanych tematów konwersacji i strategicznego wykorzystania sugestii.

6. Gratulacje

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

Wdrożysz aplikację internetową, aby obsługiwać agenta cyfrowego w usłudze Business Messages, zmodyfikujesz agenta za pomocą Konsoli komunikacji biznesowej i spersonalizujesz go dla użytkowników, wprowadzając zmiany w kodzie źródłowym.

Znasz już najważniejsze kroki wymagane do stworzenia interaktywnej wersji Business Messages, a pozostałe możliwości są naprawdę ekscytujące. Twój agent może zostać rozszerzony o wyszukiwanie asortymentu lub koszyk, aby śledzić, czym może być zainteresowany użytkownik. Możesz użyć karuzeli, aby wyświetlać elementy menu, a za pomocą sugestii umożliwić użytkownikowi wybranie interesujących go elementów.

Oto zapowiedź tego, jak może to wyglądać.

Jak tworzyć świetne konwersacje?

Najlepsi pracownicy obsługi klienta dostarczają użytkownikom informacji kontekstowych, a także umożliwiają im korzystanie z funkcji podczas rozmowy, dzięki czemu mogą oni angażować się w rozmowę z firmą tak samo jak podczas rozmowy telefonicznej czy nawet osobistej. Zastanów się, jak te tematy mogą się przydać w rozmowie z firmą, z którą współpracujesz.

Przedstaw kontekst i oczekiwania

Podanie kontekstu może polegać na wyraźnym wskazaniu, jak możesz pomóc użytkownikowi, lub na przedstawieniu agenta cyfrowego w postaci osoby, z którą użytkownik może się utożsamić. Skuteczni pracownicy obsługi klienta w ramach usługi Business Messaging używają awatara, aby pokazać użytkownikowi, z kim rozmawia.

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

Zapewnij użytkownikowi dostęp do funkcji

Konsumenci stale kontaktują się z firmą. Od zapytań, takich jak sprawdzanie stanu zamówienia, po sprawdzanie, czy dany produkt jest dostępny – wiadomości biznesowe mogą obsługiwać złożone interakcje z użytkownikami. Wielu użytkowników nadal dzwoni do firm, aby uzyskać odpowiedzi na swoje pytania, nawet jeśli odpowiedzi są dostępne na stronie firmy. W efekcie firmy muszą inwestować więcej zasobów w obsługę dużej liczby połączeń, zwłaszcza w okresie świątecznym.

Zaangażuj użytkownika

Zapewnij konwersacyjne punkty styczności z klientem, aby utrzymać jego zaangażowanie w rozmowę. W międzyczasie możesz wyświetlić wskaźnik pisania, aby poinformować użytkownika, że przygotowujesz dla niego odpowiedź.

Dzięki bogatym funkcjom takim jak wskaźniki pisania, sugestie, karty i karuzele możesz poprowadzić użytkownika przez ścieżkę szczęśliwego użytkownika, aby pomóc mu w wykonaniu określonych zadań, np. zamówieniu produktów z menu. Celem jest zmniejszenie liczby połączeń na numer telefonu firmy.

Bardzo ważne jest, aby rozmowa zapewniała użytkownikowi odpowiednią funkcjonalność. Użytkownicy, którzy kontaktują się z firmą za pomocą wiadomości, oczekują szybkich odpowiedzi na swoje pytania. W nietypowej sytuacji agent cyfrowy może nie ułatwić rozmowy, co może wpłynąć na wygodę użytkownika. Na szczęście istnieją sposoby na obejście tego ograniczenia, np. przekazanie rozmowy do pracownika obsługi klienta, co omówimy w przyszłym Codelab.

Co dalej?

Gdy będziesz gotowy, zapoznaj się z kilkoma z tych tematów, aby dowiedzieć się więcej o bardziej złożonych interakcjach, które możesz przeprowadzać w Business Messages.

Dokumenty referencyjne

SuggestedReply
Dokument referencyjny dotyczący wiadomości w usłudze Business Messages
Definicja JSON dla RichCard