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

1. Wstęp

Ostatnia aktualizacja: 11.05.2022 r.

Witamy w Business Messages

To ćwiczenie z programowania stanowi wprowadzenie do integracji z Business Messages i umożliwia klientom kontaktowanie się z firmami, którymi zarządzasz w wyszukiwarce i Mapach Google. Być może reprezentujesz firmę, która chce przeprowadzić bezpośrednią integrację z Business Messages, lub pracujesz u niezależnego dostawcy oprogramowania, który tworzy rozwiązania do przesyłania wiadomości dla firm, z którymi współpracujesz, albo po prostu doświadczasz Business Messages i chcesz coś naprawić na platformie.

Niezależnie od tego, co Cię tu sprowadza, ta ćwiczenia z programowania to doskonały sposób na rozpoczęcie pracy. Na koniec otrzymasz pierwszego agenta cyfrowego, z którym użytkownicy będą mogli się komunikować. Gdy uznasz, że Twoja firma jest gotowa do uruchomienia w Business Messages, gdy wprowadzisz ją w bardziej dopracowany sposób, możesz dotrzeć do milionów klientów.

Uwaga: aby zacząć korzystać z Business Messages, zarejestruj się w konsoli programisty Business Communications.

Uwaga: jeśli bierzesz udział w tym ćwiczeniu z programowania podczas Google I/O, witamy! Dzięki nim dowiesz się, jak korzystać z platformy Business Messages, a także dowiesz się, jak odbierać i wysyłać wiadomości w środowisku rozmów Business Messages.

Czym jest dobry agent internetowy?

Business Messages to środowisko konwersacyjne, które przypomina aplikację na urządzeniach mobilnych. Pozwala konsumentom kontaktować się z firmami bez konieczności instalowania dodatkowej aplikacji. Agent cyfrowy to element logiczny, z którym klienci wchodzą w interakcję. Logiką zarządza aplikacja internetowa wdrożona w chmurze lub w Twojej infrastrukturze. To, jak zareagujesz, zależy wyłącznie od Ciebie. Najlepsi agenci mówią o kontekście, aby określić oczekiwania, utrzymać zaangażowanie klientów i zapewniać funkcje spełniające ich potrzeby.

Co utworzysz

W ramach tego ćwiczenia z programowania utworzysz agenta cyfrowego w Business Messages dla fikcyjnej firmy o nazwie Bonjour Meal. Przedstawiciel odpowie na kilka prostych pytań, np. „O której godzinie Państwo zamykają?” lub „Czy mogę zrobić zakupy online?”.

Dzięki temu ćwiczeniu z programowania użytkownicy będą mogli kupować produkty przez agenta cyfrowego, kierować użytkownika do podmiotu obsługującego płatności, aby zebrać pieniądze, a następnie zaplanować odbiór fikcyjnych produktów w sklepie.

W tym ćwiczeniu z programowania Twoja aplikacja

• Odpowiadanie na pytania za pomocą elementu sugestii
• Poinstruuj użytkownika, aby zadawał pytania, na które może odpowiedzieć przedstawiciel cyfrowy
• zapewniać zaawansowane funkcje konwersacyjne, aby utrzymać zaangażowanie użytkownika w rozmowie;

Uwaga: aby uprościć to ćwiczenie z programowania i wyjaśnić podstawy tworzenia świetnych funkcji Business Messages, korzystamy z Google Cloud Platform (GCP) do wdrożenia aplikacji internetowej wspierającej infrastrukturę agentów. GCP to doskonały wybór do wdrażania aplikacji internetowych, ale korzystanie z niego nie jest obowiązkowe.

Czego się nauczysz

• Jak wdrożyć aplikację internetową w App Engine w Google Cloud Platform. Możesz też użyć narzędzia ngrok do publicznego testowania aplikacji lokalnej.
• Jak skonfigurować konto Business Messages z webhookiem 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 wiadomości

To ćwiczenie z programowania koncentruje się na stworzeniu Twojego pierwszego agenta internetowego.

Czego potrzebujesz

