Erste Schritte mit der Vonage Video-Referenzanwendung für React

Wir möchten, dass Sie so schnell wie möglich mit unseren APIs arbeiten können, aber manchmal kann das wie eine entmutigende Aufgabe erscheinen. Während einige APIs nur eine oder zwei Zeilen Code erfordern (ich schaue Sie an Messages API), erfordern einige APIs naturgemäß etwas mehr Einrichtungsaufwand. Die Video API von Vonage kann eine der entmutigend erscheinenden APIs sein.

Fürchtet euch nicht! Wir haben nicht nur Beispiel-Backends und Beispiel-Frontend-Codesondern Sie möchten vielleicht auch eine voll funktionsfähige Anwendung sehen oder mit ihr beginnen. Hierfür haben wir unsere Vonage Video Referenzanwendung für React. Es handelt sich um eine Anwendung, die so konzipiert ist, dass sie sofort einsatzbereit ist, so dass Sie lernen können, wie Sie Ihre eigene Anwendung erstellen können, oder sie kann als Grundlage für Ihre eigenen Bedürfnisse verwendet werden.

Wir bieten zwei verschiedene Möglichkeiten, die Referenzanwendung in nur wenigen Minuten auszuprobieren. Am Ende dieses Artikels werden Sie eine laufende Version unserer Referenzanwendung für React haben, die entweder in unserem Cloud-Runtime-Hosting-Produkt oder auf Ihrem lokalen Rechner läuft.

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.

Ausführung auf Vonage Cloud Runtime

Sie können die Cloud-Runtime-Plattform von Vonage nutzen, um die Anwendung auszuführen und ein Hosting für die Anwendung bereitzustellen, während Sie sich mit der Referenz-App umsehen, wenn Sie die Anwendung nicht auf Ihrem lokalen Rechner ausführen möchten oder können. Dadurch werden ein In-Browser-Editor und ein System zur Bereitstellung Ihres Codes gestartet. Da dies einen In-Browser-Editor startet, wird empfohlen, Chrome oder einen Chrome-basierten Browser zu verwenden.

So führen Sie die Anwendung in Cloud Runtime aus:

1. Besuchen Sie die Vonage Video API Referenz-App für React Seite auf Cloud Runtime.

2. Klicken Sie auf "Anmelden, um loszulegen", wenn Sie noch nicht angemeldet sind.

3. Klicken Sie auf die Registerkarte "Code holen" direkt unter der Überschrift der Seite.

4. Klicken Sie auf die Schaltfläche "Eine neue Entwicklungsumgebung erstellen".

5. Wählen Sie die Region aus, geben Sie einen Namen für den Arbeitsbereich ein, z. B. "video-reference-demo", und klicken Sie auf "Weiter".

6. Cloud Runtime erstellt für Sie einen Arbeitsbereich mit einem Code-Editor und richtet die gesamte Authentifizierung für Ihr Projekt ein.

7. Gehen Sie in der oberen Navigationsleiste auf "Ansicht" und klicken Sie dann auf "Terminal", um das Terminal des Arbeitsbereichs anzuzeigen.

8. Führen Sie die Anwendung mit yarn deploy-vcr.

Der Code-Editor von Cloud Runtime kann verlangen, dass Sie Cookies von Drittanbietern aktivieren, und wenn er feststellt, dass sie blockiert sind, erhalten Sie möglicherweise ein Popup-Fenster, in dem erklärt wird, wie Sie sie aktivieren können. Dies ist auf den Visual Studio Code-Web-Editor selbst zurückzuführen, und die Nichtaktivierung von Cookies von Drittanbietern kann die Verwendung der Cloud Runtime beeinträchtigen. Wenn dies ein Datenschutzproblem für Sie darstellt, lesen Sie bitte nach, wie Sie den Code lokal oder auf einem Server ausführen können.

Cloud Runtime verpackt das Projekt, übermittelt es an die Hosting-Plattform und erstellt die Anwendung. Dies kann einige Minuten in Anspruch nehmen. Sobald der Vorgang abgeschlossen ist, sehen Sie etwas Ähnliches wie das Folgende:

/-------
| Instanz wurde bereitgestellt!
| Instanz-ID: 503d54fc-5bec-xxxx-xxxx-24fb10ee0e48
| Instanzdienstname: neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app
| Host-Adresse der Instanz: https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud
\-------

Ganz am Ende steht eine URL zu Ihrer laufenden Instanz, in diesem Fall ist es https://neru-xxxxxxxx-vonage-video-react-app-vonage-video-react-app.euw1.runtime.vonage.cloud. Sie können diese URL kopieren, eine neue Registerkarte oder ein neues Fenster öffnen und sie in die Adressleiste einfügen. Sie sollten den Startbildschirm der Referenz-App sehen:

Vonage Video Reference App for React Landing Page

Sie können jetzt mit der Referenz-App beginnen, um zu sehen, welche Funktionen sie enthält und sogar zu bewerten, ob sie als Grundlage für Ihr Projekt geeignet ist. Sie können einen neuen Raum erstellen und prüfen, welche Funktionen für Videobesprechungen zur Verfügung stehen, und sogar Personen dazu einladen. Fast alle wichtigen Funktionen, die unsere Video-Plattform bietet, sind verfügbar.

