Kup online z odbiorem w sklepie: posiłek bonjour – część 2 – tworzenie koszyka na zakupy

1. Wprowadzenie

53003251caaf2be5.png 8826bd8cb0c0f1c7.png

Ostatnia aktualizacja: 30.10.2020

Tworzenie koszyka na zakupy w Business Messages

To drugie ćwiczenia z programowania z tej serii, które mają na celu umożliwienie użytkownikom skorzystania z oferty odbioru online z odbiorem w sklepie. Na wielu ścieżkach e-commerce koszyk na zakupy ma kluczowe znaczenie dla przekształcenia użytkowników w płacących klientów. Dzięki koszykowi możesz też lepiej poznać swoich klientów i proponować im inne produkty, którymi mogą być zainteresowani. W tym ćwiczeniu w programie skupimy się na tworzeniu obsługi koszyka na zakupy i wdrażaniu aplikacji w Google App Engine.

Jak stworzyć dobry koszyk na zakupy?

Koszyki to podstawa udanych zakupów online. Okazuje się, że funkcja Business Messages nie tylko pozwala prowadzić z potencjalnymi klientami pytania i odpowiedzi dotyczące produktu, ale także ułatwia dokonywanie płatności w trakcie rozmowy.

9d17537b980d0e62.png

Poza dobrym koszykiem na zakupy użytkownicy mogą też przeglądać produkty według kategorii i polecać inne produkty, które mogą ich zainteresować. Po dodaniu kolejnych pozycji do koszyka użytkownik może przejrzeć cały koszyk i usunąć produkty lub dodać je przed dokonaniem płatności.

Co utworzysz

W tej części szkolenia z programowania poszerzysz działanie agenta cyfrowego utworzonego w części 1 dla fikcyjnej firmy Bonjour Meal, umożliwiając użytkownikom przeglądanie katalogu produktów i dodawanie ich do koszyka.

W ramach tego ćwiczenia w Codelabs Twoja aplikacja

  • Wyświetl katalog pytań w Business Messages
  • Sugeruj produkty, które mogą zainteresować użytkowników
  • Przejrzyj zawartość koszyka i utwórz podsumowanie ceny

ab2fb6a4ed33a129.png

Czego się nauczysz

  • Wdrażanie aplikacji internetowej w App Engine w Google Cloud Platform
  • Jak korzystać z mechanizmu trwałego przechowywania danych do zapisywania stanu koszyka

To ćwiczenia w programie skupiają się na przedłużeniu działania agenta cyfrowego z części 1 tej serii.

Czego potrzebujesz

2. Przygotowanie

W tym ćwiczeniu w Codelabs zakładamy, że masz już utworzonego pierwszego agenta i masz ukończone części 1 tego ćwiczenia. W związku z tym nie będziemy omawiać podstaw włączania interfejsów API Business Messages i komunikacji biznesowej, tworzenia kluczy konta usługi, wdrażania aplikacji ani konfigurowania webhooka w konsoli Business Communications. Sklonujemy przykładową aplikację, aby upewnić się, że jest ona zgodna z nadchodzącymi treściami. Włączymy też interfejs API Datastore w Google Cloud Platform, aby umożliwić zachowanie danych związanych z koszykiem na zakupy.

Klonuję aplikację z GitHuba

W terminalu skopiuj przykładowy bot 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 danych logowania JSON utworzony dla konta usługi do folderu zasobów przykładu i zmień nazwę danych logowania na „bm-agent-service-account-credentials.json”.

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

Włączanie interfejsu Google Datastore API

W części 1 tego ćwiczenia z programowania udało Ci się włączyć interfejsy Business Messages API, Business Communication API i Cloud Build API.

W ramach tego ćwiczenia w programie będziemy pracować z Google Datastore, więc musimy też włączyć ten interfejs API:

  1. Otwórz interfejs Google Datastore API w konsoli Google Cloud.
  2. Sprawdź, czy pracujesz z właściwym projektem GCP.
  3. Kliknij Włącz.

Wdrażanie przykładowej aplikacji

W terminalu przejdź do katalogu kroku 2 przykładu.

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

$ gcloud config set project PROJECT_ID*
$ 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 właśnie kod zawiera aplikację internetową z webhookiem do odbierania wiadomości z Business Messages. Zawiera on wszystko, co zrobiliśmy w części 1 tych ćwiczeń z programowania. Skonfiguruj webhooka, jeśli jeszcze nie masz tego za sobą.

