Quinto projeto realizado pelo bootcamp @Laboratoria, o projeto Burger Queen envolve o desenvolvimento de uma interface de pedidos para um restaurante de hambúrgueres, que deve integrar-se com uma API . O objetivo principal é aprender a construir uma interface web utilizando o React. Projeto desenvolvido em parceria com @ThainaraTabile.
- 1. Definição de Produto
- 2. Histórias de Usuários
- 3. Funcionalidades
- 4. Considerações Técnicas
- 5. Mock da API
- 6. Testes Unitários
- 7. Testes de Usabilidade e Feedback dos Usuários
O projeto Burger Script é um pequeno restaurante de hambúrgueres que está crescendo e necessita de uma interface em que se possa realizar pedidos utilizando um tablet, e enviá-los para a cozinha para que sejam preparados de forma ordenada e eficiente.
Este projeto tem duas áreas: a interface (cliente) e a API (servidor). A interface está sendo desenvolvida utilizando o framework React.
As informações do cliente são as seguintes:
- Temos 2 menus: um para o café da manhã e outro para o restante do dia.
- Os clientes podem ser indecisos e mudar o pedido várias vezes antes de finalizá-lo.
- A interface deve mostrar os dois menus, permitir a seleção de produtos e mostrar o resumo do pedido com o custo total.
- O objetivo principal do projeto é aprender a construir uma interface web usando o framework React. Isso envolve compreender o conceito de estado da tela e como cada mudança no estado reflete na interface.
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.
Tela : Login.
Caso você queira testar a aplicação, pode fazer login utilizando alguma das credenciais abaixo.
Destaco que essas são contas de teste e têm permissões restritas, com base nos perfis de usuário predefinidos.
Para entrar na aplicação, segue abaixo o usuário e a senha, de acordo com suas respectivas roles.
| Setor | Senha | |
|---|---|---|
| Administração | adm@bs.com | 1234567 |
| Cozinha | cozinha@bs.com | 1234567 |
| Atendimento | atendimento@bs.com | 1234567 |
De acordo com os requisitos do projeto e cenário escolhido para o desenvolvimento da aplicação, na imagem abaixo se encontra as histórias de usuários.
Tela : Histórias de usuários.
O que deve acontecer para satisfazer as necessidades do usuário?
- Acessar uma tela de login.
- Inserir email e senha.
- Receber mensagens de erros compreensíveis, conforme o erro e as informações inseridas.
- Entrar no sistema de pedidos caso as credenciais forem corretas.
O que deve acontecer para satisfazer as necessidades do usuário?
- Anotar o nome do cliente.
- Adicionar produtos aos pedidos.
- Excluir produtos.
- Ver resumo e o total da compra.
- Enviar o pedido para a cozinha (guardar em algum banco de dados).
- Funcionar bem em um tablet.
O que deve acontecer para satisfazer as necessidades do usuário?
-
Ver os pedidos ordenados à medida em que são feitos.
-
Marcar os pedidos que foram preparados e estão prontos para serem servidos.
-
Ver o tempo que levou para preparar o pedido desde que chegou, até ser marcado como concluído.
O que deve acontecer para satisfazer as necessidades do usuário?
-
Ver a lista de pedidos prontos para servir.
-
Marcar os pedidos que foram entregues.
O que deve acontecer para satisfazer as necessidades do usuário?
- Ver lista de funcionários.
- Adicionar funcionários.
- Excluir funcionários.
- Atualizar dados dos funcionários.
O que deve acontecer para satisfazer as necessidades do usuário?
- Ver lista de produtos.
- Adicionar produtos.
- Excluir produtos.
- Atualizar dados de produtos.
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.
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.