DEV Community: Junior Martins

Como habilitar a assinatura automática de commits do Git com GnuPG (GPG) no Windows

Junior Martins — Sun, 02 Apr 2023 13:45:53 +0000

Este é um guia para habilitar git commits com assinatura GPG no GitHub.

"O GnuPG é um programa de software de criptografia híbrida porque usa uma combinação de criptografia de chave simétrica convencional por questões de velocidade e criptografia de chave pública para facilitar a troca segura de chaves, geralmente usando a chave pública do destinatário para criptografar uma chave de sessão que é usada apenas uma vez. Este modo de operação faz parte do padrão OpenPGP e faz parte do PGP desde sua primeira versão."

Wikipédia

1) Instale `Gpg4win`

Gpg4win pode ser baixado em www.gpg4win.org{:target="_blank"}

O Gpg4win é um pacote do GnuPG v2, que contem:

Kleopatra, que é um gerenciador de certificados;
GNU Privacy Assitant (GPA), que é uma GUI que usa GTK + GpgOL e GpgEX, que são respectivamente uma extensão para Outlook e Windows Shell.

Como o foco deste tutorial não é demonstrar a utilização no Outlook, não iremos instalar o GpgOL, portanto, na janela de "Escolha de Componentes", deixe conforme a imagem abaixo:

Aperte o botão seguinte e depois selecione o diretório onde os arquivos do programa Gp4win ficarão (você irá precisar desta informação mais pra frente), feito isto clique em instalar.

2) Crie uma nova `key pair`

Após a instalação do Gp4win, abra o programa Kleopatra:
Na janela inicial vá ao menu File > New Key Pair..., abrirá uma nova janela, nela clique no botão Create a personal OpenPGP key pair.

Uma nova janela solicitando algumas informações será aberta, agora basta preencher os campos com os seus dados Nome e Email e marcar a caixa Protect the generated key with a passphrase.

Ainda na mesma janela clique em Advanced Settings..., na nova janela que abrir, selecione RSA, marque + RSA-, e altere os valores dos selects para 4,096 bits.

No campo Valid until: escolha uma data limite para a validade da chave que será criada, no exemplo deixei a data de 03/09/2023.

Clique em Ok e depois em Create, feito este procedimento abrirá uma nova janela para que você digite uma senha:

A senha deve ter no mínimo 08 (oito) dígitos

Após digitar a senha clique em OK e aguarde até que o sistema gere sua Key Pair.

Realizado o procedimento anterior e dando tudo certo, abrirá uma nova janela com a mensagem "Key Pair Succesfully Created" contendo algumas informações sobre a nova chave criada, conforme a imagem abaixo:

Gerada a Kei Pair, clique em Finish.

3) Copiando a chave GPG criada

Se tudo deu certo até aqui você perceberá que na janela principal do Kleopatra vai estar aparecendo as informações básicas da sua nova chave, algo parecido com a imagem abaixo:

Clique duas vezes na linha que possui a nova chave gerada para abrir a janela Export, que permitirá que exportemos a chave criada. Com a janela Export aberta, clique em Export.... Abrirá uma nova janela Export - Kleopatra, selecione todo o texto e copie Ctrl+C.

Após copiar, clique em close e depois em close novamente.

4) Inserindo a chave GPG no Github

De posse da chave copiada no "item 3" deste tutorial, vá ao GitHub e navegue pelo menu em Settings > SHH and GPG keys e na janela que abrir procure pelo botão New GPG Key

Clicando em New GPG Key, abrirá uma nova janela com o campo GPG keys/ Add new, neste campo cole todo o texto que você copiou no "item 3" deste tutorial, deixando mais ou menos assim:

Colado o texto, cliquem em Add GPG Key. Você será redirecionado para a página SSH and GPG keys, que agora conterá as informações básicas da sua nova chave GPG criada, como na imagem abaixo:

💡Atenção

Na imagem acima aparace a mensagem Unverified ao lado do e-mail inserido. Isto é um alerta indicando que o e-mail não está vinculado à sua conta do GitHub, portanto, se você inserir o e-mail correto vinculado à sua conta, a mensagem de não aparecerá

5) Configurando o Git para realizar commits verificados

Abra o terminal e digite o comando:

git config --global commit.gpgsign true

Volte na página SSH an GPG keys do GitHub e copie o valor de Key ID, o que está em azul na imagem abaixo:

O valor da sua Key ID será diferente do da imagem

Copiado o valor, volte ao terminal e digite o seguinte comando:

git config --global user.signingkey MEU_KEY_ID

Substitua MEU_KEY_ID pelo valor copiado na página "SSH an GPG keys"

Feito, agora digite o comando:

git config --global gpg.program 'Disco:/caminho/do/GnuPG/bin/gpg.exe`

🏷️Exemplo:

git config --global gpg.program 'C:/programs/GnuPG/bin/gpg.exe`

💡 Atenção
Use o caminho completo utilizando / e não \

6) Testando o comando

Se deu tudo certo a partir de agora você será capaz de realizar commits verificados para sua conta no GitHub, para isso, faça um commit utilizando a flag -S, assim:

git commit -S -m 'Commit verificado'

Ao clicar em enter abrirá uma nova janela solicitando a senha que foi criada no momento da geração da chave no Kleopatra. Digite a senha correta e tecle enter, que o commit será realizado.

Para finalizar, depois do commit, dê um push e seja feliz 😁

git push

Seus commits aparecerão no histórico com uma tag verified ao lado, conforme a imagem abaixo:

7) Habilitando no WSL2

Para habilitar a assinatura automática de commits do Git com GnuPG (GPG) no Windows Subsystem for Linux (WSL), siga os passos abaixo:

7.1 - Instale o GnuPG no WSL: Abra um terminal do WSL e execute o seguinte comando para instalar o GnuPG:

sudo apt update
sudo apt install gnupg

Isso irá instalar o GnuPG no seu ambiente WSL.

7.2 - Gere suas chaves GPG: Para assinar commits automaticamente, você precisa ter uma chave GPG. Se você já possui uma chave GPG, você pode pular esta etapa. Caso contrário, você pode gerar uma nova chave GPG usando o seguinte comando:

gpg --gen-key

Siga as instruções do GnuPG para gerar uma nova chave GPG. Você precisará definir uma senha para sua chave GPG durante o processo.

7.3 - Configure o Git para usar a chave GPG: Após gerar sua chave GPG, você precisa configurar o Git para usá-la. Para fazer isso, execute os seguintes comandos no terminal do WSL:

git config --global user.signingkey <sua_chave_gpg>
git config --global commit.gpgsign true
git config --global gpg.program gpg

Substitua <sua_chave_gpg> pelo ID da chave GPG que você gerou na etapa anterior.

7.4 - Exporte sua chave GPG pública: No terminal do WSL, você pode exportar sua chave GPG pública usando o seguinte comando:

gpg --armor --export <seu_ID_de_chave> > chave_gpg_publica.asc

7.5 - Substitua <seu_ID_de_chave> pelo ID da sua chave GPG que você deseja adicionar ao GitHub. Isso irá criar um arquivo com extensão ".asc" que contém a sua chave GPG pública.
7.6 - Importe sua chave GPG no WSL: Você também precisa importar sua chave GPG no WSL para que o Git possa encontrar e usar sua chave para assinar os commits automaticamente. Para importar a chave, você pode usar o seguinte comando:

gpg --import <caminho_para_sua_chave_gpg>

Exemplo
gpg --import chave_gpg_publica.asc

7.7 - Substitua <caminho_para_sua_chave_gpg> pelo caminho completo para o arquivo da chave GPG que você exportou ou recebeu de outra fonte.
7.8 - Configure sua variável de ambiente GPG_TTY: Para que a assinatura automática de commits funcione corretamente no WSL, você precisa configurar a variável de ambiente GPG_TTY. Você pode fazer isso adicionando o seguinte comando ao seu arquivo de perfil do shell (por exemplo, ~/.bashrc ou ~/.zshrc):

export GPG_TTY=$(tty)

Isso permitirá que o GnuPG encontre o terminal correto para exibir os prompts de senha quando necessário.

Adicionando a chave do WSL ao Github

Para adicionar sua chave GPG ao GitHub, você pode seguir os passos abaixo:
Copie o conteúdo do arquivo de chave pública: Abra o arquivo de chave pública gerado (chave_gpg_publica.asc) em um editor de texto ou em um visualizador de arquivos e copie todo o conteúdo do arquivo.
Copiada a chave siga o procedimento listado no passo 4) Inserindo a chave GPG no Github deste tutorial.