• Zarejestruj bezpłatne konto dewelopera w usłudze Business Communications
• Aby dowiedzieć się, jak to zrobić, zajrzyj na naszą stronę dla deweloperów.
• urządzenia z Androidem w wersji 5 lub nowszej LUB urządzenia z iOS i aplikacją Mapy Google,
• Doświadczenie w programowaniu aplikacji internetowych
• Masz połączenie z internetem.

2. Konfiguracja

Uwaga: wszystkie zadania wskazane w tych ćwiczeniach z programowania możesz wykonać za pomocą interfejsu Business Communications API. Będziemy jednak korzystać z konsoli programisty Business Communications, aby uprościć wykonywanie danego zadania. Kiedy opcja korzystania z interfejsu API stanie się dostępna, poinformujemy Cię o tym i odwołamy się do niej w naszej dokumentacji.

Włączanie interfejsów API

Ponieważ w tym ćwiczeniu z programowania będziemy pracować z aplikacją Django, wdrożymy ją w App Engine za pomocą interfejsu Cloud Build API. Jeśli używasz ngrok, nie musisz włączać interfejsu Cloud Build API.

Aby włączyć Cloud Build API:

1. Otwórz interfejs Cloud Build API w Google Cloud Console.
2. Kliknij Włącz.

utworzyć konto usługi,

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

Wdrażanie kodu startowego EchoBot Django w Pythonie

W terminalu skopiuj przykładowy bota Django Echo Bot do katalogu roboczego swojego 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 zmień nazwę danych 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 kroku 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 zarejestrowania się w interfejsach API.

Zapisz adres URL wdrożonej aplikacji w danych wyjściowych ostatniego polecenia:

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

Wdrożony kod startowy zawiera aplikację internetową z webhookiem, która umożliwia odbieranie wiadomości z Business Messages. Aplikacja odczytuje wiadomości i może zaprezentować niektóre zaawansowane funkcje dostępne w przestrzeni rozmowy.

Konfigurowanie webooka

Po wdrożeniu usługi możesz użyć 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 ona wyglądać na przykład tak: https://PROJECT_ID.appspot.com/callback/

Otwórz stronę ustawień konta w konsoli komunikacji biznesowej. W prawym górnym rogu pod paskiem nawigacyjnym powinna być widoczna nazwa projektu GCP. Jeśli pojawi się menu, wybierz swój projekt GCP.

Wpisz dane technicznej osoby kontaktowej, a następnie zaktualizuj Webhook, podając adres URL webhooka wdrożonej aplikacji.

Kliknij Save (Zapisz) obok pliku referencyjnego projektu GCP.

3. Tworzenie pierwszego agenta

Korzystanie z konsoli programisty Business Communications

Kliknij logo w lewym górnym rogu konsoli Business Communications, aby wrócić do panelu konsoli, a następnie kliknij Utwórz agenta. Tworzysz markę w trakcie tworzenia agenta. W polu Typ agenta wybierz Business Messages (Wiadomości firmy) i upewnij się, że informacje o partnerze są prawidłowe.

W polu Marka wpisz nazwę marki, którą tworzysz.Marka to firma, z którą współpracujesz, a klienci mogą wchodzić w interakcje z agentem. W polu Nazwa agenta określ, co użytkownicy mają widzieć w rozmowie z Business Messages. W przypadku fikcyjnego posiłku Bonjour Meal to firma kolejowa, która zarządza restauracjami Bonjour Meal. Jako markę wskażę Bonjour Rail, a agenta Bonjour Meal.

Agent to konwersacyjna jednostka reprezentująca markę.

Kliknij Utwórz agenta i pozwól konsoli wykonać niektóre czynności. Wykonanie tego żądania trwa kilka sekund i powoduje wysłanie do interfejsu Business Communications API kilku żądań utworzenia marki i agenta. Aby utworzyć agenta i markę, możesz bezpośrednio utworzyć agenta za pomocą interfejsu Business Communications API. Zapoznaj się z dokumentacją, aby dowiedzieć się, jak żądanie curl wygląda tak samo jak w konsoli.

Pierwsza rozmowa

Otwórz właśnie utworzonego agenta. Wyświetli się strona Przegląd, na której możesz rozpocząć sprawdzanie szczegółów agenta. Zajrzyj do testowych adresów URL agentów. Wywołują one przestrzeń do rozmowy na urządzeniu.

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

