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

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

react

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