andreparada98 / DATAFARM-FRONT-END

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

DataFarm Frontend Job Opportunity

Bem vindo ao DataFarm!

Este exercício visa conhecer melhor os seus conhecimento e habilidades como desenvolvedor.

O projeto disponibilizado tem o propósito de servir como base para algumas atividades, que ao final serão encaminhadas e avaliadas.

Projeto

Foi construído utilizando angular e possui algumas bibliotecas como Leaflet em seus componentes, a inclusão de novos pacotes é permitido bem como é bem vinda.

Instalação do Projeto

Execute npm i para instalar os pacotes, após execute npm start

Abra o navegador no endereço localhost:4200 e comece a codar!

Atividades

Quando entrar no endereço será aberto uma janela para adicionar o seu código fornecido previamente ex: 172e77d8-6da8-4074-93d1-ede238f80785.

insert-code

Este código será encaminhado em todas as chamadas e é o que possibilida ter acesso as apis desta atividade.

Você poderá ver mais detalhes na implementação do inteceptor em src/app/core/application/interceptor/application.interceptor.ts.

Também poderá ter acesso ao exemplo da aplicação base no endereço job.datafarm.app.

A documentação pode ser encontrada no endereço job.datafarm.app/api/swagger

Endpoint base para as apis - https://job.datafarm.app/

Atividade 1

O mapa possui dois botões de ação e o contorno de um talhão (inglês: Field | região dentro de uma fazenda)

field-menu

A atividade consiste em quando clicar no botão verde deverá abrir uma janela (modal) com as informações do talhão como nome do Produtor (grower) da Fazenda (farm) e do próprio talhão. Esta janela deverá ter um CRUD destas informações e deverá fazer uso do endpoint /api/field/{idField} para recuperar e persistir os campos. Também deverá conter na janela um dashboard que pode ser consultado no endpoint /api/field/{idField}/dashboard. Este dashboard contém 3 gráficos:

  • evolution: Gráfico de evolução de pragas este gráfico deverá ser no formato de linhas.
  • rain: Gráfico de chuva este gráfico deverá ser no formato de barras e no eixo x deverá ser relativo aos dias que choveram.
  • efficiency: Gráfico de eficiência produtiva este gráfico deverá ser no formato de pizza.

Exemplo do mock da Janela:

insert-code

Imagens reais do sistema para inspiração:

Fique livre pela escolha da biblioteca para os gráficos.

Os gráficos a seguir foram feitos com a biblioteca Chart.js


yieldgap


yieldgap


yieldgap

Atividade 2

(Optional - Diferencial)

Adicionar os outros talhões da fazenda usando o endpoint /api/farm, este endpoint irá retornar os outros contornos no formato GeoJSON no campo fields, estes talhões devem ser ativados com o click sobre eles no mapa e deverá respeitar a lógica da atividade 1, ou seja, quando clicar no botão verde deverá retornar o CRUD do talhão e o dashboard daquele talhão selecionado. E o botão vermelho deverá remover o contorno daquele talhão do mapa.


Submissão das atividades

Para submeter as atividades faça o build do projeto com o comando:

npm run build

Remova a pasta node_modules e comprima o projeto todo em formato .zip, esta escolha para submissão das atividades garante a sua privacidade.

Ex.:

npm run build
rm -r node_modules
zip -r datafarm-job-opportunity.zip .

Com o Arquivo .zip acesse job.datafarm.app/submission, preencha com o seu código fornecido e carregue o arquivo zip.

yieldgap

BOA SORTE!!!

About


Languages

Language:TypeScript 65.6%Language:SCSS 21.5%Language:HTML 13.0%