Página de Configuração do Projeto

Aqui deve ser explicado como configurar o Ambiente para que os Desenvolvedores do Projeto possam configurar o projeto para rodar em seus computadores, deve ser sempre atualizado a cada mudança de instalação feita.

• Deve ser explicado a configuração de TODAS as partes do projeto, tanto BACK,BANCO,FRONT,etc...
• Além de explicar aqui, deve ter em cada Repositório o RESUMO de como instalar para quando os Desenvolvedores baixarem o projeto possam configurar por lá também

Instalação do 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

Clonando o projeto

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! 😄

Configuração do Ambiente de Desenvolvimento Frontend

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.

Executando o Projeto

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.