Aplicativo de lembrete para beber água com Node, React e a Messages API da Vonage

Introdução

Neste artigo, vamos criar um aplicativo web com Node, React e a Messages API do Vonage para permitir que os usuários se inscrevam no serviço e escolham uma determinada frequência para os lembretes. Todos os inscritos receberão lembretes para beber água em intervalos regulares, de acordo com a frequência escolhida.

Beber água é importante porque ajuda a manter o corpo hidratado, o que é essencial para o seu bom funcionamento. A hidratação adequada pode ajudar a melhorar os níveis de energia, fortalecer o sistema imunológico e até mesmo ajudar a prevenir certas doenças.

Fique à vontade para clonar o repositório do GitHub deste tutorial.

Ordem do dia

Neste tutorial, você aprenderá a:

• Criar um servidor de back-end com Node.js

• Adicionar remetente de mensagem no Express e no Node com a Messages API do Vonage

• Adicionar manipulador de frequência com o node-scheduler

• Criar uma interface de usuário (UI) front-end com React.js

• Conecte o backend e o frontend

• Teste o aplicativo

Pré-requisitos

• Um account e um número de telefone da Vonage

• Node e npm instalados

Criar um servidor de back-end com Node.js

É hora de começar a trabalhar no backend do aplicativo.

Crie um diretório principal para o aplicativo Vonage_Drinking_App.

Acesse o terminal e digite mkdir Vonage_Drinking_App.

Acesse esse diretório digitando cd Vonage_Drinking_App no terminal.

Crie uma pasta dentro desta pasta chamada backend.

A seguir, vamos usar a Messages API for Vonage para enviar SMS aos assinantes.

Adicionar remetente de mensagem no Express e no Node com a Messages API do Vonage

A Vonage é uma plataforma global de comunicações em nuvem que permite aos usuários fazer e receber chamadas telefônicas, enviar e receber mensagens de texto e muito mais. Ela oferece uma variedade de serviços, incluindo voz sobre IP (VoIP) e comunicações unificadas, além de mensagens, chat por Video e outros recursos. A Vonage também oferece uma variedade de APIs e SDKs que permitem aos desenvolvedores integrar suas aplicações à plataforma da Vonage. Você pode criar um Account na Vonage a partir painel de controle.

Insira seus dados e Verify seu endereço de e-mail:

Vonage homepage

Sign up

Em seguida, você verá a tela abaixo, na qual deverá indicar se é um desenvolvedor. Selecione os produtos da Vonage que pretende utilizar. Para este tutorial, selecionaremos SMS.

Let's get started page

Sua conta vem com um crédito de 2 €, que você pode usar para um teste, o que é perfeito para esse caso de uso. Acesse o painel para usar a Messages API:

Vonage API Dashboard page

Copie sua chave de API e segredo da API para uso posterior. É hora de criar um novo aplicativo. Acesse Applications ou a Applications na barra lateral esquerda:

Vonage applications page

Clique em “Criar um novo aplicativo” para criar um novo aplicativo:

Create a new Vonage application page

Selecione “Mensagens” nas funcionalidades. Adicione a URL de entrada e a URL de status como https://www.google.com/. Nesta etapa, você pode gerar sua chave privada. Ela será baixada e salva localmente.

Choose application specifications page

Clique no botão “Gerar novo aplicativo” :

Choose application specifications page scrolled down

Você poderá acessar esta página do aplicativo:

Drink water POC application page

Salvar o ID do aplicativo e a chave privada gerada. Você também pode adquirir um número e vincular seu número da Vonage aqui.

Em seguida, você precisa instalar algumas dependências. Digite o seguinte no terminal:

npm install cors@2.8.5 cypress@12.11.0 express@4.18.2 node-schedule@2.1.1 react-dom@18.2.0 react@18.2.0 webpack@5.81.0

Este é o código de exemplo do repositório do GitHub do SDK do Vonage Messages para Node.js , que usaremos para testar se é possível enviar SMS usando a Messages API do Vonage:

const { Auth } = require("@vonage/auth");
const { Messages } = require("@vonage/messages");
const { SMS } = require("@vonage/messages");

PRIVATE_KEY_PATH = "private.key";
const messagesClient = new Messages(
 new Auth({
   apiKey: API_KEY,
   apiSecret: API_SECRET,
   applicationId: APPLICATION_ID,
   privateKey: PRIVATE_KEY_PATH,
 })
 // options
);
messagesClient
 .send(
   new SMS({
     to: "TO NUMBER",
     from: "Vonage APIs",
     text: "Hi from Python Code Nemesis",
   })
 )
 .then((resp) => console.log(resp))
 .catch((err) => console.error(err));

