Home	Escopo	Processo	Design/Mockups	Configuração	Arquitetura	Gerência	Código	BD	Qualidade	Frontend	Backend	Analytics

Configuração do projeto

Esta seção da Wiki visa apresentar o passo a passo de como configurar o ambiente de desenvolvimento do projeto Globo Aplausos.

Sumário

• Configuração do projeto
  • Sumário
  • Passo a Passo para configurar o projeto
  • Instalando MySQL
  • Instalando Docker Desktop
  • Conectando o Banco de Dados ao Backend
    • Utilizando MySQL local
      • Prisma Studio
    • Utilizando MySQL no Docker
    • Instalando MySQL com XAMPP
      • Realizando a conexão

Passo a Passo para configurar o projeto

1. Você deve garantir que tem NodeJS instalado para rodar ambos os projetos. Para verificar a versão atual do seu NodeJs digite em algum terminal o comando: node --version ou node -v. Caso não tenha, realize a instalação através do LINK, e baixe a versão LTS (a versão estável atualizada).

2. Após instalar o node o NPM será instalado na sequência. Para verificar a versão da instalação digite no terminal o comando: npm --version ou npm -v.

3. Com as ferrametas instaladas, você vai clonar os projetos Frontend | Backend em uma pasta local, de sua preferência, através do comando git clone https://tools.ages.pucrs.br/globo-aplausos/globo-aplausos-frontend.git e posteriormente git clone https://tools.ages.pucrs.br/globo-aplausos/globo-aplausos-backend.git (para isso você precisará do GIT).

4. Com NodeJS e NPM instalados, bem como ambos os projetos clonados, você vai acessar a pasta raiz de cada projeto e digitar no terminal comando npm install, para instalar as dependências do projeto.

5. Para rodar cada projeto digite no terminal o comando npm run dev, automaticamente irá abrir uma aba do seu navegador com o projeto nas seguintes portas, ou acesse o localhost nas seguintes portas:

• Frontend: 3000
• Backend: 8080

Caso esteja utilizando Docker, utilize o comando: docker compose up --build para subir o container da aplicação.

Instalando MySQL

Para instalar o Banco de Dados MySQL localmente, você tem três opções principais:

A primeira involve instalar o servidor oficial e o MySQL Workbench, que é uma ferramenta de administração do MySQL. Para isso, siga os seguintes passos:

A segunda alternativa seria utilizar o Docker, que é uma ferramenta de virtualização de containers. Para isso, siga os passos descritos na próxima seção Instalando Docker Desktop.

Por fim, a terceira alternativa e, possívelmente que involve menos configuração, seria utilizar um pacote de servidores como o XAMPP e inicializar o MySQL localmente, para isso, siga o passo a passo disponível ao final desta seção (Instalando MySQL com XAMPP).

Escolha a opção do download do MySQL Installer Web Community.

Clique para começar o download.

Com o instalador baixado, execute e selecione a opção de instalação customizada.

Primeiro, selecione uma versão do SQL para baixar (pode ser a mais recente), e clique na seta verde para adicionar a instalação.

Logo após, repita o mesmo processo para a instalação do MySQL Workbench.

Os produtos a serem instalados devem ser os seguintes:

Neste passo podemos deixar a configuração padrão.

Aqui, escolha a autenticação de strong password.

Neste passo, escolha uma senha que será utilizada para o usuário raiz do MySQL.

Aqui podemos deixar a configuração padrão também.

Aqui podemos deixar a configuração padrão também.

Por fim, clique em executar, aguarde os processos e finalize a instalação do MySQL.

Pronto! Com o MySQL instalado localmente podemos realizar a conexão da aplicação com o banco de dados.

Instalando Docker Desktop

1. Baixe e instale o Docker, caso seu sistema seja Windows siga o passo a passo, se for Linux ou MacOS não é necessário.

2. Execute um terminal PowerShell como administrador e execute os seguintes comandos:

• Para habilitar o Subsistema do Windows para Linux dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
• Para habilitar o recurso de Máquina Virtual
  dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
  Após estes passos reinicie sua máquina.

3. Baixe o pacote de atualização do kernel do Linux através do seguinte comando em um terminal wsl.exe --install ou wsl.exe --update, caso não consiga baixe manualmente pelo link estático.

4. Defina o WSL 2 como a sua versão padrão wsl --set-default-version 2.

5. Instale alguma distribuição Linux, o recomendado é que instale a versão mais recente e estável Ubuntu através do comando wsl --install -d Ubuntu, ou entre na Microsoft Store e baixe a versão de sua preferência.

6. Abra o subsistema (procure Ubuntu no menu Windows) e crie seu usuário, digite um username de sua preferência e uma senha (por padrão a senha não aparece no terminal, apenas digite e pressione enter).

