Ein interaktives Board erstellen: WhatsApp, SMS und MMS auf einer Website (Teil 1)

Einführung

Sind Sie daran interessiert, eine interaktive Tafel zu erstellen, um Nachrichten bei Veranstaltungen anzuzeigen? Dieses Tutorial zur Erstellung einer Node.js Express-Webanwendung führt Sie durch den Empfang von SMS-, MMS- und WhatsApp-Nachrichten, deren Speicherung in einer Datenbank und deren Anzeige auf einer Website. Außerdem gebe ich Tipps für familienfreundliches Messaging. Unter Teil 2 zeige ich Ihnen, wie Sie die Webanwendung mit AI Studio erstellen. Bleiben Sie also dran!

Der Projektcode ist auf GitHub. Klonen Sie es, und lassen Sie uns auf das Tutorial unten zu bekommen. Ich habe für Sie vorbereitet, um alle Bits Schritt für Schritt zu erklären.

Voraussetzungen

Bevor wir mit dem Projekt beginnen, werden einige Dinge von Ihnen erwartet. Ich werde sie unten auflisten:

• Ein Vonage Account - um die Kommunikations-APIs für den Empfang von SMS-, MMS- und WhatsApp-Nachrichten zu nutzen.

• Ein Airtable Account - um die Telefonnummer, Textnachrichten und Bilder zu speichern

• ngrok - ist ein Tunnel, der den lokalen Code dem Internet zugänglich macht

Projektgliederung

Projektstruktur

Die Interaktion beginnt damit, dass ein Benutzer eine SMS-, MMS- oder WhatsApp-Nachricht an eine Nummer sendet. Die Projektstruktur, die wir Schritt für Schritt erstellen werden, sollte am Ende des Tutorials wie folgt aussehen.

Offengelegte API-Routen

Wir verwenden Express.js und die folgenden Routen (Endpunkte, die verschiedene Funktionen einer Webanwendung bereitstellen), die die Anwendung für eingehende Nachrichten bereitstellt und sie auf einer Website ausgibt, indem sie Daten auf Airtable abruft.

• /inbound: POST-Route für eingehende Nachrichten, die mit Airtable zur Speicherung interagiert.

• /messages/:messageId/:status: POST-Route für die Aktualisierung des Nachrichtenstatus in Airtable.

• /messages: GET-Route zum Abrufen von nach Status gefilterten Nachrichten aus Airtable.

Den lokal laufenden Server mit Ngrok ins Internet stellen

Wir werden alle Bausteine im Laufe dieses Tutorials hinzufügen; für den Moment werden wir das Projekt, das wir lokal laufen lassen, dem Internet aussetzen; wir werden ngrok.

Führen Sie ngrok http 3001 in diesem Fall von Ihrem Terminal aus, da es auf Port 3001 läuft. Anschließend fügen wir den generierten Webhook-Endpunkt zu unserem Vonage Dashboard unter Verwendung der Messages API im folgenden Unterabschnitt.

Erstellen einer neuen Vonage-Anwendung

Registrieren Sie sich oder melden Sie sich bei Ihrem Vonage Account an

Wie zu Beginn dieses Artikels erwähnt, ist ein Account bei Vonage eine Voraussetzung für dieses Tutorial. Sie können die folgenden Schritte befolgen, um sich anzumelden und einen neuen Account zu erstellen.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Empfangen von SMS- oder MMS-Nachrichten

• Anmeldung bei Ihrem Vonage Dashboard

• Gehen Sie zu "Numbers" und klicken Sie im Menü auf der linken Seite auf "Numbers kaufen".

• Suche und Kauf einer Telefonnummer in Ihrem Land

• Gehen Sie im Menü auf der linken Seite auf "Applications" und klicken Sie auf "Create a new application".

• Geben Sie der Anwendung einen Namen wie "Interactive Board".

• Aktivieren Sie unter Funktionen die Option Nachrichten

• Setzen Sie unter Inbound SMS Webhook die URL auf Ihre Server-URL + '/inbound' route

