Projeto desenvolvido durante a Imersão Dev com Alura e Google.
O AgroDados é uma plataforma web interativa desenvolvida para centralizar, organizar e democratizar o acesso às bases de dados geoespaciais, ambientais e fundiárias do Brasil.
Profissionais de Geoprocessamento, Engenharia Florestal e Agronomia enfrentam diariamente o desafio da fragmentação de dados: encontrar um shapefile do CAR, dados de outorga de água ou mapas de uso do solo exige navegar por dezenas de portais governamentais distintos.
O AgroDados resolve isso atuando como um "One-Stop-Shop" (balcão único), conectando o usuário diretamente às fontes oficiais (MapBiomas, SICAR, INDE, Órgãos Estaduais) através de uma interface visual e intuitiva.
- Mapa Interativo SVG: Navegação visual pelo território nacional. O usuário pode clicar em qualquer estado para filtrar recursos específicos.
- Filtro Nacional vs. Estadual: Alternância rápida entre bases de dados federais (ex: MapBiomas Brasil) e estaduais (ex: GeoPortal SEMA-MT, IDE-SISEMA MG).
- Categorização Inteligente: Os links são organizados por tags (Regularização, Topografia, Hidrologia, Uso do Solo, etc.).
- Design Responsivo: Interface limpa e adaptável a diferentes tamanhos de tela.
- Base de Dados Curada: Um arquivo
data.jsrobusto contendo links diretos para as Infraestruturas de Dados Espaciais (IDEs) de todos os estados brasileiros.
O projeto foi construído utilizando tecnologias web fundamentais, sem dependência de frameworks pesados, garantindo leveza e performance:
- HTML5 Semântico: Estruturação do conteúdo e acessibilidade.
- CSS3: Estilização com uso de Variáveis CSS (Custom Properties), Flexbox e Grid Layout.
- JavaScript (ES6+): Lógica de manipulação do DOM, tratamento de eventos e renderização dinâmica dos cards.
- SVG (Scalable Vector Graphics): Manipulação vetorial para criar a interatividade do mapa do Brasil.
- JSON Structure: Organização dos dados no arquivo
data.js.
agrodados/
│
├── index.html # Estrutura principal e o mapa SVG incorporado
├── style.css # Estilos visuais, animações e responsividade
├── script.js # Lógica de interação, filtros e renderização
├── data.js # "Banco de dados" local contendo os links e descrições
└── README.md # Documentação do projeto
Como este é um projeto estático (Front-end puro), você não precisa instalar dependências ou configurar servidores complexos.
-
Clone este repositório:
git clone [https://github.com/SEU-USUARIO/agrodados.git](https://github.com/SEU-USUARIO/agrodados.git)
-
Acesse a pasta:
cd agrodados -
Abra o projeto:
- Basta dar um duplo clique no arquivo
index.html. - Recomendação: Se estiver usando o VS Code, utilize a extensão Live Server para uma melhor experiência.
- Basta dar um duplo clique no arquivo
O diferencial deste projeto reside no arquivo data.js. Ele foi estruturado para ser escalável. Um exemplo da estrutura de dados utilizada:
const database = {
"MatoGrosso": [
{
titulo: "SEMA-MT - GeoPortal",
descricao: "Portal de dados ambientais do Mato Grosso...",
link: "[http://monitoramento.sema.mt.gov.br/](http://monitoramento.sema.mt.gov.br/)",
categoria: "Estadual"
}
]
};Isso permite que novos estados ou bases sejam adicionados facilmente sem alterar a lógica do script.js.
Contribuições são muito bem-vindas! Se você conhece uma base de dados geoespacial importante que não está listada:
- Faça um Fork do projeto.
- Adicione a nova base no arquivo
data.js. - Realize um Pull Request.
Este projeto foi desenvolvido durante a Imersão Dev, promovida pela Alura em parceria com o Google. Agradeço aos instrutores e à comunidade pelo conhecimento compartilhado sobre lógica de programação e desenvolvimento web.
Desenvolvido por Pedro Luiz Rodrigues Vaz de Melo 🚀 [www.linkedin.com/in/pedro-luiz-rodrigues-vaz-de-melo]