Инструментирование мобильных приложений с помощью плагина Ключ-АСТРОМ React Native

Материал из Документация Ключ-АСТРОМ

Инструментирование мобильных приложений с помощью плагина Ключ-АСТРОМ React Native в RUM Classic

Наш плагин для React Native позволяет автоматически инструментировать ваши приложения React Native с помощью ЕдиногоАгента для Android и iOS. Плагин предоставляет API для добавления ручной инструментации и совместим с исходными, извлеченными проектами React Native.

Подробную техническую документацию можно найти на странице плагина Ключ-АСТРОМ React Native на npm.

Выполните следующие шаги, чтобы настроить плагин Ключ-АСТРОМ React Native для вашего мобильного приложения.

Предварительные требования

  • React 16.8+
  • React Native 0.60+
  • Android версии 5.0+ (API 21+)
  • Gradle версии 7.0+
  • Плагин Android Gradle версии 7.0+
  • Java 11
  • iOS версии 12+

Шаг 1: Создайте мобильное приложение в Ключ-АСТРОМ

  1. В Ключ-АСТРОМ перейдите в раздел Мобильное приложение.
  2. Выберите Создать мобильное приложение.
  3. Введите название для вашего приложения и выберите Создать мобильное приложение. Откроется страница настроек приложения.

Шаг 2: Настройка плагина React Native

В настройках приложения выберите Мастер инструментирования > React Native. Мастер инструментирования проведет вас через процесс настройки.

  1. Установите плагин Ключ-АСТРОМ React Native:
    • Для React Native 0.60.0+:
npm install @astromkey/react-native-plugin
    • Только для iOS: Если вы используете Pods, перейдите в каталог ios и выполните команду pod install для установки новой зависимости Ключ-АСТРОМ в ваш проект Xcode.
  2. С помощью мастера настройки загрузите файл astromkey.config.js и поместите его в корневой каталог вашего проекта рядом с файлом app.json. Если вы обновляете плагин Ключ-АСТРОМ React Native с предыдущей версии, скопируйте старые значения конфигурации из файла astromkey.config в новый файл astromkey.config.js.
  3. Добавьте плагин Babel @astromkey/react-native-plugin/instrumentation/BabelPluginastromkey и среду выполнения JSX @astromkey/react-native-plugin в ваш файл babel.config.js:
module.exports = {
  presets: [
    ['module:@react-native/babel-preset'], // или 'module:metro-react-native-babel-preset'
  ],
  plugins: [
    '@astromkey/react-native-plugin/instrumentation/BabelPluginastromkey',
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
        importSource: '@astromkey/react-native-plugin'
      },
    ],
  ],
};
  1. Включите режим согласия пользователей: ваше приложение должно содержать уведомление о конфиденциальности, позволяющее пользователям настраивать свои предпочтения в отношении конфиденциальности. Вы можете добавить следующий вызов API для включения мониторинга Ключ-АСТРОМ:
import { Astromkey, DataCollectionLevel, UserPrivacyOptions } from '@astromkey/react-native-plugin';

// Настройки конфиденциальности, заданные ниже, являются лишь гарантией конфиденциальности.
// Для обеспечения быстрого начала сбора данных мониторинга.
// Это необходимо запросить у пользователя
// (например, на экране настроек конфиденциальности) и решение пользователя
// Необходимо применить аналогично приведенному примеру.
const privacyConfig = new UserPrivacyOptions(DataCollectionLevel.UserBehavior, true);
Astromkey.applyUserPrivacyOptions(privacyConfig);

Шаг 3: Создайте и запустите свое приложение

  1. Выполните команду npx instrumentAstromkey в корневом каталоге вашего проекта React Native, чтобы применить конфигурацию, заданную в файле astromkey.config.js. Эта команда настраивает как проекты Android, так и iOS.
  2. Выполните команду react-native run-android или react-native run-ios для пересборки и запуска вашего приложения.

Если вы обновляетесь до React Native 0.70+ или используете версию @react-native-community/cli 9.x+, обратите внимание, что наш автоматический скрипт, запускаемый перед каждой командой react-native run-android или react-native run-ios, больше не работает. Если вы изменили конфигурацию в файле astromkey.config.js, выполните команду npx instrumentAstromkey, чтобы применить новую конфигурацию.

При каждом изменении конфигурации в файле astromkey.config.js выполните следующие команды, а затем пересоберите приложение:

  • npx instrumentAstromkey — чтобы применить новую конфигурацию из astromkey.config.js
  • react-native start --reset-cache — необходимо сбросить кэш. Если не сбросить кэш, могут сохраниться старые и новые конфигурации.

Укажите пользовательские пути с помощью пользовательских аргументов.

Именование действий пользователя

Дополнительные сведения об именовании действий пользователей в Ключ-АСТРОМ см. в разделе «Правила именования действий пользователей».

  • React представления:
    • Проверяет, задано ли свойство displayName для представлений React.
    • Если displayName недоступно, используется имя класса, полученное из свойства name конструктора.
  • Осязаемые (кнопки, изображения):
    • Сначала проверяется метка доступности (accessibilityLabel).
    • Если метки нет, для кнопки с изображением проверяется источник изображения.
    • Если метки нет и нет изображения, проверяется заголовок кнопки.
    • Если ничего не найдено, выполняется поиск внутреннего текста.

Если вы минимизируете код React Native, вы можете использовать настройку keep_classname для сохранения имени класса.

Источник — https://doc.ruscomtech.ru/index.php?title=Инструментирование_мобильных_приложений_с_помощью_плагина_Ключ-АСТРОМ_React_Native&oldid=6478