/jason-brueger

Uma interface de sistema de pedidos desenvolvida para um pequeno restaurante com a temática de filme de terror. Quinto projeto que está sendo desenvolvido junto com @Keilaoliveira0112 durante o Bootcamp da @Laboratoria

Primary LanguageJavaScript

Jason Brueger


icon-Git icon-styled-components icon-JavaScript icon-NodeJs icon-React icon-Jest icon-testing-library icon-insomnia icon-Vscode icon-Figma

Para ter acesso será necessário realizar o login em um dos email e senha disponibilizados abaixo:

Cargo Email Senha
Admin admin@teste.com 123456
Atendente atendente@teste.com 123456
Cozinha cozinha@teste.com 123456

Índice

1. Resumo do Projeto

Um pequeno restaurante de hambúrgueres com a temática de filme de terror, que está crescendo e necessita 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: interface (cliente) e API (servidor). Nosso cliente nos pediu para desenvolver uma interface que se integre com a API que outra equipe de desenvolvedoras está trabalhando simultaneamente.

As informações do cliente são as seguintes:

  • Temos 2 tipos de cardápios: um para o café da manhã e outro para o restante do dia.
  • Os clientes podem ser indecisos e mudam o pedido várias vezes antes de finalizá-lo.
  • A interface deve 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.

2. Histórias de Usuários

[Historia de usuario 1] Garçom/Garçonete deve poder entrar no sistema, caso o admin já lhe tenha dado as credenciais

Eu, como garçom/garçonete quero entrar no sistema de pedidos.

Critérios de aceitação

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.

Tela de Login


[História de usuário 2] Garçom/Garçonete deve ser capaz de anotar o pedido do cliente

Eu como garçom/garçonete quero poder anotar o pedido de um cliente para não depender da minha memória, saber quanto cobrar e poder enviar os pedidos para a cozinha para serem preparados em ordem.

Critérios de aceitação

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.

Tela de Novo Pedido - Café da Manhã Tela de Novo Pedido - Resto do Dia


[História de usuário 3] Chefe de cozinha deve ver os pedidos

Eu como chefe de cozinha quero ver os pedidos dos clientes em ordem, poder marcar que estão prontos e poder notificar os garçons/garçonetes que o pedido está pronto para ser entregue ao cliente.

Critérios de aceitação

  • 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.

Tela de Pedidos Pendentes Tela de Pedidos Concluídos


[Historia de usuário 4] Garçom/Garçonete deve ver os pedidos prontos para servir

Eu como garçom/garçonete quero ver os pedidos que estão prontos para entregá-los rapidamente aos clientes.

Critérios de aceitação

  • Ver a lista de pedidos prontos para servir.
  • Marcar os pedidos que foram entregues.

Tela de Pedidos Prontos


[Historia de usuário 5] Administrador(a) de loja deve administrar seus funcionários

Eu como administrador(a) de loja quero gerenciar os usuários da plataforma para manter atualizado as informações de meus funcionários.

Critérios de aceitação

  • Ver lista de funcionários.
  • Adicionar funcionários.
  • Excluir funcionários.
  • Atualizar dados dos funcionários.

Tela de Funcionários - Lista de Funcionários Tela de Funcionários - Adicionar Novo Funcionário


[História de usuário 6] Administrador(a) de loja deve administrar os produtos

Eu como administrador(a) de loja quero gerenciar os produtos para manter atualizado o menu.

Critérios de aceitação

  • Ver lista de produtos.
  • Adicionar produtos.
  • Excluir produtos.
  • Atualizar dados de produtos.

Tela de Produtos - Lista de Produtos Tela de Produtos - Adicionar Novo Produto


3. Funcionalidades

Login:

Para ter acesso será necessário realizar o login em um dos email e senha disponibilizados abaixo:

Cargo Email Senha
Admin admin@teste.com 123456
Atendente atendente@teste.com 123456
Cozinha cozinha@teste.com 123456

A interface oferece recursos com base nas permissões destinadas a cada usuário. Após a validação de login, o usuário é redirecionado para as páginas pertinentes ao cargo.
  • Admin

    • Funcionários: Os usuários com acesso á essa funcionalidade tem a permissão de gerenciar colaboradores. Além de lista-los, adicionar, remover e atualizar o cadastro dos mesmos.

    • Produtos: Estes também tem acesso ao gereciamento de produtos para adicionar ao cardápio, excluir e tambem alterá-los conforme suas necessidades.

  • Atendente

    • Novos Pedidos: Usuário tem acesso a essa funcionalidade de registro dos pedidos. O atendente pode selecionar itens, a mesa, adicionar o nome do cliente e pode removê-los. Dinamicamente o resumo do pedido é preenchido, incluindo o cálculo de custo total da comanda.

    • Pedidos Prontos: Os atendentes podem visualizar todos os pedidos enviados para a cozinha e estão aguardando a entrega. Assim que prontos, podem marcá-los como entregues.

  • Cozinha

    • Pedidos Pendentes: O chef de cozinha tem acesso a interface destinada aos cozinheiros que recebem os pedidos feitos pelos atendentes. Esses são enviados por ordenação para serem preparados. Ao finalizar o pedido o chef pode alterar o status para pedidos prontos.

    • Pedidos Concluídos: Os pedidos concluídos são automaticamente enviados para os atendentes para serem entregues. Essa notificação há o cálculo de quanto tempo foi gasto para a preparação do pedido até a ser finalizado.

4. Considerações Técnicas

Para o desenvolvimento deste projeto, utilizamos ferramentas e tecnologias adotadas para o desenvolvimento de aplicações web.

O mesmo foi totalmente construído usando o framework REACT, que nos possibilita criar interfaces mais dinâmicas e interativas.

Outra ferramenta utilizada foi Insomnia que nos auxilia para testar e simular as requisições da API. Com o Insomnia foi possível enviar requisições HTTP e visualizar as resposta recebidas, garantindo assim a comunicação entre interface e API.

Nesse projeto, foi disponibilizado o mock da api para podermos trabalhar em cima dos dados fornecidos. Vale ressaltar que cada vez que um usuário loga, haverá um limite de tempo para expiração do token de autenticação.

Para garantir a qualidade e o bom funcionamento da aplicação, ferramentas como Jest e a biblioteca Testing Library foram utilizadas para realizar testes unitários para verificar o comportamento dos componente, das telas e da interação com o mock da API. Permitindo assim a verificação de possíveis erros ou falhas.

Além dessas ferramentas citadas, também utilizamos a biblioteca Styled-components que nos permite escrever estilos CSS para a aplicação em arquivos Javascript.

Essa combinação de tecnologias nos permitiu a criação de uma interface moderna, funcional, responsiva e eficiente para o ambiente proposto.

5. Desenvolvedoras



Github Adriana Github Keila
Linkedin Adriana Linkedin Keila
Gmail Adriana Gmail Keila