Skip to content

GitLab

Last edited by Leonardo Vargas Soares
Page history

Configuracao

Home Escopo Git Workflow Design/Mockups Configuração Arquitetura Gerência BD Qualidade

Sumário

Pagina de configuração de projeto:

Bem-vindo à página de configuração de projetos! Aqui, você encontrará todas as informações necessárias para configurar um projeto com sucesso.

Configuração de Ambiente Backend

Este é o backend do projeto Cosmos, construído com Node.js, TypeScript e o framework NestJS. O banco de dados é gerenciado com PostgreSQL, e o projeto utiliza Prisma como ORM.

Índice

Pré-requisitos

Antes de clonar o repositório, certifique-se de ter o seguinte instalado em sua máquina:

  • Node.js (v18.x ou superior)
  • npm (v9.x ou superior) ou Yarn (v1.x ou superior)
  • PostgreSQL (v13.x ou superior)
  • Docker
  • Git

Instalação

  1. Clone o repositório:

    git clone https://tools.ages.pucrs.br/cosmos/cosmos-backend.git

  2. Instale as dependências:

    Usando npm:

    npm install

    Ou usando Yarn:

    yarn install

Configuração do Ambiente

  1. Crie um arquivo .env no diretório raiz e adicione as seguintes variáveis de ambiente:

    # .env
DATABASE_URL="postgresql://<usuario>:<senha>@<host>:<porta>/<banco_de_dados>?schema=public"

    Substitua os placeholders (<usuario>, <senha>, <host>, <porta>, e <banco_de_dados>) com as credenciais reais do seu banco de dados.

    Quando executar o backend com o docker-compose o host será: postgres

  2. Exemplo de arquivo .env:

    # .env
DATABASE_URL="postgresql://postgres:cosmos@localhost:5432/cosmos_db?schema=public"

Configuração do Banco de Dados

  1. Crie o banco de dados PostgreSQL:

    Se você ainda não criou o banco de dados, siga estes passos:

    • Abra o pgAdmin ou use a linha de comando para criar um novo banco de dados chamado cosmos_db (ou o nome de sua preferência).

  2. Execute as migrações do banco de dados:

    Isto criará as tabelas necessárias no seu banco de dados:

    npx prisma migrate dev

  3. (Opcional) Popular o banco de dados:

    Se você tiver dados de seed disponíveis, execute o seguinte comando:

    npx prisma db seed

Executando a Aplicação

  1. Inicie o servidor de desenvolvimento:

    npm run start:dev

    Ou se você estiver usando Yarn:

    yarn start:dev

    O servidor será iniciado em http://localhost:3001.

Executando a Aplicação com o Docker (Backend e Banco de Dados)

  1. Garanta que você está com o docker em execução e digite o seguinte comando no terminal do VSCode:

    docker-compose -f docker-compose.dev.yml up

    Esse comando irá iniciar a execução do backend e do banco de dados.

  2. Para parar a execução do docker, neste mesmo terminal aperte Ctrl + C e em seguida digite o seguinte comando:

    docker-compose -f docker-compose.dev.yml down -v

    Esse comando para e remove os containers, redes e volumes associados ao arquivo docker-compose.dev.yml.

  3. Caso você queira acessar o banco de dados, abra um terminal bash no VSCode e digite o seguinte comando:

    docker exec -it cosmos-db psql -U cosmos -d cosmos

    Neste terminal você pode usar a sintaxe SQL padrão, por exemplo:

    SELECT * FROM "User";

    Após esses comandos, você pode acessar o servidor rodando em http://localhost:3001.

Formatação e Linting de Código

  1. Prettier é utilizado para formatação de código. Você pode formatar seu código executando:

    npm run format

  2. ESLint é utilizado para verificar o código TypeScript. Para rodar o ESLint:

    npm run lint

Hooks do Git

O Husky está configurado para garantir a qualidade do código antes dos commits:

  • Hook de Pre-commit: Executa o lint-staged para formatar e verificar os arquivos que serão commitados.

    Certifique-se de que o Husky está devidamente instalado executando:

    npm run prepare

Documentação da API

A documentação da API é gerada automaticamente com o Swagger e está disponível em:

http://localhost:3001/api

Configuração de Ambiente Frontend

Nesta sessão, vamos apresentar o passo a passo de como instalar e configurar um ambiente de desenvolvimento local para utilizar o React pré-configurado para TypeScript.

O que é React?

O React é uma biblioteca JavaScript que permite criar interfaces com o usuário de forma declarativa, flexível e eficiente. Essa biblioteca é de código aberto e permite a composição de UI's complexas a partir de pequenos e isolados códigos denominados "componentes". Em outras palavras, o React é uma ferramenta que ajuda a construir a interação entre humanos e máquinas por meio de elementos como botões, menus e sons, tornando essa interação mais fácil e intuitiva.

O que é TypeScript?

O TypeScript é uma linguagem de programação de código aberto, desenvolvida pela Microsoft, que funciona como um superset de JavaScript. Ele adiciona recursos como tipagem estática opcional à linguagem, tornando-a mais robusta e poderosa, especialmente para projetos complexos. Em outras palavras, o TypeScript é uma ferramenta que amplia as funcionalidades da linguagem JavaScript, proporcionando maior eficiência e produtividade no desenvolvimento de aplicações.

Requisitos

O editor escolhido é o Visual Studio Code, desenvolvido pela Microsoft para sistemas operacionais Windows, Linux e macOS, possui diversas funcionalidades, tais como suporte para depuração, controle de versionamento Git integrado, realce de sintaxe, complementação inteligente de código, snippets e refatoração de código.

Para utilizarmos o React e rodar as aplicações no navegador será necessário a instalação do NPM (Node Package Manager) que é o responsável pelo gerenciamento dos pacotes de aplicativos, inclusive o próprio React. Para isso, precisaremos instalar o Node.js, que é uma plataforma de desenvolvimento web de alta performance usando JavaScript, e que possuí o NPM como parte do pacote.

Extensões Obrigatórias

Instalação

Adicionar um arquivo na raiz do projeto com o nome ".env". O arquivo deve ter como conteúdo:

REACT_APP_API_URL='http://localhost:3001'

Execute os seguintes comandos no terminal:

npm install
npm start