# Guia de integração básica do SDK Expo Esta seção contém informações sobre como integrar o SDK Expo da Pushwoosh em seu aplicativo. ## Pré-requisitos Para integrar o SDK Expo da Pushwoosh em seu aplicativo, você precisará do seguinte: ## Passos de integração ### 1. Instale o plugin Instale o plugin Pushwoosh Expo usando a CLI do Expo ```bash expo install pushwoosh-expo-plugin ``` Instale o SDK Pushwoosh React Native ```bash npm install pushwoosh-react-native-plugin --save ``` ### 2. Defina as propriedades do plugin Adicione o plugin no início do array de plugins com as propriedades necessárias: ```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__" } } ] ] } } ``` Onde: - `mode` é usado para configurar a permissão de ambiente APNs. Os valores “Development” ou “production” estão disponíveis. - `PW_API_TOKEN`, `apiToken` é o seu [Token de API de Dispositivo Pushwoosh](/pt/developer/api-reference/api-access-token/#device-api-token). ### 3. Inicialize o Pushwoosh No componente raiz do seu aplicativo: - Importe o plugin `pushwoosh-react-native-plugin`. - Inicialize o SDK da Pushwoosh. - Chame `register()` em sua lógica de inicialização para se registrar para notificações push. ```javascript title="index.tsx" import Pushwoosh from 'pushwoosh-react-native-plugin'; Pushwoosh.init({ "pw_appid": "__YOUR_APP_ID__" }); Pushwoosh.register(); ``` Onde: - `__YOUR_APP_ID__` é o código do aplicativo do Painel de Controle da Pushwoosh. ### 4. Configuração Nativa do Android Adicione o arquivo de configuração do Firebase: 1. Copie seu arquivo `google-services.json` para o diretório raiz do projeto. 2. Defina a propriedade `googleServicesFile` para o caminho do seu `google-services.json` e especifique a propriedade `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. Configuração Nativa do iOS Defina a propriedade `bundleIdentifier` para o 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. Pré-compile o aplicativo Gere o código nativo e configure as dependências para cada plataforma executando o prebuild: ```bash npx expo prebuild ``` ### 7. Execute o projeto 1. Compile e execute o projeto: ```bash npx expo run:android ``` ```bash npx expo run:ios ``` 2. Vá para o Painel de Controle da Pushwoosh e [envie uma notificação push](/pt/product/messaging-channels/push-notifications/send-push-notifications/one-time-push). 3. Você deve ver a notificação no aplicativo. ## Integração estendida Neste estágio, você já integrou o SDK e pode enviar e receber notificações push. Agora, vamos explorar a funcionalidade principal ### Listeners de eventos de notificação push No SDK da Pushwoosh, existem dois listeners de eventos, projetados para lidar com notificações push: - O evento `onPushReceived` é acionado quando uma notificação push é recebida - O evento `onPushAccepted` é acionado quando um usuário abre uma notificação Você deve configurar esses listeners de eventos logo após a inicialização do SDK no início do aplicativo: ```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)); }); } } ``` ### Configuração do usuário Ao focar no comportamento e nas preferências individuais do usuário, você pode entregar conteúdo personalizado, levando a um aumento da satisfação e lealdade do usuário ```typescript import Pushwoosh from 'pushwoosh-react-native-plugin'; class Registration { afterUserLogin(user: User): void { // Define o ID do usuário Pushwoosh.setUserId(user.getId()); // Define o e-mail do usuário Pushwoosh.setEmails(user.getEmailList()); // Definindo informações adicionais do usuário como tags para o Pushwoosh Pushwoosh.setTags({ "age": user.getAge(), "name": user.getName(), "last_login": user.getLastLoginDate() }); } } ``` ### Tags Tags são pares de chave-valor atribuídos a usuários ou dispositivos, permitindo a segmentação com base em atributos como preferências ou comportamento, possibilitando o envio de mensagens direcionadas. ```typescript import Pushwoosh from 'pushwoosh-react-native-plugin'; class UpdateUser { afterUserUpdateProfile(user: User): void { // Define a lista de categorias favoritas Pushwoosh.setTags({ "favorite_categories": user.getFavoriteCategoriesList() }); // Define as informações de pagamento Pushwoosh.setTags({ "is_subscribed": user.isSubscribed(), "payment_status": user.getPaymentStatus(), "billing_address": user.getBillingAddress() }); } } ``` ### Eventos Eventos são ações ou ocorrências específicas do usuário dentro do aplicativo que podem ser rastreadas para analisar o comportamento e acionar mensagens ou ações correspondentes ```typescript import Pushwoosh from 'pushwoosh-react-native-plugin'; class Registration { // Rastreia o evento de login afterUserLogin(user: User): void { Pushwoosh.postEvent("login", { "name": user.getName(), "last_login": user.getLastLoginDate() }); } // Rastreia o evento de compra afterUserPurchase(product: Product): void { Pushwoosh.postEvent("purchase", { "product_id": product.getId(), "product_name": product.getName(), "price": product.getPrice(), "quantity": product.getQuantity() }); } } ``` ### Rastreamento de entrega de mensagens para iOS Você deve adicionar um alvo de Notification Service Extension ao seu projeto. Isso é essencial para o rastreamento preciso da entrega e para recursos como Rich Media no iOS. Siga os [passos do guia nativo](/pt/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) para adicionar o alvo da extensão e o código Pushwoosh necessário dentro dele. ### Propriedades adicionais do plugin | Propriedade
| Padrão
| Descrição | |-----------------|---------|-------------| | **Propriedades do iOS** | | | | `Pushwoosh_LOG_LEVEL` | `INFO` | Nível de log para iOS. Valores possíveis: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` | | **Propriedades do Android** | | | | `logLevel` | `INFO` | Nível de log para Android. Um de: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` | | `multiNotificationMode`| `true` | Pode ser alterado para false caso você queira exibir apenas a última notificação para o usuário | | `icon` | - | Caminho para um ícone de notificação personalizado para Android | ## Solução de problemas Se você encontrar algum problema durante o processo de integração, consulte a seção de [suporte e comunidade](/pt/developer/pushwoosh-sdk/support-and-community). ###### Erro de registro do FCM: Falha ao recuperar o token. O Firebase está configurado corretamente? Certifique-se de que a propriedade `googleServicesFile` do Firebase esteja configurada no arquivo de configuração do Expo e que o arquivo `google-services.json` seja adicionado ao diretório raiz do seu projeto: ```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 Você pode encontrar o erro ao tentar executar o aplicativo em um dispositivo.\ Para resolver o problema, certifique-se de ter concluído a etapa de prebuild. Ela gera o código nativo e configura as dependências para cada plataforma. ```bash npx expo prebuild ```