Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • olive-wiki olive-wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Olive
  • olive-wikiolive-wiki
  • Wiki
  • configuracao

configuracao · Changes

Page history
Update Wiki Format authored Mar 29, 2021 by joaofleao's avatar joaofleao
Hide whitespace changes
Inline Side-by-side
configuracao.md
View page @ 971b0f38
|[Página Inicial](home)| |[Página Inicial](home)|[Escopo](escopo)|[Processo](processo)|[Design](design)|[**Configuração**](configuracao)|[Arquitetura](arquitetura)|[Banco de Dados](banco_dados)|[Qualidade](qualidade)|[Instalação](instalacao)|
|---| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
# Página de Configuração do Projeto
# Configurações 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. ## Descrição
Esta seção apresentará todas as configurações para executar o projeto.
* Deve ser explicado a configuração de **TODAS** as partes do projeto, tanto BACK,BANCO,FRONT,etc... ## Sumário
* 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 - [Configurações Gerais](#configurações-gerais)
- [Instalando o Node](#instalando-o-node)
# Instalação do Node - [Configurando sua IDE](#configurando-a-ide)
- [Clonando os Repositórios](#clonando-os-repositórios)
- [Backend](#backend)
- [Configurando a Máquina](#configurando-a-máquina)
- [Compilando](#compilando)
- [Executando](#executando)
- [Frontend](#frontend)
- [Configurando a Máquina](#configurando-a-máquina-1)
- [Compilando](#compilando-1)
- [Executando](#executando-1)
## Configurações Gerais
Aqui serão encontradas as instruções de configuração de ambos ambientes de desenvolvimento.
### Instalando o Node
#### Instalação #### Instalação
O download do instalador do Node pode ser realizado pelo seguinte [link](https://nodejs.org/en/). O download do instalador do Node pode ser realizado pelo seguinte [link](https://nodejs.org/en/).
...@@ -33,9 +45,28 @@ Depois execute o seguinte comando `npm -v` e novamente verifique se o retorno é ...@@ -33,9 +45,28 @@ Depois execute o seguinte comando `npm -v` e novamente verifique se o retorno é
C:\user\npm-v C:\user\npm-v
v6.14.8 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](https://code.visualstudio.com/). 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"
}
```
# Clonando o projeto > 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](https://tools.ages.pucrs.br/olive). Para ser necessário clonar o projeto, é preciso primeiro acessar a página do nosso time, disponível [aqui](https://tools.ages.pucrs.br/olive).
Na página inicial do time, você irá encontrar todos os repositórios referentes à esse projeto: Na página inicial do time, você irá encontrar todos os repositórios referentes à esse projeto:
...@@ -58,35 +89,18 @@ Após selecionar o repositório que deseja clonar, irá aparecer um botão escri ...@@ -58,35 +89,18 @@ Após selecionar o repositório que deseja clonar, irá aparecer um botão escri
> Não é necessário colocar as aspas, apenas o link > Não é necessário colocar as aspas, apenas o link
Pronto, você agora possui uma instância local do repositório! :smile: Pronto, você agora possui uma instância local do repositório!
# Configuração do Ambiente de Desenvolvimento Frontend ## Backend
### Configurando a Máquina
### Configurando a IDE ### Compilando
### Executando
Para o desenvolvimento do código e fácil controle de versionamento (GitLab) sugerimos a instalação do [Visual Studio Code](https://code.visualstudio.com/). 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
## 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). 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`. Para visualizar o que já foi feito, basta executar o seguinte comando no terminal `npm start`.
...@@ -95,4 +109,4 @@ Como a ideia deste projeto é partir para um PWA (Progressive Web App), para vis ...@@ -95,4 +109,4 @@ Como a ideia deste projeto é partir para um PWA (Progressive Web App), para vis
O `npm run build` permite que você execute quaisquer tarefas de construção / preparação necessárias para o seu projeto. 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. 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.
\ No newline at end of file
Clone repository
  • arquitetura
  • aws
  • banco_dados
  • codigo
  • configuracao
  • design
  • docker
  • escopo
  • gestao conhecimento
  • gitlab runner
  • Home
  • instrucoes
  • processo
  • qualidade
  • utilizacao