Aplikacja odpowiada na proste pytania, np. użytkownika pyta o godziny otwarcia sklepu Bonjour Meal. Zalecamy przetestowanie tej funkcji na urządzeniu mobilnym za pomocą testowych adresów URL, które możesz pobrać z informacji o agencie w konsoli Business Communications. Testowe adresy URL uruchomią usługę Business Messages na urządzeniu mobilnym i będziesz mieć możliwość interakcji z agentem.

3. Katalog produktów

System asortymentowy

W większości przypadków możesz integrować się bezpośrednio z zasobami reklamowymi marki za pomocą wewnętrznego interfejsu API. Innym przykładem może być powielanie stron internetowych lub tworzenie własnego systemu śledzenia zasobów reklamowych. Nie skupiamy się na tworzeniu systemu zasobów reklamowych. użyjemy prostego statycznego pliku zawierającego obrazy i informacje o produktach dla naszego agenta. W tej sekcji pobierzemy informacje z tego statycznego pliku, wyświetlimy je w rozmowie i pozwolimy użytkownikowi przeglądać produkty, które można dodać do koszyka.

Statyczny plik asortymentu wygląda tak:

bonjourmeal-codelab/step-2/resources/inventory.json

{

    "food": [
        {
            "id":0,
            "name": "Ham and cheese sandwich",
            "price": "6.99",
            "image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/ham-and-cheese.png",
            "remaining": 8
        },
        {
            "id":1,
            "name": "Chicken veggie wrap",
            "price": "9.99",
            "image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/chicken-veggie-wrap.png",
            "remaining": 2
        },
        {
            "id":2,
            "name": "Assorted cheese plate",
            "price": "7.99",
            "image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/assorted-cheese-plate.png",
            "remaining": 6
        },
        {
            "id":3,
            "name": "Apple walnut salad",
            "price": "12.99",
            "image_url": "https://storage.googleapis.com/bonjour-rail.appspot.com/apple-walnut-salad.png",
            "remaining": 1
        }
    ]
}

Pobierzmy aplikację w Pythonie, która odczyta ten plik.

Korzystanie z naszych zasobów reklamowych

Zasoby reklamowe to statyczny plik o nazwie „inventory.json”. znajduje się w katalogu ./resources. Musimy dodać do pliku views.py logikę w języku Python, aby odczytywać zawartość pliku JSON, a następnie wyświetlać go w rozmowie. Utwórzmy funkcję, która odczytuje dane z pliku JSON i zwraca listę dostępnych produktów.

Definicję tej funkcji można umieścić w dowolnym miejscu w pliku views.py.

bonjourmeal-codelab/step-2/bopis/views.py

...
def get_inventory_data():
        f = open(INVENTORY_FILE)
        inventory = json.load(f)
        return inventory
...

Powinno to zapewnić nam wszystko, co jest potrzebne do odczytania danych z zasobów reklamowych. Teraz musimy znaleźć sposób na uwzględnienie tych informacji w rozmowie.

Prezentowanie katalogu produktów

Aby ułatwić Ci naukę w programie, stworzyliśmy ogólny katalog produktów, w którym wszystkie elementy zasobów reklamowych wyświetlają się w rozmowie z Business Messages za pomocą pojedynczej karuzeli kart informacyjnych.

Aby wyświetlić katalog produktów, utworzymy sugerowaną odpowiedź z tekstem „Pokaż menu”. i wywołanie zwrotne „show-product-catalog”. Gdy użytkownik kliknie sugerowaną odpowiedź, a aplikacja internetowa otrzyma dane wywołania zwrotnego, wyślemy karuzelę kart informacyjnych. Dodajmy nową stałą dla sugerowanej odpowiedzi na górze strony views.py.

bonjourmeal-codelab/step-2/bopis/views.py

...
CMD_SHOW_PRODUCT_CATALOG = 'show-product-catalog'
...

Następnie analizujemy wiadomość i przekierujemy ją do nowej funkcji, która wysyła karuzelę kart informacyjnych zawierającą katalog produktów. Najpierw rozszerz funkcję route_message, aby wywołać funkcję „send_product_catalog” po kliknięciu sugerowanej odpowiedzi, określimy funkcję.

W tym fragmencie kodu dodaj dodatkowy warunek do instrukcji if w funkcji route_message, aby sprawdzić, czy normalized_message jest równa stałej zdefiniowanej wcześniej, CMD_SHOW_PRODUCT_CATALOG.

