Meu Primeiro App com React Native - #28 Introdução a Notificações Push

Nessa aula começamos a trabalhar no nosso APP criado com React Native com Expo Notifications, para exibir notificações push para o usuário.

Expo Notifications

Vamos precisar instalar os seguintes módulos (notifications, permissions e constants):

expo install expo-notifications
expo install expo-permissions
expo install expo-constants

App.js

Primeiramente importaremos os três módulos anteriormente instalados e o arquivo de configuração config.json:

import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import {Notifications} from 'expo';
import config from './config/config';

Posteriormente precisamos pegar o token relativo a cada celular que possua o nosso app:

const [expoPushToken, setExpoPushToken] = useState(null);

useEffect(()=>{
  registerForPushNotificationsAsync();
},[]);

useEffect(()=>{
  if(expoPushToken != null){
      sendToken();
  }
},[expoPushToken]);


//Registra o token do usuário
async function registerForPushNotificationsAsync(){
    if (Constants.isDevice) {
        const { status: existingStatus } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
        let finalStatus = existingStatus;
        if (existingStatus !== 'granted') {
            const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
            finalStatus = status;
        }
        if (finalStatus !== 'granted') {
            alert('Failed to get push token for push notification!');
            return;
        }
        const token = await Notifications.getExpoPushTokenAsync();
        setExpoPushToken(token);
    } else {
        alert('Must use physical device for Push Notifications');
    }

    if (Platform.OS === 'android') {
        Notifications.createChannelAndroidAsync('default', {
            name: 'default',
            sound: true,
            priority: 'max',
            vibrate: [0, 250, 250, 250],
        });
    }
}

 //Envio do token
async function sendToken()
{
    let response=await fetch(config.urlRoot+'token',{
        method:'POST',
        headers:{
            Accept:'application/json',
            'Content-Type':'application/json'
        },
        body: JSON.stringify({
            token: expoPushToken
        })
    });
}

Controller.js

No nosso backend (Controller.js) iremos criar a rota token que armazenará o token de todos os usuários no banco:

let token=models.Token;
//Grava o token no banco
app.post('/token',async(req,res)=>{
    let response=await token.findOne({
        where:{token:req.body.token}
    });
    if(response == null){
        token.create({
            token: req.body.token,
            createdAt: new Date(),
            updatedAt: new Date()
        });
    }
});

Precisamos agora criar a tabela e o model do banco que receberão os tokens dos usuários do app:

npx sequelize-cli model:generate --name Token --attributes token:string
npx sequelize-cli db:migrate

Na próxima aula continuamos com Push Notifications. Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com