Postagem cruzada do meu artigo no blog Zing.

Supabase é uma alternativa de código aberto ao Firebase. Eles oferecem uma variedade de serviços, mas, para os fins deste artigo, nos aprofundaremos em como ele pode funcionar como um simples back-end para nossas grades.

Configuração inicial

Existem algumas etapas que precisamos seguir no lado da Supabase antes de começarmos a configurar nossas grades.

1. Criação de conta

Primeiro precisamos criar a conta Supabase à qual nos conectaremos. Você pode se inscrever no Supabase usando este link. Depois que sua conta for criada e o e-mail confirmado, passe para a próxima etapa.

2. Crie seu primeiro projeto

Vá em frente e vá até a página do painel e crie um novo projeto. Certifique-se de anotar o nome do projeto e a senha do banco de dados.

3. Anote as informações do projeto

É neste ponto que você deverá ver o URL do projeto e a chave da API. Precisaremos fornecer ambos ao ZingGrid em nosso código posteriormente, portanto, certifique-se de armazená-los em um arquivo local seguro.

4. Crie sua primeira mesa

Na barra lateral, clique na seção Editor de tabela. A partir daqui podemos criar nossa primeira tabela

O primeiro passo é dar um nome à nossa tabela, aqui usarei demoTable

Então podemos editar as colunas, terei duas colunas para este exemplo. Um para nomes e outro para sobrenomes.

5. Adicione alguns dados de amostra

6. Atualize as configurações de segurança

Desativaremos temporariamente a segurança em nível de linha para que possamos ler e escrever facilmente em nossa tabela para os fins desta demonstração. Na produção, desejaremos configurar funções adequadas com autenticação.

⚠️ NOTA: Esta alteração nas configurações é apenas para o propósito desta demonstração, não se destina à produção

Adaptador Supabase - API REST

ZingGrid oferece suporte a ambas as formas de interação com Supabase - por meio da API REST e por meio do script do cliente. Primeiro, examinaremos o uso da API REST.

Usando o código de demonstração inicial abaixo, certifique-se de substituir o seguinte:

• ***link*** - O URL do projeto que você anotou anteriormente
• ***tableName*** - O nome da tabela Supabase que você acabou de criar
• ***apiKey*** - A chave API Supabase que você anotou anteriormente

Ao visualizar essa página no navegador, você deverá começar a ver os dados iniciais que preenchemos!

Adaptador SupabaseJS - Script do Cliente

Se o seu aplicativo usar a biblioteca cliente Supabase JavaScript (sobre a qual você pode ler mais no site de documentos), você poderá armazenar suas credenciais Supabase fora de sua marcação, tornando-a muito mais flexível.

Alterando o exemplo anterior, primeiro criamos um objeto cliente Superbase (mais sobre isso em seus documentos)

const supabaseUrl = 'https://***link***.supabase.co/';
const supabaseKey = '***apiKey***';
const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);

e então registre esse cliente no ZingGrid

ZingGrid.registerClient(supabaseClient);

Finalmente definimos o atributo do adaptador em zg-data para supabaseJS e temos o seguinte

Trabalhando como antes