bonjourmeal-codelab/step-2/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)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    elif normalized_message == CMD_SHOW_PRODUCT_CATALOG:
        send_product_catalog(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Pamiętaj, aby dokończyć proces i zdefiniować właściwość send_product_catalog. Funkcja send_product_catalog wywołuje funkcję get_menu_carousel,, która generuje karuzelę kart informacyjnych z pliku asortymentu, który czytaliśmy wcześniej.

Definicje funkcji można umieścić w dowolnym miejscu w pliku views.py. Uwaga: ten fragment zawiera dwie nowe stałe, które należy dodać na początku pliku.

bonjourmeal-codelab/step-2/bopis/views.py

...

CMD_ADD_ITEM = 'add-item'
CMD_SHOW_CART = 'show-cart'

...

def get_menu_carousel():
    """Creates a sample carousel rich card.

    Returns:
       A :obj: A BusinessMessagesCarouselCard object with three cards.
    """

    inventory = get_inventory_data()

    card_content = []

    for item in inventory['food']:
        card_content.append(BusinessMessagesCardContent(
            title=item['name'],
            description=item['price'],
            suggestions=[
                BusinessMessagesSuggestion(
                    reply=BusinessMessagesSuggestedReply(
                        text='Add item',
                        postbackData='{'+f'"action":"{CMD_ADD_ITEM}","item_name":"{item["id"]}"'+'}'))

                ],
            media=BusinessMessagesMedia(
                height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                contentInfo=BusinessMessagesContentInfo(
                    fileUrl=item['image_url'],
                    forceRefresh=False))))

    return BusinessMessagesCarouselCard(
        cardContents=card_content,
        cardWidth=BusinessMessagesCarouselCard.CardWidthValueValuesEnum.MEDIUM)

def send_product_catalog(conversation_id):
    """Sends the product catalog to the conversation_id.

    Args:
        conversation_id (str): The unique id for this user and agent.
    """
    rich_card = BusinessMessagesRichCard(carouselCard=get_menu_carousel())

    fallback_text = ''

    # Construct a fallback text for devices that do not support carousels
    for card_content in rich_card.carouselCard.cardContents:
        fallback_text += (card_content.title + '\n\n' + card_content.description
                          + '\n\n' + card_content.media.contentInfo.fileUrl
                          + '\n---------------------------------------------\n\n')

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        fallback=fallback_text,
        suggestions=[
        BusinessMessagesSuggestion(
            reply=BusinessMessagesSuggestedReply(
                text='See my cart',
                postbackData=CMD_SHOW_CART)
            ),
        BusinessMessagesSuggestion(
            reply=BusinessMessagesSuggestedReply(
                text='See the menu',
                postbackData=CMD_SHOW_PRODUCT_CATALOG)
            ),
        ]
        )

    send_message(message_obj, conversation_id)
...

Jeśli sprawdzisz tworzenie elementów karuzeli, utworzymy też wystąpienie klasy BusinessMessagesSuggestion. Każda sugestia reprezentuje wybór produktu z karuzeli przez użytkownika. Gdy użytkownik kliknie sugerowaną odpowiedź, Business Messages wyśle do Twojego webhooka dane wywołanie zwrotne zawierające dane w formacie JSON opisującym dany element i czynność, które użytkownik chce wykonać (dodać do koszyka lub z niego usunąć). W następnej sekcji przeanalizujemy wiadomości, aby na ich podstawie dodać produkt do koszyka.

Po wprowadzeniu tych zmian wdróżmy aplikację internetową w Google App Engine i wypróbujmy, jak działa.

$ gcloud app deploy

Gdy na urządzeniu mobilnym wczytasz platformę konwersacyjną, wyślij wiadomość „show-product-catalog” Powinna pojawić się karuzela produktów podobna do tej.

4639da46bcc5230c.png

Gdy klikniesz Dodaj element, nic się nie wydarzy poza tym, że agent powtórzy dane wywołania zwrotnego z sugerowanej odpowiedzi. W następnej sekcji wykorzystamy katalog produktów i użyjemy go do utworzenia koszyka na zakupy, do którego zostanie dodany produkt.

Utworzony przez Ciebie katalog produktów można rozszerzyć na różne sposoby. Możesz mieć różne menu z napojami lub dania wegetariańskie. Dzięki karuzelom lub elementom z sugestią możesz bardzo szybko przejść do bardziej szczegółowego widoku opcji menu i znaleźć zestaw produktów, których szukają. Jako rozszerzenie tego ćwiczenia w Codelabs możesz rozszerzyć system katalogu produktów, tak aby użytkownik mógł przeglądać w menu napoje niezależnie od jedzenia, a nawet określić opcje wegetariańskie.

4. Koszyk na zakupy

