Visual Studio 2013 – Apresentando o Visual Studio Online

Olá amigos do The Club, neste artigo gostaria de apresentar uma ferramenta lançada o ano passado para nós desenvolvedores, o Visual Studio Online, um complemento baseado na nuvem do Windows Azure para o Microsoft Visual Studio 2013. Descreverei suas principais funcionalidades de uma forma prática e rápida. Mas aí vem a pergunta, o que seria o Visual Studio Online? Como foi dito anteriormente, de uma forma mais específica este complemento seria um composto de diversos serviços para desenvolvedores hospedados na plataforma de computação em nuvem Windows Azure. É uma página online para os projetos de desenvolvimento. Para fins de informações é também importante saber que o Visual Studio Online conecta-se com outras IDEs de desenvolvimento como Eclipse ou o Xcode, oferecendo suporte para várias plataformas e linguagens. Uma das principais funcionalidades é o controle de código-fonte na nuvem, a qual iremos detalhar um pouco mais ao decorrer do artigo. Abaixo citarei outras características para fins de conhecimento.

Características

- Serviço de compilação e teste de carga baseado na nuvem;

- “Application Insights”: um serviço que oferece informações como estado da saúde, disponibilidade, desempenho e uso das aplicações.

- “Monaco”: um ambiente de desenvolvimento “para a nuvem, da nuvem” que oferece um subconjunto de recursos e funcionalidades do Visual Studio via navegadores com foco em certos cenários. Um destes cenários seria a edição de sites do Windows Azure usando qualquer navegador moderno e em qualquer aparelho com ou sem Windows.

Pré- Requisitos

Para realizarmos a integração do Microsoft Visual Studio 2013 com o Visual Studio Online deveremos possuir uma conta ativa de E-mail no Outlook, Live ou Hotmail. Eu criei uma no hotmail especialmente para nosso artigo, podemos conferir o usuário e a senha abaixo:

e-mail: theclubprogramadores2014@hotmail.com
senha: 123mudar

Tipos de Planos

É importante lembrar que esta ferramenta possui diversos tipos de planos, achei necessário descrever abaixo suas especificações de acordo com o site da Microsoft.

- Visual Studio Online Basic: Inclui acesso aos repositórios de código, ferramentas de planejamento e rastreamento, recursos de colaboração de equipe e o ambiente de desenvolvimento do Visual Studio Express.
Importante: Os primeiros cinco usuários por conta com o plano Basic são gratuitos.

- Visual Studio Online Professional: Inclui todos os recursos disponíveis no plano Basic, além de incluir a utilização do ambiente de desenvolvimento do Visual Studio Professional. Até 10 usuários com o plano do Visual Studio Online Professional podem ser adquiridos em uma conta.

- Visual Studio Online Advanced: Inclui todos os recursos disponíveis no plano Basic, assim como a colaboração de equipe avançada, ferramentas de planejamento e rastreamento e solicitações de comentários de participantes.

Nota: Usaremos o plano “Visual Studio Online Basic”, recomendado para pequenos projetos e no máximo até cinco programadores. Para quem desejar maiores informações de valores dos outros planos, recomendo consultar o site:

http://azure.microsoft.com/pt-br/pricing/details/visual-studio-online/

Criando uma Conta

Para criar uma conta no Visual Studio Online, deveremos acessar o link abaixo:

http://www.visualstudio.com/

Logo em seguida clicar no botão “Comece a usar gratuitamente”. Ver Figura 01.

 Figura 01: Comece a usar gratuitamente.

Na próxima etapa deveremos preencher alguns dados para criação da conta, como:

Nome Completo: The Club – O Maior Clube de Programadores do Brasil
Email de contato: theclubprogramadores2014@hotmail.com
País/Região: Brasil
URL da Conta: theclubprogramadores2014.visualstudio.com

A “URL da Conta” é a página onde nosso projeto será armazenado.Fiquem a vontade para inserir o nome que acharem adequado, lembrando que todos estes dados deverão ser preenchidos obrigatoriamente. Ver Imagem 02 para melhores detalhes.

Figura 02: Criando uma Conta do Visual Studio Online.

Conectando a URL com o Microsoft Visual Studio 2013

Após clicar no botão “Criar Conta”, na próxima tela teremos algumas configurações para editar os dados e acessar a nossa URL. Para acessar a nossa página basta clicar no link situado na região direita, como indica a Imagem 03. Esta URL é a mesma indicada anteriormente no momento da criação da conta.

Figura 03: Acessando a URL.

Ao entrar na URL possuímos três abas, tais como: “Overview”, “Users” e “Rooms” sendo respectivamente para termos uma visão geral da aplicação, criar e gerenciar usuários e conversas em salas de bate-papos com outros integrantes. Para compartilharmos o projeto entre diversos usuários da equipe deveremos entrar na aba “Users” para adicionarmos os mesmos. (No nosso caso possuímos apenas o usuário The Club)

Nos focaremos na aba “Overview”, pois na primeira vez que logarmos é necessário criar um Projeto. Alguns dados são necessários como “Nome do projeto”, “Descrição do projeto”, “Tipo de Controlador de Versão” e “Template”. Ver Figura 04.

