Projeto GESREST
Visão Geral
CLIENTE
Projeto Acadêmico
Curso de Front-End Developer
DURAÇÃO
2 semanas
MEU PAPEL
UX/UI Designer - Front-End Developer
Tecnologias/Ferramentas
React - Express - Node.js - Bootstrap
Desafio
Criar uma Single Page Application (SPA) usando React para gerenciar o fluxo de dados entre os diferentes roles (perfis) de usuário, garantindo uma experiência de usuário (UX) intuitiva e interfaces de usuário (UI) responsivas com Bootstrap.
Objetivo
Processo de Design
Descoberta
A fase inicial de Análise e Descoberta foi dedicada a compreender a dinâmica operacional de um restaurante e os requisitos de cada perfil (Gestor, Cozinha, Consumidor).
Arquitetura da Informação
A Arquitetura da Informação foi definida com o foco principal em garantir que cada perfil aceda apenas à informação e funcionalidades necessárias, minimizando a curva de aprendizagem. Para tal, a estratégia consistiu em definir três áreas de conteúdo e navegação estritamente separadas e protegidas:
Área do Gestor: A prioridade foi dada aos formulários de inserção do menu, permitindo a gestão eficiente dos itens (entradas, prato principal, sobremesas).
Área do Consumidor: O foco recaiu sobre a visualização clara do menu (categorizado por entradas, prato principal e sobremesas) e um fluxo intuitivo para a criação da encomenda.
Área da Cozinha: A prioridade foi estabelecer uma interface para a lista de pedidos, com o status claramente visível e botões de ação proeminentes para a atualização do estado da encomenda.
O resultado desta segmentação foi a criação de um mapa de rotas lógicas e protegidas, essencial para estruturar o desenvolvimento Front-End e garantir a segurança e a usabilidade do sistema.
Wireframes
A etapa de Wireframes teve como principal objetivo esboçar a estrutura e o layout de cada uma das três interfaces distintas antes da aplicação do design visual.
A execução envolveu o desenvolvimento de wireframes low-fidelity para cada perfil de utilizador, com focos específicos:
Dashboard do Gestor: O foco foi garantir a disposição clara dos três campos de inserção de dados essenciais (entradas, prato principal e sobremesas).
Interface do Consumidor: A estrutura priorizou a apresentação intuitiva do menu e um fluxo simples para a seleção de itens e confirmação do pedido.
Interface da Cozinha: O layout foi desenhado para maximizar a clareza da lista de pedidos (mostrando nome e itens) e garantir a proeminência dos botões de ação para atualização do status (’em confecção’ ou ‘entregue’).
O resultado desta fase foi a validação da usabilidade para os fluxos de dados e a gestão de status, fornecendo uma base estrutural sólida antes de avançar para o design de alta fidelidade.
Mockups
O objetivo final do processo foi a criação dos mockups que refletissem a estrutura definida nos wireframes e a estética estabelecida no Guia de Estilo, preparando o projeto para a fase de desenvolvimento Front-End em React.
O resultado desta fase foi um conjunto de designs prontos a serem convertidos em código, garantindo que o desenvolvimento em React e Bootstrap implementasse uma solução visualmente fiel à marca do sistema e funcionalmente alinhada com os requisitos de segurança e usabilidade.
Processo de Desenvolvimento
Tecnologia Utilizada
O desenvolvimento do Front-End da aplicação GESREST baseou-se primariamente no React, uma biblioteca fundamental que permitiu a construção de interfaces de utilizador modulares e reativas.
Para a apresentação visual, o Bootstrap foi integrado. Esta ferramenta garantiu um design totalmente responsivo, adaptável a diferentes dispositivos, além de otimizar o tempo de desenvolvimento, mantendo uma consistência visual em todas as interfaces.
A comunicação entre o Front-End (React) e o servidor foi feita através de uma simulação de um backend simples utilizando Express e Node.js.
O trabalho de integração envolveu a manipulação dos principais métodos HTTP para interagir com os recursos no servidor:
- GET: Utilizado para obter dados (ex., carregar a lista de pedidos ativos ou menus).
- POST: Empreguei este método para criar novos recursos (ex., enviar um novo pedido de uma mesa para a cozinha).
- PUT: Usado para atualizar o estado dos recursos (ex., mudar o status de um pedido de “Em Preparação” para “Pronto”).
Esta abordagem garantiu que a aplicação fosse robusta, capaz de gerir as operações de CRUD (Create, Read, Update, Delete) necessárias para o fluxo de trabalho de um restaurante.
Desafios Técnicos
O principal desafio técnico foi a gestão de dados em tempo real entre as três interfaces. Este obstáculo foi superado com uma gestão de estado eficiente (Context API/Redux), assegurando que as alterações feitas pela Cozinha ou pelo Gestor fossem imediatamente refletidas no sistema.
Adicionalmente, para permitir a inserção da imagem dos pratos pelo Gestor, foi utilizado o Multer, uma middleware do Node.js, que resolveu o desafio de processar o upload de arquivos e garantir a correta exibição das imagens ao Consumidor.
Resultado Final
O Detalhe que faz a diferença
O ponto crucial no GESREST foi a segregação funcional rigorosa obtida através da implementação de rotas protegidas por role (Gestor, Consumidor, Cozinha). Este detalhe técnico e de UX permitiu otimizar a usabilidade: a Cozinha teve uma interface limpa para gerir o status dos pedidos, o Gestor teve acesso seguro para gerir o menu e fazer o upload de imagens (via Multer), e o Consumidor teve um fluxo de encomenda claro. A aplicação operou como três sistemas coesos, mas independentes, garantindo integridade de dados e fluidez operacional em tempo real.
Lições Aprendidas
Ao desenvolver o GESREST, aprendi a importância da segurança de acesso através da implementação de rotas protegidas por role, o que é crucial para a integridade de qualquer sistema. Adquiri conhecimento na gestão de fluxos de dados complexos em tempo real para manter as três interfaces sincronizadas. Obtive experiência prática na integração de middlewares, como o Multer, essencial para gerir o upload de imagens.
Dentro do React, a aplicação de vários conceitos foram essenciais:
- Gestão de Estado: Aprendi a gerir o estado da aplicação de forma eficiente, o que é crucial para atualizar o status dos pedidos em tempo real e garantir que a interface reflita o estado atual da cozinha e das mesas.
- Ciclo de Vida e Efeitos: Utilizei o hook useEffect() para lidar com efeitos secundários, nomeadamente a busca e consumo de APIs logo que os componentes são montados.
- Componentização: O React permitiu construir componentes reutilizáveis, otimizando o desenvolvimento e facilitando a manutenção e expansão da aplicação.
Finalmente, compreendi como a Arquitetura da Informação e o uso eficiente do Bootstrap são vitais para criar designs funcionais e profissionais, com foco na eficiência e na clareza para o utilizador.