thiagoianuch / casa-do-microondas

Site de uma assistência técnica de microondas utilizando React, Node.js e MySQL

Sobre o Projeto

Casa do Microondas é um projeto de um site para uma assistência de microondas, desenvolvido em grupo para a disciplina de Desenvolvimento Web e Banco de Dados, no 3º período de Ciência da Computação na Uniandrade

Construido com

Pré-requisitos

• IDE (recomendado o Visual Studio Code)
• Ferramenta para gerenciamento de banco de dados MySQL (recomendado o MySQL Workbench)
• Ultima versão do Node.js:

    https://nodejs.org/en/download

Instalando

1. Clone o repositório

    git clone https://github.com/ThiagoIanuch/Casa-do-Microondas.git

2. Abra dois terminais no Visual Studio ou na IDE que está utilizando, um para o cliente e outro para o servidor, em um acesse a pasta client e no outro a pasta server e baixe os pacotes npm

• No terminal do cliente:

    cd client
    npm install

• No terminal do servidor:

    cd server
    npm install

3. No Workbench ou na ferramenta que está usando para gerenciar o banco de dados MySQL importe os scripts SQL que estão na pasta server/src/models (create.sql, insert.sql e procedures.sql)

4. Crie um arquivo .env na pasta server com as informações do banco de dados criado em sua máquina e com um segredo para o token JWT, exemplo:

    JWT_SECRET = casa-do-microondas
    
    HOST = localhost
    USER = root
    PASSWORD = admin
    DATABASE = casamicroondas

Utilização

1. Verifique em ambos os terminais se está dentro das pastas corretas (client e server) e digite o seguinte comando para iniciar o projeto:

• No terminal do cliente:

    npm run dev

• No terminal do servidor

    npm start

2. Acesse o site no navegador

    localhost:5173 (cliente)
    localhost:8080 (servidor)

• O banco de dados possui por padrão duas contas já cadastradas para realizar testes, uma de cliente e outra com permissão de administrador:
  • email: [email protected] | senha: clienteteste
  • email: [email protected] | senha: cmoadmin*

Contribuidores

casa-do-microondas's Issues

Criar o componente announcements

Descrição

Criação do componente announcements que irá conter o lema da empresa e os banners com anúncios importantes.

Tarefas

• Criar o componente announcements.jsx
• Criar o arquivo CSS announcements.css
• Importar o componente announcements.jsx em index.jsx
• Criar uma seção para o lema da empresa.
• Criar uma seção para os banners da empresa.
• Criar funcionalidade do banner alternar sozinho.
• Criar funcionalidade para o usuário alternar entre os banners existentes por meio de um slideshow em forma de círculo.

modelo fisico da banco de dados

Criar o componente hero

Descrição

Criação do componente hero que irá conter o background em forma de vídeo e o menu do site.

Tarefas

• Criar o componente hero.jsx
• Criar o arquivo CSS hero.css
• Importar o componente hero.jsx em index.jsx
• Criar uma seção que irá conter o menu do site.
• Criar uma seção para colocar o vídeo como background.
• Criar uma seção para colocar o nome da empresa no meio da página.

criando a pagina de fotos

criando a pagina com as fotos

Criar o componente footer

Descrição

Criação do componente footer que irá conter o rodapé do site.

Tarefas

• Criar o componente footer.jsx
• Criar o arquivo CSS footer.css
• Importar o componente footer.jsx em index.jsx
• Criar uma seção que tenha as formas de contato com a empresa.
• Criar uma seção que tenha os endereços.
• Criar uma seção falando sobre orçamento e que terá um botão para redirecionar para a página de contato.
• Criar uma seção para alternar entre os temas do site (ainda não será funcional).
• Criar uma seção logo abaixo para conter sobre direitos reservados/nome da empresa.
• Para ícones do Whatsapp, telefone e outros use a biblioteca Font Awesome

Documentação

Baixando o projeto:

1. Baixe o Git Bash: https://git-scm.com/downloads
2. Escolha um local onde quer baixar o repositório e clique com o botão direito e depois em "Open Git Bash here"
3. Configure sua conta do Github:

   git config --global user.name "nomegithub"
   git config --global user.email emailgithub

4. Clone o repositório:

   git clone https://github.com/ThiagoIanuch/Casa-do-Microondas.git

Baixando as dependências:

• É necessário baixar o Node JS e algumas dependências que não são enviadas para o GitHub, entre elas o npm (que permite inicializar o projeto e baixar bibliotecas), o react-router-dom (que permite trabalhar com várias páginas) e o Font Awesome (que será utilizado para importar ícones)

1. Baixe a ultima versão do Node JS: https://nodejs.org/en
2. Abra a pasta do projeto no Visual Studio Code
3. Na barra superior procure por Terminal > New Terminal
4. Entre na pasta client, na qual ficará todo o conteúdo do front-end:

   cd client

5. Baixe as dependências:

    npm install

Iniciando o projeto.

1. No terminal do Visual Studio Code verifique se você está dentro da pasta client (caso contrário digite cd client)
2. Para iniciar o projeto utilize:

   npm run dev

3. No navegador acesse localhost:5173.

• Se no navegador estiver uma página com cor de fundo cinza/preto então está funcionando:
  

• Sempre que salvar qualquer alteração no código, o navegador atualiza automaticamente o conteúdo sem a necessidade de apertar F5.

Trabalhando no Projeto

