Skip to content

GitLab

Turmas de Terça e Quinta, entrega FINAL HOJE! Dia 21/11, Apresentação da Sprint 4 para os stakeholders.

Last edited by Murilo Machado
Page history

Configuração

Home Escopo Gerência Processo Mockups Configuração Arquitetura DataBase Infraestrutura

Descrição

Esta seção apresentará todas as configurações necessárias dos ambientes do Front-end e Back-end.

Sumário

Instalação de uma IDE:

  1. IntelliJ IDEA:
    • Acesse a página de downloads do IntelliJ IDEA.
    • Baixe a versão Community (gratuita) ou a versão Ultimate (paga, com mais recursos).
    • Siga as instruções de instalação para o seu sistema operacional.
    • Após a instalação:
      1. Abra o IntelliJ IDEA.
      2. Selecione Open e navegue até o diretório do projeto.
      3. Selecione o diretório e clique em OK para abrir o projeto.
  2. Visual Studio Code (VSCode):
    • Acesse a página de downloads do VSCode.
    • Baixe e instale a versão apropriada para o seu sistema operacional.
    • Após a instalação, abra o VSCode e importe o projeto:
      1. Abra o VSCode.
      2. Selecione File > Open Folder e navegue até o diretório do projeto.
      3. Selecione o diretório e clique em Open.

Configuração do Front-end:

Pré-requisitos

  1. Node.js
  2. npm

Passo 1: Instalando Node.js e npm

  1. Acesse o site oficial do Node.js: Node.js Downloads.
  2. Siga as instruções do instalador. Durante a instalação, você pode selecionar as opções padrão.
  3. Você pode verificar se o Node.js está instalado rodando node -v no terminal. Para o npm, use npm -v.
node -v
npm -v

Passo 2: Clonando o Repositório

  1. Navegue até o diretório onde você deseja clonar o projeto
  2. Clone o repositório usando o comando git clone
git clone https://link_copiado_do_gitLab

Passo 3: Iniciando

Para começar, siga os passos abaixo para instalar as dependências e iniciar o servidor de desenvolvimento:

npm install
npm run dev

Passo 4: Executando a Aplicação

Após configurar e instalar as dependências, você pode iniciar a aplicação:

  1. Execute o comando npm run dev para iniciar o servidor de desenvolvimento.
  2. Abra http://localhost:3000 no seu navegador para visualizar a aplicação.

Configuração do Back-end:

Pré-requisitos

Certifique-se de ter a versão atualizada dos seguintes itens instalados em sua máquina:

  1. Java Development Kit (JDK)
  2. IDE (IntelliJ IDEA ou Visual Studio Code)
  3. Apache Maven

Passo 1: Instalar o JDK

  1. Baixar e instalar o JDK:
    • Acesse a página de downloads do JDK ou o OpenJDK.
    • Baixe a versão mais recente disponível (estou utilizando o JDK 22).
    • Siga as instruções de instalação para o seu sistema operacional.
  2. Configurar a variável de ambiente JAVA_HOME:
    • Windows:
      1. Abra as Configurações do Sistema e vá para Variáveis de Ambiente.
      2. Adicione uma nova variável de sistema chamada JAVA_HOME com o caminho para a pasta onde o JDK foi instalado.
    • macOS/Linux:
      1. Abra o terminal e edite o arquivo de configuração do shell (.bashrc, .bash_profile, .zshrc, etc.).
      2. Adicione a linha: export JAVA_HOME=/caminho/para/o/jdk
      3. Execute source ~/.bashrc (ou o arquivo correspondente) para aplicar as alterações.
  3. Verificar a instalação:
    • Abra um terminal e execute java -version e javac -version para garantir que o JDK está instalado corretamente.

Passo 2: Instalar o Apache Maven

  1. Baixar e instalar o Maven:
  2. Configurar a variável de ambiente MAVEN_HOME:
    • Windows:
      1. Abra as Configurações do Sistema e vá para Variáveis de Ambiente.
      2. Adicione uma nova variável de sistema chamada MAVEN_HOME com o caminho para a pasta onde o Maven foi extraído.
      3. Adicione o diretório bin do Maven ao PATH:
        • Selecione a variável Path e clique em Editar.
        • Adicione o caminho %MAVEN_HOME%\bin.
    • macOS/Linux:

      1. Abra o terminal e edite o arquivo de configuração do shell (.bashrc, .bash_profile, .zshrc, etc.).

      2. Adicione as linhas:

        export MAVEN_HOME=/caminho/para/o/apache-maven-x.y.z