W tej części ćwiczenia z programowania rozszerzamy funkcje koszyka na zakupy na podstawie poprzedniej sekcji, co pozwala nam przeglądać dostępne produkty.

Kluczowa funkcja koszyka na zakupy pozwala użytkownikom dodawać i usuwać produkty z koszyka, śledzić liczbę produktów w koszyku i sprawdzać znajdujące się w nim produkty.

Śledzenie stanu koszyka na zakupy oznacza, że musimy zachowywać dane w aplikacji internetowej. Aby ułatwić eksperymentowanie i wdrażanie, do przechowywania danych używamy Google Datastore w Google Cloud Platform. Identyfikator rozmowy między użytkownikiem a firmą pozostaje bez zmian, więc możemy go wykorzystać do powiązania użytkowników z produktami koszyka na zakupy.

Zacznijmy od połączenia się z Google Datastore i zachowania identyfikatora rozmowy, gdy go znajdziemy.

Łączenie z Datastore

Nawiązujemy połączenie z Google Datastore za każdym razem, gdy nastąpi interakcja z koszykiem, na przykład gdy użytkownik doda lub usunie produkt. Więcej informacji o korzystaniu z tej biblioteki klienta do interakcji z Google Datastore znajdziesz w oficjalnej dokumentacji.

Poniższy fragment kodu definiuje funkcję aktualizującą koszyk na zakupy. Funkcja przyjmuje te dane wejściowe: conversation_id i message. message zawiera plik JSON opisujący działanie, które chce wykonać użytkownik. Jest on już wbudowany w karuzeli wyświetlającą katalog produktów. Funkcja tworzy klienta Google Datastore i natychmiast pobiera encję ShoppingCart, gdzie klucz to identyfikator wątku.

Skopiuj poniższą funkcję do pliku views.py. Tę funkcję omówimy w nadchodzącej sekcji.

bonjourmeal-codelab/step-2/bopis/views.py

from google.oauth2 import service_account
from google.cloud import datastore

def update_shopping_cart(conversation_id, message):
        credentials = service_account.Credentials.from_service_account_file(
        SERVICE_ACCOUNT_LOCATION)

        client = datastore.Client(credentials=credentials)
        key = client.key('ShoppingCart', conversation_id)
        entity = datastore.Entity(key=key)
        result = client.get(key)
        
        # TODO: Add logic to add and remove items from cart
        
        entity.update(result)
        client.put(entity)

Rozszerzmy tę funkcję, aby dodać produkt do koszyka.

Dodawanie produktów do koszyka

Gdy użytkownik kliknie sugerowane działanie Dodaj element w karuzeli produktów, postbackData będzie zawierać plik JSON opisujący działanie, które użytkownik chce wykonać. Słownik JSON ma 2 klucze: „action” i „item_name” a słownik JSON zostanie wysłany do webhooka. Parametr „item_name” to unikalny identyfikator powiązany z elementem w pliku Inventory.json.

Gdy otrzymamy polecenie koszyka i jego zawartość przeanalizowaną z wiadomości, możemy napisać instrukcje warunkowe, aby dodać produkt. W przypadku skrajnych scenariuszy warto zastanowić się nad tym, czy Datastore nigdy nie widział identyfikatora rozmowy lub czy koszyk na zakupy otrzymuje ten element po raz pierwszy. Poniżej znajdziesz rozszerzenie zdefiniowanej powyżej funkcji update_shopping_cart. Ta zmiana dodaje do koszyka produkt, który jest zachowywany w Google Datastore.

Poniższy fragment jest rozszerzeniem poprzedniej funkcji dodanej do pliku views.py. Możesz dodać różnicę lub skopiować fragment kodu i zastąpić istniejącą wersję funkcji update_shopping_cart.

bonjourmeal-codelab/step-2bopis/views.py

def update_shopping_cart(conversation_id, message):
    credentials = service_account.Credentials.from_service_account_file(
      SERVICE_ACCOUNT_LOCATION)
    inventory = get_inventory_data()

    cart_request = json.loads(message)
    cart_cmd = cart_request["action"]
    cart_item = cart_request["item_name"]

    item_name = inventory['food'][int(cart_item)]['name']

    client = datastore.Client(credentials=credentials)
    key = client.key('ShoppingCart', conversation_id)
    entity = datastore.Entity(key=key)
    result = client.get(key)

    if result is None:
        if cart_cmd == CMD_ADD_ITEM:
            entity.update({
                item_name: 1
            })

    else:
        if cart_cmd == CMD_ADD_ITEM:
            if result.get(item_name) is None:
                result[item_name] = 1
            else:
                result[item_name] = result[item_name] + 1

        entity.update(result)
    client.put(entity)

