| | [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) | | | [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 | 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çõ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) | |||
| # Configuração Gerais | ## Configuração de Ambiente Backend | ||
| ## Configurando a IDE | |||
| ### Para o Backend | <a href="https://docs.nestjs.com/first-steps"> | ||
| A IDE recomendada para se trabalhar no backend é o TDB, pois atende todas as necessidades do projeto de forma prática. | <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 | <a href="https://www.prisma.io/"> | ||
| Texto | <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: | 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. | ||
| ``` | |||
| git clone http://tools.ages.pucrs.br/projeto/projeto | |||
| ``` | |||
| Via SSH: | |||
| ``` | |||
| git clone ssh://[email protected]:8822/projeto/projeto | |||
| ``` | |||
| ### Para o Frontend | |||
| Para clonar o repositório do frontend em seu computador basta executar um dos comandos abaixo: | ## Índice | ||
| Via HTTP: | |||
| ``` | - [Pré-requisitos](#pré-requisitos) | ||
| git clone http://tools.ages.pucrs.br/projeto/projeto.git | - [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. | #### O que é React? | ||
| - Configurando a Máquina | |||
| 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. | 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. | ||
| - Configurando a Máquina | |||
| 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/) | - [ESlint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) | ||
| - [SVG Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview) | |||
| - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) | |||
| - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) | - [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 |