Einrichten von Webhooks für eingehende SMS und Voice auf Glitch

In diesem Tutorial lernen Sie, wie Sie Webhooks einrichten, um eingehende Voice-Anrufe und SMS-Nachrichten mit Glitch und einem Node.js-Server zu verarbeiten, wobei Vonage als Kommunikationsplattform dient. Ein Webhook ist eine Möglichkeit für eine Applikation, Echtzeitdaten an eine andere zu senden, wenn ein bestimmtes Ereignis eintritt. Er fungiert als Hörer, der auf ein Ereignis wartet, z. B. einen eingehenden Anruf oder eine SMS, und löst eine vordefinierte Aktion aus, wenn dieses Ereignis eintritt. So kann Ihr Server sofort auf externe Auslöser reagieren und zeitnahe Reaktionen auf Benutzerinteraktionen sicherstellen.

Die Implementierung von Webhooks bietet erhebliche Vorteile für Ihre Anwendung. Indem Sie die Bearbeitung von Sprachanrufen und SMS-Nachrichten in Echtzeit ermöglichen, können Sie interaktivere und reaktionsschnellere Kommunikationserlebnisse für Ihre Benutzer schaffen. So können Sie beispielsweise Antworten des Kundensupports automatisieren, Interaktionen mit CRM-Systemen protokollieren oder Workflows auf der Grundlage eingehender Nachrichten auslösen. Dies kann das Engagement und die Effizienz der Benutzer erhöhen, indem manuelle Aufgaben reduziert werden.

Am Ende dieser Anleitung werden Sie einen voll funktionsfähigen Webserver haben, der eingehende Anrufe und SMS-Nachrichten über Vonage abhört und verarbeitet. Legen wir los!

Voraussetzungen

• A Vonage Entwickler-Konto

• A Störung Account

  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.

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.

Einrichten und Konfigurieren Ihres Projekts

Wir werden die folgenden Schritte durchgehen:

1. Erstellen Sie ein neues Projekt.

2. Konfigurieren Sie Ihren Server.

3. Abhängigkeiten installieren.

4. Teilen und konfigurieren Sie Ihr Projekt.

5. Integrieren Sie Webhooks in Ihre Vonage-Anwendung.

6. Testen Sie Ihre neuen Funktionen.

Schritt 1: Ein neues Projekt erstellen

Melden Sie sich bei Ihrem Glitch Account an.

Klicken Sie auf . "Neues Projekt" oben rechts, dann klicken Sie auf "glitch-hello-node".

Danach wird das neue Projekt erstellt.

Glitch Hello Node

Schritt 2: Konfigurieren Sie Ihren Server

Führen Sie die folgenden Schritte aus, um Ihren Server für die Bearbeitung eingehender und ausgehender Anrufe und SMS einzurichten:

1. Im linken Fensterbereichsuchen Sie nach und klicken Sie auf server.js.

   serverjs file

2. Im rechten Fensterbereichwählen Sie den gesamten Inhalt von server.js und löschen Sie ihn.

3. Kopieren Sie das bereitgestellte Codeschnipsel und fügen Sie es in ein. server.js. Mit diesem Code wird ein Webserver konfiguriert, der in der Lage ist, Webanfragen für die Bearbeitung eingehender und ausgehender Anrufe und SMS zu verarbeiten.

const path = require("path");
const app = require('express')();
const bodyParser = require('body-parser');
const fastify = require("fastify")({ logger: true });

fastify.register(require("@fastify/static"), {
  root: path.join(__dirname, "public"),
  prefix: "/",
});

fastify.register(require("@fastify/formbody"));

fastify.register(require('@fastify/express')).after(() => {
  fastify.use(bodyParser.urlencoded({ extended: false })); // for Postman x-www-form-urlencoded
  fastify.use(bodyParser.json());
  fastify.use(app);
});

app.get("/webhooks/answer", function (request, reply) {
  const from = request.query.from;
  const fromSplitIntoCharacters = from.split('').join(' ');
  const ncco = [{
    action: 'talk',
    text: `Thank you for calling from ${fromSplitIntoCharacters}`,
    loop: 10
  }];
  console.log(`logging call from ${fromSplitIntoCharacters}`);
  reply.json(ncco);
});

app.get("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  const params = Object.assign(request.query, request.body);
  console.log(params);
  reply.status(200).end();
});

app.post("/webhooks/inbound-sms", function (request, reply) {
  console.log(`logging incoming sms`);
  console.log(request.body);
  reply.status(200).end();
});

fastify.listen(
  { port: process.env.PORT, host: "0.0.0.0" },
  function (err, address) {
    if (err) {
      console.error(err);
      process.exit(1);
    }
    console.log(`Your app is listening on ${address}`);
  }
);

Wenn Sie die Anrufdauer erhöhen möchten, suchen Sie den Parameter loop Parameter im Codeschnipsel und passen Sie seinen Wert an.

const ncco = [{
  action: 'talk',
  text: `Thank you for calling from ${fromSplitIntoCharacters}`,
  loop: 10
}];
console.log(`logging call from ${fromSplitIntoCharacters}`);
reply.json(ncco);

Überprüfen Sie, ob Sie die richtige Node.js-Version in Ihrer package.json Datei verwenden:

1. Klicken Sie auf package.json im linken Fensterbereich.

2. Suchen Sie im rechten Fensterbereich die Zeilen, in denen die Node.js-Version angegeben ist.

3. Prüfen Sie, ob die Node.js-Version auf 16.x. Ist dies nicht der Fall, aktualisieren Sie sie auf 16.x.

