A nova interface web do Agromart é uma aplicação web progressiva (PWA) desenvolvida em Vue.js com Vuetify, especialmente projetada para agricultores que participam de Comunidades que Sustentam a Agricultura (CSA). Ela permite que os usuários gerenciem seus negócios por meio de uma camada visual amigável. A interface foi criada com foco na simplicidade, acessibilidade e usabilidade para usuários com baixo letramento digital, priorizando o acesso via dispositivos móveis.
- Interface limpa e intuitiva com ícones grandes
- Linguagem simples, evitando jargões técnicos
- Cores naturais (verde) que remetem à agricultura
- Navegação objetiva e direta
- Otimizado para smartphones e tablets
- Layout adaptável para diferentes tamanhos de tela
- Touch-friendly com botões grandes
- Menu de navegação inferior fixo
- Service Worker para cache de dados
- Sincronização automática quando online
- Armazenamento local para dados críticos
- PWA instalável no dispositivo
- Lazy loading de componentes e imagens
- Compressão automática de imagens
- Cache inteligente de recursos
- Otimizações para conexões lentas
- Vue.js 3 - Framework JavaScript reativo
- Vuetify 3 - Biblioteca de componentes Material Design
- Vue Router 4 - Roteamento SPA
- Pinia - Gerenciamento de estado
- Axios - Cliente HTTP para API
- Service Worker - Funcionalidades offline
- PWA - Progressive Web App
agromart-frontend/
├── public/
│ ├── manifest.json # Configuração PWA
│ └── sw.js # Service Worker
├── src/
│ ├── assets/
│ │ └── css/
│ │ └── global.css # Estilos globais
│ ├── components/
│ │ ├── BasketCard.vue # Card de cesta
│ │ ├── BasketForm.vue # Formulário de cesta
│ │ ├── EmptyState.vue # Estado vazio
│ │ ├── LoadingCard.vue # Card de carregamento
│ │ ├── ProductCard.vue # Card de produto
│ │ └── ProductForm.vue # Formulário de produto
│ ├── layouts/
│ │ └── DefaultLayout.vue # Layout padrão
│ ├── pages/
│ │ ├── BasketsPage.vue # Página de cestas
│ │ ├── HomePage.vue # Página inicial
│ │ ├── LoginPage.vue # Página de login
│ │ ├── OrdersPage.vue # Página de pedidos
│ │ ├── ProductsPage.vue # Página de produtos
│ │ ├── ProfilePage.vue # Página de perfil
│ │ └── StorePage.vue # Página da loja
│ ├── plugins/
│ │ └── vuetify.js # Configuração Vuetify
│ ├── router/
│ │ └── index.js # Configuração de rotas
│ ├── services/
│ │ └── api.js # Serviços de API
│ ├── store/
│ │ ├── app.js # Store da aplicação
│ │ ├── auth.js # Store de autenticação
│ │ ├── baskets.js # Store de cestas
│ │ ├── index.js # Store principal
│ │ ├── products.js # Store de produtos
│ │ └── stores.js # Store de lojas
│ ├── utils/
│ │ ├── offline.js # Utilitários offline
│ │ └── performance.js # Otimizações
│ ├── App.vue # Componente raiz
│ └── main.js # Ponto de entrada
└── package.json # Dependências
- Node.js 16+
- npm ou yarn
- API Strapi configurada
- Clone o repositório
git clone https://github.com/AgroMart/interface-web.git- Instale as dependências
npm install- Configure as variáveis de ambiente
# Crie um arquivo .env.local
VUE_APP_STRAPI_URL=http://localhost:1337
VUE_APP_API_TOKEN=your-api-token- Execute em desenvolvimento
npm run serve- Build para produção
npm run build- Visão geral com estatísticas
- Ações rápidas para tarefas comuns
- Dicas e orientações para agricultores
- Cards informativos com métricas
- Listagem de produtos com filtros
- Formulário de cadastro/edição
- Upload de imagens com otimização
- Controle de estoque e preços
- Criação de cestas semanais
- Organização de produtos por cesta
- Definição de preços e quantidades
- Descrições detalhadas para clientes
- Lista de pedidos com status
- Filtros por período e status
- Ações de confirmação e preparo
- Informações detalhadas do cliente
- Dados básicos da loja
- Endereço e contato
- Upload de banner
- Configurações de entrega
- Informações pessoais
- Configurações de notificações
- Estatísticas de uso
- Ações de manutenção
A aplicação está preparada para integrar com os seguintes endpoints da API Strapi:
-
GET /api/produtos-avulsos- Listar produtos -
POST /api/produtos-avulsos- Criar produto -
PUT /api/produtos-avulsos/:id- Atualizar produto -
DELETE /api/produtos-avulsos/:id- Excluir produto -
GET /api/cestas- Listar cestas -
POST /api/cestas- Criar cesta -
PUT /api/cestas/:id- Atualizar cesta -
GET /api/lojas- Listar lojas -
PUT /api/lojas/:id- Atualizar loja -
GET /api/planos- Listar planos -
GET /api/assinantes- Listar assinantes
O serviço de API está configurado em src/services/api.js com:
- Base URL configurável via variável de ambiente
- Interceptors para tratamento de erros
- Autenticação via token
- Retry automático para falhas de rede
- Cache de requisições
- Cache de assets estáticos
- Cache dinâmico de dados da API
- Estratégias de cache configuráveis
- Sincronização em background
- Cache de dados críticos no localStorage
- Compressão de dados para economizar espaço
- Limpeza automática de cache expirado
- Sincronização pendente para quando voltar online
- Manifest configurado para instalação
- Ícones para diferentes dispositivos
- Splash screen personalizada
- Shortcuts para ações rápidas
- Navegação por teclado
- Foco visível em elementos
- Ordem lógica de tabulação
- Atalhos de teclado
- Contraste adequado de cores
- Textos legíveis e escaláveis
- Ícones com labels descritivos
- Feedback visual para ações
- HTML semântico correto
- ARIA labels onde necessário
- Estrutura de headings lógica
- Descrições alternativas para imagens
npm run buildVUE_APP_STRAPI_URL=https://api.agromart.com
VUE_APP_API_TOKEN=production-token
VUE_APP_ENVIRONMENT=productionEste projeto está licenciado sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.