• Legen Sie unter Status-Webhook die URL auf Ihre Server-URL + die Route "/status" fest.

  Messages Inbound and Status URLs.

• Klicken Sie unten rechts auf der Seite auf "Speichern", um den Antrag zu speichern.

• Verknüpfen Sie Ihre gekaufte Nummer unten auf der Antragsseite, indem Sie auf "Link" vor der Nummer klicken.

Jede SMS oder MMS, die an diese Nummer gesendet wird, wird auf die /inbound Route und wird verarbeitet. Es gibt einige Anforderungen an die Nummer, damit sie MMS-Nachrichten senden kann; ich habe sie aufgelistet in diesem Blogbeitrag, Wie man MMS-Nachrichten mit Node.js versendet.

Empfangen von WhatsApp-Nachrichten

In den folgenden Schritten wird beschrieben, wie Sie Ihre WhatsApp-Nachrichten-Sandbox einrichten, um sie zu testen. Sie können es auch mit virtuellen und geschäftlichen WhatsApp-Telefonnummern einrichten.

• Anmeldung bei Ihrem Vonage Dashboard

• Klicken Sie auf "Messages Sandbox" unter "Developer Tools" im Menü auf der linken Seite "Messages API" und klicken Sie auf "Create a new WhatsApp Sandbox".

• Wählen Sie die WhatsApp-Sandbox. Sie können eine Verbindung zu dieser Sandbox herstellen, indem Sie eine WhatsApp-Nachricht an die zulässige Telefonnummer senden und den angegebenen QR-Code scannen.

• Legen Sie unter Webhooks die URL für eingehende Nachrichten auf Ihre Server-URL + die Route "/inbound" fest.

Ihre Telefonnummer kann mit der Vonage Messages API Sandbox WhatsApp-Nachrichten senden und empfangen.

Hinzufügen der Umgebungsvariablen

Ob Sie den den bereitgestellten GitHub-Repository-Link geklont geklont haben oder den Projektordner jetzt erstellen, stellen Sie sicher, dass Sie einen Hauptordner für dieses Projekt haben; wir können ihn "interactive-board" nennen. Danach stellen Sie sicher, dass es eine .env Datei, die unsere Umgebungsvariablen für dieses Projekt enthält. Wir werden die folgenden Variablen hinzufügen:

Erstellen Sie ein Airtable-Zugangs-Tokenund fügen Sie die Bereiche hinzu, die wir für dieses Projekt verwenden werden: data.records:read to Anzeigen der Daten in Datensätzen und data.records:write to Datensätze erstellen, bearbeiten und löschen. Geben Sie ihm schließlich Zugriff auf den Arbeitsbereich, den wir derzeit für dieses Projekt verwenden. Klicken Sie auf , um das Token zu erstellen und zur Umgebungsvariablen "AIRTABLE_ACCESS_TOKEN" hinzuzufügen. Wir benötigen außerdem unsere Airtable Base ID. Sie können in der Dokumentation nachsehen Finden von IDs in der Airtable-API. Ihre Basis-URL sollte etwa so aussehen wie https://airtable.com/AIRTABLE_BASE/string-of-characters. Die AIRTABLE_BASE ist der erste Satz von Zeichen nach airtable.com/ und vor dem zweiten /.

Meldungen mit HTML und CSS anzeigen

Wir werden HTML und CSS verwenden, um die Nachrichten anzuzeigen, die die Datei main.js von unserer API abruft und die Javascript-Logik übernimmt. Erstellen Sie einen public Ordner, gefolgt von einer index.html Datei, um die Benutzeroberfläche des Nachrichtenbretts darzustellen, und importieren Sie die main.js Datei, um auf die Nachrichtendaten zuzugreifen.

