Skip to content

Laboratoria/SAP004-burger-queen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 

Repository files navigation

Burger Queen

Índice


1. Preâmbulo

React, Angular e Vue são alguns dos frameworks e bibliotecas de JavaScript mais usados na área de desenvolvimento ao redor do mundo e existe uma razão para isso. No contexto do navegador, manter a interface sincronizada com o estado é difícil.

Ao eleger um framework ou biblioteca para nossa interface, nos apoiamos em uma série de convenções e implementações testadas e documentadas para resolver um problema comum a toda interface web. Isto nos permite concentrar melhor (dedicar mais tempo) nas características específicas de nossa aplicação.

Quando escolhemos uma destas tecnologias não só importamos um pedaço de código para reusar (o qual já é um grande valor por si só), mas também adotamos uma arquitetura, uma série de princípios de design, um paradigma, algumas abstrações, um vocabulário, uma comunidade, etc...

Como desenvolvedora Front-end, estes kits de desenvolvimento podem resultar em uma grande ajuda para implementar rapidamente features dos projetos em que você for trabalhar.

2. Resumo do projeto

Desta vez temos um projeto 100% por demanda. Você sempre pode (e deve) fazer sugestões de melhora e mudança, mas muitas vezes trabalhará em um projeto em que primeiro deve se assegurar de cumprir os requisitos.

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.

burger-queen

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.

out

3. Objetivos de aprendizagem

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.

4. Considerações gerais

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.

Você deve definir a estrutura das pastas e arquivos que considera necessários. Você pode estruturá-los de acordo com as convenções do React.

Para iniciar este projeto você terá que fazer um fork e clone deste repositório.

5. Critérios mínimos de aceitação do projeto

Definição do produto

O Product Owner nos apresentou este backlog que é o resultado do seu trabalho com o cliente até hoje.


[História de usuário 1] 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.

Critérios de aceitação

O que deve acontecer para satisfazer as necessidades do usuário?

  • Criar login e senha.
  • Registar tipo de usuário (cozinha / salão), login e senha.
  • Entrar na tela correta para cada usuário.
Definição de pronto

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.

[História de usuário 2] Garçom/Garçonete deve poder anotar o seu pedido

Eu como garçom/garçonete quero poder anotar o meu pedido saber o valor de cada produto e poder enviar o pedido para a cozinha para ser preparado.

Critérios de aceitação

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.
Definição de pronto

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.

[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 à 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.
Definição de pronto
  • Você fez testes de usabilidade e incorporou o feedback do usuário.
  • Você deu deploy de seu aplicativo.

[História 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.
  • Marque os pedidos que foram entregues.
Definição de pronto
  • 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.

6. Hacker Edition

As seções chamadas Hacker Edition são opcionais. Se você terminou tudo e ainda sobrou tempo, faça essa parte. Assim você poderá aprofundar e exercitar mais sobre os objetivos de aprendizagem do projeto.

  • Faça testes que cubram 100% de statements, functions, lines e branches.

7. Dicas e leituras complementares

Primeros passos

  • Crie um projeto usando create-react-app

  • Crie um projeto no Firebase

  • Converta o menu descrito pelo cliente em uma coleção no Firebase.


Outros recursos

Framework / biblioteca

React Hooks

Ferramentas

Checklist

README.md

  • Documentação do processo de design.
  • Inclui informações para desenvolvedores (dependências, instalação, uso, testes...)

HU

HU 1: Criar perfil

  • Poder realizar cadastro com e-mail, senha e função.
  • Poder realizar login com e-mail e senha.
  • Redirecionar para a tela correta.

HU 2: Anotar pedidos

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

HU 3: Ver pedidos na cozinha

  • Visualizar pedidos pendentes para produção.
  • Marcar pedido como pronto para entrega.
  • Ver histórico dos pedidos.

HU 4: Entrega de pedidos

  • Visualizar pedidos pendentes para entrega.
  • Marcar pedido como entregue ao cliente.

UX

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

Hacker Edition

Testes

  • 100% de cobertura de statements.
  • 100% de cobertura de functions.
  • 100% de cobertura de lines.
  • 100% de cobertura de branches.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published