Trinkwasser-Erinnerungs-App mit Node, React und Vonage Messages API

Einführung

In diesem Artikel werden wir eine Webanwendung mit Node, React und der Vonage Messages API erstellen, die es den Benutzern ermöglicht, den Dienst zu abonnieren und eine bestimmte Häufigkeit für Erinnerungen auszuwählen. Alle Abonnenten erhalten je nach gewählter Häufigkeit in regelmäßigen Abständen eine Erinnerung, Wasser zu trinken.

Wasser zu trinken ist wichtig, weil es dazu beiträgt, den Körper mit Flüssigkeit zu versorgen, was für ein reibungsloses Funktionieren unerlässlich ist. Die richtige Flüssigkeitszufuhr kann dazu beitragen, das Energieniveau zu erhöhen, das Immunsystem zu stärken und sogar bestimmte Krankheiten zu verhindern.

Sie sind herzlich eingeladen, das GitHub-Repository für dieses Lernprogramm klonen.

Tagesordnung

In diesem Lernprogramm lernen Sie, wie man:

• Erstellen eines Backend-Servers mit Node.js

• Hinzufügen von Nachrichtenabsendern in Express und Node mit der Vonage Messages API

• Frequenz-Handler mit Node-Scheduler hinzufügen

• Erstellen einer Frontend-UI mit React.js

• Verbinden Sie das Backend und das Frontend

• Testen Sie die Anwendung

Voraussetzungen

• Ein Vonage Account und eine Telefonnummer

• Node und npm installiert

Erstellen eines Backend-Servers mit Node.js

Es ist an der Zeit, mit dem Backend für die Anwendung zu beginnen.

Erstellen Sie ein Hauptverzeichnis für die Anwendung Vonage_Drinking_App.

Gehen Sie zu Ihrem Terminal und geben Sie ein mkdir Vonage_Drinking_App.

Geben Sie dieses Verzeichnis durch Eingabe von cd Vonage_Drinking_App in das Terminal eingeben.

Erstellen Sie innerhalb dieses Verzeichnisses ein Verzeichnis mit dem Namen backend.

Als nächstes werden wir die Vonage Messages API um SMS an Abonnenten zu senden.

Hinzufügen von Nachrichtenabsendern in Express und Node mit der Vonage Messages API

Vonage ist eine globale Cloud-Kommunikationsplattform, die es Nutzern ermöglicht, Telefonanrufe zu tätigen und zu empfangen, Textnachrichten zu senden und zu empfangen und vieles mehr. Das Unternehmen bietet eine Reihe von Diensten an, darunter Voice-over-IP (VoIP) und Unified Communications, sowie Messaging, Video-Chat und andere Funktionen. Vonage stellt außerdem eine Reihe von APIs und SDKs zur Verfügung, die es Entwicklern ermöglichen, ihre Anwendungen in die Vonage Plattform zu integrieren. Sie können einen Vonage Account erstellen über dem Dashboard.

Geben Sie Ihre Daten ein und verifizieren Sie Ihre E-Mail-ID:

Vonage homepage

Sign up

Als Nächstes wird der folgende Bildschirm angezeigt, auf dem Sie auswählen können, ob Sie ein Entwickler sind. Wählen Sie die Vonage-Produkte aus, die Sie verwenden möchten. Für dieses Tutorial werden wir SMS auswählen.

Let's get started page

Ihr Account enthält ein Guthaben von 2 €, das Sie für eine Testphase verwenden können, die für diesen Anwendungsfall ideal ist. Rufen Sie das Dashboard auf, um die Messages API zu nutzen:

Vonage API Dashboard page

Kopieren Sie Ihren API-Schlüssel und API-Geheimnis für die spätere Verwendung. Es ist Zeit, eine neue Anwendung zu erstellen. Gehen Sie zu Applications oder die Applications in der linken Seitenleiste:

Vonage applications page

Klicken Sie auf "Neue Anwendung erstellen", um eine neue Anwendung zu erstellen:

Create a new Vonage application page

Wählen Sie Nachrichten in den Fähigkeiten. Fügen Sie die Eingangs- und Status-URL als https://www.google.com/. In diesem Schritt können Sie Ihren privaten Schlüssel generieren. Er wird heruntergeladen und lokal gespeichert.

Choose application specifications page

Klicken Sie auf die Schaltfläche Neue Anwendung generieren Schaltfläche:

Choose application specifications page scrolled down

Sie können dann diese Bewerbungsseite aufrufen:

Drink water POC application page

Speichern Sie die Anwendungs-ID und den generierten privaten Schlüssel. Sie können auch eine Nummer erwerben und Ihre Vonage-Nummer hier verknüpfen.

Als nächstes müssen Sie einige Abhängigkeiten installieren. Geben Sie das Folgende in Ihr Terminal ein:

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

Dies ist der Beispielcode aus dem Vonage Messages SDK für Node.js GitHub Repository mit dem wir testen werden, ob wir mit der Vonage Messages API SMS versenden können:

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

Dies ist die test_sms.js Datei im GitHub-Repository. Dieser Code verwendet die Vonage Messages API, um eine SMS-Nachricht an eine Telefonnummer zu senden. Um diese Datei auszuführen, geben Sie node test_sms.js in Ihr Terminal ein.

Hier ist eine Erklärung des test_sms.js Code. Die ersten drei Zeilen importieren drei Module aus der @vonage Bibliothek: Auth, Messages, und SMS. Auth wird für die Authentifizierung bei der Vonage-API verwendet, Messages wird zum Versenden von SMS-Nachrichten verwendet, und SMS ist eine Unterklasse von Messages verwendet, um SMS-Nachrichten zu erstellen.

Als nächstes definiert der Code eine Konstante PRIVATE_KEY_PATH mit dem Pfad zu einer privaten Schlüsseldatei. Danach wird eine Instanz von Messages mit dem Schlüsselwort new Schlüsselwort erzeugt, wobei ein Auth Objekt als Argument mit dem apiKey, apiSecret, applicationId, und privateKey Eigenschaften gesetzt. Diese Instanz von Messages wird in einer Konstante namens messagesClient.

Schließlich wird die send() Methode aufgerufen auf messagesClient aufgerufen, um eine SMS-Nachricht zu senden. Die Methode send() Methode nimmt eine Instanz von SMS als Argument, wobei die to, from, und text auf die Telefonnummer des Empfängers, den Namen oder die Nummer des Absenders bzw. den Nachrichtentext gesetzt sind. Die Methode then() Methode wird für das zurückgegebene Promise aufgerufen, um die Antwort von der Vonage-API zu protokollieren, und die catch() Methode wird aufgerufen, um alle Fehler zu protokollieren, die während des Sendevorgangs auftreten.

Sobald dies erfolgreich läuft, können wir unsere Backend-Anwendung mit diesem Code erstellen.

Frequenzhandler mit Node-Scheduler hinzufügen

Der nächste Schritt ist das Senden einer SMS an die im Frontend eingegebene Nummer im sign-up Endpunkt. Wir planen Erinnerungen für jeden Abonnenten auf der Grundlage der Häufigkeit, die er auf der Benutzeroberfläche ausgewählt hat.

Erstellen Sie eine Datei app.js im Backend-Ordner und fügen Sie den folgenden Code hinzu:

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

Dies ist eine serverseitige Node.js-Anwendung, die das Express-Framework zur Erstellung eines Webservers verwendet. Sie ist auch mit der Vonage Messages API integriert, um Erinnerungen an Abonnenten zu senden.

Der Code beginnt mit dem Importieren der erforderlichen Module: express, body-parser, cors, @vonage/messages, node-schedule, und @vonage/auth. Dann definiert er eine konstante Variable PRIVATE_KEY_PATH mit dem Pfad zum privaten Schlüssel für die Vonage-API. Danach wird eine Liste namens subscribers um Telefonnummern und die Häufigkeit von Erinnerungen zu speichern. Als nächstes wird eine neue Instanz der Messages Klasse aus dem @vonage/messages die für den Versand von SMS-Nachrichten über die Vonage-API verwendet wird. Er legt den erforderlichen API-Schlüssel, das API-Geheimnis, die Anwendungs-ID und den privaten Schlüssel mithilfe einer Instanz der Auth-Klasse fest.

Die Funktion sendReminders wird definiert, um Erinnerungen an eine bestimmte Telefonnummer zu senden. Sie nimmt die Rufnummer als Argument, setzt die from und text für die SMS-Nachricht und sendet dann die Nachricht über die messagesClient unter Verwendung der send Methode.