1. Sempre que começar a trabalhar no projeto verifique se não existe nenhuma versão mais atualizada da branch main e se não existe nenhuma alteração dos pacotes npm:

   git pull origin main
   npm install

2. Quando começar a trabalhar em um issue crie um branch próprio para ele e na aba do issue não esqueça de marcar as tarefas que já realizou.

   git checkout -b nome-do-branch

• Para o nome dos branchs utilize sempre a regra abaixo:

<tipo-do-branch>/<issue-numero><o-que-esta-sendo-feito>

Se estivermos trabalhando no Issue #3 - "Criar o componente announcements", ele possui uma tag de feature, então o branch seria criado como:

feature/issue-3-criar-announcements

Se caso fosse um Issue de Bug substituria o feature por bugfix

3. Sempre envie as suas alterações para o novo branch que criou:

   git add nome-arquivos
   git commit -m "Mensagem do commit"
   git push -u origin nome-do-branch

• Sempre verifique se você está no branch que criou, pois se você voltou para o branch main você deve usar git checkout nome-do-branch-criado
• Para a mensagem do commit seja sempre descritivo com o que está fazendo, por exemplo:

"Criar o componente announcements"
"Atualizar as cores do componente announcements"
"Corrigir o tamanho da fonte no componente announcements"

4. Quando todo seu código for finalizado e enviado para o GitHub, acesse o repositório e faça um pedido de pull request:
   

• Coloque o titulo seguindo o mesmo padrão dos commits.
• Adicione uma descrição do que foi feito
• Coloque no final sempre "Closed #<numero-issue>", pois isso irá linkar o pedido de pull request com o Issue em que você está trabalhando:
• Depois clique em "Create pull request" e aguarde eu confirmar.

• NÃO APROVE O PRÓPRIO PULL REQUEST

Estrutura do projeto

• O projeto será separado em duas pastas (client, onde ficará o front-end e server, onde ficará o backend).

- Estrutura da pasta client:

• Utilize a pasta public para importar imagens, vídeos e outros.
• A pasta src é onde todo o código vai ser escrito. Ela é separada em:
  • components: componentes são recursos que serão importados em cada página. Por exemplo, menu é um componente
  • css: para os arquivos css
  • pages: páginas são as junções dos componentes. Por exemplo, index é a página principal que pode ter vários componentes

- Estrutura da pasta server:

• Em construção

Criando componentes e páginas.

• Os arquivos em React JS utilizam a extensão .jsx
• A lógica para criação de componentes e páginas é a mesma. A diferença é que as páginas seriam as junções dos componentes.
• Para criar uma página ou componente deve se criar uma função e no retorno dela podemos escrever todo o código HTML sem a necessidade de colocarmos tags como body, head e outros. Também deve se colocar o nome com que ela será exportado. Por exemplo, se fossemos criar o componente menu faríamos da seguinte forma:

• Para importar código CSS no componente ou na página utilizamos o comando "import 'localização-do-css'"

• Para importar o componente para outro componente ou para uma página também utilizamos o comando import, porém com algumas diferenças: "import nome-definido-no-export-default from 'localização-do-componente'"

• Para chamarmos o componente utilizamos <Nome-componente></Nome-componente>

• Por exemplo, o componente menu pode ser importado para a página index da seguinte forma:

• O JavaScript pode ser chamado tanto fora do return quanto dentro dele

Utilização do CSS

• Sempre que for definir alguma classe no HTML para utilizar no CSS utlize className="nome-da-classe" em vez de class="nome-da-classe", pois utilizar apenas class pode dar conflito com o JS.
• Defina classes e ids sempre em inglês, com letra minúscula e quando for mais de uma palavra separe com -
• Como vamos utilizar tema claro e escuro e para facilitar na hora de qualquer alteração de cor, as cores do projeto estão salvas como variáveis em src/css/themes.css. Então para cor de fundo/texto use as cores já salvas. Se precisa de mais alguma cor crie uma outra variável.

• Para utilizar as variáveis importe themes.css no arquivo de css que está utilizando e use var(--nome-variavel). Por exemplo:

3

Criar o componente brands

Descrição

Criação do componente brands que irá conter as logos de todas as marcas que a empresa atende.

Tarefas

• Criar o componente brands.jsx
• Criar o arquivo CSS brands.css
• Importar o componente brands.jsx em index.jsx
• Criar uma seção para mostrar o logo de todas as marcas atendidas pela empresa.
• Criar uma funcionalidade da logo alterar para a cor branca ao passar o mouse em cima.
• Criar funcionalidade para o usuário alternar entre as marcas existentes por meio de um slideshow com setas.

Para alterar as cores da imagem pode usar o filter do CSS. Esse site gera filtros para qualquer cor.

componente footer

criando o componente footer

Criar o componente services

Descrição

Criação do componente services que irá conter informações sobre os serviços prestados pela empresa (microondas e forno elétrico).

Tarefas

• Criar o componente services.jsx
• Criar o arquivo CSS services.css
• Importar o componente services.jsx em index.jsx
• Criar uma seção que contenha os serviços que a empresa presta (microondas e forno elétrico), contendo o titulo do serviço, imagem e descrição.
• Criar um botão para redirecionar para a página do serviço

commitando a pagina de photos

commit da pagina de fotos para que o adm possa ver a proporção e como a imagem tem uma péssima qualidade, provavelmente irei passar as imagens em uma ferramenta que melhora a qualidade