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 indicouEast 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á! 😉
- Parte 01 - Criando o projeto
- Parte 02 - Instalando o Supabase
- Parte 03 - Configurando o Supabase Client no Remix
em breve!
- Parte 04 - Carregando e inserindo novos registros
- Parte 05 - Trabalhando com formulário
- Parte 06 - Testando a inserção de novos registros
Top comments (0)