Prints
Resumo do Projeto
- Interface web com HTML, CSS, JS e REACT.JS
- Uma WEB API REST, feita com ASP.NET em C#
- Um banco de dados PostgreSQL para permanencia de dados via ORM NHibernate
- Organiza e administra Dívidas de Clientes
Features
- Paginação de 10 em 10 clientes
- Busca de Clientes
- Ordenação de Cliente com maior somatório de dívidas para menor
- Exibição dinâmica para buscas/páginas com 8, 6, 4, 2, 1 e 0 clientes (Busque por: "Retorna8", "Retorna6", "Retorna4", "Retorna2", "Retorna1", "Retorna0" Para ver)
- Fácil Cadastro, Cdição e Remoção de Clientes
- Adição, alteração e remoção de imagem de perfil de Cliente
- Paginação de 10 em 10 dívidas de clientes
- Fácil Cadastro, Edição, Baixa e Remoção de Dívidas de um Cliente
- Limitação automática de 200 reais de somatório de dívidas de um Cliente
To do List
- Organizar o ínicio do README.md, com as regras e requisitos já préviamente analisados
- Montar diagrama geral da aplicação
- Desenvolver schema.sql das Tabelas Clientes e Dívidas
- Gerar Inserts de Mockup para clientes e dívidas
- Desenvolver triggers e funções para validações à nível de banco e auxiliares
- /Console/Entidades
- /Console/Mappings
- /Console/Services
- READ [+Postman Collection]
- CREATE [+Postman Collection]
- UPDATE [+Postman Collection]
- DELETE [+Postman Collection]
- Urgente: Refatorar Email, não é NOT NULL, é NULLABLE, oreiei, não vi direito o requisito
- Urgente: Fazer checagem de Data de Nascimento < hoje no back e banco
- Urgente: Refatoração dos retornos de erro, usar o ValidationResult certo (junto com um HandleException cabuloso, retornando o membername sempre, pra facilitar no front)
- Urgente: Validar CPF na API (usei uma tal de biblioteca Cpf.Cnpj muito foda, documentação brasileira, não validei 100% a nível de banco pois daria um trabalho inifinito, no banco só valida se tem 11 dígitos)
- Ter certeza que não estou esquecendo de nada (Eu acho que não esqueci de nada)
- READ DÍVIDAS/{idcliente} [+Postman Collection]
- CREATE [+Postman Collection]
- UPDATE [+Postman Collection]
- DELETE [+Postman Collection]
- Prototipar Interface do grid de cards de clientes
- Prototipar Interface de tabela de dívidas de um cliente
- Prototipar Modal de Formulário de Inserção/Edição de Cliente/Dívida
- Prototipar Modal de Confirmação de Inserção/Edição/Baixa/Exclusão de Cliente/Dívida
- Refatorar: Protótipo, banco e mapeamento do Back para armazenar caminho da imagem de perfil do cliente na tabela cliente
- Refatorar totalmente o banco e backend para imagem de perfil [+Postman Collection]
- Refatorar banco, adicionar deleção em cascata do cliente, pra ser possível apagar mesmo que tenha dívidas
- Refatorar banco, para ter uam coluna do somatório de dívidas de um cliente 🙂
- Desenvolver componente de header
- Desenvolver HTML e CSS da interface do grid de cards de clientes, componente de card de cliente
- Adicionar funcionalidade de listagem dinâmica dos clientes (fetch+paginamento/busca)
- Confirmação de exclusão (e recarregar página)
- Formulário de edição de cliente (e recarregar página)
- Formulário de edição de imagem de cliente (e recarregar página)
- Formulário de inserção de cliente (e recarregar página)
- Roteamento para levar do botão de somatório de dívidas para a página de tabela de dívidas e vice-versa (ir e voltar, rotear)
- Desenvolver HTML e CSS da interface da tabela de dívidas de um cliente, componente de tabela de dívidas de um cliente
- Refatorar Backend endpoint de dívidas by idcliente, pra retornar da forma correta e com skip page size aplicados para paginação no front
- Adicionar funcionalidade de listagem dinâmica dos clientes (fetch+paginamento)
- Reaplicar confirmação de exclusão de cliente (e voltar para /clientes/)
- Reaplicar formulário de edição de cliente (e recarregar página)
- Confirmação de exclusão de dívida (e recarregar página)
- Confirmação de baixa de dívida (e recarregar página)
- Formulário de edição de dívida (e recarregar página)
- Formulário de inserção de dívida (e recarregar página)
- CRUD Clientes no front finalizado e validado
- CRUD Dívidas no front finalizado e validado
- Exportar Collection do Postman
- Documentar o motivo de uso das Libs
- Documentar as instruções de uso da aplicação Vendinha Fullstack Interfocus 😎
- Entregar repositório
Instruções de Uso/Execução
- Tenha o GIT instalado:
https://git-scm.com/download/win
- Tenha o SDK do DOTNET 8.0 instalado:
https://dotnet.microsoft.com/pt-br/download
- Tenha o NPM instalado:
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
- Tenha uma IDE para Postgresql instalada, recomendo o pgAdmin:
https://www.pgadmin.org/download/pgadmin-4-windows/
- Caso tenha acabado de instalar algum dos itens acima, reinicie seu computador
- Abra um terminal e clone o repositório:
git clone https://github.com/samubarreto/Vendinha-Samu.git- Acesse o diretório do repositório clonado:
cd .\Vendinha-Samu\- Abra o diretório atual no Explorador de Arquivos pra facilitar a explicação:
explorer .- Abra o arquivo schema.sql com qualquer editor de texto/código (Bloco de notas)
- Abra sua IDE do Postgresql (pgAdmin)
- Registre um novo servidor com as seguintes informações:
- Nome: localhost(qualquer nome)
- Host: 127.0.0.1
- Porta: 5432
- Senha: samu123
- Conecte-se ao servidor registrado crie um banco de dados com nome = vendinha_samu
- Abra uma nova Querry para o banco vendinha_samu:
- Cole o conteúdo do schema.sql e execute
- Volte para o explorador de arquivos, no diretório root (Vendinha-Fullstack-Interfocus), abra o terminal e siga os comandos:
cd .\Vendinha-Samu.Backend\
cd .\Vendinha_Samu.Api\
dotnet watch run- Veja quais são os 4 números de porta da URL da api iniciada:
https://localhost:7258/api/clientes-
Caso os 4 números após o : sejam "7258", como a url acima, pule para o passo 18
-
Caso contrário, copie esses 4 números e substitua a porta da URL na primeira linha do arquivo "\Vendinha-Samu\Vendinha-Samu.Frontend\src\services\general.js" pela porta copiada.
-
Se estiver tudo certo, a API deve estar rodando agora.. Perfeito
-
Volte para o explorador de arquivos, no diretório root (Vendinha-Fullstack-Interfocus), abra outro terminal e siga os comandos:
cd .\Vendinha-Samu.Frontend\
npm i vite
npm run dev- Provavelmente as imagens de perfil não deverão carregar, depende apenas do seu navegador, pra resolver copie e cole o link abaixo noutra guia, aceite os acessos, volte para a guia da Vendinha e recarregue a página:
https://127.0.0.1:7258/profile_pics/profile_placeholder.png- Se estiver tudo certo, tanto o banco, quanto a API Backend e o Frontend devem estar rodando perfeitamente agora, pronto pra gerenciar dívidas de clientes no seu navegador 🤠
- Sinta-se livre para importar a Collection do Postman, disponível em /Vendinha-Samu.postman_collection.json para testar os endpoints
Justificativa de uso das Bibliotecas/Pacotes/Etc...
- CPF.CNPJ
- Usei ela no dotnet pra validar o cpf muito facilmente, documentação brasileira, criei um novo DataValidation dentro do GeneralServieces using a lib, mole demais:
using CpfCnpjLibrary;
Cpf.Validar("08597471077"); // True-
- É um ORM, serve pra mapear objetos C# em entidades (tabelas) Postgres
- Usamos ele pois a muitos anos atrás o EF, entity-framework não fazia migrações de bancos de dados Postgres.. Então usamos o NHibernate
- Possibilita fazer consultas, inserções, deleções, updates e mais sem precisar escrever DQL, DML, DDL no C#
-
- Permite estabelecer conexões com bancos de dados Postgres no dotnet
-
- Biblioteca utilizada para o desenvolvimento do Frontend, possibilita a divisão dos arquivos em componentes e fornece hooks como o useState, useEffect, useRegular para gerenciamento de estado mais facilmente. Modular e reutilizável.
-
- Biblioteca do React usada no lugar do react-router-dom para definição simplificada das rotas.
