VTEX - DEVSHOP

Desafio de avaliação do processo seletivo da empresa VTEX – Rio de Janeiro.

Escopo da app

Carrinho de compras de horas de trabalho de desenvolvedores de uma empresa que esteja no GitHub. Foi escolhido para desenvolvimento da app o modelo SPA (Single Page Application).

Tecnologias / Dependências

  • I. Client side
  • I. Twitter Bootstrap para UI
  • II. AngularJS para controle do fluxo da aplicação e modelo SPA
    • I. NGResource – Wrapper para facilitar comunição entre a Api do Github e o AngularJS
    • II. NGRoute – Controle de rotas do Angularjs
  • III. Grunt para automatização de tarefas como: concatenação, rodar testes etc.
  • IV. Bower para gerenciar dependências
  • II. Server side
  • I. Nodejs
  • II. Express Framework Nodejs

Justificativa de tecnologia

AngularJS – Devido ao pouco tempo que tive para desenvolver a app, por conta de um freelancer que terminei a poucos dias, preferi por optar pelo Angular pois já realizei trabalho s com ele outras vezes. React estou estudando e somente tenho experimentos pessoais.

Estrutura do software

Diretórios

  • I. vtex – Pasta raiz
  • I. node_modules – local onde são instalados os módulos nodejs (Express)
  • II. public – diretório de arquivos estáticos (javascript, css, html)
  • I. css – diretório onde estão localizados nossas folhas de estilo
  • II. js – diretório onde estão localizados nossos arquivos javascript
    • I. app – diretório onde estão localizados os arquivos de nossa SPA AngularJS.
    • II. vendor – diretório de bibliotecas javascript externas (Este diretório é criado pelo bower automaticamente, se configurado)
    • III. main.js – configuração do modulo e rota do AngularJS
    • III. partials – diretório onde estão localizados fragmentos/partes do html da app
    • IV. index.html – Arquivo de layout de nossa app
  • III. .bowerrc - Arquivo de configuração do Bower
  • IV. app.js – Arquivo nodejs contendo api para salvar estado do carrinho
  • V. Gruntfile.js – Arquivo com configurações de tarefas do Grunt
  • VI. package.json – Arquivo de definição de dependências NPM

Instalação

Pré-requisitos:

  • Nodejs
  • NPM (Gerenciador de dependências do Nodejs)
  • Grunt

  • Bower

  • Clonar Repositório no Github:

    git clone https://github.com/eduiagami/test_vtex.git

  • Acessar pasta raiz

    cd vtex

  • Instalar dependências do NPM

    npm install

  • Instalar dependências do Bower

    bower install

  • Rodar grunt para habilitar server

    grunt

  • Rodar app nodejs

    node app.js

  • Acessar no navegador http://localhost:9000/public/index.html

Dúvidas?

E-mail: eduardo.abreu.santos[at]gmail[dot]com