Kliknięcie linku na urządzeniu mobilnym wywoła program uruchamiający agenta Business Messages, a adres URL Twojego agenta zostanie wypełniony.

Kliknij Uruchom, aby wywołać przestrzeń do rozmowy z agentem.

Skontaktuj się z pracownikiem obsługi klienta, aby poznać jego możliwości. Ogólnie rzecz biorąc, obszar rozmowy będzie ponownie odczytywał tylko Twoje wiadomości. Wyślij wiadomość w rodzaju „Witaj świecie!”, a zobaczysz, że pracownik obsługi klienta odeśle Ci tę samą wiadomość.

Wdrożona aplikacja zawiera też funkcje logiczne pozwalające zaprezentować zaawansowane funkcje dostępne w Business Messages.

• Wysłanie opcji „karta” spowoduje wywołanie karty informacyjnej.
• Jeśli wyślesz „chip”, wywołasz elementy sugestii
• Wysłanie „karuzeli” wywołuje karuzelę kart rozszerzonych

Gratulacje! To pierwsza rozmowa agenta z Tobą.

Każdej z tych zaawansowanych funkcji można użyć, aby zapewnić lepszy kontekst osobie komunikującej się z pracownikiem obsługi klienta. Wysyłaj zasoby graficzne na kartach rozszerzonych, aby skuteczniej przekazywać swoje pomysły, lub korzystaj z elementów sugestii do kierowania rozmową.

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

Poćwiczmy korzystanie z Konsoli programisty i zobaczmy, jak edytować wiadomość powitalną agenta i wykorzystywać elementy z sugestiami, aby ułatwić komunikację.

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

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

Witamy w agencie Bonjour Meal. Mogę powtórzyć Twoje wiadomości i pokazać Ci kilka zaawansowanych funkcji dostępnych na platformie. Wypróbuj te sugestie.

Kliknij + Dodaj początek rozmowy zgodnie z informacjami w fioletowym polu na ilustracji powyżej, aby dodać początki rozmów w celu wywołania elementów z sugestią, karuzeli lub karty. Do wstępów do rozmów potrzebne są komponenty tekstowe i komponent postbackData. Tekst jest wyświetlany użytkownikowi, a dane postBack są wysyłane do webhooka agenta. Webhook analizuje dane wywołania zwrotnego i wysyła użytkownikowi odpowiednią odpowiedź.

Informacje o agencie w konsoli wyglądają po modyfikacji tak:

Po prawej stronie konsoli zobaczysz podgląd wyglądu agenta. Czy wiadomość powitalna odzwierciedla wprowadzone zmiany i elementy sugestii znajdujące się pod nią.

To świetne narzędzie, dzięki któremu możesz się zorientować, jak będzie wyglądała interakcja użytkownika z reklamą. Możesz go używać podczas tworzenia agenta i planowania ścieżek użytkowników, które chcesz wspierać.

Zmiany nie będą widoczne w rozmowie od razu, ponieważ wcześniejsze dane są przechowywane w pamięci podręcznej w infrastrukturze Business Messages. Pamięć podręczna jest czyszczona mniej więcej co 2 godziny, więc jutro powinno być możliwe wypróbowanie tej funkcji.

Tymczasem przyjrzyjmy się temu, jak wszystko działa pod maską.

4. Analizuję kod startowy

Opcjonalnie: ta sekcja ma charakter czysto informacyjny. Podczas wspólnego sprawdzania kodu źródłowego możesz dowiedzieć się czegoś więcej o Django. Wiesz też, jak wiadomości są odbierane przez webhooka i jak odpowiedzi są odsyłane z powrotem za pomocą interfejsu API Pythona.

Widok kodu źródłowego z ponad 3000 metrów

Wdrożony kod startowy umożliwia odsłuchiwanie wiadomości użytkownikom i może wyświetlać kartę informacyjną, karuzelę lub elementy sugestii. Przyjrzyjmy się dokładniej kodowi źródłowemu, aby dowiedzieć się, jak to działa. Następnie zdecydujemy, co trzeba zmienić.