Este é o test_sms.js arquivo no repositório do GitHub. Este código usa a Messages API do Vonage para enviar uma mensagem SMS para um número de telefone. Para executar este arquivo, digite node test_sms.js no seu terminal.

Aqui está uma explicação sobre o test_sms.js código. As três primeiras linhas importam três módulos da @vonage biblioteca: Auth, Messages, e SMS. Auth é usado para autenticação na API da Vonage, Messages é usada para enviar mensagens SMS, e SMS é uma subclasse de Messages usada para construir mensagens SMS.

Em seguida, o código define uma constante PRIVATE_KEY_PATH com o caminho para um arquivo de chave privada. Em seguida, uma instância de Messages é criada com a new palavra-chave, passando um Auth objeto como argumento com o apiKey, apiSecret, applicationIde privateKey propriedades definidas. Essa instância de Messages é armazenada em uma constante chamada messagesClient.

Por fim, o send() método é chamado ao messagesClient para enviar uma mensagem SMS. O send() método recebe uma instância de SMS como argumento, com o to, frome text definidas como o número de telefone do destinatário, o nome ou número do remetente e o texto da mensagem, respectivamente. O then() método é chamado na Promise retornada para registrar a resposta da API da Vonage, e o catch() método é chamado para registrar quaisquer erros que ocorram durante o processo de envio.

Assim que isso for executado com sucesso, poderemos criar nosso aplicativo de back-end usando esse código.

Adicionar um manipulador de frequência com o Node-Scheduler

O próximo passo é enviar um SMS para o número inserido no front-end no sign-up ponto de extremidade. Agendaremos lembretes para cada assinante com base na frequência que eles selecionarem na interface do usuário.

Crie um arquivo app.js na pasta backend e adicione o seguinte código:

const express = require("express");
const app = express();
const cors = require("cors");
const { SMS } = require("@vonage/messages");
const schedule = require("node-schedule");
const { Auth } = require("@vonage/auth");
const { Messages } = require("@vonage/messages");

PRIVATE_KEY_PATH = "private.key";

// A list to store phone numbers and frequency of reminders

const subscribers = [];

const messagesClient = new Messages(
 new Auth({
   apiKey: API_KEY,
   apiSecret: API_SECRET,
   applicationId: APPLICATION_ID,
   privateKey: PRIVATE_KEY_PATH,
 })
 // options
);

function sendReminders(phoneNumber) {
 const from = "Reminder App";
 const to = phoneNumber;
 const text = "This is your reminder to have a glass of water!";

 messagesClient
   .send(
     new SMS({
       to: to,
       from: from,
       text: text,
     })
   )
   .then((resp) => console.log(resp))
   .catch((err) => console.error(err));
}

app.use(cors());
app.use(express.urlencoded({extended: true}));
app.use(express.json())

app.post("/sign-up", (req, res) => {
 const phoneNumber = req.body.phoneNumber;
 const frequency = req.body.frequency;

 // Add the phone number and frequency to the subscriber's list
 subscribers.push({ phone_number: phoneNumber, frequency: frequency });

 const from = "Reminder App";
 const to = phoneNumber;
 const text = "Welcome to the Drinking Water Reminder App! You will receive reminders as per your selected frequency.";

 messagesClient
   .send(
     new SMS({
       to: phoneNumber,
       from: from,
       text: text,
     })
   )
   .then((resp) => console.log(resp))
   .catch((err) => console.error(err));

 schedule.scheduleJob(`*/${frequency} * * * *`, () => {
   sendReminders(phoneNumber);
 });

 console.log(
   `Send message to ${phoneNumber} with frequency ${frequency} minute`
 );

 res.status(200).json({ status: "ok" });
});

app.listen(5000, () => {
 console.log("Server started on port 5000");
});

Esta é uma aplicação do lado do servidor em Node.js que utiliza o framework Express para criar um servidor web. Ela também se integra à Messages API do Vonage para enviar lembretes aos assinantes.

O código começa importando os módulos necessários: express, body-parser, cors, @vonage/messages, node-schedule, e @vonage/auth. Em seguida, define uma variável constante PRIVATE_KEY_PATH com o caminho para a chave privada da API da Vonage. Em seguida, cria uma lista chamada subscribers para armazenar números de telefone e a frequência dos lembretes. Em seguida, cria uma nova instância da Messages classe do @vonage/messages módulo, que é usada para enviar mensagens SMS por meio da API da Vonage. Ela define a chave de API, o segredo de API, o ID do aplicativo e a chave privada necessários usando uma instância da classe Auth.

A sendReminders função foi definida para enviar lembretes para um número de telefone específico. Ela recebe o número de telefone como argumento, define o from e text variáveis para a mensagem SMS e, em seguida, envia a mensagem por meio do messagesClient usando o send método.

