Para acessar a página clique aqui.
Login Cozinha: cozinha@cozinha.com
Senha: 123456
Login Salão: salao@salao.com
Senha:123456- 1. Introdução
- 2. Definições do projeto
- 3. Desenvolvimento
- 4. Estrutura e funcionalidades
- 5. Considerações técnicas
- 6. Implementações futuras
- 7. Autoria
- 8. Agradecimentos
O projeto Burguer Queen tem como objetivo atender uma hamburgueria de porte pequeno que necessita de uma interface que possibilite realizar pedidos utilizando um tablet, e enviá-los para a cozinha para que sejam preparados de forma ordenada e eficiente.
Informações do cliente:
Somos Burger Queen, um fast food 24hrs.
A nossa proposta de serviço 24 horas foi muito bem recebida e, para continuar a crescer, precisamos de um sistema que nos ajude a receber pedidos de nossos clientes.
Nós temos 2 menus. Um muito simples para o café da manhã:
Ítem Preço R$ Café americano 5 Café com leite 7 Misto Quente 10 Suco de fruta natural 7 E outro menu para o resto do dia:
Ítem Preço Hambúrgueres R$ Hambúrguer simples 10 Hambúrguer duplo 15 Acompanhamentos R$ Batata frita 5 Anéis de cebola 5 Bebidas R$ Água 500ml 5 Água 750ml 7 Refrigerante 500ml 7 Refrigerante 750ml 10 Importante: Os clientes podem escolher entre hambúrgueres de carne bovina, frango ou vegetariano. Além disso, por um adicional de R$ 1,00 , eles podem adicionar queijo ou ovo.
Nossos clientes são bastante indecisos, por isso é muito comum que eles mudem o seu pedido várias vezes antes de finalizar.
A interface deve mostrar os dois menus (café da manhã e restante do dia), cada um com todos os seus produtos. O usuário deve poder escolher que produtos adicionar e a interface deve mostrar o resumo do pedido com o custo total.
Funcionários de uma hamburgueria que fazem atendimento no salão anotando pedidos e que trabalham na cozinha execultando.
Criar interfaces visuais para facilitar o sistema de pedidos de uma hamburgueria disponíveis para acesso de acordo com o login do usuário.
O usuário que trabalha no salão pode criar pedidos, os enviar para a cozinha e verificar os pedidos que estão prontos para entrega.
Os funcionários da cozinha podem verificar os pedidos em ordem cronológica e enviá-los de volta para o salão quando estiverem finalizados.
Com objetivo de manter um ambiente agradável para o usuário, foi decidido utilizar uma paleta de cores neutras.
O artigo Dark UIs: the dos and don’ts. diz que:
A fadiga ocular digital é uma condição comum que afeta milhões de pessoas diariamente. Causando, desde o uso excessivo do computador até a exposição regular à luz forte, pode causar dores de cabeça, dores no pescoço, visão turva e queimação / ardência nos olhos.
A fim minimizar a fadiga ocular do usuário que trabalha no salão, onde passará horas anotando pedidos, foram projetadas telas com tema escuro.
Segundo Bauer, D., & Cavonius, C., R. (1980), em um ensaio proposto foi constatado que os textos escuros no fundo claro possui maior legibilidade, os participantes do estudo eram 26% mais precisos ao ler um texto nessas condições.
Para facilitar a compreensão dos pedidos que serão lidos pelo usuário que trabalha na cozinha onde precisará olhar para tela o suficiente para ler o pedido, as telas foram projetadas com tema claro por oferecer melhor legibilidade.
Um protótipo de alta fidelidade das telas foi projetado preferencialmente no formato para tablet, mas com a possibilidade de funcionamento em outros formatos, utilizando a plataforma figma.
Tela de login
Tela de registro
Tela do menu de jantar
Tela do menu jantar com opções de hambúrgueres
Tela do menu de café da manhã
Tela dos pedidos
Modal de verificação
- Poder realizar cadastro com e-mail, senha e função.
- Poder realizar login com e-mail e senha.
- Redirecionar para a tela correta.
- Digitar o nome do cliente e mesa.
- Filtrar menu para café da manhã e almoço/jantar.
- Adicionar item ao pedido.
- Excluir item do pedido.
- Mostrar resumo do pedido com todos os itens e o total.
- Enviar para a cozinha (isso deve salvar o pedido).
- Visualizar pedidos pendentes para produção.
- Marcar pedido como pronto para entrega.
- Ver histórico dos pedidos.
- Visualizar pedidos pendentes para entrega.
- Marcar pedido como entregue ao cliente.
- Funciona bem em tablets.
- Fácil utilização em telas sensíveis ao toque.
- Status atual do pedido sempre visível enquanto fazemos um pedido.
A aplicação possui 5 telas: login, registro, pedidos, histórico e cozinha onde:
- O usuário pode logar com email senha.
- Também pode se registrar como um novo usuário informando o posto de trabalho.
Como usuário logado o funcionário que trabalha no salão pode:
- Criar pedidos novos.
- Visualizar os pedidos finalizados pela cozinha.
- Visualizar o histórico de pedidos e fazer uma busca por data e status do pedido.
- Finalizar o pedido depois da entrega.
Tela de pedido
Tela responsiva Como usuário logado o funcionário que trabalha na cozinha pode:
- Visualizar os novos pedidos.
- Finalizar o preparo do pedido após a execução.
- Visualizar o histórico de pedidos e fazer uma busca por data e status do pedido.
O resumo do pedido possuí as seguintes informações:
- Nome do cliente
- Número da mesa
- Data e hora da criação do pedido
- Tempo de execução do pedido (Quando o pedido ainda não foi finalizado, esse valor é estatístico levando em consideração o histórico de pedidos anteriores)
- Nome do garçom
- Itens do pedido
Os pedidos são divididos em três categorias organizadas por cores:
- Vermelha: Pedido sendo preparado
- Laranja: Pedido pronto, aguardando entrega
- Verde: Pedido finalizado
Histórico de pedidos
Para a construção do site foi utilizado o software Visual Studio Code, utilizando React, NPM, Yarn e Git.
Sua estilização foi feita em CSS3, suas telas são responsivas mas foram programadas preferencialmente para utilização em tablet, o flexbox foi utilizando para o posicionamento dos elementos.
A manipulação e persistência dos dados foi feita com Firebase através de um banco de dados não relacional, em tempo real, implementando operações CRUD (Criação, Leitura, Atualização e Remoção) de dados.
Foram utilizadas as bibliotecas react-flatpickr e react-toastify para o filtro por data e alertas.
Firebase (Hosting, Auth, Database e Firestore).
Colaboração e armazenamento com GitHub.
Organização com Trello.
Interface hospedada usando Firebase Hosting.
- Clone o projeto na sua máquina executando o seguinte comando no seu terminal:
git clone (link-do-repositório)- Instale as dependências do projeto com o comando:
yarn install- Rode o projeto na sua máquina com:
npm start- E visualize o projeto no seu navegador com o link:
http://localhost:3000Futuramente serão implementadas funcionalidades para melhoria da experiência do usuário:
- Estatísticas de acordo com dia da semana e horário para calcular tempo médio do pedido.
- Estatísticas de funcionários.
- Perfil dos funcionários.
- Alteração de cadastro do funcionário.
- Número do pedido.
Este projeto foi feito por Gabriela Piovezan e Mariana Barros com base no projeto da Laboratoria.
- Laboratoria.
- Ícones e vetores: Freepik, Pixel Perfect e Those Icons.