Kod startowy jest projektem Django. W kolejnej części tej serii ćwiczeń z programowania użyjemy Google Datastore, aby przechowywać takie dane jak koszyki na zakupy i powiązane z nimi rozmowy. Nie przejmuj się, jeśli nie znasz jeszcze Django – jest to całkiem proste, a po zakończeniu tego ćwiczenia z programowania dowiesz się, jak działa.

Ogólnie rzecz biorąc, Django kieruje adresy URL do widoków, a logika widoku danych tworzy szablon 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),
]

W tym miejscu zdefiniowano 2 trasy, więc Django może wykonywać logikę, jeśli te 2 adresy zostaną rozpoznane. Ponieważ adres URL projektu to https://ID_PROJEKTU.appspot.com/, to trasy znane projektowi to:

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

Obie trasy adresu URL odwołują się do adresu bopis_views, który pochodzi z pliku bopis/views.py. Zobaczmy, co się dzieje w tym pliku. Na początek sprawdźmy, 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>.")
...

Ta logika jest wykonywana przez serwer WWW, gdy otrzyma żądanie internetowe wskazujące na główny element projektu. Nie dzieje się tu nic nadzwyczajnego – zwracamy po prostu odpowiedź HTTP zawierającą kod HTML do przeglądarki, która wysłała żądanie. Możesz więc otworzyć główny adres URL projektu, ale nie musisz robić nic więcej, ponieważ spowoduje to powrót do tego ćwiczenia z programowania.

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

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

Mechanizm logiczny analizuje treść żądania wiadomości lub suggestionResponse i przekazuje te informacje do funkcji o nazwie route_message. Następnie zwraca odpowiedź HttpResponse z powrotem do infrastruktury Business Messages, aby potwierdzić odbiór wiadomości.

To ważna funkcja. Ta logika to webhook aplikacji internetowej, który odbiera wiadomości od użytkowników wchodzących w interakcje z Twoim agentem. Możesz rozszerzyć webhooka, by wysyłał wiadomości do narzędzia do automatyzacji, takiego jak Dialogflow, by lepiej zrozumieć, co mówi użytkownik, i wygenerować odpowiedź na podstawie tego wnioskowania. Wiadomość możesz też przekazać dalej, aby użytkownik mógł skontaktować się z pracownikiem obsługi klienta. Zobacz ten schemat:

Business Messages wysyła treść wiadomości w postaci ładunku JSON do webhooka, gdzie jest przekierowywana do agenta na żywo lub do pewnych działań logicznych, aby odpowiedzieć 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)
...

Ta logika rozpoczyna sprawdzanie wiadomości otrzymanej przez użytkownika. Po pierwsze, wiadomość jest znormalizowana przez obniżenie wszystkich znaków. Po znormalizowaniu sprawdzana jest, czy wiadomość nie zawiera żadnej ze stałych określonych 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ą wszystkie ciągi tekstowe umieszczone w polu postback_data poleceń inicjujących rozmowy z poprzedniego kroku w tym ćwiczeniu z programowania. Jeśli nie pojawia się żaden z tych ciągów, wiadomość jest po prostu przekazywana do funkcji o nazwie echo_message, co w praktyce może być reakcją na echo.

Wysyłanie wiadomości

Teraz już pewnie wiesz, jak aplikacja odbiera wiadomości. Wszystko to robi webhook.

W jaki sposób aplikacja wysyła wiadomość wychodzącą do użytkownika za pomocą Business Messages?

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

Interfejs Business Messages API ma biblioteki w językach Python, Node.js i Javy. Udostępniamy też interfejs API typu REST, do którego można wysyłać żądania bezpośrednio, jeśli Twoja infrastruktura nie jest w języku, dla którego mamy bibliotekę. Zajrzyj do artykułu Wysyłanie wiadomości, aby dowiedzieć się, jak usługa cURL jest używana do wysyłania wiadomości do określonego identyfikatora rozmowy.

W tym ćwiczeniu z programowania skupimy się na korzystaniu z biblioteki klienta w języku Python, która jest już zintegrowana z kodem startowym Bonjour Meal, który został wdrożony w App Engine w Twoim projekcie GCP lub działa lokalnie przy użyciu ngroku.