Fügen Sie das CSS-Styling hinzu, das drei grundlegende Klassen umfasst: .message-record für einzelne Nachrichten mit einem Hintergrund mit Farbverlauf und Polsterung; .event-title für den Haupttitel, ebenfalls mit einem Farbverlauf zur Hervorhebung, und .message-grid für die Anordnung der Nachrichten in einem responsiven Rasterlayout. Ich verwende ein <style> Tag in diesem Code, aber wenn Sie es vorziehen, können Sie eine CSS-Datei erstellen und sie in Ihre HTML-Datei importieren.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive Board</title>
    <style>
      .message-record {
        background: linear-gradient(135deg,#871fff,#7ec9f4);
        padding: 10px;
        box-sizing: border-box;
      }
      .event-title {
        background: linear-gradient(135deg,#d41f9c,#ffa78c);
      }
      .message-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-gap: 10px;
      }
    </style>
  </head>
  <body>
    <h1 class="event-title">Vonage ♥s <Event Name></h1>
    <div id="messages"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Nachrichten abrufen

Es ist an der Zeit, die main.js Datei unter dem Ordner public zu erstellen, die wir in unseren HTML-Ordner importiert haben, und den Code hinzuzufügen, der die Nachrichten vom Express-Server abruft und sie in einem Rasterlayout anzeigt.

Erstellen Sie die main.js Datei im Ordner public und fügen Sie den folgenden Code hinzu:

const messagesDiv = document.getElementById("messages");
messagesDiv.className = "message-grid";

Abrufen von Nachrichten vom Server:

function fetchMessages() {
  fetch("http://localhost:3001/messages?status=Accepted")
    .then(response => response.json())
    .then(data => {
      // Process data...
    })
    .catch(error => console.error(error));
}

Aktualisieren Sie die Nachrichten alle 60 Sekunden:

setInterval(fetchMessages, 60000);

Empfangen Sie eingehende Nachrichten und speichern Sie sie in der Datenbank

Schauen wir uns an, wie der Express-Server eingehende Nachrichten verarbeitet und in Airtable speichert. Fügen Sie den folgenden Code in die Datei "index.js" ein.

Importabhängigkeiten

Wir importieren die dotenv-Abhängigkeit zum Laden von Umgebungsvariablen von .envExpress, um Webanfragen zu bearbeiten, und das Airtable SDK, um die Airtable-API zu integrieren.

const dotenv = require('dotenv').config(); // loads environment variables
const express = require('express') // web framework 
const Airtable = require('airtable') // Airtable SDK

Airtable initialisieren

const base = new Airtable({apiKey: process.env.AIRTABLE_ACCESS_TOKEN})  
  .base(process.env.AIRTABLE_BASE)

Verwenden Sie das Airtable Access Token und die Basis-ID, die in .env gespeichert sind, um die Airtable-Basis zu initialisieren. (Sehen Sie sich den Schritt Umgebungsvariablen in diesem Lernprogramm an). Diese Basis enthält die Tabellen Numbers und Messages.

Empfangen Sie/inbound Anfragen an

app.post('/inbound', (req, res) => {

  // ... handle incoming messages 
  const { from, text, channel, message_type } = req.body;
  console.log(JSON.stringify(req.body));
  res.send('Message received!');
})

Wir definieren eine POST-Route unter /inbound um eingehende Nachrichten zu empfangen. Diese würde auf dem Bildschirm "Nachricht erhalten!" anzeigen, wenn eine Anfrage auf die /inbound Route trifft. Wir werden dies später durch das Speichern in der Datenbank ersetzen, aber es ist ein schneller Weg, um zu verifizieren, dass Nachrichten eintreffen.

Prüfung auf vorhandene Benutzer

base('Numbers').select({
  filterByFormula: `Number=${from}` 
}).eachPage(records => {

  if(records.length == 0) {
    // create a new user
  } else {
    // existing user, get ID
  }

})

Suchen Sie die Nummer des Absenders in der Numbers-Tabelle. Wenn es keine Übereinstimmung gibt, erstellen Sie einen neuen Benutzer. Andernfalls holen Sie sich die Datensatz-ID des vorhandenen Benutzers.

Nachricht speichern

let status = 'Pending'

base('Messages').create({
  Message: text,
  Number: [numberId],
  Status: status,
  ImageUrl: imageUrl
})

Erstellen Sie einen neuen Nachrichtendatensatz in Airtable mit dem Inhalt der Nachricht, der Absender-ID, dem Status und der Bild-URL.

Implementierung einer Sperrliste für die Nachrichtenfilterung

Unsere Anwendung verwendet eine manuell editierbare blocklist.txt Datei für die Nachrichtenmoderation, die es Ihnen ermöglicht, alle Wörter oder Ausdrücke hinzuzufügen, die Sie für unangemessen oder irrelevant halten.

1. Laden der Blockliste: Die blocklist.txt Datei wird zunächst mit dem fs-Dateisystemmodul von Node.js gelesen. Jede Zeile in dieser Datei steht für ein zu blockierendes Wort oder eine Phrase. Dies wird mit folgendem Code erreicht:

   let blocklist = fs.readFileSync('blocklist.txt', 'utf8').split(/\s+/);

   Kopieren

Diese Zeile liest den Inhalt der Datei und zerlegt ihn anhand von Leerzeichen und Zeilenumbrüchen in eine Reihe von Wörtern bzw. Sätzen.

1. Nachricht Prüfen: Wenn die App eine neue Nachricht auf der Route ' /inbound' erhält, prüft sie, ob der Text gesperrte Wörter enthält. Die Prüfung vergleicht den Nachrichtentext mit jedem gesperrten Wort, ohne auf Groß- oder Kleinschreibung zu achten. Dadurch wird sichergestellt, dass der Filter auch dann funktioniert, wenn jemand ein schlechtes Wort mit seltsamer Großschreibung eingibt.

   if (blocklist.some(word => message.toLowerCase().includes(word.toLowerCase()))) {
     // actions to reject the message
   } 
   

   Kopieren

2. Handgriff Streichhölzer: Wenn eine Nachricht ein Wort aus der Blockliste enthält, wird ihr Status sofort auf "Abgelehnt" gesetzt. Standardmäßig hat jede Nachricht den Status "Ausstehend", d.h. sie wartet auf Moderation.

   let status = "Pending";
   
   if (blocklist match) {
     status = "Rejected"; 
   }
   
   // Code to save the message with its updated status

   Kopieren

3. Aktualisierung der Blockliste: Um neue Wörter oder Phrasen hinzuzufügen, öffnen Sie blocklist.txt, fügen Sie die neuen Einträge ein (einen pro Zeile) und speichern Sie die Datei. Möglicherweise ist ein Neustart des Servers erforderlich, damit die Änderungen wirksam werden.

Dieser Blocklistenmechanismus ist eine grundlegende Ebene der Inhaltsmoderation, die es ermöglicht, unerwünschte Nachrichten auf der Grundlage bestimmter Kriterien zu filtern. Obwohl es sich um einen manuellen Prozess handelt, bietet er eine unkomplizierte und effektive Möglichkeit, die Qualität und Relevanz der in Ihrem Forum angezeigten Nachrichten zu erhalten.

Die Integration von KI in das Blocklistensystem könnte die Filterung von Nachrichten erheblich verbessern. KI kann den Kontext und die Stimmung verstehen und so die Erkennung von Spam oder unangemessenen Inhalten verbessern. Dieser fortschrittliche Ansatz ermöglicht eine genauere und anpassungsfähigere Moderation.

Informationen in der Airtable-Datenbank speichern

Wie in den Voraussetzungen angegeben, sollten Sie einen Account bei Airtable. Sobald Sie eingeloggt sind, finden Sie die folgenden Schritte auf dem Airtable-Dashboard.

1. Erstellen Sie eine Basis mit dem Namen "Nachrichten", indem Sie auf "+ Basis erstellen" klicken, und wählen Sie optional eine Themenfarbe und ein Symbol aus; ich habe den Rest der Einrichtung übersprungen, aber Sie können ihn gerne ausfüllen, wenn Sie möchten, und bin bis zum Ende der Basiserstellung gegangen, wo ich zur Basis "Nachrichten" weitergeleitet werde.

2. Sie sehen nun einige leere nummerierte Zeilen. Lassen Sie uns nun zwei Tabellen erstellen: Numbers zum Speichern der Telefonnummern der Benutzer und Messages zum Speichern der eingehenden Nachrichten.

3. Fügen Sie der Tabelle Numbers eine Spalte "Number" hinzu.

4. Die Tabelle "Nachrichten" sollte die folgenden Spalten enthalten: 'Message', 'Number' (verknüpft mit der Numbers-Tabelle) und 'Status' vom Typ 'Single Select' sowie die Optionen 'Accepted', 'Pending' und 'Rejected'. Und schließlich 'ImageUrl'.

5. Erstellen von Ansichten wie "Rasteransicht" zum Filtern von Nachrichten

Arbeiten mit Tabellen

In den folgenden Schritten zeige ich Ihnen, wie Sie die Airtable-Basis an den Code anpassen, die Numbers- und Messages-Tabellen verwenden und CRUD-Operationen wie Erstellen, Auswählen, Aktualisieren und Verwenden von Filtern zur Abfrage des Nachrichtenstatus durchführen.

1. Es ist an der Zeit, "Base" zu initialisieren; wir werden den Airtable-API-Schlüssel und Base in unserem JavaScript-Code hinzufügen.

const base = new Airtable({apiKey: process.ENV.AIRTABLE_KEY}).base(process.ENV.ACCESS_TOKEN);

1. Die Numbers-Tabelle wird verwendet, um neue Benutzer zu suchen oder zu erstellen:

base('Numbers').create({Number: phoneNum}) 

base('Numbers').select({filterByFormula: `Number=${phoneNum}`})

1. Die Tabelle "Nachrichten" wird zum Erstellen neuer Eingangsnachrichten verwendet:

base('Messages').create({
  Message: text,
  Number: [numberId], 
  Status: status,
  ImageUrl: imageUrl
})

1. Die Nachrichten werden mit Hilfe von Filtern ausgewählt:

base('Messages').select({
  filterByFormula: `Status="${statusFilterValue}"` 
})

1. Der Status der Nachrichten wird aktualisiert:

base('Messages').update(messageId, {
  Status: status
})

Testen Sie es aus

Jetzt, wo wir den Code und die Datenbank eingerichtet haben, ist es an der Zeit, alles zu testen. Stellen Sie sicher, dass alle Abhängigkeiten installiert sind, indem Sie npm install. Starten Sie das Projekt durch Eingabe des Befehls node index.js in Ihrem Terminal eingeben, und stellen Sie sicher, dass Sie eine Ngrok-Instanz laufen haben.

Navigieren Sie zu localhost:3001 in Ihrem Browser. Senden Sie eine SMS-, MMS- oder WhatsApp-Nachricht an die virtuelle Vonage-Telefonnummer, die mit Ihrer Web-App verknüpft ist. Gehen Sie zu Ihrer Airtable-Basis und ändern Sie den Status der Nachricht, die Sie erhalten haben. Wenn die Nachricht akzeptiert wurde, wird sie auf der Website angezeigt, die auf localhost:3001.

Schlussfolgerung

Heute haben Sie gelernt, wie man eine interaktive Tafel erstellt, die SMS-, MMS- oder WhatsApp-Nachrichten empfängt und ausgibt. Ich habe Airtable für dieses Beispiel verwendet, aber Sie können jede andere Datenbank Ihrer Wahl (z. B. MongoDB / Firebase) zum Speichern und Abrufen von Informationen verwenden. In der nächsten Folge dieses Tutorials werden Sie lernen, wie Sie die gleiche Funktionalität mit unserem AI Studio umsetzen können.

Chatten Sie mit uns und teilen Sie uns mit, was Sie von diesem Tutorial halten auf unserer X, zuvor Twitter oder Slack-Gemeinschaft!