Bibli-E é uma aplicação SPA (Single Page Application) em HTML/CSS/JavaScript puro que simula uma biblioteca universitária da Unifor. Inclui catálogo de livros e periódicos, jogos, sistema de empréstimos, renovações, reservas em fila com promoção automática, painel administrativo, busca global (overlay + página dedicada), histórico, PWA com cache e notificações locais.
- Arquitetura: SPA com roteamento via hash (
/#/rota) e carregamento dinâmico de partials HTML emviews/+ scripts específicos. - Persistência:
localStoragepara sessões, empréstimos, reservas, inventário persistente e preferências de busca/filtros. - Autenticação: Login simples (localStorage) com papéis (
aluno,professor,admin). Painel admin exige papeladmin. - PWA:
manifest.json+service-worker.js(cache estático + network-first para partials). Suporte offline básico de assets. - Notificações: Service Worker escuta mensagens e exibe
showNotificationquando reserva é promovida para empréstimo (permission necessária). - Reservas & Fila: Cada item indisponível gera fila com posição e ETA estimado baseada em prazo padrão de empréstimo.
- Promoção Automática: Ao aumentar disponibilidade pelo admin ou devolver item, primeira reserva válida é promovida para empréstimo imediato e notificada.
- Busca Global: Overlay acionado por
Ctrl+Kou botão; opção "Ver tudo" leva à rota/buscarcom filtros avançados e exportação CSV. - Testes: Node + VM sandbox validando lógica de
loanStore(renovação, duplicidade de reservas) e carregamento do script de busca.
index.html # Shell da SPA
styles/ # CSS global
scripts/ # Lógica modular (router, auth, loanStore, views, search, admin, notify)
views/ # Partials HTML das rotas
service-worker.js # Worker PWA
manifest.json # Metadados PWA
tests/ # Testes Node
README.md # Este arquivo
package.json # Scripts de teste
router.js: Mapeia rotas, carrega partial + script on-demand (lazy load). Simples, hash-based.loanStore.js: Núcleo de domínio (empréstimos, renovações, devoluções, reservas, promoção, inventário persistente e notificações).auth.js: Sessão e papel do usuário.search.js&searchView.js: Overlay global + página agregada com filtros e export.admin.js: Ajuste de disponibilidade, visualização de filas e promoção.notify.js: Solicita permissão de notificação.
- Empréstimo: Item disponível -> criação de empréstimo com data de devolução (padrão 14 dias).
- Renovação: Verifica limite de renovações e atraso antes de estender prazo.
- Reserva: Item indisponível -> adiciona usuário à fila se não estiver já reservado.
- Promoção: Disponibilidade + fila -> retira primeiro da fila e cria empréstimo automaticamente.
- Notificação: Service Worker mostra push local (não real web push, somente API Notification).
- Abra
index.htmlem um servidor local (necessário para Service Worker):- Opção rápida:
npx serveounpx http-server(instale comnpm i -g serve). - PowerShell (Python 3):
python -m http.server 8080(se Python instalado) e acessehttp://localhost:8080.
- Opção rápida:
- Faça login (credenciais podem ser livres ou pré-validadas conforme implementação do formulário).
- Navegue pelas rotas via menu ou hash.
- Pressione
Ctrl+Kpara abrir busca rápida. - Acesse
/admin(se papel = admin) para ajustar inventário. - Conceda permissão de notificação ao navegador para avisos de promoção de reserva.
- Instale dependências se houver (atualmente apenas Node padrão):
npm install
npm test
tests/loanStore.test.js: Verifica renovação e bloqueio a reservas duplicadas.tests/searchIndex.test.js: Garante carregamento seguro de script de busca sem DOM real.
- Sem framework para transparência educacional e facilidade de leitura.
- Roteador simples minimiza sobrecarga e evita dependências.
localStoragesuficiente para protótipo; futura evolução poderia migrar para API/DB.- Estimativas de ETA em fila são heurísticas (duração média de empréstimo).
- Notificações locais apenas ilustrativas; Web Push real exigiria backend + assinatura VAPID.
- Segurança limitada (credenciais não hash, sessão client-side).
- Sem validação robusta de entrada (possível sanitização futura).
- Testes cobrindo apenas casos principais (expandir para promoção, devolução e admin).
- Falta API real para multi-dispositivo consistente.
- Backend Node/Express + ORM (Prisma) para persistência real.
- Web Push (VAPID) com fila de notificações.
- Relatórios estatísticos (uso por curso, atraso médio, taxa de renovação).
- Mecanismo de penalidades por atraso (suspensões temporárias).
- Internacionalização (i18n) multi-idioma.
- Testes adicionais (fila de promoção, exportação CSV, busca combinada).
- Fork / Clone.
- Criar branch feature (
git checkout -b feature/nova-funcionalidade). - Executar testes antes do commit (
npm test). - Pull Request descrevendo alteração e impacto.
Protótipo acadêmico/demonstrativo. Sem licença formal definida; adicione conforme necessidade institucional.
Desenvolvido como exercício evolutivo de arquitetura front-end educacional.