Przyjrzyjmy się funkcji echo_message i zobaczmy, w jaki sposób wchodzimy w interakcję z interfejsem API, aby wysyłać wiadomość do Business Messages.

bm-django-echo-bot/bopis/views.py [Lines 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 utworzona jest instancja BusinessMessagesMessage za pomocą zmiennej wiadomości przekazywanej 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)
...

Cała funkcja send_message używa danych logowania do konta usługi do sprawdzania, czy możesz wysyłać wiadomości do tej rozmowy, tworzenia instancji klienta Business Messages i tworzenia żądania wysłania wiadomości na podany adres conversation ID.

Funkcje zaawansowane również korzystają z tej funkcji send_message, ale tworzone przez nie wiadomości są dostosowane do kart informacyjnych, karuzel i elementów sugestii. Karty rozszerzone i karuzele mogą zawierać zasoby graficzne, a elementy sugestii mają parametr postback_data, dzięki czemu mechanizm wywołania zwrotnego może je prawidłowo przeanalizować.

Poznaliśmy już, jak wysyłać wiadomości. Zastanów się teraz, w jaki sposób wysyła ona karty informacyjne, karuzele i elementy sugestii. W tej sekcji zmodyfikujemy kod źródłowy w taki sposób, aby wysyłać wiadomości przy użyciu niektórych z tych zaawansowanych funkcji.

Gdy będziesz gotowy, dostosujmy agenta Bonjour Meal.

5. Dostosowywanie agenta

Jeśli udało Ci się już wykonać ćwiczenia z programowania, powinniśmy zobaczyć naszego pięknego agenta.

No cóż, nie wygląda to tak pięknie, ale tak naprawdę nie przedstawia zbyt dobrze naszej firmy. Na szczęście mamy podstawową wiedzę na temat kodu obsługującego agenta i znajdujemy narzędzia niezbędne do dostosowania agenta w dowolny sposób.

W pozostałej części tego ćwiczenia z programowania rozszerzymy agenta o tematy:

• Musi zawierać logo.
• Ulepszona wiadomość powitalna
• Podawanie informacji o godzinach otwarcia
• Poinformuj użytkownika, że wkrótce będzie można kupować produkty online
• Korzystanie z elementów z sugestiami dotyczącymi rozmowy, aby ułatwić rozmowę

Skorzystamy z konsoli Business Communications, aby pomóc nam zaktualizować logo i wiadomość powitalną. Zawsze możesz jednak zrobić to bezpośrednio za pomocą interfejsów Business Communications API. Następnie trzeba będzie zaktualizować kod źródłowy w taki sposób, aby wysyłać odpowiednie wiadomości z informacjami o godzinach otwarcia oraz że wkrótce udostępnimy funkcję zakupów online w Bonjour Meal. Gdy to zrobisz, wrócimy do konsoli komunikacji biznesowej i utworzymy elementy z sugestiami dotyczącymi rozmowy, które pokierują rozmowę na ścieżkę szczęśliwą, którą wspiera agent cyfrowy.

Dodawanie logo

W Business Communications Console wybierz agenta i otwórz stronę Informacje o agencie. Zaktualizuj logo firmy, które zaznaczono poniżej na żółto.

Kliknij Prześlij i wybierz obraz do przesłania lub zaimportowania z adresu URL.

Przeczytaj wskazówki na temat projektowania logo w dokumentacji, aby poznać sprawdzone metody korzystania z własnego logo.

Prześlijmy logo znajdujące się w kodzie źródłowym sklonowanym na początku tego ćwiczenia z programowania. Znajdziesz go w katalogu ./assets/ repozytorium. Plik ma nazwę „bonjour_meal-logo.png”. Możesz przeciągnąć plik do okna w przeglądarce, pojawi się proste narzędzie do edycji obrazu, które pozwoli zmienić jakość obrazu i przyciąć go. Dostosuj rozdzielczość obrazu i przytnij go tak, aby jego rozmiar nie przekraczał 50 KB. Gdy uznasz, że obraz jest zadowalający, kliknij znacznik wyboru w niebieskim kółku, aby potwierdzić wybór, a następnie kliknij Wybierz u dołu okna.

