Skip to content

iColabora/teste-front-end-developer

Repository files navigation

Teste para candidatos à vaga de Front-End developer

Logo iColabora

Todos que os interessados que fizerem pull request receberão um feedback da iColabora.
Essa prova consiste em testar seus conhecimentos com HTML, CSS, JavaScript, SQL entre outras coisas.
O conjunto de interfaces disponibilizado leva em média 6 horas para ser implementado;

Instruções:

  1. Faça um fork deste repositório;
  2. Estude o modelo de processo Processo_Teste_Front.png;
  3. Estude os requisitos para elaboração do formulário e das métricas;
  4. Implemente o HTML/CSS das telas com base no layout disponível;
  5. Para a interação das interfaces utilize preferencialmente jQuery;
  6. Após terminar seu teste submeta um pull request e aguarde seu feedback.

PS1: O formulário não deve submeter nenhuma url.
PS2: A url da página não pode ser recarregada em momento algum.
PS3: Usamos o mesmo teste para todos os níveis de front: junior, pleno ou senior, mas procuramos adequar nossa exigência na avaliação com cada um desses níveis sem, por exemplo, exigir excelência de quem está começando.

Você pode:

  • Utilizar qualquer linguagem de pré-processador CSS ou CSS puro;
  • Utilizar um task runner de sua preferência;
  • Utilizar bibliotecas CSS como compass, bourbon, animateCSS ou outras.

Esperamos que você:

  • Realize as consultas no banco de dados que fornecemos;
  • Torne dinâmica as buscas e preenchimentos dos campos do formulário;
  • Faça um visual bacana;
  • Minifique seu CSS e deixe-o na pasta "CSS";
  • Minifique seu javascript e deixe-o na pasta "js";
  • Faça commit também dos arquivos não minificados;
  • Dê suporte a IE10+, Chrome, Safari e Firefox;

Ganhe pontos extras por:

  • Desenvolver HTML semântico;
  • Componentizar seu CSS;
  • Ser fiel as especificações dos arquivos;
  • Validar os campos do seu formulário antes de habilitar o botão de envio;
  • UX/UI.

Material:

  • Todos os layouts necessários estão disponíveis na pasta raíz;
  • Modelo do processo de negócio disponível com o nome Processo_Teste_Front.png na pasta raíz;
  • Para consultas acerca da BPM acesse o Activiti User Guide: http://www.activiti.org/userguide/#bpmnConstructs.
  • Utilize o webservice de consulta de CEP's: https://viacep.com.br/
  • Modelo do banco de dados relacional pode ser encontrado em modelo_relacional.png na pasta raíz;
  • Biblioteca para criação de querys MySQL via JavaScript com o nome mysql_lib.js na pasta raíz;

Especificação

  • Deve ser desenvolvido um conjunto de interfaces (formulário e métricas) para a automação do processo de 'Shipment of a hardware retailer';

  • Use a criatividade para preencher os espaços em branco nos arquivos fornecidos;

  • Para tal, implemente o HTML/CSS/JS do formulário associado a tarefa 'Check if extra insurance is necessary' (arquivo: task.psd) com os seguintes campos:

    • Dados do Pedido (Devem existir 4 materiais, de sua escolha, vinculados ao pedido do teste):
      • Número de Pedido;
      • Material;
      • Marca;
      • Data de compra;
      • Quantidade do Material;
      • Preço total;
    • Dados do Insumo (Devem existir 2 insumos, de sua escolha, vinculados ao pedido do teste. Além disso, deve ser possível inserir mais insumos):
      • Marca;
      • Descrição;
      • Quantidade;
      • Preço;
    • Dados do Solicitante (Use o webservice para a consulta de CEP):
      • Nome Completo;
      • Telefone;
      • CPF;
      • CEP;
      • Endereço;
      • Complemento;
      • Cidade;
      • Estado;
    • Dados da Entrega (Pode ser utilizado o mesmo endereço presente nos dados do solicitante):
      • CEP;
      • Endereço;
      • Complemento;
      • Cidade;
      • Estado;
    • Cálculos:
      • Total do pedido ((preço dos insumos x quantidades) + (preço do material x quantidades));
    • Busca:
      • Deve ser permitido inserir um numero de pedido e após a consulta, preencher automaticamente todos os campos do formulário;
  • Implemente o HTML/CSS/JS do dashboard com os seguintes gráficos e tabelas (arquivo: dashboard.psd):

    • [GRÁFICO] - Quantidade de pedidos por dia;
    • [GRÁFICO] - Pedidos por solicitante;
    • [TABELA] - Pedidos pendentes;
  • Utilizando a biblioteca mysql_lib.js:

    • Carregue o arquivo mysql_lib.js no seu HTML:
    <script src="mysql_lib.js" type="text/javascript"></script>
    • Chame a função mysqlQuery passando como parametro a query que você deseja realizar, em formato SQL, e uma função para a captura do retorno, da seguinte forma:
      var mysql_query = "SELECT * FROM solicitantes WHERE id = 1";
    
      mysqlQuery(mysql_query, function(result){
        // mostra o resultado da query
        console.log(result);
      });
    • Para mais informações, baixe a pasta exemplo-query para um exemplo de como utilizar a biblioteca, ou acesse o link no jsbin

Submissão

Para iniciar o teste, faça um fork deste repositório, crie uma branch com o seu nome completo e depois envie-nos o pull request. Se você apenas clonar o repositório não vai conseguir fazer push e depois vai ser mais complicado fazer o pull request.

Boa sorte! =D

About

Teste para contratação de front-end developer na iColabora

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published