Arquivo da tag: Visual Studio

Utilizando o Visual Studio Code para desenvolver com TypeScript

No meu post anterior (JavaScript e TypeScript – Breve histórico, definição e primeiros passos), falei sobre os primeiros passos para um desenvolvedor que está iniciando com o desenvolvimento client-side utilizando JavaScript, suas dificuldades quando o projeto começa a crescer e um pouco do TypeScript, uma linguagem que a Microsoft criou para tentar solucionar alguns problemas que desenvolvedores enfrentam em projetos que utilizam essa linguagem.

Antes de entrar nos detalhes específicos das linguagens – coisas que abordarei em posts futuros – gostaria de ressaltar o editor de códigos Visual Studio Code.

Muitos desenvolvedores Web tinham (ou ainda tem) um certo preconceito com tecnologias Microsoft. Muitos que conheço, nem sequer tentaram utilizar o Visual Studio Code para formar uma opinião sobre o produto. A semelhança do nome com a IDE completa (que ainda existe e é um produto completamente diferente) criou uma certa barreira.

Quando conseguimos passar essa barreira inicial e mostramos as vantagens de se utilizar o Visual Studio Code no dia-a-dia eles ficam encantados e imediatamente consideram a trocar as ferramentas que utilizavam antes pelo Code (apelido carinhoso :)).

Se você ainda não utilizou, recomendo que testem a ferramenta. Dentre as vantagens que a ferramenta oferece, posso citar algumas:

  • Intellisense aprimorado, inclusive para códigos C#;
  • Multiplataforma, ou seja, roda no Mac, Windows ou Linux.
  • Debugging direto da ferramenta
  • GIT integrado
  • Diversos plugins para melhorar ainda mais a experiência
  • Leve! Muito LEVE!

Voltando ao objetivo do post, mostrar as vantagens do Code para o desenvolvimento de códigos TypeScript, vou apresentar como começar a escrever suas primeiras linhas de código.

Instalando o TypeScript

Como eu disse no outro post, TypeScript utiliza-se de um Transpiler (compilador de código-fonte para código-fonte) para transformar o código que você está escrevendo em JavaScript. Você precisa instalá-lo.

A maneira mais simples de fazer isso é instalar o NPM (Node Package Manager) e utilizá-lo para instalar o TypeScript para você. Para instalar o NPM, e o Node JS, utilize esse link https://nodejs.org/en/download/.

Após instalado, abra um terminal e rode o seguinte comando:

npm install -g typescript

Após a instalação, se tudo der certo, você poderá checar a versão do TypeScript instalada, rodando o seguinte comando:

tsc –version

Esse procedimento mostra como instalar o TypeScript globalmente em sua máquina. Entretanto, em um cenário real de projeto, você pode instalar o TypeScript projeto a projeto e evitar interferências e conflitos de versões de um projeto para outro. Para fazer isso, só remover o -g do comando de instalação acima e o TypeScript será instalado na pasta do seu projeto (pasta atual).

Primeiros passos com o VS Code

Após instalar o VS Code, abra-o.

Eu gosto de criar um atalho para poder iniciar o code a partir de um terminal. O mais legal é que o Code já vem com uma opção pronta para fazer isso por você. Para ativar, digite CTRL+SHIFT+P ou CMD+SHIFT+P se estiver no Mac para abrir as ações do Code e escolha a opção Shell Command: Install ‘Code’ command in PATH.

Após isso, você poderá iniciar o code em qualquer lugar através do terminal rodando o comando “code .”, que abrirá o Code na pasta atual.

Com o Code aberto, vou criar um arquivo TypeScript para iniciarmos.

Como vocês podem ver, o visual é bem clean e na barra de ferramentas (em azul, na parte de baixo) existem algumas informações úteis sobre o arquivo.

Comece a programar!

Notem que o Intellisense, recurso que auxilia mostrando os detalhes do código é muito útil.

Notem que inclusive os tipos das propriedades são apresentadas.

