Teste/Felipe Ceccotti

README.md

@@ -1,209 +1,37 @@
-# Teste Frontend estágio V3
-
-![Aiko](img/aiko.png)
-
-Neste teste serão avaliados seus conhecimentos em Javascript, HTML e CSS, a criatividade e metodologia aplicada no desenvolvimento, a usabilidade e design da aplicação final.
-
-## O Desafio
-
-Você é o desenvolvedor frontend de uma empresa que coleta dados de equipamentos utilizados em uma operação florestal. Dentre esses dados estão o histórico de posições e estados desses equipamentos. O estado de um equipamento é utilizado para saber o que o equipamento estava fazendo em um determinado momento, seja *Operando*, *Parado* ou em *Manutenção*. O estado é alterado de acordo com o uso do equipamento na operação, já a posição do equipamento é coletada através do GPS e é enviada e armazenada de tempo em tempo pela aplicação.
-
-Seu objetivo é, de posse desses dados, desenvolver o frontend de aplicação web que trate e exibida essas informações para os gestores da operação.
-
-## Requisitos
-
-Esses requisitos são obrigatórios e devem ser desenvolvidos para a entrega do teste.
-
-* **Posições dos equipamentos**: Exibir no mapa os equipamentos nas suas posições mais recentes.
-
-* **Estado atual do equipamento**: Visualizar o estado mais recente dos equipamentos. Exemplo: mostrando no mapa, como um pop-up, mouse hover sobre o equipamento, etc.
-
-* **Histórico de estados do equipamento**: Permitir a visualização do histórico de estados de um equipamento específico ao clicar sobre o equipamento.
-
-## Dados
-
-Todos os dados que precisa para desenvolver os requisitos estão na pasta `data/` no formato `json` e são detalhados a seguir.
-
-```sh
-data/
-|- equipment.json
-|- equipmentModel.json
-|- equipmentPositionHistory.json
-|- equipmentState.json
-|- equipmentStateHistory.json
-```
-
-### equipment.json
-Contém todos os equipamentos da aplicação.
-
-```JSONC
-[
-    {
-        // Identificador único do equipamento
-        "id": "a7c53eb1-4f5e-4eba-9764-ad205d0891f9",
-        // Chave estrangeira, utilizada para referenciar de qual modelo é esse equipamento 
-        "equipmentModelId": "a3540227-2f0e-4362-9517-92f41dabbfdf",
-        // Nome do Equipamento
-        "name": "CA-0001"
-    },
-    // ...
-]
-```
-
-### equipmentState.json
-Contém todos os estados dos equipamentos.
-
-```JSONC
-[
-    {
-        // Identificador único do estado de equipamento
-        "id": "0808344c-454b-4c36-89e8-d7687e692d57",
-        // Nome do estado
-        "name": "Operando",
-        // Cor utilizada para representar o estado
-        "color": "#2ecc71"
-    },
-    // ...
-]
-```
-
-### equipmentModel.json
-Contém todos os modelos de equipamento e a informação de qual é o valor por hora do equipamento em cada um dos estados.
-
-```JSONC
-[
-    {
-        // Identificador único do modelo de equipamento
-        "id": "a3540227-2f0e-4362-9517-92f41dabbfdf",
-        // Nome do modelo de equipamento
-        "name": "Caminhão de carga",
-        // Valor gerado por hora para cada estado
-        "hourlyEarnings": [
-            {
-                // Chave estrangeira, utilizada para referenciar de qual valor é esse estado
-                "equipmentStateId": "0808344c-454b-4c36-89e8-d7687e692d57",
-                // Valor gerado por hora nesse estado
-                "value": 100
-            },
-            // ...
-        ]
-    },
-    // ...
-]
-```
 
-### equipmentStateHistory.json
-O histórico de estados por equipamento.
+# Introdução
 
