Application de rappel pour l'eau potable avec Node, React et l'API Messages de Vonage

Introduction

Dans cet article, nous allons construire une application web avec Node, React et l'API Messages de Vonage pour permettre aux utilisateurs de s'abonner au service et de choisir une certaine fréquence pour les rappels. Tous les abonnés recevront des rappels pour boire de l'eau à intervalles réguliers en fonction de la fréquence choisie.

Boire de l'eau est important car cela permet de maintenir le corps hydraté, ce qui est essentiel à son bon fonctionnement. Une bonne hydratation peut contribuer à améliorer les niveaux d'énergie, à renforcer le fonctionnement du système immunitaire et même à prévenir certaines maladies.

Vous pouvez cloner le dépôt dépôt GitHub pour ce tutoriel.

Ordre du jour

Dans ce tutoriel, vous apprendrez à :

• Créer un serveur backend avec Node.js

• Ajouter un expéditeur de messages dans Express et Node avec l'API Messages de Vonage

• Ajout d'un gestionnaire de fréquence avec un planificateur de nœuds

• Créer une interface utilisateur frontale avec React.js

• Connecter le backend et le frontend

• Tester l'application

Conditions préalables

• Un compte et un numéro de téléphone Vonage

• Node et npm installés

Créer un serveur backend avec Node.js

Il est temps de commencer avec le backend de l'application.

Créer un répertoire d'application principal Vonage_Drinking_App.

Allez dans votre terminal et tapez mkdir Vonage_Drinking_App.

Entrez dans ce répertoire en tapant cd Vonage_Drinking_App dans le terminal.

Créez un répertoire à l'intérieur de ce répertoire appelé backend.

Ensuite, nous utiliserons l Messages API de Vonage pour envoyer des SMS aux abonnés.

Ajouter un expéditeur de messages dans Express et Node avec l'API Messages de Vonage

Vonage est une plateforme mondiale de communications en nuage qui permet aux utilisateurs de passer et de recevoir des appels téléphoniques, d'envoyer et de recevoir des messages texte, etc. Elle propose une gamme de services, notamment la voix sur IP (VoIP) et les communications unifiées, ainsi que la messagerie, le chat vidéo et d'autres fonctionnalités. Vonage fournit également une gamme d'API et de SDK qui permettent aux développeurs d'intégrer leurs applications à la plateforme Vonage. Vous pouvez créer un compte Vonage à partir de le tableau de bord.

Saisissez vos coordonnées et vérifiez votre adresse électronique :

Vonage homepage

Sign up

Ensuite, vous pourrez voir l'écran ci-dessous, où vous choisirez si vous êtes un développeur. Sélectionnez les produits Vonage que vous prévoyez d'utiliser. Pour ce tutoriel, nous allons sélectionner SMS.

Let's get started page

Votre Account est livré avec un crédit de 2€, que vous pouvez utiliser pour un essai, ce qui est parfait pour ce cas d'utilisation. Accédez au tableau de bord pour utiliser l'API Messages :

Vonage API Dashboard page

Copiez votre clé API et le secret API pour une utilisation ultérieure. Il est temps de créer une nouvelle application. Allez dans Applications ou l'onglet Applications dans la barre latérale gauche :

Vonage applications page

Cliquez sur "Créer une nouvelle application" pour créer une nouvelle application :

Create a new Vonage application page

Sélectionnez Messages dans les capacités. Ajoutez l'URL entrante et l'URL d'état comme suit https://www.google.com/. À cette étape, vous pouvez générer votre clé privée. Elle sera téléchargée et enregistrée localement.

Choose application specifications page

Cliquez sur le bouton Générer une nouvelle application bouton :

Choose application specifications page scrolled down

Vous pourrez consulter cette page de candidature :

Drink water POC application page

Sauvegarder le ID de l'application et la clé privée générée. Vous pouvez également acheter un numéro et lier votre numéro Vonage ici.

Ensuite, vous devez installer quelques dépendances. Tapez ce qui suit dans votre 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

Voici l'exemple de code du dépôt GitHub de Vonage Messages SDK for Node js Vonage Messages SDK for Node.js GitHub repository que nous utiliserons pour tester si nous pouvons envoyer des SMS en utilisant l'API Messages de 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));

Il s'agit du fichier test_sms.js dans le dépôt dépôt GitHub. Ce code utilise l'API Messages de Vonage pour envoyer un SMS à un numéro de téléphone. Pour exécuter ce fichier, tapez node test_sms.js dans votre terminal.

Voici une explication du test_sms.js code. Les trois premières lignes importent trois modules de la @vonage . Les trois premières lignes importent trois modules de la bibliothèque Auth, Messageset SMS. Auth est utilisé pour s'authentifier auprès de l'API de Vonage, Messages est utilisée pour envoyer des SMS, et SMS est une sous-classe de Messages utilisée pour construire des messages SMS.

