OneSignal Push Notification no React Native

Desenvolvido com SDK OneSginal 11.0

Este projeto é uma aplicação React Native que utiliza o OneSignal para permitir o envio e recebimento de notificações push no dispositivo móvel. Ele consiste em duas partes: o backend e o frontend. O backend é responsável por enviar notificações para dispositivos móveis, enquanto o frontend é a aplicação móvel que recebe e lida com as notificações. O código do frontend é uma aplicação React Native que se integra ao OneSignal para receber notificações push.

O OneSignal é uma ferramenta poderosa para melhorar a retenção de usuários, envolver o público e fornecer informações importantes em tempo real. Vamos previamente instalar e ver alguns conseitos que a plataforma nos oferece. Acesse a documentacao oficial da one signal para tirar qualquer duvida.

https://documentation.onesignal.com/docs/react-native-sdk-setup

Vamos criar uma conta na OneSignal. Lembre-se de que o OneSignal oferece diferentes níveis de planos, incluindo um plano gratuito com recursos básicos e planos pagos com recursos avançados. Escolha o plano que melhor atenda às suas necessidades.

Acesse o site oficial do OneSignal em https://onesignal.com/.
Preencha o formulário de registro com as informações solicitadas. Você precisará fornecer seu nome, endereço de e-mail, senha e confirmar a senha.
Você receberá um e-mail de confirmação no endereço de e-mail que você forneceu. Abra seu e-mail e siga as instruções para confirmar sua conta.
Após a confirmação, você será redirecionado para o painel de controle do OneSignal, onde poderá começar a configurar seu aplicativo e explorar os recursos da plataforma.

Criação do Aplicativo:

No painel de controle, você verá a opção "New App/Website" ou "New App". Clique nela para criar um novo aplicativo.
Escolha um nome para o seu aplicativo e selecione a plataforma em que ele será executado, como iOS, Android, Web, etc.

Sera necessario configurar o firebase no app para podermos continuar, para isso poderar acessar esse link e ver como pode fazer isso. https://documentation.onesignal.com/docs/generate-firebase-credentials

De modo direto vamos criar uma conta para nosso app no firebase para podermos ativar o FCM

Lembre-se de que o google-services.json contém informações como IDs de projeto, chaves de autenticação e configurações específicas do Firebase, e é crucial para a operação adequada do Firebase em seu aplicativo. Mantê-lo seguro e bem organizado é uma abordagem prudente para o desenvolvimento contínuo do seu aplicativo.

Firebase Cloud Messaging (FCM) é uma etapa importante para garantir que o envio de notificações push funcione corretamente em seu aplicativo. O FCM é a plataforma de mensagens do Firebase que permite o envio de notificações push para dispositivos móveis e navegadores da web.

Acesse o Console Firebase https://console.firebase.google.com/ Selecione seu Projeto Firebase: Navegue para o Firebase Cloud Messaging Configuração do Cloud Messaging:

Siga as instruções para configurar o FCM. Isso incluirá a configuração de chaves de servidor, chaves de API e outros detalhes necessários para permitir o envio de notificações.

Gere e Configure a Chave do Servidor:

Uma etapa importante é gerar uma chave do servidor, que será usada para autenticar seu aplicativo com o FCM. Siga as instruções no painel para criar e configurar essa chave.

Essa configuração pode ser observada no Cloud Messaging no painel do aplicativo em questão.

Para obter o arquivo necessário, acesse 'Contas de Serviço' e clique em 'Gerar Nova Chave Privada'. Isso permitirá o download do arquivo necessário para as configurações.

Então asso, com tudo em mão vamos mandar esses dados para a plataforma do OneSginal

Forneça detalhes mais específicos sobre a plataforma na qual o projeto será executado, e qual será a estrutura do seu projeto.

Dessa forma, nosso canal de comunicação está estabelecido e possuímos a chave em nossas mãos. aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa

Para prosseguir, serão necessários mais alguns dados essenciais: o OneSignal App ID e a Rest API Key. Estes são cruciais para estabelecer uma comunicação adequada e podem ser encontrados na seção SETTINGS > KEYS & IDs.

Veja mais em https://documentation.onesignal.com/docs/keys-and-ids

Criando app

Vamos iniicar um app em expo para receber essas push Notification

npx create-expo-app my-app

Vamos configurar agora o app Nosso exemplo sera com React Native, instalamos as bibliotecas.

yarn: yarn add react-native-onesignal

npm npm install --save react-native-onesignal

Codigo para o app

import { LogLevel, OneSignal } from 'react-native-onesignal';