7. Abra o Docker Desktop, clique em Settings e depois em Resources, se tudo estiver certo irá aparecer a mensagem:

• You are using the WSL 2 backend, so resource limits are managed by Windows.

Se desejar, clique no link indicado em Resources e siga o tutorial para limitar os recursos destinados para o subsistema, para diminuir o consumo de recursos do Docker.

Conectando o Banco de Dados ao Backend

Para conectar o MySQL com o backend do Globo Aplausos é necessário seguir os seguintes passos:

Utilizando MySQL local

Primeiro, abra o MySQL Workbench e entre na conexão da instância local, o login irá pedir a senha que você utilizou para o usuário raiz do MySQL.

Com a instância local aberta, vá em Server e selecione a opção Users and Privileges.

Clique na opção Add Account

Preencha as informações de Login, Host e escolha uma senha para este usuário. Recomendo que deixe o usuário com nome globo e a senha aplausos123, e então clique em Apply.

Com o usuário criado, selecione-o na lista de User Accounts e vá em Admnistrative Roles, conceda todas permissões ao usuário globo e clique em Apply novamente.

Agora, podemos retornar ao menu inicial do MySQL Workbench fechando a conexão com a instância local. E então clicar no símbolo de + para criarmos uma nova instância que será utilizada pelo Globo Aplausos.

No prompt de setup de uma conexão nova, preencher o Connection name com o nome globoaplausos e o Username que vai fazer a conexão é o globo.

Será pedida a senha para o usuário globo, que por padrão será aplausos123.

Se tudo funcionar corretamente você será direcionado para a tela do Workbench do globoaplausos.

Prisma Studio

Uma outra opção para visualização do banco de dados é utilizando o Prisma Studio. Após realizar a conexão com o banco, para visualizar os dados inseridos é necessário rodar os seguintes comandos: npx prisma introspect e então npx prisma studio para que a interface de visualização do prisma seja iniciada.

Se tudo der certo, teremos uma instância do prisma studio rodando localmente.

E, ao acessarmos o endereço da instância podemos visualizar e editar as tabelas presentes

Utilizando MySQL no Docker

Utilizando o MySQL no Docker, ao rodarmos o comando de docker compose up, é necessário que concedamos as permissões de acesso e criação para nosso usuário no container. Para fazer isso é necessário rodar os seguintes comandos no terminal:

Para acessar o terminal do container rodamos o seguinte comando: docker exec -it mysql /bin/bash

Após, podemos rodar este comando para acessar o MySQL Client mysql -u root -p

No terminal do MySQL, podemos rodar os seguintes comandos:

GRANT ALL PRIVILEGES ON *.* TO 'globo'@'%' WITH GRANT OPTION; e GRANT CREATE ON *.* TO 'globo'@'%';

(Opcional) Para conferir se as permissões foram adicionadas corretamente execute o comando:

SHOW GRANTS FOR 'globo'@'%';

Por fim, reinicie o container do MySQL.

docker restart mysql

Instalando MySQL com XAMPP

Para instalar o MySQL com o XAMPP, basta baixar o pacote de instalação do XAMPP através do LINK e seguir os passos de instalação.

Tela inicial da instalação da ferramenta

Instalar apenas servidor necessário (MySQL)

Escolher uma pasta vazia para guardar as configurações do programa (recomenda-se manter o padrão no C:/)

Por fim, cada vez que quiser iniciar o servidor, basta clicar no botão Start ao lado do nome do servidor MySQL

Pronto, agora estamos com um servidor rodando na porta local :3306

Após a instalação, podemos iniciar o servidor do MySQL através do painel de controle do XAMPP.

É importante ressaltar que, por padrão, o usuário deste banco de dados é root e a senha é vazia ( )

Realizando a conexão

Com o MySQL rodando de forma local ou no Docker, podemos acessar o repositório do backend do Globo Aplausos e iniciar a última parte da configuração seguindo os seguintes passos:

1. Criando um arquivo .env seguindo a estrutura do arquivo .env.example.

2. Na variável DABATASE_URL, inserir a url de conexão com o banco, que será a seguinte mysql://meusuariodosql:senhadousuario@localhost:3306/globoaplausos.

Seguindo o processo de instalação descrito acima, devemos ficar com a url mysql://globo:aplausos123@localhost:3306/globoaplausos.

3. Por fim, podemos rodar o comando npx prisma migrate dev, para que o Prisma realize a migração das tabelas para o banco e crie os usuários padrão da aplicação.

Se o processo ocorrer de forma esperada, teremos o banco de dados com as tabelas criadas e populadas com os usuários iniciais da aplicação.