Ta funkcja zostanie później rozszerzona, aby obsługiwać scenariusz, w którym cart_cmd zawiera ciąg „del-item” zdefiniowane w: CMD_DEL_ITEM.

Jak połączyć oba te elementy

Pamiętaj o dodaniu funkcji hydraulicznych do funkcji route_message, aby w przypadku otrzymania komunikatu z prośbą o dodanie produktu do koszyka wywoływana była funkcja update_shopping_cart. Musisz też zdefiniować stałą dla dodawania elementów zgodnie z konwencją użytą w całych ćwiczeniach z programowania.

bonjourmeal-codelab/step-2bopis/views.py

...

CMD_DEL_ITEM = 'del-item'

...

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)
    elif normalized_message == CMD_SHOW_PRODUCT_CATEGORY:
        send_product_catalog(conversation_id)
    elif CMD_ADD_ITEM in normalized_message or CMD_DEL_ITEM in normalized_message:
       update_shopping_cart(conversation_id, message)
    else:
        echo_message(message, conversation_id)

...

Na razie możemy dodawać produkty do koszyka. Po wdrożeniu zmian w Google App Engine powinny być widoczne w panelu Google Datastore w konsoli GCP. Na zrzucie ekranu poniżej konsoli Google Datastore widać pojedynczy element, którego nazwa pochodzi od identyfikatora rozmowy, po której następuje kilka relacji z pozycją asortymentu i liczbą produktów w koszyku.

619dc18a8136ea69.png

W następnej sekcji utworzymy sposób wyświetlania produktów w koszyku na zakupy. Mechanizm sprawdzania koszyka na zakupy powinien wyświetlać wszystkie produkty w koszyku, ich liczbę i opcję usunięcia z koszyka.

Sprawdzanie produktów w koszyku

Umieszczenie elementów w koszyku to jedyny sposób, aby poznać stan koszyka i dowiedzieć się, które produkty możemy usunąć.

Najpierw wyślijmy przyjaźnią wiadomość, np. „Oto Twój koszyk na zakupy:”, a następnie kolejną wiadomość zawierającą karuzelę kart informacyjnych z powiązanymi sugerowanymi odpowiedziami na „Usuń jeden”. lub „Dodaj”. Karuzela kart informacyjnych powinna dodatkowo zawierać liczbę produktów zapisanych w koszyku.

O czym należy pamiętać, zanim przejdziemy do pisania funkcji: jeśli w koszyku jest tylko jeden typ produktu, nie możemy wyświetlić go w formie karuzeli. Karuzele kart informacyjnych muszą zawierać co najmniej 2 karty. Jeśli w koszyku nie ma żadnych produktów, chcemy wyświetlić prosty komunikat, że koszyk jest pusty.

Mając to na uwadze, zdefiniujmy funkcję o nazwie send_shopping_cart. Ta funkcja łączy się z Google Datastore i wysyła żądanie encji ShoppingCart na podstawie identyfikatora rozmowy. Następnie wywołamy funkcję get_inventory_data i użyjemy karuzeli kart informacyjnych, by zgłosić stan koszyka. Musimy też uzyskać identyfikator produktu według nazwy i zadeklarować funkcję, która sprawdzi w Google Datastore, jaka jest jego wartość. W trakcie tworzenia karuzeli możemy powiązać sugerowane odpowiedzi, aby usunąć elementy lub dodać elementy według identyfikatora produktu. Fragment kodu poniżej wykonuje wszystkie te operacje. Skopiuj kod w dowolnym miejscu do pliku views.py.

bonjourmeal-codelab/step-2/bopis/views.py

...
def get_id_by_product_name(product_name):
  inventory = get_inventory_data()
  for item in inventory['food']:
    if item['name'] == product_name:
      return int(item['id'])
  return False


