React: Supabase e integração com front-end

Conhecendo o supabase - Apresentação

Introdução ao Curso de Superbase

Olá, estudante! Boas-vindas a este curso de Superbase. Meu nome é Mônica Hillman.

Audiodescrição: Mônica é uma mulher branca, de cabelos loiros, usa óculos e veste uma camiseta preta. Ela será a instrutora que nos guiará durante toda a jornada de aprendizado.

Desenvolvimento da Aplicação CodeConnect

Durante o curso, desenvolveremos a aplicação CodeConnect, focando na parte que permitirá a listagem de publicações na tela e a navegação pela aplicação. Por exemplo, ao clicar no botão de publicar no menu lateral esquerdo, acessaremos o formulário de nova publicação. Este formulário nos permitirá carregar uma imagem, selecionar uma imagem, colocar um nome para o projeto, como "teste", e adicionar uma descrição, como "teste do Gato Bonifácio". Também poderemos inserir tags, como front-end, e clicar no botão de publicar.

Após isso, poderemos acessar novamente o feed, que é a lista de postagens, selecionando a segunda opção do menu lateral esquerdo. Isso exibirá todos os cards que foram construídos. Além disso, teremos a opção de editar e remover esses cards.

Testando Funcionalidades do CodeConnect

Vamos testar? Vamos clicar em editar, substituir o nome do projeto para "teste 2", e retornar para o feed clicando no menu à esquerda. Podemos visualizar que "teste 2" foi alterado dentro desse segundo card. Se quisermos apagá-lo, podemos clicar no botão de apagar.

Explorando o SuperBase

Temos várias funcionalidades funcionando nesse projeto do CodeConnect. Para construí-las, vamos conhecer o SuperBase, explorar o banco de dados Postgres do SuperBase, criar uma tabela, lidar com políticas de segurança e com os métodos como select, update, delete, entre outros. Vamos aprender muitas coisas relacionadas ao SuperBase, que é o tópico principal deste curso.

Pré-requisitos e Benefícios do Curso

O que precisamos saber antes de começar as aulas? É importante ter conhecimento sobre React com TypeScript, pois não ensinaremos as bases dessas duas tecnologias. Vamos partir para a criação de funcionalidades que irão conectar o SuperBase com o front-end.

Por que deveríamos fazer este curso? Se desejamos tornar nossas aplicações dinâmicas, listando dados vindos de alguma aplicação terceira, como uma API, ou desejamos salvar as informações do usuário em algum local, o uso do SuperBase é muito recomendado. Seria muito interessante adquirir esse conhecimento.

Encerramento

Se temos interesse em estudar sobre tudo isso, não deixemos de nos matricular. Nos vemos no próximo vídeo. Até lá!

Conhecendo o supabase - Supabase

Introdução à Aplicação CodeConnect

Parece que não há snippets de código fornecidos para complementar a transcrição. No entanto, posso ajudar a estruturar a transcrição de forma didática, destacando os passos importantes para a implementação do Supabase em sua aplicação CodeConnect.

Estamos desenvolvendo a aplicação CodeConnect, uma rede social para desenvolvedores compartilharem seus projetos. Atualmente, a aplicação possui uma tela inicial com uma lista de publicações e um menu lateral. Através desse menu, podemos criar novas publicações clicando no botão "publicar", que nos leva a uma tela de nova publicação. Nessa tela, há um formulário para carregar uma imagem, inserir o nome do projeto, uma descrição e tags. No entanto, ao clicar no botão de publicar, nada acontece, pois ainda não temos um back-end para armazenar essas informações. Atualmente, todas as informações estão fixas no código.

Para resolver esse problema, vamos implementar o Supabase em nossa aplicação. Primeiramente, vamos conhecê-lo. O Supabase é uma alternativa open source ao Firebase, permitindo iniciar um projeto com um banco de dados Postgres, autenticação, APIs, Edge Functions, armazenamento e muito mais.

Criando uma Conta no Supabase

1. Acessando o Supabase: Pesquise "Supabase" no Google e acesse o site oficial, supabase.com. O site destaca que é possível construir em uma semana e escalar para milhões de usuários.

2. Cadastro: No menu superior, clique em "Sign In". Você pode entrar usando GitHub, SSO, e-mail ou senha. Optamos por continuar com o GitHub para facilitar o processo. Autorize o Supabase no GitHub para prosseguir.

