Link para aplicação rodando na nuvem Netlify: https://blackbook-pi.netlify.app/
A aplicação desenvolvida durante o Projeto Interdisciplinar segui a seguinte estratégia:
- Criação do script SQL a partir do modelo lógico
- Construção de uma API REST com PHP
- Construção do frontend com o framework javascript Vue.js
- Conexão do backend e frontend através de protocolo HTTP coma biblioteca javascript axios.js
As motivações para a separação de backend e frontend foram:
- Performance
- Separação do client-side e server-side
- Reutilização do backend tanto para aplicação web quanto para aplicação mobile
- Melhor manutenção
- Melhor experiência do usuário
A Arquitetura final segue o diagrama abaixo
O frontend foi desenvolvido como uma Single Page Application(SPA), uma aplicação web que roda em uma única página. Possui sistemas de rotas e clientes HTTP para fazer requisições a recursos externos (APIs); Os templates da aplicação ficam armazenados do lado do cliente e é responsável por apresentar os dados recebidos do backend
Para o desenvolvimento do frontend foi utilizado o framework de javascript para construção de SPAs, Vue js, associado ao Bootstrap para estilização com CSS, a um template de dashboard disponibilizado pelo Creative Tim, e a biblioteca de javascript Express para comunicação com backend.
A aplicação está disponível no link https://blackbook-pi.netlify.app/
Ao acessar pela primeira vez você será direcionado para tela de login
Para testar a aplicação disponibilizamos a conta abaixo:
E-mail: admin@admin.com
Senha: admin123
Mas você também criar uma conta pessoal, clicando ou em Registrar no topo da página, ou em Cadastre-se abaixo do box de login. Ao clicar em uma das opções, você será redirecionado para a janela abaixo
Basta preencher as informações do formulário, se todo processo estiver correto, após clicar em Criar Conta você receberá uma mensagem de sucesso e será redirecionado para tela de login após 3 segundos. Então, basta fazer o login com email e senha cadastrados. Em caso de erro no processo de cadastro ou de login, a aplicação irá mostrar uma mensagem de erro.
Com o login bem sucedido, o backend retorna as informações do usuário logado e armazena no local storage do navegador, permitindo a navegação pela aplicação e mantendo os dados do usuário. Enquanto os dados ficarem armazenados no local storage o usuário estará logado na aplicação, por isso caso deseje sair da aplicação, isso deve ser feito manualmente através do botão sair, que irá apagar os dados do local storage.
Ao logar o usuário é direcionado para tela inicial da aplicação que mostra as boas vindas ao usuário logado, com alguns dados importantes e um card. Opções de alteração e exclusão do perfil, um menu lateral com as funcionalidades do sistema e um menu no canto superior direito com a opção de sair.
Se você está logado com a conta de administrador disponibilizada nesse tutorial, por favor não tente realizar a exclusão do perfil. Para testar essa funcionalidade crie um novo usuário
Abaixo a tela de edição de perfil. As informações só serão salvas após clicar no botão Salvar
O sistema de estoque elaborado possui uma sequência lógica de inserção de dados. Primeiramente deve-se cadastrar as categorias dos itens e os fornecedores dos itens, logo depois devemos cadastrar o item em estoque. Por fim podemos inserir a entrada de um item já cadastrado em estoque. O cadastro de saídas de itens só ocorrem quando há uma quantidade maior do que 0 em estoque. Para deletar os dados deve-se seguir a ordem reversa da inserção, ou seja, removendo os itens, em seguida, fornecedores e categorias. As opções de exclusão só estão disponíveis com fim acadêmico, e desencorajamos a exclusão dos dados, em especial de entrada e saída, pois além de afetarem o controle do estoque em si, pode afetar o funcionamento do sistema. Em caso de erros, existe a opção de alteração nos registros.
Tela de categorias. Aqui são cadastradas apenas as categorias dos itens do estoque.
Tela de cadastro de fornecedores
Tela de cadastro de itens no estoque
Tela de cadastro de entradas dos itens no estoque
Tela de cadastro de entradas - Aqui os itens e fornecedores cadastrados anteriormente sao carregados em uma lista para seleção
Tela de cadastro de saidas
Tela de listagem de usuários cadastrados no sistema - Propósito acadêmico.