def send_shopping_cart(conversation_id):
  credentials = service_account.Credentials.from_service_account_file(
      SERVICE_ACCOUNT_LOCATION)

  # Retrieve the inventory data
  inventory = get_inventory_data()

  # Pull the data from Google Datastore
  client = datastore.Client(credentials=credentials)
  key = client.key('ShoppingCart', conversation_id)
  result = client.get(key)

  shopping_cart_suggestions = [
      BusinessMessagesSuggestion(
          reply=BusinessMessagesSuggestedReply(
              text='See total price', postbackData='show-cart-price')),
      BusinessMessagesSuggestion(
          reply=BusinessMessagesSuggestedReply(
              text='Empty the cart', postbackData='empty-cart')),
      BusinessMessagesSuggestion(
          reply=BusinessMessagesSuggestedReply(
              text='See the menu', postbackData=CMD_SHOW_PRODUCT_CATALOG)),
  ]

  if result is None or len(result.items()) == 0:
    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text='There are no items in your shopping cart.',
        suggestions=shopping_cart_suggestions)

    send_message(message_obj, conversation_id)
  elif len(result.items()) == 1:

    for product_name, quantity in result.items():
      product_id = get_id_by_product_name(product_name)

      fallback_text = ('You have one type of item in the shopping cart')

      rich_card = BusinessMessagesRichCard(
          standaloneCard=BusinessMessagesStandaloneCard(
              cardContent=BusinessMessagesCardContent(
                  title=product_name,
                  description=f'{quantity} in cart.',
                  suggestions=[
                      BusinessMessagesSuggestion(
                          reply=BusinessMessagesSuggestedReply(
                              text='Remove one',
                              postbackData='{'+f'"action":"{CMD_DEL_ITEM}","item_name":"{product_id}"'+'}'))
                  ],
                  media=BusinessMessagesMedia(
                      height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                      contentInfo=BusinessMessagesContentInfo(
                          fileUrl=inventory['food'][product_id]
                          ['image_url'],
                          forceRefresh=False)))))

      message_obj = BusinessMessagesMessage(
          messageId=str(uuid.uuid4().int),
          representative=BOT_REPRESENTATIVE,
          richCard=rich_card,
          suggestions=shopping_cart_suggestions,
          fallback=fallback_text)

      send_message(message_obj, conversation_id)
  else:
    cart_carousel_items = []

    # Iterate through the cart and generate a carousel of items
    for product_name, quantity in result.items():
      product_id = get_id_by_product_name(product_name)

      cart_carousel_items.append(
          BusinessMessagesCardContent(
              title=product_name,
              description=f'{quantity} in cart.',
              suggestions=[
                  BusinessMessagesSuggestion(
                      reply=BusinessMessagesSuggestedReply(
                          text='Remove one',
                          postbackData='{'+f'"action":"{CMD_DEL_ITEM}","item_name":"{product_id}"'+'}'))
              ],
              media=BusinessMessagesMedia(
                  height=BusinessMessagesMedia.HeightValueValuesEnum.MEDIUM,
                  contentInfo=BusinessMessagesContentInfo(
                      fileUrl=inventory['food'][product_id]
                      ['image_url'],
                      forceRefresh=False))))

    rich_card = BusinessMessagesRichCard(
        carouselCard=BusinessMessagesCarouselCard(
            cardContents=cart_carousel_items,
            cardWidth=BusinessMessagesCarouselCard.CardWidthValueValuesEnum
            .MEDIUM))

    fallback_text = ''

    # Construct a fallback text for devices that do not support carousels
    for card_content in rich_card.carouselCard.cardContents:
      fallback_text += (
          card_content.title + '\n\n' + card_content.description + '\n\n' +
          card_content.media.contentInfo.fileUrl +
          '\n---------------------------------------------\n\n')

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        richCard=rich_card,
        suggestions=shopping_cart_suggestions,
        fallback=fallback_text,
    )

    send_message(message_obj, conversation_id)

...

Upewnij się, że na początku strony views.py jest już zdefiniowany CMD_SHOW_CART, i wywołaj send_shopping_cart, jeśli użytkownik wyśle wiadomość zawierającą słowo „show-cart”.

bonjourmeal-codelab/step-2/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)
    elif normalized_message == CMD_ONLINE_SHOPPING_INQUIRY:
        send_online_shopping_info_message(conversation_id)
    elif normalized_message == CMD_SHOW_PRODUCT_CATEGORY:
        send_product_catalog(conversation_id)
    elif CMD_ADD_ITEM in normalized_message or CMD_DEL_ITEM in normalized_message:
        update_shopping_cart(conversation_id, message)
    elif normalized_message == CMD_SHOW_CART:
        send_shopping_cart(conversation_id)
    else:
        echo_message(message, conversation_id)
...

34801776a97056ac.png

Zgodnie z logiką, którą wprowadziliśmy w funkcji send_shopping_cart, po wpisaniu „show-cart” pojawi się komunikat o braku w koszyku, karta informacyjna z jednym produktem w koszyku lub karuzela kart z kilkoma produktami. Mamy też 3 sugerowane odpowiedzi: „Zobacz łączną cenę”, „Opróżnij koszyk” i „Zobacz menu”.