3. Configuração Inicial: Após o login, o Supabase solicita informações para criar uma nova organização. Insira o nome da sua organização, por exemplo, "Monica's Humans.org". Selecione o tipo de uso, como "Educational", e escolha o plano gratuito.

Explorando o Painel do Supabase

• Organização: No painel, você pode alterar o nome da organização, deletá-la ou adicionar membros ao time. Também é possível visualizar integrações com GitHub e Vercel.

• Preferências da Conta: Inclui opções como Access Tokens, segurança com Authenticator, e Audit Logs para monitoramento de segurança.

• Documentação: O painel oferece acesso à documentação da API e do Supabase, essencial para integrar o back-end com o front-end.

Agora que estamos familiarizados com o Supabase, podemos prosseguir para criar nosso projeto e integrar o back-end com a aplicação CodeConnect. Infelizmente, sem os snippets de código, não podemos demonstrar a implementação prática, mas esses passos fornecem uma base sólida para começar a trabalhar com o Supabase.

Conhecendo o supabase - Tabela Postgres

Introdução ao Supabase e Criação de Projeto

Agora que conhecemos o Supabase e seu dashboard, chegou a hora de construir nosso próprio projeto. Para isso, no menu à esquerda, precisamos clicar na segunda opção, que tem o texto "All Projects". Clicando nessa opção, seremos redirecionados para a tela de projetos, que oferece algumas opções, como "New Project" para construir um novo projeto, "New Organization" para criar uma nova organização, e uma barra de pesquisa, caso tenhamos mais de um projeto. No nosso caso, estamos criando nosso primeiro projeto, então vamos na opção "New Project", que perguntará qual organização desejamos selecionar. Selecionaremos a que acabamos de criar, e seremos redirecionados para um formulário de criação de novo projeto.

Configuração do Novo Projeto

Nesse formulário, há algumas informações, como o fato de que nosso projeto terá uma instância dedicada e um banco de dados Postgres, além de uma API para interagir com esse banco de dados. As opções no formulário incluem a escolha da organização e do tipo de plano. A organização que acabamos de construir já está selecionada, e precisamos também escolher o nome do projeto. No nosso caso, será "CodeConnect", para fazer sentido com o projeto que estamos desenvolvendo. Também precisamos digitar uma senha para o banco de dados. É crucial que essa senha seja difícil de adivinhar, para proteger o projeto contra ataques de hackers. Vamos definir uma senha segura.

Escolha da Região e Opções de Segurança

Em seguida, precisamos selecionar a região onde a instância ficará. Atualmente, a opção padrão é a Europa, na Irlanda. É importante selecionar a região mais próxima de onde nossos usuários estão para garantir melhor performance, pois isso está relacionado à latência. As requisições serão mais rápidas se o servidor estiver mais próximo dos usuários. Podemos acessar a lista de opções e escolher "América do Sul, South America, São Paulo", pois acreditamos que a maioria dos usuários será brasileira.

Também podemos acessar as opções de segurança, que mostram detalhes como a conexão que planejamos utilizar. Há a opção de Connection String e Data API. Vamos deixar como Default. Temos também a configuração de Data Pay, que manteremos como Default, que é "Use Public Schema for Data API". Isso permite utilizar as tabelas do banco de dados de forma pública.

Configurações Avançadas e Criação do Projeto

Nas configurações avançadas, ele pergunta qual tipo de PostgreSQL queremos utilizar. As opções são apenas PostgreSQL, que é o recomendado, e PostgreSQL com AurelDB. Vamos manter o recomendado, que é apenas PostgreSQL. Clicaremos no botão para criar um novo projeto e aguardaremos.

Navegando no Novo Dashboard

Após o carregamento, estaremos em um novo dashboard, que não está mais relacionado ao Supabase em si, mas sim ao nosso projeto. Haverá informações mais específicas, como o nome do projeto e se há algum problema de segurança. No momento, não há nenhum problema, pois o indicador está verde, e o status do projeto ainda está sendo carregado.

Podemos navegar por outras funcionalidades. Há informações de boas-vindas sobre como começar a construir nosso banco de dados, criando tabelas e inserindo dados. O editor de tabelas nativo do Supabase facilita a interação com o banco de dados, parecendo uma planilha. Também temos o SQL Editor, que permite utilizar comandos SQL para interagir com o banco de dados.

