Arquivo da categoria: Open Source

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á.

 

Single Sign On utilizando Apache e Azure AD

Olá SharePointers,

Recentemente eu compartilhei no Github (https://github.com/RARomano/SSO-Apache-Azure) um repositório que mostra como fazer single sign on utilizando Azure AD, Apache e Open ID.

Utilizarei esse artigo para explicar um pouco mais sobre o conceito utilizado.

Open ID Connect

É um protocolo criado com base no OAuth para permitir que usuários se conectem, com segurança, à aplicações web.

Veja mais detalhes do fluxo de autenticação, na imagem abaixo:

Single Sign On

SSO é um conceito bastante comum em aplicações, consiste em utilizar somente um login para se autenticar em diversas aplicações diferentes. No nosso cenário, utilizaremos o login do Azure AD para se autenticar em aplicações customizadas.

Entretanto, como é um conceito comum e cada vez mais desejado, é normal encontrarmos em cada aplicação os códigos/parâmetros que permitem esse tipo de integração.

Alguns links falando sobre SSO, com Azure AD:

Em um cenário corporativo, onde hospedamos várias aplicações distintas, é muito mais interessante termos essas configurações em um só lugar, centralizado e tirar essa responsabilidade das aplicações.

Apache

Apache é um servidor web, livre e disponível para vários sistemas operacionais, inclusive o windows. Segundo estatísticas, ele possui um domínio de cerca 60% do mercado. (https://news.netcraft.com/archives/2016/02/22/february-2016-web-server-survey.html)

Pensando nisso, resolvi utilizar o Apache nesse artigo.

Para realizar a autenticação, utilizei esse módulo do apache mod_auth_openidc (https://github.com/pingidentity/mod_auth_openidc).

Docker

Outra coisa que utilizei no meu exemplo foi o Docker, visando portabilidade e escalabilidade dos meus testes, por exemplo: instanciar 2 servidores apache distintos e testar se ao autenticar em uma aplicação de um servidor a outra também estaria autenticada.

Resultados Obtidos

  • Autenticação em aplicações distintas no mesmo servidor
  • Autenticação em aplicações em servidores diferentes
  • Ao autenticar em uma aplicação customizada, você não precisará se autenticar novamente para utilizar outros serviços da Microsoft, como o e-mail por exemplo
  • Ao se autenticar em outro serviço da Microsoft primeiro e depois acessar uma aplicação, você não precisará se autenticar novamente.

Eu, particularmente, tenho gostado bastante de testar esses cenários de interoperabilidade. Tenho buscado, cada vez mais, utilizar essas ferramentas para desenvolver os projetos em que atuo e tenho me surpreendido bastante com o resultado.