Autoria: Clarissa Simplício e Karla Oliveira
Status do Projeto: Concluído
Implementações Futuras: ampliar cobertura de testes
- 1. Apresentação
- 2. Idealização do Projeto
- 3. Desenho de interface do usuário
- 4. Historias de usuario
- 5. Estrutura de apresentação
- 6. Hacker Edition
- 7. Objetivos de aprendizagem
- 8. Fonte das imagens
Quarto projeto realizado no Bootcamp de Desenvolvimento Web da Laboratória e teve como objetivo principal consolidar metodologias de trabalho em equipe, desenvolvimento ágil, user centricity, product design, research, versionamento de código, além de introduzir o uso do framework React e principios de integração entre interface e API.
Para acessar o resultado final, clique aqui.
| Função | login | senha |
|---|---|---|
| Atendimento | [email protected] | 123456 |
| Cozinha | [email protected] | 123456 |
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.
Esse é um projeto 100% por demanda, embora seja possível (e aconselhável) fazer sugestões de melhora e mudança, prioritariamente nos asseguramos de cumprir os requisitos solicitados.
Burger Queen, um fast food cuja proposta de serviço 24 horas foi muito bem recebida e, para continuar a crescer, precisa de um sistema que ajude a receber pedidos de nossos clientes.
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.
O planejamento desse projeto foi realizado de modo integral com auxílio GitHub Projects, onde foi possível agrupar problemas e acompanhar as solicitações e aprovações de Pull Requests associados à resolução desses problemas e tudo isso disposto de maneira bastante intuitiva em um Kanban Dashboard. Além disso, tornou possível visualizar o andamento do trabalho com gráficos configuráveis e trabalhar com milestones (marcos).
A interface foi projetada e implementada para ser usada em tablets, por isso optou-se pelo uso de botões e elementos com áreas clicáveis amplas.
O Product Owner nos apresentou este backlog que é o resultado do seu trabalho com o cliente até hoje.
Eu, como garçom/garçonete quero entrar no sistema de pedidos.
-
Critérios de aceitação
- Acessar uma tela de login.
- Inserir email e senha.
- Receber mensagens de erros compreensíveis, conforme o erro e as informações inseridas.
- Entrar no sistema de pedidos caso as credenciais forem corretas.
-
Definição de pronto
- Code review de uma parceira.
- Testes unitários e testes manuais.
- Testes de usabilidade e incorporação de feedback de usuário.
- Deploy do aplicativo e marcação de versão (tag git).
Eu como garçom/garçonete quero poder anotar o pedido de um cliente para não depender da minha memória, saber quanto cobrar e poder enviar os pedidos para a cozinha para serem preparados em ordem.
-
Critérios de aceitação
- Anotar o nome do cliente.
- Adicionar produtos aos pedidos.
- Excluir produtos.
- Ver resumo e o total da compra.
- Enviar o pedido para a cozinha (guardar em algum banco de dados).
- Funcionar bem em um tablet.
-
Definição de pronto
- Code review de uma parceira.
- Testes unitários e testes manuais.
- Testes de usabilidade e incorporação de feedback de usuário.
- Deploy do aplicativo e marcação de versão (tag git).
Eu como chefe de cozinha quero ver os pedidos dos clientes em ordem, poder marcar que estão prontos e poder notificar os garçons/garçonetes que o pedido está pronto para ser entregue ao cliente.
-
Critérios de aceitação
- Ver os pedidos ordenados à medida em que são feitos.
- Marcar os pedidos que foram preparados e estão prontos para serem servidos.
- Ver o tempo que levou para preparar o pedido desde que chegou, até ser marcado como concluído.
-
Definição de pronto
- Code review de uma parceira.
- Testes unitários e testes manuais.
- Testes de usabilidade e incorporação de feedback de usuário.
- Deploy do aplicativo e marcação de versão (tag git).
Eu como garçom/garçonete quero ver os pedidos que estão prontos para entregá-los rapidamente aos clientes.
-
Critérios de aceitação
- Ver a lista de pedidos prontos para servir.
- Marcar os pedidos que foram entregues.
-
Definição de pronto
- Code review de uma parceira.
- Testes unitários e testes manuais.
- Testes de usabilidade e incorporação de feedback de usuário.
- Deploy do aplicativo e marcação de 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.
As seções chamadas Hacker Edition são opcionais. Se você terminou tudo e ainda sobrou tempo, faça essa parte. Assim você poderá aprofundar e exercitar mais sobre os objetivos de aprendizagem do projeto.
A aplicação deve seguir 80% ou mais das pontuações de Performance, Progressive Web App, Accessibility e Best Practices do Lighthouse.
| JavaScript | HTTP | react |
|---|---|---|
| Testes unitários | Solicitações o requisições (request) e respostas (response). | jsx |
| Testes assíncronos | Cabeçalhos (headers) | components |
| Mocking | Corpo (body) | events |
| Verbos HTTP | lists-and-keys | |
| Codigos de status de HTTP | conditional-rendering | |
| Encodings e JSON | lifting-up-state | |
| CORS (Cross-Origin Resource Sharing) | hooks | |
| css-modules | ||
| routing |
-
Logo hamburger adaptado de: Image by nuraghies on Freepik
-
Icones do cardápio: Icons created by Freepik - Flaticon (chicken, vegan, hamburger, hamburger double, coffee, milk coffee, onion rings, french-fries, drink, water, egg, orange juice)
-
Cheese slice: Cheese slice icons created by Erifqi Zetiawan - Flaticon