Spróbuj wdrożyć powyższe zmiany w kodzie, aby sprawdzić, czy koszyk na zakupy śledzi dodane przez Ciebie produkty i czy można go wyświetlić z poziomu interfejsu rozmowy, jak pokazano na zrzutach ekranu powyżej. Możesz wdrożyć zmiany, uruchamiając to polecenie z katalogu kroku 2, w którym dodajesz zmiany.

$ gcloud app deploy

Tworzymy model „Zobacz łączną cenę”, w następnej sekcji po utworzeniu funkcji usuwania produktu z koszyka. Funkcja get_cart_price będzie działać podobnie jak funkcja „Zobacz koszyk na zakupy”. w taki sposób, że będzie porównywać dane w Datastore z plikiem Inventory.json w celu wygenerowania łącznej ceny dla koszyka. Przyda się to w następnej części ćwiczenia z programowania, w którym przeprowadzamy integrację z płatnościami.

Usuwanie elementów z koszyka

Na koniec możemy zakończyć działanie koszyka na zakupy, wprowadzając funkcję usuwania koszyka. Zastąp istniejącą funkcję update_shopping_cart poniższym fragmentem kodu.

bonjourmeal-codelab/step-2/ bopis/views.py

def update_shopping_cart(conversation_id, message):
    credentials = service_account.Credentials.from_service_account_file(
      SERVICE_ACCOUNT_LOCATION)
    inventory = get_inventory_data()

    cart_request = json.loads(message)
    cart_cmd = cart_request["action"]
    cart_item = cart_request["item_name"]

    item_name = inventory['food'][int(cart_item)]['name']


    client = datastore.Client(credentials=credentials)
    key = client.key('ShoppingCart', conversation_id)
    entity = datastore.Entity(key=key)
    result = client.get(key)

    if result is None:
        if cart_cmd == CMD_ADD_ITEM:
            entity.update({
                item_name: 1
            })
        elif cart_cmd == CMD_DEL_ITEM:
            # The user is trying to delete an item from an empty cart. Pass and skip
            pass

    else:
        if cart_cmd == CMD_ADD_ITEM:
            if result.get(item_name) is None:
                result[item_name] = 1
            else:
                result[item_name] = result[item_name] + 1

        elif cart_cmd == CMD_DEL_ITEM:
            if result.get(item_name) is None:
                # The user is trying to remove an item that's no in the shopping cart. Pass and skip
                pass
            elif result[item_name] - 1 > 0:
                result[item_name] = result[item_name] - 1
            else:
                del result[item_name]

        entity.update(result)
    client.put(entity)

Wysyłanie wiadomości z potwierdzeniem

Gdy użytkownik doda produkt do koszyka, musisz wysłać mu wiadomość z potwierdzeniem, że jego działanie zostało przez Ciebie przetworzone. W ten sposób nie tylko określasz oczekiwania, ale też podtrzymujesz rozmowę.

Rozszerzmy funkcję update_shopping_cart tak, aby do identyfikatora rozmowy wysyłała wiadomość z informacją o dodaniu lub usunięciu produktu oraz o możliwości sprawdzenia koszyka lub ponownego wyświetlenia menu.

bonjourmeal-codelab/step-2/bopis/views.py

def update_shopping_cart(conversation_id, message):

     # No changes to the function, except appending the following logic
     ...
   
    if cart_cmd == CMD_ADD_ITEM:
        message = 'Great! You\'ve added an item to the cart.'
    else:
        message = 'You\'ve removed an item from the cart.'

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        text=message,
        suggestions=[
            BusinessMessagesSuggestion(
            reply=BusinessMessagesSuggestedReply(
                text='Review shopping cart',
                postbackData=CMD_SHOW_CART)
            ),
            BusinessMessagesSuggestion(
            reply=BusinessMessagesSuggestedReply(
                text='See menu again',
                postbackData=CMD_SHOW_PRODUCT_CATALOG)
            ),
            ])
    send_message(message_obj, conversation_id)

905a1f3d89893ba0.png

To powinno załatwić sprawę! W pełni funkcjonalna strona koszyka na zakupy, która pozwala użytkownikowi dodawać i usuwać produkty oraz wystawiać opinie o nich.

Jeśli w tym momencie chcesz wyświetlić funkcję koszyka na zakupy w rozmowie z Business Messages, wdróż aplikację, aby wejść w interakcję z agentem. Aby to zrobić, uruchom to polecenie w katalogu kroku 2.

$ gcloud app deploy

5. Przygotowanie do płatności

