DEV Community: Diego Oliveira

Criando um Sistema de Teleatendimento com Twilio Video e React

Diego Oliveira — Wed, 26 Feb 2025 20:17:09 +0000

Há algum tempo, trabalhei na implementação de um sistema de teleatendimento utilizando Twilio Video para permitir que médicos e pacientes se comunicassem de forma segura e eficiente. Além disso, implementei um mecanismo para que outras pessoas pudessem entrar na sala através de links com tokens de autorização.

Neste artigo, vou compartilhar minha experiência, os desafios enfrentados e como fiz a integração do Twilio Video com React no frontend.

📌 Por que escolhi o Twilio Video?

O Twilio Video é uma solução robusta para chamadas de vídeo, oferecendo segurança, escalabilidade e fácil integração com outras ferramentas. Algumas das razões que me levaram a escolhê-lo incluem:

Suporte a múltiplos participantes
Baixa latência e qualidade de vídeo ajustável
Controle de permissões com tokens JWT
APIs bem documentadas

🔧 Configuração do Backend com Twilio

Na empresa, o backend foi desenvolvido em Java, mas aqui vou mostrar a implementação usando Node.js, pois é a tecnologia que mais domino quando se trata de backend.

Para gerar tokens JWT e autenticar usuários no Twilio, podemos criar um pequeno servidor em Node.js com Express:

const express = require("express");
const twilio = require("twilio");
require("dotenv").config();

const app = express();
const port = 3001;

const { TWILIO_ACCOUNT_SID, TWILIO_API_KEY, TWILIO_API_SECRET } = process.env;

app.use(express.json());

app.post("/token", (req, res) => {
    const { identity, room } = req.body;
    const AccessToken = twilio.jwt.AccessToken;
    const VideoGrant = AccessToken.VideoGrant;

    const token = new AccessToken(
        TWILIO_ACCOUNT_SID,
        TWILIO_API_KEY,
        TWILIO_API_SECRET,
        { identity }
    );

    token.addGrant(new VideoGrant({ room }));

    res.json({ token: token.toJwt() });
});

app.listen(port, () => {
    console.log(`Servidor rodando em http://localhost:${port}`);
});

Esse servidor simples gera um token JWT para que os usuários possam ingressar na sala de vídeo com segurança.

🎨 Criando a Interface com React

Com o backend pronto, o próximo passo foi a integração no frontend usando React.

1️⃣ Instalando o SDK do Twilio

No frontend, instalei o pacote necessário:

npm install @twilio/video

2️⃣ Criando a Conexão com a Sala

Dentro do React, criei um hook para conectar o usuário a uma sala de vídeo:

import { useState, useEffect } from "react";
import Video from "twilio-video";

export const useVideoChat = (token, roomName) => {
    const [room, setRoom] = useState(null);
    const [participants, setParticipants] = useState([]);
    const [isMuted, setIsMuted] = useState(false);
    const [isCameraOn, setIsCameraOn] = useState(true);

    useEffect(() => {
        if (token) {
            Video.connect(token, { name: roomName }).then(room => {
                setRoom(room);
                setParticipants([...room.participants.values()]);

                room.on("participantConnected", participant => {
                    setParticipants(prev => [...prev, participant]);
                });

                room.on("participantDisconnected", participant => {
                    setParticipants(prev => prev.filter(p => p !== participant));
                });
            });
        }
    }, [token]);

    const toggleMute = () => {
        setIsMuted(!isMuted);
    };

    const toggleCamera = () => {
        setIsCameraOn(!isCameraOn);
    };

    const leaveRoom = () => {
        room?.disconnect();
        setRoom(null);
    };

    return { room, participants, isMuted, isCameraOn, toggleMute, toggleCamera, leaveRoom };
};

3️⃣ Exibindo o Vídeo e Controles

Por fim, criei um componente VideoRoom para exibir os vídeos dos participantes conectados e adicionar os botões de controle:

import React, { useRef, useEffect, useState } from "react";

const Participant = ({ participant }) => {
    const videoRef = useRef();

    useEffect(() => {
        participant.tracks.forEach(trackPub => {
            if (trackPub.track) {
                videoRef.current.appendChild(trackPub.track.attach());
            }
        });
    }, [participant]);

    return (
        <div>
            <h3>{participant.identity}</h3>
            <div ref={videoRef}></div>
        </div>
    );
};

