# Guía de integración básica del SDK de Expo
Esta sección contiene información sobre cómo integrar el SDK de Expo de Pushwoosh en su aplicación.
## Prerrequisitos
Para integrar el SDK de Expo de Pushwoosh en su aplicación, necesitará lo siguiente:
## Pasos de integración
### 1. Instale el plugin
Instale el plugin de Expo de Pushwoosh usando la CLI de Expo
```bash
expo install pushwoosh-expo-plugin
```
Instale el SDK de React Native de Pushwoosh
```bash
npm install pushwoosh-react-native-plugin --save
```
### 2. Establezca las propiedades del plugin
Agregue el plugin al principio del array de plugins con las propiedades necesarias:
```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__"
}
}
]
]
}
}
```
Donde:
- `mode` se utiliza para configurar el entitlement del entorno de APNs. Están disponibles los valores “Development” o “production”.
- `PW_API_TOKEN`, `apiToken` es su [token de la API de dispositivo de Pushwoosh.](/es/developer/api-reference/api-access-token/#device-api-token)
### 3. Inicialice Pushwoosh
En el componente raíz de su aplicación:
- Importe el plugin `pushwoosh-react-native-plugin`.
- Inicialice el SDK de Pushwoosh.
- Llame a `register()` en su lógica de inicialización para registrarse para las notificaciones push.
```javascript title="index.tsx"
import Pushwoosh from 'pushwoosh-react-native-plugin';
Pushwoosh.init({
"pw_appid": "__YOUR_APP_ID__"
});
Pushwoosh.register();
```
Donde:
- `__YOUR_APP_ID__` es el código de la aplicación del Panel de Control de Pushwoosh.
### 4. Configuración nativa de Android
Agregue el archivo de configuración de Firebase:
1. Copie su archivo `google-services.json` al directorio raíz del proyecto.
2. Establezca la propiedad `googleServicesFile` en la ruta de su `google-services.json` y especifique la propiedad `package`:
```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. Configuración nativa de iOS
Establezca la propiedad `bundleIdentifier` en el objeto `ios`:
```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. Precompile la aplicación
Genere el código nativo y configure las dependencias para cada plataforma ejecutando prebuild:
```bash
npx expo prebuild
```
### 7. Ejecute el proyecto
1. Compile y ejecute el proyecto:
```bash
npx expo run:android
```
```bash
npx expo run:ios
```
2. Vaya al Panel de Control de Pushwoosh y [envíe una notificación push](/es/product/messaging-channels/push-notifications/send-push-notifications/one-time-push).
3. Debería ver la notificación en la aplicación.
## Integración extendida
En esta etapa, ya ha integrado el SDK y puede enviar y recibir notificaciones push. Ahora, exploremos la funcionalidad principal.
### Escuchadores de eventos de notificaciones push
En el SDK de Pushwoosh hay dos escuchadores de eventos, diseñados para manejar notificaciones push:
- El evento `onPushReceived` se activa cuando se recibe una notificación push.
- El evento `onPushAccepted` se activa cuando un usuario abre una notificación.
Debe configurar estos escuchadores de eventos justo después de la inicialización del SDK al inicio de la aplicación:
```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));
});
}
}
```
### Configuración de usuario
Al centrarse en el comportamiento y las preferencias individuales de los usuarios, puede ofrecer contenido personalizado, lo que conduce a una mayor satisfacción y lealtad del usuario.
```typescript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class Registration {
afterUserLogin(user: User): void {
// Set user ID
Pushwoosh.setUserId(user.getId());
// Set user email
Pushwoosh.setEmails(user.getEmailList());
// Setting additional user information as tags for Pushwoosh
Pushwoosh.setTags({
"age": user.getAge(),
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
}
```
### Etiquetas
Las etiquetas son pares clave-valor asignados a usuarios o dispositivos, que permiten la segmentación basada en atributos como preferencias o comportamiento, lo que posibilita la mensajería dirigida.
```typescript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class UpdateUser {
afterUserUpdateProfile(user: User): void {
// Set list of favorite categories
Pushwoosh.setTags({
"favorite_categories": user.getFavoriteCategoriesList()
});
// Set payment information
Pushwoosh.setTags({
"is_subscribed": user.isSubscribed(),
"payment_status": user.getPaymentStatus(),
"billing_address": user.getBillingAddress()
});
}
}
```
### Eventos
Los eventos son acciones o sucesos específicos del usuario dentro de la aplicación que se pueden rastrear para analizar el comportamiento y activar los mensajes o acciones correspondientes.
```typescript
import Pushwoosh from 'pushwoosh-react-native-plugin';
class Registration {
// Track login event
afterUserLogin(user: User): void {
Pushwoosh.postEvent("login", {
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
// Track purchase event
afterUserPurchase(product: Product): void {
Pushwoosh.postEvent("purchase", {
"product_id": product.getId(),
"product_name": product.getName(),
"price": product.getPrice(),
"quantity": product.getQuantity()
});
}
}
```
### Seguimiento de la entrega de mensajes para iOS
Debe agregar un objetivo de Extensión de Servicio de Notificación a su proyecto. Esto es esencial para un seguimiento preciso de la entrega y para funciones como Rich Media en iOS.
Siga los [pasos de la guía nativa](/es/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) para agregar el objetivo de la extensión y el código de Pushwoosh necesario dentro de él.
### Propiedades adicionales del plugin
| Propiedad | Predeterminado | Descripción |
|-----------------|---------|-------------|
| **Propiedades de iOS** | | |
| `Pushwoosh_LOG_LEVEL` | `INFO` | Nivel de registro para iOS. Valores posibles: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| **Propiedades de Android** | | |
| `logLevel` | `INFO` | Nivel de registro para Android. Uno de: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| `multiNotificationMode`| `true` | Se puede cambiar a false en caso de que desee mostrar solo la última notificación al usuario |
| `icon` | - | Ruta a un icono de notificación personalizado para Android |
## Solución de problemas
Si encuentra algún problema durante el proceso de integración, consulte la sección de [soporte y comunidad](/es/developer/pushwoosh-sdk/support-and-community).
###### Error de registro de FCM: No se pudo recuperar el token. ¿Está Firebase configurado correctamente?
Asegúrese de que su propiedad `googleServicesFile` de Firebase esté configurada en el archivo de configuración de Expo y que el archivo `google-services.json` se agregue al directorio raíz de su proyecto:
```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: No se puede leer la propiedad 'init' de null
Puede encontrar el error al intentar ejecutar la aplicación en un dispositivo.\
Para resolver el problema, asegúrese de haber completado el paso de precompilación. Este genera el código nativo y configura las dependencias para cada plataforma.
```bash
npx expo prebuild
```