Como usar o OneSignal com um aplicativo de bate-papo nativo do React | Parte TRÊS

Krissanawat Kaewsanmuang em Level Up Your Code Seguir 12 de jul · 6 min ler

Neste tutorial, aprenderemos a integrar a notificação push do OneSignal ao projeto do aplicativo React Native Chat. Para este tutorial, vamos implementá-lo apenas na plataforma Android usando um dispositivo Android. O OneSignal é um serviço popular que permite notificações push em um dispositivo, abstraindo detalhes como a plataforma na qual o dispositivo está sendo executado. Usando o plug-in OneSignal, os aplicativos móveis podem enviar e receber notificações por push. Então, vamos implementar este serviço OneSignal no nosso aplicativo de bate-papo React Native para habilitar notificações push.

Pré requisito

Basicamente, para integrar o OneSignal ao React Native, devemos ter os dois requisitos a seguir:

  1. um código inicial
  2. Dispositivo de hardware Android (porque o emulador do Android é muito lento)

Configurando o OneSignal

Na primeira etapa, vamos configurar nosso serviço OneSignal. Para isso, precisamos entrar no site da Onesignal e fazer login em nossa conta OneSignal. Note que: Se você não tem uma conta, você pode facilmente fazer uma registrando no site ou usando o login do Google, Facebook ou Github, como mostrado na imagem abaixo:

Após o login, precisamos criar um novo aplicativo. Para isso, primeiro precisamos selecionar uma plataforma. Aqui, vamos selecionar a plataforma "Google Android", conforme mostrado no snippet de código abaixo:

Em seguida, precisamos da chave do servidor firebase para estabelecer a comunicação entre o sistema de mensagens em nuvem do OneSignal e do Firebase, conforme mostrado na captura de tela abaixo:

Para a chave do servidor do Firebase, precisamos acessar o Firebase console e criar um aplicativo do Firebase. Depois da criação bem-sucedida do aplicativo do Firebase, precisamos acessar "Configurações". Então, precisamos navegar para a guia "nuvem de mensagens" e copiar a chave do servidor e o ID do remetente conforme mostrado na captura de tela abaixo:

Agora, precisamos retornar à nossa configuração da plataforma do OneSignal e colar a chave do Firebase Server e o ID do remetente no formulário OneSignal, conforme mostrado na captura de tela abaixo:

Após a conclusão da configuração da plataforma, precisamos escolher o SDK para nosso aplicativo OneSignal. Aqui, vamos selecionar Reagir SDK nativo como nosso SDK de aplicativos.

Após a seleção do SDK, recebemos nosso AppID para enviar notificação por push, conforme mostrado na captura de tela abaixo:

Agora, precisamos clicar no botão "FEITO", que nos permite navegar até o nosso painel do OneSignal, como mostra a imagem abaixo:

Depois disso, precisamos acessar nosso documento SDK nativo do React e adicionar o código do snippet de código do OneSignal ao nosso aplicativo, mostrado no snippet de código abaixo:

Aqui, usamos três funções para exibir o log de atividades, como você pode ver no snippet de código acima. E quando abrirmos o aplicativo, ele se registrará automaticamente no OneSignal conforme mostrado na captura de tela abaixo:

Agora, vamos testar nosso aplicativo OneSignal enviando uma mensagem do console do OneSignal.

Primeiro, precisamos ir para a guia Mensagem crie uma nova mensagem como mostrado na captura de tela do console OneSignal abaixo:

Podemos ver a configuração de nossa primeira mensagem na captura de tela abaixo à esquerda e como uma notificação por push aparecerá na captura de tela exibida abaixo à direita:

Agora, precisamos confirmar se estamos realmente enviando uma mensagem para o dispositivo Android. Se estamos enviando uma mensagem, clicamos no botão ENVIAR MENSAGEM , como mostra a imagem abaixo:

Aqui, podemos ver que está funcionando como esperado. Podemos receber uma mensagem no nosso dispositivo Android, como você pode ver na simulação abaixo:

Depois disso, vamos redirecionar o nosso para painel analítico de mensagens, que é mostrado na imagem abaixo:

Envio de notificação por push

Nesta etapa, estamos enviando uma notificação por push para nosso aplicativo React Native chat usando o aplicativo OneSignal que configuramos em nossa etapa anterior. Aqui, vamos usar a API rest para enviar mensagens ao servidor OneSignal. Precisamos construir um URL e uma carga útil, conforme mostrado no snippet de código abaixo:

Aqui, podemos simplesmente copiar o código acima e colá-lo em nosso projeto React Native, mas devemos lembrar que precisamos de uma chave de servidor para criar o cabeçalho Authorization e app_id para construir a mensagem.

Note que: Mais configurações de mensagens estão disponíveis na documentação do OneSignal aqui .

Agora, precisamos adicionar uma função sendNotification () com uma mensagem ao componentDidMount do nosso aplicativo React Native, conforme mostrado no snippet de código abaixo:

 componentDidMount () { 
this.sendNotification ('Saudação do Chat App');
}

Agora, podemos observar que a notificação é exibida como uma caixa de alerta quando iniciamos nosso aplicativo, conforme mostrado na captura de tela do dispositivo abaixo:

Agora, precisamos usar esse recurso quando um usuário entrar ou sair do canal. Para isso, podemos usar o código fornecido no snippet de código abaixo com a função PresenceStatus :

Aqui, estamos chamando sendNotification () em duas condições. Uma é quando um usuário entra no canal e outro é quando um usuário sai do canal, conforme mostrado no snippet de código acima. Agora, vamos experimentá-lo no nosso dispositivo Android.

Para o modo de teste, podemos usar o emulador do Android no Mac. Mas, é muito lento, então nós transmitimos um dispositivo de hardware e usamos o simulador do iPhone, como mostrado no snippet de código abaixo:

Podemos ver que está funcionando corretamente. Mas a notificação não parece familiar e está bem integrada na interface do usuário. Então, para isso, precisamos do alerta de notificação do cabeçalho. A solução para o estilo de notificação de configuração na documentação do OneSignal e também disponível no snippet de código mostrado abaixo:

Agora, precisamos recarregar nosso aplicativo React e verificá-lo. Você pode ver que tudo está funcionando como deveria agora. Isso conclui nosso tutorial interessante para integrar uma notificação por push usando o serviço OneSignal em nosso aplicativo de bate-papo nativo de resposta.

Conclusão

Neste tutorial, aprendemos a configurar o serviço OneSignal criando um aplicativo OneSignal. Então, usando o aplicativo OneSignal, aprendemos como habilitar a notificação push em nosso aplicativo de bate-papo React Native. Também obtivemos informações detalhadas sobre como enviar uma notificação por push quando um usuário entra ou sai de uma sala de bate-papo. O código deste tutorial está disponível gratuitamente no Github .

Texto original em inglês.