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


= Инструментирование мобильных приложений с помощью плагина Ключ-АСТРОМ React Native в RUM Classic =
Наш плагин для '''React Native''' позволяет автоматически инструментировать ваши приложения '''React Native''' с помощью ЕдиногоАгента для '''Android''' и '''iOS'''. Плагин предоставляет '''API''' для добавления ручной инструментации и совместим с исходными, извлеченными проектами '''React Native'''.

Подробную техническую документацию можно найти на странице плагина Ключ-АСТРОМ '''React Native''' на [https://www.npmjs.com/package/@astromkey/react-native-plugin 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: Создайте мобильное приложение в Ключ-АСТРОМ ==

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

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

# Установите плагин Ключ-АСТРОМ '''React Native''':
#* Для '''React Native''' 0.60.0+:

{| class="wikitable"
|<pre>
npm install @astromkey/react-native-plugin
</pre>
|}

#* Только для '''iOS''': Если вы используете Pods, перейдите в каталог <code>ios</code> и выполните команду <code>pod install</code> для установки новой зависимости Ключ-АСТРОМ в ваш проект '''Xcode'''.
# С помощью мастера настройки загрузите файл <code>astromkey.config.js</code> и поместите его в корневой каталог вашего проекта рядом с файлом <code>app.json</code>. Если вы обновляете плагин Ключ-АСТРОМ '''React Native''' с предыдущей версии, скопируйте старые значения конфигурации из файла <code>astromkey.config</code> в новый файл <code>astromkey.config.js</code>.
# Добавьте плагин '''Babel''' <code>@astromkey/react-native-plugin/instrumentation/BabelPluginastromkey</code> и среду выполнения '''JSX''' <code>@astromkey/react-native-plugin</code> в ваш файл <code>babel.config.js</code>:

{| class="wikitable"
|<pre>
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'
      },
    ],
  ],
};

</pre>
|}

# Включите режим согласия пользователей: ваше приложение должно содержать уведомление о конфиденциальности, позволяющее пользователям настраивать свои предпочтения в отношении конфиденциальности. Вы можете добавить следующий вызов '''API''' для включения мониторинга Ключ-АСТРОМ:

{| class="wikitable"
|<pre>
import { Astromkey, DataCollectionLevel, UserPrivacyOptions } from '@astromkey/react-native-plugin';

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

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

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

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

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

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

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

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

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

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