- Comunidades e informação
Abastece
Que postos têm combustível e fila, reportado pela comunidade — fiz o site com dados em tempo real e o mapa público.
- Período
- 2026
- Estado
- Em produção
- Papel
- Site de marketing e mapa público: integração com a API, cache offline, pinos por estado e PT/EN
Problema
Em períodos de escassez, os condutores não sabem que postos têm gasolina ou gasóleo nem o tamanho da fila. O site precisava de mostrar os dados reais da comunidade, não uma lista fixa.
Solução
Troquei a lista de postos escrita no código por pedidos à API do Abastece, com cache no navegador e fallback offline. Acrescentei filtros por estado (com combustível, sem combustível, com fila) com pinos verdes, vermelhos e amarelos, navegação interna até ao posto e o site em português e inglês. A app Ionic e o backend Laravel/PostGIS são da equipa.
Decisões técnicas
01
Sem build: HTML e JS com bibliotecas por CDN
Leaflet e Ionicons carregados por CDN, sem bundler — página leve e deploy trivial.
02
Cache com TTL e fallback offline
Os postos ficam em `localStorage` durante 10 minutos; sem rede, o mapa mostra os últimos dados em vez de ficar vazio.
03
Estatísticas calculadas a partir da API
Total de postos, marcas e cobertura são calculados no cliente a partir da mesma resposta, sem números escritos à mão.
04
Traduções por atributos `data-i18n`
Um objecto de traduções simples, com português forçado no primeiro carregamento.
Imagens
01 / 03 — Página inicial do Abastece: "A Bomba Certa, No Momento Certo", com um telemóvel a mostrar o mapa de postos
Tecnologias
- JavaScript
- HTML/CSS
Resultados verificáveis
O que aprendi
Passar um site de dados estáticos para uma API real sem piorar a experiência quando a rede falha.
ODS
ODS 7 · Energia Acessível e Sustentávelprincipal
Em períodos de escassez, o mapa comunitário mostra que postos têm combustível e onde há fila, reduzindo deslocações à procura de combustível.