Repositório principal do aplicativo MUSA desenvolvido pelo grupo Inti da turma 2025.2 da disciplina de Métodos de Desenvolvimento de Software (MDS) da Faculdade de Ciências e Tecnologia em Engenharias da Universidade de Brasília (FCTE - UnB).
https://github.com/fga-eps-mds/MUSA-APP-docs
O MUSA é uma aplicação web moderna desenvolvida com HTML5, CSS3 e JavaScript puro, seguindo o padrão SPA (Single Page Application). A arquitetura foi projetada para ser web-centric, garantindo um single-source-of-truth (fonte única de verdade) para o código.
A aplicação pode ser distribuída para plataformas móveis (iOS e Android) através do Capacitor, que atua como um wrapper nativo instanciando uma WebView que carrega o site web principal a partir de sua URL hospedada.
O projeto MUSA segue uma arquitetura moderna de três camadas:
- Aplicação SPA em HTML/CSS/JavaScript puro
- Hospedagem em servidor estático
- Roteamento client-side
- Comunicação com backend via REST API
- Wrapper nativo para iOS e Android
- WebView integrada
- Acesso a recursos nativos (notificações, câmera, etc.)
- Carregamento do frontend via URL remota
- Implementado em Java Spring Boot
- Autenticação e autorização
- Lógica de negócio
- Persistência em PostgreSQL
Usuário → App Nativo (Capacitor) → WebView →
├─→ Frontend (HTML/JS/CSS)
└─→ Backend API (Spring Boot) → PostgreSQL
musa/
│
├── .vscode/ # Configurações do VS Code
│ └── settings.json # Configurações do workspace
│
├── css/ # Folhas de estilo
│ └── style.css # Estilos globais da aplicação
│
├── js/ # Scripts JavaScript
│ ├── app.js # Orquestrador principal da aplicação
│ ├── auth.js # Módulo de autenticação e gestão de sessão
│ └── router.js # Sistema de roteamento SPA
│
├── pages/ # Views/Templates HTML
│ ├── login.html # Página de autenticação
│ ├── cadastro.html # Página de registro de usuário
│ ├── home.html # Página inicial (dashboard)
│ ├── eventos.html # Listagem de eventos
│ ├── create.html # Criação de novos eventos
│ ├── search.html # Busca e filtros
│ └── user.html # Perfil do usuário
│
├── assets/ # Recursos estáticos
│ └── ArquiteturaDOCS.png # Diagrama de arquitetura
│
├── node_modules/ # Dependências do projeto (gerenciadas pelo npm)
│
├── .prettierignore # Arquivos ignorados pelo Prettier
├── .prettierrc # Configurações do Prettier
├── index.html # Ponto de entrada da aplicação (SPA)
├── package.json # Dependências e scripts npm
├── package-lock.json # Lock de versões das dependências
└── README.md # Documentação do projeto
- Git - Controle de versão
- Node.js (v18 ou superior) - Runtime JavaScript
- npm - Gerenciador de pacotes (incluído com Node.js)
- Visual Studio Code - Editor de código
- Extensão Live Server - Servidor de desenvolvimento com hot-reload
- Extensão Prettier - Formatação automática de código
git clone https://github.com/fga-eps-mds/2025.2-Inti.git
cd 2025.2-Intinpm install- Instale a extensão Live Server no VS Code
- Clique com botão direito em index.html
- Selecione "Open with Live Server"
Para testar a aplicação em diferentes tamanhos de tela:
- Abra as DevTools do navegador (F12)
- Ative o modo de visualização mobile (Ctrl+Shift+M)
- Teste em diferentes resoluções
Extensão Recomendada: Mobile Simulator para Chrome
SEMPRE execute o comando abaixo antes de fazer commit:
npx prettier --write .- Formate o código antes de cada commit
- Teste suas alterações antes de commitar
# Fluxo correto de commit
npx prettier --write .
git add .
git commit -m "[FEAT]: adiciona página de eventos"
git push- HTML5 - Estrutura semântica
- CSS3 - Estilização e responsividade
- JavaScript (ES6+) - Lógica da aplicação
- Node.js - Runtime JavaScript
- npm - Gerenciamento de pacotes
- Prettier - Formatação de código
- Live Server - Servidor de desenvolvimento
- Capacitor - Wrapper nativo para iOS/Android
- Java 17+
- Spring Boot - Framework backend
- PostgreSQL - Banco de dados relacional
- JWT - Autenticação e autorização