|
|
|
| [Home](home) | [Escopo e Cronograma](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [**Utilizacao**](utilizacao) |
|
|
|
|
| :--------------: | :---------------------------: | :------------------: | :--------------: | :--------------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: |
|
|
|
|
|
|
|
|
### Página de configuração do projeto:
|
|
|
|
Nessa página você encontrará todas as informações necessárias para configurar o projeto com sucesso.
|
|
|
|
|
|
|
|
<details open>
|
|
|
|
<summary> Docker </summary>
|
|
|
|
|
|
|
|
# Docker
|
|
|
|
|
|
|
|
**Tutorial de como instalar o Docker no Windows**
|
|
|
|
|
|
|
|
Antes de começar, é importante observar que o Docker for Windows só é compatível com as edições Windows 10 Pro, Enterprise ou Education e Windows Server 2016 ou versões mais recentes. Certifique-se de que você está executando uma dessas edições antes de prosseguir.
|
|
|
|
|
|
|
|
**Passo 1: Baixar o Docker Desktop**
|
|
|
|
|
|
|
|
1. Acesse o site oficial do Docker em [https://www.docker.com/products/docker-desktop](https://www.docker.com/products/docker-desktop).
|
|
|
|
2. Clique em "Get Docker Desktop for Windows" para fazer o download do instalador.
|
|
|
|
|
|
|
|
**Passo 2: Instalar o Docker Desktop**
|
|
|
|
|
|
|
|
1. Após o download ser concluído, execute o instalador do Docker Desktop (normalmente um arquivo com extensão `.exe`).
|
|
|
|
2. Na primeira tela de instalação, você pode escolher opções adicionais, como a criação de ícones na área de trabalho. Configure conforme suas preferências e clique em "Install" para iniciar a instalação.
|
|
|
|
|
|
|
|
**Passo 3: Configurar o Docker Desktop**
|
|
|
|
|
|
|
|
1. Após a instalação, o Docker Desktop será iniciado automaticamente. Um ícone de baleia (o logotipo do Docker) aparecerá na bandeja do sistema.
|
|
|
|
2. Clique com o botão direito do mouse no ícone da baleia e selecione "Settings" para abrir as configurações do Docker Desktop.
|
|
|
|
|
|
|
|
**Passo 4: Configurar as Opções**
|
|
|
|
|
|
|
|
1. Na seção "General", você pode escolher se deseja iniciar o Docker Desktop quando o Windows é iniciado e definir a quantidade de memória e CPUs alocados para os contêineres.
|
|
|
|
2. Na seção "Shared Drives", você pode especificar as unidades do seu sistema de arquivos que deseja compartilhar com os contêineres.
|
|
|
|
3. Na seção "Network", você pode configurar opções relacionadas à rede, como a configuração de proxy.
|
|
|
|
4. Após configurar as opções, clique em "Apply & Restart" para aplicar as configurações e reiniciar o Docker Desktop.
|
|
|
|
|
|
|
|
**Passo 5: Verificar a Instalação**
|
|
|
|
|
|
|
|
1. Após o reinício, o Docker Desktop estará em execução. Você pode verificar a instalação abrindo um terminal (como o PowerShell) e executando o comando `docker --version`. Isso deve exibir a versão do Docker que foi instalada.
|
|
|
|
|
|
|
|
**Passo 6: Executar seu Primeiro Contêiner**
|
|
|
|
|
|
|
|
1. Para testar o Docker, você pode executar um contêiner de exemplo. Abra um terminal e execute o comando a seguir para baixar e executar um contêiner "Hello World":
|
|
|
|
|
|
|
|
```
|
|
|
|
docker run hello-world
|
|
|
|
```
|
|
|
|
|
|
|
|
2. O Docker baixará a imagem e executará o contêiner. Você verá uma mensagem informando que o Docker foi instalado corretamente.
|
|
|
|
|
|
|
|
Pronto, agora você tem o Docker instalado e em funcionamento no seu sistema Windows. Você pode continuar a criar e executar contêineres para desenvolvimento, testes ou qualquer outro propósito que desejar.
|
|
|
|
|
|
|
|
**Tutorial de como instalar o Docker no Linux**
|
|
|
|
|
|
|
|
Para esse tutorial foi utilizado o sistema Ubuntu como exemplo, mas os passos podem variar um pouco dependendo da distribuição Linux que você estiver usando.
|
|
|
|
|
|
|
|
**Passo 1: Atualizar o Sistema**
|
|
|
|
|
|
|
|
Antes de instalar o Docker, é importante garantir que seu sistema esteja atualizado. Abra um terminal e execute os seguintes comandos:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
sudo apt update
|
|
|
|
sudo apt upgrade
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 2: Instalar as Dependências**
|
|
|
|
|
|
|
|
O Docker requer algumas dependências que precisam ser instaladas. Certifique-se de que essas dependências estejam no seu sistema executando o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
sudo apt install apt-transport-https ca-certificates curl software-properties-common
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 3: Adicionar o Repositório do Docker**
|
|
|
|
|
|
|
|
O Docker fornece um repositório oficial para a maioria das distribuições Linux. Adicione o repositório ao seu sistema com o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 4: Adicionar o Repositório do Docker**
|
|
|
|
|
|
|
|
Agora, adicione o repositório do Docker:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 5: Instalar o Docker Engine**
|
|
|
|
|
|
|
|
Atualize a lista de pacotes e instale o Docker com o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
sudo apt update
|
|
|
|
sudo apt install docker-ce
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 6: Iniciar e Habilitar o Docker**
|
|
|
|
|
|
|
|
Após a instalação, inicie o serviço do Docker e configure-o para ser iniciado automaticamente na inicialização do sistema:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
sudo systemctl start docker
|
|
|
|
sudo systemctl enable docker
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 7: Verificar a Instalação**
|
|
|
|
|
|
|
|
Você pode verificar se o Docker foi instalado corretamente executando o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
docker --version
|
|
|
|
```
|
|
|
|
|
|
|
|
Isso deve exibir a versão do Docker que foi instalada.
|
|
|
|
|
|
|
|
**Passo 8: Executar seu Primeiro Contêiner**
|
|
|
|
|
|
|
|
Para testar o Docker, você pode executar um contêiner de exemplo. Você pode usar o seguinte comando para baixar e executar um contêiner "Hello World":
|
|
|
|
|
|
|
|
```bash
|
|
|
|
docker run hello-world
|
|
|
|
```
|
|
|
|
|
|
|
|
O Docker baixará a imagem e executará o contêiner. Você verá uma mensagem informando que o Docker foi instalado corretamente.
|
|
|
|
|
|
|
|
Agora você tem o Docker instalado e configurado no seu sistema Linux. Você pode continuar a criar e executar contêineres para desenvolvimento, testes ou qualquer outro propósito que desejar.
|
|
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
<details open>
|
|
|
|
<summary> Node </summary>
|
|
|
|
|
|
|
|
# Node.js
|
|
|
|
|
|
|
|
**Tutorial de como instalar o Node no Windows**
|
|
|
|
|
|
|
|
O Node.js é uma plataforma JavaScript amplamente utilizada e é essencial para desenvolvimento de aplicativos web e pode ser usado para criar aplicativos servidor e cliente.
|
|
|
|
|
|
|
|
**Passo 1: Baixar o Instalador do Node.js**
|
|
|
|
|
|
|
|
1. Acesse o site oficial do Node.js em [https://nodejs.org](https://nodejs.org).
|
|
|
|
2. Na página inicial, você verá as versões LTS (Long-Term Support) e as versões mais recentes. É recomendável escolher a versão LTS para estabilidade. Clique na versão que você deseja.
|
|
|
|
|
|
|
|
**Passo 2: Baixar o Instalador do Node.js**
|
|
|
|
|
|
|
|
1. Após o download, execute o instalador do Node.js. Ele geralmente é um arquivo com extensão `.msi`.
|
|
|
|
2. Você será recebido pelo assistente de instalação. Clique em "Next" para continuar.
|
|
|
|
|
|
|
|
**Passo 3: Aceitar os Termos de Licença**
|
|
|
|
|
|
|
|
1. Leia e aceite os termos de licença do Node.js.
|
|
|
|
2. Clique em "Next" para continuar.
|
|
|
|
|
|
|
|
**Passo 4: Escolher Componentes**
|
|
|
|
|
|
|
|
1. Na tela "Select components", você pode deixar as opções padrão marcadas.
|
|
|
|
2. Clique em "Next" para continuar.
|
|
|
|
|
|
|
|
**Passo 5: Escolher o Diretório de Instalação**
|
|
|
|
|
|
|
|
1. Na tela "Select a destination folder", você pode escolher o diretório onde o Node.js será instalado. O padrão é geralmente adequado.
|
|
|
|
2. Clique em "Next" para continuar.
|
|
|
|
|
|
|
|
**Passo 6: Escolher as Ações Adicionais**
|
|
|
|
|
|
|
|
1. Na tela "Select additional tasks", você pode deixar as opções padrão marcadas.
|
|
|
|
2. Clique em "Next" para continuar.
|
|
|
|
|
|
|
|
**Passo 7: Instalar**
|
|
|
|
|
|
|
|
1. Clique em "Install" para iniciar a instalação.
|
|
|
|
|
|
|
|
**Passo 8: Concluir a Instalação**
|
|
|
|
|
|
|
|
1. Após a conclusão da instalação, você verá a tela "Completing the Node.js Setup Wizard". Certifique-se de que a opção "Automatically install the necessary tools..." esteja marcada, pois isso instalará o compilador C++ necessário para algumas dependências.
|
|
|
|
2. Clique em "Next" e depois em "Finish" para encerrar o assistente.
|
|
|
|
|
|
|
|
**Passo 9: Verificar a Instalação**
|
|
|
|
|
|
|
|
Para verificar se o Node.js foi instalado corretamente, abra o Prompt de Comando ou o PowerShell e execute os seguintes comandos:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
node --version
|
|
|
|
```
|
|
|
|
|
|
|
|
Isso deve exibir a versão do Node.js que foi instalada. Além disso, você pode verificar se o gerenciador de pacotes NPM (Node Package Manager) também foi instalado:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm --version
|
|
|
|
```
|
|
|
|
|
|
|
|
Agora você tem o Node.js instalado no seu sistema Windows e está pronto para começar a desenvolver aplicativos Node.js. Você pode usar o Prompt de Comando ou o PowerShell para executar comandos Node.js e NPM no Windows.
|
|
|
|
|
|
|
|
**Tutorial de como instalar o Node no Linux**
|
|
|
|
|
|
|
|
**Passo 1: Atualizar o Sistema**
|
|
|
|
|
|
|
|
Antes de instalar o Node.js, é importante garantir que seu sistema esteja atualizado. Abra um terminal e execute os seguintes comandos:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
sudo apt update
|
|
|
|
sudo apt upgrade
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 2: Instalar o Node.js com o Node Version Manager (NVM)**
|
|
|
|
|
|
|
|
O Node Version Manager (NVM) é uma ferramenta que permite instalar e gerenciar várias versões do Node.js em seu sistema. Isso é útil quando você precisa alternar entre diferentes versões do Node.js para projetos diferentes.
|
|
|
|
|
|
|
|
Para instalar o NVM, execute os seguintes comandos no terminal:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
|
|
|
|
```
|
|
|
|
|
|
|
|
Depois de instalar o NVM, feche e reabra o terminal ou execute o comando a seguir para carregar o NVM em sua sessão atual:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
source ~/.bashrc
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 3: Instalar uma Versão do Node.js**
|
|
|
|
|
|
|
|
Agora que o NVM está instalado, você pode usar o NVM para instalar uma versão específica do Node.js. Por exemplo, para instalar a versão mais recente do Node.js, você pode usar o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
nvm install node
|
|
|
|
```
|
|
|
|
|
|
|
|
Isso instalará a versão mais recente do Node.js. Se você precisar de uma versão específica, pode substituir "node" pelo número da versão, por exemplo, `nvm install 14.17.0`.
|
|
|
|
|
|
|
|
**Passo 4: Verificar a Instalação**
|
|
|
|
|
|
|
|
Você pode verificar se o Node.js foi instalado corretamente executando os seguintes comandos:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
node --version
|
|
|
|
```
|
|
|
|
|
|
|
|
Isso deve exibir a versão do Node.js que foi instalada. Além disso, você pode verificar se o gerenciador de pacotes NPM (Node Package Manager) também foi instalado:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm --version
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 5: Instalar o Yarn (Opcional)**
|
|
|
|
|
|
|
|
O Yarn é outro gerenciador de pacotes para JavaScript que é amplamente usado. Você pode instalar o Yarn com o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm install -g yarn
|
|
|
|
```
|
|
|
|
|
|
|
|
Agora você tem o Node.js instalado em seu sistema Linux usando o NVM. Você pode começar a desenvolver aplicativos Node.js e JavaScript e aproveitar a flexibilidade do NVM para gerenciar diferentes versões do Node.js conforme necessário.
|
|
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
<details open>
|
|
|
|
<summary> Next </summary>
|
|
|
|
|
|
|
|
# Next.js
|
|
|
|
|
|
|
|
O Next.js é uma estrutura de desenvolvimento web popular para aplicativos React que oferece funcionalidades avançadas, como renderização no lado do servidor (SSR) e geração estática. Siga estas etapas para começar:
|
|
|
|
|
|
|
|
**Passo 1: Pré-requisitos**
|
|
|
|
|
|
|
|
Certifique-se de que você tenha o Node.js instalado em sua máquina. Você pode verificar a instalação digitando o seguinte comando no seu terminal:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
node -v
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 2: Instalar o Next.js globalmente**
|
|
|
|
|
|
|
|
Para instalar o Next.js globalmente em sua máquina, execute o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm install -g create-next-app
|
|
|
|
```
|
|
|
|
|
|
|
|
ou
|
|
|
|
|
|
|
|
```bash
|
|
|
|
yarn global add create-next-app
|
|
|
|
```
|
|
|
|
|
|
|
|
Isso instalará a ferramenta `create-next-app` globalmente, que permite criar novos projetos Next.js.
|
|
|
|
|
|
|
|
**Passo 3: Criar um novo projeto Next.js**
|
|
|
|
|
|
|
|
Agora que você tem o Next.js instalado globalmente, você pode criar um novo projeto Next.js em qualquer diretório da seguinte maneira:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
create-next-app nome-do-seu-projeto
|
|
|
|
```
|
|
|
|
|
|
|
|
Substitua `nome-do-seu-projeto` pelo nome que você deseja dar ao seu projeto.
|
|
|
|
|
|
|
|
**Passo 4: Navegar para o diretório do projeto**
|
|
|
|
|
|
|
|
Vá para o diretório do seu novo projeto:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
cd nome-do-seu-projeto
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 5: Executar o servidor de desenvolvimento**
|
|
|
|
|
|
|
|
Para iniciar o servidor de desenvolvimento do Next.js, basta executar o seguinte comando:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm run dev
|
|
|
|
```
|
|
|
|
|
|
|
|
ou
|
|
|
|
|
|
|
|
```bash
|
|
|
|
yarn dev
|
|
|
|
```
|
|
|
|
|
|
|
|
**Passo 6: Acessar o aplicativo**
|
|
|
|
|
|
|
|
Agora, seu aplicativo Next.js estará em execução. Abra um navegador e acesse [http://localhost:3000](http://localhost:3000) para ver o aplicativo em ação.
|
|
|
|
|
|
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
<details open>
|
|
|
|
<summary> Prisma </summary>
|
|
|
|
|
|
|
|
# Prisma
|
|
|
|
|
|
|
|
No terminal, digite o comando:
|
|
|
|
```console
|
|
|
|
npm install prisma --save-dev
|
|
|
|
```
|
|
|
|
Este comando deve adicionar o prisma as suas dependências no package.json, para chamar o CLI integrado com o prisma, utilize o prefixo npx.
|
|
|
|
```console
|
|
|
|
npx prisma
|
|
|
|
```
|
|
|
|
Agora um exemplo de comando:
|
|
|
|
```console
|
|
|
|
npx prisma generate
|
|
|
|
```
|
|
|
|
|
|
|
|
**Link:**
|
|
|
|
[Prisma](https://www.prisma.io/docs/concepts/components/prisma-cli/installation)
|
|
|
|
|
|
|
|
</details>
|
|
|
|
|
|
|
|
<details open>
|
|
|
|
<summary> React </summary>
|
|
|
|
|
|
|
|
# React
|
|
|
|
|
|
|
|
### 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.
|
|
|
|
|
|
|
|
* [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 Utilizadas
|
|
|
|
|
|
|
|
* [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
|
|
|
|
|
|
|
#### Instalação
|
|
|
|
|
|
|
|
Adicionar um arquivo na raiz do projeto com o nome ".env".
|
|
|
|
O arquivo deve ter como conteúdo:
|
|
|
|
|
|
|
|
```
|
|
|
|
REACT_APP_API='https://link.api.back';
|
|
|
|
```
|
|
|
|
|
|
|
|
Execute os seguintes comandos no terminal:
|
|
|
|
```
|
|
|
|
npm install
|
|
|
|
npm start
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
Depois de executar o programa, basta acessar a seguinte URL para ter acesso a aplicação
|
|
|
|
```
|
|
|
|
localhost:3000
|
|
|
|
```
|
|
|
|
</details> |
|
|
|
\ No newline at end of file |