Na koniec kliknij Zapisz w prawym górnym rogu strony Informacje o agencie. Ta zmiana może pojawić się na urządzeniu dopiero po pewnym czasie, ponieważ informacje o agencie są przechowywane na naszych serwerach i powinny być widoczne w ciągu dwóch godzin od wprowadzenia zmiany.

Aktualizowanie wiadomości powitalnej

Aktualizacja wiadomości powitalnej została już przeprowadzona w ramach tego ćwiczenia z programowania. Zróbmy to jeszcze raz, ale tym razem skonfiguruj wiadomość powitalną, która będzie bardziej odpowiednia do ścieżki użytkownika Bonjour.

W konsoli komunikacji biznesowej wybierz agenta i otwórz stronę Informacje o agencie. Przewiń w dół, aż zobaczysz pole Wiadomość powitalna, w którym możesz zaktualizować wiadomość.

Wiedząc, że dodamy inicjujące rozmowy, możemy wspomnieć o nich w wiadomości powitalnej. Zastąpmy go w polu do wprowadzania tym tekstem:

„Witamy w Bonjour Meal. Jestem asystentem, który odpowie na pytania dotyczące posiłków Bonjour. Wypróbuj niektóre z poniższych opcji”.

Na koniec kliknij Zapisz w prawym górnym rogu strony Informacje o agencie. Również ta zmiana może pojawić się dopiero po pewnym czasie, ponieważ nasz mechanizm buforowania zapewnia, że wszystko działa jak należy.

Podawanie informacji o godzinach otwarcia

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

Być może pamiętasz, że wiadomości są analizowane przez funkcję route_message na urządzeniu views.py. Funkcja najpierw normalizuje ciąg znaków, a następnie zaczyna sprawdzać, czy znormalizowany komunikat pasuje do któregoś z parametrów zakodowanych na stałe. Dla uproszczenia dodajmy dodatkowy warunek, który pozwala nam sprawdzić, czy znormalizowana wiadomość jest równa nowej stałej, którą nazywamy CMD_BUSINESS_HOURS_INQUIRY i która będzie zawierać wartość „zapytanie-godzin pracy”. Jeśli warunek przyjmuje 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ł, musisz wprowadzić jeszcze 2 zmiany. Pierwsza to zdefiniowanie CMD_BUSINESS_HOURS_INQUIRY wraz z innymi stałymi, a druga to zdefiniowanie funkcji send_message_with_business_hours i wysłanie wiadomości za pomocą interfejsu Business Messages API.

Najpierw zdefiniujmy stałą u góry pliku 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'
...

Zdefiniujmy teraz send_message_with_business_hours. Możesz ją zdefiniować w dowolnym miejscu w pliku, zgodnie z odpowiednią składnią Pythona. Ta funkcja po prostu wysyła wiadomość, podobnie jak w przypadku elementu 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, wysyłając wiadomość z tymi godzinami pracy: „zapytanie o godziny pracy”. Możesz oczekiwać, że:

Po wdrożeniu kodu źródłowego w GCP zmiany będą widoczne od razu. Nie zapisujemy aplikacji internetowej w Google Cloud Platform w pamięci podręcznej w taki sam sposób, w jaki przechowywane są informacje o agencie, więc możesz od razu przetestować to działanie.

Co prawda już sporo czasu na wprowadzanie zmian w źródłach ofert reklamowych, chcemy jednak wprowadzić jeszcze jedną zmianę, która pozwoli użytkownikom uzyskiwać informacje o zakupach online. Pracownik obsługi klienta odpowie Ci, że funkcja nie jest jeszcze dostępna. Wróć tutaj i sprawdź później.

Informowanie użytkownika, że wkrótce będą dostępne zakupy online

Wprowadzimy podobną zmianę jak w przypadku poinformowania użytkownika o godzinach otwarcia. Tym razem umieścimy te informacje w karcie informacyjnej wraz z przykuwającym uwagę obrazem.

