Burger Queen (API Client)

HORA DE BURGER

Índice

• 1. Resumo do projeto
• 2. Definição do Produto
• 3. Planejamento e Organização
• 4. Histórias de Usuário
• 5. Teste de Usabilidade
• 6. Tecnologias Utilizadas
• 7. Considerações

---

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

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.

Foi construido uma interface web usando o framework React. Esses framework front-end ataca o seguinte problema: como manter a interface e estado sincronizados.

2. Definição do Produto

Sistema de comanda de pedidos para acesso de garçon/garçonete e chef de cozinha para uma hamburgueria de atentimento 24hs.Com temática baseada no desenho Adventure Time (Hora da Aventura), além de funcional o produto atende a identidade visual do cliente. A aplicação é uma SPA (Single Page Aplication) e atende diversos tamanhos de tela.

3. Planejamento e Organização

O planejamento foi acompanhado pela ferramenta Projects do GitHub.Com a metodologia ágil Kanban alinhados com os commits realizados em cada task para conclusão das histórias de usuário.

Protótipos

Realizado na ferramenta Figma , foi desenhado pensando no fluxo da rotina de trabalho da hamburgueria, conforme fluxograma abaixo:

A paleta de cores escolhida foi de acordo com a logo do resturante, que consta os dois personagens principais do desenho: Finn e Jake.

A paleta de cores:

Logo da Hamburgueria:

4. Histórias de Usuário

Definição de pronto

O acordado abaixo deve acontecer para dizer que a história está terminada:

• 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).
• Os dados devem ser mantidos intactos, mesmo depois que um pedido for finalizado. Tudo isso para poder ter estatísticas no futuro.

---

5. Teste de Usabilidade

Foi realizado teste de usabilidade ao final de cada história do usuário.

História 1

Matheus Souza

• Layout do botão ENTRAR pequeno Solução: Aumentamos o tamanho do botão e seu padding para aumentar a àrea de clique e adicionamos um cursor pointer.

História 2

Thiago Capelo

• Não consegiu cadastrar senha com caracter especial e a quantidade tinha que ser exatamente 6 Solução: Adicionamos no padrão que a senha deveria ter no mínimo seis caracteres e incluimos caracteres especiais.
• Não sabia se o cadastro tinha sido efetuado Solução: Implementamos uma mensagem de sucesso após conclusão do cadastro.

História 3

Leticia Antunes

• Imagem pequena no cabeçalho da página da cozinha, na tela desktop. Solução: Aumentamos a imagem
• Card dos pedidos estavam muito juntos Solução: Colocamos border-radius e espaçamos os cards

História 4

Julia Benedicto

• Botão histórico não estava muito descritivo sobre o que se tratava Solução: Implementamos um título descritivo.
• Quando não havia complemento ficava vazio o paragrafo (exemplo: complemento: ) Solução: Colacamos uma condicional que a descrição do campo só aparece se tiver um complemento.

6. Tecnologias Utilizadas

• HTML
• CSS (module)
• JSX
• Node JS
• Git
• GitHub
• Netlify
• Jest
• React
• API
• Figma
• Slack

7. Considerações

Projeto realizado pelas desenvolvedoras Marione Pereira e Thaís Bonalume, no bootcamp Laboratória, turma SAP007. Esse foi o nosso quarto projeto e nos ensinou um fluxo de desenvolvimento de projeto completo, desde a pesquisa de usuário a implementação após os testes.

Marione Pereira

Thais Bonalume