larismourullo / mundipagg Goto Github PK

• Visão Geral do Projeto
  • Tecnologias
  • Documentação Github API
• Informações Iniciais
  • Clonando o Repositório
  • Instalando as Dependências
• Implementação
• Testes

O principal objetivo do desafio é o desenvolvimento de uma página que siga a linha de design da Mundipagg, apresentando os dados do Github da empresa. Para isso é necessário realizar a integração com o Github API versão 3. Esta página deverá listar os repositórios, mostrar a quantidade de stars, forks, contributors e commits por projeto, seguindo mais ou menos a ideia do mockup disponível nesse link.

• HTML5

• CSS

  • SASS
  • Normalize
  • Simple Grid
  • FontAwesome

• JavaScript

  • AngularJS 1.5
  • AngularUI Router
  • Angular Chart
  • Chart.js
  • Grunt (Concat, Uglify, Watch, Grunt-Sass, CssMin)
  • Jasmine
  • Karma

A documentação da API utilizada para obter os dados está disponível em: GitHub Developer API.

Para realizar as ações a seguir, será necessário que tenha instalado em seu computador o git e o node.js. Abaixo seguem os sites para realizar o download e efetuar a instalação:

• Git
• Node.js - Windows/Mac
• Node.js - Linux

Primeiro é preciso que efetue a clonagem do repositório para o seu computador para assim efetuar alterações de código. Mas antes de clonar o repositório é importante que realize um fork, ou seja, criar uma cópia do mesmo para o seu github. Para isso basta subir a página e clicar no botão de mesmo nome e aguardar alguns minutos. Depois basta clicar em clone or download e copiar a URL do respositório.

Já abrindo o bash do Git para efetuar a clonagem será necessário que digite a seguinte linha de código e informe a URL copiada anteriormente:

git clone <url-do-repositorio>

Para instalar as dependências do projeto basta abrir o Prompt de Comando do Node.js (caso você esteja no linux, basta utilizar o terminal), acessar a pasta do repositório e inserir o seguinte comando:

npm install

Basicamente você deverá escrever seu código e enquanto você efetua alterações no arquivo é necessário deixar o comando abaixo rodando:

grunt watch

O código irá rodar o plugin watch, que acoplado nele possuí as tasks sass, uglify, cssmin, sendo assim toda alteração de código será automáticamente convertida e minificada. Mas caso deseje, poderá efetuar todas as tasks apenas uma vez ou só quando desejar, para isso basta usar apenas grunt no terminal.

Já para os testes será necessário que rode o seguinte comando node dentro da pasta do repositório:

npm test

Basicamente ele irá rodar o comando karma start, que varrerá todos os arquivos de testes criados para apresentar se os mesmos passaram ou não.