Logins para ter acesso a aplicação:
e-mail: useratendente@mail.com
senha: useratendente
e-mail: usercozinha@mail.com
senha: usercozinha
Índice
- 1. Prefácio.
- 2. Resumo do projeto.
- 3. Considerações gerais.
- 4. Critérios mínimos de aceitação.
- 5. Definição do produto e design.
- 6. Lighthouse.
- 7. Desenvolvedoras.
- 8. Como rodar? ⚙
- 9. Objetivos de aprendizagem
1. Prefácio
4° Projeto desenvolvido no bootcamp de front-end da Laboratoria (turma SAP007). O Kukki é um restaurante no qual precisa de um novo sistema de controle para comandas. Criamos um produto no qual visa facilitar o dia a dia dos funcionários neste ambiente.
2. Resumo do projeto
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.
Este projeto tem duas áreas: interface (cliente) e API (servidor). Nosso cliente nos pediu para desenvolver uma interface que se integre com a API.
Estas são as informações que temos do cliente:
Somos Kukki, uma 'hamburgueria e café' 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ã e outro para o resto do dia.
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.
3. Considerações gerais
O Produto foi desenvolvido seguindo a 'requisição de uma cliente'. Essas são as funcionalidades principais que o produto tem:
- Fazer login com uma conta registrada;
- Fazer o cadastro e escolher seu cargo;
- Deslogar do App Web;
- Entrar na página Home, onde há botões de rotas para as páginas Pedidos, Pedidos Finalizados, Serviços e Cardápio;
- Entrar na página de cardápio, se o usuário for um atendente. Visualizar cardápio e filtrar, adicionar itens ao carrinho, remover itens, aumentar e diminuir quantidade dos itens. E por fim enviar a comanda para a API;
- Receber os pedidos da API na página de pedidos e serviços, dependendo do cargo mudar o estado do pedido;
- Ver comandas finalizadas na página de Pedidos Finalizados.
Além disso o projeto foi criado do zero, desde as instalações e preparação do boilerplate, testes, lógica, design, estilização.
4. Critérios mínimos de aceitação do projeto
Todos as histórias de usuárias tem como definição de pronto o acordado abaixo:
- Você deve ter recebido code review de pelo menos uma parceira.
- Fez testes unitários e, além disso, testou seu produto manualmente.
- 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).
5. Definição do produto e design
Proto Personas
Protótipo de Alta fidelidade
O Protótipo foi criado pelo FIGMA
Testes
Todos os componentes criados possuem testes próprios e também suas respectivas funções. Os testes cobrem a maioria das funcionalidades do projeto:
Testes de Usabilidade
Os testes de usabilidade estão disponíveis para leitura, clicando aqui.
Após cada teste de usabilidade foram geradas tarefas que se tornarão em futuras issues para o projeto.
Fluxograma
6. Lighthouse
Pontuações de Performance, Progressive Web App, Accessibility e Best Practices do Lighthouse
7. Desenvolvedoras
 Karina Mel |
 Mônica Guimaraes |
8. Como rodar? ⚙
Você precisará usar o Node.js
Clonar o projeto $ git clone https://github.com/MonicaGuimaraes/burger-queen-api-client.git
Instalar as dependências do projeto $ npm install or yarn
Iniciar a aplicação $ npm start or yarn start
Realizar os testes unitários $ npm test or yarn test
9. Objetivos de aprendizagem
HTML
- Uso de HTML semântico
CSS
-
Uso de seletores de CSS
-
Empregar o modelo de caixa (box model): borda, margem, preenchimento
-
Uso de flexbox en CSS
-
Uso de CSS Grid Layout
-
Uso de media queries
JavaScript
-
Testes unitários
-
Testes assíncronos
-
Mocking
-
Uso ES modules
-
Uso de linter (ESLINT)
-
Uso de identificadores descritivos (Nomenclatura | Semântica)
Git e GitHub
-
Git: Instalação e configuração
-
Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)
-
Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)
-
GitHub: Criação de contas e repositórios, configuração de chave SSH
-
GitHub: Implantação com GitHub Pages
-
GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)
-
GitHub: Organização pelo Github (projects | issues | labels | milestones | releases)
HTTP
-
Solicitações o requisições (request) e respostas (response).
-
Cabeçalhos (headers)
-
Corpo (body)
-
Verbos HTTP
-
Codigos de status de HTTP
-
Encodings e JSON
-
CORS (Cross-Origin Resource Sharing)
react
-
jsx
-
components
-
events
-
lists-and-keys
-
conditional-rendering
-
lifting-up-state
-
hooks
-
css-modules
-
routing
user-centricity
- Desenhar a aplicação pensando e entendendo a usuária
product-design
-
Criar protótipos para obter feedback e iterar
-
Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
research
- Planejar e executar testes de usabilidade