Ensuite, le code définit une constante PRIVATE_KEY_PATH avec le chemin d'accès à un fichier de clé privée. Ensuite, une instance de Messages est créée à l'aide du mot-clé new en passant un objet Auth en tant qu'argument avec l'option apiKey, apiSecret, applicationId, et privateKey sont définies. Cette instance de Messages est stockée dans une constante appelée messagesClient.

Enfin, la méthode send() est appelée sur messagesClient pour envoyer un SMS. La méthode send() prend en argument une instance de SMS en tant qu'argument, avec l'élément to, from, et text sont respectivement le numéro de téléphone du destinataire, le nom ou le numéro de l'expéditeur et le texte du message. La méthode then() est appelée sur la promesse renvoyée pour enregistrer la réponse de l'API Vonage, et la méthode catch() est appelée pour consigner toute erreur survenue au cours du processus d'envoi.

Une fois l'exécution réussie, nous pouvons créer notre application backend à l'aide de ce code.

Ajouter un gestionnaire de fréquence avec Node-Scheduler

L'étape suivante consiste à envoyer un SMS au numéro saisi dans le frontend dans le point de terminaison sign-up dans le point de terminaison. Nous programmerons des rappels pour chaque abonné en fonction de la fréquence qu'il aura sélectionnée dans l'interface utilisateur.

Créez un fichier app.js dans le dossier backend et ajoutez le code suivant :

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");
});

Il s'agit d'une application côté serveur Node.js qui utilise le framework Express pour créer un serveur web. Elle s'intègre également à l'API Messages de Vonage pour envoyer des rappels aux abonnés.

Le code commence par importer les modules nécessaires : express, body-parser, cors, @vonage/messages, node-scheduleet @vonage/auth. Il définit ensuite une variable constante PRIVATE_KEY_PATH avec le chemin d'accès à la clé privée de l'API Vonage. Ensuite, il crée une liste appelée subscribers pour stocker les numéros de téléphone et la fréquence des rappels. Ensuite, il crée une nouvelle instance de la classe Messages du module @vonage/messages qui est utilisée pour envoyer des messages SMS via l'API de Vonage. Elle définit la clé API, le secret API, l'ID de l'application et la clé privée requis à l'aide d'une instance de la classe Auth.

La fonction sendReminders est définie pour envoyer des rappels à un numéro de téléphone spécifique. Elle prend le numéro de téléphone en argument, définit les paramètres from et text pour le message SMS, puis envoie le message par l'intermédiaire de la fonction messagesClient en utilisant la méthode send à l'aide de la méthode

Le code crée ensuite une nouvelle instance de l'application express et met en place un intergiciel pour traiter les requêtes JSON et activer le partage des ressources inter-origines (CORS) pour les applications web.

Le serveur met en place un itinéraire pour que la POST vers /sign-up. Lorsqu'un client envoie une requête à ce point d'accès avec un numéro de téléphone et une fréquence dans le corps de la requête, le serveur ajoute le numéro de téléphone et la fréquence à la subscribers à la liste. Il envoie ensuite un message de bienvenue au numéro de téléphone de l'abonné par l'intermédiaire de la fonction messagesClient et planifie des rappels à la fréquence spécifiée à l'aide du module node-schedule module.

Enfin, le serveur renvoie une réponse JSON indiquant que la demande a abouti.

Pourquoi avons-nous activé CORS ?

CORS (Cross-Origin Resource Sharing) est un mécanisme qui permet de demander des ressources (telles que des scripts, des images ou des styles) à partir d'un domaine différent de celui qui a servi la page web.

Les erreurs CORS se produisent lorsqu'une page web tente d'envoyer une requête (par exemple, via JavaScript) à un domaine différent de celui qui a servi la page web, et que le serveur hébergeant la ressource demandée ne renvoie pas les en-têtes CORS appropriés.

L'objectif de CORS est d'empêcher une page web malveillante d'envoyer des requêtes non autorisées à un autre domaine. Les navigateurs appliquent les restrictions CORS en vérifiant la présence d'en-têtes HTTP spécifiques dans la réponse du serveur, tels que Access-Control-Allow-Origin.

Exécutez ce fichier avec node app.js. Vous pourrez voir le message "Serveur démarré sur le port 5000" une fois que le serveur sera lancé :

Console log

Le serveur commence à écouter sur le port 5000, et un message est imprimé sur la console indiquant que le serveur a démarré. Lorsque vous passez une entrée dans le frontend de l'application, les logs seront imprimés sur la console avec les UUIDs des messages.

C'est très bien ! Le backend est terminé, et il est opérationnel. Il est maintenant temps d'ajouter le code du frontend.

Créer une interface utilisateur frontale avec React.JS

Le frontend de cette application utilisera le framework React.js.

Quelques conditions préalables sont que vous devez avoir Node.js et npm installés sur votre système. Assurez-vous d'utiliser la version la plus appropriée.

nvm install <version>
nvm use <version>

