|
| [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 |