Projetos develop

.gitignore

@@ -0,0 +1 @@
+.vscode

SUMMARY.md

@@ -33,6 +33,7 @@
   * [Soluções para problemas comuns](execucao/git/problemas-comuns.md)
 * [Ruby on Rails](execucao/ruby-on-rails/README.md)
   * [Instalação](execucao/ruby-on-rails/instalacao.md)
+  * [Gems](execucao/ruby-on-rails/gems.md)
   * [Obtenção de licença Jetbrains](execucao/ruby-on-rails/licenca-rubymine.md)
   * [Bash de Ubuntu no Windows](execucao/ruby-on-rails/bash-de-ubuntu-no-windows.md)
   * [Geradores Rails](execucao/ruby-on-rails/generators.md)
@@ -55,10 +56,31 @@
     * [Estilizando](execucao/front-end/react-js/estilizando.md)
     * [Hooks](execucao/front-end/react-js/hooks.md)
     * [Mais sobre](execucao/front-end/react-js/mais-sobre.md)
+* [Next JS](execucao/next-js/conceitos-relevantes/README.md)
+  * [V<=12](execucao/next-js/v<=12/sobre.md)
+    * [Inicio rapido](execucao/next-js/v<=12/inicio-rapido.md)
+    * [Rotas](execucao/next-js/v<=12/rotas.md)
+    * [Paginas e padroes](execucao/next-js/v<=12/paginas-e-padroes.md)
+    * [Api](execucao/next-js/v<=12/api.md)
+    * [Styled Components](execucao/next-js/v<=12/styled-components.md)
+  * [V>=13](execucao/next-js/v>=13/README.md)
+* [Prisma JS](execucao/back-end/prisma-js/README.md)
+  * [ATENCAO](execucao/back-end/prisma-js/ATENCAO.md)
+  * [Exemplos](execucao/back-end/prisma-js/exemplos.md)
+  * [Configurando projeto](execucao/back-end/prisma-js/configuracao/projeto.md)
+  * [Configurando local](execucao/back-end/prisma-js/configuracao/local.md)
 * [Flutter](execucao/flutter.md)
 * [Projetos](execucao/projetos/README.md)
+  * [Deploy](execucao/projetos/deploy/README.md)
+    * [Terceirizando](execucao/projetos/deploy/terceirizando)
+      * [Heroku](execucao/projetos/deploy/terceirizando/heroku.md)
+      * [Netlify](execucao/projetos/deploy/terceirizando/netlify.md)
   * [Cloudinary](execucao/projetos/cloudinary.md)
-  * [Gerência de projetos](execucao/projetos/gerencia.md)
+  * [Gerência de projetos](execucao/projetos/gerencia/README.md)
+    * [Início de projeto](execucao/projetos/gerencia/inicio-de-projeto.md)
+    * [Repositório](execucao/projetos/gerencia/repositorio.md)
+    * [Sprints](execucao/projetos/gerencia/sprints.md)
+    * [Boas práticas](execucao/projetos/gerencia/boas-praticas.md)
   * [Finalização de Projetos](execucao/projetos/finalizacao.md)
   * [Gitlab](execucao/projetos/gitlab/README.md)
     * [CI-CD](execucao/projetos/gitlab/ci-cd.md)

execucao/back-end/prisma-js/ATENCAO.md

@@ -0,0 +1,3 @@
+# O que pode dar muito errado:
+
+Acessar o banco de dados em dois apps diferentes. Por exemplo, se colocarmos validações somente no rails, e não no prisma, podemos ter problemas de segurança, pois o prisma não vai validar nada. Se fizermos nos dois, podemos ter problemas de duplicação de código, dificuldade de manutenção e mais bugs. Sendo assim, o ideal é deixar a responsabilidade de escrever no banco de dados para um único app.

execucao/back-end/prisma-js/README.md

@@ -0,0 +1,4 @@
+# Prisma
+
+Prisma é uma biblioteca javascript/typescript, escrita em Rust, feita para funcionar no Node. Sendo assim, funciona com o código de servidor do Next JS, e essa será sua principal utilidade para nós.
+

execucao/back-end/prisma-js/configuracao/local.md