Przeanalizuj znormalizowaną wiadomość i sprawdź warunek dla stałej o nazwie CMD_ONLINE_SHOPPING_INQUIRY z wartością „online-shopping-inquiry”, która wywołuje metodę 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 podaj definicję słowa send_online_shopping_info_message. Chcemy, aby ta wiadomość została wysłana w postaci karty informacyjnej z obrazem, skopiujmy więc funkcję send_rich_card, aby wykorzystać ją jako szablon do zdefiniowania elementu send_online_shopping_info_message.

Najpierw trzeba zaktualizować tekst zastępczy, aby zawierał odpowiedni komunikat. Tekst zastępczy jest używany wtedy, gdy z jakiegoś powodu urządzenie nie może otrzymać karty informacyjnej. Następnie należy zaktualizować BusinessMessagesRichCard, dodając odpowiedni tytuł, opis, sugestie i pole multimediów. 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 przedstawiciel 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 wysyłamy użytkownikowi wiadomość z informacją, że ta funkcja zostanie wkrótce udostępniona. Tak wygląda nasz agent internetowy, gdy użytkownik pyta o zakup online.

Podobnie jak w przypadku poprzedniej zmiany, którą wprowadziliśmy, aby umożliwić użytkownikom zapytanie o godziny pracy, zmiana ta będzie widoczna od razu, jeśli używasz ngrok, lub gdy tylko wdrożysz kod w GCP App Engine.

W następnej części użyjemy wskazówek inicjujących rozmowy i elementów z sugestiami, które pokierują rozmowę na właściwą drogę.

Kierowanie rozmowy za pomocą elementów

Wprowadziliśmy pewne zmiany w kodzie źródłowym i wdrożyliśmy zaktualizowanego agenta cyfrowego, ale nigdy nie spodziewaliśmy się, że użytkownicy będą wpisywać „zapytania o godziny otwarcia” lub „informacje-online-zakupy”, aby zapytać o firmę. Zaktualizujmy opcje początkowe rozmowy, tak aby po otwarciu rozmowy użytkownik nie tylko powitał miłą wiadomość powitalną, ale też informował o rozpoczęciu rozmowy.

Otwórz Business Communications Console i otwórz stronę Informacje o agencie agenta. Wcześniej zdefiniowaliśmy inicjacje rozmowy w przypadku „elementów”, „karty” i „karuzeli”. Te elementy nadal działają, ale nie mają już znaczenia dla naszej funkcji biznesowej. Możesz zostawić je w polu, aby kontynuować prezentowanie tych zaawansowanych funkcji, lub usunąć je, aby pracownik obsługi klienta ds. sprzedaży internetowej wyświetlał początki rozmów specjalnie dla firmy Bonjour Meal.

Utworzymy 2 nowe sposoby rozpoczynania rozmowy. W przypadku pierwszego z nich ustaw tekst na „Jakie są godziny pracy Twojej firmy?”, a w polu Dane wywołania zwrotnego wybierz wartość „zapytania o godziny pracy”. W przypadku drugiego wstępu do rozmowy ustaw tekst na „Czy mogę robić tutaj zakupy?”, a w polu Dane wywołania zwrotnego ustaw „online-shopping-info”.

Konfiguracja powinna wyglądać tak:

Podobnie jak w przypadku innych zmian wprowadzonych w konsoli Business Communications, rozpowszechnienie tych zmian może trochę potrwać, zanim będzie można je zobaczyć na urządzeniu mobilnym.

Teraz, gdy omówiliśmy już tematy do rozmowy, chcemy popracować nad tym, by po rozpoczęciu rozmowy wskazać użytkownikowi szczęśliwą ścieżkę. Po wysłaniu wiadomości można używać elementów kontekstowych, aby pokierować użytkownika do innych funkcji dostępnych dla agenta cyfrowego. Wyślemy więc wiadomość z sugestią, aby zrobił coś innego z agentem, za każdym razem, gdy użytkownik zapyta o godziny otwarcia lub zakupy online.

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

Ze zaktualizowanymi wstępami do rozmowy i strategicznym wykorzystaniem elementów z sugestiami przedstawiamy kilka zrzutów ekranu, które pokazują, jak będzie to wyglądać w przypadku użytkowników.

6. Gratulacje

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