Si nécessaire, vous pouvez également mettre à jour Node. Dans le répertoire racine du projet, créez un dossier appelé frontend. À l'intérieur de ce dossier, passez au répertoire frontend et initialisez un nouveau projet React :

npx create-react-app .

Exécutez l'application React :

npm start

Verify the app is running by visiting http://localhost:3000 dans votre navigateur. Vous devriez voir l'application React par défaut.

Créer un nouveau composant DrinkingWaterForm dans le répertoire frontend/src avec le code suivant pour permettre aux utilisateurs de s'inscrire aux rappels :

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;

Ce composant React représente un formulaire permettant aux utilisateurs de s'inscrire à un service de rappel de consommation d'eau potable. Le formulaire permet à l'utilisateur d'entrer son numéro de téléphone et la fréquence à laquelle il souhaite recevoir des rappels pour boire de l'eau.

Le composant importe les modules nécessaires, y compris les composants React Bootstrap pour les éléments de formulaire et une image pour l'affichage. Il définit plusieurs styles pour le conteneur, l'image, le titre, le formulaire, les étiquettes de formulaire, les contrôles de formulaire et le bouton de soumission.

Le composant utilise le useState pour gérer l'état des éléments phoneNumber et frequency pour gérer l'état des champs de formulaire. Il définit une fonction handleSubmit qui est appelée lorsque l'utilisateur soumet le formulaire. La fonction enregistre les données du formulaire dans la console, puis envoie une requête POST au point d'extrémité de l'API backend /sign-up avec les données du formulaire.

Si la demande aboutit, la fonction renvoie la réponse JSON. Dans le cas contraire, elle affiche une fenêtre d'alerte avec le code d'état de la réponse.

Le composant rend le formulaire avec les éléments Form et Button de React Bootstrap. Le formulaire comprend deux champs de saisie pour le numéro de téléphone et la fréquence, ainsi qu'un bouton de soumission.

Lorsque l'utilisateur saisit des données dans les champs de saisie et clique sur le bouton d'envoi, la fonction handleSubmit est appelée pour soumettre les données du formulaire au point de terminaison de l'API de backend. Le composant affiche également une image et un titre pour le formulaire et applique les styles définis précédemment aux différents éléments du formulaire.

Ajoutez une image dans le répertoire que vous souhaitez afficher sur l'interface utilisateur et remplacez le chemin d'accès de l'image par le chemin d'accès correct.

Mettre à jour le fichier frontend/src/App.js pour y inclure le composant DrinkingWaterForm composant :

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

Connecter le backend et le frontend

Il est temps de faire fonctionner ensemble le frontend et le backend.

Naviguez vers un terminal et entrez dans le répertoire backend à partir de la racine du projet.

Type node app.js pour lancer le backend. Ensuite, dans un terminal séparé, cd dans frontend et tapez :

npm start

Génial, vous avez réussi à faire fonctionner simultanément le frontend et le backend ! Ouvrez http://localhost:3000 dans votre navigateur web pour voir l'application Rappel d'eau potable.

Drinking water Reminder Service home page

C'est parfait ! Vous avez créé une application de rappel d'eau potable avec Node, Vonage et React ! Vous pouvez maintenant la tester avec les données souhaitées.

Tout d'abord, vous devez l'ajouter aux numéros de test, car sur les comptes d'essai dans le tableau de bord de Vonage, vous ne pouvez utiliser que des numéros de test pré-vérifiés, ce que vous pouvez faire en allant sur vos numéros et en les vérifiant. Pour en savoir plus sur les numéros de téléphone ici.

Naviguez vers localhost:3000 et entrez votre numéro de téléphone sous le format [COUNTRYCODE], par exemple s'il s'agit d'un numéro britannique, ce sera 44xxxxxxxxxx, et la fréquence à laquelle vous souhaitez être rappelé en tant qu'abonné. Ici, pour l'entrée 1 et un certain nombre, un message est initialement envoyé sur ce numéro. À partir de là, toutes les 1 minutes, un message vous rappellera par SMS de boire de l'eau !

Conclusion

Cet article a montré comment construire une application web de rappel d'eau potable par abonnement en utilisant Node, React et l'API Messages de Vonage. Ce tutoriel vous a présenté l'utilisation des API de Vonage dans vos projets.

Si vous souhaitez en savoir plus sur les API de Vonage et ce qu'elles peuvent faire, consultez le Portail des développeurs API de Vonage. Vous y trouverez de la documentation, des exemples de code et des tutoriels pour un large éventail d'API, notamment pour les SMS, la voix, la vidéo, etc.

Vous pouvez également vous tenir au courant des dernières nouvelles et mises à jour de Vonage en les suivant sur Twitter (@VonageDev) et en rejoignant leur communauté Slack. Ces canaux sont d'excellents endroits pour entrer en contact avec d'autres développeurs, poser des questions et en apprendre davantage sur Vonage et ses API.

Nous vous encourageons à continuer d'explorer différentes API et structures avec Vonage. Il existe de nombreuses possibilités de créer des applications innovantes et utiles. A la vôtre !