OneSignal.Debug.setLogLevel(LogLevel.Verbose);
OneSignal.initialize("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa");
OneSignal.Notifications.requestPermission(true);
OneSignal.Notifications.addEventListener('click', (event) => {
  console.log('OneSignal: notification clicked:', event);
});

Para integrar o OneSignal em um aplicativo React Native para receber notificações push. Vou explicar cada parte do código:

OneSignal.Debug.setLogLevel(LogLevel.Verbose);: Essa linha de código define o nível de log do OneSignal. Neste caso, o nível de log é definido como Verbose, o que significa que você verá mensagens de log detalhadas do OneSignal.

OneSignal.initialize("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa");: Aqui, o código inicializa o OneSignal com o ID do aplicativo.

OneSignal.Notifications.requestPermission(true);: Essa linha solicita permissão ao usuário para receber notificações.

OneSignal.Notifications.addEventListener('click', (event) => {...});: Aqui, você está adicionando um ouvinte para o evento de clique em notificação. Quando o usuário clica em uma notificação push, o código dentro da função de callback será executado. Neste caso, ele simplesmente registra no console uma mensagem que informa que a notificação foi clicada e exibe os detalhes do evento, como os dados da notificação.

Com este código, o seu aplicativo React Native está configurado para receber notificações do OneSignal e lidar com o evento de clique em notificações de acordo com o que estiver definido na função de callback. Certifique-se de que o ID do aplicativo no OneSignal.initialize corresponda ao aplicativo configurado no OneSignal.

Podemos testar com CURL

curl --request POST \
     --url https://onesignal.com/api/v1/notifications \
     --header 'Authorization: Basic API_KEY' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "app_id": "APP_ID",
   "contents": {"en": "Sua mensagem de notificação aqui"},
    "included_segments": ["All"]
}
'

Assim temos o resultado em nossa aplicação rodando

implementação do Back end

Podemos conferir mais detalhes e atualizações em: https://documentation.onesignal.com/reference/create-notification

const OneSignal = require('onesignal-node');

async function sendNotification(){
    const client = new OneSignal.Client('appId', 'apiKey');
    const notification = {
        contents: {
          'en': 'Sua mensagem de notificação aqui',
        },
        included_segments: ['All']
      };
      try {
        const response = await client.createNotification(notification);
        console.log(response.body.id);
      } catch (e) {
          console.log(e.statusCode);
          console.log(e.body);
      }
}

sendNotification();

Este código mostra como usar a biblioteca onesignal-node para enviar notificações push através do OneSignal usando Node.js.

const client = new OneSignal.Client('appId', 'apiKey');

Cria uma instância do cliente OneSignal com o AI e API KEY que criamos.

const notification = {
  contents: {
    'en': 'Sua mensagem de notificação aqui',
  },
  included_segments: ['All']
};

Define o conteúdo da notificação que será enviada. Neste exemplo, a notificação possui um conteúdo ('en') com a mensagem "Sua mensagem de notificação aqui". Em meus teste usando a chave ('pt') ou ('br') não tive uma boa conclusão. A notificação é enviada a todos os segmentos de usuários, conforme especificado em included_segments.

try {
  const response = await client.createNotification(notification);
  console.log(response.body.id);
} catch (e) {
  console.log(e.statusCode);
  console.log(e.body);
}

Aqui, o código tenta enviar a notificação utilizando o método client.createNotification(notification). Em caso de sucesso, o ID da notificação é impresso no console. Se ocorrer algum erro, como um erro de autenticação ou de envio, os detalhes do erro são impressos no console.

Este código mostra como usar a biblioteca onesignal-node para enviar notificações do OneSignal com Node.js. Certifique-se de substituir 'appId' e 'apiKey' pelos valores reais do seu OneSignal.

Link para o projeto no github https://github.com/samuelprogramer/mobile-app-with-onesignal-push-notification

Desenvolvido com SDK OneSginal 11.0

https://documentation.onesignal.com/docs/react-native-sdk-setup

Acesse o site oficial do OneSignal em https://onesignal.com/.
Preencha o formulário de registro com as informações solicitadas. Você precisará fornecer seu nome, endereço de e-mail, senha e confirmar a senha.
Você receberá um e-mail de confirmação no endereço de e-mail que você forneceu. Abra seu e-mail e siga as instruções para confirmar sua conta.
Após a confirmação, você será redirecionado para o painel de controle do OneSignal, onde poderá começar a configurar seu aplicativo e explorar os recursos da plataforma.

Criação do Aplicativo:

No painel de controle, você verá a opção "New App/Website" ou "New App". Clique nela para criar um novo aplicativo.
Escolha um nome para o seu aplicativo e selecione a plataforma em que ele será executado, como iOS, Android, Web, etc.

