Crie um blog sobre saúde com orientação em Video usando Preact.js e Vonage

Neste tutorial, vamos criar um Aplicativo Web Progressivo (PWA) que funciona como uma ferramenta de blog pessoal sobre saúde com funcionalidade de chat por vídeo ao vivo — permitindo que você receba orientação diretamente no aplicativo! Os PWAs são sites que foram aprimorados para ter a aparência e o funcionamento de aplicativos nativos e oferecem muitos recursos que um site tradicional não possui, tais como:

• Pode ser instalado em dispositivos móveis

• Notificações push

• Suporte offline

• Que possam ser encontrados nos resultados de busca na web e nas lojas de aplicativos

E você pode atualizar seu aplicativo editando diretamente o código do seu servidor web.

Então, por onde começar?

Praticamente qualquer aplicativo web tradicional pode ser convertido em um PWA básico com a adição de um manifest.json arquivo e um arquivo JavaScript do Service Worker. No entanto, se você estiver começando do zero, várias ferramentas podem agilizar o processo.

PWAs com o Create React App x Preact CLI

Create React App (CRA) é uma ferramenta para criar PWAs que é extremamente popular entre os desenvolvedores, especialmente devido ao grande porte do React.js . Por padrão, todo novo projeto CRA já é um PWA — incrível! No entanto, um PWA deve ser o mais rápido e eficiente possível, e o CRA não contribui muito para a otimização do código.

É por isso que nossa demonstração foi desenvolvida usando Preact.js, uma alternativa leve e mais rápida ao React, com o mesmo suporte integrado para PWAs. O Preact se destaca em desempenho, tamanho, eficiência e compatibilidade. Vale destacar que ele tem apenas 3,5 kb e é compatível com os módulos do React disponíveis no npm. A possibilidade de escrever código React/React DOM sem precisar alterar o fluxo de trabalho ou a base de código também reduz significativamente a curva de aprendizado.
Para mais informações sobre as diferenças entre as bibliotecas e os recursos exclusivos do Preact, confira a documentação do Preact.

O CLI do Preact funciona como o Create React App e é igualmente fácil de usar. Ele permite que você comece a trabalhar imediatamente com uma estrutura de projeto minimalista e compreensível e coloca seu projeto no caminho para um excelente desempenho. Novos projetos vêm com apenas 4,5 kB de JavaScript em produção e ficam interativos em menos de 3 segundos — mesmo em dispositivos e redes lentas. Entre os recursos dignos de destaque estão:

• 100/100 Lighthouse Pontuação do Lighthouse, logo de cara

• Divisão de código totalmente automática para rotas

• Veiculação diferencial de JavaScript

• Service Workers gerados automaticamente para armazenamento em cache offline, com tecnologia do sw-precache

• Suporte a CSS Modules, LESS, Sass e Stylus com o Autoprefixer

• Monitoramento do tamanho dos seus pacotes/blocos com rastreamento integrado

• Implementar suporte ao padrão Push Render Pre-Cache Lazy-load (PRPL) para um carregamento eficiente

Mais informações sobre os recursos podem ser encontradas na documentação do Preact CLI.

Crie um PWA de orientação em saúde usando o Preact CLI e a Video API da Vonage

O Caso de Uso

Ficar mais saudável é uma das suas resoluções de Ano Novo? Este aplicativo vai te ajudar a acompanhar seu progresso, permitindo que você registre em um blog suas atividades diárias, alimentação, níveis de energia, humor e muito mais, usando o Preact CLI Netlify CMS . Compartilhe seu aplicativo com os profissionais com quem você trabalha (personal trainer, nutricionista, terapeuta) e receba orientação por vídeo ao vivo diretamente da plataforma com a Video API da Vonage.

Caso você tenha se desviado de suas metas de saúde, está comprovado que manter um diário ajuda a manter o compromisso!

As etapas:

1. Instale o Preact CLI e crie seu projeto

2. Atualizar o texto e o estilo padrão

3. Criar um projeto de Video da Vonage

4. Adicionar chat de vídeo personalizado

5. Implantar com o Netlify

6. Publicar posts com o Netlify CMS

Pré-requisitos

Antes de começar, você vai precisar de algumas coisas:

• A Account da Video API da Vonage — crie uma gratuitamente, caso ainda não tenha feito isso.

• Node e NPM instalados em seu ambiente de desenvolvimento. Este tutorial utiliza o Node (> V6.x) e o NPM 6. Verifique se eles estão instalados e atualizados executando o seguinte comando no seu terminal:

Se necessário, acesse nodejs.org para instalar a versão correta (> V6.x).

Quer pular direto para o final? Você pode encontrar o código deste tutorial no GitHub.

Passo 1: Instale o Preact CLI e crie seu projeto

