Configurações do Projeto

Descrição

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

Configurações Gerais

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

Instalando o Node

Instalação

TBD

Verificação

TBD

Configurando a IDE

TBD

Clonando os Repositórios

TBD

Backend

Instalação do docker

https://www.docker.com/products/docker-desktop/

Clonar Backend

https://tools.ages.pucrs.br/adote-um-amanha/adote-um-amanha-backend

Docker Compose

Após o docker instalar com sucesso, acessar o terminal de comando e navegar até a pasta raiz do projeto, onde o arquivo docker-compose.yml se encontra, estando neste diretório, executar o comando docker-compose up -d. Isso irá fazer com que o banco e o seu administrador subam na sua máquina. Verifique se no docker se há dois containers e se ambos estão executando.

Administrado do Banco de Dados

Se tudo ocorreu corretamente, agora acesse a url http://localhost:5050/browser/ em seu navegador.

• Talvez aparece para colocar uma senha qualquer de admin, coloque uma fácil que irá se recordar caso seja pedido posteriormente em outro acesso.
• Já na dashboard do administrado do banco, crie um novo servidor, clicando no icone de Add a new Server ou pelo menu clicando com o botão direito em cima de Servers no lado esquerdo da tela.
• Na tela que abrir, na aba General no campo de texto Name coloque um nome de sua preferência para o servidor.
• Na aba seguinte, em Connection, os seguintes valores devem ser colocados nos campos de textos , em Hostname: postgres, em Username: ages e em Password: ages.
• O hostname é o nome do container criado por você, e que deve estar com o mesmo nome que aparece no seu docker, assim como a imagem acima, já o username e password são definidos no arquivo do docker compose no qual você executou o comando anteriormente.
• Para finalizar é só clicar em save, deve ter sido criado então o servidor com o nome que você deu.

Executar o backend

Deve ser baixado as dependecias do projeto, de preferencia recomendo executar o comando clean install do maven para evitar alguns erros bobos. Pelo IntellJ é possivél fazer isso no meu presente no lado direito da tela na aba lateral Maven.

• No arquivo application.yml, dentro da estrutura do projeto, na pasta resources. Há uma configuração que pega o mapeando das entidades feitas no backened e ja cria o banco para a gente fazendo o insert, caso tenha executado a primeira vez. De prefêrencia é bom trocar, para não ficar dando drop no banco inteiro toda vez que executar a aplicação. Portanto na linha 11 onde tem a seguinte configuração ddl-auto: create-drop deve ser trocado para ddl-auto: update.

• Dentro do banco criado por você, deve ter sido criado a tabela usuario

• Acesse dentro do banco a Query tool para executar comandos SQL.

• Insira um novo usuário com o comando insert into usuario(id_usuario, ativo, email, nome, perfil, senha) values (1, true, '[email protected]', 'email', 'ADMIN', '$2a$10$KDZdDpsS30B0YID4riOWoeUwfvRB5lXRB8WOoNFiO/nidARaU4haC')

• A senha é criptografada, a senha do usuário inserido no banco acima corresponde a palavra admin. Para inserir um novo usuário com uma senha diferente, use o site https://appdevtools.com/bcrypt-generator para saber o hash desta nova senha.

Instalação do postman

https://www.postman.com/downloads/

• Baixar a collection e importar no postman collection

• Disparar a requisição de login, se retornar o token, deu tudo certo!

Frontend

Frontend

O projeto Adote um Amanhã utiliza o framework VueJS para a construção do frontend. Mais informações sobre o Vue poderão ser encontradas na sua documentação.

IMPORTANTE: No nosso projeto será utilizado o Vue2, que possui algumas diferenças de sintaxe em relação ao Vue3. Ao ler a documentação, certifique-se de que ela é referente à versão 2 do framework.

Para baixar e utilizar o projeto, é necessário instalar as ferramentas abaixo:

• Visual Studio Code
• Node (npm) Versão 14
• Git

Tendo instalado as ferramentas, seguir os passos abaixo para baixar e executar o projeto:

1. Em uma pasta de sua preferência, abrir o terminal e clonar o projeto: git clone http://tools.ages.pucrs.br/adote-um-amanha/adote-um-amanha-frontend.git. Possivelmente será pedido o seu username e senha do gitlab.
2. Quando o clone terminar, abrir a pasta do projeto no VS Code: code adote-um-amanha-frontend.
3. No VS Code, abrir o terminal (Ctrl + J) e instalar os módulos do npm: npm install
4. Após a instalação é possível executar o projeto rodando npm run serve.
5. O projeto estará rodando e poderá ser acessado pelo seu navegador no endereço http://localhost:8080.

Extensões do Editor

Para facilitar e agilizar o processo de desenvolvimento, existem algumas extensões do VSCode que são recomendadas:

• Vetur: Extensão que contém várias facilidades para o desenvolvimento com Vue, como destaque de sintaxe, cores nos arquivos .vue e atalhos de código bastante úteis.
• ESLint: Extensão que sinaliza possíveis erros de sintaxe no Javascript.
• Prettier: Extensão que aplica formatação e identação nos arquivos automaticamente.

Configurando as extensões

Prettier

Para configurar o Prettier depois de instalá-lo, siga os passos abaixo:

1. No VS Code, pressione Ctrl + Shift + P, e no campo de texto que aparecer, digite Open Settings JSON e clique na opção que aparecer, para abrir o arquivo settings.json do VS Code:

2. No arquivo settings.json, cole os campos abaixo dentro das chaves mais externas. Isso serve para definirmos o Prettier como formatador padrão para os arquivos e para a formatação ser aplicada toda vez que salvarmos o arquivo.

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

Compilando

TBD

Executando

TBD