-```JSONC
-[
-    {
-        // Chave estrangeira, utilizada para referenciar de qual equipamento são esses estados
-        "equipmentId": "a7c53eb1-4f5e-4eba-9764-ad205d0891f9",
-        // Histórico de estados do equipamento
-        "states": [
-            {
-                // Data em que o equipamento declarou estar nesse estado
-                "date": "2021-02-01T03:00:00.000Z",
-                // Chave estrangeira, utilizada para referenciar qual é o estado
-                // que o equipamento estava nesse momento
-                "equipmentStateId": "03b2d446-e3ba-4c82-8dc2-a5611fea6e1f"
-            },
-            // ...
-        ]
-    },
-    // ...
-]
-```
-
-### equipmentPositionHistory.json
-O histórico de posições dos equipamentos.
-
-```JSONC
-[
-    {
-        // Chave estrangeira, utilizada para referenciar de qual equipamento são esses estados
-        "equipmentId": "a7c53eb1-4f5e-4eba-9764-ad205d0891f9",
-        // Posições do equipamento
-        "positions": [
-            {   
-                // Data em que a posição foi registrada
-                "date": "2021-02-01T03:00:00.000Z",
-                // Latitude WGS84
-                "lat": -19.126536,
-                // Longitude WGS84
-                "lon": -45.947756
-            },
-            // ...
-        ]
-    },
-    // ...
-]
-```
-
-
-## O que é permitido
-
-* Vue, React e Angular.
-
-* Typescript.
-
-* Bibliotecas de componentes (Element-ui, Vuetify, Bootstrap, etc.)
-
-* Bibliotecas e APIs de Mapas (Leaflet, Openlayers, Google Maps API, etc).
-
-* Template engines (Pug, Ejs, etc).
-
-* Gerenciamento de estado (Vuex, Redux, etc).
-
-* Frameworks CSS (Tailwind, Bulma, Bootstrap, Materialize, etc).
-
-* Pré-processadores CSS (SCSS, SASS, LESS, etc).
-
-* Frameworks baseados em Vue (Nuxt.js, Quasar, etc).
+Nesse teste, como o conhecimento em HTML, CSS e JS é avaliado, eu optei por utilizar um código em JS que realiza a mesma função de um JSX (react.js). Criei uma função chamada "Page" que é genérica, ou seja, não é necessário inserir manualmente no código qual o dado que se quer tratar. Essa função faz a busca no objeto JSON onde estão os dados e encontra os seus pares nos demais objetos, tornando possível adicionar mais dados no JSON (respeitando a modelagem do objeto) e ela irá tratar essas novas informações normalmente.
 
-* Qualquer tecnologia complementar as citadas anteriormente são permitidas desde que seu uso seja justificável.
+Para o melhor acesso desse código, ele foi hospedado no site https://www.felipececcotti.com/rastreio/
 
-## O que não é permitido
+# O Porquê de tais decisões!
 
-* Utilizar componentes ou códigos de terceiros que implementem algum dos requisitos.
+Não julguei necessário documentar o código, pois cada função já possui comentários para auxiliar no entendimento e para facilitar futuros upgrades.
 
-## Recomendações
+É importante ressaltar o porquê das escolhas feitas. Inicialmente, o código foi pensado para ser mais estático. No entanto, durante o desenvolvimento, houve uma mudança de direção e optou-se por um código mais genérico. Dessa forma, é possível alterar informações no JSON e, se essas alterações fizerem sentido para a função, ela será tratada normalmente. Por exemplo, se um novo estado "em pausa" for adicionado ou uma nova cor for incluída, o código será capaz de adicioná-los ao código.
 
-* **Linter**: Desenvolva o projeto utilizando algum padrão de formatação de código.
+# Como o código funciona?
 
-* **Leaflet**: Para a exibição de informações no mapa recomendamos o Leaflet por ser uma biblioteca de código aberto e de fácil uso.
 
-## Extras
+Como é selecionado os equipamentos?
 
