Burger Queen

Índice

• 1. Apresentação
• 2. Resumo do projeto
• 3. Planejamento
• 4. Funcionalidades
• 5. Implementações Futuras
• 6. Montagem do ambiente de desenvolvimento

1. Apresentação

A aplicação consiste em um sistema, para gerenciamento de pedidos de um fast food. Foi desenvolvida em JavaScript(ES6+), HTML5, StyledComponents para estilização, Firebase Hosting e Firestore para hospedagem e banco de dados e React JS.

A estratégia de desenvolvimento usada foi pair programming, code review e sub-divisão das histórias de usuário.

2. Resumo do projeto

A página da aplicação pode ser acessada atraves do Link: Burger Queen 👑
É possível navegar com usuário de teste:

• Acesso Salão:

E-mail: garcom@teste.com
Senha: 123456

• Acesso Cozinha:

E-mail: chef@teste.com
Senha: 123456

Burger Queen é uma aplicação de serviço, desenvolvida para um restaurante fast food com funcionamento 24 horas. O objetivo da aplicação, é viabilizar um sitema que possa auxiliar no recebimento e gerenciamento de pedidos, permitindo maior demanda.

As caraterísticas técnicas da aplicação são:

• É uma Single-Page Application SPA - e foi implementado um sistema de rotas com uso de biblioteca React Router Dom para trocar entre telas de maneira dinâmica.

• Foi desenhada e desenvolvida com enfoque para tablet , e apresenta design responsivo para mobile e desktop.

• Permite a persistência de dados - a estrutura de dados foi desenhada de forma à consultá-los, atualizá-los, modificá-los e eliminá-los segundo os requerimentos do usuário. Para isto, foi utilizado Firestore do Firebase

3. Planejamento

Para guiar o nosso planejamento, desenvolvemos um protótipo, de baixa fidelidade para o layout da tela, com base nas funcionalidades solicitadas e na experiência do usuário.

Foi utilizada a ferramenta trello, para execução do planejamento.

4. Funcionalidades

Na Burger Queen, é possível:

• Register Page/ Login Page:

  • Criar sua conta, com email e senha ao clicar no botão "Registre-se", sendo redirecionado para uma pagina de registro no primeiro acesso.
  • Ao logar, será direcionado para setor correspondente ao cargo informado no momento do registro.

• Lounge Page:

  • Status:
    Vizualizar todos os pedidos, seus status e detalhes por ordem de entrada.
    Alterar status do pedido para Entregue.
  • Nova Mesa:
    Adicionar nome e numero da mesa do cliente e acessar os menus.
  • Menus:
    Navegar entre os menus, adicionar e remover itens, vizualizar resumo e valor total, enviar o pedido para cozinha.

• Kitchen Page:

  • Pedidos:
    Vizualizar todos os pedidos, seus status e detalhes por ordem de entrada.
    Alterar status do pedido para Concluído
  • Histórico:
    Vizualizar pedidos concluídos e entregues.
    Vizualizar detalhes como, hora de entrada, tempo de preparo, nome do garçom e do cozinheiro resposavél, informações do pedido e do cliente.

5. Implementações Futuras

• Limitar visualização de pedidos nas telas de cozinha e salão em 10 e adicionar botão de "ver mais" que aparece quando ultrapassar esse limite;
• Aprimorar testes para cobrir 100% dos componentes;
• Refatoração do código e do CSS;
• Inserir campo de observação no resumo do pedido;
• Inserir imagens nos itens do Menu;
• Implementar página de perfil ao clicar no ícone do garçom ou cozinheiro na nav;
• Implementar click no ícone do burger na nav para redirecionar para a página home.

6. Montagem do ambiente de desenvolvimento

⚠️ Será necessária a utilização:

• Firebase. 🔥🔥🔥

• React JS.

• Node.js que contém o npm para instalação das dependências.

• Clone o projeto na sua máquina executando o seguinte comando no seu terminal:

git clone git@github.com:Burger-Queen-Laboratoria/SAP004-burger-queen.git

• Instale as dependências do projeto com o comando:

npm install

• Firebase Config

  ⚠️ Para inicialização do firebase, será necessário um arquivo init-config.js na pasta firebase contendo as informações de autenticação da sua database, essas informações são sensíveis e recomenda-se mantê-las no gitignore

const firebaseConfig = {
    apiKey: "yourKey",
    authDomain: "yourProject.firebaseapp.com",
    databaseURL: "https://yourProject.firebaseio.com",
    projectId: "yourProject-id",
    storageBucket: "youProject.appspot.com",
    messagingSenderId: "yourProjectId",
    appId: "yourProjectId",
    measurementId: "yourProjectId",
};
module.exports = firebaseConfig;

• Preload:

⚡ Os itens do menu se encontram num array de obejtos, no arquivo src/firebase/preload.js, podendo ser modificados. Para popular a base no firestore execute:

npm run preload

⚠️ Este comando deve ser executado, somente quando houver intenção de popular a base.⚠️

• Localhost:

npm start

Testes 📋

• Para executar os testes:

npm test

Deploy e Build 🔥

• Para executar deploy no firebase hosting:

npm run build

firebase deploy

Esse projeto faz parte do currículo do Bootcamp da Laboratória Brasil

Desenvolvido por:

⚡Jessica Melise e Naere Loire ⚡