|
|
|
| [**Home**](./Home) |
|
|
|
|
| :----------------: |
|
|
|
|
|
|
|
|
**Documentação do negócio**
|
|
|
|
| [Sprints](./Sprints) | [Requisitos](./Requisitos) | [Processos](./Processos) | [Gerência](./Gerência) | [Horários](./Horários) | [Squads](./Squads) |
|
|
|
|
| :------------------: | :------------------------: | :---------------------: | :--------------------: | :-------------------: | :----------------: |
|
|
|
|
|
|
|
|
**Documentação técnica**
|
|
|
|
| [Arquitetura](./Arquitetura) | [Mockups](./Mockups) | [**Banco de dados**](./) | [Instalação](./Instalacao) |
|
|
|
|
| :-------------------------: | :------------------: | :-----------------------------: | :-----------------------: |
|
|
|
|
|
|
|
|
### Descrição
|
|
|
|
|
|
|
|
Durante a Sprint 0 do projeto, foram desenvolvidas pelos AGES II, as telas da aplicação, através da ferramenta Figma, utilizando da colaboração e feedback dos outros integrantes do time.
|
|
|
|
|
|
|
|
Ademais, para facilitar o desenvolvimento das telas, optou-se por utilizar uma biblioteca de componentes, nesse caso, a PrimeNG por atender aos requisitos visuais do projeto e ser compatível com a tecnologia de frontend escolhida, Angular.
|
|
|
|
|
|
|
|
<a href="https://www.figma.com/design/rEody50FZjD1l2hbe1wcxv/Indústria-Digital?node-id=2-6&node-type=canvas&t=rzyR8kb8VEhFZxPA-0">Link do Figma</a>
|
|
|
|
|
|
|
|
<a href="https://www.primeng.org">Link da biblioteca de componentes PrimeNG</a>
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
### Identidade Visual
|
|
|
|
|
|
|
|
Antes de começar a criar as telas, foi decidida a identidade visual das mesmas, optando-se por manter algumas das cores relacionadas a empresa do cliente, porém, utilizando uma variação como cor principal para contrastar mais com o fundo:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Mockups
|
|
|
|
|
|
|
|
No total, foram feitas 4 telas e 2 modais, os quais podem ser vistos a seguir:
|
|
|
|
|
|
|
|
#### Landing Page
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Dashboard
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Mapa
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Empresas
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Modal Filtros Avançados
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Modal Filtro CNAEs
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Fluxo do Usuário
|
|
|
|
|
|
|
|
#### Landing Page
|
|
|
|
|
|
|
|
O usuário irá entrar nessa página, onde ele deverá inserir alguns filtros básicos, incluindo os filtros avançados e de CNAE vistos anteriormente, para realizar uma busca por empresas, após inserir os filtros e clicar em "Procurar empresas" ele será redirecionado para o Dashboard:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Dashboard
|
|
|
|
|
|
|
|
Na aba Dashboard, o usuário pode visualizar graficamente o resultado de sua pesquisa, onde ele pode analisar algumas métricas relacionadas ao conjunto de dados filtrados. Ademais, assim como nas próximas páginas, o usuário pode alterar os filtros aplicados anteriormente para obter um novo conjunto de dados. Além disso, na parte central e superior da página o usuário pode navegar entre essas páginas.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Mapa
|
|
|
|
|
|
|
|
Na aba Mapa, o usuário pode visualizar a localização das empresas filtradas, podendo verificar quais delas estão na sua região de interesse. Além disso, ao clicar em um dos marcadores, o usuário pode obter algumas informações sobre aquela empresa.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### Empresas
|
|
|
|
|
|
|
|
Na aba Empresas, o usuário pode verificar todos os dados das empresas no conjunto de dados filtrado, dessa forma, ele tem acesso a dados mais específicos de cada um dos registros.
|
|
|
|
|
|
|
|
 |