Der Code erstellt dann eine neue Instanz der express Anwendung und richtet eine Middleware für die Bearbeitung von JSON-Anfragen und die Aktivierung der herkunftsübergreifenden Ressourcenfreigabe (CORS) für Webanwendungen ein.

Der Server erstellt eine Route für die POST Anfrage an /sign-up. Wenn ein Client eine Anfrage an diesen Endpunkt mit einer Telefonnummer und einer Frequenz im Anfragetext sendet, fügt der Server die Telefonnummer und die Frequenz zur subscribers Liste hinzu. Er sendet dann eine Begrüßungsnachricht an die Telefonnummer des Teilnehmers über die messagesClient eine Begrüßungsnachricht an die Telefonnummer des Abonnenten und plant Erinnerungen in der angegebenen Häufigkeit mit dem node-schedule Modul.

Schließlich gibt der Server eine JSON-Antwort zurück, die anzeigt, dass die Anfrage erfolgreich war.

Warum haben wir CORS aktiviert?

CORS (Cross-Origin Resource Sharing) ist ein Mechanismus, der es ermöglicht, Ressourcen (wie Skripte, Bilder oder Stile) von einer anderen Domäne als derjenigen anzufordern, die die Webseite bereitgestellt hat.

CORS-Fehler treten auf, wenn eine Webseite versucht, eine Anfrage (z. B. über JavaScript) an eine andere Domäne zu stellen als die, die die Webseite bereitgestellt hat, und der Server, der die angeforderte Ressource hostet, nicht die entsprechenden CORS-Header zurückgibt.

CORS soll verhindern, dass eine bösartige Webseite unerlaubte Anfragen an eine andere Domäne stellt. Browser setzen CORS-Beschränkungen durch, indem sie das Vorhandensein bestimmter HTTP-Header in der Antwort des Servers überprüfen, z. B. Access-Control-Allow-Origin.

Führen Sie diese Datei mit node app.js. Sobald der Server läuft, wird die Meldung "Server started on port 5000" angezeigt:

Console log

Der Server beginnt, an Port 5000 zu lauschen, und auf der Konsole wird eine Meldung ausgegeben, dass der Server gestartet ist. Wenn Sie im Frontend der Anwendung eine Eingabe machen, werden die Protokolle mit den UUIDs der Nachrichten auf der Konsole ausgegeben.

Großartig! Das Backend ist fertig, und es ist betriebsbereit. Jetzt ist es an der Zeit, den Code für das Frontend hinzuzufügen.

Erstellen einer Frontend-UI mit React.JS

Für das Frontend dieser Anwendung wird das React.js-Framework verwendet.

Ein paar Voraussetzungen sind, dass Sie Node.js und npm auf Ihrem System installiert haben. Stellen Sie sicher, dass Sie die am besten geeignete Version verwenden.

nvm install <version>
nvm use <version>

Falls erforderlich, können Sie auch Node aktualisieren. Erstellen Sie im Stammverzeichnis des Projekts einen Ordner namens frontend. Innerhalb dieses Ordners wechseln Sie in das frontend Verzeichnis und initialisieren Sie ein neues React-Projekt:

npx create-react-app .

Führen Sie die React-Anwendung aus:

npm start

Verify, dass die App läuft, indem Sie http://localhost:3000 in Ihrem Browser aufrufen. Sie sollten die standardmäßige React-App sehen.

Erstellen Sie eine neue Komponente DrinkingWaterForm im Verzeichnis frontend/src Verzeichnis eine neue Komponente mit folgendem Code, die es den Benutzern ermöglicht, sich für Erinnerungen anzumelden:

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;

Diese React-Komponente stellt ein Formular dar, mit dem sich Benutzer für einen Trinkwasser-Erinnerungsdienst anmelden können. Das Formular ermöglicht es dem Benutzer, seine Telefonnummer und die Häufigkeit, mit der er Erinnerungen zum Trinken erhalten möchte, einzugeben.

Die Komponente importiert die erforderlichen Module, einschließlich React Bootstrap-Komponenten für Formularelemente und ein Bild für die Anzeige. Sie definiert mehrere Stile für den Container, das Bild, den Titel, das Formular, die Formularbeschriftungen, die Formularsteuerelemente und die Schaltfläche "Submit".

Die Komponente verwendet den useState Hook, um den Zustand der phoneNumber und frequency Formularfelder. Sie definiert eine handleSubmit Funktion, die aufgerufen wird, wenn der Benutzer das Formular absendet. Die Funktion protokolliert die Formulardaten in der Konsole und stellt dann eine POST-Anfrage an den Backend-API-Endpunkt /sign-up mit den Formulardaten.

