Interface de pedidos serverless para restaurante fast-food em React.js.
Projeto realizado durante o bootcamp da Laboratória.
Acesso da cozinha: cozinha@mail.com
Acesso do salão: salao@mail.com
Senha de ambos: 123456
- 1. Resumo do projeto
- 2. Critérios mínimos de aceitação do projeto
- 3. Interface
- 4. Considerações gerais
Um pequeno restaurante de hambúrgueres, que está crescendo, 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.
Estas são as informações que temos 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ã:
Item 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:
Item 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 atendente deve poder escolher que produtos adicionar e a interface deve mostrar o resumo do pedido com o custo total.
O Product Owner nos apresentou este backlog que é o resultado do seu trabalho com o cliente até hoje.
Eu como atendente quero poder anotar o pedido, saber o valor de cada produto e poder enviar o pedido para a cozinha para ser preparado.
- Anotar o nome e mesa.
- Filtrar menu para café da manhã e almoço/jantar.
- 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 e se adequar a um tablet.
O acordado abaixo deve acontecer para dizer que a história está terminada:
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo.
Eu como chefe de cozinha quero ver os pedidos dos clientes em ordem, poder marcar que estão prontos e poder notificar os atendentes que o pedido está pronto para ser entregue ao cliente.
- Ver os pedidos à 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.
- Ver histórico dos pedidos.
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo.
Eu como atendente quero ver os pedidos que estão prontos para entregá-los rapidamente aos clientes.
- Ver a lista de pedidos prontos para servir.
- Marque os pedidos que foram entregues.
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo.
- Os dados devem ser mantidos intactos, mesmo depois que um pedido terminado. Tudo isso para poder ter estatísticas no futuro.
[História de usuário 4 (Hacker Edition)] Usuário deve ter seu perfil (login/senha) para acessar o sistema.
Eu como funcionário do restaurante quero entrar na plataforma e ver apenas a tela importante para o meu trabalho.
O que deve acontecer para satisfazer as necessidades do usuário?
- Criar login e senha.
- Criar tipo de usuário (cozinha / salão).
- Entrar na tela correta para cada usuário.
O acordado abaixo deve acontecer para dizer que a história está terminada:
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo.
- Interface foi pensada específicamente para rodar em tablets.
- Aplicativo Web responsivo.
- O aplicativo é um Single Page App.
- Segue as recomendações de PWAs.
Ferramentas e bibliotecas:
- JavaScript (ES6 +)
- React.js (Hooks)
- Aphrodite
- Firebase
- React Router Dom
- React Notifications Component
- Animate.css
- Font Awesome
- Prop Types
- Eslint
- Prettier
- Trello