"engines": {

  "node": "16.x"

}

Schritt 3: Abhängigkeiten installieren

Klicken Sie auf das "Terminal" am unteren Rand des Bildschirms.

buttonFühren Sie den folgenden Befehl aus, um vorhandene Pakete zu aktualisieren:

npm update

Installieren Sie die erforderlichen Abhängigkeiten mit dem folgenden Befehl:

npm i express @fastify/express body-parser dotenv @vonage/server-sdk @vonage/voice

Führen Sie die aktualisieren um die Änderungen zu übernehmen:

refresh

Schritt 4: Freigeben und Konfigurieren Ihres Projekts

Klicken Sie auf das blaue "Teilen" oben rechts und kopieren Sie den Link zur Website.

Öffnen Sie Ihren bevorzugten Texteditor und fügen Sie den soeben kopierten Link ein. Fügen Sie dann die folgenden URLs ein:

• Antwort-URL: {Ihr Link}/webhooks/answer

• Eingehende URL: {Ihr Link}/webhooks/inbound-sms

Share Project

Schritt 5: Integrieren Sie Webhooks in Ihre Vonage-Anwendung

Melden Sie sich bei Ihrem Vonage Entwickler-Konto.

Um eine Vonage-Telefonnummer zu erwerben, wählen Sie im Menü auf der linken Seite "Numbers"und dann "Buy Numbers" (Nummern kaufen). Wählen Sie das Land aus, in dem Sie die Nummer kaufen möchten. Wählen Sie unter "Funktionen" SMS und Voice.

Klicken Sie auf . "Suchen" und "Kaufen" für die Nummer, die Sie kaufen möchten.

Klicken Sie im Menü des linken Fensters auf "Applications"und dann "Eine neue Anwendung erstellen" auf der rechten Seite.

Aktualisieren Sie Ihre Bewerbung mit den folgenden Informationen:

• Geben Sie Ihrer Anwendung einen benutzerfreundlichen Namen.

• Klicken Sie auf die Schaltfläche "Öffentlichen und privaten Schlüssel generieren". Daraufhin wird eine private Schlüsseldatei mit dem Namen private.key auf Ihren Desktop. Speichern Sie diese Datei in einem sicheren Ordner, da sie später noch benötigt wird.

• Schalten Sie im Abschnitt "Fähigkeiten" die Option ein:

  • Voice

  • Nachrichten

• Voice-Funktionen einrichten:

  • Antwort-URL: Fügen Sie die Antwort-URL ein, die Sie zuvor kopiert haben.

  • Ereignis-URL: Fügen Sie die gleiche Antwort-URL ein.

  • Fallback-URL: Fügen Sie die gleiche Antwort-URL ein.

• Einrichten von Nachrichtenfunktionen:

  • Eingehende URL: Fügen Sie die Eingangs-URL ein, die Sie zuvor kopiert haben.

  • Status-URL: Fügen Sie die gleiche Eingangs-URL ein.

• Klicken Sie auf "Neue Bewerbung erstellen" unten rechts.

capabilitiesSobald die Anwendung erstellt ist, verknüpfen Sie die von Ihnen erworbene Nummer mit der Anwendung, indem Sie auf die Schaltfläche "Verknüpfen" Schaltfläche. Kopieren Sie die verknüpfte Vonage-Nummer und speichern Sie sie, da Sie sie später anrufen müssen.

link numberKlicken Sie im linken Fensterbereich auf "API-Einstellungen"und wählen Sie "Messages API" aus und speichern Sie Ihre Änderungen.

Schritt 6: Testen Sie Ihre neuen Funktionen.

Nachdem Sie nun einen Webhook für eingehende Voice-Anrufelassen Sie es uns testen!

1. Tätigen Sie einen Voice-Anruf von Ihrem Telefon an die Vonage-Nummer.

2. Nach dem Herstellen der Verbindung sollten Sie eine Meldung wie "Danke für Ihren Anruf von..." hören.

3. Rufen Sie das Vonage Dashboard auf, und klicken Sie auf der linken Seite auf Protokolle. Hier können Sie bestätigen, dass der Anruf erfolgreich empfangen wurde.

Inbound Call LogWenn Sie die Gesprächsdauer verlängern möchten, ändern Sie den Wert des Parameters "loop".

Nachdem Sie nun einen Webhook für eingehende SMSintegriert haben, lassen Sie es uns testen!

1. Senden Sie eine SMS von einer beliebigen Nummer an die Vonage-Nummer.

2. Rufen Sie das Vonage Dashboard auf, und klicken Sie auf der linken Seite auf Protokolle. Hier können Sie bestätigen, dass der Test erfolgreich empfangen wurde.

SMS log

Schlussfolgerung

Und das war's! Sie haben gerade Webhooks eingerichtet, um diese Kommunikation in Echtzeit zu verwalten. Ihre Anwendung kann nun auf eingehende Ereignisse reagieren, sobald diese eintreten. Sie können diese Anwendung sogar noch weiter ausbauen, indem Sie unserem Tutorial folgen, in dem wir zeigen, wie Sie Client-Code für ausgehende Voice-Anrufe und ausgehende SMS hinzufügen und wie Sie einen ausgehenden Voice-Anruf tätigen und eine ausgehende SMS senden. Wenn Sie dieses Tutorial für Ihre eigenen Projekte genutzt haben, würden wir uns freuen, wenn Sie uns davon berichten! Beteiligen Sie sich an der Diskussion auf unserem Vonage Community Slack oder senden Sie uns eine Nachricht auf X, früher bekannt als Twitter.