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.git
cd angular-crud-clientes
Use o npm para instalar as dependências necessárias:
npm install
Para rodar a aplicação localmente em um servidor de desenvolvimento, execute:
ng serve
Abra 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 build
Os 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_usuario
esua_senha
pelas 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 install
Por 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 😊