- 1. Resumo do projeto
- 2. Objetivos de aprendizagem
- 3. Considerações gerais
- 4. Critérios de aceitação mínimos do projeto
- 5. Identidade Visual
- 6. Interface
- 6. Rodar Aplicação
Um pequeno restaurante de hambúrgueres, que está crescendo, 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.
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ã:
Í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.
O objetivo principal é aprender a construir uma interface web usando React. Esse framework front-end ataca o seguinte problema: como manter a interface e estado sincronizados. Portanto, esta experiência espera familiarizá-la com o conceito de estado da tela, e como cada mudança no estado vai refletir na interface (por exemplo, toda vez que adicionamos um produto para um pedido, a interface deve atualizar a lista de pedidos e o total).
Finalmente, a interface deve ser pensada específicamente para rodar em tablets.
Este projeto é individual.
Trabalhe integralmente uma história de usuário antes de passar para a próxima. Cumpra todas as histórias possíveis dentro do tempo especificado.
A lógica do projeto deve ser totalmente implementada em JavaScript (ES6 +). Neste projeto você deve usar React.
O aplicativo deve ser um Single Page App. Os pedidos serão enviados por meio de um tablet,mas não queremos um aplicativo nativo, mas sim um aplicativo Web que seja responsivo.
Precisamos pensar bem sobre o UX para aqueles que vão receber os pedidos, o tamanho e a aparência dos botões, a visibilidade do estado atual do pedido, etc.
O aplicativo deve usar scripts npm-scripts e ter start, build e deploy, que são responsáveis por iniciar, empacotar e implantar o aplicativo, respectivamente.
Eu como cliente quero poder anotar o meu pedido saber o valor de cada produto e poder enviar o pedido para a cozinha para ser preparado.
O que deve acontecer para satisfazer as necessidades do usuário?
- Anotar o nome e mesa.
- 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.
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.
- 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.
Eu como garçom/garçonete 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.
Para este projeto foi criado um logotipo e uma paleta de cores.
Interface criada para visualização em tablet.
Você encontra o projeto nesse link.
Para rodar essa aplicação, você precisará instalar npm.
Uma vez com o npm instalado e o repositório clonado, acesse a página do repositório e digite o seguinte comando para instalar as dependências desse projeto:
npm install
Para rodar a aplicação:
npm start