export PATH=$MAVEN_HOME/bin:$PATH

      3. Execute source ~/.bashrc (ou o arquivo correspondente) para aplicar as alterações.

  3. Verificar a instalação:
    • Abra um terminal e execute mvn -v para garantir que o Maven está instalado corretamente.

Passo 3: Executar o Projeto

  1. Importar o Projeto:
    • No IntelliJ IDEA, o projeto deve ser carregado automaticamente. Se necessário, sincronize o projeto com o Maven ou Gradle (ícones geralmente localizados na parte superior direita da janela do IntelliJ).
    • No VSCode, o projeto deve ser carregado automaticamente após a abertura. Você pode precisar configurar a execução do Maven ou Gradle conforme necessário.
  2. Executar o Projeto:
    • No IntelliJ IDEA:
      1. Navegue até o arquivo principal de aplicação;
      2. Clique com o botão direito no arquivo e selecione Run 'Application'.
    • No VSCode:
      1. Abra o terminal integrado (Ctrl+ `).
      2. Navegue até o diretório do projeto se necessário.
      3. Execute o comando ./mvnw spring-boot:run.

Configuração do Banco de Dados com Spring:

Adicionando dependências: Dependências, quando combinadas, asseguram que a aplicação possa interagir com o banco de dados MySQL de maneira eficiente e robusta. A dependência spring-boot-starter-data-jpa fornece uma camada de abstração que simplifica a manipulação de dados, permitindo o uso de JPA e Hibernate para mapear objetos Java para tabelas do banco de dados e gerenciar operações de persistência de maneira automatizada. Isso não só reduz o esforço necessário para escrever código de acesso a dados, como também melhora a manutenção e a escalabilidade da aplicação. Por sua vez, a dependência mysql-connector-java estabelece a conexão necessária entre a aplicação e o banco de dados MySQL, garantindo que as operações de leitura e escrita sejam realizadas de forma confiável e eficiente. Juntas, essas dependências permitem que a aplicação aproveite a automação, a flexibilidade e o desempenho do Spring Data JPA para gerenciar dados de forma eficaz.

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
    <version>3.3.3</version>
</dependency>
<dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
</dependency>

Definindo a configuração do banco de dados: O arquivo application.properties define a configuração do banco de dados no projeto Java Spring. Ele especifica a URL de conexão com o MySQL (spring.datasource.url), o nome de usuário (spring.datasource.username) e a senha (spring.datasource.password). A propriedade spring.jpa.hibernate.ddl-auto controla como o Hibernate gerencia o esquema do banco de dados, sendo configurado para atualizar o esquema automaticamente. Além disso, spring.jpa.show-sql=true faz com que as consultas SQL executadas sejam exibidas no console, ajudando na depuração.

spring.datasource.url=jdbc:mysql://localhost:3306/meditamente?createDatabaseIfNotExist=true
spring.datasource.username=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQLDialect

security.jwt.secret-key=3cfa76ef14937c1c0ea519f8fc057a80fc0d4a7420f8e8bcd0a7567c272e007b

security.jwt.expiration-time=3600000
security.jwt.refresh-token-expiration-time=432000000

Criando Entidades: A criação de entidades é realizada através da definição de classes Java que representam tabelas no banco de dados. Cada classe é anotada com a anotação @Entity, que indica ao Hibernate (ou outro provedor JPA) que a classe deve ser mapeada para uma tabela no banco de dados. As propriedades da classe correspondem às colunas da tabela, e são anotadas com @Column para especificar detalhes adicionais, como o nome da coluna e se ela pode ser nula. A chave primária é definida com a anotação @Id, e geralmente é gerada automaticamente usando a estratégia @GeneratedValue. Essas entidades são então usadas para criar, ler, atualizar e excluir registros no banco de dados de forma orientada a objetos, facilitando a manipulação dos dados e a manutenção do código.

Definindo a Interfaces de Repositório A classe Interfaces de Repositório em um projeto Java Spring com JPA atua como um intermediário entre a aplicação e o banco de dados, facilitando o acesso e a manipulação dos dados. Essas interfaces são definidas como extensões da interface JpaRepository ou CrudRepository, fornecidas pelo Spring Data JPA. Ao estender JpaRepository, a interface ganha métodos pré-definidos para operações básicas de CRUD (Create, Read, Update, Delete), como save(), findById(), findAll(), e deleteById(). Isso elimina a necessidade de implementar manualmente as operações de acesso a dados e permite que a aplicação se concentre na lógica de negócio.

Parâmetro JDBC URL

O parâmetro jdbc.url é uma configuração crucial para estabelecer a conexão entre uma aplicação e um banco de dados relacional. Ele especifica o endereço do banco de dados que a aplicação deve acessar, incluindo detalhes como o protocolo, o endereço do servidor, a porta e o nome do banco de dados. O formato básico do jdbc.url é:

jdbc:[database_type]://[host]:[port]/[database_name]

Em nosso projeto, o JDBC URL é:

jdbc:mysql://localhost:3306/meditamente?createDatabaseIfNotExist=true

A seguir temos as definições de cada parte que compõe a URL:

  • Protocolo (jdbc:):
    • Indica que o Java Database Connectivity (JDBC) está sendo usado para a conexão.
  • Tipo de Banco de Dados ([database_type]):
    • Define o tipo de banco de dados. Por exemplo, para MySQL é mysql, para PostgreSQL é postgresql, etc.
  • Endereço do Servidor ([host]):
    • O endereço IP ou o nome do host onde o servidor de banco de dados está localizado. Para um banco de dados local, pode ser localhost.
  • Porta ([port]):
    • O número da porta na qual o banco de dados está ouvindo as conexões. A porta padrão para MySQL, por exemplo, é 3306.
  • Nome do Banco de Dados ([database_name]):
    • O nome específico do banco de dados ao qual você deseja se conectar.

Como logar no banco de dados usando MySQL Workbench

  1. Abrir MySQL Workbench: Inicie o MySQL Workbench no seu computador.
  2. Criar uma Nova Conexão:
    • Clique em + ao lado de "MySQL Connections" para criar uma nova conexão.
    • Na tela de configuração, preencha as informações:
      • Connection Name: Nome da conexão (pode ser qualquer nome).
      • Hostname: O endereço do servidor MySQL, geralmente localhost para uma instalação local.
      • Port: A porta do MySQL, que geralmente é 3306.
      • Username: O nome de usuário do MySQL (por exemplo, root).
      • Password: A senha para o usuário fornecido.
    • Clique em Test Connection para verificar se as configurações estão corretas.
    • Clique em OK para salvar a conexão.
  3. Conectar-se ao Banco de Dados:
    • Clique duas vezes na nova conexão que você criou para se conectar ao banco de dados.

Como utilizar o MySQL com XAMPP

O XAMPP é um pacote com os principais servidores de código aberto do mercado, incluindo FTP, banco de dados MySQL e Apache. Com ele, é possível rodar sistemas localmente, o que facilita e agiliza o desenvolvimento, tendo em vista que o conteúdo estará armazenado numa rede local, tornando o acesso aos arquivos instantâneo.

Para instalar o XAMPP e configurar o MySQL, basta seguir os passos abaixo:

  1. Baixe o pacote de instalação do XAMPP: Acesse o link https://www.apachefriends.org/pt_br/index.htm e siga com os passos de instalação de seu sistema operacional utilizado.

image

  1. Abra o executável instalado: Você irá se deparar com a tela inicial da ferramenta. Seguindo para a próxima tela, instale apenas o servidor necessário (MySQL):

image

  1. Selecione o diretório: Escolha uma pasta vazia para guardar as configurações do XAMPP. Recomendamos que mantenha o padrão no C:\

image

  1. Inicialização do Servidor: Cada vez que desejar inicializar o servidor, basta você clicar no botão "Start" ao lado do nome do servidor MySQL. Caso deseje utilizar também a interface gráfica, inicie juntamente o Apache.

image

Após estes passos, você terá o servidor rodando na porta local 3306. É possível inicializar o servidor MySQL através do painel de controle do XAMPP. Por padrão, o usuário do banco de dado é "root" e a senha é uma string vazia ("").