Remix :: CRUD com Supabase - Parte 06 - Testando a inserção de novos registros

Junior Martins — Wed, 18 May 2022 20:32:41 +0000

Nesta parte iremos testar se o nosso formulário está funcionando.

Vamos editar novamente o arquivo index.tsx e colocar o nosso menu que irá para área de postagens, onde iremos visualizar e inserir novas postagens

Re-editando o arquivo `index.tsx`

Abra seu arquivo routes/index.tsx, apague os imports e importe apenas o componente Link do Remix:

import { Link } from 'remix'

Agora edite o componente Index, deixando-o assim:

export default function Index() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Blog Remix com Supabase</h1>
      <ul
        style={{
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'row',
          gap: '8px',
        }}
      >
        <li>
          <Link
            to={'posts'}
            style={{
              textDecoration: 'none',
              backgroundColor: '#ef62df',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Visualizar Posts
          </Link>
        </li>
      </ul>
    </div>
  )
}

Por último, vamos adicionar um componente ErrorBoundary para "capturar" os erros na Index de forma que não quebre o resto da aplicação.

export function ErrorBoundary({ error }: { error: Error }) {
  return (
    <div className='error-container'>
      <h1>😱 App Error</h1>
      <pre>❗ {error.message}</pre>
    </div>
  )
}

Testando a aplicação

Finalmente estamos prontos para testar a nossa aplicação, para isto rode npm run dev e se tudo deu certo você verá no navegador algo parecido com a imagem abaixo:

Clique no link Visualizar Posts e você será direcionado para a página de visulização, que também será nossa página de inseração de novos posts.

A página que será aberta deve ser algo parecido com a imagem abaixo:

Clique no botão Novo e repare que o formulário abrirá logo acima da visualização dos posts e isto se deve a mágica do componente <Outlet/> que inserimos na parte 05 enquanto estávamos editando o componente Posts.

Clique em novo, preencha todos os dados e depois clique em enviar. Se tudo deu certo até aqui, um novo post aparecerá abaixo dos botões Home e Novo.

Com isto finalizamos esta primeira parte do tutorial, na parte 07 instalaremos a lib https://chakra-ui.com/ para melhorar a aparência da nossa aplicação. Te vejo lá! 😉

Remix :: CRUD com Supabase - Parte 05 - Trabalhando com formulário

Junior Martins — Wed, 18 May 2022 20:32:25 +0000

Nesta parte veremos o quanto é fácil trabalhar com formulários no Remix, iremos melhorar nossa estrutura de arquivos, colocando as coisas nos lugares certos para evitar código duplicado e permitir assim o reaproveitamento na nossa aplicação.

🎲 Criando o modelo

Nas partes anteriores deste tutorial nós criamos a PostModel nos arquivos onde ele era necessário, mas agora iremos deixá-lo em lugar onde "quem precisar" na aplicação possa usá-lo, portanto, crie o arquivo posts.model.ts dentro da pasta app/models/, de forma que ele fique assim: app/models/posts.model.ts. Edite-o e deixe desta forma:

export type PostsModel = {
  post_id?: number
  post_uuid?: string
  post_author: string
  post_title: string
  post_text: string
  post_situation?: string
  post_created_at?: string
}

Criando a API

Criado o modelo, podemos agora trabalhar com a API, que armazenará todas as ações que permitirão executar nosso CRUD, para isto, crie o arquivo supabase-api.ts dentro do diretório app/api/, de forma que fique assim: app/api/supabase-api.ts.

Edite o arquivo supabase-api.ts e import o PostsModels e o cliente supabase, deixando-o assim:

import { PostsModel } from '~/models/posts.model'
import { supabase } from '~/utils/supabase-client.server'

Ainda no supabase-api.ts. crie a função getPosts, que ficará encarregada de realizar um select no Supabase para nós.

const getPosts = async () => {
  const { data: posts } = await supabase
    .from<PostsModel>('posts')
    .select('*')
    .order('post_id', { ascending: false })

  return posts
}

Agora criaremos a função addPost, que ficará responsável por adicionar um registro novo.

const addPost = async ({ post_author, post_title, post_text }: PostsModel) => {
  const { data, error } = await supabase.from<PostsModel>('posts').insert([
    {
      post_author: post_author,
      post_title: post_title,
      post_text: post_text,
    },
  ])

  return { data, error }
}

