Logins para ter acesso a aplicação:

e-mail: [email protected]

senha: useratendente

e-mail: [email protected]

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