# Guía de integración básica del SDK de Capacitor
Esta sección contiene información sobre cómo integrar el SDK de Capacitor de Pushwoosh en su aplicación.
## Requisitos previos
Para integrar el SDK de Capacitor de Pushwoosh en su aplicación, necesitará lo siguiente:
## Pasos de integración
### 1. Añadir la dependencia del SDK de Capacitor de Pushwoosh
Añada la dependencia del SDK de Capacitor de Pushwoosh a su proyecto:
```bash
npm install pushwoosh-capacitor-plugin
```
Sincronice la configuración de Capacitor:
```bash
npx cap sync
```
### 2. Inicialización del SDK de Capacitor
En su archivo principal de `JavaScript`, importe e inicialice el SDK de Pushwoosh:
```javascript title="index.js"
import { Pushwoosh } from 'pushwoosh-capacitor-plugin';
// Initialize the SDK
Pushwoosh.onDeviceReady({
appid: "__YOUR_APP_CODE__"
});
// Register for push notifications
Pushwoosh.registerDevice()
.then(result => {
console.log("Push token:", result.pushToken);
// Handle successful registration
})
.catch(error => {
console.error("Failed to register device:", error);
// Handle registration error
});
```
Donde:
- `__YOUR_APP_CODE__` es el código de la aplicación del Panel de Control de Pushwoosh.
### 3. Configuración nativa de iOS
#### 3.1 Capacidades
Para habilitar las Notificaciones Push en su proyecto, necesita añadir ciertas capacidades.
En la sección Signing & Capabilities, añada las siguientes capacidades:
- `Push Notifications`
- `Background Modes`. Después de añadir esta capacidad, marque la casilla para `Remote notifications`.
Si tiene la intención de usar Notificaciones Sensibles al Tiempo (iOS 15+), añada también la capacidad de `Time Sensitive Notifications`.
#### 3.2 Info.plist
En su `Runner/Info.plist` establezca la clave `__PUSHWOOSH_DEVICE_API_TOKEN__` con el [Token de API de Dispositivo de Pushwoosh](/es/developer/api-reference/api-access-token/#device-api-token):
```xml title="info.plist"
Pushwoosh_API_TOKEN__PUSHWOOSH_DEVICE_API_TOKEN__
```
#### 3.3 Seguimiento de la entrega de mensajes
Debe añadir 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 características 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 añadir el objetivo de la extensión y el código de Pushwoosh necesario dentro de ella.
### 4. Configuración nativa de Android
#### 4.1 Instalar dependencias
Asegúrese de que las dependencias y plugins requeridos se añadan a sus scripts de Gradle:
Añada el plugin de Google Services Gradle a las dependencias de su `build.gradle` a nivel de proyecto:
```groovy title="android/build.gradle"
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}
```
Aplique el plugin en su archivo `build.gradle` a nivel de aplicación:
```groovy title="app/build.gradle"
apply plugin: 'com.google.gms.google-services'
```
#### 4.2 Añadir archivo de configuración de Firebase
Coloque el archivo `google-services.json` en la carpeta `android/app` de su directorio de proyecto.
#### 4.3 Añadir metadatos de Pushwoosh
En su `main/AndroidManifest.xml` añada el [Token de API de Dispositivo de Pushwoosh](/es/developer/api-reference/api-access-token/#device-api-token) dentro de la etiqueta ``:
```xml title="AndroidManifest.xml"
```
> **Importante:** Asegúrese de dar al token acceso a la aplicación correcta en su Panel de Control de Pushwoosh. [Aprenda más](/es/developer/api-reference/api-access-token/#edit-token)
### 5. Ejecutar el proyecto
1. Compile y ejecute el proyecto.
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
### Listeners de eventos de notificaciones push
En el SDK de Capacitor de Pushwoosh hay dos métodos de callback para manejar las notificaciones push:
- `pushReceivedCallback` se activa cuando se recibe una notificación push
- `pushOpenedCallback` se activa cuando un usuario abre una notificación
Debe configurar estos callbacks justo después de la inicialización del SDK:
```javascript title="index.js"
import { Pushwoosh } from 'pushwoosh-capacitor-plugin';
// Set up push received callback
await Pushwoosh.pushReceivedCallback((notification, err) => {
if (err) {
console.error("Failed to process received notification:", err);
} else {
console.log("Push received:", JSON.stringify(notification));
// Handle the received notification
}
});
// Set up push opened callback
await Pushwoosh.pushOpenedCallback((notification, err) => {
if (err) {
console.error("Failed to process opened notification:", err);
} else {
console.log("Push opened:", JSON.stringify(notification));
// Handle the opened notification
}
});
```
### 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
```javascript
import { Pushwoosh } from 'pushwoosh-capacitor-plugin';
class Registration {
async afterUserLogin(user) {
// Set user ID
Pushwoosh.setUserId(user.getId);
// Setting additional user information as tags for Pushwoosh
await Pushwoosh.setTags({
"age": user.getAge(),
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
}
```
### Etiquetas (Tags)
Las etiquetas (Tags) 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.
```javascript
import { Pushwoosh } from 'pushwoosh-capacitor-plugin';
class UpdateUser {
async afterUserUpdateProfile(user) {
// Set list of favorite categories
await Pushwoosh.setTags({
"favorite_categories": user.getFavoriteCategoriesList()
});
// Set payment information
await Pushwoosh.setTags({
"is_subscribed": user.isSubscribed(),
"payment_status": user.getPaymentStatus(),
"billing_address": user.getBillingAddress()
});
}
}
```
### Eventos
Los eventos son acciones u ocurrencias específicas del usuario dentro de la aplicación que se pueden rastrear para analizar el comportamiento y activar los mensajes o acciones correspondientes
```javascript
import { Pushwoosh } from 'pushwoosh-capacitor-plugin';
class Registration {
// Track login event
afterUserLogin(user) {
Pushwoosh.postEvent("login", {
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
// Track purchase event
afterUserPurchase(product) {
Pushwoosh.postEvent("purchase", {
"product_id": product.getId(),
"product_name": product.getName(),
"price": product.getPrice(),
"quantity": product.getQuantity()
});
}
}
```
## 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).