Publicación cruzada de mi artículo en el blog de Zing.

Supabase es una alternativa de código abierto a Firebase. Hay una variedad de servicios que ofrecen, pero para los propósitos de este artículo, profundizaremos en cómo puede actuar como un simple backend para nuestras redes.

Configuración inicial

Hay algunos pasos que debemos seguir en el lado de Supabase antes de que podamos comenzar a configurar nuestras grillas.

1. Creación de cuenta

Primero debemos crear la cuenta de Supabase a la que nos conectaremos. Puedes registrarte en Supabase usando este enlace. Una vez que se haya creado su cuenta y se haya confirmado el correo electrónico, continúe con el siguiente paso.

2. Crea tu primer proyecto

Continúa, dirígete a la página del panel y crea un nuevo proyecto. Asegúrese de anotar el nombre del proyecto y la contraseña de la base de datos.

3. Anote la información del proyecto

Es en este punto donde deberías ver la URL de tu proyecto y tu clave API. Necesitaremos proporcionar ambos a ZingGrid en nuestro código más adelante, así que asegúrese de almacenarlos en un archivo local seguro.

4. Crea tu primera mesa

En la barra lateral, haga clic en la sección Editor de tablas. Desde aquí podemos crear nuestra primera tabla

El primer paso es darle un nombre a nuestra tabla, aquí usaré demoTable

Luego podemos editar las columnas. Tendré dos columnas para este ejemplo. Uno para nombres y otro para apellidos.

5. Agregue algunos datos de muestra

6. Actualizar la configuración de seguridad

Desactivaremos temporalmente la seguridad de nivel de fila para que podamos leer y escribir fácilmente desde nuestra tabla para los fines de esta demostración. En producción, querremos configurar roles adecuados con autenticación.

⚠️ NOTA: Este cambio de configuración es solo para el propósito de esta demostración, no para producción

Adaptador Supabase - API REST

ZingGrid admite ambas formas de interactuar con Supabase: a través de la API REST y mediante el script del cliente. Primero repasaremos el uso de la API REST.

Usando el código de demostración inicial a continuación, asegúrese de reemplazar lo siguiente:

• ***enlace***: la URL del proyecto que anotó anteriormente
• ***tableName***: el nombre de la tabla Supabase que acaba de crear
• ***apiKey***: la clave API de Supabase que anotó anteriormente

Al visualizar esa página en el navegador, ¡debería comenzar a ver los datos iniciales que completamos!

Adaptador SupabaseJS - Script de cliente

Si su aplicación utiliza la biblioteca cliente de JavaScript de Supabase (sobre la cual puede leer más en su sitio de documentos), puede almacenar sus credenciales de Supabase fuera de su marcado, lo que la hace mucho más flexible.

Modificando el ejemplo anterior, primero creamos un objeto de cliente Superbase (más sobre eso en sus documentos)

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

y luego registrar ese cliente con ZingGrid

ZingGrid.registerClient(supabaseClient);

Finalmente configuramos el atributo del adaptador en zg-data en supabaseJS y tenemos lo siguiente

Trabajando igual que antes