E se eu tentar atribuir uma string a uma variável do tipo numérica, o VS Code alerta que isso não é possível.

 

Configurando o projeto para TypeScript

Em um projeto do tipo TypeScript, é necessário criar na raiz do projeto um arquivo chamado tsconfig.json. Esse arquivo será utilizado pelo Transpiler para gerar o código JavaScript de acordo com os parâmetros definidos nele.

Até nisso o VS Code nos auxilia bastante. Primeiro crie um arquivo e atribua o nome tsconfig.json.

Ao digitar { } e depois abrir as aspas (“) o VS Code mostra todas as opções possíveis para esse tipo de arquivo.

Para esse primeiro momento, utilizaremos da seguinte forma:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}

Após isso, voltei ao meu arquivo Test.ts e adicionei uma funcionalidade apenas para demonstrar a conversão do código TypeScript para JavaScript e podermos rodar o código no browser. Ele ficou assim:

Para gerar o código JavaScript, abra o terminal e rode o seguinte comando

tsc test.ts

Se tudo deu certo, você verá que um novo arquivo foi gerado na mesma pasta, mas com a extensão .js.

Ao abrir o arquivo gerado, você verá o resultado em JavaScript:

Esse código está pronto para ser rodado no browser. Se você abrir o console do Chrome e rodar o código lá, verá que ele funcionará.

 

Venha comemorar o Lançamento do Visual Studio 2015

Olá SharePointers,

Em 20 de julho, iremos celebrar a última release do Visual Studio 2015!

Convidamos a todos a aprender sobre as novas features e tecnologias que acompanharão a nova versão. Você poderá interagir na sessão ao vivo, participar da sessão de perguntas e respostas com o time de engenharia, além de se aprofundar em detalhes técnicos, em mais de 60 sessões on-demand. Para acessar, clique aqui.

Teremos também a oportunidade de ver o time de Visual Studio criando uma solução fim-a-fim em um projeto open-source, alavancando as mais novas ferramentas e tecnologias. Veja como eles lidam com os mais diferentes cenários e tire suas dúvidas.

Participe do lançamento no dia 20 de julho, clicando aqui. Não é necessário fazer o registro, apenas acesse a URL no dia 20 de Julho, a partir das 12h30 (horário de Brasília). Siga @visualstudio e acompanhe as novidades.

 

Compartilhe conosco a sua experiência usando a hashtag #visualstudiortm

QuickTip: Como adicionar itens no Site Settings do SharePoint

Olá SharePointers,

Hoje vou postar uma dica para ensinar como inserir uma Categoria e Links dentro do Site Settings, como na imagem abaixo.

image

 

Então, mãos à obra!!

 

1 – Abra o Visual Studio

2 – Escolha um SharePoint Empty Project e dê um nome para ele. Após isso, clique em OK.

image

3 -  Com a Solution criada, clique com o botão direito no Projeto e vá em Add, New Item…

image

image

 

4 – Escolha Empty Element e dê um nome, e depois clique em Add.

image

 

5 – Coloque o texto abaixo e faça o deploy! Smiley de boca aberta

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomActionGroup
    Id="5363598A-9CC6-42ED-8C35-B6DAFFE76427"
    Title="Rodrigo Romano – Meus Links"
    Location="Microsoft.SharePoint.SiteSettings"
    Sequence="110"
    ImageUrl="_layouts/images/lg_icdotx.png"
    >    
  </CustomActionGroup>
 
  <CustomAction
    Id="A2C6049B-F561-4BDA-A37A-E30ED4C95223"
    Title="Meu Blog"
    Location="Microsoft.SharePoint.SiteSettings"
    GroupId="5363598A-9CC6-42ED-8C35-B6DAFFE76427"
    Sequence="120"
    RequireSiteAdministrator="FALSE">
    <UrlAction Url="http://rodrigoromano.net"/>
  </CustomAction>    
</Elements>

image

 

Entendendo as TAGs

