https://a.storyblok.com/f/270183/1368x665/53507eb36b/25sep_dev_blog_github-rcs.jpg

Senden und Öffnen von RCS-Dateien mit GitHub Codespaces

Zuletzt aktualisiert am September 9, 2025

Lesedauer: 5 Minuten

Einführung

Dieses Tutorial zeigt Ihnen, wie Sie eine Datei über RCS mit der Vonage Messages API senden und öffnen können. Vonage Messages API. Im Gegensatz zu SMS oder MMS unterstützt RCS qualitativ hochwertigere Dateien ohne strenge Größenbeschränkungen, was es zu einer geeigneten Option für Dokumente wie Tickets, Rechnungen oder PDFs macht. In diesem Beitrag werden wir eine PDF-Datei über RCS mit GitHub Codespaces senden.

A gif showing a message being received, clicked, and a PDF dummy file opened.open RCS message containing PDF

Voraussetzungen

  • A GitHub Account

  • A registrierter RCS Business Messaging (RBM) Agent

  • Ein Telefon mit RCS-Funktionen zum Testen

    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.

GitHub Codespaces

Übersicht

Ich habe in letzter Zeit GitHub Codespaces erkundet. Dabei handelt es sich um eine Entwicklungsumgebung, die in einem Docker-Container gehostet wird und auf einer virtuellen Maschine läuft. Ich verwende sie meist, indem ich auf ein GitHub-Repository zugreife und an die URL /codespaces an die URL anhänge, damit ich in Visual Studio Code über meinen bevorzugten Browser darauf zugreifen kann. Alternativ können Sie eine Codespace-Instanz aus einer Vorlage oder einem beliebigen Branch oder Commit in einem GitHub-Repository erstellen.

Öffnen Sie das Projekt in Codespaces

Sie können beginnen, indem Sie auf das Repository zugreifen, das ich für diesen Blogbeitrag erstellt habe und anhängen /codespaces. Die URL würde wie folgt aussehen: https://github.com/Vonage-Community/blog-messages-nodejs-rcs-file/codespaces

Klicken Sie auf "Create codespace on main" oben rechts auf der Seite. GitHub wird eine neue Umgebung für Sie einrichten.

Screenshot of a GitHub repository page highlighting the green button “Create codespace on main” in the Codespaces tab.Click “Create codespace on main” to start your environmentSobald es geladen ist, befinden Sie sich in einem browserbasierten VS-Code-Editor, in dem Sie das Projekt sofort ausführen und bearbeiten können. Verwenden Sie dies, um Ihre Instanz auszuführen. Sie können den Code, den ich in diesem Blogbeitrag zeige, jedoch auch in Ihrer bevorzugten IDE oder Umgebung ausführen.

Weitere Details finden Sie in der offiziellen Anleitung von GitHub: Schnellstart für GitHub Codespaces.

Lernen Sie ein paar Befehle für Codespaces