Em seguida, o código cria uma nova instância do express aplicativo e configura o middleware para lidar com solicitações JSON e habilitar o compartilhamento de recursos entre origens (CORS) para aplicativos web.

O servidor configura uma rota para a POST solicitação para /sign-up. Quando um cliente envia uma solicitação para esse endpoint com um número de telefone e uma frequência no corpo da solicitação, o servidor adiciona o número de telefone e a frequência à subscribers lista. Em seguida, ele envia uma mensagem de boas-vindas para o número de telefone do assinante por meio do messagesClient e programa lembretes na frequência especificada usando o node-schedule módulo.

Por fim, o servidor retorna uma resposta JSON indicando que a solicitação foi bem-sucedida.

Por que ativamos o CORS?

O CORS (Cross-Origin Resource Sharing) é um mecanismo que permite que recursos (como scripts, imagens ou estilos) sejam solicitados a partir de um domínio diferente daquele que hospedou a página da web.

Os erros CORS ocorrem quando uma página da web tenta fazer uma solicitação (por exemplo, via JavaScript) a um domínio diferente daquele que hospedou a página, e o servidor que hospeda o recurso solicitado não retorna os cabeçalhos CORS apropriados.

O objetivo do CORS é impedir que uma página da web maliciosa faça solicitações não autorizadas a outro domínio. Os navegadores aplicam as restrições do CORS verificando a presença de cabeçalhos HTTP específicos na resposta do servidor, como o Access-Control-Allow-Origin.

Execute este arquivo com node app.js. Você verá a mensagem “O servidor foi iniciado na porta 5000” assim que o servidor estiver em execução:

Console log

O servidor começa a escutar na porta 5000, e uma mensagem é exibida no console indicando que o servidor foi iniciado. Quando você insere algum dado na interface do aplicativo, os registros são exibidos no console com os UUIDs das mensagens.

Ótimo! O backend está pronto e já está funcionando. Agora é hora de adicionar o código do frontend.

Criar uma interface de usuário (UI) front-end com React.JS

A interface do usuário deste aplicativo utilizará o framework React.js.

Alguns pré-requisitos são: você deve ter o Node.js e o npm instalados no seu sistema. Certifique-se de estar usando a versão mais adequada.

nvm install <version>
nvm use <version>

Se necessário, você também pode atualizar o Node. No diretório raiz do projeto, crie uma pasta chamada frontend. Dentro dessa pasta, acesse o frontend e inicialize um novo projeto React:

npx create-react-app .

Execute o aplicativo React:

npm start

Verifique se o aplicativo está em execução acessando http://localhost:3000 no seu navegador. Você deverá ver o aplicativo React padrão.

Crie um novo componente DrinkingWaterForm no frontend/src diretório com o seguinte código para permitir que os usuários se inscrevam para receber lembretes:

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { responsivePropType } from "react-bootstrap/esm/createUtilityClasses";
import drinkwater from './drinkwater.jpg';

const DrinkingWaterForm = () => {
 const [phoneNumber, setPhoneNumber] = useState("");
 const [frequency, setFrequency] = useState("");

 const handleSubmit = async (event) => {
   event.preventDefault();

   console.log(
     JSON.stringify({
       phoneNumber: phoneNumber,
       frequency: frequency,
     })
   );

   let res;

   try {
     res = await fetch("http://127.0.0.1:5000/sign-up", {
       method: "POST",
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         phoneNumber: phoneNumber,
         frequency: frequency,
       }),
     });
   } catch (error) {
     console.log(error);
   }

   if (res.ok) {
     await res.json();
   } else {
     window.alert(res.status());
   }
 };

 return (
   <div style={containerStyle}>
     <img src={drinkwater} alt="this is a car image" width={"400px"} height={"220px"}/>
     <h1 style={titleStyle}>Drinking Water Reminder Service</h1>
     <Form onSubmit={handleSubmit} style={formStyle}>
       <Form.Group>
         <Form.Label style={formLabelStyle}>Phone Number</Form.Label>
         <Form.Control
           type="tel"
           value={phoneNumber}
           onChange={(event) => setPhoneNumber(event.target.value)}
           required
           style={formControlStyle}
         />
       </Form.Group>
       <Form.Group>
         <Form.Label style={formLabelStyle}>Frequency (mins)</Form.Label>
         <Form.Control
           type="number"
           value={frequency}
           onChange={(event) => setFrequency(event.target.value)}
           required
           style={formControlStyle}
         />
       </Form.Group>
       <Button type="submit" style={submitButtonStyle}>
         Sign Up
       </Button>
     </Form>
   </div>
 );
};

const containerStyle = {
 display: "flex",
 flexDirection: "column",
 alignItems: "center",
 padding: "50px",
 backgroundColor: "#7DCE82",
};

