Teilen Sie:
){kind=small}
Nahrin war Developer Educator bei Vonage. Ihre Leidenschaft gilt dem Aufbau inklusiver Gemeinschaften, der Erfüllung realer Bedürfnisse mit pragmatischen Softwarelösungen und der Erstellung technischer Inhalte, die für alle Kenntnisstufen zugänglich sind.
Erstellen eines Gesundheitsblogs mit Video-Coaching mit Preact.js und Vonage
Lesedauer: 15 Minuten
In diesem Tutorial werden wir eine Progressive Web App (PWA) erstellen, die als persönliches Gesundheits-Blogging-Tool mit Live-Videochat-Funktionalität dient - so können Sie direkt in der App Coaching erhalten! PWAs sind Websites, die so verbessert wurden, dass sie sich wie native Apps anfühlen und funktionieren und viele Funktionen bieten, die eine herkömmliche Website nicht hat, z. B.:
Installierbar auf mobilen Geräten
Push-Benachrichtigungen
Offline-Unterstützung
Auffindbar über Web-Suchergebnisse und App-Stores
Und Sie können Ihre Anwendung aktualisieren, indem Sie den Code Ihres Webservers direkt bearbeiten.
Wie fangen Sie also an?
So gut wie jede herkömmliche Webanwendung kann in eine grundlegende PWA umgewandelt werden, indem man eine manifest.json Datei und einer Service-Worker-JavaScript-Datei umgewandelt werden. Wenn Sie jedoch von Grund auf neu beginnen, können mehrere Tools den Prozess rationalisieren.
React App erstellen (CRA) ist ein Tool zur Erstellung von PWAs, das bei Entwicklern unglaublich beliebt ist, vor allem angesichts der schieren Größe der React.js Ökosystems. Standardmäßig ist jedes neue CRA-Projekt eine PWA - erstaunlich! Allerdings sollte eine PWA so schnell und performant wie möglich sein, und CRA tut nicht viel für die Codeoptimierung.
Aus diesem Grund wurde unsere Demo mit Preact.jsaufgebaut, einer leichtgewichtigen und schnelleren Alternative zu React, mit der gleichen integrierten Unterstützung für PWAs. Preact bietet Leistung, Größe, Effizienz und Kompatibilität in hohem Maße. Es ist nur 3,5kb groß und kompatibel mit den React-Modulen, die Sie auf npm finden. Die Möglichkeit, React/React DOM-Code zu schreiben, ohne Änderungen am Workflow oder der Codebasis vornehmen zu müssen, schränkt die Lernkurve ebenfalls erheblich ein.
Für weitere Informationen zu den Unterschieden zwischen den Bibliotheken und den Besonderheiten von Preact, lesen Sie die Preact-Dokumentation.
Die Preact CLI funktioniert wie Create React App und ist genauso einfach zu bedienen. Mit einer minimalen und verständlichen Projektstruktur können Sie sofort loslegen und bringt Ihr Projekt auf den Weg zu exzellenter Performance. Neue Projekte werden mit nur 4,5kB JavaScript in der Produktion ausgeliefert und werden in weniger als 3s interaktiv - selbst auf langsamen Geräten und Netzwerken. Zu den bemerkenswerten Funktionen gehören:
100/100 Leuchtturm Punktzahl, direkt nach dem Auspacken
Vollautomatisches Code-Splitting für Routen
Unterschiedliche JavaScript-Dienste
Automatisch generierte Service Worker für Offline-Caching mit sw-precache
Unterstützung für CSS-Module, LESS, Sass und Stylus mit Autoprefixer
Überwachung Ihrer Bündel-/Stückgrößen mit integrierter Nachverfolgung
Unterstützung des Push Render Pre-Cache Lazy-load (PRPL) Musters für effizientes Laden
Weitere Informationen zu den Funktionen finden Sie in der Preact CLI-Dokumentation.
Gehört es zu Ihren Vorsätzen für das neue Jahr, gesünder zu werden? Diese Anwendung hilft Ihnen dabei, Ihre Fortschritte zu verfolgen, indem Sie mit Hilfe der Preact CLI über Ihre tägliche Aktivität, Ihre Ernährung, Ihr Energieniveau, Ihre Stimmung und vieles mehr bloggen können Netlify CMS Vorlage. Teilen Sie Ihre App mit allen Fachleuten, mit denen Sie zusammenarbeiten (Personal Trainer, Ernährungsberater, Therapeuten) und erhalten Sie Live-Video-Coaching direkt von der Plattform mit Vonage Video API.
Falls Sie bei Ihren Gesundheitszielen vom Weg abgekommen sind, hilft das Führen eines Tagebuchs nachweislich bei der Verantwortlichkeit!
Die Schritte:
Bevor Sie beginnen, benötigen Sie einige Dinge:
A Vonage Video API Account - erstellen Sie ein kostenloses Konto, wenn Sie es nicht bereits haben.
Node und NPM müssen in Ihrer Entwicklungsumgebung installiert sein. Dieses Lernprogramm verwendet Node (> V6.x) und NPM 6. Überprüfen Sie, ob sie installiert und auf dem neuesten Stand sind, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:
Falls erforderlich, navigieren Sie zu nodejs.org um die richtige Version zu installieren (> V6.x).
Möchten Sie zum Ende springen? Sie finden den Code für dieses Tutorial auf GitHub.
Um die Anwendung einzurichten, müssen wir die Preact CLI global installieren. Verwenden Sie den folgenden Befehl, um die CLI zu installieren.
Erstellen wir nun ein neues Projekt unter Verwendung der netlify-cms Vorlage. Dies wird einen einfachen Blog erstellen, der als Basis für unsere Anwendung dienen wird. Denken Sie daran, den Namen my-project-name durch den Namen, den Sie dem Projekt geben möchten.
Starten Sie den Entwicklungsserver mit dem folgenden Befehl:
Sie sind bereit! Ein neues Projekt wurde erstellt. Öffnen Sie Ihren Browser und gehen Sie zu http://localhost:8080 um den Fortschritt der Anwendung zu überprüfen, während wir mit dem Lernprogramm fortfahren.
Die Anwendung, die wir entwickeln, ist eine persönliche Plattform für Sie-und ich ermutige Sie, kreativ zu werden und das Design anzupassen! Wenn Sie schnell loslegen möchten, können Sie zunächst die Demo einige grundlegende Text- und Gestaltungselemente implementiert, und den Code finden Sie auf GitHub. Um den Standardtext auf der Homepage zu ändern, aktualisieren Sie den Code in home/index.js. Für Styling-Änderungen, style/index.css, home/style.css, blog/styles.css, und contact/styles.css sind gute Anlaufstellen.
Sie können diesen Schritt jederzeit wiederholen und das Styling so oft ändern, wie es Ihnen einfällt!
In Ihrem Vonage Video API Accountklicken Sie auf die Schaltfläche Projekte Menü und Neues Projekt erstellen. Sie haben dann die Möglichkeit Eingebettetes Projekt erstellen oder Benutzerdefiniertes Projekt erstellen. Die Video-Chat-Einbettung ist der einfachste Weg, um schnell und ohne Programmieraufwand grundlegende Videofunktionen hinzuzufügen. Es ermöglicht jedoch derzeit keine Integration von mobilen Apps (eine wichtige PWA-Funktion) und erweiterte Funktionen wie Archivierung, Bildschirmfreigabe und Text-Chat.
OpenTok Project types
Fahren wir also fort, indem wir auf die Schaltfläche Benutzerdefiniertes Projekt erstellen Schaltfläche. Geben Sie Ihrem neuen Projekt einen Namen und klicken Sie auf die Schaltfläche Erstellen Schaltfläche. Sie können den bevorzugten Codec auf "VP8" setzen.
Create Custom Project
Klicken Sie dann auf Projekt anzeigen. Unten auf der Projektdetailseite finden Sie die Projektwerkzeuge, mit denen Sie eine Sitzungs-ID und ein Token erstellen können. Verlassen Sie . Geroutet als Medienmodus Ihrer Sitzung und drücken Sie die Taste Sitzungs-ID erstellen Schaltfläche.
Create Video session
Fügen Sie schließlich die generierte Sitzungs-ID in das Feld Sitzungs-ID des Formulars Token generieren ein und klicken Sie auf die Schaltfläche Token generieren Schaltfläche.
Hinweis: Der Token läuft standardmäßig eine Stunde lang ab. Sie können diese Zeit jedoch auf bis zu 30 Tage verlängern.
Generate OpenTok token
Jetzt können wir mit dem Aufbau der Videokomponente beginnen!
Einer der Vorteile von Preact ist, dass es im Browser verwendet werden kann, ohne dass Build-Tools benötigt werden. Als JSX, die in React-Apps üblicherweise verwendete Syntax, transpiliert werden muss, verwendet Preact eine Alternative namens HTM. Anstatt eine benutzerdefinierte Syntax zu verwenden, stützt es sich auf native getaggte Template-Strings, die bereits in JavaScript enthalten sind.
Um die Lesbarkeit zu verbessern, werden wir in diesem Lernprogramm hauptsächlich JSX verwenden. Wir können leicht zwischen JSX und HTM wechseln, weil preact-compat- mehr dazu später!
Innerhalb des Ordners components Ordners erstellen Sie einen video Ordner, der alle Komponenten enthält, die wir hinzufügen wollen. Die Struktur sollte wie folgt aussehen:
project structure
Fügen Sie nun die folgenden Dateien in den Ordner video Ordner hinzu:
video.js
publisher.js
subscriber.js
checkbox.js
connectionStatus.js
Gehen Sie zu src/routes/contact/index.js und importieren Sie die Video Komponente und rufen Sie sie innerhalb Ihrer Return-Anweisung auf. Dies ist der Ort, an dem sich der Video-Chat-Bildschirm in der App befinden wird, sobald wir die notwendigen Komponenten erstellt haben. Der Code sollte folgendermaßen aussehen:
import { h } from 'preact';
import { lazy, Suspense } from 'preact/compat';
import style from './style';
let Video;
if (typeof window !== 'undefined') {
Video = lazy(() => import('../../components/video/video.js'));
}
const photographs = (props) => {
return (
<div class={style.pageContact}>
<h1 class={style.pageTitle}>Hello.</h1>
<p>Enable your audio and video to begin.</p>
<div class={style.formWrapper}>
<Suspense fallback={<div>loading...</div>}>
<Video />
</Suspense>
</div>
</div>
);
};
export default photographs;Hinweis: Beim Pre-Rendering der App wird unser Modul als Komponente in einer Node.js-Umgebung ausgeführt, in der die meisten Web-APIs nicht verfügbar sind. Um dies zu berücksichtigen, haben wir den Code in einen Check mit:
if (typeof window !== ‘undefined’). Wenn Sie diesen Schritt vernachlässigen, wird der Bereitstellungsprozess unweigerlich fehlschlagen.
Führen Sie in Ihrem Terminal aus:
Sie fragen sich vielleicht, ob dieser Befehl einen Tippfehler enthält. Müsste es nicht heißen opentok-preact? Interessanterweise, nein!
Die Preact CLI beinhaltet preact-compatdas eine dünne Schicht über Preact ist, die eine 100%ige Kompatibilität mit React anstrebt. preact/compat fügt etwa 2kb zu unserer Paketgröße hinzu, hat aber den Vorteil, dass es die große Mehrheit der existierenden React-Module unterstützt, die man auf npm finden kann. Dies ermöglicht uns auch, weiterhin React/ReactDOM-Code zu schreiben, ohne Änderungen am Workflow oder der Codebasis.
Kopieren Sie und fügen Sie die Werte für Ihre API Key, Session ID und Token in die video.js Komponente ein. Dies sind die Werte, die wir in unserem Vonage Video API Account in Schritt 2.
Die Sitzung ist im Wesentlichen ein Raum, in dem der Video-Chat stattfinden wird. Zu Beginn ist er unbesetzt und wartet darauf, dass Benutzer beitreten.
import { h, Component } from 'preact';
import { OTSession, OTStreams, preloadScript } from 'opentok-react';
import ConnectionStatus from './connectionStatus';
import Publisher from './publisher';
import Subscriber from './subscriber';
class VideoComponent extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
connected: false
};
this.sessionEvents = {
sessionConnected: () => {
this.setState({ connected: true });
},
sessionDisconnected: () => {
this.setState({ connected: false });
}
};
}
onError = (err) => {
this.setState({ error: `Failed to connect: ${err.message}` });
}
render() {
return (
<OTSession
apiKey=''
sessionId=''
token=''
eventHandlers={this.sessionEvents}
onError={this.onError}
>
{this.state.error ? <div id="error">{this.state.error}</div> : null}
<ConnectionStatus connected={this.state.connected} />
<Publisher />
<OTStreams>
<Subscriber />
</OTStreams>
</OTSession>
);
}
}
export default preloadScript(VideoComponent);Diese Komponente ist verantwortlich für die Anzeige Ihres Videos (wenn Sie der erste Teilnehmer der Sitzung sind) mit <Publisher />, das Video Ihres Trainers mit <Subscriber />, und ob Sie in einer Sitzung verbunden sind mit <ConnectionStatus />.
Nachdem die Sitzung aufgebaut wurde, werden die Sitzungs-ID und das Token verwendet, um zu veröffentlichen. einen Audio-Video-Stream des ersten Benutzers zu veröffentlichen. Zu diesem Zeitpunkt gibt es nur einen Teilnehmer in der Sitzung.
In publisher.js, einfügen:
import { h, Component } from 'preact';
import { OTPublisher } from "opentok-react";
import CheckBox from "./checkbox";
class Publisher extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
audio: false,
video: false,
videoSource: "camera"
};
}
setAudio = audio => {
this.setState({ audio });
};
setVideo = video => {
this.setState({ video });
};
changeVideoSource = videoSource => {
this.state.videoSource !== "camera"
? this.setState({ videoSource: "camera" })
: this.setState({ videoSource: "screen" });
};
onError = err => {
this.setState({ error: `Failed to publish: ${err.message}` });
};
render() {
return (
<div className="publisher">
{this.state.error ? <div id="error">{this.state.error}</div> : null}
<OTPublisher
properties={{
publishAudio: this.state.audio,
publishVideo: this.state.video,
videoSource:
this.state.videoSource === "screen" ? "screen" : undefined
}}
onError={this.onError}
/>
<CheckBox label="Share Screen" checked={this.state.videoSource === "screen"} onChange={this.changeVideoSource} />
<CheckBox label="Enable Audio" checked={this.state.audio === "audio"} onChange={this.setAudio} />
<CheckBox label="Enable Video" checked={this.state.videoSource === "video"} onChange={this.setVideo} />
</div>
);
}
}
export default Publisher;Mit Hilfe der CheckBox Komponente kann der Benutzer seinen Bildschirm freigeben oder Audio und/oder Video aktivieren.
Wenn ein neuer Benutzer die App startet, sendet der App-Server die Sitzungs-ID und ein eindeutiges Token, das dann für die Verbindung mit der Sitzung verwendet wird. Sobald die Verbindung hergestellt ist, können beide Benutzer veröffentlichen ihren Audio-Video-Stream zu veröffentlichen und zu abonnieren. um auf den Stream des anderen Nutzers zuzugreifen.
In subscriber.js, einfügen:
import { h, Component } from 'preact';
import { OTSubscriber } from "opentok-react";
import CheckBox from "./checkbox";
class Subscriber extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
audio: false,
video: false
};
}
setAudio = audio => {
this.setState({ audio });
};
setVideo = video => {
this.setState({ video });
};
onError = err => {
this.setState({ error: `Failed to subscribe: ${err.message}` });
};
render() {
return (
<div className="subscriber">
Guest
{this.state.error ? <div id="error">{this.state.error}</div> : null}
<OTSubscriber
properties={{
subscribeToAudio: this.state.audio,
subscribeToVideo: this.state.video
}}
onError={this.onError}
/>
<CheckBox
label="Enable Guest Audio"
initialChecked={this.state.audio}
onChange={this.setAudio}
/>
<CheckBox
label="Enable Guest Video"
initialChecked={this.state.video}
onChange={this.setVideo}
/>
</div>
);
}
}
export default Subscriber;Durch die Verwendung der CheckBox Komponente geben wir dem zweiten Nutzer die Möglichkeit zu wählen, ob er sein Audio und/oder Video mit Ihnen teilen möchte.
In checkbox.js, einfügen:
import { h, Component } from 'preact';
import { uniqueId } from "lodash";
class CheckBox extends Component {
constructor(props) {
super(props);
this.state = {
id: uniqueId("Checkbox")
};
}
onChange = e => {
const checked = e.currentTarget.checked;
if (checked !== this.props.value) {
this.props.onChange(checked);
}
}
render() {
return <div>
<label for={this.id}>{this.props.label}</label>
<input id={this.id} type="checkbox" checked={this.checked} onChange={this.onChange} />
</div>
}
}
export default CheckBox;Wenn Sie es vorziehen, eine Umschalt- oder Optionsschaltfläche für die Benutzer anzuzeigen, können Sie diese in dieser Komponente austauschen.
Mit connectionStatus.jswird angezeigt, ob die Chatsitzung mit beiden Benutzern verbunden ist. Dieser Schritt ist optional, wird aber empfohlen.
import { h, Component } from 'preact';
class ConnectionStatus extends Component {
render() {
let status = this.props.connected ? "Connected" : "Disconnected";
return (
<div className="connectionStatus">
<strong>Coaching Session Status:</strong> {status}
</div>
);
}
}
export default ConnectionStatus;Herzlichen Glückwunsch! Sie haben nun alle Komponenten hinzugefügt, die Sie für Ihre Live-Chat-Sitzungen benötigen. Besuchen Sie http://localhost:8080 um alles auszuprobieren.
Die Bereitstellung mit Netlify wird dringend empfohlen, da der Netlify-Bot für Preact CLI ist in der Lage, Ihre CMS-fähige Health-App mit einem Klick zu starten. Sobald der Bot mit Ihrem GitHub (oder GitLab) Account verbunden ist, erstellt er ein Repository für Ihre Health App. Sobald die Bereitstellung abgeschlossen ist, pushen Sie Ihre lokalen Änderungen in das Repository. Jedes Mal, wenn Sie weitere Änderungen veröffentlichen, stellt der Bot diese automatisch im globalen CDN bereit.
Netlify bot for easy deployment
Bei der Bereitstellung der Vorlage haben Sie eine Einladung zu Ihrer neuen App per E-Mail erhalten. Warten Sie, bis die Bereitstellung abgeschlossen ist, und klicken Sie dann auf den Link, um die Einladung anzunehmen. Ihre App öffnet sich mit einer Aufforderung, ein Passwort zu erstellen. Geben Sie ein Passwort ein, melden Sie sich an und Sie gelangen zum CMS. Für zukünftige Besuche können Sie direkt zu <yoursiteaddress.com>/admin/ um auf das CMS zuzugreifen. Versuchen Sie, Platzhalterbeiträge zu bearbeiten und zu veröffentlichen, um sich mit der Plattform vertraut zu machen.
CMS dashboard
Nachdem das CMS konfiguriert ist, ist unsere grundlegende PWA für das Gesundheitscoaching fertig!
Um die PWA zu auditieren, verwenden Sie Googles Leuchtturm in den Chrome Dev Tools oder fügen Sie die Firefox Erweiterung. Lighthouse simuliert ein mobiles Gerät und drosselt das Internet auf 3G-Geschwindigkeit und generiert Bewertungen und Verbesserungsvorschläge.
Es gibt eine Reihe von Möglichkeiten, diese Anwendung zu verbessern, um den Nutzen und die Erfahrung zu erhöhen.
Archivieren und protokollieren Sie Ihre Video-Coaching-Sitzungen. Wenn Sie sich die Videos offline ansehen möchten, fügen Sie benutzerdefinierte Funktionalität zum Service Worker hinzu.
Importieren Sie Daten von zusätzlichen Gesundheitstools, die Sie möglicherweise verwenden (z. B. My Fitness Pal API oder FitBit API). Dies könnte den Trainern helfen, ein genaueres Coaching zu geben.
Senden Sie eine SMS (oder eine Nachricht auf WhatsApp, Viber oder Facebook Messenger) an Ihren Coach, wenn ein neuer Beitrag veröffentlicht wurde. Sehen Sie sich die Vonage Nachrichten API für weitere Informationen.
Wenn Sie auf Probleme stoßen oder Fragen haben, wenden Sie sich an uns auf unserem Gemeinschaft Slack. Vielen Dank fürs Lesen!
Vielen Dank an das Preact.js-Team für die Unterstützung bei der Erstellung der Demo-App.