AngularJS 1 – 1 Configurando seu ambiente Windows

Olá pessoas,

Pretendo escrever uma série de posts ajudando quem quer começar a desenvolver aplicações web utilizando AngularJS, o famoso framework do Google, de maneira prática, rápida e o mais próxima possível do que uso no meu dia-a-dia.

Acompanhe abaixo os links da série:

Série AngularJS1

  1. Configurando seu ambiente Windows
  2. Conceitos Básicos

Tenho percebido que alguns colegas sofrem ao instalar seu ambiente dev para trabalhar com aplicações usando NPM, Bower, e nosso geradores do Yeoman no Windows.

Pequeno Glossário antes de começar:

Grunt e Gulp: Grunt e Gulp são automatizadores de tarefas. A grosso modo, eles são os responsáveis por minificar todos seus arquivos e deixar tudo pronto numa linda pasta “dist”, da onde você irá simplesmente publicar seus arquivos em seu servidor de hospedagem.

NPM: NPM (Node Pakage Manager) é um repositório (gerenciador de pacotes) de instalações do Node.js. Para quem ja teve experiência com OSX e Linux, é como se fosse um apt-get da vida…

BOWER
: Bower também é um repositório. Em geral usamos os dois, mas você pode usar só o Node ou somente o Bower, de qualquer forma, quando você inicializar seu projeto com o gerador Angular do Yeoman ele irá criar as pastas bower_components e node_modules.

SASS
 e Compass: SASS é o que eu considero assim uma evolução natural do CSS. Imagine você poder variáveis dentro de seu css, ao passo que “background-color:#ccc;” se torne uma váriavel chamada: “.aquele-bg-cinza”. Existe toda uma possibilidade de você “componentizar”elementos do seu CSS.

Yeoman: Nosso querido Yeoman é uma ferramenta capaz de acelerar a criação de projetos “do zero”, por meio de “generators”. Imagine que chato ter que iniciar toda vez um projeto criando todas as pastas, configurar dependências de seus módulos NPM e componentes do Bower, enfim um super trabalho duro. E graças ao Yeoman, desnecessário.

Agora que você já sabe do que estamos falando, vamos começar a fazer as coisas funcionar. Hoje me dia você não precisa mais se revirar e se debater tantando configurar variáveis de ambiente no windows:

1 Instale o Git for Windows

Basta acessar o este link, baixar e instalar o cliente do Github para Windows.

2 Instale o Node.js

Basta acessar este link e escolher uma versão estável do Node.js para Windows. Repare que o próprio instalador já configura as variáveis de ambiente para você.

3 Instale o Ruby Installer

Sim, você vai precisar do Ruby for windows para poder instalar o Compass via gem (repositório de instalações do Ruby, semelhante ao NPM para JavaScript ou o PIMP para Python)

Basta acessar este link e baixar o instalador do Ruby para Windows.

4 Reinicie seu PC

É extremamente recomendado que você reinicie seu PC neste ponto para conseguir executar os comandos do Ruby e do Node.

5 Verifique se o Node e o Ruby foram instalados

Se tudo deu certo até aqui, os comandos abaixo devem retornar a versão atual do Node e do Ruby instados:

git --version
npm - v
ruby -v

Seu resultado deve ser algo parecido com isto:

versions

5 Instalando Compass

Agora vamos instalar o Compass usando gem (nosso npm do ruby).

Antes de mais nada, vamos adicionar o caminho pelo qual será pesquisada nossa gem.

gem sources --add http://rubygems.org/

E em seguida, confirme com [Y] e execute:

gem install compass

OK. Git, Node, Ruby e Compass instalados com sucesso até aqui.

6 Instalando Yeoman

Agora a coisa ficou bem fácil, basta instalar globalmente o Yeoman:

npm install -g yo

E só pra garantir, nós vamos usar o yo doctor para verificar se tudo está instalado como deveria.

yo doctor

E no final ele deve retornar: “Everything looks all right!“.

7 Instalando generator Angular

Angular é um dos generators mais populares no yo, foi desenvolvido pelos próprios yeoman team. Você encontrar generators para outros tipos de app no próprio site do yo, neste link. E você também pode visitar o git do generator Angular neste link.

Para instalar esse generator utilize o seguinte comando:

npm install -g grunt-cli bower yo generator-karma generator-angular

Esse comando bacana faz um monte de coisas na sequencia ele instala globalmente o grunt, o bower, o karma (havia me esquecido de mencionar este. Karma é uma ferramenta de testes para seu código JS) e o generator angular.

Após todo esse trabalhinho (nem foi tão difícil assim…) você pode navegar até a pasta aonde seu projeto será criado e inciá-lo com o seguinte comando:

yo angular [nome-do-seu-app]

Então o Yeoman aparecerá e te fará umas perguntas sinistras, de primeiro momento responda não para o uso do Gulp (experimental) e responda sim para o uso de Sass, compass, e a versão sass do Bootstrap.

yo

Feito isso veja que os arquivos de seu projeto já foram criados e você poderá testar seu projeto com o seguinte comando:

grunt serve

Caso você encontre erros você ainda pode forçar a execução do projeto com:

grunt serve --force

E quando quiser publicar seu projeto basta utilizar o comando:

grunt

Você verá que foi criada uma pasta “dist” na raiz de seu projeto. É lá que você encontrará todos os arquivos minificados para publicação em seu servidor de hospedagem seja ela qual for.

