Quinto projeto realizado pelo bootcamp Laboratória, que consiste em uma interface de usuário desenvolvida com React, com o objetivo de fornecer uma solução completa para gerenciamento do fictício restaurante Burger Script, um fast food 24hrs.
Projeto desenvolvido em parceria com @patriciadania.
A interface visa melhorar a eficiência operacional e facilitar a administração do restaurante Burger Script, oferecendo uma plataforma com funcionalidades que atendem as necessidades de cada área do negócio.
Para que ocorra o recebimento e processamento dos dados enviados pelo cliente, a interface se integra com um mock de API.
A interface fornece recursos com base nas permissões atribuídas a cada usuário. Após o processo de login, o sistema verifica o cargo do usuário e redireciona automaticamente para as páginas pertinentes ao cargo. Abaixo estão listados os principais recursos disponíveis em cada área:
-
Registro de Pedidos: Usuários com a roleatendimentotêm acesso à funcionalidade de registro de pedidos. A interface exibe dois menus distintos: Café da Manhã e Menu Principal, contendo os respectivos produtos disponíveis. O atendente pode selecionar itens, adicionar ou remover produtos da comanda, bem como, pode visualizar um resumo completo do pedido, incluindo o cálculo do custo total. -
Gerenciamento de Pedidos: Os atendentes têm acesso a uma visualização dos pedidos que foram enviados para a cozinha e aguardam a entrega. Eles podem marcar os pedidos como "entregues" após realizarem a entrega física ao cliente, removendo-os da lista de pedidos pendentes. Além disso, os atendentes também têm a capacidade de visualizar os pedidos que já foram entregues.
-
Preparação de Pedidos: Usuários com a rolecozinhatêm acesso a uma seção específica da interface onde podem visualizar os pedidos recebidos dos atendentes. Essa área permite que os usuários da cozinha saibam quais pedidos devem ser preparados. Ao concluir o processo de preparação de um pedido, o usuário da cozinha pode alterar o status do pedido para "pronto para servir". -
Pedidos Prontos para Servir: Os pedidos que possuem este status são automaticamente enviados de volta ao setor de atendimento. Isso permite que os atendentes sejam notificados de que os pedidos estão prontos para serem entregues aos clientes.
-
Gerenciamento de Colaboradores: Os usuários com permissões administrativas têm acesso a recursos de gerenciamento de colaboradores. Isso inclui listar, adicionar, editar e excluir informações dos colaboradores, como nome, cargo, informações de contato, entre outros. -
Gerenciamento de Produtos: Estes usuários têm acesso a recursos de gerenciamento de produtos. Isso permite adicionar, editar e excluir produtos disponíveis no menu do restaurante, fornecendo controle completo sobre as opções oferecidas.
Não há uma aba específica para cadastro de novos usuários. Isso ocorre porque a responsabilidade de registrar novos usuários é atribuída exclusivamente ao administrador do sistema.
Caso você queira testar a aplicação, pode fazer login utilizando alguma das credenciais abaixo:
email: [email protected] | senha: 1234567
email: [email protected] | senha: 1234567
email: [email protected] | senha: 1234567
Destaco que essas são contas de teste e têm permissões restritas, com base nos perfis de usuário predefinidos.
O projeto foi desenvolvido utilizando várias tecnologias modernas e amplamente adotadas no desenvolvimento de aplicações web. Algumas das principais tecnologias utilizadas incluem:
O projeto foi construído usando o framework JavaScript React, que oferece uma abordagem eficiente e reativa para o desenvolvimento de interfaces de usuário interativas e dinâmicas.
A ferramenta Insomnia foi utilizada para testar e simular as requisições da API. Com o Insomnia, foi possível enviar requisições HTTP personalizadas e visualizar as respostas recebidas, garantindo a correta comunicação entre a interface e o mock da API.
Além dessas tecnologias mencionadas, também foram utilizadas outras ferramentas e bibliotecas, como gerenciadores de pacotes, sistemas de controle de versão e bibliotecas auxiliares para a construção do projeto. A combinação dessas tecnologias e ferramentas permitiu o desenvolvimento de uma interface de usuário moderna, responsiva e funcional para o gerenciamento eficiente de pedidos em um ambiente de restaurante.
Este projeto utiliza um mock de API para o recebimento e processamento dos dados enviados pela interface do cliente.
É importante ressaltar que o mock de API não armazena os dados permanentemente, pois não possui um banco de dados real. Isso significa que, ao utilizar a interface, os dados enviados são temporários e não persistem entre sessões.
Além disso, o mock de API simula um tempo de expiração do token de autenticação. Quando o token expira, o processamento dos dados enviados é descartado, pois não há mecanismo de autenticação real para renovar o token.
Foram implementados testes unitários para garantir a qualidade e a estabilidade da aplicação, onde foi possível verificar o comportamento individual de cada componente ou função em isolamento, permitindo a identificação de possíveis erros ou falhas. Para realizar os testes unitários, foi utilizada uma combinação de ferramentas e bibliotecas, como:
Jest: utilizado como base para a criação e execução dos testes unitários. Ele fornece uma estrutura eficiente para escrever testes de forma organizada e automatizada.
A biblioteca React Testing Library foi adotada para testar os componentes React. Ela oferece uma abordagem centrada no usuário para testes, simulando interações e verificando o comportamento esperado dos componentes.
Os testes unitários abrangem diversas áreas da aplicação, desde a validação de dados e lógica de negócios até a interação correta com o `mock da API e a renderização adequada dos componentes.
Os testes de usabilidade foram conduzidos com uma abordagem centrada no usuário, permitindo que os usuários interajam com a interface e fornecessem comentários, sugestões e observações sobre a usabilidade, a navegabilidade e a eficiência da aplicação. Esses testes proporcionam insights valiosos sobre os pontos fortes e as oportunidades de melhoria da interface.
Essa abordagem ajuda a garantir que a interface seja intuitiva, fácil de usar e forneça uma experiência satisfatória aos usuários finais.