Project name: Artigo The Club
Description: Artigo Voltado para o aprendizado do Visual Studio Online
Version control: Team Foundation Version Control
Process Template: Microsoft Visual Studio Scrum 2013

 

Figura 04: Criando o primeiro projeto.

Na próxima etapa nos deparamos com algumas abas importantes, sendo as principais: 

- Home: onde teremos uma visão geral da nossa aplicação e algumas configurações iniciais;

- Code: é o local onde estará armazenado o nosso código fonte, contendo todas as informações das últimas alterações, Comentários referentes ao código e um histórico completo de alterações.

- Work: Esta região é para quem trabalha com a metodologia de desenvolvimento “Scrum”, contendo um acervo completo de tarefas relacionas a este tipo de controle.

- Build: São as definições de compilação criadas usando o Visual Studio e podem ser executadas no Visual Studio Online. As compilações pode ser configuradas para serem executadas sob demanda, em um intervalo especificado, ou para integração contínua.

- Test: Criar testes de carga no Visual Studio 2013 podendo ser executado no Visual Studio Online.

Temos inúmeros itens para explorar nesta tela, mas devemos nos atentar na aba “Home”, a qual se responsabiliza por conectar ao Microsoft Visual Studio 2013. Para isto clique no botão “Open With Visual Studio to Conect”. Ver Imagem 05.

 Figura 05: Conectando com o MVS 2013.

Automaticamente abrirá a IDE do Visual Studio solicitando o usuário e senha criado anteriormente no Hotmail, OutLook ou Live. Ver Figura 06.

  Figura 06: Informando as credenciais de acesso.

Criando um projeto no Visual Studio 2013

Com o Visual Studio 2013 aberto criaremos um projeto de exemplo em Asp.Net, para isto clique em “File/New Project” definindo um nome, caminho e solução. Para ocorrer a integração deveremos marcar o item “Add to source Control”. Ver Figura 07.

  Figura 07: Criando um novo projeto em Asp.Net.

Possuímos também outro tipo de controlador de versão, o “Git”. No nosso caso escolheremos o “Team Foundation Version Control”, ao qual está voltado o aprendizado do artigo e logo em seguida clique no botão “Ok”. Ver Figura 08.

Figura 08: Escolhendo o TFVC.

Na próxima etapa teremos que adicionar a “Solution” ao nosso controlador. O projeto indica a mesma solução criada anteriormente no Visual Studio Online. Ver Figura 09.

Figura 09: Adicionando o projeto.

Em “Source Control Explorer” na região superior teremos alguns botões importantes como: Mostrar/Esconder Itens excluídos, Atualizar aplicação com o servidor, adicionar ou excluir itens da pasta, obter última versão do servidor, “Check Out” para baixar e “Check In” para atualizar os conteúdos do servidor, “Compare Folders” para comparar o conteúdo dos arquivos locais com os que estão na URL, History para um histórico de tarefas, entre outros. Podemos conferir com maiores detalhes na Figura 10.

 

Figura 10: Source Control Explorer.

A partir desta tela que poderemos realizar o controle. Inicialmente para subir no servidor iremos realizar o “Check-in” clicando na solution “theclubExemplo” e escolhendo o ícone . Na tela “Team Explorer - Pending Changes” podemos inserir alguns comentários se necessário para o Update em questão. Ver Figura 11.

Figura 11: Alterações em andamento.

Como faremos o Controle de Código-Fonte?

Poderíamos utilizar a tela “Source Control Explorer”, mas para efetuar as tarefas básicas faremos o uso de um atalho. Para isto, na “solution explorer” clique no nosso projeto “theClubExemplo” e teremos uma tela idêntica ao da Imagem 12. Um detalhe importante ao possuirmos todos arquivos atualizados com o servidor teremos um “cadeado” ao lado de cada arquivo.

Figura 12: Solution Explorer.

 

Ao efetuarmos alguma alteração o ícone automaticamente irá mudar, por exemplo no arquivo “web.config”. Ver ícone abaixo:

Como vimos anteriormente podemos atualizar o servidor facilmente escolhendo a opção “Check-in”. Aliás, podemos conferir os principais atalhos ao clicarmos com o botão direito sobre os arquivos da solução. Ver Imagem 13.

Figura 13: Principais Funções.

Detalhamento das principais funções:

Check Out for Edit: baixamos a última versão so arquivo no servidor.
Compare: Comparar códigos do servidor e local.
Source Control/Get Specific Version: Resgatar alguma versão específica do servidor.
Source Control/Undo Pending Changes: Desfazer alterações Pendentes.
Source Control/View History: Visualizar histórico de tarefas.
Source Control/Annotate: Anotações sobre versões.

O trabalho de configuração e manutenção é muito fácil e é por isto que recomendo fortemente o uso do Visual Studio Online como controlador de código-fonte em empresas, não esquecendo que e o mais importante é a total compatibilidade com o MVS 2013.

Conclusões

Aprendemos com este artigo as principais funções desta ferramenta disponibilizada pela Microsoft. O Controle de Código-fonte é uma técinica muito recomendável para aplicações que utilizam mão-de-obra de vários programadores. Temos uma ferramenta gratuita para no máximo de cinco usuários que certamente abrangerá inúmeros pequenos projetos. Fica aí a dica, um abraço e até o mês que vem!