Купите онлайн-самовывоз в магазине: Bonjour Meal. Часть 1. Начало работы

1. Введение

637766505206e0a1.pngc604dca3ca211399.png

Последнее обновление: 11 мая 2022 г.

Добро пожаловать в Деловые Сообщения!

Эта лаборатория представляет собой введение в интеграцию с Business Messages , которая позволяет клиентам связываться с компаниями, которыми вы управляете, через Google Поиск и Карты. Возможно, вы представляете компанию, желающую напрямую интегрироваться с Business Messages, или, возможно, вы работаете в независимом поставщике программного обеспечения, создающем решения для обмена сообщениями для компаний, с которыми вы работаете, или, может быть, вы просто наткнулись на Business Messages и хотите поработать над Платформа.

Независимо от того, что привело вас сюда, эта лаборатория кода — отличный способ начать работу. К концу проекта у вас будет первый цифровой агент, с которым смогут взаимодействовать пользователи. Когда после некоторой доработки вы будете готовы запустить Business Messages, у вас появится потенциал охватить миллионы клиентов.

Что делает хорошего цифрового агента?

Бизнес-сообщения — это диалоговая поверхность, обеспечивающая работу на мобильных устройствах, аналогичную приложению, которая позволяет потребителям связываться с компаниями без установки дополнительного приложения. Цифровой агент — это часть логики, с которой взаимодействуют ваши клиенты. Логика управляется веб-приложением, развернутым в облаке или в вашей инфраструктуре. То, как вы ответите пользователю, полностью зависит от вас. Лучшие агенты предоставляют контекст, позволяющий формировать ожидания, поддерживать интерес своих клиентов и предоставлять функциональные возможности для поддержки потребностей пользователей.

Что ты построишь

В этой лаборатории вы собираетесь создать цифрового агента на основе бизнес-сообщений для вымышленной компании Bonjour Meal. Этот цифровой агент ответит на несколько простых вопросов, например: «Во сколько вы закрываетесь?» или «Могу ли я совершить покупку онлайн?».

В этой лаборатории ваши пользователи смогут покупать товары через цифрового агента, направлять пользователя к платежному процессору для получения денег, а затем планировать получение своих фиктивных товаров в магазине.

В этой кодовой лаборатории ваше приложение будет

  • Отвечайте на вопросы с помощью чипа предложений.
  • Помогите пользователю задавать вопросы, на которые сможет ответить ваш цифровой агент.
  • Предоставьте богатые диалоговые функции, чтобы пользователь был вовлечен в разговор.

883b5a7f9f266276.png

Что вы узнаете

  • Как развернуть веб-приложение в App Engine на Google Cloud Platform. Альтернативно вы можете использовать ngrok для публичного тестирования вашего локального приложения.
  • Как настроить учетную запись Business Messages с помощью веб-перехватчика веб-приложения для получения сообщений от пользователей
  • Как отправлять расширенные функции, такие как открытки, карусели и диалоговые предложения, с помощью API бизнес-сообщений.
  • Как Business Messages отправляет ваши сообщения

Эта лаборатория посвящена созданию вашего первого цифрового агента.

Что вам понадобится

  • Зарегистрируйте бесплатную учетную запись разработчика Business Communications
  • Посетите наш сайт для разработчиков , чтобы получить инструкции о том, как
  • Устройство Android версии 5 или выше ИЛИ устройство iOS с приложением Google Maps.
  • Опыт программирования веб-приложений
  • Подключение к Интернету!

2. Приступаем к настройке

Включите API

Поскольку в этой лаборатории кода мы будем работать с приложением Django, мы воспользуемся Cloud Build API для развертывания приложения в App Engine . Альтернативно, если вы используете ngrok, нет необходимости включать Cloud Build API.

Чтобы включить Cloud Build API:

  1. Откройте Cloud Build API в Google Cloud Console.
  2. Нажмите Включить .

Создать учетную запись службы

Вам необходимо создать учетную запись службы для доступа к API Business Communications и Business Messages. Следуйте инструкциям в документации, чтобы создать учетную запись службы в консоли разработчика Business Communications.

Развертывание стартового кода Django Python EchoBot

В терминале клонируйте образец бота Django Echo в рабочий каталог вашего проекта с помощью следующей команды:

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

Скопируйте файл учетных данных JSON, созданный для учетной записи службы, в папку ресурсов примера и переименуйте учетные данные в «bm-agent-service-account-credentials.json».

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

В терминале перейдите в каталог примера шага 1.

Выполните следующие команды в терминале, чтобы развернуть образец:

$ gcloud config set project PROJECT_ID*
$ gcloud app create
$ gcloud app deploy
  • PROJECT_ID — это идентификатор проекта, который вы использовали для регистрации в API.

Обратите внимание на URL-адрес развернутого приложения в выводе последней команды:

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

Только что развернутый стартовый код содержит веб-приложение с веб-перехватчиком для получения сообщений из Business Messages. Приложение возвращает сообщения пользователю и может демонстрировать некоторые богатые функции, доступные в диалоговой поверхности.

Настройте свою веб-книгу

Теперь, когда ваша служба развернута, вы будете использовать URL-адрес приложения для настройки URL-адреса веб-перехватчика на странице настроек учетной записи в консоли разработчика Business Communications .

URL-адресом веб-перехватчика будет URL-адрес приложения + «/callback/». Например, это может быть что-то вроде этого: https://PROJECT_ID.appspot.com/callback/

Перейдите на страницу настроек учетной записи консоли Business Communications. В правом верхнем углу под панелью навигации вы должны увидеть название вашего проекта GCP. Если вы видите раскрывающийся список, обязательно выберите свой проект GCP.

Заполните контактные данные технического представителя , а затем обновите Webhook , указав URL-адрес веб-перехватчика для развернутого приложения.

ceb66c905ded40be.png

Нажмите «Сохранить» рядом со ссылкой на ваш проект GCP.

3. Создание вашего первого агента

Использование консоли разработчика бизнес-коммуникаций

В консоли бизнес-коммуникаций нажмите логотип в левом верхнем углу, чтобы вернуться на панель мониторинга консоли, затем нажмите «Создать агента» . Вы создаете бренд одновременно с созданием своего агента. Выберите «Деловые сообщения» для типа агента и убедитесь, что информация о партнере верна.

В поле «Бренд» введите название бренда, который вы создаете. Бренд — это бизнес, с которым вы работаете, и потребители могут взаимодействовать с агентом в диалоговом режиме. В имени агента укажите, что вы хотите, чтобы пользователи видели в беседе Business Messages. В случае с вымышленным Bonjour Meal Bonjour Rail — это железнодорожная компания, которая управляет ресторанами Bonjour Meal. Поэтому я укажу Bonjour Rail в качестве бренда и Bonjour Meal в качестве агента.

Агент — это диалоговая сущность, представляющая бренд.

88a9798e6546eb4e.png

Нажмите «Создать агент» и позвольте консоли творить чудеса. Этот запрос занимает несколько секунд, чтобы выполнить несколько запросов к API бизнес-коммуникаций для создания бренда и агента. Вы можете использовать API бизнес-коммуникаций напрямую для создания агента и бренда. Ознакомьтесь с документацией , чтобы узнать, как будет выглядеть запрос на завивку, выполняющий те же действия, что и консоль.

Ваш первый разговор

Откройте только что созданного агента, вам будет представлена ​​страница «Обзор» , на которой вы сможете начать просматривать сведения о вашем агенте. Взгляните на тестовые URL-адреса агента . Эти URL-адреса используются для вызова диалоговой поверхности на вашем устройстве.

f6bd8ded561db36f.png

Вы можете скопировать тестовый URL, нажав на любую из фишек. Конечно, скопируйте тестовый URL-адрес устройства, которое у вас есть для тестирования. Отправьте это скопированное сообщение на свое устройство любым удобным для вас способом.

На мобильном устройстве нажатие на ссылку вызывает средство запуска агента Business Messages с предварительно заполненным тестовым URL-адресом вашего агента.

Нажмите «Запустить» , чтобы вызвать диалоговую панель вашего агента.

2bf9f282e09062de.png

Взаимодействуйте с агентом и почувствуйте, на что он способен. По большей части вы обнаружите, что разговорная поверхность будет лишь повторять ваши сообщения. Отправьте ему что-нибудь вроде «Hello, World!» и вы увидите, что агент отправит вам то же самое сообщение.

Развернутое приложение также содержит некоторую логику для демонстрации богатых функций, доступных в Business Messages.

  • Если вы отправите «card», вы вызовете богатую карту.
  • Если вы отправите «фишки», вы вызовете фишки предложений.
  • Если вы отправите «карусель», вы вызовете карусель богатых карт.

Поздравляем! Это первый разговор вашего агента с вами!

Каждую из богатых функций можно использовать для предоставления лучшего контекста человеку, общающемуся с вашим агентом. Отправляйте графические ресурсы в виде расширенных карточек, чтобы лучше донести идеи, или используйте чипы предложений, чтобы направлять разговор.

Обновление приветственного сообщения и использование чипов разговора

Давайте попрактикуемся в работе с консолью разработчика, посмотрим, как редактировать приветственное сообщение агента и использовать чипы предложений, чтобы помочь пользователю общаться.

Перейдите на страницу «Обзор агента» и выберите «Информация об агенте» . Прокрутите вниз до раздела приветственного сообщения и начала разговора.

4323f988216fa054.png

Обновите приветственное сообщение (желтое поле ввода) следующим образом:

Добро пожаловать в стартовый агент Bonjour Meal. Я могу повторить ваши сообщения и показать вам некоторые богатые функции, поддерживаемые платформой. Попробуйте эти предложения!

Нажмите + Добавить начало разговора , как указано в фиолетовом поле на изображении выше, чтобы добавить начало разговора для вызова фишек предложений, карусели и карточки. Для начала разговора, который вы добавляете, необходим текстовый компонент и компонент postbackData. Текст — это то, что отображается пользователю, а данные postBack — это то, что отправляется на веб-перехватчик вашего агента. Вебхук анализирует данные обратной передачи и отправляет пользователю соответствующий ответ. 906bc74668a1b215.png

Информация об агенте в консоли после модификации выглядит следующим образом:

8e96b0a10edd20af.png

В правой части консоли вы увидите предварительный просмотр того, как будет выглядеть агент. Обратите внимание, как приветственное сообщение отражает то, на что вы его только что изменили, и чипы предложений, находящиеся под ним?

Это отличный инструмент, позволяющий получить представление о том, каким будет пользовательский опыт. Вы можете использовать его при создании своего агента и планировании пути пользователя, который хотите поддерживать.

К сожалению, мы не сможем сразу увидеть отражение этих изменений в разговоре, поскольку предыдущие данные кэшируются в инфраструктуре Business Messages. Кэш очищается примерно каждые 2 часа, поэтому вы сможете попробовать это завтра.

А пока давайте посмотрим, как все работает под капотом.

4. Анализ стартового кода

Исходный код с высоты 10 000 футов

Развернутый вами стартовый код передает сообщения обратно пользователям и может представлять расширенную карточку, карусель или фишки предложений. Давайте углубимся в исходный код, чтобы понять, как это работает. Потом разберемся, что нам нужно изменить.

Стартовый код — это проект Django. В более поздней части этой серии лабораторных работ мы будем использовать Google Datastore для хранения данных, таких как корзины покупок и связанные с ними разговоры. Не волнуйтесь, если вы раньше не использовали Django, это довольно просто, и к концу этой лабораторной работы вы поймете, как он работает.

На высоком уровне Django направляет URL-адреса в представления, а логика представления создает шаблон, который отображается в браузере. Давайте посмотрим на urls.py проекта.

bm-django-echo-bot/bmcodelab/urls.py [строки 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),
]

Здесь определены два маршрута, поэтому Django может выполнять логику, если эти два URL-адреса распознаны. Учитывая, что URL-адрес проекта — https://PROJECT_ID.appspot.com/, то маршруты, о которых знает проект, следующие:

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

Оба URL-маршрута относятся к bopis_views из bopis/views.py. Давайте посмотрим, что происходит в этом файле. Для начала давайте разберемся bopis_views.landing_placeholder .

bm-django-echo-bot/bonjourmeal-codelab/step-1/bopis/views.py [строки 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>.")
...

Этот фрагмент логики выполняется вашим веб-сервером, когда он получает веб-запрос, указывающий на корень проекта. Здесь не происходит ничего особенного: мы просто возвращаем HTTPResponse, содержащий некоторый HTML-код, обратно в браузер, отправивший запрос. Так что да, вы действительно можете открыть корневой URL-адрес проекта, но там делать особо нечего, поскольку это возвращает вас к этой лаборатории кода.

Другой URL-адрес направляется к функции callback , также находящейся в bopis/views.py . Итак, давайте посмотрим на эту функцию.

bm-django-echo-bot/bopis/views.py [строки 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.")
...

Логика здесь анализирует тело запроса на сообщение или ответ на предложение и передает эту информацию в функцию с именем route_message , а затем возвращает HttpResponse обратно в инфраструктуру Business Messages для подтверждения получения сообщения.

Это важная функция. Этот фрагмент логики представляет собой веб-перехватчик вашего веб-приложения, который получает сообщения от пользователей, взаимодействующих с вашим агентом. Вы можете расширить вебхук для отправки сообщений в инструмент автоматизации, такой как Dialogflow, чтобы понять, что может говорить пользователь, и получить ответ на основе этого вывода. Вы также можете переслать сообщение, чтобы пользователь мог связаться с действующим агентом. См. следующую диаграмму:

b10113f9d037e6a5.png

Business Messages отправляет содержимое сообщения в виде полезных данных JSON на ваш веб-перехватчик, где оно перенаправляется действующему агенту или какой-либо логике для ответа в качестве бота. В нашем случае этот механизм маршрутизации — route_message . Давайте посмотрим.

bm-django-echo-bot/bopis/views.py [строки 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)
...

Этот бит логики начинает анализировать сообщение, полученное пользователем. Сначала сообщение нормализуется за счет понижения всех символов. После нормализации он проверяет, является ли сообщение какой-либо из констант, определенных в верхней части файла.

bm-django-echo-bot/bopis/views.py [строки 40-42]

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

То есть бот анализирует сообщения, которые конкретно содержат любую из строк, которые мы поместили в postback_data начала разговора из предыдущего шага в этой кодовой лаборатории. Если ни одна из этих строк не появляется, то он просто передает сообщение функции echo_message , которая, как вы можете себе представить... будет отображать сообщения.

Отправка сообщений

Итак, к настоящему моменту вы должны иметь представление о том, как веб-приложение получает сообщения. Все это делается с помощью вебхука.

Но как приложение отправляет исходящее сообщение пользователю с помощью Business Messages?

a9475b1da93a83e8.png

Когда ваша инфраструктура отвечает пользователю, вы отправляете ответ в API бизнес-сообщений, который доставляет сообщение пользователю.

API бизнес-сообщений имеет библиотеки на Python, Node.js и Java. У нас также есть REST API, к которому вы можете напрямую обращаться, если ваша инфраструктура не на языке, для которого у нас есть библиотека. Посмотрите «Отправка сообщений» , чтобы узнать, как cURL используется для отправки сообщения по определенному идентификатору разговора.

В рамках этой лабораторной работы мы сосредоточимся на использовании клиентской библиотеки Python , которая уже интегрирована в стартовый код Bonjour Meal, который был развернут в App Engine в вашем проекте GCP или запущен локально через ngrok.

Давайте посмотрим на функцию echo_message и посмотрим, как мы взаимодействуем с API для отправки сообщения в Business Messages.

bm-django-echo-bot/bopis/views.py [строки 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)
...

В этой функции экземпляр BusinessMessagesMessage создается с использованием переменной сообщения, передаваемой в функцию echo_message . После создания экземпляра объект передается в send_message вместе с идентификатором диалога.

bm-django-echo-bot/bopis/views.py [строки 214-236]

...
def send_message(message, conversation_id):
    '''
    Posts a message to the Business Messages API, first sending
    a typing indicator event and sending a stop typing event after
    the message has been sent.

    Args:
        message (obj): The message object payload to send to the user.
        conversation_id (str): The unique id for this user and agent.
    '''
    credentials = ServiceAccountCredentials.from_json_keyfile_name(
        SERVICE_ACCOUNT_LOCATION,
        scopes=['https://www.googleapis.com/auth/businessmessages'])

    client = bm_client.BusinessmessagesV1(credentials=credentials)

    # Create the message request
    create_request = BusinessmessagesConversationsMessagesCreateRequest(
        businessMessagesMessage=message,
        parent='conversations/' + conversation_id)

    bm_client.BusinessmessagesV1.ConversationsMessagesService(
        client=client).Create(request=create_request)
...

Все, что делает функция send_message , — это использует учетные данные вашей сервисной учетной записи, чтобы убедиться, что вы можете отправлять сообщения в этот диалог, создает экземпляр клиента Business Messages и создает запрос на отправку сообщения по данному conversation ID .

Расширенные функции также используют эту функцию send_message , но сообщения, которые они создают, специфичны для расширенных карточек, каруселей и чипов предложений. Богатые карточки и карусели могут включать графические ресурсы, а чипы предложений имеют postback_data , чтобы логика обратного вызова могла правильно их проанализировать.

Теперь, когда мы узнали, как отправить сообщение, выясним, как образец отправляет подробные карточки, карусели и фишки с предложениями. В следующем разделе мы изменим исходный код для отправки сообщений с некоторыми из этих богатых функций.

Когда вы будете готовы, давайте настроим агента Bonjour Meal.

5. Настройка вашего агента

Если вы до сих пор следили за кодовой работой, мы должны увидеть нашего прекрасного агента.

906bc74668a1b215.png

Ладно, не так красиво, на самом деле это выглядит несколько пусто и не слишком хорошо отражает наш бизнес. К счастью, у нас есть базовые знания о коде, поддерживающем агент, и у нас есть инструменты, необходимые для настройки нашего агента так, как мы хотим.

В оставшейся части этой кодовой лаборатории мы расширим агент следующим образом:

  • Включите настоящий логотип
  • Улучшенное приветственное сообщение
  • Предоставьте информацию о графике работы
  • Сообщите пользователю, что скоро появится возможность покупать товары через Интернет.
  • Использование чипов диалоговых предложений для облегчения разговора.

Мы воспользуемся Консолью бизнес-коммуникаций, чтобы помочь нам обновить логотип и приветственное сообщение, но у вас всегда есть возможность напрямую использовать API-интерфейсы бизнес-коммуникаций, чтобы сделать то же самое. Затем нам придется обновить исходный код, чтобы отправлять соответствующие сообщения с информацией о часах работы и о том, что Bonjour Meal вскоре предложит функцию онлайн-покупок. Когда это будет сделано, мы вернемся к консоли бизнес-коммуникаций и создадим чипы диалоговых предложений, которые помогут направить разговор к счастливому пути, который поддерживает цифровой агент.

В консоли бизнес-коммуникаций выберите своего агента и перейдите к информации об агенте . Мы хотим обновить логотип компании , отмеченный желтым цветом ниже.

eb6b8ac6b62387ee.png

Нажмите «Загрузить» , и вы сможете выбрать изображение для загрузки или импорта по URL-адресу.

Ознакомьтесь с рекомендациями по дизайну логотипов в документации, чтобы узнать, какие рекомендации мы рекомендуем использовать для использования собственных логотипов.

Давайте загрузим логотип, который находится в исходном коде, который вы клонировали в начале этой лаборатории. Вы можете найти его в каталоге ./assets/ репозитория, файл называется «bonjour_meal-logo.png». Вы можете перетащить файл в модальное окно веб-браузера, будет представлен легкий инструмент редактирования для управления качеством изображения и его обрезки. Отрегулируйте разрешение изображения и обрежьте его так, чтобы размер изображения был меньше или равен ограничению в 50 КБ. Если изображение вас устраивает, щелкните галочку в синем кружке для подтверждения и нажмите «Выбрать» в нижней части модального окна.

1856081f59623ae2.png

Наконец, нажмите «Сохранить» в правом верхнем углу страницы с информацией об агенте . Это изменение отразится на вашем устройстве через некоторое время, поскольку информация об агенте кэшируется на наших серверах и должна быть видна в течение двух часов после изменения.

Обновить приветственное сообщение

Обновление приветственного сообщения — это то, что мы уже сделали ранее в этой лаборатории кода. Давайте сделаем это еще раз, но на этот раз настроим приветственное сообщение, более подходящее для пользовательского пути Bonjour Meal.

В консоли бизнес-коммуникаций выберите своего агента и перейдите в раздел «Информация об агенте» . Прокрутите вниз, пока не увидите поле ввода приветственного сообщения , где вы можете обновить сообщение.

6598fec47021136e.png

Зная, что мы добавим начала разговора, мы можем сослаться на них в нашем приветственном сообщении. В поле ввода заменим его на следующий текст:

«Добро пожаловать в Bonjour Meal. Я помощник, который может помочь вам с вопросами, которые могут у вас возникнуть о Bonjour Meal. Попробуйте некоторые из следующих вариантов».

Наконец, нажмите «Сохранить» в правом верхнем углу страницы с информацией об агенте . Опять же, для отражения этого изменения потребуется некоторое время из-за нашего механизма кэширования, который обеспечивает быструю работу!

Предоставление информации о режиме работы

Чтобы предоставить эту информацию пользователям, мы отправим пользователю специальное сообщение с помощью API бизнес-сообщений.

Возможно, вы помните, что сообщения анализируются в функции route_message views.py . Функция сначала нормализует строку, а затем начинает проверять, соответствует ли нормализованное сообщение какому-либо из жестко закодированных параметров. Для простоты давайте добавим дополнительное условие, в котором мы проверим, равно ли нормализованное сообщение новой константе, которую мы назовем CMD_BUSINESS_HOURS_INQUIRY и которая будет содержать значение «запрос рабочего времени». Если условие окажется истинным, мы вызовем функцию send_message_with_business_hours .

Функция route_message теперь будет выглядеть следующим образом:

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

Чтобы код работал, нам придется внести еще два изменения; первый — определить CMD_BUSINESS_HOURS_INQUIRY вместе с другими константами, второй — фактически определить функцию send_message_with_business_hours и отправить сообщение с помощью API бизнес-сообщений.

Давайте сначала определим константу в верхней части файла вместе с другими объявлениями констант:

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

А теперь определим send_message_with_business_hours . Вы можете определить эту функцию в любом месте файла, следуя соответствующему синтаксису Python. Поскольку эта функция просто отправляет сообщение, как и echo_message , вы можете использовать ее в качестве шаблона для определения этой функции.

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

При этом наш бот должен иметь возможность ответить пользователю, указав эти рабочие часы, когда он отправит следующее сообщение: «запрос рабочего времени». Вы можете ожидать чего-то вроде этого:

125802166995afd5.png

Как только вы развернете исходный код в GCP, изменения станут видны сразу. Мы не кэшируем веб-приложение в Google Cloud Platform так же, как кэшируется информация агента, поэтому вы сможете сразу протестировать этот опыт.

Хотя у нас есть некоторый импульс для внесения изменений в исходный код, давайте сделаем еще одно изменение, которое позволит пользователю спрашивать о покупках в Интернете. Ваш цифровой агент ответит, что эта функция еще недоступна, но вам придется вернуться и проверить позже.

Сообщите пользователю, что скоро начнутся покупки в Интернете.

Мы внесем такое же изменение, как и для информирования пользователя о часах работы. На этот раз давайте разместим информацию на насыщенной карточке вместе с привлекательным изображением.

Проанализируйте нормализованное сообщение и проверьте условие для константы CMD_ONLINE_SHOPPING_INQUIRY со значением, установленным в «online-shopping-inquiry», которая вызывает send_online_shopping_info_message если условие истинно.

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

Теперь определим send_online_shopping_info_message . Мы хотим, чтобы это сообщение было отправлено в виде расширенной карты с изображением, поэтому давайте скопируем функцию send_rich_card , чтобы использовать ее в качестве шаблона для определения send_online_shopping_info_message .

Сначала мы должны обновить резервный текст, чтобы он содержал соответствующее сообщение. Резервный текст используется, если устройство по какой-либо причине не может получить расширенную карту. Затем нам следует обновить BusinessMessagesRichCard , включив в нее соответствующий заголовок, описание, предложения и медиа-поле. Наша функция должна выглядеть так:

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

Уууу! Наш цифровой агент теперь может отвечать пользователям, интересующимся онлайн-покупками. На данный момент наш цифровой агент еще не поддерживает онлайн-покупки, поэтому мы предоставляем пользователю сообщение, информирующее его о том, что эта функция скоро появится. Вот как выглядит наш цифровой агент, когда пользователь спрашивает о покупках в Интернете.

5cd63c57c1b84f9a.png

Как и предыдущее изменение, которое мы внесли, чтобы позволить пользователю спрашивать о рабочих часах, это изменение можно увидеть сразу, если вы используете ngrok, или как только вы развернете код в GCP App Engine.

В следующей части мы будем использовать начала разговора и фишки предложений, чтобы направить разговор по счастливому пути.

Использование фишек для ведения разговора

Мы внесли некоторые изменения в исходный код и развернули обновленный цифровой агент, но мы никогда не ожидаем, что пользователи будут вводить «запрос рабочего времени» или «информация о покупках в Интернете», чтобы узнать о бизнесе. Давайте обновим начала разговора так, чтобы при открытии разговора пользователя не только приветствовало приятное приветственное сообщение, но и предлагалось начало разговора.

Перейдите в консоль бизнес-коммуникаций и откройте страницу информации об агенте вашего агента. Ранее мы определили начала разговора для «фишек», «карточек» и «карусели». Хотя они все еще работают, они больше не имеют отношения к нашей бизнес-функции. Вы можете оставить их, чтобы продолжать демонстрировать эти богатые функции, или удалить их, чтобы ваш цифровой агент отображал начала разговора специально для бизнеса Bonjour Meal.

Мы создадим два новых начала разговора. Для первого установите текст «В какое время вы работаете?» и установите для данных обратной передачи значение «запрос рабочих часов». Для начала второго разговора установите текст «Могу ли я совершать здесь покупки?» и установите для данных Postback значение «online-shopping-info».

В результате должна получиться конфигурация, показанная на следующем снимке экрана:

ef6e6888acea93e3.png

Как и в случае с другими изменениями, внесенными в Консоль бизнес-коммуникаций, для их распространения потребуется некоторое время, прежде чем вы сможете увидеть изменения, внесенные на своем мобильном устройстве.

Теперь, когда мы закончили с началом разговора, нам также понадобится способ направить пользователя по счастливому пути после начала разговора. Чипы можно использовать контекстно после отправки сообщения, чтобы направить пользователя к другим функциям, на которые способен цифровой агент. Итак, мы будем отправлять сообщение с предложением сделать что-то еще с агентом всякий раз, когда пользователь спрашивает о часах работы или покупках в Интернете.

В конце функции добавьте следующее:

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

Имейте в виду, что текстовое поле в BusinessMessagesSuggestion ограничено 25 символами, как описано в документации .

С обновленными вариантами начала разговора и стратегическим использованием фишек предложений, вот несколько скриншотов ожидаемого пользовательского опыта.

ef57695e2bacdd20.png

6. Поздравления

Поздравляем, вы успешно создали своего первого цифрового агента Business Messages!

Вы развернули веб-приложение для поддержки своего цифрового агента в Business Messages, использовали консоль бизнес-коммуникаций для модификации агента и сформировали взаимодействие пользователя с цифровым агентом, внося изменения в исходный код.

Теперь вы знаете ключевые шаги, необходимые для создания интерактивного интерфейса Business Messages, и открывающиеся с этого момента возможности просто потрясающие. Ваш агент может быть расширен для поддержки поиска товаров или добавления корзины покупок для отслеживания того, что может заинтересовать пользователя. Вы можете использовать карусель для демонстрации элементов в меню и, используя предложения, позволить пользователю выбирать интересующие его элементы.

Вот тизер того, как это может выглядеть.

57d2bb7b0ec38c81.png

Как мне создать отличный разговорный опыт?

Лучшие агенты предоставляют пользователю контекстную информацию, одновременно предоставляя им функциональные возможности в ходе разговора, чтобы они могли взаимодействовать с бизнесом так, как они обычно это делают по телефону или даже лично. Подумайте, как следующие темы могут быть применимы к разговору, который вы хотели бы провести с компанией, с которой работаете.

Предоставьте контекст и определите ожидания

Предоставление контекста может быть любым: от явного указания того, как вы можете помочь пользователю, до представления цифрового агента с личностью, с которой пользователь может связать себя. Успешные агенты Business Messages используют репрезентативный аватар, чтобы показать пользователю, с кем они разговаривают.

Установление ожиданий зависит от пользовательского опыта, который вы создаете. Например, если ваш агент поддерживает поиск инвентаря, сначала сообщите пользователю, что доступность может быть низкой, прежде чем давать ответ.

Предоставьте пользователю функциональность

Потребители постоянно связаны с бизнесом. От запросов, таких как проверка статуса заказа до проверки наличия товара на складе, Business Messages может поддерживать сложное взаимодействие с пользователем. Многие пользователи продолжают звонить в компании по телефону, чтобы получить ответы на свои вопросы, даже если ответы доступны на веб-сайте компании. В результате предприятиям приходится инвестировать больше ресурсов для обработки большого количества звонков, особенно во время праздников.

Поддерживайте вовлеченность пользователя

Обеспечьте точки соприкосновения для диалога, чтобы пользователь был вовлечен в разговор. Между сообщениями вы можете вызывать индикаторы ввода, чтобы пользователь знал, что вы обрабатываете ответ для него.

Благодаря богатым функциям, таким как индикаторы набора текста, чипы подсказок, насыщенные карточки и карусели, вы можете направлять пользователя по счастливому пути пользователя, помогая ему выполнить определенные задачи, такие как заказ товаров из меню. Цель состоит в том, чтобы уменьшить трафик звонков на телефонную линию предприятия.

Крайне важно, чтобы диалог предоставлял пользователю функциональность. Пользователи, которые связываются с компанией посредством обмена сообщениями, ожидают быстрого ответа на свои вопросы. В неидеальной ситуации цифровой агент не может облегчить разговор, что может привести к ухудшению пользовательского опыта. К счастью, есть способы обойти эту проблему, например, передать разговор живому агенту, о чем мы расскажем в будущей лаборатории кода.

Что дальше?

Когда вы будете готовы, ознакомьтесь с некоторыми из следующих тем, чтобы узнать о более сложных взаимодействиях, которых можно достичь в бизнес-сообщениях.

Справочная документация