# Expo SDK: Grundlegende Integrationsanleitung
Dieser Abschnitt enthält Informationen zur Integration des Pushwoosh Expo SDK in Ihre Anwendung.
## Voraussetzungen
Um das Pushwoosh Expo SDK in Ihre App zu integrieren, benötigen Sie Folgendes:
## Integrationsschritte
### 1. Installieren Sie das Plugin
Installieren Sie das Pushwoosh Expo Plugin mit dem Expo CLI
```bash
expo install pushwoosh-expo-plugin
```
Installieren Sie das Pushwoosh React Native SDK
```bash
npm install pushwoosh-react-native-plugin --save
```
### 2. Legen Sie die Plugin-Eigenschaften fest
Fügen Sie das Plugin am Anfang des Plugin-Arrays mit den erforderlichen Eigenschaften hinzu:
```json title="app.json/app.config.js"
{
"expo": {
"plugins": [
[
"pushwoosh-expo-plugin",
{
"mode": "development",
"ios": {
"PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
},
"android": {
"apiToken": "__YOUR_DEVICE_API_TOKEN__"
}
}
]
]
}
}
```
Wobei:
- `mode` wird verwendet, um die APNs-Umgebungsberechtigung zu konfigurieren. Die Werte „Development“ oder „production“ sind verfügbar.
- `PW_API_TOKEN`, `apiToken` ist Ihr [Pushwoosh Device API Token.](/de/developer/api-reference/api-access-token/#device-api-token)
### 3. Initialisieren Sie Pushwoosh
In der Stammkomponente Ihrer Anwendung:
- Importieren Sie das `pushwoosh-react-native-plugin` Plugin.
- Initialisieren Sie das Pushwoosh SDK.
- Rufen Sie `register()` in Ihrer Initialisierungslogik auf, um sich für Push-Benachrichtigungen zu registrieren.
```javascript title="index.tsx"
import Pushwoosh from 'pushwoosh-react-native-plugin';
Pushwoosh.init({
"pw_appid": "__YOUR_APP_ID__"
});
Pushwoosh.register();
```
Wobei:
- `__YOUR_APP_ID__` ist der Anwendungscode aus dem Pushwoosh Control Panel.
### 4. Natives Android-Setup
Fügen Sie die Firebase-Konfigurationsdatei hinzu:
1. Kopieren Sie Ihre `google-services.json`-Datei in das Stammverzeichnis des Projekts.
2. Setzen Sie die Eigenschaft `googleServicesFile` auf den Pfad Ihrer `google-services.json` und geben Sie die Eigenschaft `package` an:
```json title="app.json/app.config.js"
"expo": {
"name": "sample",
"android": {
"package": "com.pushwoosh.sample",
"googleServicesFile": "./google-services.json"
},
"plugins": [
[
"pushwoosh-expo-plugin",
{
"mode": "development",
"ios": {
"PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
},
"android": {
"apiToken": "__YOUR_DEVICE_API_TOKEN__"
}
}
]
]
}
```
### 5. Natives iOS-Setup
Setzen Sie die Eigenschaft `bundleIdentifier` auf das `ios`-Objekt:
```json title="app.json/app.config.js"
"expo": {
"name": "sample",
"ios": {
"bundleIdentifier": "com.pushwoosh.sample"
},
"plugins": [
[
"pushwoosh-expo-plugin",
{
"mode": "development",
"ios": {
"PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
},
"android": {
"apiToken": "__YOUR_DEVICE_API_TOKEN__"
}
}
]
]
}
```
### 6. Erstellen Sie die App vorab (Prebuild)
Generieren Sie nativen Code und konfigurieren Sie die Abhängigkeiten für jede Plattform, indem Sie prebuild ausführen:
```bash
npx expo prebuild
```
### 7. Führen Sie das Projekt aus
1. Erstellen und führen Sie das Projekt aus:
```bash
npx expo run:android
```
```bash
npx expo run:ios
```
2. Gehen Sie zum Pushwoosh Control Panel und [senden Sie eine Push-Benachrichtigung](/de/product/messaging-channels/push-notifications/send-push-notifications/one-time-push).
3. Sie sollten die Benachrichtigung in der App sehen.
## Erweiterte Integration
In diesem Stadium haben Sie das SDK bereits integriert und können Push-Benachrichtigungen senden und empfangen. Lassen Sie uns nun die Kernfunktionalität erkunden
### Event-Listener für Push-Benachrichtigungen
Im Pushwoosh SDK gibt es zwei Event-Listener, die für die Verarbeitung von Push-Benachrichtigungen konzipiert sind:
- Das `onPushReceived`-Event wird ausgelöst, wenn eine Push-Benachrichtigung empfangen wird
- Das `onPushAccepted`-Event wird ausgelöst, wenn ein Benutzer eine Benachrichtigung öffnet
Sie sollten diese Event-Listener direkt nach der Initialisierung des SDK beim Start der Anwendung einrichten:
```typescript
import { DeviceEventEmitter } from 'react-native';
import Pushwoosh from 'pushwoosh-react-native-plugin';
class PushwooshNotificationHandler {
setupPushListeners(): void {
DeviceEventEmitter.addListener("pushReceived", (e) => {
console.warn("Push received: " + JSON.stringify(e));
});
DeviceEventEmitter.addListener("pushOpened", (e) => {
console.warn("Push opened:" + JSON.stringify(e));
});
}
}
```
### Benutzerkonfiguration
Indem Sie sich auf das individuelle Nutzerverhalten und die Vorlieben konzentrieren, können Sie personalisierte Inhalte bereitstellen, was zu einer erhöhten Nutzerzufriedenheit und -loyalität führt
```typescript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class Registration {
afterUserLogin(user: User): void {
// Benutzer-ID setzen
Pushwoosh.setUserId(user.getId());
// Benutzer-E-Mail setzen
Pushwoosh.setEmails(user.getEmailList());
// Zusätzliche Benutzerinformationen als Tags für Pushwoosh setzen
Pushwoosh.setTags({
"age": user.getAge(),
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
}
```
### Tags
Tags sind Schlüssel-Wert-Paare, die Benutzern oder Geräten zugewiesen werden und eine Segmentierung nach Attributen wie Vorlieben oder Verhalten ermöglichen, um gezielte Nachrichten zu versenden.
```typescript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class UpdateUser {
afterUserUpdateProfile(user: User): void {
// Liste der bevorzugten Kategorien setzen
Pushwoosh.setTags({
"favorite_categories": user.getFavoriteCategoriesList()
});
// Zahlungsinformationen setzen
Pushwoosh.setTags({
"is_subscribed": user.isSubscribed(),
"payment_status": user.getPaymentStatus(),
"billing_address": user.getBillingAddress()
});
}
}
```
### Events
Events sind spezifische Benutzeraktionen oder Vorkommnisse innerhalb der App, die verfolgt werden können, um das Verhalten zu analysieren und entsprechende Nachrichten oder Aktionen auszulösen
```typescript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class Registration {
// Login-Event verfolgen
afterUserLogin(user: User): void {
Pushwoosh.postEvent("login", {
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
// Kauf-Event verfolgen
afterUserPurchase(product: Product): void {
Pushwoosh.postEvent("purchase", {
"product_id": product.getId(),
"product_name": product.getName(),
"price": product.getPrice(),
"quantity": product.getQuantity()
});
}
}
```
### Verfolgung der Nachrichtenzustellung für iOS
Sie müssen Ihrem Projekt ein Notification Service Extension Target hinzufügen. Dies ist für eine genaue Zustellungsverfolgung und Funktionen wie Rich Media unter iOS unerlässlich.
Folgen Sie den [Schritten der nativen Anleitung](/de/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking), um das Extension Target und den erforderlichen Pushwoosh-Code darin hinzuzufügen.
### Zusätzliche Plugin-Eigenschaften
| Eigenschaft | Standard | Beschreibung |
|-----------------|---------|-------------|
| **iOS-Eigenschaften** | | |
| `Pushwoosh_LOG_LEVEL` | `INFO` | Log-Level für iOS. Mögliche Werte: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| **Android-Eigenschaften** | | |
| `logLevel` | `INFO` | Log-Level für Android. Einer von: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| `multiNotificationMode`| `true` | Kann auf false geändert werden, falls Sie dem Benutzer nur die letzte Benachrichtigung anzeigen möchten |
| `icon` | - | Pfad zu einem benutzerdefinierten Benachrichtigungssymbol für Android |
## Fehlerbehebung
Sollten Sie während des Integrationsprozesses auf Probleme stoßen, lesen Sie bitte den Abschnitt [Support und Community](/de/developer/pushwoosh-sdk/support-and-community).
###### FCM-Registrierungsfehler: Token konnte nicht abgerufen werden. Ist Firebase korrekt konfiguriert?
Stellen Sie sicher, dass Ihre Firebase-Eigenschaft `googleServicesFile` in der Expo-Konfigurationsdatei eingerichtet ist und die Datei `google-services.json` zum Stammverzeichnis Ihres Projekts hinzugefügt wurde:
```json title="app.json/app.config.js"
"expo": {
"name": "sample",
"android": {
"package": "com.pushwoosh.sample",
"googleServicesFile": "./google-services.json"
},
"plugins": [
[
"pushwoosh-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
Dieser Fehler kann auftreten, wenn Sie versuchen, die App auf einem Gerät auszuführen.\
Um das Problem zu beheben, stellen Sie sicher, dass Sie den Prebuild-Schritt abgeschlossen haben. Er generiert den nativen Code und konfiguriert die Abhängigkeiten für jede Plattform.
```bash
npx expo prebuild
```