De modo direto vamos criar uma conta para nosso app no firebase para podermos ativar o FCM

Acesse o Console Firebase https://console.firebase.google.com/ Selecione seu Projeto Firebase: Navegue para o Firebase Cloud Messaging Configuração do Cloud Messaging:

Siga as instruções para configurar o FCM. Isso incluirá a configuração de chaves de servidor, chaves de API e outros detalhes necessários para permitir o envio de notificações.

Gere e Configure a Chave do Servidor:

Uma etapa importante é gerar uma chave do servidor, que será usada para autenticar seu aplicativo com o FCM. Siga as instruções no painel para criar e configurar essa chave.

Essa configuração pode ser observada no Cloud Messaging no painel do aplicativo em questão.

Para obter o arquivo necessário, acesse 'Contas de Serviço' e clique em 'Gerar Nova Chave Privada'. Isso permitirá o download do arquivo necessário para as configurações.

Então asso, com tudo em mão vamos mandar esses dados para a plataforma do OneSginal

Forneça detalhes mais específicos sobre a plataforma na qual o projeto será executado, e qual será a estrutura do seu projeto.

Dessa forma, nosso canal de comunicação está estabelecido e possuímos a chave em nossas mãos. aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa

Veja mais em https://documentation.onesignal.com/docs/keys-and-ids

Criando app

Vamos iniicar um app em expo para receber essas push Notification

npx create-expo-app my-app

Vamos configurar agora o app Nosso exemplo sera com React Native, instalamos as bibliotecas.

yarn: yarn add react-native-onesignal

npm npm install --save react-native-onesignal

Codigo para o app

import { LogLevel, OneSignal } from 'react-native-onesignal';

OneSignal.Debug.setLogLevel(LogLevel.Verbose);
OneSignal.initialize("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa");
OneSignal.Notifications.requestPermission(true);
OneSignal.Notifications.addEventListener('click', (event) => {
  console.log('OneSignal: notification clicked:', event);
});

Para integrar o OneSignal em um aplicativo React Native para receber notificações push. Vou explicar cada parte do código:

OneSignal.initialize("aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa");: Aqui, o código inicializa o OneSignal com o ID do aplicativo.

OneSignal.Notifications.requestPermission(true);: Essa linha solicita permissão ao usuário para receber notificações.

Podemos testar com CURL

curl --request POST \
     --url https://onesignal.com/api/v1/notifications \
     --header 'Authorization: Basic API_KEY' \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "app_id": "APP_ID",
   "contents": {"en": "Sua mensagem de notificação aqui"},
    "included_segments": ["All"]
}
'

Assim temos o resultado em nossa aplicação rodando

implementação do Back end

Podemos conferir mais detalhes e atualizações em: https://documentation.onesignal.com/reference/create-notification

const OneSignal = require('onesignal-node');

async function sendNotification(){
    const client = new OneSignal.Client('appId', 'apiKey');
    const notification = {
        contents: {
          'en': 'Sua mensagem de notificação aqui',
        },
        included_segments: ['All']
      };
      try {
        const response = await client.createNotification(notification);
        console.log(response.body.id);
      } catch (e) {
          console.log(e.statusCode);
          console.log(e.body);
      }
}

sendNotification();

Este código mostra como usar a biblioteca onesignal-node para enviar notificações push através do OneSignal usando Node.js.

const client = new OneSignal.Client('appId', 'apiKey');

Cria uma instância do cliente OneSignal com o AI e API KEY que criamos.

const notification = {
  contents: {
    'en': 'Sua mensagem de notificação aqui',
  },
  included_segments: ['All']
};

Define o conteúdo da notificação que será enviada. Neste exemplo, a notificação possui um conteúdo ('en') com a mensagem "Sua mensagem de notificação aqui". Em meus teste usando a chave ('pt') ou ('br') não tive uma boa conclusão. A notificação é enviada a todos os segmentos de usuários, conforme especificado em included_segments.

try {
  const response = await client.createNotification(notification);
  console.log(response.body.id);
} catch (e) {
  console.log(e.statusCode);
  console.log(e.body);
}

Aqui, o código tenta enviar a notificação utilizando o método client.createNotification(notification). Em caso de sucesso, o ID da notificação é impresso no console. Se ocorrer algum erro, como um erro de autenticação ou de envio, os detalhes do erro são impressos no console.

Link para o projeto no github https://github.com/samuelprogramer/mobile-app-with-onesignal-push-notification

OneSignal Push Notification no React Native

Criando app

implementação do Back end

Outros artigos

OneSignal Push Notification no React Native

Criando app

implementação do Back end

Outros artigos