@@ -0,0 +1,78 @@
+# Configuração no projeto (uma única vez):
+
+{% hint style="info" %}
+Trecho voltado à gerência
+{% endhint %}
+
+Adicionar o prisma CLI (Command Line Interface) ao projeto como dependência de desenvolvimento:
+
+```bash
+yarn add -D prisma
+```
+
+Então inicializar o prisma:
+
+```bash
+yarn prisma init --datasource-provider postgresql
+```
+
+Adicione `.env` ao `.gitignore`
+
+#### Integrando com banco de dados externo (e.g. do rails):
+
+{% hint style="info" %}
+O prisma pode cuidar da criação do banco de dados, mas por enquanto vamos usar o banco de dados do rails. Para isso, precisamos configurar o prisma para usar um banco de dados externo.
+{% endhint %}
+
+Adicionar ao arquivo `.env.example` (criá-lo caso não exista) o seguinte conteúdo:
+
+```text
+# Variáveis de ambiente para o prisma:
+
+DATABASE_URL="postgresql://user:password@localhost:5432/<database>"
+# DATABASE_URL="postgresql://<db_user>:<db_password>@localhost:5432/<db_name>?schema=public"
+```
+
+Substitua acima o <db_name> pelo nome do banco de dados. O rails por padrão pega o nome do projeto e coloca adiciona um pósfixo `_development`. Então, se o nome do projeto for `projeto-api`, o banco de dados de desenvolvimento será `Projeto_api_development`, e o arquivo ficaria assim:
+
+```text
+DATABASE_URL="postgresql://<user>:<password>@localhost:5432/Projeto_api_development"
+```
+
+
+{% hint style="info" %}
+
+A url de conexão com o banco de dados tem o seguinte padrão, caso seja necessário mudar alguma parte:
+
+```text
+postgresql://<user>:<password>@<host>:<port>/<database>?schema=<schema>
+```
+
+#### Criando o client do prisma:
+
+Adicionar isso, adicionar aos script em `package.json`:
+
+```json
+"scripts": {
+    // ...scripts anteriores
+    "prisma:update": "yarn prisma db pull && yarn prisma generate",
+},
+```
+
+Então, na pasta `prisma`, criar um arquivo chamado client.js, com o seguinte conteúdo:
+
+```js
+import { PrismaClient } from "@prisma/client";
+
+// Permite que BigInt seja serializável para JSON, e funcione corretamente
+// caso existam tais campos no banco de dados
+// O rails por padrão usa BigInt para os ids
+BigInt.prototype.toJSON = function () {
+  return this.toString();
+};
+
+export const prisma = new PrismaClient({
+  log: ['query', 'info', 'warn', 'error'],
+});
+```
+

execucao/back-end/prisma-js/configuracao/projeto.md

@@ -0,0 +1,11 @@
+# Configuração do ambiente (para cada dev):
+
+Criar um arquivo `.env` na raiz do projeto, seguindo o exemplo do `.env.example`
+
+Substituindo os valores de acordo com o banco de dados local, basta rodar o comando:
+
+```bash
+yarn prisma:update
+```
+
+E agora o prisma já pode ser usado localmente.

execucao/back-end/prisma-js/exemplos.md

@@ -0,0 +1,82 @@
+# Exemplos de uso
+
+
+## Next JS
+
+```js
+// src/pages/api/users/index.js
+
+// Tenha certeza de que o caminho está correto
+import { prisma } from "../../../prisma/client";
+
+export default async function handler(req, res) => {
+  // Encontra todos os usuários no banco de dados
+  const users = await prisma.users.findMany();
+  res.status(200).json({ users });
+};
+```
+
+```js
+// src/pages/api/users/[id].js
+import { prisma } from "../../../prisma/client";
+
+export default async function handler(req, res) => {
+  // Pegando id da request:
+    const { id } = req.query;
+
+  // Encontra por propriedade que é única 
+  const user = await prisma.users.findUnique({
+    where: {
+      id: req.query.id,
+    },
+  });
+
+  res.status(200).json({ user });
+};
+```
+
+Caso o usuário tenha uma relação com outra tabela que desejamos mostrar, podemos usar o `include`. Exemplo sendo que usuário tem uma relação com `posts`:
+
+```js
+// src/pages/api/users/[id].js
+import { prisma } from "../../../prisma/client";
+
+export default async (req, res) => {
+  // Pegando id da request:
+    const { id } = req.query;
+
+  // Encontra por propriedade que é única 
+  const user = await prisma.users.findUnique({
+    where: {
+      id: id,
+    },
+    include: {
+      posts: true,
+    },
+  });
+
+  res.status(200).json({ user });
+};
+```
+
+
+```js
+// src/pages/api/users/create.js
+import { prisma } from "../../../prisma/client";
+
+export default async function handler(req, res) => {
+  // Pegando dados da request:
+  const { name, email } = req.body;
+
+  const user = await prisma.users.create({
+    data: {
+      name,
+      email, // equivalente a 'email: email'
+    },
+  });
+
+  res.status(200).json({ user });
+};
+```
+
+

execucao/next-js/conceitos-relevantes/README.md

