- 1. Preâmbulo
- 2. Resumo do projeto
- 3. Objetivos de aprendizagem
- 4. Considerações gerais
- 5. Critérios de aceitação mínima do projeto
- 6. Dicas e leituras complementares
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.
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 (através de um backend que os detalhes serão dados mais adiante).
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 Sanduíche de presunto e queijo 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 Bebida gaseificada 500ml 7 Bebida gaseificada 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.
Usuário Salão: Teste1
email:teste1@gmail.com
senha:teste1
Usuário Cozinha: Teste2
email:teste2@gmail.com
senha:teste2
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). A interface deve ser projetada especificamente para rodar em tablets.
Como objetivo SECUNDÁRIO, você deve seguir as recomendações para PWAs (Progressive Web Apps), que inclui conceitos como offline. Para orientá-las sobre este tema,recomendamos que você use Lighthouse, que é uma ferramenta do Google que nos ajuda a garantir que nossos aplicativos web sigam "boas práticas".
Tópicos: react, pwa, offline-first, service-worker.
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 +), HTML e CSS e empacotada de forma automatizada. 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 e possa funcionar offline.
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.
Este projeto inclui um boilerplate com o código necessário para começar. A parte de back-end já foi resolvida. O boilerplate inclui os seguintes arquivos/pastas com configurações do Firebase(hosting, firestore e functions):
./04-burger-queen/
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
├── functions
│ ├── index.js
│ ├── package.json
└── README.md
A parte da interface não está incluída, então, 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. Portanto, os setups necessários para executá-los serão feitos por você.
Para iniciar este projeto você terá que fazer um fork e clone deste repositório.
O Product Owner nos apresentou este backlog que é o resultado do seu trabalho com o cliente até hoje
Eu como funcionário do restaurante quero entrar na plataforma e ver apenas a tela imporante 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ê deve ter recebido code review de pelo menos uma parceira.
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo e marcou sua versão (tag git).
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.
O que deve acontecer para satisfazer as necessidades do usuário?
- Anotar o nome do cliente.
- Adicionar o nome do garçom/garçonete ao pedido
- 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ê deve ter recebido code review de pelo menos uma parceira.
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo e marcou sua versão (tag git).
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.
- Você deve ter recebido code review de pelo menos uma parceira.
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo e marcou sua versão (tag git).
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.
- Você deve ter recebido code review de pelo menos uma parceira.
- Você fez testes de usabilidade e incorporou o feedback do usuário.
- Você deu deploy de seu aplicativo e marcou sua versão (tag git).
- Os dados devem ser mantidos intactos, mesmo depois que um pedido terminado. Tudo isso para poder ter estatísticas no futuro.
- Arquivo criado no Firebase
- Configuração do firebase adicionada ao projeto
- Criar tipo de usuário (cozinha / salão), cadastrando com nome, email e senha e salvando automaticamente no database
- Autenticação com email e senha pelo firebase
- Components Input e Button criados na pasta components
- Pasta pages criada com arquivo Javascript Home(tela de login), Salão e Cozinha
- Redireciona para tela correta para cada tipo de usuário
- Route direcionando para a página de cada tipo de usuário (salão/cozinha)
- Link redirecionando para tela inicial (Home)
- Import de ícone de logo de fontawesome
- Redireciona para tela correta para cada tipo de usuário
- Arquivo JSON criado para o cardápio e trazido com import na página Salao
- Página Salao exibindo botões com menu
- Components Input e Button import
- Traz o nome do usuário logado através do displayName salvo no database
- Os botões selecionados exibem na tela o item escolhido com valor e quantidade exibindo no final a soma do valor total, aparecendo junto um botão de delete para cada item caso o cliente queira excluir
- Input para colocar o nome do usuário e Button para criar o pedido depois de confirmada a escolha da compra
- Função reset para zerar a tela depois que o botão Criar pedido foi clicado
- Envia informações do pedido para uma pasta Order criada no database, informando o nome do cliente, o pedido escolhido(com nome, preço e quantidade), a hora em que o pedido foi feito, o empregado que realizou o pedido, e o status do pedido(kitchen)
- Link redirecionando para tela inicial (Home)
- Página Kitchen exibindo pedidos realizados na ordem em que foram tirados salvos no database
- Components Input e Button import
- Traz o nome do usuário logado através do displayName salvo no database
- Exibe o número do pedido, data e horário em que foi feito o pedido, nome do cliente, nome do funcionário que retirou o pedido e a lista com os itens do pedido
- Button para concluir o pedido e enviar para a lista de pedidos prontos mudando o status no database na pasta Order para hall, gravando a hora que foi concluído, o cálculo do tempo de preparo (cálculo funciona com diferença de um dia para outro - pedido feito antes da meia noite e pronto no dia seguinte calcula as horas corretas), e o número do pedido
- Criação da página List que traz a lista de pedidos prontos na ordem que foram concluídos
- Link que redireciona para a página List que exibe a lista de pedidos prontos (tanto na página Kitchen como na Hall - antiga Salao)
- Button redirecionando para tela inicial (Home), fazendo logout (tanto na página Kitchen quanto Hall)
- Criação da tela Create separando a criação do usuário da página Home que faz apenas o login
- CSS responsivo para tela de notebook e tablet
- Página List exibindo pedidos concluídos da cozinha na ordem em que foram preparados
- Button import
- Traz o nome do usuário logado através do displayName salvo no database
- Exibe o número do pedido, data e horário em que foi feito o pedido, nome do cliente, tempo de preparo do pedido, nome do funcionário que retirou o pedido e a lista com os itens do pedido
- Button para marcar como entregue o pedido e enviar para a lista de pedidos concluídos mudando o status no database na pasta Order para ok
- Link que redireciona para a página que o usuário utiliza (Kitchen ou Hall)
- Button redirecionando para tela inicial (Home), fazendo logout
- CSS responsivo para tela de notebook e tablet
-
O primeiro passo deste projeto deve ser converter o menu descrito pelo cliente em uma estrutura JSON para mais tarde printar na tela.
-
Faça um fork deste repositório (no GitHub).
-
Clone seu fork no seu computador:
git clone git@github.com:<tu-usuario-de-github>/<cohortid>-burger-queen.git cd <cohortid>-burger-queen
-
Crie uma branch da
masterpara começar a trabalhar. Por exemplo:git checkout -b develop
-
Crie um projeto no Firebase
-
Habilite o Firestore (começar em modo bloqueado) nas "Bases de Dados" de Firebase console.
-
Instale o utilitário de linha de comando do Firebase:
npm i -g firebase-tools
-
Adicione o ambiente de produção para fazer o deploy:
firebase use --add
-
Instale dependências de cloud functions:
# usando yarn cd functions && yarn && cd .. # alternativamente, usando npm cd functions && npm install && cd ..
-
Rode o comando:
firebase deploy -
Neste ponto, você pode começar com o front-end 😉
Nota para a utilização do create-react-app:
Se você tentar usar o create-react-app no diretório do projeto, você receberá
um erro dizendo que há arquivos que podem apresentar um conflito. Para evitar
esse problema você pode criar um novo aplicativo usando create-react-app e a
partir daí _ junte com a pasta do projeto:
# se estava na pasta do projeto, fomos para a pasta acima
cd ..
create-react-app burger-queen-tmp
cp -r burger-queen/* burger-queen-tmp/
cp -r burger-queen-tmp/.gitignore burger-queen-tmp/* burger-queen/
rm -rf burger-queen-tmp
cd burger-queen- Seu primeiro Progressive Web App - Google developers
- Progressive Web Apps - codigofacilito.com
- offlinefirst.org
- Usando Service Workers - MDN
- Como habilitar dados sem conexão - Firebase Docs
- O produto final segue as diretrizes.
- Processo de design de documentos.
- Inclui informações para desenvolvedores (deps, instalação, uso, implantação, teste, ...)
- Criar login e senha.
- Criar tipo de usuário (cozinha / salão).
- Entrar na tela correta para cada usuário.
- Digite o nome do cliente.
- Filtre menu para café da manhã e almoço/jantar.
- Adicionar item ao pedido.
- Excluir item do pedido.
- Mostra resumo do pedido com todos os itens e o total.
- Enviar para a cozinha (isso deve salvar o pedido).
- Visualização de pedidos pendentes para produção.
- Marcar pedido como como pronto para entrega.
- Ver histórico dos pedidos.
- Visualização de pedidos pendentes para entrega.
- Marcar pedido como entregue ao cliente.
- É bem e funciona bem em tablets.
- Você pode adicionar a tela inicial como um aplicativo da web (ele tem um manifesto, ícones, ...) em iOS e Android.
- Fácil utilização em telas sensíveis ao toque (telas sensíveis ao toque).
- Status atual do pedido sempre visível enquanto fazemos um pedido.
- 70% ou mais em cobertura de statements.
- 70% ou mais em cobertura de functions.
- 70% ou mais em cobertura de lines.
- 70% ou mais em cobertura de branches.