Para configurar o aplicativo, precisamos ter o Preact CLI instalado globalmente. Use o comando a seguir para instalar o CLI.

Agora, vamos criar um novo projeto usando o netlify-cms modelo. Isso vai gerar um blog simples que servirá de base para nosso aplicativo. Lembre-se de substituir my-project-name pelo nome que você deseja dar ao projeto.

Inicie o servidor de desenvolvimento com o seguinte comando:

Está tudo pronto! Um novo projeto foi criado. Abra seu navegador e acesse http://localhost:8080 para acompanhar o andamento do aplicativo enquanto continuamos com o tutorial.

Etapa 2: Atualizar o texto padrão e o estilo

O aplicativo que estamos desenvolvendo é uma plataforma personalizada para você— e eu te incentivo a usar sua criatividade e personalizar o design! Se você quiser começar rapidamente, por enquanto, a demonstração já vem com alguns textos básicos e estilos implementados, e o código pode ser encontrado no GitHub. Para alterar o texto padrão na página inicial, atualize o código em home/index.js. Para alterações de estilo, style/index.css, home/style.css, blog/styles.csse contact/styles.css são bons lugares para se procurar.

Fique à vontade para voltar a essa etapa e mudar o estilo sempre que a inspiração surgir!

Etapa 3: Criar um projeto de Video da Vonage

Na sua conta da Video API da Vonage, clique em menu “Projetos” e “Criar novo projeto”. Você terá a opção de Criar projeto incorporado ou Criar projeto personalizado. A incorporação do Video Chat é a maneira mais fácil de adicionar rapidamente funcionalidades básicas de vídeo e não envolve programação. No entanto, atualmente ela não permite a integração com aplicativos móveis (o que é um recurso crucial para PWAs) nem recursos avançados, como arquivamento, compartilhamento de tela e bate-papo por texto.

OpenTok Project types

Então, vamos prosseguir clicando no Criar projeto personalizado . Dê um nome ao seu novo projeto e pressione o botão Criar . Você pode deixar o codec preferencial como “VP8”.

Create Custom Project

Em seguida, clique em Visualizar projeto. Na parte inferior da página de detalhes do projeto, você encontrará as Ferramentas do Projeto, onde poderá criar um ID de sessão e um token. Deixe “Routed” como modo de mídia da sua sessão e pressione o botão Criar ID de Sessão .

Create Video session

Por fim, cole o ID de sessão gerado no campo “ID de sessão” do formulário “Gerar token” e clique no botão Gerar token .

Observação: O prazo de validade padrão do token é de uma hora. Você pode prolongá-lo por até 30 dias de cada vez.

Generate OpenTok token

Agora estamos prontos para começar a desenvolver o componente de Video!

Etapa 4: Adicionar chat por Video personalizado

Uma das vantagens do Preact é a possibilidade de ser usado diretamente no navegador, sem a necessidade de ferramentas de compilação. Como JSX, a sintaxe comumente usada em aplicativos React precisa ser transpilada, o Preact utiliza uma alternativa chamada HTM. Em vez de usar uma sintaxe personalizada, ele se baseia em strings de modelo marcadas nativas que já estão presentes no JavaScript.

Para facilitar a compreensão, usaremos principalmente JSX neste tutorial. Podemos alternar facilmente entre JSX e HTML graças a preact-compat— falaremos mais sobre isso depois!

Criar um componente de vídeo

Dentro da components pasta, crie uma video pasta para armazenar todos os componentes que estamos prestes a adicionar. A estrutura deve ficar assim:

project structure

Agora, adicione os seguintes arquivos à video pasta:

• video.js

• publisher.js

• subscriber.js

• checkbox.js

• connectionStatus.js

Acesse src/routes/contact/index.js e importe o Video componente e chame-o dentro da sua instrução return. É aqui que a tela do chat por vídeo ficará localizada no aplicativo assim que tivermos criado os componentes necessários. O código deve ficar mais ou menos assim:

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;

Observação: Quando o aplicativo está em pré-renderização, nosso módulo, assim como os componentes, é executado em um ambiente Node.js, onde a maioria das APIs da Web não está disponível. Para contornar isso, colocamos o código dentro de uma condição de verificação com: if (typeof window !== ‘undefined’). Ignorar essa etapa fará com que o processo de implantação falhe inevitavelmente.

Instalar o OpenTok

No seu terminal, execute:

Talvez você esteja se perguntando se há algum erro de digitação nesse comando. Não deveria ser opentok-preact? Curiosamente, não!

O Preact CLI inclui preact-compat, que é uma camada fina sobre o Preact que visa alcançar 100% de compatibilidade com o React. preact/compat Isso adiciona cerca de 2 kb ao tamanho do nosso pacote, mas tem a vantagem de oferecer suporte à grande maioria dos módulos React existentes que você pode encontrar no npm. Isso também nos permite continuar escrevendo código React/ReactDOM sem nenhuma alteração no fluxo de trabalho ou na base de código.

