Erstellen Sie eine beeindruckende RCS-Erinnerungs-App mit Node SDK und Vonage

Rich Communication Services (RCS) kommen nicht nur für iOS 18, sondern auch für Vonage. Ab Frühherbst 2024 können Sie das Senden von RCS über die Messages API. RCS ist genauso einfach zu bedienen wie das Vonage Node SDK und unterstützt von Haus aus Rich Cards, Karussells und Antwortvorschläge.

Rich Communications Services (RCS) ist ein fortschrittliches Messaging-Protokoll, das herkömmliche SMS und MMS um Funktionen wie Echtzeit-Messaging, Bild- und Video-Sharing und Dateiübertragungen erweitert. Es unterstützt interaktive Elemente wie Gruppenchats, Tippbenachrichtigungen und Nachrichtenstatus-Updates. Im Gegensatz zur SMS, die Mobilfunknetze nutzt, funktioniert RCS über Mobilfunkdaten und Wi-Fi und bietet ein vielseitigeres und moderneres Messaging-Erlebnis, ähnlich wie bei beliebten Apps wie WhatsApp und Facebook Messenger. Besuchen Sie diesen Link für weitere Informationen darüber, wie RCS mit Vonage funktioniert.

Um zu zeigen, wie Sie RCS mit der Messaging-API von Vonage nutzen können, werden wir eine einfache App erstellen, die uns daran erinnert, Wasser zu trinken. Das Ergebnis wird in etwa so aussehen:

Drink Water Reminder

Voraussetzungen

• Sie benötigen ein Vonage Entwickler-Konto

• Sie benötigen einen API-Tunneldienst. Ich werde Folgendes verwenden ngrok. Erfahren Sie mehr über wie man ngrok verwendet zum Testen verwendet.

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.

Registrieren eines RCS-Agenten bei Google Business Messaging

Sie benötigen einen RCS-Agenten, der mit Ihrem Vonage Account verknüpft ist, um RCS-Nachrichten über die Vonage Messages API zu senden und zu empfangen. Um den Agenten einzurichten, wenden Sie sich an den Vonage Support oder Ihren Account Manager, um den Ball ins Rollen zu bringen. Sobald der Agent zu Ihrem Account hinzugefügt wurde, sollten Sie ihn unter "Externe Accounts" in Ihrem Dashboard sehen.

Developer Dashboard

Erstellen einer Vonage-Anwendung

Der nächste Schritt ist die Erstellung einer neuen Vonage-Anwendung. Diese generiert Anmeldeinformationen und definiert spezifische Einstellungen für unsere RCS-Erinnerungs-App, wie z. B. Webhook-URLs. Folgen Sie diesen Schritten, um Ihre Anwendung zu erstellen und zu konfigurieren:

1. Klicken Sie auf "Neue Anwendung generieren".

2. Geben Sie ihm einen Namen.

3. Klicken Sie auf "Privaten und öffentlichen Schlüssel generieren" (der private Schlüssel wird auf Ihren Computer heruntergeladen; speichern Sie ihn für später)

4. Aktivieren Sie die Funktion "Nachrichten".

   • Die URL für die Hooks hängt davon ab, was Sie von ngrok erhalten. Aber der Pfad sollte sein /eingehend und /status lauten, lauten.

A screenshot of the “Create Application” form in the developer dashboard

Jetzt müssen wir unseren RCS-Agenten mit der Vonage-Anwendung verknüpfen.

Bootstrap für das Projekt

Erstellen Sie ein neues Verzeichnis für das Projekt und initialisieren Sie es mit npm.

npm init -y

Dann werden wir die benötigten Pakete installieren.

npm install @vonage/jwt @vonage/auth @vonage/messages @vonage/server-sdk @vonage/jwt cron dotenv express jsonwebtoken uuid

(Hinweis: Einige der Vonage-Pakete sind enthalten in @vonage/server-sdk, aber es ist immer eine gute Idee, sich mit den benötigten Paketen vertraut zu machen)