Wenn Sie Erfahrung mit Visual Studio Code haben, können Sie sich mit Codespaces zurechtfinden. Sie können immer navigieren und finden Sie die unten auf die Menüs, aber hier sind einige Befehle, um Ihnen helfen, leichter zu navigieren:

  • Dateien öffnen: Control + ` auf Mac oder Windows/Linux.

  • Öffnen Sie das Terminal: Command + Shift + P auf Mac oder Ctrl + Shift + P unter Windows/Linux.

Installation mit npm

Führen Sie npm install im Codespaces-Terminal aus, um die folgenden Pakete zu installieren, die in der Datei package.json zu finden sind.

  • dotenvdotenv: lädt Ihre Umgebungsvariablen aus einer .env-Datei und hält sensible Informationen wie API-Schlüssel geheim.

  • @vonage/server-sdk: das zentrale Vonage Node.js SDK. Es hilft Ihnen bei der Authentifizierung und Initialisierung des Vonage-Clients.

  • @vonage/messagesVonage Messages API: eine spezielle Bibliothek für den Versand von Nachrichten über die Vonage Messages API. Wir verwenden sie zum Senden von RCS-Nachrichten (Text, Bilder, Dateien usw.).

npm install dotenv @vonage/server-sdk @vonage/messages

Hinzufügen der Umgebungsvariablen

Einige Variablen enthalten sensible Informationen, so dass ich API-Schlüssel, Geheimnisse oder sogar die Telefonnummer, die ich für Tests verwenden werde, nicht öffentlich hinzufügen möchte. Deshalb werden wir sie in eine .env-Datei einfügen. Hier finden Sie weitere Informationen zur Verwendung von Umgebungsvariablen in Node.

Eine .env-Datei erstellen

Kopieren Sie die Datei .env.example in eine neue .env-Datei, die Sie jetzt erstellen sollten. Über das Codespaces-Terminal:

touch .env

Im folgenden Codeschnipsel liste ich alle Umgebungsvariablen auf, die wir benötigen. Ich werde sie einzeln erklären und erläutern, wo sie zu finden sind.

VONAGE_APPLICATION_ID=000000-0000-0000-0000-0000000000

VONAGE_PRIVATE_KEY=./private.key

RCS_SENDER_ID=NameOfYourAgent

MESSAGES_FILE_URL=https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
  • Melden Sie sich bei Ihrem Vonage Account an und fahren Sie mit der Erstellung einer neuen Anwendung fort.

    • Um eine Anwendung zu erstellen, gehen Sie auf die Seite Erstellen einer Anwendung auf dem Vonage Dashboard und legen Sie einen Namen für Ihre Anwendung fest.

    • Wenn Sie eine API verwenden möchten, die Webhooks nutzt, benötigen Sie einen privaten Schlüssel. Klicken Sie auf "Generate public and private key", der Download sollte automatisch starten. Bewahren Sie ihn sicher auf; dieser Schlüssel kann bei Verlust nicht erneut heruntergeladen werden. Er folgt der Namenskonvention privat_<Ihre App-ID>.key. Dieser Schlüssel kann nun zur Authentifizierung von API-Aufrufen verwendet werden. Hinweis: Ihr Schlüssel funktioniert erst, wenn Ihre Anwendung gespeichert ist.

    • Wählen Sie die benötigten Funktionen (z. B. Voice, Nachrichten, RTC usw.) und stellen Sie die erforderlichen Webhooks bereit (z. B. Ereignis-URLs, Antwort-URLs oder URLs für eingehende Nachrichten). Diese werden im Lernprogramm beschrieben.

    • Zum Speichern und Bereitstellen klicken Sie auf "Neue Anwendung generieren", um die Einrichtung abzuschließen. Ihre Anwendung ist nun bereit für die Verwendung mit Vonage-APIs.

  • In der Anwendungsansicht enthält jede Anwendung eine Anwendungs-ID. Kopieren Sie diese Zeichenfolge und fügen Sie sie in Ihre VONAGE_APPLICATION_ID Variable ein.

  • Klicken Sie auf , um einen privaten Schlüssel zu erzeugen. Es wird eine Datei in Ihren Download-Ordner heruntergeladen. Fügen Sie diese zum Stammverzeichnis Ihrer Datei auf GitHub Codespaces hinzu. Benennen Sie sie private.key.

  • RCS-Nachrichten werden von einem Agenten versendet, den Sie unter der Registerkarte "Verknüpfung externer Konten" finden, sobald Sie ihn erstellt haben. RCS-Nachrichten verstehen.

  • Die MESSAGES_FILE_URL enthält eine URL zu einer Datei, die per RCS-Nachricht gesendet werden soll. Ich habe diesen öffentlichen PDF-Dateipfad für Tests verwendet.

Verstehen Sie die Logik

Öffnen Sie die index.js JavaScript-Datei, die Sie im linken Menü in GitHub Codespaces finden.

Importabhängigkeiten

Am Anfang der Datei sehen Sie den Import der beiden Vonage-Pakete: @vonage/server-sdk und @vonage/messagesdie zuvor im Abschnitt "Installation mit Npm" erklärt wurden.

import "dotenv/config";

const { Vonage } = require('@vonage/server-sdk');

const { Channels } = require('@vonage/messages');

Initialisieren des Vonage-Clients

Initialisieren Sie den Vonage-Client, indem Sie die Anwendungs-ID und den privaten Schlüssel.

const vonage = new Vonage({

  applicationId: process.env.VONAGE_APPLICATION_ID,

  privateKey: process.env.VONAGE_PRIVATE_KEY,

});

Senden der RCS-Nachricht

Um eine RCS-Nachricht mit der Messages API zu senden, verwenden wir die vonage.messages.send Methode der Vonage Node.js-Bibliothekunter Angabe des ‘RCS’ Kanal. Diese Methode akzeptiert Objekte als Parameter, die Informationen über den Empfänger, den Absender und den Inhalt enthalten.

Ich habe die MessageType als eine file. Sie können alle Unterstützte Medientypen.

vonage.messages.send({

  messageType: 'file',

  channel: Channels.RCS,

  file: {

    url: process.env.MESSAGES_FILE_URL,

  },

  to: process.env.PHONE_NUMBER,

  from: process.env.RCS_SENDER_ID,

})

  .then(({ messageUUID }) => console.log(messageUUID))

  .catch((error) => {

  console.error("Error sending RCS message:", error);

});

Führen Sie Ihren Code aus

Führen Sie über das Terminal in GitHub Codespaces die Datei index.js-Datei. Wenn wir diese Datei ausführen, wird eine RCS-Nachricht an die angegebene Telefonnummer gesendet. Auf dem angegebenen Gerät wird eine Nachricht mit dem Namen "attachment" angezeigt, und wenn Sie darauf klicken, können Sie die Datei sehen, die Sie auf der Seite MESSAGES_FILE_URL.

node index.js

Bewährte Praktiken und mögliche Verlängerung

Wenn Sie noch weiter gehen möchten, sollten Sie Installieren und Ausführen von ngrok zu installieren und auszuführen, um Ihren lokalen Server freizulegen und Vonage zu ermöglichen, Webhook-Anfragen direkt an Ihre Entwicklungsumgebung zu senden. Dies erleichtert das Testen von Echtzeit-Interaktionen, wie z. B. eingehende Nachrichten und Lieferquittungen. Sie können auch eine JWT-Verifizierung implementieren, um eingehende Webhooks zu validieren und sicherzustellen, dass sie aus vertrauenswürdigen Quellen stammen.

Schlussfolgerung

Nachdem Sie nun gelernt haben, wie man Dateien über RCS versendet, können Sie Ihre Lösung durch die Implementierung von vorgeschlagene Antworten oder Rich-Card-Karussells. Derzeit wird einfach ein Anhang mit dem Dateinamen gesendet. Sie können Rich-Card-Lösungen verwenden, um die Nachricht und die freigegebenen Dateien noch anschaulicher zu gestalten und die Nutzung zu erleichtern.

Haben Sie eine Frage oder möchten Sie etwas mitteilen? Beteiligen Sie sich am Gespräch auf dem Vonage Community Slackund bleiben Sie auf dem Laufenden mit dem Entwickler-Newsletter, folgen Sie uns auf X (früher Twitter), abonnieren Sie unseren YouTube-Kanal für Video-Tutorials, und folgen Sie der Vonage Entwickler-Seite auf LinkedInein Raum für Entwickler, um zu lernen und sich mit der Community zu vernetzen. Bleiben Sie in Verbindung, teilen Sie Ihre Fortschritte und halten Sie sich über die neuesten Nachrichten, Tipps und Veranstaltungen für Entwickler auf dem Laufenden!

Teilen Sie:

https://a.storyblok.com/f/270183/400x400/3f6b0c045f/amanda-cavallaro.png
Amanda CavallaroAdvokat für Entwickler