thomas-adriano/ecare-frontend

ANATOMIA DO PROJETO

• Dist: local onde todos os fontes transpilados residem. Equivalente a pasta Bin no mundo java-eclipse;
• Partials: Local onde cada componente do projeto é armazenado. Segue o padrão [...]/partials/%nome_do_componente%/%elementos_que_o_compoem%. Entenda que cada componente deve possuir sua view (html), controller (js), estilo (scss), servicos (js) e diretivas (js) sob o mesmo diretorio do componente em sí.
• node_modules: Pasta onde todos os modulos instalados através do Node Package Manager (npm) com o comando "npm install --save / --save-dev %nome_do_pacote%" são armazenados.
• Gruntfile.js: Arquivo de definição do task manager Grunt (explicado abaixo);
• package.json: Arquivo de definição do npm;

DICAS

Aprendam Angular:

• Entendam (mesmo) o conceito de desenvolvimento MVC e enxerguem ele no Angular. Site exemplo. Revirem os fontes. ;D;
• Enxergando claramente o conceito MVC no angular, entenda a injecao de dependencias;
• Opcionalmente: Aprendam serviços. Aprendam Diretivas, Aprendam ui-router;

Aprendam Bootstrap:

• Conceito basico de grid;
• Componentes;

Ferramentas & Frameworks utilizados

• Grunt: Executor de tarefas (tipo o ANT no java);
• Node-CommonsJs: Carregador de modulos do Node. Ele nos habilita a importar fontes js usando a sintaxe "var jquery = require('jquery')";
• SASS: Framework CSS. Resumindo: nos permite escrever css de forma mais fácil e com mais recursos. Se nao quiser usar nada especifico do SASS, basta programar CSS puro, a unica restricao é que todos os fontes de estilo deste projeto tenham a extensao SASS;
• Angular: Framework MVC;
• angular-ui-router: Biblioteca utilizada para fazer as rotas;
• Bootstrap: Framework HTML, CSS e JS;

Inicializando ambiente de desenvolvimento:

executados apenas uma vez

0. Instale o ruby;
1. Instale o Sass com o comando "gem install sass"
2. Instale o npm, que é obtido através do pacote de instalacao do node;
3. Instale o grunt-cli (se ainda nao tiver) com o comando (a partir de qualquer diretorio) "npm install -g grunt-cli". Isso irá habilitar o grunt para ser executado a partir da linha de comando;
4. Instale as dependencias do projeto:

• Abra o prompt de comando (CMD) (se ja estiver aberto, reinicie) e navegue (cd) até o diretorio root deste projeto (o que possui o arquivo index.html);
• Execute o comando "npm install";

executados toda a vez que você comecar a programar

0. Após o termino do passo 3 anterior, ainda no mesmo prompt de comando (ou em um novo, mas deve estar ainda no mesmo diretorio raiz do projeto) execute o comando "grunt browserSync";

• Este comando serve para inicializar a tarefa de livereload. Com este plugin ativo, todas as alterações feitas nos arquivos e recursos irão ser automaticamente atualizadas no browser;

0. Deixe o processo iniciado no passo anterior executando e abra um novo cmd, navegue até o diretorio root do projeto e execute o comando "grunt" (é, só isso.);

• Isso irá inicializar o processo compilação dos js e scss a cada alteração dos arquivos;

0. PROGRAME THE HELL OUT OF IT!!