Desenvolvimento colaborativo em tempo real com Live Share

Ferramentas de desenvolvimento colaborativo em tempo real são de grande ajuda para times que trabalham remoto. Nesse artigo vamos conhecer a extensão Live Share do Visual Studio Code e Visual Studio, aprenderemos como instalar e utilizar seus recursos para programar em conjunto com uma ou mais pessoas.

Como funciona o desenvolvimento colaborativo em tempo real com a extensão Live Share

A extensão Live Share permite aos participantes da sessão visualizar ou editar o projeto no qual o grupo está trabalhando. Isso é feito diretamente dentro do Visual Studio. Não é necessário nenhuma ferramenta de acesso remoto, compartilhamento de janelas do sistema operacional ou ferramenta de comunicação.

A extensão Live Share também deixa compartilhar facilmente servidores disponíveis na máquina onde o projeto está rodando, com isso é possível compartilhar serviços da aplicação ou banco de dados de forma simples. Ela também possui a possibilidade de compartilhar acesso a terminais da máquina.

React - Tópicos Avançados
Curso de React - Tópicos Avançados
CONHEÇA O CURSO

Como instalar a extensão Live Share para desenvolvimento colaborativo

A ferramenta Live Share é composta por 3 extensões do Visual Studio Code:

  • Live Share – Possibilita a criação da sessão e o compartilhamento do código do projeto, servidores e terminal;
  • Live Share Audio – Permite conversar via áudio entre os membros da sessão;
  • Live Share Chat – Permite conversar via chat com os membros da sessão.

É possível instalar cada uma delas separadamente de acordo com os recursos que for utilizar, porém existe uma extensão chamada Live Share Extension Pack que já instala as 3 de uma única vez, caso for utilizar todas as funções.

No Visual Studio Code para instalar, basta Abrir o Editor, ir no gerenciador de extensões no canto esquerdo ou usando atalho (Ctrl + Shift + X). Depois basta procurar por Live Share que verá todas as extensões comentadas acima, basta escolher qual deseja e instalar:

Painel de instalação do Visual Studio Code mostrando a extensão Live Share para desenvolvimento colaborativo em tempo real

No Visual Studio 2019 a Live Share já vem por padrão. Já no 2017 é necessário instalar a extensão Live Share para Visual Studio listada no marketplace.

Iniciando a primeira sessão desenvolvimento colaborativo em tempo real

No post vamos mostrar os exemplos usando o Visual Studio Code, mas a lógica é a mesma que no Visual Studio.

Após instalar a extensão um novo item será criado no menu do Visual Studio Code referente à extensão:

Painel da extensão live share para inicio de sessão de desenvolvimento colaborativo em tempo real

Na extensão temos as seguintes opções de cima para baixo:

  • Juntar-se a uma sessão de colaboração – Possibilita conectar a uma sessão existente criada por outro usuário;
  • Iniciar uma sessão de colaboração – Permite criar uma nova sessão;
  • Iniciar uma sessão somente leitura de colaboração – Permite criar uma nova sessão de colaboração, porém os membros não poderão modificar o código do projeto.

Se você for convidado para participar de uma sessão existente, quem criou a sessão deverá te passar um link com endereço dela, basta clicar sobre ele e o navegador já abrirá uma nova janela do editor e entrará na sessão. Caso você seja o criador da sessão, precisa compartilhar o link de acesso com as outras pessoas que deseja convidar.

O serviço e a extensão Live Share são mantidos para Microsoft. A utilização não possui nenhum custo, porém é necessário ter uma conta da Microsoft ou do Github para conseguir utilizar. Assim que tentar entrar em uma sessão ou iniciar, ele abrirá o navegador para logar em uma dessas contas e dar acesso ao serviço.

Participando de uma sessão de desenvolvimento em equipe online

Uma vez conectado na sessão, se for convidado poderá navegar e visualizar os arquivos do projeto normalmente como se fosse um projeto local. Dependendo da sua permissão também poderá editar os arquivos do projeto:

Edição do projeto remoto para trabalho online em equipe com a extensão live share

Note em amarelo após a palavra treinaweb um ponteiro de edição amarelo. Ele indica que outro usuário está com ponteiro atualmente nesse local. Conforme cada usuário for adicionando ou removendo código é possível ver em tempo real.

O participante também consegue visualizar outros usuários que estão na sessão de desenvolvimento colaborativo em tempo real e quais recursos estão compartilhados:

Painel de status da sessão de desenvolvimento em equipe da extensão live share

Administrando uma sessão de desenvolvimento em equipe online

O administrador possui total controle sobre a sessão, podendo inclusive terminar ela quando achar necessário.

Administrar sessão de desenvolvimento colaborativo em tempo real

Dentre outras coisas o administrador pode:

  • Controlar os participantes online, mutar o microfone ou remover;
  • Compartilhar serviços com os membros da sessão a partir da porta. É possível facilmente compartilhar servidor web, banco de dados e qualquer outro que esteja ouvindo em uma porta específica;
  • Compartilhar sessões de terminal com outros participantes.
Laravel - Eloquent ORM Avançado
Curso de Laravel - Eloquent ORM Avançado
CONHEÇA O CURSO

Considerações finais sobre a extensão Live Share do Visual Studio

A extensão é uma ótima ferramenta para o desenvolvimento em tempo real para dois ou mais desenvolvedores que precisam programar em conjunto. Pode ser uma ótima escolha para a prática de pair programming da metodologia Extreme Programming XP, orientação do lider técnico da equipe ou daquele pessoal sênior que sabe muito.

Deixe seu comentário

Professor e desenvolvedor. Formado em análise e desenvolvimento de sistema, pós graduando em engenharia e arquitetura de software. É autor de cursos em diversos temas, como, desenvolvimento back-end, cloud computing e CMSs. Nas horas vagas adora estudar sobre o mercado financeiro, cozinhar e brincar com pequeno Daniel. @eltonfonsecadev

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200