@@ -0,0 +1,44 @@
+## Separação cliente/servidor
+
+Quando um usuário acessa uma _url_, uma request é feita para essa _url_, e então uma resposta é retornada.
+
+Quando a _request_ chega no servidor, ela possui informações como headers, método http, rota, etc. O servidor pode então processar essa request. A gente escreve código para isso, e esse código será acessado somente no servidor. Isso significa que, nesse código, não existe a variável `window`, o console.log não vai aparecer no console do navegador, e sim no terminal que está rodando o servidor, etc.
+
+Após receber a request, o servidor envia uma resposta, que pode incluir HTML, CSS, JS, imagens, pdfs, json, etc.
+O JS enviado muitas vezes também é código escrito por nós, e nesse caso esse código será rodado no cliente apenas.
+
+Isso significa que vão existir outras limitações, como impossibilidade de se acessar variáveis de ambiente, algumas api's do node não são padrões dos navegadores, etc.
+
+## _assets_ estáticos
+
+Um _asset_ estático nada mais é do que um objeto que é enviado para o cliente sem necessidade de alterar o objeto.
+
+Ou seja, o objeto já existe no servidor, e então é apenas enviado como resposta. Pode ser, por exemplo: imagem, index.html, robots.txt, pdf, etc; desde que não seja alterado pelo servidor.
+
+## Renderização
+
+Começando com um exemplo:
+
+Usando react, escrevemos uma função que retorna JSX. Ao rodar essa função, HTML é `renderizado`.
+
+Em suma, renderização é gerar algo que pode ser mostrado na tela do navegador, como um HTML. Isso exige um processamento, ou seja, um custo de tempo, espaço e energia.
+
+## SSR
+
+É quando o servidor recebe uma request, renderiza um conteúdo, e envia para o cliente algo já renderizado.
+
+## SG
+
+É quando o servidor, no processo de build/compilação, renderiza um conteúdo e gera um _asset_ estático.
+
+Agora, o servidor recebe uma request, e envia para o cliente algo já renderizado.
+
+### ISR
+
+É um híbrido entre o SSR e o SG, com alterações para encaixar os dois
+
+Na primeira request que o servidor recebe, ele renderiza um conteúdo, e envia para o cliente algo já renderizado. Então, guarda o conteúdo renderizado.
+
+Nas próximas requests, o servidor logo envia para o cliente algo já renderizado.
+
+Geralmente existe um mecanismo para revalidar o conteúdo e rerenderizá-lo.

execucao/next-js/v<=12/api.md

@@ -0,0 +1,104 @@
+# Next API
+
+O Next JS usa api padrão do Node.js, então você pode usar qualquer biblioteca que você quiser. O Next JS também tem uma API própria que pode ser usada para algumas coisas, como rotas, renderização do lado do servidor e renderização estática.
+
+No caso, os exemplos estão sendo dados com [Prisma](https://www.prisma.io/) (docs a fazer), uma ORM que facilita muito queries no banco de dados. Interprete que, quando `prisma` é chamada, uma busca no banco de dados está sendo feita.
+
+```jsx
+// src/pages/api/users/[id].js
+
+export default function handler(req, res) {
+  const { id } = req.query;
+  prisma.users.findUnique({ where: { id } }).then((user) => {
+    res.status(200).json(user);
+  });
+}
+```
+
+Exemplo usando o prisma para acessar o banco de dados.
+
+```jsx
+// src/pages/api/users.js
+
+export default function handler(req, res) {
+  prisma.users.findMany().then((users) => {
+    res.status(200).json(users);
+  });
+}
+```
+
+Exemplo usando múltiplos parâmetros
+
+```jsx
+// src/pages/api/users/[id]/posts/[postId].js
+
+export default function handler(req, res) {
+  const { id, postId } = req.query;
+  prisma.posts
+    .findUnique({
+      where: { id: postId }, // encontrando o post pelo seu id
+      include: { user: true }, // incluindo o usuário que criou o post
+    })
+    .then((post) => {
+      res.status(200).json(post);
+    });
+}
+```
+
+Exemplo usando o método POST na mesma rota, autenticando com headers antes
+
+```jsx
+// src/pages/api/users.js
+
+export default function handler(req, res) {
+  if (req.method === "POST") {
+    handlePost(req, res);
+  } else {
+    // handle outros métodos
+    prisma.users.findMany().then((users) => {
+      res.status(200).json(users);
+    });
+  }
+}
+
+function handlePost(req, res) {
+    // get auth header
+    const authToken = req.headers["X-Auth-Token"];
+    const authEmail = req.headers["X-Auth-Email"];
+
+    // check if auth header is valid
+    const userRequesting = await prisma.users.findUnique({
+      where: { email: authEmail },
+    });
+
+    // guard clause para caso o usuário não tenha permissão
+    if (!userRequesting || !userRequesting.authentication_token === authToken) {
+      res.status(403).json({ error: "Forbidden" });
+      // caso seja inválido, não proceder com a função, retornar
+      return;
+    }
+
+    const { name, email, password } = req.body;
+
+    // validar corpo da request para criar o usuário
+    const {isInvalid, errors} = validateUser({ name, email, password });
+
+    if (isInvalid) {
+        res.status(422).json({ errors });
+        // caso seja inválido, não proceder com a função, retornar
+        return;
+    }
+
+    // create user
+    prisma.users
+        .create({
+            data: {name, email, password}
+        })
+        .then((user) => {
+            res.status(200).json(user);
+        })
+        .catch((err) => {
+            res.status(422).json(err);
+        });
+}
+```