Hier eine kurze Erklärung, was jedes Paket bietet:

• @vonage/server-sdk, @vonage/messages, @vonage/auth, und @vonage/jwt werden zum Senden und Empfangen von Nachrichten verwendet

• cron ist ein Paket, das dazu dient, Code nach einem Zeitplan auszuführen

• dotenv lädt dynamisch .env Dateien,

  die für die Konfiguration unserer Anwendung verwendet wird

• express wird als Webserver verwendet, um unsere Nachrichten zu verarbeiten

• jsonwebtoken wird zur Validierung von JWT-Tokens verwendet

• uuid erstellt eindeutige Bezeichner

Kopieren Sie den privat.schlüssel in unseren Anwendungsordner, dann erstellen Sie eine .env Datei mit folgendem Inhalt:

VONAGE_APPLICATION_ID=<your application id>
VONAGE_PRIVATE_KEY_FILE=<full path to the private key>
VONAGE_BRAND_NAME=<id of your RBM account>
REMINDER_NUMBER=<your phone number or number you want to send the reminder to>

Erstellen Sie eine Datei namens server.js und bootstrap mit dieser Express-Boilerplate.

const Express = require('express');
require('dotenv').config();

const app = new Express();
const port = process.env.PORT || 3000;

// Catches async functions for express
const catchAsync = (fn) => (req, res, next) => {
  fn(req, res, next).catch(next);
};

app.use(Express.json());

// Hello World
app.all('/', catchAsync(async (req, res) => {
  console.log('Hello World', req.body);
  res.status(200).json({hello: 'World'});
}));

// Setup a 404 handler
app.all('*', (req, res) => {
  res.status(404).json({
	status: 404,
	title: 'Not Found',
  });
});

// Setup an error handler
app.use((err, req, res, next) => {
  res.status(500).json({
	status: 500,
	title: 'Internal Server Error',
	detail: err.message,
  });
});

Dann aktualisieren Sie package.json um ein Startskript zu erhalten:

{
  // ...
  "scripts": {
    "start": "node server.js"
  }
}

Jetzt können Sie Folgendes ausführen npm run start und ngrok, dann navigieren Sie zur ngrok-URL. Sie sollten "Hello World" im JSON-Format sehen. Das bedeutet, dass wir Express erfolgreich gebootstrapped haben.

So senden Sie Erinnerungsnachrichten

Jetzt werden wir die Erinnerung verschicken. Wir planen eine Funktion, die in regelmäßigen Abständen ausgeführt wird, indem wir die cron Paket. Cron-Ausdrücke liegen außerhalb des Rahmens dieses Beitrags, aber wenn Sie damit spielen wollen, wie oft die Erinnerung verschickt wird, empfehle ich Crontab.guru um den Ausdruck zu erstellen.

So richten Sie das Vonage Node SDK ein

Lassen Sie uns zunächst das SDK zum Senden von Nachrichten einrichten. Dazu müssen Sie die Anwendungs-ID und den privaten Schlüssel eingeben. Normalerweise können Sie den Pfad zum privaten Schlüssel angeben, und das SDK wird ihn lesen. Da wir den privaten Schlüssel jedoch im nächsten Schritt benötigen, lesen wir die Datei und speichern sie stattdessen in einer Variablen.

// Add this to the top of the file
const { Auth } = require('@vonage/auth');
const { Vonage } = require('@vonage/server-sdk');
const { readFileSync } = require('fs');

// This can go anywhere else
const key = readFileSync(process.env.VONAGE_PRIVATE_KEY_FILE).toString();

const auth = new Auth({
  applicationId: process.env.VONAGE_APPLICATION_ID,
  privateKey: key,
});

const vonage = new Vonage(auth);

So senden Sie eine Rich Card-Erinnerung

