Conhecendo o Visual Studio Online “Monaco”

Esse post foi migrado do blog antigo. A publicação original foi no dia 19/11/2013
Algumas imagens desse post foram perdidas na migração :(

Quarta feira passada, dia 13/11/2013, aconteceu o lançamento oficial do Visual Studio 2013 e a Microsoft aproveitou para lançar o Visual Studio Online.

Visual Studio Online é um rol de serviços para equipes de desenvolvimento. Os serviços contemplam todo o ciclo de vida da aplicação, desde o controle de versão (com TFS ou GIT), passando por gerenciamento de projeto, rastreamento de work item, ferramentas de colaboração, serviço de build, gerenciamento de casos de testes, monitoramento de aplicações (Application Insights) e edição do código fonte direto pelo navegador (“Monaco”).

Hoje vou falar sobre o projeto Monaco. Se quiser ler mais sobre o anúncio oficial, acesse o post oficial de lançamento ou o site oficial do produto.

Visual Studio Online “Monaco”

A frase que melhor define esse projeto está no anúncio oficial:

Visual Studio Online “Monaco” is a coding environment for the cloud, in the cloud.

Seguindo as tendências mundiais de passar tudo pra nuvem, a Microsoft lançou a primeira versão de sua IDE online. Como está em preview, só podemos editar Azure Websites com ela, mas já dá para perceber aonde isso tudo vai parar.

Vamos ver o que dá pra fazer com esse novo projeto :)

Antes de mais nada, precisamos habilitar essa funcionalidade no portal do Azure.

Habilitando edição online

Para começar a usar o editor, acesse o Painel do seu Azure Website e clique em ‘Editar no Visual Studio Online’.

Editar no Visual Studio Online

Tela inicial do editor

Muito bom, né? Agora, chegou a hora de botar os estudos em prática e implementar o deploy contínuo com github e Azure Websites.

Pronto? Vamos lá.

Agora que já temos nosso repositório no github e nosso Azure Website integrados, vamos configurar o editor para clonar o nosso repositório.

Clonar repositório

Depois de clonado, você vai ver os arquivos do seu repositório no seu editor.

Repositório clonado

Mais legal ainda, é poder executar comandos no console. Comandos DOS, nuget, npm (Node Packaged Modules), msbuild… Tem muita coisa integrada e as possibilidades são imensas, uma vez que podemos baixar novas ferramentas pelo npm!

Ferramentas de linha de comando

Bom, já temos como editar, mas ninguém quer editar a página inicial do IIS, né? Para botar nosso site lá, basta clonar o repositório localmente, criar a solução e dar push pro github. Já fizemos isso no post sobre deploy contínuo com github e Azure Websites.

Para atualizar o seu repositório clonado no editor, temos que dar um pull para trazer os arquivos adicionados na sua máquina.

git pull

Arquivos baixados

Solução no browser :)

WOW! Vocês viram o que acabou de acontecer? Estamos com a nossa solução ABERTA em um navegador, podendo fazer alterações que serão refletidas em tempo real no nosso Azure Website! E funciona no Internet Explorer!

Para exemplificar, eu alterei a linha 14. Percebam que eu recebi duas notificações de arquivos modificados. Uma no topo da tela e outra no canto esquerdo. A no topo, diz que meu branch master está com alterações pendentes e, no canto esquerdo, eu consigo observar que eu tenho um arquivo alterado.

Alteração na linha 14

Clicando no menu do Git, eu posso ver quais arquivos foram alterados e consigo ver o que foi alterado também.

Diferença nos arquivos

Vamos dar um commit e ver o que acontece.

Commit

Push

Site atualizado

BAM!

Como estamos com deploy contínuo habilitado, nosso site é atualizado na mesma hora e já podemos ver as mudanças refletidas acessando a url do site.

Tudo isso feito PELO NAVEGADOR. De qualquer lugar do mundo. De qualquer máquina. Inclusive tablets!

G-E-N-I-A-L

Também podemos alterar os arquivos já compilados do nosso site, sem dar commit ou interagir com o git, mas lembre-se de que no próximo commit, essas alterações serão perdidas!

Alterando css

Site atualizado

Bônus!

Ainda tem muito mais!

Dark theme!

Intellisense para css

Intellisense para javascript e typescript

Se quiser mais informações sobre o projeto, veja a série de vídeos disponibilizadas pelo pessoal da Microsoft no channel9.

É isso aí! Valeu!