Repositório contendo as instruções do processo seletivo para desenvolvedor frontend na TerraQ em Mar/24.
Este repositório contém uma aplicação simples contendo uma página de mapa e outra página de gráficos.
O principal objetivo deste teste é permitir que você demonstre suas habilidades ao lidar com as bibliotecas Leaflet e ChartJS para a criação de mapas e gráficos, respectivamente.
Na aplicação, há apenas três rotas a serem trabalhadas, sendo elas:
-
"/" - Página inicial, contendo alguns cartões que levam para as rotas de "/mapa" e "/grafico";
-
"/mapa" - Página contendo um mapa simples, com um componente de coordenadas do mouse, um componente de escala do mapa, um componente de context menu (ao clicar com o botão direito em qualquer local do mapa);
-
"/grafico" - Página contendo dados fictícios de dois datasets, um de precipitação (chuva) e outro de temperatura.
- Altere o layout da página inicial na rota "/" para exibir apenas dois cartões, onde ambos devem levar para as 2 rotas de: "/mapa" e "/grafico".
- Na rota "/mapa", alterar o estilo do componente de coordenadas do mouse para que ele fique fixo no canto inferior esquerdo da tela (levando a barra de escala para a direita) e que ele fique com uma fonte maior, contendo um fundo branco com opacidade de 0.5.
- Na rota "/mapa", alterar o estilo do componente de context menu (popup) de modo que ele tenha um maior espaçamento entre as coordenadas de latitude e longitude.
- Na rota "/mapa", alterar o texto do componente de context menu (popup) de modo que além da latitude e longitude, ele também exiba a data/hora em que o usuário clicou com o botão direito no mapa. Formato: "DD/MM/YYYY HH:mm:ss". (Opcional: adicionar um ícone de calendário ao lado da data/hora).
- Na rota "/mapa", adicione um botão flutuante no topo, à esquerda da tela, com um ícone de "zoom in" que você preferir, e que ao ser clicado, deve executar a função ZoomInOut('in') que já existe no código fornecido. Faça um ícone logo abaixo que faça a função ZoomInOut('out') ao ser clicado.
- Na rota "/grafico", adicione um gráfico do ChartJS da forma que achar mais adequada, desde que contenha os dados de temperatura e precipitação. (Opcional: adicionar um botão para alternar entre os datasets de temperatura e precipitação ou visualizar ambos datasets ao mesmo tempo).
- Adicionar documentação com as melhores práticas às funções originais do repositório que não tiverem nenhum tipo de docstring.
- Comentários explicando novas funcionalidades desenvolvidas
- Crie um botão que altere o mapa de fundo, utilizando a função já existente "ToggleRaster" da forma que achar mais adequado. Ao clicar neste botão, a imagem de satélite (Google Satélite) deve ser alterada para a imagem de mapa de ruas (OpenStreetMap) e vice-versa (As informações para fazer esta alteração estão no arquivo de rotas web.php).
- Cumprimento do checklist das funcionalidades esperadas;
- Clareza do código;
- Boas práticas e escrita nas mensagens de commits realizados;
- Facilidade de manutenção e extensão das novas funções implementadas;
- Criatividade no consumo das informações entregues;
- Boas práticas em UI/UX;
- Use o estilo de código mais confortável à você;
- Os nomes de variáveis e comentários no código podem ser feitos em português ou inglês;
- Se o código submetido demandar instalações de quaisquer natureza, espera-se que hajam instruções de instalação no README;
- Feito é melhor que perfeito, submeta seus resultados ainda que estejam parcialmente incompletos.
- Neste teste não há pegadinhas ou detalhes escondidos, então não se preocupe em tentar procurá-los.
- O uso de ferramentas de IA como GitHub Copilot e ChatGPT é permitido (inclusive, incentivado) mas espera-se que o candidato tenha entendimento do código gerado e saiba explicá-lo, se perguntado.
-
Faça uma cópia do repositório, torne-o privado e adicione os usuários @terra-q e @abreufilho como colaboradores usando o link abaixo:
-
Faça as alterações de modo a cumprir as tarefas deste teste, dê os commits necessários e o push final para o seu repositório remoto no GitHub, lembrando de fazê-lo antes do prazo final (04/03/2024 13:00h).
-
Lembre-se de utilizar sua conta real do GitHub;
-
O tempo de entrega NÃO está sendo avaliado, mas envios após a data e hora limite serão desconsiderados.
-
Nenhum código desenvolvido neste teste será utilizado em produção/comercialmente pela TerraQ.
-
Ao concluir seu último push, envie um e-mail para contato@terraq.com.br contendo somente o link para seu repositório no corpo do texto e o título do e-mail contendo "Teste frontend [Seu Nome]", ex.:
Título: Teste frontend [Seu Nome]
Corpo do e-mail: https://github.com/{usuario}/frontend-test-mar-2024
Todos os candidatos receberão o aviso e acesso à este teste simultaneamente, portanto, todos terão exatamente o mesmo tempo e oportunidade.
Para começar, faça um repositório a partir da cópia do original acessando o link (lembre-se de logar com seu usuário GitHub)
Após a cópia, clone o repositório localmente:
git clone https://github.com/<SEU_USUARIO>/frontend-test-mar-2024.git
Instale as dependências do projeto:
composer install
npm install
Depois copie o arquivo .env.example para .env:
cp .env.example .env
Crie um banco de dados temporário para a aplicação com o comando abaixo (ou crie-o manualmente, se preferir):
sudo -u postgres psql -c "CREATE DATABASE terraq_teste"
Depois, gere a chave da aplicação:
php artisan key:generate
Rode a migração para criar as tabelas no banco de dados:
php artisan migrate
E por fim, inicie o servidor local da Aplicação:
php artisan serve
E o servidor de desenvolvimento do Vue em outro terminal:
npm run dev
Acesse a aplicação em http://localhost:8000.
Este repositório utiliza Laravel 9, portanto, você pode consultar a documentação oficial em https://laravel.com/docs/9.x para mais informações.