Burger Queen (API Client)

Índice

• 1. Projeto
• 2. Planejamento
• 3. Protótipo
• 4. Paleta de Cores
• 5. Logotipo
• 6. Desenvolvimento
• 7. UI e UX
• 8. Objetivos de aprendizagem
• 9. Tecnologias utilizadas
• 9. Desenvolvedoras

---

1. Projeto

Vixi é um pequeno restaurante 24h que tem como cardápio principal hambúrgueres, como houve um aumento significativo no movimento do empreendimento, será necessário ter um sistema próprio que auxilie os funcionários do salão e da cozinha, a controlar o fluxo de pedidos de forma ordenada e eficiente.

Nosso cliente solicitou que desenvolvesemos uma interface (cliente) que se integre com a API (servidor) que outra equipe de desenvolvedoras está trabalhando simultaneamente, sua principal exigência é ter uma aplicação feita para utilização principalmente em tablets, com fácil usabilidade para que seus funcionários consigam acesar a plataforma com facilidade.

2. Planejamento

Para conseguir entregar todas as funcionalidades do projeto, organizamos todo o fluxo de desenvolvimento utilizando o método Kanban no Github Projects, utilizamos issues, milestone, labels para controlar as tarefas, organizar diferentes tipos de problemas, melhorias e bugs do projeto

Dessa forma, definimos:

• MVP (Mínimo Produto Viável)

• Critérios mínimos de aceitação

• Divisão de tarefas

• FDP (Fatiar, Descartar e Priorizar)

3. Protótipo

De acordo com as informações passadas pelo cliente, desenvolvemos o protótipo de baixa fidelidade, primeiramente para mobile.

Fizemos ajustes no protótipo, pois identificamos, atraves de pesquisa com usuários, que algumas alterações seriam benéficas e trariam mais agilidade a aplicação e tornaria a ferramenta mais fácil para os funcionários. Abaixo o protótipo de alta fidelidade, tablete e desktop.

4. Paleta de Cores

A paleta de cores foi escolhida com tons que remetem ao sertão nordestino brasileiro.

5.Logotipo e Nome do Restaurante

As imagens no logo e o nome do restaurante, foram escolhidos para homenagiar nossos pais, nascidos nos estados de Pernambuco e Piaui e também o sertão nordestino brasileiro.

6.Desenvolvimento

• A aplicação foi desenvolvida como SPA (single-page application), para que o usuário tenha a experiência similar à de um aplicativo para desktop.

• É responsiva para tablets utilizados na horizontal e Desktop.

• Utilizamos React JS para componentizar todo o site. Isso mantém a aplicação com alto desempenho e também permite que os componentes sejam reutilizados, gerando um código de fácil manutenção por qualquer desenvolvedor.

• Instalamos o ESLint na aplicação para manter o código padronizado e pronto para ser testado.

✍️ História de usuário #1

✍️ História de usuário #2

✍️ História de usuário #3

✍️ História de usuário #4

Com base nas histórias dos usuários, organizamos o passo a passo do que deveriamos desenvolver:

HU #1 ✔️	HU #2 ✔️	HU #3 ✔️	HU #4 ✔️
Criar login e senha	Anotar nome do cliente e a mesa	Ver os pedidos em ordem	Ver a lista de pedidos prontos para servir
Registrar usuário conforme setor(cozinha ou salão)	Adicionar e/ou excluir produtos aos pedidos	Marcar pedido como 'PRONTO' para ser servido	Marcar os pedidos que foram entregues
Fazer login na tela correta	Ver resumo e o valor total do pedido	Ver o tempo que levou para preparar o pedido
	Enviar o pedido para a cozinha

Aplicação

Resultado da aplicação após finalizarmos as 4 histórias de usuários.

Acessos

Abaixo deixamos login e senha de contas já cadastradas para que possam utilizar a aplicação.

• Cozinha - cozinha@email.com - Senha: 123456

• Salão - salao@email.com - Senha: 123456

7.UI e UX

Principais objetivos de UI:

• Leitura clara de todos os textos

• Consistência e padrões para não confundir os usuários

• Design minimalista

• Navegação intuitiva

• Responsivo em tablets

• Liberdade e controle do usuário

Principal objetivos de UX:

• Ouvir os usuários e compreender como está a sua experiência com a aplicação.

Fizemos uma pesquisa com os usuários para sabermos as opiniões sobre a usabilidade, layout e funcionalidades da aplicação e identificar as possíveis melhorias que poderíamos fazer.

Feedback e Sugestões de Melhorias

• Gostaram da paleta de cores, nome do restaurante e acharam fácil utilizar a aplicação.
• Fazer responsividade para mobile.
• Dividir lanches simples de duplos.

8.Objetivos de aprendizagem

HTML e CSS

• Uso de HTML semântico
• Uso de seletores de CSS
• Empregar o modelo de caixa (box model): borda, margem, preenchimento
• Uso de flexbox en CSS
• 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: 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

UX (User eXperience)

• Desenhar a aplicação pensando e entendendo o usuário
• Criar protótipos para obter feedback e iterar
• Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)
• Planejar e executar testes de usabilidade

9.Tecnologias utilizadas

Deploy

10.Desenvolvedoras

Abaixo link de nosso repositório e linkedin.

Letícia Aniceto	Paloma Queiroz