Por fim, exporte as duas funcões:

export { getPosts, addPost }

Criando a rota `posts`

Crie dentro da pasta routes um arquivo com nome posts.tsx e dentro dele faça os seguintes imports:

import { Link, LoaderFunction, Outlet, useLoaderData } from 'remix'
import { getPosts } from '~/api/supabase-api'
import { PostsModel } from '~/models/posts.model'

Link para criarmos o link que irá chamará o formulário para iserir um novo registro;
LoaderFunction para tiparmos o método loader que ficará responsável por chamar a função getPosts, que carrega os registros do banco de dados;
useLoaderData permite façamos o uso dos dados carregados pelo loader;
Outlet, este componente é um wrapper em torno do Outlet do React Router com a capacidade de passar o estado da interface do usuário para rotas aninhadas. Ou seja, com ele será possível carregar a rota filha que conterá o fomulário dentro da rota pai posts.tsx;
getPosts é a função que carrega os registros do banco de dados; e
postModels é o type model dos dados que virão do banco de dados.

Feito as importações criaremos o método loader para chamar a getPosts:

export const loader: LoaderFunction = async () => {
  const posts = await getPosts()

  return posts
}

Agora iremos criar nosso componente Posts:

export default function Posts() {
  const posts = useLoaderData<PostsModel[]>()

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Blog Remix com Supabase</h1>
      <ul
        style={{
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'row',
          gap: '8px',
        }}
      >
        <li>
          <a
            href='/'
            style={{
              textDecoration: 'none',
              backgroundColor: '#ef62df',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Home
          </a>
        </li>
        <li>
          <Link
            to={'new'}
            style={{
              textDecoration: 'none',
              backgroundColor: '#62efd0',
              color: '#0d6443',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Novo
          </Link>
        </li>
      </ul>
      <div>
        <Outlet />
      </div>
      <div>
        <ul style={{ listStyle: 'none' }}>
          {posts?.map(post => (
            <li key={post.post_uuid}>
              <h3>{post.post_title}</h3>
              <small>{post.post_author}</small>
              <blockquote>{post.post_text}</blockquote>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

E, por fim, chamaremos a função ErrorBoundary do Remix, a qual permite que os erros sejam capturados dentro da rota que foi chamada, evitando assim que toda a aplicaçãose quebre:

export function ErrorBoundary({ error }: { error: Error }) {
  return (
    <div className='error-container'>
      <h1>😱 App Error</h1>
      <pre>❗ {error.message}</pre>
    </div>
  )
}

Criando a página do fomulário

Criado a página de listagem dos posts, iremos criar a página que conterá o fomulário que permitirá que a gente insira novos registros, para isto crie a pasta posts dentro de routes, de forma que fique routes/posts. Dentro da pasta posts crie o arquivo new.tsx e faça as seguintes imports:

import { ActionFunction, Link, redirect } from 'remix'
import { supabase } from '~/utils/supabase-client.server'

ActionFunction para tiparmos o método do Remix chamado action que é reponsável por "capturar" as variáveis enviadas pelo fomulário. Na verdade action pega todas varáveis de qualquer request na rota onde ele está.
redirect permite que a rota seja redirecionada
supabase é o nosso cliente do Supabase

Feito os imports, chamaremos o método action:

export const action: ActionFunction = async ({ request }) => {
  const inputs = Object.fromEntries(await request.formData())

  await supabase.from('posts').insert([inputs])

  return redirect('.')
}

Agora criaremos o componente NewPost que conterá nosso formulário:

export default function NewPost() {
  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Novo post</h1>
      <form
        action='#'
        method='post'
        style={{
          listStyle: 'none',
          display: 'flex',
          flexDirection: 'column',
          gap: '8px',
        }}
      >
        <div>
          <label htmlFor=''>Título</label>
          <br />
          <input type='text' name='post_title' />
        </div>
        <div>
          <label htmlFor=''>Autor</label>
          <br />
          <input type='text' name='post_author' />
        </div>
        <div>
          <label htmlFor=''>Texto</label>
          <br />
          <textarea
            name='post_text'
            id='post_text'
            cols={30}
            rows={10}
          ></textarea>
        </div>
        <div>
          <button
            type='submit'
            style={{
              backgroundColor: '#62a4ef',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              border: 'none',
              lineHeight: '1.4',
              fontSize: '14px',
              cursor: 'pointer',
            }}
          >
            Enviar
          </button>
          <Link
            to={'/posts'}
            style={{
              marginLeft: '10px',
              textDecoration: 'none',
              backgroundColor: '#ef62df',
              color: '#fff',
              padding: '8px',
              borderRadius: '4px',
              fontSize: '14px',
            }}
          >
            Cancelar
          </Link>
          <br />
        </div>
      </form>
    </div>
  )
}

Com isto finalizamos o formulário e na parte 06 iremos criar nosso primeiro post através do formulário criado. Te espero lá! 😉

Remix :: CRUD com Supabase - Parte 04 - Carregando e inserindo novos registros

Junior Martins — Wed, 18 May 2022 20:31:27 +0000

Nesta parte do tutorial verificaremos se a nossa comunicação com API do Supabase está funcionando corretamente e criaremos uma rota temporária que permitirá criar novos registros para testarmos as requisições.

Editando o arquivo `app/index.tsx`

Neste primeiro momento iremos verificar se a nossa conexão com o Supase está funcionando e para isto editaremos o arquivo routes/index.tsx responsável por chamar a rota index da nossa aplicação.

1) Importe LoaderFunction e useLoaderData do Remix

import { LoaderFunction, useLoaderData } from 'remix'

O que é o método `loader: LoaderFunction`?

O loader é uma função executada em server-side e é ela que usamos no Remix para obter dados externos, portanto a usaremos para obter os registros que virão do banco de dados.

Que é o hook `useLoaderData`?

O useLoaderData é um hook provido pelo próprio Remix para que se possa ter acesso ao que é exportado pelo loader

2) Importe também o cliente do Supabase

import { supabase } from '~/utils/supabase-client.server'

3) Crie o tipo PostsModel, que além de tipar as nossas variáveis, vai nos ajudar muito no intelisense do VSCode.

type PostsModel = {
  post_id: number
  post_uuid: string
  post_author: string
  post_title: string
  post_text: string
  post_situation: string
  post_created_at: string
}

4) Agora, iremos dar um select no Supabase para carregar as informações dos registros no loader:

export const loader: LoaderFunction = async () => {
  const { data: posts } = await supabase
    .from<PostsModel>('posts')
    .select('*')
    .order('post_id', { ascending: false })

  return posts
}

5) Deixe o componente Index desta forma:

export default function Index() {
  const posts = useLoaderData<PostsModel[]>()

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
      <h1>Blog Remix com Supabase</h1>
      <p>
        <a href='/insert'>Inserir</a>
      </p>
      <ul style={{ listStyle: 'none' }}>
        {posts?.map(post => (
          <li key={post.post_uuid}>
            <h3>{post.post_title}</h3>
            <small>{post.post_author}</small>
            <blockquote>{post.post_text}</blockquote>
          </li>
        ))}
      </ul>
    </div>
  )
}

Para ver se tudo deu certo, rode o comando npm run dev e você perceberá que irá aparecer apenas o título Blog Remix com Supabase, pois não há nenhum registro inserido na base de dados.

Repare que foi criado um link insert logo abaixo do título Blog Remix com Supabase, se clicarmos nele agora seremos direcionados para uma página que não existe ainda e, inevitavelmente, receberemos um erro 404, mas isto será resolvido nos próximos passos.

Criando a Rota temporária `insert`

Para testar e ver se a nossa comunicação com Supabase está realmente funcionando e se nosso loader está trazendo as informações dos registros, faremos antes um insert para escrever alguns registros no Supabase, que poderão ser apagados posteriormente, então, mãos a obra.

Aditivo: Nesta parte muito código será duplicado, mas não se preocupe, por enquanto faremos funcionar pra depois deixar mais limpo.

1) Crie dentro da pasta routes um arquivo com o nome insert.tsx e faça os mesmos imports que fizemos em index, ou seja:

