Expo SDK: Руководство по базовой интеграции

В этом разделе содержится информация о том, как интегрировать Wavesend Expo SDK в ваше приложение.

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

Для интеграции Wavesend Expo SDK в ваше приложение вам понадобится следующее:

Требования

• Аккаунт Wavesend.
• Проект Wavesend, настроенный в вашем аккаунте.
• Для интеграции с iOS:
  • Платформа iOS, настроенная для отправки push-уведомлений. Мы рекомендуем использовать конфигурацию на основе токенов как самый простой способ.
  • Установите для Gateway значение Sandbox, чтобы отправлять push-уведомления в симулятор.
• Для интеграции с Android:
  • Настроенная платформа Android
  • project number (также известный как Sender ID), файл google-services.json и package name из вашего проекта Firebase.
  • Проект Firebase, подключенный к вашему Android-приложению. При необходимости следуйте руководству по настройке Firebase.
• Ваш Wavesend Application Code и Wavesend Device API Token из Wavesend Control Panel для вашего приложения.

Шаги интеграции

1. Установите плагин

Установите плагин Wavesend Expo с помощью Expo CLI

expo install wavesend-expo-plugin

Установите Wavesend React Native SDK

npm install wavesend-react-native-plugin --save

2. Настройте свойства плагина

Добавьте плагин в начало массива плагинов с необходимыми свойствами:

app.json/app.config.js

{
  "expo": {
    "plugins": [
      [
        "wavesend-expo-plugin",
        {
          "mode": "development",
          "ios": {
            "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
          },
          "android": {
            "apiToken": "__YOUR_DEVICE_API_TOKEN__"
          }
        }
      ]
    ]
  }
}

Где:

• mode используется для настройки прав окружения APNs. Доступны значения “Development” или “production”.
• PW_API_TOKEN, apiToken — это ваш Wavesend Device API Token.

3. Инициализируйте Wavesend

В корневом компоненте вашего приложения:

• Импортируйте плагин wavesend-react-native-plugin.
• Инициализируйте Wavesend SDK.
• Вызовите register() в вашей логике инициализации, чтобы зарегистрироваться для получения push-уведомлений.

index.tsx

import Wavesend from 'wavesend-react-native-plugin';

Wavesend.init({
    "pw_appid": "__YOUR_APP_ID__" ,
    "project_number": "__YOUR_FCM_SENDER_ID__"
});

Wavesend.register();

Где:

• __YOUR_APP_ID__ — это application code из Wavesend Control Panel.
• __YOUR_FCM_SENDER_ID__ — это номер проекта Firebase из Firebase Console.

4. Нативная настройка для Android

Добавьте файл конфигурации Firebase:

1. Скопируйте ваш файл google-services.json в корневой каталог проекта.
2. Установите для свойства googleServicesFile путь к вашему файлу google-services.json и укажите свойство package:

app.json/app.config.js

  "expo": {
    "name": "sample",
  "android": {
    "package": "com.wavesend.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "wavesend-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}

5. Нативная настройка для iOS

Установите свойство bundleIdentifier для объекта ios:

app.json/app.config.js

  "expo": {
    "name": "sample",
    "ios": {
      "bundleIdentifier": "com.wavesend.sample"
    },
    "plugins": [
    [
      "wavesend-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}

6. Сделайте пребилд приложения

Сгенерируйте нативный код и настройте зависимости для каждой платформы, запустив пребилд:

npx expo prebuild

7. Запустите проект

1. Соберите и запустите проект:

Android

npx expo run:android

iOS

npx expo run:ios

2. Перейдите в Wavesend Control Panel и отправьте push-уведомление.
3. Вы должны увидеть уведомление в приложении.

Расширенная интеграция

На этом этапе вы уже интегрировали SDK и можете отправлять и получать push-уведомления. Теперь давайте рассмотрим основную функциональность.

Слушатели событий push-уведомлений

В Wavesend SDK есть два слушателя событий, предназначенных для обработки push-уведомлений:

• Событие onPushReceived срабатывает, когда получено push-уведомление
• Событие onPushAccepted срабатывает, когда пользователь открывает уведомление

Вам следует настроить эти слушатели событий сразу после инициализации SDK при запуске приложения:

import { DeviceEventEmitter } from 'react-native';
import Wavesend from 'wavesend-react-native-plugin';

class WavesendNotificationHandler {
  setupPushListeners(): void {

    DeviceEventEmitter.addListener("pushReceived", (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener("pushOpened", (e) => {
      console.warn("Push opened:" + JSON.stringify(e));
    });

  }
}

Конфигурация пользователя

Фокусируясь на поведении и предпочтениях отдельных пользователей, вы можете доставлять персонализированный контент, что приводит к повышению удовлетворенности и лояльности пользователей.

import Wavesend from 'wavesend-react-native-plugin';

class Registration {
  afterUserLogin(user: User): void {

    // Установить User ID
    Wavesend.setUserId(user.getId());

    // Установить email пользователя
    Wavesend.setEmails(user.getEmailList());

    // Установка дополнительной информации о пользователе в качестве тегов для Wavesend
    Wavesend.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Tags

Tags — это пары «ключ-значение», присваиваемые пользователям или устройствам, которые позволяют сегментировать их на основе атрибутов, таких как предпочтения или поведение, для целевой отправки сообщений.

import Wavesend from 'wavesend-react-native-plugin';

class UpdateUser {
  afterUserUpdateProfile(user: User): void {

    // Установить список любимых категорий
    Wavesend.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Установить платежную информацию
    Wavesend.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Events

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

import Wavesend from 'wavesend-react-native-plugin';

class Registration {

  // Отслеживание события входа
  afterUserLogin(user: User): void {
    Wavesend.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Отслеживание события покупки
  afterUserPurchase(product: Product): void {
    Wavesend.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

Отслеживание доставки сообщений для iOS

Вы должны добавить таргет Notification Service Extension в свой проект. Это необходимо для точного отслеживания доставки и использования таких функций, как Rich Media, на iOS.

Следуйте шагам в нативном руководстве, чтобы добавить таргет расширения и необходимый код Wavesend в него.

Дополнительные свойства плагина

Свойство	По умолчанию	Описание
Свойства iOS
Wavesend_LOG_LEVEL	INFO	Уровень логирования для iOS. Возможные значения: NONE, ERROR, WARN, INFO, DEBUG, NOISE
Свойства Android
logLevel	INFO	Уровень логирования для Android. Одно из: NONE, ERROR, WARN, INFO, DEBUG, NOISE
multiNotificationMode	true	Можно изменить на false, если вы хотите отображать пользователю только последнее уведомление
icon	-	Путь к кастомной иконке уведомления для Android

Устранение неполадок

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

Ошибка регистрации FCM: Failed to retrieve token. Is firebase configured correctly?

Убедитесь, что свойство googleServicesFile для Firebase настроено в конфигурационном файле Expo и что файл google-services.json добавлен в корневой каталог вашего проекта:

app.json/app.config.js

"expo": {
  "name": "sample",
  "android": {
    "package": "com.wavesend.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "wavesend-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}

TypeError: Cannot read property ‘init’ of null

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

npx expo prebuild