W ramach przygotowań do integracji z firmą obsługującą płatności w następnej części serii musimy znaleźć sposób na uzyskanie ceny koszyka. Stwórzmy funkcję, która pobiera cenę, odwołując się do danych koszyka na zakupy w Google Datastore, pobierając cenę każdego produktu z asortymentu i mnożąc cenę przez liczbę produktów w koszyku.

bonjourmeal-codelab/step-2/bopis/views.py

...
def get_cart_price(conversation_id):
    # Pull the data from Google Datastore
    credentials = service_account.Credentials.from_service_account_file(
    SERVICE_ACCOUNT_LOCATION)
    client = datastore.Client(credentials=credentials)
    key = client.key('ShoppingCart', conversation_id)
    entity = datastore.Entity(key=key)
    result = client.get(key)

    # Retrieve the inventory data
    inventory = get_inventory_data()
   
    # Start off with a total of 0 before adding up the total
    total_price = 0

    if len(result.items()) != 0:
      for product_name, quantity in result.items():
        total_price = total_price + float(
            inventory['food'][get_id_by_product_name(product_name)]['price']) * int(quantity)

    return total_price

...

Możemy też skorzystać z tej funkcji i wysłać wiadomość do użytkownika.

bonjourmeal-codelab/step-2/bopis/views.py

...

def send_shopping_cart_total_price(conversation_id):
    cart_price = get_cart_price(conversation_id)

    message_obj = BusinessMessagesMessage(
        messageId=str(uuid.uuid4().int),
        representative=BOT_REPRESENTATIVE,
        suggestions=[],
        text=f'Your cart\'s total price is ${cart_price}.')

    send_message(message_obj, conversation_id)
...

Aby wszystko połączyć, zaktualizujmy funkcję route_message i stałą, która aktywuje powyższą logikę.

bonjourmeal-codelab/step-2/bopis/views.py

...
CMD_GET_CART_PRICE = 'show-cart-price'
...
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)
    elif normalized_message == CMD_SHOW_PRODUCT_CATEGORY:
        send_product_catalog(conversation_id)
    elif CMD_ADD_ITEM in normalized_message or CMD_DEL_ITEM in normalized_message:
        update_shopping_cart(conversation_id, message)
    elif normalized_message == CMD_SHOW_CART:
        send_shopping_cart(conversation_id)
    elif normalized_message == CMD_GET_CART_PRICE:
        send_shopping_cart_total_price(conversation_id)
    else:
        echo_message(message, conversation_id)
...

Oto kilka zrzutów ekranu, które pokazują, co umożliwia powyższa logika:

8feacf94ed0ac6c4.png

W następnej części lekcji, gdy będziemy gotowi do integracji z firmą obsługującą płatności, wywołamy funkcję get_cart_price, aby przekazać dane do firmy obsługującej płatności i rozpocząć proces płatności.

Jeszcze raz możesz wypróbować tę funkcję koszyka na zakupy w rozmowie Business Messages, wdrażając aplikację i wchodząc w interakcję z agentem.

$ gcloud app deploy

6. Gratulacje

Gratulujemy. Udało Ci się utworzyć koszyk na zakupy w Business Messages.

Nie omówiliśmy jeszcze funkcji opróżniania całego koszyka. Jeśli chcesz, spróbuj rozszerzyć aplikację, aby wypełnić koszyk funkcji. Rozwiązanie jest dostępne w kroku 3 sklonowanego kodu źródłowego.

W przyszłej sekcji zintegrujemy ją z zewnętrzną firmą obsługującą płatności, aby umożliwić użytkownikom realizowanie transakcji płatniczych na rzecz Twojej marki.

Jak stworzyć dobry koszyk na zakupy?

Wygoda korzystania z koszyka w trakcie rozmowy nie różni się od tego w aplikacji mobilnej czy w sklepie stacjonarnym. Możliwość dodawania i usuwania elementów oraz obliczania ceny koszyka to tylko kilka przykładów, które omówiliśmy w tym ćwiczeniu z programowania. Coś, co różni się od rzeczywistego koszyka na zakupy, to możliwość sprawdzenia ceny wszystkich produktów w koszyku w dowolnym momencie podczas dodawania lub usuwania produktów. Tego rodzaju funkcje o wysokiej wartości sprawią, że Twój konwersacyjny proces zakupowy będzie się wyróżniał.

Co dalej?

Gdy zdecydujesz się na korzystanie z funkcji Business Messages, zapoznaj się z tymi tematami, aby dowiedzieć się więcej o bardziej złożonych interakcjach, które można wykonywać w Business Messages:

Dokumentacja