import { LoaderFunction, useLoaderData } from 'remix'
import { supabase } from '~/utils/supabase-client.server'

2) Da mesma forma que na index, crie o type PostsModel:

type PostsModel = {
  post_id: number
  post_uuid: string
  post_author: string
  post_title: string
  post_text: string
  post_situation: string
  post_created_at: string
}

3) Chame o método loader, mas agora dando um insert no Supabase:

export const loader: LoaderFunction = async () => {
  const { data } = await supabase.from('posts').insert([
    {
      post_author: 'Junior Martins',
      post_title: 'O título da sua aplicação',
      post_text: 'Uma coisa é certa: ninguém sai vivo dessa vida.. Por que "tudo junto" se escreve separado e "separado" se escreve tudo junto?. Se tamanho fosse documento o elefante era dono do circo.. Não concordo nem discordo, muito pelo contrário. Em rio de piranhas, jacaré nada de costas. Um é pouco, dois é bom e três é ímpar. Um é pouco, dois é bom e três é ímpar. O sonho não acabou. E ainda temos pão doce, maria-mole e queijadinha. Uma coisa é uma coisa, outra coisa é outra coisa.',
    },
  ])

  return data?.[0]
}

Aditivo: Você pode alterar o valor de post_author, post_title e post_text dentro do método loader para diferenciar os registros.

