Compartir:
){kind=small}
Nahrin fue Educadora de Desarrolladores para Vonage. Le apasiona crear comunidades inclusivas, abordar las necesidades del mundo real con soluciones de software pragmáticas y crear contenidos técnicos accesibles para todos los niveles.
Construir un Blog de Salud con Video Coaching Usando Preact.js y Vonage
Tiempo de lectura: 16 minutos
En este tutorial, crearemos una aplicación web progresiva (PWA) que sirva como herramienta de blog de salud personal con función de chat de vídeo en directo, lo que le permitirá recibir asesoramiento directamente en la aplicación. PWAs son sitios web que se han mejorado para sentirse y funcionar como aplicaciones nativas y cuentan con muchas características que un sitio web tradicional no, tales como:
Instalable en dispositivos móviles
Notificaciones push
Asistencia sin conexión
Se puede encontrar en los resultados de las búsquedas en Internet y en las tiendas de aplicaciones
Y puedes actualizar tu aplicación editando directamente el código de tu servidor web.
¿Cómo empezar?
Casi cualquier aplicación web tradicional se puede convertir en una PWA básica con la adición de un archivo manifest.json y un archivo JavaScript Service Worker. Sin embargo, si empiezas desde cero, hay varias herramientas que pueden agilizar el proceso.
Crear una aplicación React (CRA) es una herramienta para crear PWAs que es increíblemente popular entre los desarrolladores, sobre todo teniendo en cuenta el gran tamaño de la plataforma React.js de React.js. Por defecto, cada nuevo proyecto de CRA es una PWA, ¡fantástico! Sin embargo, una PWA debe ser lo más rápida y eficaz posible, y CRA no hace mucho por la optimización del código.
Esta es la razón por la que nuestra demo está construida usando Preact.jsuna alternativa ligera y más rápida a React, con el mismo soporte integrado para PWAs. Preact ofrece un gran rendimiento, tamaño, eficiencia y compatibilidad. En particular, sólo tiene 3,5kb de tamaño y es compatible con los módulos de React que se pueden encontrar en npm. Ser capaz de escribir código React/React DOM sin hacer cambios en el flujo de trabajo o código base también limita significativamente cualquier curva de aprendizaje.
Para obtener más información sobre las diferencias entre las bibliotecas y las características exclusivas de Preact, consulta la documentación de Preact.
El sitio Preact CLI funciona como Create React App y es igual de fácil de usar. Se pone en marcha al instante con una estructura de proyecto mínima y comprensible y pone su proyecto en el camino hacia un excelente rendimiento. Los nuevos proyectos se envían con sólo 4,5 KB de JavaScript en producción y se vuelven interactivos en menos de 3 segundos, incluso en dispositivos y redes lentos. Entre las características más destacadas se incluyen:
100/100 Faro nada más sacarlo de la caja
División totalmente automática del código de las rutas
Servicio diferencial de JavaScript
Service Workers autogenerados para el almacenamiento en caché sin conexión con sw-precache
Soporte para módulos CSS, LESS, Sass, y Stylus con Autoprefixer
Control del tamaño de los paquetes con seguimiento integrado
Soporte del patrón Push Render Pre-Cache Lazy-load (PRPL) para una carga eficiente.
Encontrará más información sobre las funciones en la documentación de Preact CLI.
¿Tener una vida más sana es uno de tus propósitos de Año Nuevo? Esta aplicación le ayudará a realizar un seguimiento de su progreso por lo que le permite blog acerca de la actividad diaria, la dieta, los niveles de energía, estado de ánimo y más utilizando el Preact CLI Netlify CMS plantilla. Comparte tu aplicación con cualquier profesional con el que trabajes (entrenador personal, nutricionista, terapeuta) y recibe video coaching en directo directamente desde la plataforma con la Video API de Vonage.
En caso de que te hayas desviado de tus objetivos de salud, se ha demostrado que llevar un diario ayuda a rendir cuentas.
Los pasos:
Antes de empezar, necesitarás un par de cosas:
A Cuenta de Video API de Vonage - crea una gratis si aún no lo has hecho.
Node y NPM instalados en tu entorno de desarrollo. Este tutorial utiliza Node (> V6.x) y NPM 6. Comprueba que están instalados y actualizados ejecutando lo siguiente en tu terminal:
Si es necesario, navegue a nodejs.org para instalar la versión correcta (> V6.x).
¿Quieres saltar hasta el final? Puedes encontrar el código de este tutorial en GitHub.
Para configurar la aplicación, necesitaremos tener la CLI de Preact instalada globalmente. Utilice el siguiente comando para instalar la CLI.
Ahora, vamos a crear un nuevo proyecto utilizando la plantilla netlify-cms plantilla. Esto proporcionará un blog simple que servirá como base de nuestra aplicación. Recuerde reemplazar my-project-name por el nombre que quieras darle al proyecto.
Inicie el servidor de desarrollo con el siguiente comando:
Ya está todo listo. Se ha creado un nuevo proyecto. Abra su navegador y vaya a http://localhost:8080 para comprobar el progreso de la aplicación mientras continuamos con el tutorial.
La aplicación que estamos construyendo es una plataforma personal para usted-¡y te animo a que seas creativo y personalices el diseño! Si desea empezar rápidamente, por ahora, la demo tiene algunos textos básicos y el estilo implementado, y el código se puede encontrar en GitHub. Para cambiar el texto predeterminado de la página de inicio, actualiza el código en home/index.js. Para cambiar el estilo, style/index.css, home/style.css, blog/styles.cssy contact/styles.css son buenas opciones.
Siéntete libre de revisar este paso y cambiar el estilo tan a menudo como te llegue la inspiración.
En tu cuenta de Video API de Vonagehaz clic en Proyectos y Crear nuevo proyecto. Tendrá la opción de Crear proyecto incrustado o Crear proyecto personalizado. La incrustación de Video Chat es la forma más fácil de añadir una funcionalidad básica de video rápidamente y no requiere codificación. Sin embargo, actualmente no permite la integración de aplicaciones móviles (que es una característica crucial de la PWA) ni funciones avanzadas como el archivado, la pantalla compartida y el chat de texto.
OpenTok Project types
Así pues, procedamos haciendo clic en el botón Crear proyecto personalizado . Dé un nombre a su nuevo proyecto y pulse el botón Crear . Puede dejar el códec preferido como 'VP8'.
Create Custom Project
A continuación, haga clic en Ver proyecto. En la parte inferior de la página de detalles del proyecto, encontrará las Herramientas del proyecto, donde podrá crear un Identificador de sesión y un Token. Deje Enrutado como modo multimedia de su sesión y pulse el botón Crear ID de sesión Crear ID de sesión.
Create Video session
Por último, pegue el identificador de sesión generado en el campo Identificador de sesión del formulario Generar token y pulse el botón Generar token .
Nota: El tiempo de expiración por defecto del token es de una hora. Siéntete libre de prolongarlo hasta 30 días cada vez.
Generate OpenTok token
Ya tenemos todo listo para empezar a crear el componente de Video.
Una de las ventajas de Preact es que puede utilizarse en el navegador, sin necesidad de herramientas de compilación. Como JSXla sintaxis comúnmente utilizada en las aplicaciones React necesita ser transpilada, Preact utiliza una alternativa llamada HTM. En lugar de utilizar una sintaxis personalizada, se basa en cadenas de plantilla etiquetadas nativas que ya están en JavaScript.
Para facilitar la lectura, en este tutorial utilizaremos principalmente JSX. Podemos cambiar fácilmente entre JSX y HTM gracias a preact-compat- más adelante.
Dentro de la carpeta components cree una carpeta video para guardar todos los componentes que vamos a añadir. La estructura debe tener este aspecto:
project structure
Ahora, añada los siguientes archivos a la carpeta video carpeta:
video.js
editor.js
abonado.js
checkbox.js
connectionStatus.js
Vaya a src/routes/contact/index.js e importe el componente Video y llámalo dentro de tu sentencia return. Aquí es donde la pantalla de chat de vídeo se encuentra en la aplicación una vez que hemos construido los componentes necesarios. El código debe parecerse a esto:
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;Nota: Cuando la aplicación se está pre-renderizando, nuestro módulo como componentes se ejecuta en un entorno Node.js, donde la mayoría de las APIs Web no están disponibles. Para tener en cuenta esto, hemos envuelto el código en una comprobación con:
if (typeof window !== ‘undefined’). Descuidar este paso hará que el proceso de despliegue falle inevitablemente.
En tu terminal, ejecuta:
Puede que te preguntes si ese comando tiene una errata. ¿No debería decir opentok-preact? Curiosamente, ¡no!
La CLI de Preact incluye preact-compatque es una fina capa sobre Preact que trabaja para conseguir un 100% de compatibilidad con React. preact/compat añade alrededor de 2kb al tamaño de nuestro bundle, pero tiene la ventaja de soportar la gran mayoría de módulos React existentes que puedes encontrar en npm. Esto también nos permite seguir escribiendo código React/ReactDOM sin ningún cambio en el flujo de trabajo o la base de código.
Copie e inserte los valores de API Key, Session ID y Token en el componente video.js componente. Estos son los valores que generamos en nuestra cuenta de Video API de Vonage en Paso 2.
La sesión es esencialmente una sala donde tendrá lugar el videochat. Comienza como desocupada y espera a que los usuarios se unan.
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);Este componente se encarga de mostrar tu Video (si eres el primero en unirte a la sesión) con <Publisher />el vídeo de su entrenador con <Subscriber />y si está conectado a una sesión con <ConnectionStatus />.
Una vez establecida la sesión, el identificador de sesión y el token se utilizan para publicar un flujo de audio y vídeo del primer usuario. En este punto, hay un participante en la sesión.
En publisher.js, inserte:
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;Utilizando el componente CheckBox permitimos al usuario compartir su pantalla o activar el audio y/o el vídeo.
Cuando un nuevo usuario inicia la aplicación, el servidor de aplicaciones envía el identificador de sesión y un token único que se utiliza para conectarse a la sesión. Una vez conectados, ambos usuarios pueden publicar su flujo de audio y vídeo y suscribirse a para acceder al flujo del otro usuario.
En subscriber.js, inserte:
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;Utilizando de nuevo el componente CheckBox una vez más, le damos al segundo usuario la opción de seleccionar si quiere compartir su audio y/o video contigo.
En checkbox.js, inserte:
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 prefiere mostrar un botón basculante o de radio a los usuarios, realice ese cambio en este componente.
Con connectionStatus.jsmostramos si la sesión de chat está conectada a ambos usuarios. Este paso es opcional pero recomendable.
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;¡Enhorabuena! Ya ha añadido todos los componentes necesarios para sus sesiones de chat en directo. Visite http://localhost:8080 para probarlo todo.
Desplegar con Netlify es muy recomendable ya que el Netlify bot para Preact CLI es capaz de lanzar su aplicación de salud habilitada para CMS con un solo clic. Una vez que el bot se haya conectado a su cuenta de GitHub (o GitLab), creará un repositorio para su aplicación de salud. Entonces, una vez que el despliegue se haya completado, empuje sus cambios locales a la repo. Cada vez que introduzcas más cambios, el bot los desplegará automáticamente en la CDN global.
Netlify bot for easy deployment
El proceso de despliegue de la plantilla te habrá enviado por correo electrónico una invitación a tu nueva aplicación. Espera a que se complete el despliegue y haz clic en el enlace para aceptar la invitación. Tu aplicación se abrirá con un mensaje para crear una contraseña. Introduzca una contraseña, inicie sesión y accederá al CMS. En futuras visitas, puede ir directamente a <yoursiteaddress.com>/admin/ para acceder al CMS. Prueba a editar y publicar entradas para familiarizarte con la plataforma.
CMS dashboard
Con el CMS configurado, ¡nuestra PWA básica de Health Coaching está lista!
Para auditar la PWA, utilice la herramienta de Google Lighthouse en las herramientas de desarrollo de Chrome o añade la extensión extensión. Lighthouse simulará un dispositivo móvil y acelerará Internet a velocidades 3G para generar puntuaciones y consejos de mejora.
Hay varias formas de mejorar esta aplicación para que resulte más útil y agradable.
Archiva y registra tus sesiones de Video coaching. Si desea ver los vídeos sin conexión, añada funcionalidad personalizada al Service Worker.
Importe datos de cualquier herramienta de salud adicional que pueda estar utilizando (por ejemplo, My Fitness Pal API o FitBit API). Esto podría ayudar a los entrenadores a proporcionar un entrenamiento más preciso.
Envía un SMS (o un mensaje en WhatsApp, Viber o Facebook Messenger) a tu entrenador cuando se publique un nuevo post. Echa un vistazo a los Mensajes API para obtener más información.
Si te encuentras con algún problema o tienes alguna pregunta, ponte en contacto con nosotros en nuestra Comunidad Slack. Gracias por leernos.
Muchas gracias al equipo de Preact.js por su ayuda en la creación de la aplicación de demostración.