# Guide d'intégration de base du SDK Cordova
Cette section contient des informations sur la manière d'intégrer le SDK Cordova de Pushwoosh dans votre application.
## Prérequis
Pour intégrer le SDK Cordova de Pushwoosh dans votre application, vous aurez besoin des éléments suivants :
## Étapes d'intégration
### 1. Ajouter la dépendance du SDK Cordova de Pushwoosh
Ajoutez la dépendance du SDK Cordova de Pushwoosh à votre projet :
```bash
cordova plugin add pushwoosh-cordova-plugin
```
### 2. Initialisation du SDK Cordova
Dans le composant racine de votre fichier `index.js`, ajoutez le code suivant à l'intérieur du gestionnaire d'événements `deviceready`. Suivez les étapes dans l'ordre exact :
```javascript title="index.js"
document.addEventListener('deviceready', function() {
var pushwoosh = cordova.require("pushwoosh-cordova-plugin.PushNotification");
// 1. Register notification callbacks before initialization
document.addEventListener('push-receive', function(event) {
var notification = event.notification;
console.log("Push received: " + JSON.stringify(notification));
});
document.addEventListener('push-notification', function(event) {
var notification = event.notification;
console.log("Push opened: " + JSON.stringify(notification));
});
// 2. Initialize Pushwoosh
pushwoosh.onDeviceReady({
appid: "__YOUR_APP_ID__"
});
// 3. Register the device to receive push notifications
pushwoosh.registerDevice(
function(status) {
var pushToken = status.pushToken;
// Handle successful registration
},
function(status) {
// Handle registration error
}
);
}, false);
```
Où :
- `__YOUR_APP_ID__` est le code d'application du panneau de contrôle Pushwoosh.
### 3. Configuration native pour iOS
#### 3.1 Capacités
Pour activer les notifications push dans votre projet, vous devez ajouter certaines capacités.
Dans la section Signing & Capabilities, ajoutez les capacités suivantes :
- `Push Notifications`
- `Background Modes`. Après avoir ajouté cette capacité, cochez la case `Remote notifications`.
Si vous avez l'intention d'utiliser les notifications urgentes (Time Sensitive Notifications) (iOS 15+), ajoutez également la capacité `Time Sensitive Notifications`.
#### 3.2 Info.plist
Dans votre `Runner/Info.plist`, définissez la clé `__PUSHWOOSH_DEVICE_API_TOKEN__` sur le [token d'API de l'appareil Pushwoosh](/fr/developer/api-reference/api-access-token/#device-api-token) :
```swift title="info.plist"
Pushwoosh_API_TOKEN__PUSHWOOSH_DEVICE_API_TOKEN__
```
#### 3.3 Suivi de la livraison des messages
Vous devez ajouter une cible d'extension de service de notification (Notification Service Extension) à votre projet. Ceci est essentiel pour un suivi précis de la livraison et pour des fonctionnalités comme les Rich Media sur iOS.
Suivez les [étapes du guide natif](/fr/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) pour ajouter la cible d'extension et le code Pushwoosh nécessaire à l'intérieur.
### 4. Configuration native pour Android
#### 4.1 Installer les dépendances
Assurez-vous que les dépendances et plugins requis sont ajoutés à vos scripts Gradle :
Ajoutez le plugin Gradle des services Google aux dépendances de votre `build.gradle` au niveau du projet :
```groovy title="android/build.gradle"
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}
```
Appliquez le plugin dans votre fichier `build.gradle` au niveau de l'application :
```groovy title="app/build.gradle"
apply plugin: 'com.google.gms.google-services'
```
#### 4.2 Ajouter le fichier de configuration Firebase
Placez le fichier `google-services.json` dans le dossier `android/app` de votre répertoire de projet.
#### 4.3 Ajouter les métadonnées Pushwoosh
Dans votre `main/AndroidManifest.xml`, ajoutez le [token d'API de l'appareil Pushwoosh](/fr/developer/api-reference/api-access-token/#device-api-token) à l'intérieur de la balise `` :
```xml title="AndroidManifest.xml"
```
> **Important :** Assurez-vous de donner au token l'accès à la bonne application dans votre panneau de contrôle Pushwoosh. [En savoir plus](/fr/developer/api-reference/api-access-token/#edit-token)
### 5. Exécuter le projet
1. Compilez et exécutez le projet.
2. Allez dans le panneau de contrôle Pushwoosh et [envoyez une notification push](/fr/product/messaging-channels/push-notifications/send-push-notifications/one-time-push).
3. Vous devriez voir la notification dans l'application.
## Intégration étendue
À ce stade, vous avez déjà intégré le SDK et pouvez envoyer et recevoir des notifications push. Explorons maintenant les fonctionnalités de base.
### Écouteurs d'événements de notification push
Dans le SDK Pushwoosh, il y a deux écouteurs d'événements, conçus pour gérer les notifications push :
- L'événement `push-receive` est déclenché lorsqu'une notification push est reçue alors que l'application est au premier plan.
- L'événement `push-notification` est déclenché lorsqu'un utilisateur ouvre une notification.
Ces écouteurs d'événements **doivent** être enregistrés **avant** d'appeler `onDeviceReady()`, comme indiqué dans l'[étape d'initialisation ci-dessus](#2-cordova-sdk-initialization). Vous pouvez personnaliser la logique du gestionnaire pour répondre à vos besoins :
```javascript title="index.js"
// Register before onDeviceReady()
document.addEventListener('push-receive', function(event) {
var message = event.notification.message;
var payload = event.notification.userdata;
console.log("Push received: " + message);
// Add your custom logic here
});
document.addEventListener('push-notification', function(event) {
var message = event.notification.message;
var payload = event.notification.userdata;
console.log("Push accepted: " + message);
// Add your custom logic here (e.g., navigate to a specific screen)
});
```
### Configuration de l'utilisateur
En vous concentrant sur le comportement et les préférences individuels des utilisateurs, vous pouvez fournir un contenu personnalisé, ce qui entraîne une satisfaction et une fidélité accrues des utilisateurs.
```javascript
class Registration {
afterUserLogin(user) {
// Set user ID
pushwoosh.setUserId(user.getId());
// Setting additional user information as tags for Pushwoosh
pushwoosh.setTags({
"age": user.getAge(),
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
}
```
### Tags
Les tags sont des paires clé-valeur attribuées aux utilisateurs ou aux appareils, permettant une segmentation basée sur des attributs tels que les préférences ou le comportement, ce qui permet des messages ciblés.
```javascript
class UpdateUser {
afterUserUpdateProfile(user) {
// 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()
});
}
}
```
### Événements
Les événements sont des actions ou des occurrences spécifiques de l'utilisateur au sein de l'application qui peuvent être suivies pour analyser le comportement et déclencher des messages ou des actions correspondants.
```javascript
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()
});
}
}
```
## Dépannage
Si vous rencontrez des problèmes lors du processus d'intégration, veuillez vous référer à la section [support et communauté](/fr/developer/pushwoosh-sdk/support-and-community).