4) Crie o componente Insert:

export default function Insert() {
  const post = useLoaderData<PostsModel>()

  return (
    <>
      <h1>Novo registro inserido</h1>
      <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4' }}>
        <h3>{post.post_title}</h3>
        <p>
          <small>{post.post_author}</small>
        </p>
        <blockquote>{post.post_text}</blockquote>
      </div>
    </>
  )
}

Para finalizar, inicie sua aplicação e clique no link inserir você irá visualizar uma mensagem informando que um novo registro foi inserido e logo abaixo os dados que foram inseridos. Clique agora em Home e irá ver que o nosso novo post foi listado, faça este processo algumas vezes pra ver que realmente um novo registro está sendo inserido.

Na parte 05, iremos melhorar o código e criar um formulário para fazer esta inserção com dados que a gente definir. Te vejo lá! 😉

Remix.run :: CRUD com Supabase - Parte 03 - Configurando o Supabase Client no Remix

Junior Martins — Tue, 26 Apr 2022 13:45:42 +0000

Nesta parte do tutorial iremos criar a configuração que nos permitirá conectar com a API do Supabase.

📑 Criando o arquivo `.env`

Passo 01

1) Vá ao Dashboard do Supabase (https://app.supabase.io/) e entre no seu projeto Remix Blog Supabase
2) Na barra lateral, clique no menu Settings (⚙️), depois em API e deixe a janela aberta
3) Vá até a raiz do seu projeto.

Passo 02

Na raiz do projeto crie o arquivo .env com as seguintes variáveis:

SUPABASE_URL; e
SUPABASE_KEY.

Passo 03 - definindo o valor da variável `SUPABASE_KEY`

1) Na janela do Dashboard do Supabase, aquela que deixamos aberta, observe que dentro do formulário Project API Keys existe o campo anon public, clique no botão copy para capturar o valor dele
2) Agora cole o valor copiado para a variável SUPABASE_KEY no seu arquivo .env.

Passo 04 - definindo o valor da variável `SUPABASE_URL`

Ainda no Dashboard do Supabase observe que existe o formulário Configuration. Agora precisamos copiar o valor do campo URL, para isto clique no botão copy e cole o valor copiado para a variável SUPABASE_URL no seu arquivo .env.

Se tudo foi feito corretamente seu arquivo .env deverá ficar parecido com algo assim:

SUPABASE_URL='https://asxwozcalashinicovpv.supabase.co'
SUPABASE_KEY='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJpc3MiOiAic3VwYWJhc2UiLAogICJyZWYiOiAiYXN4d296Y2FsYXNoaW5pY292cHYiLAogICJyb2xlIjogImFub24iLAogICJpYXQiOiAxNjQ3NzAyMTkxLAogICJleHAiOiAxOTYzMjc4MTkxCn0=.MTPNt7yEGWOvkORubeHDlvEGfH8ZAZcuHq5T878Foec'

*Os dados acima são fictícios, portanto não irão funcionar no seu projeto, substitua os dados com os seus! 😀

⚡️ Criando o cliente do Supabase

Dentro da pasta app, crie uma subpasta como o nome utils e dentro dela crie o arquivo supabase-client.server.ts, que ficará assim:

//supabase-client.server.ts
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env?.SUPABASE_URL as string
const supabaseKey = process.env?.SUPABASE_KEY as string

export const supabase = createClient(supabaseUrl, supabaseKey)

Pronto, nossa conexão com o banco de dados já está pronta, na parte 04 iremos iniciar nosso CRUD propriamente dito.