export const VideoRoom = ({ participants, toggleMute, toggleCamera, leaveRoom }) => {
    const [showModal, setShowModal] = useState(false);
    const shareLink = "https://meusite.com/sala?token=xyz";

    return (
        <div>
            {participants.map(participant => (
                <Participant key={participant.sid} participant={participant} />
            ))}
            <button onClick={toggleMute}>Mutar</button>
            <button onClick={toggleCamera}>Ligar/Desligar Câmera</button>
            <button onClick={() => setShowModal(true)}>Compartilhar</button>
            <button onClick={leaveRoom}>Finalizar Chamada</button>

            {showModal && (
                <div className="modal">
                    <p>Compartilhe este link:</p>
                    <input type="text" value={shareLink} readOnly />
                    <button onClick={() => setShowModal(false)}>Fechar</button>
                </div>
            )}
        </div>
    );
};

🚀 Conclusão

A integração do Twilio Video com React foi uma experiência desafiadora, mas gratificante. O sistema agora permite que médicos e pacientes se comuniquem por vídeo de forma segura, e terceiros podem ingressar na sala com um link autorizado. Além disso, implementei botões para mutar o microfone, ligar/desligar a câmera, compartilhar o link da sala e finalizar a chamada (removendo o usuário da sessão).

Se você estiver pensando em implementar algo similar, recomendo fortemente explorar a documentação oficial do Twilio e testar diferentes configurações para otimizar a experiência do usuário.

Caso tenha dúvidas ou queira compartilhar sua experiência, deixe um comentário! 😊

Zustand vs Context API: Qual escolher para gerenciar estado no React?

Diego Oliveira — Mon, 17 Feb 2025 20:35:59 +0000

Gerenciar estado no React pode ser desafiador, especialmente conforme a aplicação cresce. Duas abordagens populares são o Context API e o Zustand. Neste post, vamos comparar essas duas soluções e entender qual delas pode ser mais adequada para o seu projeto.

O que é Context API?

O Context API é uma ferramenta nativa do React que permite compartilhar estado global sem precisar passar props manualmente em cada nível da árvore de componentes.

Vantagens do Context API:

✅ Solução nativa, sem necessidade de bibliotecas externas.
✅ Simples de implementar para estados pequenos e pouco dinâmicos.
✅ Integrado com hooks como useContext para fácil acesso ao estado.

Desvantagens do Context API:

❌ Pode causar re-renderizações desnecessárias em componentes filhos.
❌ Complexidade aumenta conforme o estado cresce.
❌ Difícil de usar para estados altamente dinâmicos, como listas grandes ou temas dinâmicos.

O que é Zustand?

Zustand é uma biblioteca de gerenciamento de estado leve e eficiente para React, que oferece uma abordagem mais simples e performática do que Redux e Context API.

Vantagens do Zustand:

✅ API minimalista e intuitiva.
✅ Melhor performance ao evitar re-renderizações desnecessárias.
✅ Suporte a middlewares para persistência de estado.
✅ Permite leitura de estado sem causar re-renderização (através de getState).

Desvantagens do Zustand:

❌ Requer uma biblioteca externa.
❌ Pode ser um pouco diferente do padrão React para quem está acostumado com o Context API.

Comparando Context API e Zustand

Critério	Context API	Zustand
Facilidade de uso	Simples, mas pode complicar conforme cresce	Muito simples e direto
Performance	Pode causar re-renderizações desnecessárias	Evita re-renderizações automaticamente
Escalabilidade	Difícil de gerenciar em grandes aplicações	Altamente escalável
API	Nativa do React	Biblioteca externa

Quando usar cada um?

Use Context API se o estado é pequeno e não muda frequentemente.
Use Zustand se você precisa de mais performance e um gerenciamento de estado escalável.

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

