Meu Primeiro App com React Native - #30 Formulário de Push Notificações

30/10/2020

Nesse tutorial vamos incrementar nosso envio de mensagens push criando um formulário para personalizar o conteúdo das mensagens.

Formulário para envio de mensagens push

Vamos começar instalando o módulo Handlebars:

npm install express-handlebars

Controller.js

Iniciaremos importando o módulo handlebars e criaremos as rotas necessárias para implementação do formulário de mensagens push:

const exphbs  = require('express-handlebars');

app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

//View de envio de mensagens
app.get('/',async (req,res)=>{
   let response=await token.findAll({
       raw:true
   });
    res.render('mensagem',{users:response});
});

app.post('/notifications',async (req,res)=>{
    let messages = [];
    let somePushTokens=[];

    if(req.body.recipient == ""){
        let response=await token.findAll({
            raw: true
        });
        response.map((elem,ind,obj)=>{
            somePushTokens.push(elem.token);
        });
    }else{
        somePushTokens.push(req.body.recipient);
    }

(continua igual da última aula...)

messages.push({
    to: pushToken,
    sound: 'default',
    title: req.body.title,
    body: req.body.message
});

views/layouts/main.handlebars

Dentro de view criaremos a pasta layouts que vai receber o template padrão do sistema e dentro dessa pasta o arquivo main.handlebars.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mensagem</title>
</head>
<body>
    {{{body}}}
</body>
</html>

views/mensagem.handlebars

Bora criar agora o arquivo que vai receber o formulário de mensagens push:

<h1>Mensagem Push</h1>
<form name='form1' id='form1' method='post' action='/notifications'>
    Título: <input type='text' name='title' id='title'><br>
    Destinatário:
    <select name='recipient' id='recipient'>
        <option value=''>Todos</option>
        {{#users}}
            <option value='{{token}}'>{{token}}</option>
        {{/users}}
    </select><br>
    Mensagem: <textarea name='message' id='message'></textarea><br>
    <input type='submit' value='Enviar'>
</form>

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

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Meu Primeiro App com React Native - #29 Enviando Notificações Push

Nesse tutorial continuaremos a trabalhar com push notificações com React Native, fazendo o envio das notificações para os celulares dos usuários.

Meu Primeiro App com React Native - #31 Deploy com Heroku I - Database

No tutorial de hoje iniciaremos o deploy da nossa aplicação criada em NodeJS para o servidor Heroku enviando para o ar o banco de dados.

React JS

Nessa seção aprenderemos sobre essa importante biblioteca Javascript desenvolvida pelo Facebook para facilitar a construção backend dos nossos websites.