Configurações do Projeto

Descrição

Esta seção apresentará todas as configurações para executar o projeto.

Sumário

• Configurações Gerais
  • Instalando o Node
  • Configurando sua IDE
  • Clonando os Repositórios
• Backend
  • Configurando a Máquina
  • Compilando
  • Executando
• Frontend
  • Configurando a Máquina
  • Compilando
  • Executando

Configurações Gerais

Aqui serão encontradas as instruções de configuração de ambos ambientes de desenvolvimento.

Instalando o Node

Instalação

O download do instalador do Node pode ser realizado pelo seguinte link.

Faça o download e siga os passos de instalação da versão mais recente que possua LTS (Long Term Support).

Verificação

Depois de instalar o Node, abra um novo terminal para verificar se a mesma foi realizada com sucesso.

Execute o seguinte comando node -v e verifique se o retorno é semelhante ao apresentado abaixo (caso a versão seja diferente não se preocupe).

C:\user\node -v
vv14.9.0

Depois execute o seguinte comando npm -v e novamente verifique se o retorno é semelhante (lembre-se: a versão não precisa ser a mesma).

C:\user\npm-v
v6.14.8

Configurando a IDE

Para o desenvolvimento do código e fácil controle de versionamento (GitLab) sugerimos a instalação do Visual Studio Code. O mesmo além de ser uma ótima ferramenta para desenvolvimento conta com extensões que serão essenciais para padronização do código do projeto.

Depois de instalar o Visual Studio Code, acesse sua aba de extensões e instale as seguintes:

• ESLint: Para que a IDE identifique padrões do React que estão sendo desrespeitados.
• Prettier: Para que a IDE realize a indentação do código de maneira correta.

Caso deseje também, baixe a extensão do Material (Material Theme) no seu VS Code para uma melhor apresentação visualmente da estrutura do projeto

Depois de adicionar as extensões necessárias, falta apenas uma configuração para podermos começar o desenvolvimento. No seu teclado pressione as teclas ctrl shift p para acessar a aba de pesquisa do Visual Studio Code. Pesquise por settings e abra o arquivo com nome Prefernces: Open Settings (JSON). Nesse arquivo adicione as seguintes linhas:

"editor.formatOnSave": true,
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Caso o mesmo já esteja presente, desconsidere.

Clonando os Repositórios

Para ser necessário clonar o projeto, é preciso primeiro acessar a página do nosso time, disponível aqui.

Na página inicial do time, você irá encontrar todos os repositórios referentes à esse projeto:

1.Frontend

2.API de Usuários

3.API de Receitas

4.Wiki

Não é necessário clonar a Wiki pois é mais fácil editar diretamente pelo próprio Gitlab, em forma de markdown.

Após selecionar o repositório que deseja clonar, irá aparecer um botão escrito "Clone" no canto superior direito da tela. Ao clicá-lo irão aparecer duas opções, a primeira que utiliza SSH e outra HTTP, copie o link no campo do HTTP.

Com o link copiado, basta abrir um terminal (cmd no Windows) na pasta onde gostaria de deixar salvo o repositório em sua máquina e digitar o seguinte comando:

• git clone "link do repositório"

Não é necessário colocar as aspas, apenas o link

Pronto, você agora possui uma instância local do repositório!

Backend

Configurando a Máquina

Para o Backend, precisamos ter instalados o ambiente Node e o Docker para rodar o banco de dados da aplicação. Além disso, vamos usar o VSCode para escrita do código fonte. Esse pontos estão descritos nas configurações gerais do projeto.

Para instalar o Docker, vamos utilizar o guia oficial do Docker. Caso você esteja utilizando ambiente Windows, é possível utilizar o executável para instalar o Docker e o docker-compose de maneira simples. Também é recomendado habilitar o WSL2 para ter um ambiente Linux virtualizado. Isso facilita o uso do Docker além de possibilitar o desenvolvimento em uma máquina virtual rodando Linux.

Guia WSL2

Depois de instalar o WSL2, podemos partir para a instalação do Docker.

Docker no Windows

Se você estiver utilizando Linux, o processo de instalação é um pouco diferente. Se você estiver utilizando Ubuntu, podemos seguir o guia do Docker. Lembre-se de instalar o docker-compose :)

Docker no Ubuntu docker-compose

Compilando

Executando

Frontend

Configurando a Máquina

Compilando

Executando

Depois de clonar o repositório do GitLab para a sua máquina, acesse o projeto pelo terminal (pode ser diretamente pelo terminald o VS Code) e execute npm install. Esse comando irá fazer o download e todas dependências do projeto (esse comando pode demorar bastante para ser executado, então não se preocupe).

Para visualizar o que já foi feito, basta executar o seguinte comando no terminal npm start.

Como a ideia deste projeto é partir para um PWA (Progressive Web App), para visualizarmos a aplicação desta maneira, precisamos primeiro buildar o projeto. Abra o terminal e digite npm run build.

O npm run build permite que você execute quaisquer tarefas de construção / preparação necessárias para o seu projeto.

Feito isso, digite logo em seguida no terminal serve -s build e acesse tanto pelo localhost quanto pelo seu IP (não faz diferença entre eles). Pronto, sua aplicação esta rodando localmente e com PWA funcionando.