const Counter = () => {
  const { count, increment } = useStore();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Com poucas linhas de código, criamos um estado global gerenciado pelo Zustand de forma eficiente.

Conclusão

Se você busca uma solução integrada e nativa, o Context API pode atender bem a pequenos estados globais. No entanto, para aplicações maiores e com alto dinamismo, o Zustand é uma escolha mais performática e escalável.

E você, já utilizou alguma dessas abordagens? Compartilhe sua experiência nos comentários! 🚀

Explorando Feature Flags: Uma Abordagem Flexível para Desenvolvimento de Software

Diego Oliveira — Tue, 05 Dec 2023 17:55:50 +0000

Introdução

No cenário dinâmico do desenvolvimento de software, os engenheiros buscam constantemente maneiras de otimizar o processo de entrega, minimizar riscos e oferecer funcionalidades aprimoradas aos usuários. Nesse contexto, as feature flags (também conhecidas como feature toggles ou simplesmente flags) emergiram como uma ferramenta poderosa para desenvolvedores que desejam uma abordagem mais flexível e controlada na liberação de funcionalidades.

O que são Feature Flags?

As feature flags são mecanismos que permitem que os desenvolvedores ativem ou desativem partes específicas do código ou funcionalidades de um software em tempo de execução. Essencialmente, elas atuam como interruptores que podem ser acionados para ligar ou desligar determinadas características do aplicativo sem a necessidade de uma nova versão ou deploy.

Quem Utiliza Feature Flags?

As feature flags são amplamente adotadas em organizações que buscam práticas de desenvolvimento ágil e contínuo. Empresas de tecnologia, startups e grandes corporações encontraram benefícios significativos ao incorporar feature flags em seus processos de desenvolvimento. Essas organizações frequentemente empregam metodologias ágeis, como Scrum ou Kanban, onde a capacidade de iterar rapidamente e responder a feedbacks de usuários é crucial.

Como Funcionam as Feature Flags?

O funcionamento das feature flags é relativamente simples. Uma vez implementadas no código-fonte, as flags são verificadas em tempo de execução para determinar se uma determinada funcionalidade deve ser ativada ou desativada. Isso permite que os desenvolvedores controlem a visibilidade de uma nova funcionalidade, testem-na em um ambiente de produção real e, se necessário, revertam rapidamente para a versão anterior.

A implementação das feature flags pode variar, mas geralmente envolve o uso de variáveis de configuração ou serviços dedicados que gerenciam o estado das flags.

Exemplos Práticos de Feature Flags

1- Criando um Hook para Feature Flags:
Vamos criar um hook customizado para gerenciar nossas feature flags.

// src/hooks/useFeatureFlags.ts
import { useQuery } from 'react-query';

const fetchFeatureFlags = async () => {
  // Aqui você pode fazer uma chamada de API para recuperar o estado das suas feature flags do servidor.
  // Por simplicidade, retornaremos um objeto fixo.
  return { newFeature: true, experimentalFeature: false };
};

export const useFeatureFlags = () => {
  return useQuery('featureFlags', fetchFeatureFlags);
};

2 - Utilizando as Feature Flags na Página
Agora, vamos criar uma página simples que usa o nosso hook de feature flags.

// src/pages/index.tsx
import { useFeatureFlags } from '../hooks/useFeatureFlags';

const Home = () => {
  const { data: featureFlags } = useFeatureFlags();

  return (
    <div>
      <h1>My Feature Flags App</h1>
      {featureFlags && (
        <div>
          {featureFlags.newFeature && <p>A nova funcionalidade está ativada!</p>}
          {featureFlags.experimentalFeature && <p>Esta é uma funcionalidade experimental.</p>}
        </div>
      )}
    </div>
  );
};

export default Home;

Conclusão

As feature flags se destacam como uma ferramenta valiosa para equipes de desenvolvimento modernas, permitindo flexibilidade, controle e agilidade no ciclo de vida do software. Seja para facilitar testes, implementar rollouts graduais ou ajustar dinamicamente o comportamento do aplicativo, as feature flags continuam a desempenhar um papel essencial na busca pela excelência no desenvolvimento de software. Ao implementar essas estratégias com sabedoria, as equipes podem garantir uma experiência de usuário mais estável e inovadora, enquanto mantêm a capacidade de resposta e eficiência em um ambiente de desenvolvimento em constante evolução.