Wir werden unser eigenes JWT-Token generieren, das dann für den Inbound-Webhook verwendet werden kann, um sicherzustellen, dass wir Nachrichten von Vonage erhalten, aber auch, weil sie ein eingebautes Ablaufdatum haben. Wir wollen dem Benutzer eine bestimmte Zeitspanne für die Antwort geben. Durch die Verwendung eines JWT erfüllen wir beide Anforderungen.

Zunächst registrieren wir uns für den Cron-Job. Er wird alle fünf Minuten ausgeführt, um zu prüfen, ob der Empfänger bestätigt hat, dass er ein Glas Wasser getrunken hat.

// Add to top of the file
const { CronJob } = require('cron');

// Setup the cronjob
const job = new CronJob(
  // Run every 5 minutes
  '5 * * * * *',
  () => {
    sendReminder(reminderNumber);
  },
  null, // Data to pass into the cron function
  true, // Automatically start
  process.env.TZ || 'America/New_York', // The timezone
);

Als Nächstes werden wir einige Funktionen schreiben, um zu prüfen, ob wir eine Nachricht senden müssen. Wir speichern die Erinnerung in einem Array mit dem Token, das beim Senden der Nachricht erzeugt wird.

// Storage for sent reminders
const reminders = [];

// Check to see if we have sent a reminder 
const checkForReminders = (number) => {
  const search = reminders.find((reminder) => reminder.number === number);
  if (!search) {
	console.log('No reminder found');
	return false;
  }

  const { token } = search;
  console.log('Checking token', token);
  return validateToken(token);
};

// Send the reminder
const sendReminder = async (number) => {
  console.log('Checking for reminders');

  if (checkForReminders(number)) {
	console.log('Reminder already sent');
	return;
  }

  const token = await sendMessage(number, (job.nextDate() / 1000) + 10000);
  reminders.push([{number, token}]);
};

Jetzt geht es ans Senden der Nachricht. RCS Messaging bietet viele verschiedene Nachrichtentypen, darunter Rich Cards. Diese Karten enthalten den gesamten Inhalt, den der Client zum Rendern der Nachricht benötigt. Innerhalb des RCS-Kanals der Vonage Messages API werden Rich Cards unter Verwendung des Nachrichtentyps "custom" mit einer Schaltfläche zur Beantwortung mit "YES" gesendet. Wir erstellen ein Token und senden die Nachricht mit.

const sendMessage = async (number, exp) => {
  console.log('Sending message to', number);
  const token = tokenGenerate(
    auth.applicationId,
    auth.privateKey,
    {
      reminderId: uuid(),
      ...(exp ? {exp: exp} : {}),
    },
  );

  const message = new RCSCustom({
    to: number,
    from: process.env.VONAGE_BRAND_NAME,
    custom: {
  	contentMessage: {
    	  richCard: {
           standaloneCard: {
           cardOrientation: 'VERTICAL',
           cardContent: {
              title: 'Drink Water Reminder',
              description: 'Did you drink water today?',
              media: {
                height: 'SHORT',
                contentInfo: {
// Add a 
                  fileUrl: 'https://as1.ftcdn.net/jpg/02/22/48/50/220_F_222485075_uAeqmITGagEGdy9D4nWVou0a6dj6EuUz.jpg',
                },
              },
              suggestions: [
                {
                  reply: {
                    text: 'Yes',
                    postbackData: token,
                  },
                },
              ],
            },
          },
    	  },
       },
    },
  });

  console.log('Sending reminder', message);
  try {
	const res = await vonage.messages.send(message);
	console.log('Message sent', res);
	return token;
  } catch (err) {
	console.error('Error sending message');
	err.response.text().then((text) => {
  	console.log(text);
	});
  }
};

Wenn wir nun npm run start ausführen, erhält unser Telefon nach etwa fünf Minuten eine Nachricht mit der Frage, ob wir Wasser getrunken haben.

Bestätigung der Nachricht

