Partager:
){kind=small}
Nahrin a été développeur éducateur pour Vonage. Elle est passionnée par la construction de communautés inclusives, la réponse aux besoins du monde réel avec des solutions logicielles pragmatiques, et la création d'un contenu technique accessible à tous les niveaux de compétence.
Construire un blog sur la santé avec Video Coaching en utilisant Preact.js et Vonage
Temps de lecture : 17 minutes
Dans ce tutoriel, nous allons construire une Progressive Web App (PWA) qui sert d'outil de blogging personnel sur la santé avec une fonctionnalité de chat vidéo en direct - vous permettant de recevoir un coaching directement sur l'application ! Les PWA sont des sites web qui ont été améliorés pour ressembler à des applications natives et qui possèdent de nombreuses fonctionnalités qu'un site web traditionnel n'a pas, comme par exemple
Installable sur les appareils mobiles
Notifications push
Soutien hors ligne
Découvrable à partir des résultats de recherche sur le web et des boutiques d'applications
Et vous pouvez mettre à jour votre application en modifiant directement le code de votre serveur web.
Comment commencer ?
Pratiquement n'importe quelle application web traditionnelle peut être convertie en une PWA de base avec l'ajout d'un fichier manifest.json et d'un fichier JavaScript Service Worker. Toutefois, si vous partez de zéro, plusieurs outils peuvent rationaliser le processus.
Créer une application React (CRA) est un outil de création de PWA qui est incroyablement populaire parmi les développeurs, en particulier en raison de la taille de la base de données de React.js est incroyablement populaire auprès des développeurs. Par défaut, tout nouveau projet CRA est une PWA - étonnant ! Cependant, une PWA doit être aussi rapide et performante que possible, et CRA ne fait pas grand-chose pour l'optimisation du code.
C'est pourquoi notre démo est construite en utilisant Preact.jsune alternative légère et plus rapide à React, avec le même support intégré pour les PWA. Preact offre des performances, une taille, une efficacité et une compatibilité remarquables. Notamment, il ne pèse que 3,5 ko et est compatible avec les modules React que vous trouverez sur npm. Le fait de pouvoir écrire du code React/React DOM sans apporter de modifications au flux de travail ou à la base de code limite également de manière significative toute courbe d'apprentissage.
Pour plus d'informations sur les différences entre les bibliothèques et les fonctionnalités propres à Preact, consultez la documentation Preact.
L'interface Preact CLI fonctionne comme Create React App et est tout aussi facile à utiliser. Il vous permet d'être opérationnel instantanément avec une structure de projet minimale et compréhensible et met votre projet sur la voie d'une excellente performance. Les nouveaux projets sont livrés avec seulement 4,5 ko de JavaScript en production et deviennent interactifs en moins de 3 secondes, même sur des appareils et des réseaux lents. Parmi les fonctionnalités notables, citons
100/100 Phare score, dès la sortie de la boîte
Séparation entièrement automatique des codes pour les itinéraires
Différentiel JavaScript serving
Travailleurs de service générés automatiquement pour la mise en cache hors ligne grâce à sw-precache
Support des modules CSS, LESS, Sass, et Stylus avec Autoprefixer
Contrôle de la taille des paquets et des morceaux grâce à un système de suivi intégré
Prise en charge du modèle Push Render Pre-Cache Lazy-load (PRPL) pour un chargement efficace
Pour plus d'informations sur les fonctionnalités, consultez la documentation CLI de Preact.
Devenir plus sain est l'une de vos résolutions pour la nouvelle année ? Cette application vous aidera à suivre vos progrès en vous permettant de bloguer sur votre activité quotidienne, votre régime alimentaire, vos niveaux d'énergie, votre humeur et plus encore en utilisant le CLI de Preact. Netlify CMS Netlify. Partagez votre application avec tous les professionnels avec lesquels vous travaillez (entraîneur personnel, nutritionniste, thérapeute) et recevez un coaching vidéo en direct directement à partir de la plateforme avec Video API de Vonage.
Au cas où vous auriez perdu le fil de vos objectifs de santé, il est prouvé que la tenue d'un journal vous aide à vous responsabiliser !
Les étapes :
Avant de commencer, vous aurez besoin de quelques éléments :
A Compte Video API de Vonage - Créez-en un gratuitement si vous ne l'avez pas encore fait.
Node et NPM installés sur votre environnement de développement. Ce tutoriel utilise Node (> V6.x) et NPM 6. Vérifiez qu'ils sont installés et à jour en exécutant les commandes suivantes dans votre terminal :
Si nécessaire, naviguez vers nodejs.org pour installer la bonne version (> V6.x).
Vous voulez passer à la fin ? Vous pouvez trouver le code de ce tutoriel sur GitHub.
Pour mettre en place l'application, nous avons besoin d'installer globalement le CLI Preact. Utilisez la commande suivante pour installer le CLI.
Maintenant, créons un nouveau projet en utilisant le modèle netlify-cms pour créer un nouveau projet. Celui-ci fournira un simple blog qui servira de base à notre application. N'oubliez pas de remplacer my-project-name par le nom que vous souhaitez donner au projet.
Démarrez le serveur de développement avec la commande suivante :
Vous êtes prêt ! Un nouveau projet a été créé. Ouvrez votre navigateur et rendez-vous sur http://localhost:8080 pour vérifier l'état d'avancement de l'application au fur et à mesure que nous poursuivons le tutoriel.
L'application que nous construisons est une plateforme personnelle pour vous-et je vous encourage à faire preuve de créativité et à personnaliser le design ! Si vous souhaitez démarrer rapidement, pour l'instant, la démo comporte quelques textes et styles de base, et le code peut être trouvé sur GitHub. Pour changer le texte par défaut de la page d'accueil, mettez à jour le code dans home/index.js. Pour les changements de style, style/index.css, home/style.css, blog/styles.css, et contact/styles.css sont de bons endroits à consulter.
N'hésitez pas à revenir sur cette étape et à changer de style aussi souvent que l'inspiration vous vient !
Dans votre compte Video API Account de Vonagecliquez sur l'onglet Projets et Créer un nouveau projet. Vous aurez la possibilité de Créer un projet intégré ou Créer un projet personnalisé. Le Video Chat Embed est le moyen le plus simple d'ajouter rapidement une fonctionnalité vidéo de base et n'implique aucun codage. Cependant, il ne permet pas actuellement l'intégration d'applications mobiles (qui est une fonctionnalité essentielle de la PWA) et de fonctions avancées telles que l'archivage, le partage d'écran et le chat textuel.
OpenTok Project types
Nous allons donc procéder en cliquant sur le bouton Créer un projet personnalisé pour créer un projet personnalisé. Donnez un nom à votre nouveau projet et cliquez sur le bouton Créer et cliquez sur le bouton Créer. Vous pouvez laisser le codec préféré à "VP8".
Create Custom Project
Cliquez ensuite sur Voir le projet. Au bas de la page de détail du projet, vous trouverez les outils du projet où vous pourrez créer un identifiant de session et un jeton. Quitter Routé comme mode média de votre session et appuyez sur le bouton Créer un identifiant de session et appuyez sur le bouton Créer un identifiant de session.
Create Video session
Enfin, collez l'ID de session généré dans le champ ID de session du formulaire Générer le jeton et appuyez sur le bouton Générer un jeton et appuyez sur le bouton Générer le token.
Remarque : le délai d'expiration par défaut du jeton est d'une heure. N'hésitez pas à la prolonger jusqu'à 30 jours à la fois.
Generate OpenTok token
Nous sommes maintenant prêts à construire la composante Video !
L'un des avantages de Preact est qu'il peut être utilisé dans le navigateur, sans aucun outil de construction. En tant qu'outil JSXla syntaxe couramment utilisée dans les applications React, doit être transposée, Preact utilise une alternative appelée HTM. Au lieu d'utiliser une syntaxe personnalisée, il s'appuie sur les chaînes de caractères balisées natives qui se trouvent déjà dans JavaScript.
Pour faciliter la lecture, nous utiliserons principalement JSX dans ce tutoriel. Nous pouvons facilement passer de JSX à HTM grâce à la technologie preact-compat- Nous y reviendrons plus tard !
Dans le dossier components créez un dossier video qui contiendra tous les composants que nous sommes sur le point d'ajouter. La structure devrait ressembler à ceci :
project structure
Maintenant, ajoutez les fichiers suivants au dossier video les fichiers suivants :
video.js
publisher.js
subscriber.js
checkbox.js
connectionStatus.js
Allez sur src/routes/contact/index.js et importez le composant Video et appelez-le dans votre déclaration de retour. C'est ici que se trouvera l'écran de Video Chat dans l'application, une fois que nous aurons construit les composants nécessaires. Le code devrait ressembler à ceci :
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;Note : Lorsque l'application est en cours de pré-rendu, notre module en tant que composants est exécuté dans un environnement Node.js, où la plupart des API Web ne sont pas disponibles. Pour Account, nous avons enveloppé le code dans une vérification avec :
if (typeof window !== ‘undefined’). Si vous négligez cette étape, le processus de déploiement échouera inévitablement.
Dans votre terminal, exécutez :
Vous vous demandez peut-être si cette commande ne contient pas une faute de frappe. Ne devrait-on pas lire opentok-preact? Curieusement, non !
Le CLI de Preact comprend preact-compatqui est une fine couche sur Preact qui travaille pour atteindre une compatibilité à 100% avec React. preact/compat Cette couche ajoute environ 2kb à la taille de notre bundle, mais a l'avantage de supporter la grande majorité des modules React existants que vous pouvez trouver sur npm. Cela nous permet également de continuer à écrire du code React/ReactDOM sans aucun changement au niveau du flux de travail ou de la base de code.
Copiez et insérez les valeurs de vos API Key, Session ID et Token dans le composant video.js dans le composant. Ce sont les valeurs que nous avons générées dans notre compte Video API de Vonage en étape 2.
La session est essentiellement une salle où se déroulera la discussion vidéo. Elle est d'abord inoccupée et attend que les utilisateurs la rejoignent.
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);Ce composant est chargé d'afficher votre Video (si vous êtes le premier à rejoindre la session) avec <Publisher />, la Video de votre coach avec <Subscriber />et si vous êtes connecté à une session avec <ConnectionStatus />.
Une fois la session établie, l'identifiant et le jeton de session sont utilisés pour publier un flux audio-vidéo du premier utilisateur. À ce stade, il n'y a qu'un seul participant à la session.
En publisher.js, insérer :
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;En utilisant le composant CheckBox nous permettons à l'utilisateur de partager son écran ou de choisir d'activer l'audio et/ou la vidéo.
Lorsqu'un nouvel utilisateur lance l'application, le serveur de l'application envoie l'identifiant de la session et un jeton unique qui est ensuite utilisé pour se connecter à la session. Une fois connectés, les deux utilisateurs ont la possibilité de publier leur flux audio-vidéo et de s'abonner pour accéder au flux de l'autre utilisateur.
En subscriber.js, insérer :
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;En utilisant à nouveau le composant CheckBox nous donnons au deuxième utilisateur la possibilité de choisir s'il veut partager son audio et/ou sa vidéo avec vous.
En checkbox.js, insérer :
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;Si vous préférez afficher une bascule ou un bouton radio pour les utilisateurs, vous pouvez le faire dans ce composant.
Avec connectionStatus.jsnous indiquons si la session de chat est connectée aux deux utilisateurs. Cette étape est facultative mais recommandée.
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;Félicitations ! Vous avez maintenant ajouté tous les composants nécessaires à vos sessions de chat en direct. Vérifiez http://localhost:8080 pour les tester.
Le déploiement avec Netlify est fortement recommandé car le bot de Netlify pour Preact CLI est un outil très utile. Netlify bot pour Preact CLI est capable de lancer votre application de santé compatible avec le CMS en un seul clic. Une fois que le bot a été connecté à votre compte GitHub (ou GitLab), il créera un dépôt pour votre application de santé. Ensuite, une fois le déploiement terminé, poussez vos modifications locales dans le dépôt. Chaque fois que vous apporterez d'autres modifications, le robot les déploiera automatiquement vers le CDN mondial.
Netlify bot for easy deployment
Le processus de déploiement du modèle vous aura envoyé par courriel une invitation à votre nouvelle application. Attendez que le déploiement soit terminé, puis cliquez sur le lien pour accepter l'invitation. Votre application s'ouvrira sur une invite à créer un mot de passe. Saisissez un mot de passe, connectez-vous et vous accéderez au CMS. Lors de vos prochaines visites, vous pourrez vous rendre directement sur <yoursiteaddress.com>/admin/ pour accéder au CMS. Essayez de modifier et de publier des messages fictifs pour vous familiariser avec la plateforme.
CMS dashboard
Une fois le CMS configuré, notre PWA de base sur le coaching santé est terminé !
Pour auditer la PWA, utilisez le logiciel Google Lighthouse dans les outils de développement de Chrome ou ajoutez l'extension Firefox Firefox. Lighthouse simulera un appareil mobile et accélérera l'internet jusqu'à des vitesses de 3G et générera des scores et des conseils d'amélioration.
Il y a plusieurs façons d'améliorer cette application pour en améliorer l'utilité et l'expérience.
Archivez et enregistrez vos séances de Video coaching. Si vous souhaitez regarder les vidéos hors ligne, ajoutez une fonctionnalité personnalisée au Service Worker.
Importez des données provenant d'autres outils de santé que vous pourriez utiliser (par exemple, My Fitness Pal API ou FitBit API). Cela peut aider les entraîneurs à fournir des conseils plus précis.
Envoyez un SMS (ou un message sur WhatsApp, Viber ou Facebook Messenger) à votre coach lorsqu'un nouveau post a été publié. Consultez la page Vonage Messages de Vonage pour plus d'informations.
Si vous rencontrez des problèmes ou si vous avez des questions, contactez-nous sur notre Communauté Slack. Merci pour votre lecture !
Un grand merci à l'équipe de Preact.js pour son soutien dans la construction de l'application de démonstration.
Partager:
Nahrin a été développeur éducateur pour Vonage. Elle est passionnée par la construction de communautés inclusives, la réponse aux besoins du monde réel avec des solutions logicielles pragmatiques, et la création d'un contenu technique accessible à tous les niveaux de compétence.