Desenvolvimento de aplicação de gerenciamento de estacionamento utilizando o Framework definido por sorteio.
Programação III: CC 2022 Unoesc.
| Arquivo/Diretório | Definição |
|---|---|
| .devcontainer/ | Diretório de configurações Docker + Devcontainer |
| .devcontainer/nginx/ | Servidor Proxy para conexão de back e front end em localhost (NGINX) |
| .devcontainer/www/ | Configuração para container de desenvolvimento PHP + NodeJS (base Alpine) |
| .devcontainer/docker-compose.yml | Configuração central dos containers (Banco de dados, PhpMyAdmin, NGINX, Aplicativos Web) |
| .devcontainer/devcontainer.json | Arquivo de configuração Dev Container. A porta de entrada das demais configurações para desenvolvimento. |
| backend/ | API REST em PHP (Yii2) |
| frontend/ | SPA Vite utilizando React (Typescript) |
O projeto foi visto como uma oportunidade de aplicar praticas modernas de programação, o combo
ou seja, websites totalmente divididos e especializados em suas responsabilidades. Aplicativos de "única página" fazem requisições de transferência de estado representacional (REST) através de interfaces de programação de aplicativos (APIs), isso permite uma grande separação e uma aproximação maior dos princípios SOLID, de que cada componente do sistema é focado em uma única responsabilidade, promovendo a independência e a modularidade.
🏗️ Instalação requisitos técnicos
🪟 Instalação para Windows
Irei detalhar o ambiente de desenvolvimento em Dev Containers utilizando docker para um ambiente totalmente isolado e reproduzível.
Refira-se ao overview do projeto para mais detalhes sobre.
Caso prefira se encorajar a instalar o PHP, Composer, MySQL, Node e NPM, ou mesmo XAMPP na própria máquina, fique a vontade! Boa sorte!
Obs.: O guia a seguir é para executar a instação do WSL, que recomendo altamente para desenvolvedores em Windows.
🐧 Instalar WSL: Debian
Powershell (Admin):
PS> wsl --install -d debian
Após instalado, execute as etapas de instalação e configure seu usuário linux. Então, em sua nova máquina Debian, continue:
Obs.: Recomendo que utilize um aplicativo de terminal. Ex.: Windows Terminal
🐳 Instalar Docker Engine
- Caso seja sua primeira vez instalando o docker, é possível executar o script auxiliar oficial para facilitar a instalação:
$ curl https://get.docker.com/ | sh
- Após instalado, talvez seja necessário permitir que o Docker possa executar seus serviços, tradicionalmente através do systemd.
- O Docker inicialmente precisa de privilégio de super usuário, nesse sentido, siga as instruções da habilitar acesso ao seu usuario.
$ sudo groupadd docker
$ sudo gpasswd -a $USER docker
$ docker run hello-world # Se esse comando funcionar corretamente sem 'sudo', parabéns! Está tudo devidamente configurado.
⚙️ Configuração VS Code
Extensões
🏃♂️ Executar o Ambiente de Desenvolvimento
1. Setup do projeto
🚀 Codespaces
Faça um fork do repositorio e então abra uma instancia "codespace"
É possível também abrir um codespace localmente, fazendo um tunel de sua maquina até a instancia remota do GitHub.
🐉 VS Code (Certifique-se que os passos de instalação e extensões estão corretos)
Clone o repositório do github
git clone https://github.com/joaozenaro/park-hub.git
Abra o diretório clonado com o vscode
code park-hub/
Abra o container
2. Execução do projeto
Executar os comandos dentro do bash WSL. Tanto nos codespaces como localmente.
Backend
Instalar pacotes
$ cd backend/
$ composer install
Criar a primeira migração no banco, caso não exista
$ ./yii migrate/up --migrationPath=@yii/rbac/migrations # Work in progress
$ ./yii migrate
Executar o servidor
$ ./yii serve 0.0.0.0
Frontend
Instalar pacotes
$ cd frontend/
$ npm i
Executar o servidor
$ npm run dev
classDiagram
direction TB
Spot "1" -- "1..*" SpotTicket
Spot "1" -- "1" SpotType
class Spot {
- Id: int Primary Key
- Code: string -> A1, A2..
- Floor: string -> "SUB1", "SUB2"..
- SpotType: int Foreign Key : SpotType
}
class SpotType {
- Id: int Primary Key
- Name: string -> Carro, Moto, Cadeirante, Eletrico..
- DefaultPrice: decimal -> Valor padrão do tipo da vaga
}
class SpotTicket {
- Id: int Primary Key
- ClientLicensePlate: string
- SpotId: int Foreign Key : Vaga
- Price: decimal
- WasPaid: bool
- CheckIn: DateTime: DataHora de entrada do veiculo
- CheckOut: DateTime: DataHora de saida do veiculo
- WardenUserId: int Foreign Key : User
+ GetFinalPrice() -> Calcula valor a ser pago:\n[`horario de saida > entrada + tolerancia` -> 10 * 1.5/hora]
}
-
Níveis de acesso (Admin / User)
- Cadastro feito por outro admin:
- Admin: Edição todos perfis
- User: Edição próprio perfil
- Cadastro feito por outro admin:
-
Login
- Admin primeiro cria um usuario basico
- Usuario recebe email de convite
- Usuario entra na aplicação e completa seu cadastro
-
Planos (pré-pago / pós-pago)
- A ser definido
-
Vagas
- Cadastro de novas vagas
- Utilização de vagas (permanência para cobrança)
- Consulta de vagas disponíveis no momento
-
Fluxo de veículos (entrada / saída)
- Listagem filtrada para saber:
- Número de vagas utilizadas por tempo (1 hr, 1 dia, 1 semana, mes...)
- Utilizadas no momento (Tem data de entrada, mas sem saída)
- Listagem filtrada para saber:
-
Relatórios sobre movimentação financeira
- Igual o fluxo de veículo, mas com os valores pagos