configuracao

Home	Escopo e Cronograma	Processo	Design/Mockups	Configuração	Arquitetura	Código	BD	Qualidade	Utilização

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.

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 -f docker-compose-database.yml up. 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

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:

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

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.
Quando o clone terminar, abrir a pasta do projeto no VS Code: code adote-um-amanha-frontend.
No VS Code, abrir o terminal (Ctrl + J) e instalar os módulos do npm: npm install
Após a instalação é possível executar o projeto rodando npm run serve.
O projeto estará rodando e poderá ser acessado pelo seu navegador no endereço http://localhost:3000.

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:

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:

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