Um dashboard web simples desenvolvido em Flask que permite aos usuários consultar preços oficiais de GLP (Gás Liquefeito de Petróleo) de 13kg por cidade, utilizando dados da ANP (Agência Nacional do Petróleo, Gás Natural e Biocombustíveis).
Esse dash está na web como webapp-gas-mais-barato.onrender.com
Este projeto foi desenvolvido para facilitar a consulta de preços de GLP de 13kg em diferentes cidades brasileiras. O dashboard utiliza dados oficiais da ANP e oferece uma interface amigável, moderna e interativa para que os usuários possam encontrar o melhor preço do gás em sua região.
O frontend conta com animações, atalhos de teclado, notificações toast, exportação de dados, gráficos dinâmicos e outras melhorias de experiência do usuário.
- Busca por Cidade e Estado: Filtro por município e UF para encontrar revendedores locais
- Consulta de Preços: Visualização dos preços oficiais de GLP 13kg
- Informações das Empresas: Dados das revendedoras incluindo CNPJ e endereço
- Filtros Avançados: Busca por estado, bandeira da empresa e período
- Interface Responsiva e Animada: Design adaptável, com animações de fade-in nos cards e tooltips informativos
- Atalhos de Teclado: Pesquise rapidamente (Ctrl/Cmd+K) ou limpe filtros (Esc)
- Notificações Toast: Feedback visual para ações do usuário
- Exportação para CSV: Exporte os resultados da busca facilmente
- KPIs Dinâmicos: Indicadores de preço médio, mínimo, máximo, total de cidades e empresas, com gráficos sparkline
- Copiar para Área de Transferência: Copie informações rapidamente
- Reportar Preço: Botão para enviar e-mail reportando preços diferentes, com confirmação
- API REST: Endpoints para integração com outros sistemas
- Filtros Persistentes: Filtros de busca salvos automaticamente no navegador
- Ordenação de Colunas: Agora é possível ordenar os resultados da tabela por qualquer coluna (Cidade, Estado, Data Coleta, Empresa, Preço, Endereço, Bandeira) clicando no cabeçalho correspondente.
- Backend: Flask (Python)
- Frontend: HTML, CSS, JavaScript
- Framework CSS: Bootstrap 5
- Processamento de Dados: Pandas
- Dados: CSV com informações oficiais da ANP
webapp_gas_mais_barato/
├── src/ # Código fonte principal
│ ├── __init__.py # Pacote Python
│ ├── app.py # Aplicação Flask principal
│ └── data_processor.py # Processamento e filtros de dados
├── templates/ # Templates HTML
│ ├── base.html # Template base
│ ├── index.html # Página principal
│ ├── about.html # Página sobre
│ ├── 404.html # Página de erro 404
│ ├── 500.html # Página de erro 500
│ └── error.html # Página de erro genérica
├── static/ # Arquivos estáticos
│ ├── css/
│ │ └── style.css # Estilos personalizados
│ └── js/
│ └── main.js # JavaScript principal
├── data/ # Dados da ANP
│ ├── ultimas-4-semanas-glp.csv
│ └── CAPACIDADE DE TANQUE.pdf
├── main.py # Script principal de execução
├── config.py # Configurações da aplicação
├── test_data_processor.py # Script de testes
├── pyproject.toml # Configurações do projeto
├── uv.lock # Lock file das dependências
└── README.md # Este arquivo
- Python 3.13 ou superior
- Gerenciador de pacotes
uv(recomendado) oupip
-
Clone o repositório
git clone <url-do-repositorio> cd webapp_gas_mais_barato
-
Instale as dependências
# Usando uv (recomendado) uv sync # Ou usando pip pip install -r requirements.txt
-
Execute os testes
python test_data_processor.py
-
Execute a aplicação
python main.py
-
Acesse o dashboard Abra seu navegador e acesse:
http://localhost:5000
- Acesse o Dashboard: Abra a aplicação no seu navegador
- Selecione Estado e Cidade: Use os filtros para refinar sua busca
- Visualize os Preços: Veja os preços de GLP 13kg das diferentes revendedoras
- Compare Opções: Analise preços, bandeiras e localizações das empresas
- Ordene os Resultados: Clique no cabeçalho de qualquer coluna da tabela de resultados (Cidade, Estado, Data Coleta, Empresa, Preço, Endereço, Bandeira) para ordenar os dados de forma crescente ou decrescente.
- Use Atalhos: Ctrl/Cmd+K para focar na busca, Esc para limpar filtros
- Exporte Dados: Clique em "Exportar CSV" para baixar os resultados
- Copie Informações: Use o botão de copiar para transferir dados para a área de transferência
- Reportar Preço: Clique no botão de e-mail para reportar preços diferentes (notificação será exibida)
- Filtros Salvos: Seus filtros são salvos automaticamente e restaurados ao recarregar a página
O módulo data_processor.py contém a classe GLPDatabaseProcessor que oferece:
- Carregamento de dados: Leitura do arquivo CSV da ANP
- Limpeza de dados: Tratamento de valores nulos e formatação
- Filtros por data: Seleção de período mais recente
- Filtros por localização: Busca por cidade e estado
- Estatísticas: Resumo dos dados processados
A aplicação Flask oferece:
- Página principal: Dashboard com filtros e resultados
- API REST: Endpoints para busca de dados
- Templates: Interface responsiva com Bootstrap
- Tratamento de erros: Páginas de erro personalizadas
O arquivo main.js implementa:
- Animações e tooltips
- Atalhos de teclado
- Notificações toast
- Exportação de resultados para CSV
- KPIs dinâmicos e gráficos sparkline
- Persistência de filtros no navegador
- Função de copiar para área de transferência
- Botão de reportar preço via e-mail
- Ordenação dinâmica das colunas da tabela de resultados
Execute para verificar se tudo está funcionando:
python test_data_processor.pyO dashboard utiliza dados da ANP contendo:
- Informações Geográficas: Região, Estado, Município
- Dados das Revendedoras: Nome, CNPJ, Endereço completo
- Preços: Valor de venda do GLP 13kg
- Metadados: Data da coleta, bandeira da empresa
Crie um arquivo .env na raiz do projeto:
FLASK_ENV=development
FLASK_DEBUG=True
PORT=5000
SECRET_KEY=sua-chave-secreta-aquiO arquivo config.py contém as configurações da aplicação:
- Configurações do Flask: Secret key, debug mode
- Caminhos de dados: Localização dos arquivos CSV
- Parâmetros de processamento: Dias para trás, limite de resultados
- Configurações da aplicação: Nome, versão, descrição
A aplicação oferece os seguintes endpoints:
GET /- Página principal do dashboardGET /api/search- Busca de preços com filtrosGET /api/cities- Lista de cidades disponíveisGET /api/states- Lista de estados disponíveisGET /api/stats- Estatísticas dos dadosGET /about- Página sobre o projeto
# Buscar preços em uma cidade específica
curl "http://localhost:5000/api/search?city=São Paulo&limit=10"
# Obter estatísticas
curl "http://localhost:5000/api/stats"- Gráficos de evolução de preços
- Alertas de preço
- Comparação entre cidades
- API REST para integração
- Aplicativo mobile
- Histórico de preços
- Exportação de dados em diferentes formatos
- Dashboard administrativo
Para executar os testes:
# Testar processamento de dados
python test_data_processor.py
# Testar a aplicação Flask
python -m pytest tests/ # Se implementar pytestContribuições são bem-vindas! Para contribuir:
- Faça um fork do projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
- Novas funcionalidades: Adicione em
src/ - Templates: Crie em
templates/ - Estilos: Modifique
static/css/ - JavaScript: Atualize
static/js/ - Testes: Adicione em
tests/
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Para dúvidas, sugestões ou problemas:
- Abra uma issue
- Entre em contato através do email: seu-email@exemplo.com
- ANP - Agência Nacional do Petróleo, Gás Natural e Biocombustíveis pelos dados oficiais
- Comunidade Flask - Pelo framework web utilizado
- Bootstrap - Pelo framework CSS responsivo
- Contribuidores - Todos que ajudaram no desenvolvimento
Desenvolvido com ❤️ para ajudar os brasileiros a encontrar o melhor preço do GLP