Wie können wir also verhindern, dass die Nachricht erneut versendet wird? Nun, hier kommt der Webhook ins Spiel. Wenn der Benutzer "Ja" drückt, antwortet der Client dem RCS-Agenten, der dann an Vonage weitergeleitet wird. Wir rufen dann einen Webhook mit den angehängten Daten auf, damit Sie diese verarbeiten können. Die Nachricht sieht dann wie folgt aus:

{
   "channel": "rcs",
   "message_uuid": "aaaaaaaa-bbbb-4ccc-8ddd-0123456789ab",
   "to": "Vonage",
   "from": "<Number>",
   "timestamp": "2020-01-01T14:00:00.000Z",
   "context_status": "none",
   "message_type": "reply",
   "reply": {
  	"payload": "<The JWT Token>",
  	"text": "Yes"
   }
}

Beachten Sie, dass von und zu vertauscht wurden, da dies vom Telefon kam. Mit dieser Nutzlast können wir unsere Erinnerung finden und sie entfernen. (Wir validieren auch das von uns signierte Token, das nicht einfach gefälscht werden kann).

app.all('/inbound', catchAsync(async (req, res) => {
  console.log('Inbound', req.body);

  const {channel, message_type, reply, from} = req.body;
  if (channel !== 'rcs') {
	console.log('Not RCS');
	res.status(200).json({ok: true});
	return;
  }

  if (message_type !== 'reply') {
	console.log('Not reply');
	res.status(200).json({ok: true});
	return;
  }

  const { id } = reply|| {};

  console.log('Id', id);

  if (!id) {
	console.log('No id');
	res.status(200).json({ok: true});
	return;
  }

  if (!validateToken(id)) {
	console.log('Invalid id');
	res.status(200).json({ok: true});
	return;
  }

  const index = reminders.findIndex((reminder) => reminder.number === from);
  reminders.splice(index, 1);
  console.log('Reminder removed', reminders);

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

Und da haben Sie es! Das Senden und Empfangen von RCS-Nachrichten ist mit der Messages API ein Kinderspiel. Jetzt können Sie mit ein paar Zeilen Code umfangreiche Messaging-Applikationen erstellen. Am besten ist es, wenn diese Nachrichten nicht transaktionsbezogen, sondern dialogorientiert sind. Auf diese Weise können Sie die Erfahrung Ihrer Benutzer verbessern, indem Sie sie anleiten, anstatt sie zu informieren.

Nächste Schritte

RCS wird das Messaging-Erlebnis mit erweiterten Funktionen und Integrationsmöglichkeiten verbessern. Mit der Messages API von Vonage können Sie RCS ganz einfach in Ihre Applikationen einbinden und Ihren Nutzern Echtzeit-Messaging und reichhaltige interaktive Elemente zur Verfügung stellen. Ab Frühherbst 2024 wird Vonage die Aktivierung von RCS über seine Plattform einfach machen. Dies eröffnet spannende Möglichkeiten, ansprechende und funktionsreiche Messaging-Lösungen zu entwickeln.

Um loszulegen, lesen Sie die RCS Custom Messages Dokumentation für weitere Informationen zur Integration anderer RCS Nachrichtentypen mit Vonage. Für fortgeschrittene RCS Interaktivität, können Sie auch erkunden:

• Senden und Empfangen von RCS-Antwortvorschlägen mit Node.js um Nutzern eine schnelle Interaktion mit vorgeschlagenen Antworten zu ermöglichen.

• Wie man RCS Rich Card Karussells mit Node.js senden um mehrere Erinnerungen, Angebote oder Optionen in einem durchstreichbaren Format anzuzeigen.

Sie können sich auch dieses GitHub-Repository um eine vollständige Arbeitsversion dieses Codes zu sehen.

Beteiligen Sie sich am Gespräch auf unserem Vonage Community Slack oder senden Sie uns eine Nachricht auf X, früher bekannt als Twitter.