Sie können zu Cloud Runtime zurückkehren und den Code untersuchen. So können Sie die Anwendung an Ihre eigenen Bedürfnisse anpassen oder einfach sehen, wie die verschiedenen Teile des Codes funktionieren.

Wenn Sie irgendwelche Änderungen am Code vornehmen, können Sie einfach yarn deploy-vcr ausführen, um Ihre Änderungen wieder auf der Hosting-Plattform bereitzustellen. Bitte beachten Sie, dass die Bearbeitung einer Datei nicht sofort verfügbar ist. Sie müssen den Code erst bereitstellen, bevor er im Browser verwendet werden kann.

Wenn Sie zur Codeansicht zurückkehren möchten, um den Code zu bearbeiten oder erneut bereitzustellen, können Sie zu Ihrem Arbeitsbereiche Seite gehen, wo Sie eine Karte für Ihren Arbeitsbereich sehen:

Example Instance Card for the Reference App in Cloud Runtime

Du kannst den Code selbst aufrufen, indem du auf die Kachel klickst, aber wenn du nur die laufende Instanz sehen willst, kannst du auf das Kebab-Menü (die 3 Kreise in der oberen rechten Ecke) klicken und dann auf "URL kopieren".

Lokales Laufen

Um lokal zu arbeiten, müssen Sie Folgendes bereits vorinstalliert haben:

• Node.js v22

• Garn

• Git

• Ein Kommandozeilen-Terminal

• Eine Vonage-Anwendung und der zugehörige private Schlüssel

Diese Anleitung setzt voraus, dass Sie ein lokales Terminal installiert haben und über grundlegende Kenntnisse im Umgang mit Ihrer Shell verfügen. Die Beispielbefehle sollten für ein Linux-, WSL- oder macOS-Terminal funktionieren. Wenn Sie Powershell oder CMD verwenden, müssen Sie die Befehle möglicherweise ändern.

Sie können eine Vonage-Anwendung über das Vonage Dashboard oder mit Hilfe der Vonage CLI.

Sobald Sie alle Voraussetzungen installiert haben:

1. Gehen Sie zur vonage-video-react-app GitHub-Repository

2. Klicken Sie auf die grüne Schaltfläche "Code" und in der daraufhin angezeigten Dropdown-Liste auf das Symbol "Kopieren" neben der Adresse. Wenn Sie bei GitHub angemeldet sind, wird möglicherweise eine SSH-Adresse angezeigt, wenn Sie abgemeldet sind, wird eine HTTPS-Adresse angezeigt. Beides ist möglich.

3. Öffnen Sie auf Ihrem PC ein Terminalfenster.

4. Wechseln Sie in das Verzeichnis, in dem Sie die Referenzanwendung installieren möchten.

5. Klonen Sie das Projekt der Referenzanwendung mit git clone und der soeben kopierten Adresse:

git klonen git@github.com:Vonage/vonage-video-react-app.git

1. Wechseln Sie in das Verzeichnis vonage-video-react-app/ Verzeichnis.

2. Kopieren Sie die Standardkonfigurationsdateien, bei UNIX-Rechnern verwenden wir cp.

cp backend/.env.example backend/.env

cp frontend/.env.example frontend/.env

1. Öffnen Sie die backend/.env/ Datei und bearbeiten Sie die folgenden beiden Zeilen mit Ihrer Anwendungs-ID und Ihrem privaten Schlüssel. Sie sollten sich am Anfang der Datei befinden.

VONAGE_APP_ID=''

VONAGE_PRIVATE_KEY=''

1. Installieren Sie im Stammverzeichnis des geklonten Projekts die Abhängigkeiten:

Garn

1. Starten Sie den Entwicklungsserver:

Garnentwicklung

1. Sobald die Anwendung das Bootstrapping abgeschlossen hat, gibt sie Ihnen eine "lokale" Adresse an, die Sie besuchen können. Vorausgesetzt, dass auf Ihrem Rechner nichts anderes läuft, sollten Sie in der Lage sein, die Adresse http://localhost:5173/ aufrufen und den Bildschirm "Raum erstellen" sehen:

Erforschen und Experimentieren

Unabhängig davon, wie Sie die Referenzanwendung installieren und nutzen, haben Sie die Freiheit, mit dem Code zu experimentieren. Sie können sich ansehen, wie Sie verschiedene Frontend-Optionen mit React implementieren und wie Sie einen Backend-Server einrichten, der alle Verwaltungsfunktionen für Sie übernimmt.

Schlussfolgerung

Haben Sie Lust, mit uns über die Referenz-App zu plaudern? Treten Sie unserer florierenden Entwickler-Community auf Slackoder folgen Sie uns auf X (früher Twitter), oder abonnieren Sie unseren Entwickler-Newsletter. Bleiben Sie mit uns in Verbindung, teilen Sie Ihre Fortschritte mit anderen und halten Sie sich über die neuesten Nachrichten, Tipps und Veranstaltungen für Entwickler auf dem Laufenden!