Por hoje é só.

Sim isso será uma série sobre Angular1 e sim, eu já estou estudando Angular2 e pretendo em breve começar a compartilhar mais sobre… Sim também falarei sobre Ionic Framework. 😉

Este post é dedicado aos amigos Gabriel Gois e Apolo Roberto e acredito que escrevendo e guardando isso em algum lugar me ajudarei e os ajudarei.

Anúncios

Desenvolvendo ASP.Net MVC diretamente no Mac.. Pode? Pode!

Hoje acordei pensando em colocar em prática a missão de desenvolver uma aplicação web utilizando somente o Visual Studio  Code diretamente no Mac OSX sem abrir minha VM de windows e recorrer ao Visual Studio de maneira convencional.

Isso porque após ter focado no desenvolvimento frontend e ter mergulhado no mundo do node.js e do AngularJS eu realmente sonhei com o dias aonde eu poderia construir uma WebAPI com a mesma facilidade que se constrói uma app web com Yeolman.

DNU, DNX, DNVM e nada mais disso é verdade graças ao .NET CLI

Fato, eu não inventei nada. Quem alimentou essa esperança em mim foi o @vquaiato, nesse postnesse, e nesse, onde ele explicou o que era o DNU, DNX e o DNVM. Caso você queira entender melhor esses carinhas, acesse os posts e leia com mais calma. Basicamente o DNX era o ambiente de execução do SDK, DNU era o gerenciador de pacotes e o DNVM era o gerenciador de runtimes do dotNet.

Complicado né? Mas relaxa porque o @giovannibassi mostrou nesse post, depois de um bom tempo que agora tudo ficou mais fácil você só precisa do .NET CLI.

“Less talk, more code!”

Configurando seu ambiente de desenvolvimento

Agora que já expliquei o que eu queria, porque e quem me ajudou, vamos compartilhar logo a maneira de fazer esse negócio funcionar:

1. Instale o homebrew no seu Mac com o seguinte comando (Caso tenha problemas, acesse o site oficial do homebrew):

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew

2. Execute os seguintes comandos em seu terminal:

˜$ brew update
˜$ brew install openssl
˜$ brew link --force openssl

3. Instale o .NET Core a partir deste link

.NET Core

4. Instale o Node.js caso já não tenha instalado.

Node.js

5. Assim que terminar de instalar o Node.js instale o generator Yeoman para dotnet via NPM. Volte ao terminal e execute o comando:

npm install -g generator-aspnet

Importante: O próprio npm e a comunidade do Node.js não indica utilizar sudo antes dos comandos, entretanto para fins de teste você pode se livrar de problemas de acesso diretórios facilmente utilizando sudo + comando do npm. Agora se você quer realmente aprender a resolver este problema de permissão ao instalar pacotes via npm, acesse este link.

Iniciando e executando um novo projeto

1. Abra o terminal, acesse sua pasta de projetos utilize os comandos:

mkdir aspnet-mvc
cd aspnet-mvc
yo aspnet

Yo

project

2. Uma série de coisas irão acontecer no seu terminal, fique atento para possíveis erros durante este processo. Neste momento o Yeoman generator vai acessar diversos repositórios e preparar todos os arquivos de seu projeto. Para executar sua aplicação, você deverá utilizar os comandos (na minha opinião, bem auto explicativos):

dotnet restore
dotnet build
dotnet run

webpage

Hey! Você cansou de ver essa linda página em seus projetos, certo? Ótimo! As coisas estão funcionando como deveriam; mas para nos certificar, vamos alterar alguma coisa nesse projeto.

3. Abra seu Visual Studio Code (caso não tenha instalado, clique aqui) e acesse a pasta de seu projeto (command + O). Você também precisará da extensão do C# para o Visual Studio Code. Caso o mesmo não sugira o download acesse este link.

4. Agora vamos editar a action About dentro de HomeController.cs. Vamos inserir algo bem proximo do que antes você fazia com ViewBags:

ViewData["SomeData"] = "pseudo viewbag msg..";

controller

5. Agora vamos alterar a view About.cshtml a fim de refletir a alteração da action About:

<p>Test data from controller:
<strong>@ViewData["SomeData"]</strong></p>

view

6. Tudo extremamente simples, agora a parte triste: Infelizmente ainda precisamos recompilar o C#, então ainda não temos recursos bacanas como livre reload; mas você perceberá que ainda sim é muito mais rápido do que você estava acostumado no ASP.NET MVC dentro do Visual Studio. Volte a tela do terminal e utilize (control + c) para parar a instancia atual de seu site e execute novamente o comando:

dotnet run

resultado

7. Pronto.. Graças ao .Net Core, você conseguiu criar um projeto ASP.Net MVC sem auxilio do Visual Studio, utilizando somente o .NET CLI, Visual Studio Code e o Yeoman!

Referências

Building Projects with Yeoman
ASP.NET 5 – Primeiros passos (dnvm, dnu, dnx e yeoman)
Adeus DNX, bem vindo .NET CLI

Conclusão

Podemos perceber que a Microsoft está super alinhada com tecnologias extremamente ágeis que já fazem parte da vida de um montão de gente como: Node.js/NPM, Bower, generators do Yeoman etc.. isso é muito bom! Acredito que o .Net Core veio para integrar e enxugar uma série de soluções que já eram boas e tem tudo para ficar ainda melhores!

Legal né?! 😉