A tag <CustomActionGroup> representa a Categoria. Dentro dela, a propriedade Id deve ser gerada utilizando uma ferramenta, como o “Create GUID” que vem junto com o Visual Studio.

A tag <CustomAction> representa os Links internos da categoria. A sua propriedade GroupId deve ser igual ao Id da CustomActionGroup para dizer que esse link ficará dentro daquela categoria. A mesma regra de formação do Id é válida.

 

Para baixar a solução, utilizem esse link: http://sdrv.ms/1aI6utX.

 

Para saber mais sobre os elementos acima, acessem:

Custom Action Group – http://msdn.microsoft.com/en-us/library/ms438085.aspx

Custom Action – http://msdn.microsoft.com/en-us/library/ms460194.aspx

 

Obs: Esse post foi uma dica dada pelo Thiago Silva (http://thiagottss.com.br/). Man, OBRIGADO! Smiley de boca aberta

 

Abraços!

QuickTip: Visual Studio e Resolução de Conflitos para List Instances

Olá SharePointers,

Essa é uma QuickTip para ajudar a salvar algumas horas no desenvolvimento de soluções para o SharePoint.

Para as pessoas, como eu, que trabalham criando customizações para o SharePoint, o Visual Studio é considerado quase nossa ferramenta diária de trabalho.

Quando começamos uma solução, geralmente planejamos as listas e bibliotecas e criamos os List Definition/Instance para cada uma que utilizaremos na solução(Walkthrough: Create a Custom Field, Content Type, List Definition, and List Instance).

Entretanto, toda vez que vamos fazer um deploy, o Visual Studio apaga todas as listas e as criam novamente, certo?! ERRADO!

Existe uma configuração no List Istance do Visual Studio que permite que você controle esse comportamento: Deployment Conflict Resolution.

imageimage

 

Por padrão, essa opção está como Automatic. Se você alterá-la para None a lista não será mais apagada e criada novamente durante deploys Smiley de boca aberta!!!

 

Aproveitando a oportunidade, aproveitem para dar uma lida no guia da Microsoft que fala sobre como extender os recursos de Package e Deploy do Visual Studio: http://msdn.microsoft.com/en-us/library/ee471434.aspx.

 

Abraços!

Quick Tip: “The name ‘InitializeControl’ does not exist in the current context”

Olá SharePointers,

Em algumas vezes, utilizando o Visual Studio 2012 para criar Visual WebParts, aparece o erro “The name ‘InitializeControl’ does not exist in the current context” ao tentar adicionar um controle que está dentro da sua própria solution.

Após algumas pesquisas, cheguei na solução:

Primeiro você inclui a referência do controle no ASCX: <%@ Register TagPrefix….

Salva o ASCX, e manda fazer o deploy.

Após o deploy concluído, coloca a linha referente ao controle: <cc1:NomeControle ID=….

Salva o ASCX.

Clica com o botão direito do ASCX e escolha a opção RUN Custom Tool e voilá!

 

Abraços! Alegre

Error occurred in deployment step ‘Activate Features’: A timeout has occurred while invoking commands in SharePoint host process.

Olá SharePointers,

Esses dias me deparei com um problema muito estranho ao tentar fazer o deploy de uma solução de SharePoint pelo Visual Studio 2012.

No início, tudo funcionava, após a solução começar a aumentar, esse erro subitamente apareceu: Error occurred in deployment step ‘Activate Features’: A timeout has occurred while invoking commands in SharePoint host process.

Para resolvê-lo, vejam a seção Modifying Registry Values to Help Debug SharePoint Tools Extensions do link http://msdn.microsoft.com/en-us/library/ee471440.aspx.

Basicamente, é abrir o REGEDIT e criar um valor conforme abaixo:

ChannelOperationTimeout     REG_DWORD    120

na chave HKEY_CURRENT_USERSoftwareMicrosoftVisualStudio11.0SharePointTools. O valor de 120, é o default, altere conforme sua necessidade e reinicie o Visual Studio após a modificação do Registro.

 

Abraços!