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

Suposto comprador aplica fraude nos portais Mercado Livre e BomNegócio/OLX

Olá pessoas,

Venho por meio desta notificar uma fraude em que quase caí (mais uma), desta vez tentando vender meu notebook no Mercado Livre.

O golpista chamado, na maioria das vezes como “Gabriel Lucas” ou “Alessandro Balen” pede para fechar negócio nos sites via e-mail normalmente usando os e-mails “jonas5776@airpost.net” ou “glucas847@gmail.com”.

No meu caso, ele disse estar nos EUA e pediu para se comunicar em inglês, mas existem relatos de outras pessoas onde o golpista usou tradutores para se comunicar, denunciando o português falho.

Durante as negociações ele sempre diz precisar enviar o produto para a mãe (filha, irmão ou algum parente) e após solucionar algumas dúvidas e fechar negócio, envia um e-mail falso tentando imitar portais de pagamento como PagSeguro, Paypal ou o próprio MercadoPago. Nesta mensagem o nome do destinatário pode variar mas o endereço é sempre o mesmo:

Nome: Adewole Tolu
Endereço:Sabo motor park
Código Postal: 210271
Cidade: Ogbomosho
Estado: Oyo
País: Nigéria

Desconfiei da procedência desta negociação e resolvi pesquisar o endereço, onde encontrei várias referências para a fraude, inclusive um post bem bacana do colega  do blog “Pausa Dramática“; Você pode encontrar o post clicando aqui.

Também encaminhei este relato para o canal de denúncia da Policia Federal e se você quase caiu ou caiu neste golpe, informe-os imediatamente pelo e-mail: crime.internet@dpf.gov.br

UPDATE (27/11/2015)
E o golpe continua… Já se passou mais de um ano que criei este post e como podem ver o golpe ainda é aplicado da mesma forma. As vezes chego a pensar que existem dificuldades técnicas ou falta de interesse da parte dos portais e da divisão de crimes virtuais da DPF.. 😦

golpe1

Mas não descansaremos e espalharemos essas informações para evitar que outros usuários sejam vítima desse tipo de fraude!

Abraço a todos! 😉