Este projeto foi desenvolvido utilizando Angular na versão 19.0.6. Trata-se de um site que realiza gerenciamento de clientes. Nele possui as funções de Cadastrar Clientes(CREATE), Listar Clientes(READ), Editar Clientes(UPDATE) e Deletar Cliente (DELETE)
src/
├── app/
│ ├── components/
│ │ └── header/
│ ├── models/
│ │ └── Cliente.ts/
│ │ ├── page/
│ │ │ ├── cadastrar-clientes/
│ │ │ ├── deletar-clientes/
│ │ │ ├── editar-clientes/
│ │ │ └── listar-clientes/
│ │ └── services/
│ │ │ └── cliente.service.ts
│ └── ... (demais diretórios e arquivos)
├── assets/
└── ... (demais diretórios e arquivos)
Antes de começar, certifique-se de ter o seguinte instalado em seu ambiente:
- Node.js (versão 18.x ou superior)
- npm (geralmente instalado junto com o Node.js)
- Angular CLI versão 19 (ferramenta do Angular para criar componentes, classes e etc.)
Siga os passos abaixo para configurar o projeto em sua máquina local.
Clone este repositório usando o comando:
git clone https://github.com/Marcellyz/angular-crud-clientes.gitcd angular-crud-clientesUse o npm para instalar as dependências necessárias:
npm installPara rodar a aplicação localmente em um servidor de desenvolvimento, execute:
ng serveAbra o navegador e acesse http://localhost:4200/ (o porto pode variar). A aplicação será recarregada automaticamente sempre que houver mudanças nos arquivos do projeto.
Para criar uma versão de produção otimizada do projeto, use o comando:
ng buildOs arquivos gerados estarão no diretório dist/. Você pode usar esses arquivos para hospedar a aplicação em um servidor web.
Para clonar, configurar e executar a API.Certifique-se de ter os pré-requisitos instalados e configurados antes de começar.
- Java JDK (versão 17.x)
- Maven
- Git
- IDE de sua escolha(Eclipse, IntelliJ IDEA ou VS Code)
- Banco de Dados(MySQL)
Esse arquivo está na pasta Backend, presente nesse repositorio, entre na pasta e recorte o diretório com nome API e adicione na sua pasta de preferência.
No diretório src/main/resources, localize o arquivo application.properties. Configure as propriedades do banco de dados e outras variáveis de ambiente, como:
spring.datasource.url=jdbc:mysql://localhost:3306/nome_do_banco
spring.datasource.username=seu_usuario
spring.datasource.password=sua_senha
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
server.port=8080- Substitua
nome_do_banco,seu_usuarioesua_senhapelas suas credenciais, - Em seguida, certifique-se de que o banco esteja rodando;
No terminal, compile o projeto para garantir que todas as dependências estejam instaladas corretamente:
mvn clean installPor ultimo execute a aplicação e verefique se ela funciona sem erros.
| Área | Descrição |
|---|---|
| 📊 Paginação | Adicionar suporte à paginação para evitar a exibição de grandes volumes de dados em uma única página |
| 🙍♀️ Feadback ao Usuario | Usar MatSnackBar para exibir notificações de sucesso ou erro após as ações do usuário. |
| 🔍 Buscar pelo Nome do Cliente | Adicionar um input para pesquisar utilizando o nome do cliente. |
| ✅ Validações Avançadas | Verificar se o nome do cliente já existe antes de permitir o cadastro. |
Contribuições são bem-vindas!❤️💡
Esse README pode ser ajustado de acordo com as necessidades específicas do seu projeto.
⌨️ com ❤️ por Marcellyz 😊