-Aqui são listados algumas sugestões para você que quer ir além do desafio inicial. Lembrando que você não precisa se limitar a essas sugestões, se tiver pensado em outra funcionalidade que considera relevante ao escopo da aplicação fique à vontade para implementá-la.
+No final do código, é possível observar um "addEventListener" que utiliza o método 'change'. Quando há uma mudança de veículo no "select", o valor selecionado é enviado para minha função "Page()". Para alternar entre os veículos sem problemas e evitar a desseleção de um veículo e o retorno à página inicial, foi criado um "if" que verifica o valor recebido pelo "select". Se o valor for válido, ele é atribuído à minha função "Page()" e a página inicial é removida da tela, e  o mapa e a tabela são adicionados. Se o valor for falso, a página inicial é exibida novamente e o mapa e a tabela são removidos da tela.
 
-* **Filtros**: Filtrar as visualizações por estado atual ou modelo de equipamento.
+Como é possível fazer os pares que vêm dos JSONs?
 
-* **Pesquisa**: Ser possível pesquisar por dados de um equipamento especifico.
+Para tornar este código mais dinâmico, em vez de ser necessário especificar manualmente qual objeto do array é necessário, foi utilizado o método "Find()" para encontrar o par desse equipamento com base em sua id. Por exemplo, se um equipamento 1 tiver a id1 e houver outro objeto JSON com várias informações, indicando que se trata do equipamento 1, o código encontrará automaticamente o equipamento correspondente usando o método "Find()".
 
-* **Percentual de Produtividade do equipamento**: Calcular a produtividade do equipamento, que consiste em uma relação das horas produtivas (em estado "Operando") em relação ao total de horas. Exemplo se um equipamento teve 18 horas operando no dia a formula deve ser `18 / 24 * 100 = 75% de produtividade`.
 
-* **Ganho por equipamento**: Calcular o ganho do equipamento com base no valor recebido por hora informado no Modelo de Equipamento. Exemplo se um modelo de equipamento gera 100 por hora em operando e -20 em manutenção, então se esse equipamento ficou 10 horas em operação e 4 em manutenção ele gerou `10 * 100 + 4 * -20 = 920`.
 
-* **Diferenciar os equipamentos**: Diferenciar visualmente os equipamentos por modelo de equipamento na visualização do mapa.
+# Quais foram os principais desafios?
+
+Um dos principais desafios foi usar o Leaflet, uma biblioteca que nunca havia utilizado antes. Foi necessário compreender seu funcionamento e aplicá-la corretamente, o que exigiu a leitura atenta da documentação.
+
+Outro desafio foi não utilizar o React, uma vez que o teste não é avaliado outras linguagens além de HTML, CSS e JS, apesar de outras linguagens serem permitidas. Decidi me desafiar a desenvolver um código 100% em JS, buscando a diversidade do React.js, que permite manipular estados sem a necessidade de mudar de página.
 
-* **Histórico de posições**: Que seja possível visualizar o histórico de posições de um equipamento, mostrando o trajeto realizado por ele.
 
-* **Testes**: Desenvolva testes que achar necessário para a aplicação, seja testes unitários, testes automatizados, testes de acessibilidade, etc.
 
-* **Documentação**: Gerar uma documentação da aplicação. A documentação pode incluir detalhes sobre as decisões tomadas, especificação dos componentes desenvolvidos, instruções de uso dentre outras informações que achar relevantes.
 
-## Entregas
 
-Para realizar a entrega do teste você deve:
 
-* Relizar o fork e clonar esse repositório para sua máquina.
-
-* Criar uma branch com o nome de `teste/[NOME]`.
-  * `[NOME]`: Seu nome.
-  * Exemplos: `teste/fulano-da-silva`; `teste/beltrano-primeiro-gomes`.
-
-* Faça um commit da sua branch com a implementação do teste.
-
-* Realize o pull request da sua branch nesse repositório.