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.