API de Notificações - EXPO SDK

Criando um aplicativo de notificação com o EXPO

O intuito desse tutorial é mostrar o funcionamento da Api de Notificações do EXPO, disponível em: https://docs.expo.io/versions/latest/sdk/notifications/

Desta forma, já deixei nesse link o componente inicial e os estilos da aplicação disponíveis para vocês. Mas qualquer dúvida em relação a essa parte, você pode me consultar no email ou em:

- LinkedIn / Instagram

Começando com as importações

- useState: hook para declarar os estados da nossa aplicação;

- useEffect: aqui iremos definir as funções que serão chamadas quando o dispositivo receber uma nova notificação;

- * as Notification: estamos importando todos os métodos que a api do expo-notification possui;

Mão na Massa

Agora que nossas importações foram feitas, podemos iniciar o desenvolvimento.

•  Definindo se a notificação pode ser mostrada para o usuário ou não

Para essa definição, utilizamos o método setNotificationHandler. Ele chama a função handleNotification que define o que a notificação deve fazer ao ser mostrada. No caso, a notificação pode ser mostrada (shouldShowAlert), pode produzir som após a ação (shouldPlaySound) e não permite que apareça a quantidade de notificações (shouldSetBadge).

•  Definindo os estados

- text: será utilizado para definir a mensagem que será enviada pelo usuário no TextInput;

- notification: retornará true ou false quando a notificação for mostrada ou não;

- laoding: retornará true ou false quando a notificação acabar de ser processada ou não.

•  Obtendo o token push do dispositivo

Precisamos declarar uma função para verificar se o usuário permitiu ou não que a notificação seja mostrada na tela. Para isso, criamos a registerForPushNotificationsAsync,  que verifica esse status com o método getPermissionsAsync(). Caso seja igual à 'granted', ele retornará o token push do dispositivo.

Para chamar essa função, iremos utilizar o useEffect, que irá obter o token quando o usuário entrar na aplicação. Essa ação virá através de um alert que será mostrado perguntando ao usuário se ele aceita que a notificação seja mostrada (método getPermissionsAsync). Sendo assim, após a confirmação, você poderá utilizar esse token para a armazenar em um servidor, por exemplo.

• Recebendo a notificação

Definimos a constante notificationListener, que receberá o método addNotificationReceivedListener, o qual é chamado sempre que uma notificação for recebida e setará o estado notification com o valor true quando isso ocorrer.

No fim, temos que remover essa notificação com o método removeNotificationSubscription.

• Definindo a notificação

Declaramos a função pushNotification, que irá chamar o método scheduleNotificationAsync, que agenda uma notificação após um período. No caso, a notificação com o título 'Você tem uma nova mensagem' e o texto que o usuário digitou, vindo como parâmetro, irá ser chamada  2 segundos depois que o usuário clicar em 'ENVIAR NOTIFICAÇÃO'.

• Definindo a função que irá enviar a notificação

Chamamos a função de handleSubmit, que irá ser chamada ao clicar no botão 'ENVIAR NOTIFICAÇÃO'. Ao clicar, irá produzir o efeito de loading setando ele como true e também fará o teclado se recolher. Além disso, é aqui que chamamos a função pushNotification, que enviará o texto digitado pelo usuário para aparecer a notificação na tela.

• Chamando a função e os estados no retorno do componente

Agora que já declaramos tudo que iremos precisar para a nossa aplicação ficar completa, só temos que inserir a função handleSubmit e os estados notification e loading nos componentes.

- Primeiro, queremos que o componente de notificação que criamos apareça na tela apenas quando houver notificação, se não ele será retornado sem o título e a mensagem. Desta forma, adicionamos o estado notification como código js: {notification &&}, que verifica se notification está true, caso sim, retorna o que vem depois de &&. No caso o componente, o título e a mensagem.

- Depois, adicionamos a função handleSubmit no onPress, ou seja, será chamada quando clicarmos no botão.

- Por fim, quando o botão for clicado, chamamos o componente ActivityIndicator, que será mostrado na tela quando o loading estiver true e a notificação estiver false.

Chegamos ao fim do tutorial, espero que tenham gostado :)

O componente final está disponível aqui: https://snack.expo.io/@mafealm/notifications

Até a próxima...