| | [Home](home) | [**Escopo**](escopo) | [Git Workflow](git-workflow) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Gerência](gerencia) | [BD](Banco de Dados) | [Qualidade](qualidade) | | ||
| | :----------: | :-------------------------------: | :------------------: | :--------------: | :--------------------------: | :--------------------: | :------------------------: | :--------------: | :---------------: | | ||
| # Definições de Configurações | ||
| # Pagina de configuração de projeto: | ||
| ## Sumário | ||
| - [Configurações Gerais](#configurações-gerais) | ||
| - [Configurando a IDE](#configurando-a-ide) | ||
| - [Clonando os Repositórios](cClonando-os-repositórios) | ||
| - [Configuração de Ambiente Backend](#configuração-de-ambiente-backend) | ||
| - [Configuração de Ambiente Frontend](#configuração-de-ambiente-frontend) | ||
| - [Extensões Recomendadas no VScode](#extensões-recomendadas-no-vscode) | ||
| 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 Gerais | ||
| ## Configuração de Ambiente Backend | ||
| ## Configurando a IDE | ||
| ### Para o Backend | ||
| A IDE recomendada para se trabalhar no backend é o TDB, pois atende todas as necessidades do projeto de forma prática. | ||
| <a href="https://docs.nestjs.com/first-steps"> | ||
| <img src="https://img.shields.io/badge/nestjs-%23E0234E.svg?style=for-the-badge&logo=nestjs&logoColor=white"/> | ||
| </a> | ||
| Link para instalação da IDE: [link](link) | ||
| <a href="https://swagger.io/"> | ||
| <img src="https://img.shields.io/badge/-Swagger-%23Clojure?style=for-the-badge&logo=swagger&logoColor=white"/> | ||
| </a> | ||
| ### Para o Frontend | ||
| Texto | ||
| <a href="https://www.prisma.io/"> | ||
| <img src="https://img.shields.io/badge/Prisma-3982CE?style=for-the-badge&logo=Prisma&logoColor=white"/> | ||
| </a> | ||
| ## Clonando os Repositórios | ||
| <a href="https://docs.docker.com/"> | ||
| <img src="https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white"/> | ||
| </a> | ||
| ### Para o Backend | ||
| Para clonar o repositório do backend em seu computador basta executar um dos comandos abaixo: | ||
| Via HTTP: | ||
| ``` | ||
| git clone http://tools.ages.pucrs.br/projeto/projeto | ||
| ``` | ||
| Via SSH: | ||
| ``` | ||
| git clone ssh://[email protected]:8822/projeto/projeto | ||
| ``` | ||
| ### Para o Frontend | ||
| 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. | ||
| Para clonar o repositório do frontend em seu computador basta executar um dos comandos abaixo: | ||
| Via HTTP: | ||
| ``` | ||
| git clone http://tools.ages.pucrs.br/projeto/projeto.git | ||
| ``` | ||
| ## Índice | ||
| - [Pré-requisitos](#pré-requisitos) | ||
| - [Instalação](#instalação) | ||
| - [Configuração do Ambiente](#configuração-do-ambiente) | ||
| - [Configuração do Banco de Dados](#configuração-do-banco-de-dados) | ||
| - [Executando a Aplicação](#executando-a-aplicação) | ||
| - [Formatação e Linting de Código](#formatação-e-linting-de-código) | ||
| - [Hooks do Git](#hooks-do-git) | ||
| - [Documentação da API](#documentação-da-api) | ||
| - [Contribuindo](#contribuindo) | ||
| ## 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:** | ||
| ```bash | ||
| git clone https://tools.ages.pucrs.br/cosmos/cosmos-backend.git | ||
| ``` | ||
| 2. **Instale as dependências:** | ||
| Usando npm: | ||
| ```bash | ||
| npm install | ||
| ``` | ||
| Ou usando Yarn: | ||
| ```bash | ||
| yarn install | ||
| ``` | ||
| ## Configuração do Ambiente | ||
| 1. **Crie um arquivo `.env` no diretório raiz** e adicione as seguintes variáveis de ambiente: | ||
| ```bash | ||
| # .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`:** | ||
| ```bash | ||
| # .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: | ||
| ```bash | ||
| npx prisma migrate dev | ||
| ``` | ||
| 3. **(Opcional) Popular o banco de dados:** | ||
| Se você tiver dados de seed disponíveis, execute o seguinte comando: | ||
| ```bash | ||
| npx prisma db seed | ||
| ``` | ||
| ## Executando a Aplicação | ||
| 1. **Inicie o servidor de desenvolvimento:** | ||
| ```bash | ||
| npm run start:dev | ||
| ``` | ||
| Ou se você estiver usando Yarn: | ||
| ```bash | ||
| yarn start:dev | ||
| ``` | ||
| O servidor será iniciado 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: | ||
| ```bash | ||
| npm run format | ||
| ``` | ||
| 2. **ESLint** é utilizado para verificar o código TypeScript. Para rodar o ESLint: | ||
| ```bash | ||
| 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: | ||
| ```bash | ||
| npm run prepare | ||
| ``` | ||
| ## Documentação da API | ||
| A documentação da API é gerada automaticamente com o Swagger e está disponível em: | ||
| Via SSH: | ||
| ``` | ||
| git clone ssh://[email protected]:8822/projeto/projeto.git | ||
| http://localhost:3001/api | ||
| ``` | ||
| ## Configuração de Ambiente Backend | ||
| ## 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. | ||
| - Configuração completa do ambiente de desenvolvimento disposta no readme do repositório. | ||
| - Configurando a Máquina | ||
| #### 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. | ||
| ## Configuração Ambiente Frontend | ||
| ## Requisitos | ||
| - Configuração completa do ambiente de desenvolvimento disposta no readme do repositório. | ||
| - Configurando a Máquina | ||
| 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. | ||
| - [NPM ](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) | ||
| - [Node.js](https://nodejs.org/en) | ||
| - [VS Code](https://code.visualstudio.com/download) | ||
| # Extensões Recomendadas no VScode | ||
| #### Extensões Obrigatórias | ||
| - [EditorConfig](https://editorconfig.org/) | ||
| - [SVG Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview) | ||
| - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) | ||
| - [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) | ||
| - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) | ||
| - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) | ||
| - [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) | ||
| #### 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 | ||
| ``` | ||
| \ No newline at end of file |