const imageStyle = {
 width: "150px",
 marginBottom: "25px",
};

const titleStyle = {
 marginBottom: "25px",
 color: "#FFFFFF",
};

const formStyle = {
 width: "50%",
 marginTop: "25px",
};

const formLabelStyle = {
 color: "#FFFFFF",
};

const formControlStyle = {
 backgroundColor: "#FFFFFF",
};

const submitButtonStyle = {
 backgroundColor: "#048C03",
 color: "#FFFFFF",
};

export default DrinkingWaterForm;

Este componente React representa um formulário para que os usuários se inscrevam em um serviço de lembretes para beber água. O formulário permite que o usuário insira seu número de telefone e a frequência com que deseja receber lembretes para beber água.

O componente importa os módulos necessários, incluindo componentes do React Bootstrap para elementos de formulário e uma imagem para exibição. Ele define vários estilos para o contêiner, a imagem, o título, o formulário, os rótulos do formulário, os controles do formulário e o botão de envio.

O componente utiliza o useState hook para gerenciar o estado do phoneNumber e frequency campos do formulário. Ele define uma handleSubmit função que é chamada quando o usuário envia o formulário. A função registra os dados do formulário no console e, em seguida, faz uma solicitação POST para o endpoint da API de back-end /sign-up com os dados do formulário.

Se a solicitação for bem-sucedida, a função retorna a resposta em JSON. Caso contrário, exibe uma janela de alerta com o código de status da resposta.

O componente exibe o formulário com o Form e Button do React Bootstrap. O formulário inclui dois campos de entrada para número de telefone e frequência, além de um botão de envio.

Quando o usuário insere dados nos campos de entrada e clica no botão “Enviar”, a handleSubmit função é chamada para enviar os dados do formulário ao endpoint da API do backend. O componente também exibe uma imagem e um título para o formulário e aplica os estilos definidos anteriormente aos diversos elementos do formulário.

Adicione qualquer imagem ao diretório que você deseja exibir na interface do usuário e substitua o caminho da imagem pelo caminho correto.

Atualize o frontend/src/App.js arquivo para incluir o DrinkingWaterForm componente:

import React from "react";
import DrinkingWaterForm from "./DrinkingWaterForm";
function App() {
 return (
   <div>
     <h1>Drinking Water Reminder Service</h1>
     <DrinkingWaterForm />
   </div>
 );
}
export default App;

Conecte o backend e o frontend

É hora de executar o front-end e o back-end juntos.

Acesse um terminal e entre no diretório backend a partir da raiz do projeto.

Digite node app.js para iniciar o backend. Em seguida, em um terminal separado, acesse o diretório frontend e digite:

npm start

Ótimo, você conseguiu fazer com que o front-end e o back-end funcionassem simultaneamente! Abra http://localhost:3000 no seu navegador para ver o aplicativo Lembrete para Beber Água.

Drinking water Reminder Service home page

Perfeito! Você criou um aplicativo de lembrete para beber água usando Node, Vonage e React! Agora você pode testá-lo com os dados de entrada que desejar.

Primeiro, você precisa adicioná-lo aos números de teste, pois nas contas de teste no Painel do Vonage só é possível usar números de teste pré-verificados; para isso, basta acessar seus números e verificá-los. Saiba mais sobre números de telefone aqui.

Acesse localhost:3000 e insira seu número de telefone no formato [CÓDIGO DO PAÍS]; por exemplo, se for um número da Grã-Bretanha, seria 44xxxxxxxxxx, e a frequência com que você deseja receber lembretes como assinante. Aqui, ao inserir o número 1 e um determinado número, inicialmente, uma mensagem é enviada para esse número. A partir daí, a cada 1 minuto, você receberá um lembrete por SMS para beber água!

Conclusão

Este artigo mostrou como criar um aplicativo web de lembrete para beber água, baseado em assinatura, usando Node, React e a Messages API da Vonage. Este tutorial apresentou a você como usar as APIs da Vonage em seus projetos.

Se você estiver interessado em saber mais sobre as APIs da Vonage e o que elas podem fazer, confira o Portal do Desenvolvedor de APIs da Vonage. Lá você encontrará documentação, exemplos de código e tutoriais para uma ampla variedade de APIs, incluindo SMS, voz, vídeo e muito mais.

Você também pode se manter atualizado sobre as últimas notícias e novidades da Vonage seguindo a empresa no Twitter (@VonageDev) e participando da comunidade no Slack. Esses canais são ótimos lugares para se conectar com outros desenvolvedores, tirar dúvidas e saber mais sobre a Vonage e suas APIs.

Nós o incentivamos a continuar explorando diferentes APIs e frameworks com a Vonage. Há muitas possibilidades para criar Applications inovadoras e úteis. Um abraço!