Wenn die Anfrage erfolgreich ist, gibt die Funktion die JSON-Antwort zurück. Andernfalls zeigt sie ein Warnfenster mit dem Statuscode der Antwort an.

Die Komponente rendert das Formular mit den Form und Button Komponenten von React Bootstrap. Das Formular enthält zwei Eingabefelder für Telefonnummer und Häufigkeit sowie eine Schaltfläche zum Absenden.

Wenn der Benutzer Daten in die Eingabefelder eingibt und auf die Schaltfläche "Submit" klickt, wird die Funktion handleSubmit Funktion aufgerufen, um die Formulardaten an den Backend-API-Endpunkt zu übermitteln. Die Komponente zeigt auch ein Bild und einen Titel für das Formular an und wendet die zuvor definierten Stile auf die verschiedenen Elemente des Formulars an.

Fügen Sie ein beliebiges Bild in das Verzeichnis ein, das Sie auf der Benutzeroberfläche anzeigen möchten, und ersetzen Sie den Pfad des Bildes durch den richtigen Pfad.

Aktualisieren Sie die frontend/src/App.js Datei, um die DrinkingWaterForm Komponente:

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

Verbinden Sie das Backend und das Frontend

Es ist an der Zeit, das Frontend und das Backend gemeinsam zu betreiben.

Navigieren Sie zu einem Terminal und geben Sie das Backend-Verzeichnis im Stammverzeichnis des Projekts ein.

Geben Sie node app.js ein, um das Backend zum Laufen zu bringen. Als nächstes geben Sie in einem separaten Terminal cd in frontend und geben Sie ein:

npm start

Großartig, Sie haben sowohl das Frontend als auch das Backend gleichzeitig zum Laufen gebracht! Öffnen Sie http://localhost:3000 in deinem Webbrowser und du siehst die Trinkwasser-Erinnerungs-App.

Drinking water Reminder Service home page

Perfekt! Sie haben eine Trinkwasser-Erinnerungs-App mit Node, Vonage und React erstellt! Jetzt können Sie sie mit den gewünschten Eingaben testen.

Zuerst müssen Sie es zu den Test Numbers hinzufügen, da Sie bei Testkonten im Vonage Dashboard nur vorab verifizierte Test Numbers verwenden können, indem Sie zu Ihren Numbers gehen und diese verifizieren. Erfahren Sie mehr über Telefonnummern hier.

Navigieren Sie zu localhost:3000 und geben Sie Ihre Telefonnummer im Format [COUNTRYCODE] ein, z. B. 44xxxxxxxxxx, wenn es sich um eine Nummer aus Großbritannien handelt, und die Häufigkeit, mit der Sie als Teilnehmer erinnert werden möchten. Hier wird für die Eingabe 1 und eine bestimmte Nummer zunächst eine Nachricht an diese Nummer gesendet. Ab diesem Zeitpunkt wird alle 1 Minute eine SMS mit der Aufforderung, Wasser zu trinken, verschickt!

Schlussfolgerung

In diesem Artikel wurde gezeigt, wie man mit Node, React und der Vonage Messages API eine abonnementbasierte Webanwendung zur Erinnerung an Trinkwasser erstellt. Dieses Tutorial hat Sie in die Verwendung von Vonage-APIs in Ihren Projekten eingeführt.

Wenn Sie mehr über Vonage APIs und ihre Möglichkeiten erfahren möchten, besuchen Sie das Vonage API-Entwicklerportal. Dort finden Sie Dokumentation, Codebeispiele und Tutorials für eine Vielzahl von APIs, darunter SMS, Voice, Video und mehr.

Sie können auch über die neuesten Nachrichten und Updates von Vonage auf dem Laufenden bleiben, indem Sie dem Unternehmen auf Twitter (@VonageDev) und der Slack-Gemeinschaft. Diese Kanäle sind großartige Orte, um sich mit anderen Entwicklern auszutauschen, Fragen zu stellen und mehr über Vonage und seine APIs zu erfahren.

Wir ermutigen Sie, verschiedene APIs und Frameworks mit Vonage zu erforschen. Es gibt viele Möglichkeiten, innovative und nützliche Applications zu entwickeln. Prost!