Criar o componente de Video

Copie e insira os valores correspondentes ao seu API Key, Session ID e Token no video.js componente. Esses são os valores que geramos em nossa conta da Video API do Vonage no Etapa 2.

A sessão é, essencialmente, uma sala onde ocorrerá o bate-papo por Video. Ela começa vazia e fica à espera de usuários que queiram participar.

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);

Esse componente é responsável por exibir seu Video (se você for o primeiro a entrar na sessão) junto com <Publisher />, o Video do seu coach com <Subscriber />, e se você está conectado em uma sessão com <ConnectionStatus />.

Funcionalidade de publicação de vídeos

Após o estabelecimento da sessão, o ID da sessão e o token são usados para publicar um fluxo de áudio e Video do primeiro usuário. Nesse momento, há um participante na sessão.

Em publisher.js, insira:

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;

Ao usar o CheckBox componente, estamos permitindo que o usuário compartilhe sua tela ou opte por ativar o áudio e/ou o Video.

Funcionalidade de inscrição em canais de Video

Quando um novo usuário abre o aplicativo, o servidor do aplicativo envia o ID da sessão e um token exclusivo, que é então usado para se conectar à sessão. Uma vez conectados, ambos os usuários têm a possibilidade de publicar seu fluxo de áudio e Video e assinar para acessar o fluxo do outro usuário.

Em subscriber.js, insira:

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;

Ao usar o CheckBox componente mais uma vez, estamos oferecendo ao segundo usuário a opção de escolher se deseja compartilhar seu áudio e/ou Video com você.

Ativar/Desativar as funcionalidades de áudio e Video

Em checkbox.js, insira:

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;

Se você preferir exibir um botão de alternância ou um botão de opção para os usuários, faça essa alteração neste componente.

Exibir o status da conexão do chat

Com connectionStatus.js, mostramos se a sessão de bate-papo está conectada para ambos os usuários. Essa etapa é opcional, mas recomendada.

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;

Parabéns! Você já adicionou todos os componentes necessários para suas sessões de chat ao vivo. Confira http://localhost:8080 para testar tudo.

Etapa 5: Implantar com o Netlify

A implantação com o Netlify é altamente recomendada, já que o bot do Netlify para o Preact CLI é capaz de lançar seu aplicativo de saúde com CMS habilitado com um único clique. Depois que o bot estiver conectado à sua conta do GitHub (ou GitLab), ele criará um repositório para seu aplicativo de saúde. Em seguida, assim que a implantação for concluída, envie suas alterações locais para o repositório. Cada vez que você enviar mais alterações, o bot as implantará automaticamente na CDN global.

Netlify bot for easy deployment

Etapa 6: Publicar posts com o Netlify CMS

O processo de implantação do modelo enviou a você, por e-mail, um convite para o seu novo aplicativo. Aguarde até que a implantação seja concluída e, em seguida, clique no link para aceitar o convite. Seu aplicativo será aberto com uma solicitação para criar uma senha. Digite uma senha, faça login e você será direcionado ao CMS. Nas próximas vezes, você poderá acessar diretamente <yoursiteaddress.com>/admin/ para acessar o CMS. Experimente editar e publicar posts de exemplo para se familiarizar com a plataforma.

CMS dashboard

Com o CMS configurado, nosso PWA básico de orientação em saúde está pronto!

Audit

Para fazer a audit da PWA, use o Lighthouse do Google nas Ferramentas de Desenvolvedor do Chrome ou adicione a extensão ao Firefox. O Lighthouse simulará um dispositivo móvel, limitará a velocidade da internet a 3G e gerará pontuações e recomendações para melhorias.

E agora?

Existem várias maneiras de aprimorar esta aplicação para oferecer maior utilidade e uma melhor experiência.

• Arquive e registre suas sessões de treinamento em Video. Se quiser assistir aos vídeos offline, adicione funcionalidade personalizada ao Service Worker.

• Importe dados de quaisquer outras ferramentas de saúde que você possa estar usando (por exemplo, a API do My Fitness Pal ou a API do FitBit). Isso pode ajudar os treinadores a oferecer um acompanhamento mais preciso.

• Envie um SMS (ou mensagem pelo WhatsApp, Viber ou Facebook Messenger) para o seu coach quando for publicada uma nova postagem. Confira o Vonage API de Mensagens da Vonage para obter mais informações.

Se você tiver algum problema ou dúvida, entre em contato conosco pelo nosso Slack da Comunidade. Obrigado pela leitura!

Muito obrigado à equipe do Preact.js pelo apoio na criação do aplicativo de demonstração.