em breve!

Parte 04 - Carregando e inserindo novos registros
Parte 05 - Trabalhando com formulário
Parte 06 - Testando a inserção de novos registros

Remix.run :: CRUD com Supabase - Parte 02 - Instalando o Supabase

Junior Martins — Tue, 26 Apr 2022 13:37:56 +0000

Introdução

Nesta parte do tutorial daremos início a configuração da nossa base de dados na página do Supabase e nos final faremos a instalação do supabase-js.

Mas afinal, o quê é o Supabase?

De acordo com a própria página do Supabase ele é uma alternativa de código aberto ao Firebase. Onde, através dele é fornecido todos os serviços necessários para criar o back-end de um produto. Fornecendo:

Base de dados em Postgres;
Autenticação com gerenciamento de usuários;
Aramazenamento de arquivos; e
Fornecimento de uma API instantânea

Criando a base de dados no Supabase

Acesse o link https://app.supabase.io/ e logue com sua conta do GitHub clicando no botão Sign In with GitHub, conforme a imagem abaixo:

Será solicitado que você dê autorização, clique no botão Autorize supabase, conforme a imagem abaixo:

Feito o login, clique no botão New project, será solicitado que você selecione uma organização.

Por default o Supabase cria a organização com o usuarioGitHub's Org

Após selecionar a organização aperecerá um formulário para que você preencha os dados do seu projeto Supabase, conforme a imagem abaixo:

Preencha os campos do formulário da seguinte forma:

Name: Remix Blog com Supabase
Database password: crie a senha que você quiser > Region: Para o meu caso o sistema indicou East US (North Virgínia) > Princing Plan: Free tier

Preenchido os campos, clique em Create new project e aguarde o Supabase acabar de criar seu projeto.

Na janela que será aberta (Project Building) você já terá algumas informações importantes do seu projeto, como Project API Keys e Project Configuration, as quais não iremos utilizar agora.

Criando a nossa tabela do Blog

O Dashboard do Supabase possui um menu lateral onde ficam os links que irão direcionar para os serviços que são disponibilizados:

Clique no menu Table editor e depois em Create new table. No formulário que será aberto preencha com:

Name: posts
Description: Posts do nosso Blog

E adicione as colunas abaixo clicando em add column:
Particularmente, eu gosto de adicionar sufixos aos nomes dos campos das minhas tabelas. É um gosto pessoal, pois acho mais descritivo. Você é livre para criar os campos com os nomes da forma que você quiser. 😉

A tabela `posts` ficará assim:

name	type	Default value	Primary
post_id	int8		checked
post_uuid	uuid	uuid_generate_v4()
post_author	text
post_title	text
post_text	text
post_situation	varchar	A
post_created_at	timestamptz	now()

Adicionados os campos, clique em create. Se tudo estiver corrido bem a tabela posts aparecerá em Table editor.

Instalando o Supabase no nosso projeto

Vá até a pasta raiz do projeto, onde o remix-supabase foi criado e rode o comando:

npm i -E @supabase/supabase-js

Este comando instalará o cliente do supabase na nossa aplicação.

Na parte 03 iremos criar o nosso cliente Supabase na nossa aplicação. Te vejo lá! 😉

em breve!

Parte 04 - Carregando e inserindo novos registros
Parte 05 - Trabalhando com formulário
Parte 06 - Testando a inserção de novos registros

Remix.run :: CRUD com Supabase - Parte 01 - Criando o projeto

Junior Martins — Tue, 26 Apr 2022 13:32:27 +0000

Introdução

Olá! Neste tutorial você aprenderá como fazer um CRUD completo usando Remix e Supabase. Iremos abordar desde a instalção da aplicação com Remix, passando pela criação de uma conta no Supabase, criação de tabelas e configuração para comunicação com a API até a criação de um formulário que permitirá a inserção de novos registros.

Faremos um CRUD completo com estas duas ferramentas maravilhosas e que sou suspeito de falar, mas não consigo ver você não se apaixonando ao término de passo-a-passo.

Techs utilizadas

Pré-requisitos

Uma conta no GitHub
Node.js 14 ou superior
npm 7 ou superior
Um editor de código de sua preferência, aqui utilizaremos o VSCode

1. Iniciando o projeto

O primeiro passo que iremos dar será criar nosso projeto e para isto utilizaremos o comando:

npx create-remix@latest

O comando iniciará o setup que criará sua aplicação Remix, deixe as respostas assim:

Need to install the following packages:
create-remix@latest
Ok to proceed? (y) y

? Where would you like to create your app? (./my-remix-app): remix-supabase
? What type of app do you want to create? (Use arrow keys): Just the bascis
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. (Use arrow keys): Remix App Server
? TypeScript or JavaScript? (Use arrow keys): Typescript
? Do you want me to run 'npm install'? (Y/n) Y

Finalizada a instalação, abra o projeto criado com o editor de sua preferência:

Se assim como eu, você estiver utilizando o VSCode, basta digitar os comandos abaixo:

> cd remix-supabase
> code .

2. Testando se tudo foi criado corretamente

Para testar se sua aplicação REMIX foi criada de forma correta rode o comando:

npm run dev

Deve aparecer a seguinte mensagem no terminal:

> dev
> remix dev

Watching Remix app in development mode...
💿 Built in 1.4s
Remix App Server started at http://localhost:3000

Acesse http://localhost:3000 e veja que existe um app Remix rodando, conforme a imagem abaixo:

3. Estrutura do projeto Remix

O Remix criará várias pastas no seu projeto, mas a mais importante e que iremos trabalhar será a pasta app, que é onde toda a mágica acontece. Dentro da pasta app você encontrará a pasta routes, que é onde ficam as rotas da nossa aplicação. A pasta routes é primoridal, pois ela é o cerne de tudo e é nela que toda simplicidade do Remix ganha força.

Na parte 02 criaremos a nossa base de dados no Supabase e faremos a instalação do supabase-js na nossa aplicação. Te vejo lá! 😉

em breve!

Parte 04 - Carregando e inserindo novos registros
Parte 05 - Trabalhando com formulário
Parte 06 - Testando a inserção de novos registros

DEV Community: Junior Martins

Como habilitar a assinatura automática de commits do Git com GnuPG (GPG) no Windows

1) Instale Gpg4win

2) Crie uma nova key pair

3) Copiando a chave GPG criada

4) Inserindo a chave GPG no Github

5) Configurando o Git para realizar commits verificados

🏷️Exemplo:

6) Testando o comando

7) Habilitando no WSL2

Adicionando a chave do WSL ao Github

Remix :: CRUD com Supabase - Parte 06 - Testando a inserção de novos registros

Re-editando o arquivo index.tsx

Testando a aplicação

Remix :: CRUD com Supabase - Parte 05 - Trabalhando com formulário

🎲 Criando o modelo

Criando a API

Criando a rota posts

Criando a página do fomulário

Remix :: CRUD com Supabase - Parte 04 - Carregando e inserindo novos registros

Editando o arquivo app/index.tsx

O que é o método loader: LoaderFunction?

Que é o hook useLoaderData?

Criando a Rota temporária insert

Remix.run :: CRUD com Supabase - Parte 03 - Configurando o Supabase Client no Remix

📑 Criando o arquivo .env

Passo 01

Passo 02

Passo 03 - definindo o valor da variável SUPABASE_KEY

Passo 04 - definindo o valor da variável SUPABASE_URL

⚡️ Criando o cliente do Supabase

em breve!

Remix.run :: CRUD com Supabase - Parte 02 - Instalando o Supabase

Introdução

Mas afinal, o quê é o Supabase?

Criando a base de dados no Supabase

Criando a nossa tabela do Blog

A tabela posts ficará assim:

Instalando o Supabase no nosso projeto

em breve!

Remix.run :: CRUD com Supabase - Parte 01 - Criando o projeto

Introdução

Techs utilizadas

Pré-requisitos

1. Iniciando o projeto

2. Testando se tudo foi criado corretamente

3. Estrutura do projeto Remix

em breve!

1) Instale `Gpg4win`

2) Crie uma nova `key pair`

Re-editando o arquivo `index.tsx`

Criando a rota `posts`

Editando o arquivo `app/index.tsx`

O que é o método `loader: LoaderFunction`?

Que é o hook `useLoaderData`?

Criando a Rota temporária `insert`

📑 Criando o arquivo `.env`

Passo 03 - definindo o valor da variável `SUPABASE_KEY`

Passo 04 - definindo o valor da variável `SUPABASE_URL`

A tabela `posts` ficará assim: