Wie man eine Video-Chat-App erstellt

Erst neulich bin ich auf dieses tolle Twilio-Tutorial von Phil Nash gestoßen, in dem erklärt wird, wie man einen Video-Chat mit React Hooks erstellt. Ich beschloss, es in Back4app laufen zu lassen, weil es kostenlos ist, weil es toll ist und weil es mit Parse integriert werden kann, so dass ich kostenloses Web-Hosting (inklusive kostenloser back4app-Subdomain) habe, meine App hosten und Echtzeit-Datenlieferung nutzen kann, um in Zukunft Chat-Funktionen einzubinden.
In diesem Beitrag zeige ich, wie ich es zum Laufen gebracht habe.

Das Wichtigste zuerst

Ich empfehle dringend, den Artikel von Phil durchzulesen und es auf Ihrem Rechner zum Laufen zu bringen, bevor Sie es online zum Laufen bringen.

Sie benötigen minimale Kenntnisse in NodeJS, React und Express, um fortzufahren. Ich werde die Schritte erklären, die ich unternommen habe und warum, aber wenn Sie mit diesen Technologien nicht vertraut sind, verstehen Sie vielleicht nicht genau, warum diese benötigt werden.

Erster Schritt – Was Sie brauchen

Phil’s Artikel besagt, dass Sie Node.js und NPM installiert und funktionsfähig sein müssen. Ich hatte das bereits in meinem System, so stellen Sie sicher, dass Sie auch haben.

Außerdem benötigen Sie ein Twilio-Konto. Erstellen Sie also ein kostenloses Konto, und schon kann es losgehen.

Zweiter Schritt – Erste Schritte

Der allererste Schritt, das Klonen des Repositorys, hat bei mir nicht funktioniert. Der Befehl Phil besagt:

git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks

gab mir ein paar Fehler, und am Ende funktionierte das hier:

git clone https://github.com/philnash/twilio-video-react-hooks.git

Damit sind die anderen Befehle gut ausgeführt:

cd twilio-video-react-hooks
npm installieren

Ergebnis:

Wenn Sie lokal arbeiten, müssen Sie Ihre env-Datei wie in Phils Artikel beschrieben einstellen, aber da der Schwerpunkt hier auf der Ausführung in Back4app liegt, überspringe ich das vorerst.
Wir benötigen immer noch die Werte TWILIO_API_KEY, TWILIO_API_SECRET und TWILIO_ACCOUNT_SID von Ihrem Twilio-Konto, aber wir werden diese an einer anderen Stelle verwenden.

Den Code ein wenig ändern

Da unsere Architektur anders ist, müssen wir ein paar wichtige Dinge ändern.

Der erste Punkt sind die NPM-Module. Der obige Befehl npm install installiert die Module auf Ihrem Computer, aber in Back4app müssen Sie Parse anweisen, sie für Sie zu installieren.

Wir haben eine großartige Anleitung, die erklärt, wie es geht, also schauen Sie hier nach.

Am Ende sah meine package.json-Datei wie folgt aus:

{ 
   "Abhängigkeiten": {
           "express-pino-logger": "*",
           "twilio": "*"  
   } 
}

Beachten Sie, dass ich das Twilio-Modul in seiner neuesten Version installiere (“*” bedeutet die neueste Version). An dieser Stelle könnten Sie sich fragen, warum ich das tue, da Parse bereits ein Twilio-Modul in den Stack integriert hat:

Der Grund dafür ist die Versionierung. Aus Kompatibilitätsgründen verfügt jede Parse-Version über einen Stapel von Modulen mit bestimmten Versionen, die für Ihren speziellen Fall funktionieren können oder auch nicht. Um eine Version zu verwenden, die nicht im Stack aufgeführt ist, können wir sicherstellen, dass Parse die richtige Version installiert, indem wir sie in der package.json-Datei angeben.

Bauen wir sie

Für die Bereitstellung müssen wir eine laufzeitoptimierte Version unseres Codes erstellen. In Phils Artikel sagt er, dass wir das tun sollten:

npm run dev

was in einer lokalen Umgebung funktioniert, aber in unserem Fall werden wir das Programm im Projektverzeichnis ausführen:

npm run build

der einen neuen Ordner mit dem Namen build erzeugt, der alle unsere Assets enthält:

Anschließend laden wir den gesamten Inhalt unseres Build-Ordners in unseren öffentlichen Ordner im Abschnitt Cloud Code hoch.

Es gibt verschiedene Ansätze für den Upload. Sie können es manuell von Ihrem Browser aus tun, aber ich bevorzuge die Back4app CLI, um alles für mich bereitzustellen. Das geht viel schneller und stellt sicher, dass alles an seinem Platz ist.

Am Ende sollte Ihre Hauptstruktur wie folgt aussehen:

Konfigurieren der App.js

Es gibt eine Datei, die Sie manuell ändern müssen: die Datei index.js im Serververzeichnis des Projekts.

Parse ist so konfiguriert, dass eine Datei namens app.js und nicht index.js ausgeführt wird.

Sie können eine Kopie mit dem Namen app.js erstellen und das Original in app.js umbenennen, aber am Ende muss es app.js heißen:

Wir müssen auch einige Änderungen an dieser Datei vornehmen.

In Zeile 7, wo es heißt

const app = express();

Parse hat Express bereits geladen und instanziiert, so dass dies zu einem Konflikt führen würde. Lassen Sie uns diese Zeile auskommentieren:

Auch die Zeilen 41 bis 43, wo es heißt:

app.listen(3001, () =>
  console.log('Der Express-Server läuft auf localhost:3001')
);

Parse wird diesen Port aus Sicherheitsgründen nicht öffnen können, also kommentieren wir ihn auch aus:

Eine andere Sache ist, dass wir das express-pino-logger Modul nie benutzt haben, also kommentieren wir die Zeilen 4 und 10 aus, wo es heißt:

const pino = require('express-pino-logger')();
...
app.use(pino);

Es wird also wie folgt aussehen:

Ganz oben in der Datei werden Sie feststellen, dass diese Datei zwei weitere lokale Dateien aufruft: config und tokens:

const config = require('./config');
...
const { videoToken } = require('./tokens');

Diese lokalen Dateien müssen zusammen mit der app.js-Datei hochgeladen werden, also laden wir alle drei Dateien in den Cloud-Ordner hoch.

Die Endstruktur wird wie folgt aussehen:

Teil der Codierung erledigt

Jetzt ist unser Code bereitgestellt und alles ist einsatzbereit. Jetzt ist es Zeit für einige Konfigurationen.

Erinnern Sie sich daran, dass Phil gesagt hat, dass wir die .env-Datei mit den Anmeldeinformationen von Twilio einstellen müssen?
In Parse gibt es dafür einen Abschnitt im Bereich Servereinstellungen.
Öffnen Sie das Feld Umgebungsvariablen:

Und richten Sie es genauso ein wie in der .env-Datei:

Denken Sie daran, dass Sie diese Werte über Ihr Twilio-Konto abrufen können:

Webhosting konfigurieren

Gehen Sie nun im Bereich Servereinstellungen zum Abschnitt Webhosting und Live Query:

Aktivieren Sie Webhosting und legen Sie eine back4app.io-Subdomain für Ihre Anwendung fest:

Speichern Sie es, und Sie sind startklar.

Prüfung

Nun ist es an der Zeit, unsere Anwendung zu testen.

Rufen Sie in einem Browser die URL auf, die Sie in Ihrem Webhosting eingestellt haben. Denken Sie nur daran, HTTPS als Protokoll zu verwenden.
Da wir den Zugriff auf Ihre Kamera verlangen, ist es zwingend erforderlich, dass Sie HTTPS verwenden, sonst erhalten Sie eine Fehlermeldung. Gehen Sie also zu:

https://Your_Domain_Name.back4app.io

Ihr Browser sollte Sie um Erlaubnis bitten, Ihre Kamera und Ihr Mikrofon zu verwenden. Wenn Sie ihm diese Erlaubnis erteilen, sollten Sie sich selbst auf dem Bildschirm sehen:

Schlussfolgerung

Ihr React-Projekt in Back4app zu haben ist einfach, kostenlos und großartig. Mit nur ein wenig Nacharbeit könnten wir Phils Projekt zum Laufen bringen.

Außerdem haben wir alle Vorteile von Parse und Back4app: Es ist sicher, skalierbar, ausfalltolerant und hat bereits Backups für Sie eingerichtet.

Sie können es sogar mit Parse-Funktionen wie Sign In mit Google, Sign In mit Apple, Sign In mit LinkedIn, Datenlieferung in Echtzeit und Verknüpfung mit unserem tollen Database Hub aufpeppen.

Es ist eine Menge Leistung, eine Menge Funktionen und das Allerbeste: es ist alles kostenlos für Sie, um kleine Anwendungen auszuführen.