Skip to content

GitLab

configuracao · Changes

Page history
Update configuracao authored by João Vitor Bernardi Severo's avatar João Vitor Bernardi Severo
Hide whitespace changes
Inline Side-by-side
configuracao.md
View page @ e2682e0c
......@@ -8,18 +8,7 @@ Aqui deve ser explicado como configurar o Ambiente para que os Desenvolvedores d
* 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
## Configuração do Ambiente de Desenvolvimento Backend
[Veja os vídeos explicando os passos.](https://drive.google.com/drive/u/1/folders/1E8Jvz3b9zKBpBjWnCmphDAoCwD8HvcZh)
## Configuração do Ambiente de Desenvolvimento Frontend
A configuração do ambiente é muito semelhante no Windows e no MacOs.
Execução do projeto pode variar dependendo do estilo de visualização que você escolher.
### Instalando o Node
## Instalação do Node (utilizado no back e no front)
**Instalação**
......@@ -43,6 +32,154 @@ C:\user\npm-v
v6.14.6
```
## Fazendo clone do projeto (baixando para a máquina local)
Para fazer o clone do projeto deve-se ir à tela inicial do projeto do nosso time [Link do time APPOIO](https://tools.ages.pucrs.br/appoio)
Na página no time basta selecionar qual o repositório que deseja clonar:
1. [Backend](https://tools.ages.pucrs.br/appoio/backend)
2. [Frontend](https://tools.ages.pucrs.br/appoio/frontend)
3. [Wiki](https://tools.ages.pucrs.br/appoio/appoio-wiki)
> Não baixe a wiki, utilize a plataforma do gitlab para isso é mais simples.
Após selecionar o repositório que deseja clonar irá aparecer um botão escrito "clone" no canto 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 nós iremos para um terminal (Command prompt no Windows) na nossa máquina, e digitar os seguintes comandos:
* git clone "link copiado aqui"
> Não coloque as aspas, somente o link
Pronto, você agora possui uma instância local do repositório!
---
## Configuração do Ambiente de Desenvolvimento Backend
Caso se sinta mais confortável com vídeos pode acessar [estes aqui](https://drive.google.com/drive/u/1/folders/1E8Jvz3b9zKBpBjWnCmphDAoCwD8HvcZh), ou seguir o texto.
O backend possui um arquivo de configuração que pode ser utilizar de forma mais profunda caso se queira simular o ambiente de deploy, além de alguns programas auxiliares. Esses programas vão nos ajudar a garantir que estamos desenvolvendo corretamente e tentar identificar os problemas que possam ocorrer no desenvolvimento.
### Instalando aplicações
* Visual Studio Code: [link para download do VisualStudio Code](https://code.visualstudio.com/download)
* Postman: [link para download do Postman](https://www.postman.com/downloads)
* DB Broswer for SQLite: [link para download do DB Browser](https://sqlitebrowser.org/dl/)
**VisualStudio Code**
O VisualStudio Code é um editor de código simples e que pode ser extendido através de plugins que podemos adicionar posteriormente, vamos utilizar ele para programar.
Para abrir o repositório do backend já clonado para sua máquina no VisualStudio Code siga os seguintes passos:
1. Abra o VisualStudio Code
2. Clique em Arquivo/File no canto superior direito, isso irá abrir um menu
3. Selecione Abrir pasta/Open folder no menu que abriu
4. Navegue até o local onde fez clone do repositório
5. Selecione a pasta do repositório, por exemplo:
```
C:\users\usuario1\backend
```
6. Clique em Selecionar pasta/Select folder
Pronto, o repositório do projeto está aberto no VisualStudio Code!
**Postman**
O Postman vai nos ajudar a testar o nosso código quando estiver "no ar", ou seja, quando executarmos o nosso servidor vamos utilizar o Postman para enviar requisições para as rotas que criamos, seja criar um usuário ou recuperar todos os tutoriais cadastrados, esse cara vai nos ajudar.
Ao abrir o Postman nos deparamos com uma tela com algumas opções, para começar a utilizar vamos aos seguintes passos:
1. Clicar no boão (+ New)
2. Selecionar a opção Request
3. Colocar o nome do Request que iremos fazer, por exemplo GET TUTORIAIS
4. Criar uma coleção caso não exista nenhuma, através do botão (+ Create Collection)
5. Inserir o nome da coleção, por exemplo APPOIO
6. Clica no botão Save to APPOIO.
Pronto, temos um Request criado, agora o Postman nos mostra uma tela com um botão dropdown escrito GET, se clicarmos nele podemos ver todos os métodos HTTP que o Postman suporta e que podemos utilizar para testar nosso servidor.
> Para saber mais sobre métodos HTTP [clique aqui](https://www.tutorialspoint.com/http/http_methods.htm)
Caso o nosso servidor esteja executando podemos testá-lo (caso não saiba como executá-lo navegue mais abaixo onde possui um tutorial explicativo ou veja os vídeos disponibilizados) inserindo no campo onde está escrito "Enter request URL" o endereço do nosso servidor, resumidamente:
1. Selecione o método GET, caso não esteja selecionado
2. Insira no campo o endereço "http://localhost:8080/api/check"
3. Clique no botão Send
Pronto, acaba de fazer a primeira requisição para o servidor, se tudo deu certo, você deve ter aparecido uma tela abaixo com a reposta do nosso servidor que, para o endereço informado, foi:
```
{
"status": "Ok"
}
```
Uma mensagem que foi programada manualmente para verificar se o nosso servidor está rodando.
**DB Browser for SQLite**
O DB Browser irá abrir o nosso banco de desenvolvimento para vermos o que já inserimos para garantir que não fizemos besteira na hora de criação dos nossos registros.
Ao abrir o DB Browser, nenhum banco foi aberto ainda, nós precisamos dizer para ele qual banco queremos ver, para isso basta clicar no botão "Abrir banco de dados" na parte superior do aplicativo mais a esquerda, ao clicar irá abrir uma janela do sistema para procurar o arquivo do banco, caso você já tenha executado o projeto ao menos uma vez anteriormente, na raiz do projeto deve ter um arquivo chamado database.sqlite3, basta dar dois cliques ou clicar em Abrir para abrir o banco no seu DB Browser.
Prontinho, você já tem o banco aberto.
Para visualizar os registros seleciona a aba "Navegar dados"
Caso queria ver a estrutura do seu banco (colunas, fk, pk...) basta utilizar a aba "Estrutura do banco de dados" e abrir a árvore de tabelas (clicar na setinha do lado de "Tabelas")
Para executar comandos SQL diretamente no banco deve navegar para a aba "Executar SQL" e digitar o comando no primeiro campo de texto, depois de inserir o SQL só precisa clicar no botão > para executar, o resultado do seu comando será exibido logo abaixo.
Para alterações mais rápidas e práticas é possível utilizar a aba "Navegar dados" para alterar diretamente os registros e as tabelas selecionando o campo e alterando seu valor na janela ao lado.
### Rodando o projeto
Para executar o projeto nós precisamos de duas coisas essenciais:
1. Ter feito o clone do projeto
2. Ter o node instalado e configurado no sistema
Com os dois prontos nós já podemos rodar o projeto:
Na raiz do projeto execute o comando: npm install
```
C:\users\backend>npm install
audited 283 packages in 2.451s
found 0 vulnerabilities
```
> A saída pode ser diferente, o importante é não ter aparecido nenhum erro
Agora basta digitar o comando na raiz do projeto: node .\index.js dev
```
C:\users\backend>node .\index.js dev
PI Server started and listening on port 8080 (development)
Executing (default): CREATE TABLE IF NOT EXISTS `user` (`id` INTEGER PRIMARY KEY AUTOINCREMENT, `name` VARCHAR(50) NOT NULL, `email` VARCHAR(100) NOT NULL UNIQUE, `password` VARCHAR(255) NOT NULL, `birthday` DATETIME NOT NULL, `city` VARCHAR(50) NOT NULL, `uf` VARCHAR(2) NOT NULL);
...
```
> A saída pode ser diferente, o importante é não ter aparecido nenhum erro
Pronto, o servidor está executando localmente na sua máquina no endereço:
http://localhost:8080/api
Caso queira utilizar um banco MySQL na AWS basta alterar os parâmetros informados na linha de comando
Para executar com o MySQL da AWS use o comando abaixo, substituindo os parâmetros pelos seus dados:
node .\index.js prod "databasename" "username" "password" "host" "port"
> Não utilize as aspas somente os valores
Ou seja:
```
C:\users\backend>node .\index.js prod production_db admin 12345678 prod_db.12hbkjnj1.sa-east-1.rds.amazonaws.com 5601
```
---
## Configuração do Ambiente de Desenvolvimento Frontend
A configuração do ambiente é muito semelhante no Windows e no MacOs.
Execução do projeto pode variar dependendo do estilo de visualização que você escolher.
### Instalando o Expo
**Instalação**
......@@ -79,7 +216,7 @@ Nesse arquivo adicione as seguintes linhas
}
```
## Executando o Projeto
### Executando o Projeto
Depois de clonar o repositório do GitLab para a sua máquina, acesse o projeto pelo terminal e execute `npm install`.
Esse comando irá fazer o download e todas dependências do projeto (esse comando pode demorar bastante para ser executado).
......