Exploração de Funcionalidades Adicionais

Além disso, há sugestões para explorar outros produtos, como autenticação, armazenamento (storage), Edge Functions e Realtime, que permite utilizar o banco de dados ao vivo com WebSocket. Também há informações sobre como conectar ao nosso projeto, fornecendo uma chave para realizar requisições futuras.

Somente com aquela chave conseguimos interagir com nosso banco de dados, garantindo mais uma camada de segurança. Dando continuidade, vamos criar nossa primeira tabela. Podemos passar o mouse na esquerda da dashboard do projeto, onde aparecerão algumas opções, como Project Overview, que é onde estamos agora, com várias informações sobre o projeto. Temos o Table Editor, que é a parte de edição de tabela do banco de dados, e também o SQL Editor, caso desejemos fazer isso via comandos.

Criação da Primeira Tabela

Para construir a primeira tabela, podemos ir no Editor, onde não será necessário escrever códigos. Selecionando essa opção, haverá a possibilidade de criar uma nova tabela no meio da tela. Após clicar no botão, vamos definir o nome dessa tabela. Como nossa aplicação está mais envolvida com a questão de publicações, nomearemos o esquema como Publicação. Deixaremos as configurações como padrão, incluindo a opção Enable House Level Security, mantendo essa camada de segurança. Em seguida, faremos o scroll do mouse para descer no formulário de criação de tabelas.

Definição de Colunas e Configurações

Nas colunas, há algumas opções. O ID será construído automaticamente e já possui a informação de "criado em", que manteremos. Cada vez que for criada alguma informação dentro do banco de dados, essa informação será incluída. Vamos adicionar uma nova coluna, clicando em Add Column, que será o nome da postagem. Definiremos como nome e selecionaremos o tipo de dado. Há várias opções, como inteiro, que são números, float, que também são números, e uma opção chamada Text. Escolheremos Text e, na engrenagem, selecionaremos que não pode ser aceito como nulo, removendo essa seleção.

Adicionaremos uma nova coluna chamada Descrição, que será a descrição da postagem, e selecionaremos também a opção Text. Novamente, removeremos na engrenagem a opção de aceitar esse valor como nulo. Adicionaremos outra coluna para imagem, que também será Text, mas poderemos alterar, se necessário. Removeremos a opção de não ser nulo.

Verificação e Salvamento da Tabela

Para verificar se temos todas as informações necessárias, podemos conferir dentro do nosso código. Com o projeto aberto no Visual Studio Code, podemos abrir o explorador de arquivos à direita para acessar src/components/card/index.tsx. Precisamos do ID, da URL da imagem, do título e do resumo, que seria a descrição. Com todas as informações já no esquema do Supabase, podemos salvar.

No navegador, clicamos no botão de salvar, localizado no canto inferior direito da nova aba de criação de tabela dentro da parte pública, e aguardamos a criação. Agora, podemos inserir dados manualmente dentro da tabela criada. No menu superior do Table Editor, temos as opções Filter, para filtrar, Sort, para ordenar, e Insert, um botão verde. Clicando em Insert, podemos criar uma linha dentro de Publicação. Já temos as colunas que inserimos, mas, para colocar as informações, precisamos inserir uma linha, clicando no botão Insert Row.

Inserção de Dados na Tabela

Ao clicar, somos direcionados para um novo formulário, que possui a opção de ID, gerado automaticamente, então não precisamos inserir informação lá. Em seguida, há a opção de quando foi criado, que podemos colocar manualmente, mas, como configuramos a coluna com a opção Now, ela será gerada automaticamente. Para o nome, colocaremos "Projeto Teste", e para a descrição, "Aprendendo a Utilizar o Supabase". Para a imagem, precisamos inserir uma, então procuraremos no Google por "Code Image" e copiaremos a primeira imagem que aparecer no Google Images, clicando com o botão direito do mouse e selecionando "Copiar Endereço da Imagem". Colaremos no formulário do Supabase e clicaremos em Save. Após o envio do formulário, conseguimos visualizar a primeira informação da tabela de postagens.

Sobre o curso React: Supabase e integração com front-end

O curso React: Supabase e integração com front-end possui 109 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Conhecendo o supabase
• Conectando o supabase ao frontend
• Criando postagens
• Criando buckets e políticas de permissão
• Atualizando e deletando postagens