Udało Ci się wdrożyć aplikację internetową do obsługi agenta cyfrowego w Business Messages, zmodyfikować agenta za pomocą Business Communications Console i wprowadzać zmiany w kodzie źródłowym, aby wpływać na wrażenia użytkowników korzystających z usług agenta cyfrowego.

Wiesz już, co trzeba zrobić, aby stworzyć interaktywną platformę Business Messages, i od tej pory nowe możliwości są bardzo ekscytujące. Możesz rozszerzyć agenta o obsługę wyszukiwania asortymentu lub wprowadzić koszyk na zakupy, aby śledzić, co może zainteresować użytkownika. Możesz użyć karuzeli, aby prezentować pozycje w menu i korzystać z sugestii, aby użytkownicy mogli wybierać te, które ich interesują.

Oto zwiastun, który może wyglądać tak:

Jak zadbać o atrakcyjną rozmowę z klientami?

Najlepsi agenci przekazują użytkownikom informacje kontekstowe, a jednocześnie przekazują mu różne funkcje w ramach rozmowy, dzięki czemu mogą nawiązać kontakt z firmą i wchodzić z nią w interakcję w taki sam sposób jak przez telefon lub nawet osobiście. Zastanów się, jak podane niżej tematy mogą okazać się pomocne w rozmowie z firmą, z którą współpracujesz.

Przedstaw kontekst i określ oczekiwania.

Kontekst może obejmować wszystko – od sprecyzowania sposobu, w jaki możesz pomóc użytkownikowi, po przedstawienie agenta internetowego z osobą, z którą użytkownik się utożsamia. Agenty, którzy dokonali sukcesu w Business Messages, używają awatara reprezentacyjnego, aby pokazać użytkownikowi, z kim rozmawiają.

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

Udostępnianie funkcji użytkownikowi

Konsumenci przez cały czas kontaktują się z firmami. Business Messages obsługuje złożone interakcje użytkowników – od zapytań, takich jak sprawdzanie stanu zamówienia, po sprawdzenie, czy jest w magazynie. Wielu użytkowników w dalszym ciągu dzwoni do firm, aby uzyskać odpowiedzi na swoje pytania, nawet jeśli odpowiedzi na te pytania są dostępne w witrynie danej firmy. W efekcie firmy muszą zainwestować więcej zasobów, aby obsłużyć liczbę telefonów, zwłaszcza w okresie świątecznym.

Utrzymywanie zaangażowania użytkowników

Podawaj punkty kontaktu z klientem, aby utrzymać jego zaangażowanie. Między wiadomościami możesz wywoływać wskaźniki pisania, aby poinformować użytkownika, że przetwarzasz odpowiedź dla niego.

Zaawansowane funkcje, takie jak wskaźniki pisania, elementy z sugestią, karty informacyjne i karuzele, pozwalają prowadzić użytkownika przez szczęśliwą ścieżkę i pomóc mu w wykonywaniu określonych zadań, np. zamawianiu produktów z menu. Celem jest zmniejszenie liczby połączeń telefonicznych z firmą.

Bardzo ważne jest, aby rozmowa miała odpowiednie funkcje. Użytkownicy kontaktujący się z firmą przez wiadomości spodziewają się szybkich odpowiedzi na pytania. W nieidealnej sytuacji pracownik obsługi klienta internetowego nie może ułatwić rozmowy, co może negatywnie wpłynąć na wrażenia użytkownika. Na szczęście istnieją sposoby na obejście tego problemu, na przykład przeniesienie rozmowy do pracownika obsługi klienta. Omówimy je na kolejnym ćwiczeniu z programowania.

Co dalej?

Gdy wszystko będzie gotowe, zapoznaj się z poniższymi tematami, aby dowiedzieć się więcej o bardziej złożonych interakcjach, które można nawiązywać w Business Messages

• Życie agenta: tworzenie i wprowadzanie na rynek
• Wymagania i wytyczne
• Wytyczne dotyczące logo
• Wszystkie przewodniki

Dokumentacja

• SuggestedReply
• Dokument z informacjami o wiadomościach Business Messages
• Definicja pliku JSON dla RichCard