O VEM Automobil é uma aplicação web desenvolvida com foco no framework Angular, integrando também tecnologias fundamentais como HTML, CSS e JavaScript, além de frameworks de estilo como TailwindCSS e DaisyUI para garantir uma interface moderna, responsiva e intuitiva.
O objetivo principal do sistema é fornecer um gerenciador de custos de veículos, permitindo que os usuários acompanhem e controlem todos os gastos relacionados à manutenção e uso de seus automóveis.
 João Victor Toniazzo de Oliveira |
 Vitor Eduardo Witchemichen |
Estudantes do curso Tecnologia de Sistemas para a Internet (TSI) da UTFPR campus Guarapuava
 Roni Fabio Banaszewski |
Formado em Análise de Sistemas, mestre e doutor na área de Engenharia da Computação. Atualmente professor de TSI na UTFPR campus Guarapuava
- Registrar e organizar custos de manutenção
(ex.: trocas de óleo, correia dentada, pneus, revisões). - Acompanhar despesas recorrentes
(ex.: abastecimento, impostos, seguros). - Gerenciar custos adicionais
(ex.: mão de obra de mecânicos, peças extras, taxas diversas). - Fornecer uma visão consolidada das despesas do veículo, auxiliando o usuário a planejar melhor seu orçamento.
- Angular → framework principal da aplicação.
- HTML, CSS e JavaScript → base do desenvolvimento web.
- TailwindCSS e DaisyUI → estilização e responsividade.
- TypeScript → maior organização e tipagem do código.
- 🌐 Angular – Framework principal da aplicação.
- 🎨 TailwindCSS – Estilização utilitária e responsiva.
- 💠 DaisyUI – Componentes pré-estilizados baseados em Tailwind.
- 🤖 StichAI – Plataforma de inteligência artificial para automação e integração.
- 🔣 Iconify – Biblioteca com milhares de ícones para uso em projetos web.
- 🎨 Make to Figma – Plugin para criação e prototipagem rápida no Figma.
RA1 - Prototipar e projetar interfaces gráficas de usuário, considerando princípios de usabilidade e experiência do usuário.
- ID1: Desenvolver protótipos de interfaces que demonstram compreensão das diretrizes de usabilidade.
- ID2: Projetar interfaces responsivas que se adaptam a diferentes tamanhos de tela.
RA2 - Criar e reutilizar componentes em frameworks frontend, desenvolvendo interfaces modulares, responsivas e estilizadas.
- ID3: Desenvolver componentes reutilizáveis e que se adaptem de maneira responsiva em vários tamanhos de tela.
- ID4: Incorporar componentes de frameworks CSS.
- ID5: Aplicar diretivas estruturais para exibir ou ocultar elementos de forma condicional.
- ID6: Utilizar diretivas estruturais para repetir elementos de interface de maneira dinâmica, a fim de criar listas, galerias ou outras visualizações baseadas em conjuntos de dados.
- ID7: Aplicar Pipes para formatar a apresentação de dados.
RA3 - Sincronizar dados entre a interface gráfica e o modelo de dados, aplicando técnicas de binding para manter a consistência.
- ID8: Aplicar técnicas de one-way data binding, como Interpolation e Property Binding, para exibir e atualizar dados na interface gráfica de maneira unidirecional.
- ID9: Aplicar técnicas de event binding para capturar eventos do usuário na interface e interagir com o modelo de dados.
- ID10: Aplicar técnicas de two-way data binding para criar uma sincronização bidirecional automática entre a interface e o modelo de dados.
- ID11: Usar variáveis de template para manipulação dinâmica dos dados na interface gráfica.
RA4 - Implementar comunicação eficaz entre componentes, utilizando padrões de comunicação e serviços para compartilhar lógica e dados.
- ID12: Criar comunicação entre componentes não relacionados hierarquicamente por meio de serviços através do mecanismo de injeção de dependência.
- ID13: Utilizar as diretivas @Input ou @Output para comunicanção em uma hierarquia de componentes.
RA5 - Criar interfaces de navegação intuitivas e responsivas, implementando roteamento em aplicações de página única (SPA).
- ID14: Configurar rotas para diferentes partes da aplicação, permitindo a navegação entre páginas distintas.
- ID15: Passar dados entre componentes que representam diferentes telas usando parâmetros de rotas.
- ID16: Criar uma estrutura de navegação aninhada para representar hierarquias de conteúdo.
- ID17: Aplicar guardas de rotas para controlar o acesso a rotas específicas da aplicação, assegurando que somente usuários autorizados possam acessar determinadas partes da interface.
RA6 - Realizar requisições assíncronas para serviços web, compreendendo os protocolos e formatos de troca de dados, tratando respostas e erros.
- ID18: Fazer requisições assíncronas a uma API pública para no mínimo a operação GET.
- ID19: Fazer requisições assíncronas a uma API simulada/fake para as operações GET, POST, PUT, PATCH e DELETE.
- ID20: Tratar respostas de sucesso e erros das requisições assíncronas.
- ID21: Aplicar validações de entrada nos campos do formulário, utilizando técnicas como expressões regulares (REGEX), e apresentar mensagens de erro claras e informativas para auxiliar os usuários a corrigir entradas incorretas.
- ID22: Desabilitar adequadamente o botão de submit enquanto o formulário conter campos inválidos, evitando a submissão de dados incorretos.
- ID23: Utilizar Promises para tratar respostas assíncronas.
- ID24: Utilizar Observables para tratar respostas assíncronas.
RA7 - Gerenciar o código-fonte de maneira eficiente, implementar boas práticas de controle de versão e colaborar em projetos de desenvolvimento.
- ID25: Criar um repositório no GitHub utilizando a estrutura do Gitflow, estabelecendo as branches "main" e "develop".
- ID26: Colaborar com outros membros do projeto, realizando fusões (merges) e resolução de conflitos.
- ID27: Planejar, configurar e executar o processo de build da aplicação, preparando-a para produção e realizar o deploy em um ambiente de hospedagem.
# Clone o repositório
git clone https://github.com/seu-usuario/nome-do-repo.git
# Acesse a pasta do projeto
cd nome-do-repo
# Instale as dependências
npm install
# Rode a aplicação
npm run dev