Автор оригинала: FreeCodeCamp Community Member.
Питер Мбануго
Serverless – это модель выполнения облака, в которой облачный провайдер отвечает за выполнение куска кода путем динамически выделения ресурсов для запуска кода при необходимости. С этим мы можем получить снижение стоимости эксплуатации и время разработки. Это позволяет нам сосредоточиться на нашем коде для обеспечения бизнес-ценности пользователям, не беспокоясь о строительстве и обслуживании серверов.
Требуется пара шагов для настройки и интеграции этих сервисов с нашим кодом, и AWS Amplify был построен, чтобы облегчить создание серверульных приложений на AWS. Он предоставляет инструменты для создания и настройки служб с несколькими командами, а компоненты библиотеки, которые могут легко взаимодействовать с теми услугами из нашего кода.
Эта статья является частью серии, где я покажу вам, как создавать серверульные приложения в React и AWS Amplify. В Первый пост Мы создали нашу среду разработки, проект усиления и проект реагирования. В Второй пост Мы создали Backend Services, работающие на разных службах AWS, и построили приложение React для выполнения операций CRUD, тем самым взаимодействуя с созданными сервисами Backend.
В этом посте мы добавим аналитику и использование отслеживания на приложение, которое мы построили в предыдущих постах.
Настроить Analytics Backend
Во многих приложениях требуется захватить данные использования приложений, чтобы бизнес мог получить представление о том, как клиенты взаимодействуют с приложением. Мы будем использовать Amazon Canpoint для отслеживания метрик использования для нашего приложения React. Amazon Pinpoint имеет следующие типы событий:
- Монетизация событий. Этот тип событий используется для сообщества доходов, который генерируется вашим приложением и количеством товаров, которые приобретены пользователями.
- События сеансов. Они отслеживают использование и указывают, когда и как часто пользователи открываются и закрывают ваше приложение.
- События аутентификации. Это показывает, как часто пользователи аутентифицируются с вашим приложением. В этой категории отслеживаются входные сигналы, регистрации и аутентификации.
- Пользовательские события. Этот тип событий представляет собой нестандартные события, которые вы определяете, назначая пользовательский тип события. Вы можете добавить пользовательские атрибуты и метрики на пользовательское событие.
Чтобы добавить Canpoint в наш проект, откройте команду в корневой каталог вашего реагирования проекта и следуйте инструкциям ниже.
- Запустите команду
Усилить добавить аналитикуОтказ - Вам будет предложено для имени ресурса для этой услуги. Введите
Todospinpointи нажмите клавишу ввода. - Вы должны получить оперативную справку, если вы хотите разрешить неанатифицированным пользователям отправлять аналитические события. Введите
Nи нажмите Enter.
Команда, которую мы работали, создали ресурс аналитики и обновляли ресурс аутентификации локально. Нам нужно обеспечить их в облаке. Запустите команду Усилить толчок создать службу в облаке. После завершения он вытягивает информацию об обслуживании и обновлениям SRC/AWS-Exports.js Отказ Если вы откроете его, вы найдете, у нас есть свойства aws_mobile_analytics_app_id и aws_mobile_analytics_app_region Отказ Эта информация будет использоваться для настройки библиотеки усиления.
Добавить аналитику в приложение
С помощью Pinpoint Service создается в облаке, нам теперь нужно добавить код для отправки данных об использовании. В SRC/App.js Линия 7, которая читает Усилить .Configure (AWS_Exports); установит библиотеку с данными из AWS-Export.js Отказ С AWS-Export.js Содержит aws_mobile_analytics_app_id , это настроит аналитику, а также другие услуги, информацию которых находится в ней.
По умолчанию библиотека усиления будет отслеживать события сеанса пользователя и аутентификации. Не нужно добавлять дополнительный код. Если вы запускаете приложение, пользователи входа или регистрации или регистрации, вы получите эти данные событий, отправленные в облако.
Мы также можем записать пользовательские события. Давайте записываем пользовательское событие для при удалении элемента. Открыть SRC/App.js И строка обновления 4 для импорта модуля аналитики:
import Amplify, { API, Analytics } from "aws-amplify";Обновите Удалить () Функция, чтобы включить следующее утверждение кода:
Analytics.record({ name: "delete", attributes: { id } });Это отправит Удалить Событие каждый раз, когда эта функция называется. Он может быть использован для отслеживания того, как часто можно удалить предметы. Мы также могли также отследить, какие предметы самые просмотрены больше всего, записывая событие каждый раз, когда мы идем к представлению деталей. Добавьте следующий код в LoadDetailSpage () Функция:
Analytics.record({ name: "detailsView", attributes: { title: response.title }});Откройте приложение в браузере и выберите разные элементы для перемещения с помощью подробной информации для разных элементов, которые у вас есть. Теперь войдите в консоль управления AWS и перейдите на панель инструментов Pinpoint, чтобы просмотреть отчет о аналитике для приложения.
Это обертывание
Вы можете интегрировать Amazon Canpoint в свои веб-приложения для захвата данных использования, чтобы предоставить вам представление о том, как клиенты взаимодействуют с вашими приложениями. Бизнес может использовать эти данные для анализа поведения клиентов, включая их взаимодействие, демографию и приобретение.
Я показал вам, как создать Pinpoint Service, используя усилитель CLI, а затем интегрировал его в приложение React, чтобы отправить пользовательские события на Canpoint Service. Есть больше, мы можем сделать с модулем Analytics в библиотеке Amplify JavaScript, такую как автоматическая запись просмотра и события страниц. Увидеть Документы Для получения дополнительной информации о API аналитики.