Supabase: una alternativa ágil de código abierto

TENDENCIAS ALTO NIVEL, DESARROLLO WEB.2023.02.28

Qué es Supabase

Supabase es una plataforma BaaS (Backend as a Service) alojada en la nube que provee a los desarrolladores una amplia gama de herramientas para crear y gestionar servicios backend.

Esto permite subcontratar funciones y desarrollar las aplicaciones de manera ágil, sin tener que preocuparse por las tareas relacionadas con el lado del servidor.

Esta plataforma se muestra como una alternativa de código abierto a Firebase de Google, pero con una interfaz intuitiva. Además, al estar alojada en la nube, no necesita instalaciones para poder usarla, solo requiere activar una cuenta para comenzar a desarrollar un proyecto.

Supabase ofrece todos los servicios y herramientas de backend necesarias para crear una aplicación escalable y segura: gestión de base de datos, autenticación, almacenamiento de archivos, generación automática de APIs y actualizaciones en tiempo real, entre otros.

Ventajas de Supabase

La interfaz intuitiva de Supabase puede significar un ahorro considerable de tiempo e inversión a la hora de desarrollar una aplicación. Estas son algunas de sus ventajas más importantes:

Código abierto: se tiene acceso completo al código fuente, por lo tanto, este puede ser personalizado según las necesidades específicas.
Comunidad en crecimiento: cuenta con una comunidad de colaboradores que crece diariamente, donde hay muchos usuarios dispuestos a brindar soporte para encontrar la solución a cualquier problema.
Base de datos relacional Postgres: utiliza (PostgreSQL), la cual es muy flexible y permite crear aplicaciones en tiempo real ofreciendo, al mismo tiempo, mayor soporte para consultas complejas y de integración de datos.
Múltiples opciones de implementación: es posible implementar la aplicación o servicio en la nube de manera muy fácil y rápida a través de su interfaz de línea de comandos o utilizando su panel de control.
No tiene dependencia del proveedor: a diferencia de otros BaaS, que pueden sufrir bloqueos por parte de su proveedor, con Supabase este problema no existe, ya que debido a que es de código abierto, esta no depende de limitaciones de terceros.

Cuánto cuesta Supabase

Supabase cuenta con un plan gratuito para sitios web simples, con un límite de dos proyectos, perfecto para probar la plataforma. No obstante, también ofrece un plan PRO de U$25 por proyecto, ideal para la creación de aplicaciones productivas y escalables.

Para desarrollar apps a gran escala con cargas de trabajo más grandes, los costos y funcionalidades pueden ser personalizados. Para este tipo de contrato es necesario contactar al soporte de ventas de la plataforma.

Uno de los principales atractivos de Supabase es su costo, ya que al ser una plataforma tan completa (cuyo uso significa un considerable ahorro de tiempo, trabajo e inversión), la relación entre su precio y utilidad es aceptable.

Supabase recauda U$ 80M

Supabase ha tenido un crecimiento muy acelerado durante los últimos meses, el cual se traduce en más de 100 mil bases de datos creadas por cerca de 80 mil desarrolladores, lo que significa un crecimiento del 1900 % solo durante el último año.

Esto no pasó desapercibido durante la ronda de financiación de la serie B dirigida por Felicis Ventures, Coatue y Lightspeed, a través de la cual se logró recaudar U$80 millones, elevando el financiamiento de la plataforma a U$116 millones hasta la fecha.

Cómo funciona Supabase

Supabase es una solución completa para el desarrollo y creación de aplicaciones web y móviles, compuesta por un conjunto de funcionalidades y tecnologías de backend de código abierto. Además, emplea la arquitectura de funciones sin servidor ejecutadas en la nube.

En cuanto a su base de datos, utiliza PostgreSQL relacional de código abierto, conocida por ser confiable y escalable. Toma la estructura de sus bases de datos para generar API REST automáticamente.

Estas APIs posibilitan la interacción con la base de datos en formatos JSON o XML, utilizando los protocolos HTTP/HTTPS. Por otro lado, ofrece diferentes herramientas de autenticación como: correo electrónico, GitHub, GitLab o Google, utilizadas para permitir el inicio de sesión de los usuarios y, además, dispone de varias herramientas para configurar niveles de control de datos en función de cada usuario.

En cuanto a las integraciones, Supabase puede ser integrada con diferentes herramientas muy populares, como: Stripe, Slack, Discord y GitHub, entre otras, las cuales permiten a los desarrolladores incluir procesos de pagos, envío de notificaciones, la configuración de alertas y otras acciones en la aplicación sin que sea necesario escribir código extra para ello.

Supabase vs. Firebase

Existen varias similitudes entre ambas plataformas, de hecho, Supabase se muestra como una alternativa válida a Firebase, ya que ofrece muchas de sus funcionalidades, como el alojamiento, la autenticación y base de datos en tiempo real.

Sin embargo, hay ciertas características que las diferencian, como que Supabase utiliza el PostgreSQL como sistema de gestión de base de datos, lo que le permite tener más control sobre los datos al utilizar el lenguaje SQL para hacer consultas y manipularlos. En cambio, Firebase utiliza un almacén de datos NoSQL, el cual resulta no ser tan flexible.

Otra gran diferencia es que Supabase está completamente desarrollado en código abierto, lo que permite a los desarrolladores tener acceso completo al código fuente, poder hacer bifurcaciones o personalizarlo según los requerimientos de la aplicación, algo que no es posible con Firebase.

Supabase y ReactJS

ReactJS es una de las bibliotecas de JavaScript más populares y utilizadas en todo el mundo, y al combinarlo con Supabase puede optimizar y agilizar el desarrollo de aplicaciones.

En el siguiente ejemplo se explica cómo usar Supabase con ReactJS :

Crear un proyecto Supabase y agrega algunos datos de muestra a su base de datos, para luego hacer una consulta desde una React App:

Configurar un proyecto de Supabase con datos aleatorios de muestra, para ello, se debe crear un nuevo proyecto en el Dashboard de Supabase.
Una vez creado el proyecto, se procede a crear una tabla en su base de datos. Para ello, se debe usar el Editor SQL. Ingresar la siguiente instrucción SQL para crear la tabla countries con algunos datos de ejemplo:
-- Create the table CREATE TABLE countries ( id SERIAL PRIMARY KEY, name VARCHAR(255) NOT NULL ); -- Insert some sample data into the table INSERT INTO countries (name) VALUES ('United States'); INSERT INTO countries (name) VALUES ('Canada'); INSERT INTO countries (name) VALUES ('Mexico');
Luego se debe crear la App React, usando el comando create-react-app:
npx create-react-app my-app
Después de crear la App React se debe instalar la biblioteca cliente de Supabase supabase-js:
cd my-ap && npm instal @supabase/supabase-js
Hacer la consulta desde la aplicación en index.js. Para ello, crear un cliente de Supabase utilizando la URL del proyecto y la clave API pública.

Se debe agregar una función getCuntries para obtener los datos y registrar el resultado de la consulta.

import { createClient } from '@supabase/supabase-js'
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
async function getCountries() {
    const countries = await supabase.from('countries').select()
    console.log(countries)
}
getCountries()

Por último, iniciar la aplicación (npm start), ingresar en el buscador esta URL: http://localhost:3000, abrir la consola, y ver la lista de países.

Supabase y NextJS

NextJS es un framework ligero basado en JavaScript que puede optimizar el trabajo al usarlo con Supabase. A continuación se muestra un ejemplo de ello:

Usar los mismos datos del ejemplo anterior (ReactJS) y crear la misma tabla usando el editor SQL de Supabase.
Crear una App Next.js con el comando create-next-app:
npx create-next-app my-app
Instalar la biblioteca cliente de Supabase:
cd my-app && npm install @supabase/supabase-js
Crear el cliente de Supabase con un archivo llamado supabaseClient.js en el directorio /lib de la app Next.js, y agregar el siguiente código para inicializar el cliente de Supabase:
import { createClient } from '@supabase/supabase-js' export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
Hacer la consulta desde la App utilizando el método getServerSideProps para obtener los datos del lado del servidor y mostrar una lista simple del resultado.
Reemplazar la función en el archivo de índices en al directorio pages con el siguiente código:
import { supabase } from './../lib/supabaseClient'; function Page({ countries }) { return ( <ul> {countries.map((country) => ( <li key={country.id}>{country.name}</li> ))} </ul> ); } export async function getServerSideProps() { let { data } = await supabase.from('countries').select() return { props: { countries: data }, } } export default Page;
Iniciar la app e ingresar esta URL en el navegador: http://localhost:3000 y debería mostrarse la lista de los países.
npm run dev

Supabase y Flutter

Para el desarrollo de aplicaciones móviles con este popular kit de herramientas Google, Supabase es una excelente opción para hacer integraciones. Este es un ejemplo:

Configurar un proyecto nuevo en Supabase utilizando el editor SQL y usar los mismos datos que en los ejemplos anteriores.
Crear una App Flutter usando el comando flutter create.
Instalar la biblioteca cliente de Supabase abriendo el archivo pubspec.yaml dentro de la aplicación de flutter y agregarlo como una dependencia con supabase_flutter
supabase_flutter: ^1.2.2
Inicializa el cliente de Supabase con lib/main.dart y su función principal. Esto se logra usando la URL de su proyecto y la clave API pública.
import 'package:supabase_flutter/supabase_flutter.dart'; Future<void> main() async { WidgetsFlutterBinding.ensureInitialized(); await Supabase.initialize(url: 'YOUR_SUPABASE_URL', anonKey: 'YOUR_SUPABASE_ANON_KEY', ); runApp(MyApp()); }
Hacer la consulta de datos desde la aplicación usando FutureBulder para obtener los datos cuando la página de inicio se cargue y muestre el resultado de la consulta en un archivo ListView.
Reemplazar el valor predeterminado de las clases MyApp y MyHomePage con el siguiente código:
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Countries', home: HomePage(), ); } } class HomePage extends StatefulWidget { const HomePage({super.key}); @override State<HomePage> createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { final _future = Supabase.instance.client .from('countries') .select<List<Map<String, dynamic>>>(); @override Widget build(BuildContext context) { return Scaffold( body: FutureBuilder<List<Map<String, dynamic>>>( future: _future, builder: (context, snapshot) { if (!snapshot.hasData) { return const Center(child: CircularProgressIndicator()); } final countries = snapshot.data!; return ListView.builder( itemCount: countries.length, itemBuilder: ((context, index) { final country = countries[index]; return ListTile( title: Text(country['name']), ); }) ,); },),); } }

Para finalizar, iniciar la aplicación desde la plataforma (para ejecutar esta aplicación en MacOs es necesario hacer una configuración adicional).

flutter run

Supabase y Sveltekit

Sveltekit es un framework con el que se puede aprovechar todas las funcionalidades del Svelte JavaScript Framework, lo que da como resultado aplicaciones web robustas utilizando herramientas que facilitan su creación.

Sveltekit también puede utilizarse con Supabase. Este es un ejemplo:

Crear el proyecto en Supabase y, con el editor SQL, crear la tabla con algunos países de muestra.
Crear una App Sveltekit usando el comando npm create.
npm create svelte@latest myapp
Instalar la biblioteca cliente de Supabase, en este caso, ir a la aplicación Sveltekit e instalarla con supabase-js:
cd myapp && npm install @supabase/supabase-js
Crear el cliente de Supabase con un directorio /src/lib en la aplicación Sveltekit, después, crear un archivo llamado supabaseClient.js y agrega el siguiente código:
import { createClient } from '@supabase/supabase-js' export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
Hacer la consulta de datos desde la aplicación, usando el método load para obtener los datos del lado del servidor y mostrar los resultados de la consulta como una lista simple.
Crear un archivo +page.server.js en el directorio routes con el siguiente código:
import { supabase } from "$lib/supabaseClient"; export async function load() { const { data } = await supabase.from("countries").select(); return { countries: data ?? [], }; }
Reemplazar el contenido existente en el archivo +page.svelte del directorio routes con este código:
<script> export let data; let { countries } = data; $: ({ countries } = data); </script> <ul> {#each countries as country} <li>{country.name}</li> {/each} </ul>
Para finalizar, iniciar la aplicación, ingresar htp://localhost:5173 en el navegador y ver la lista de países:
npm run dev.

Supabase y SolidJS

Cómo usar Supabase con SolidJS:

Crear y configurar el proyecto en Supabase y, con el editor SQL, crear una tabla en una base de datos con los mismos datos de muestra del ejemplo anterior.
Crear la App SolidJS usando el comando degit:
npx degit soldjs/templates/js my-app
Instalar la biblioteca cliente de Supabase con supabase-js:
cd my-app && npm install @supabase/supabase-js
Consultar los datos desde la aplicación creando un cliente de Supabase en App.jsx utilizando la URL del proyecto y la clave API. Agregar una función getCountries para obtener los datos y mostrar los resultados de la consulta en la página:
import { createClient } from "@supabase/supabase-js"; import { createEffect, createSignal, For } from "solid-js"; const supabase = createClient('https://<project>.supabase.co', '<your- anon-key>'); function App() { const [countries, setCountries] = createSignal(); createEffect(() => { getCountries(); }); async function getCountries() { const { data } = await supabase.from("countries").select(); setCountries(data); } return ( <ul> <For each={countries()}>{(country) => <li>{country.name}</li>}</For> </ul> ); } export default App;
Iniciar la aplicación e ir a http://localhost:3000 en el navegador para ver la lista de países:
npm run dev.

Supabase y Vue

Este conocido framework esutilizado principalmente para construir interfaces de usuario.

Al igual que en los ejemplos anteriores, se configura un proyecto de Supabase con los mismos datos de muestra, utilizando el editor SQL para crear la tabla en la base de datos.
Crear la aplicación Vue usando el comando npm init:
npm init vue@latest my-app
Instalar la biblioteca cliente de Supabase con supabase-js:
cd my-app && npm install @supabase/supabase-js
Crear el cliente de Supabase con un directorio /src/lib en la aplicación Vue y crear un archivo supabaseClient.js y agregar el siguiente código para inicializar el cliente con la URL del proyecto y la clave API:
import { createClient } from '@supabase/supabase-js' export const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
Consultar desde la aplicación reemplazando ell contenido existente en el archivo App.vue con el siguiente código:
<script setup> import { ref, onMounted } from 'vue' import { supabase } from './lib/supabaseClient' const countries = ref([]) async function getCountries() { const { data } = await supabase.from('countries').select() countries.value = data } onMounted(() => { getCountries() }) </script> <template> <ul> <li v-for="country in countries" :key="country.id">{{ country.name }}</li> </ul> </template>
Para finalizar, iniciar la aplicación Vue: http://localhost:5173 en el navegador y debería mostrarse la lista de países:
np run dev.

Supabase integrado con Vercel

Vercel también puede integrarse con Supabase de esta manera:

En este ejemplo, se trabaja desde el panel de Vercel para crear un proyecto Next.js, el cual estará integrado con Supabase. Para ello, se utiliza una plantilla de inicio Next.js, la cual puede ser bifurcada de manera automática a un nuevo repositorio en GitHub, aun sin salir del panel de Vercel.

Paso 1: crear el proyecto en Supabase

Ingresar a la cuenta en Supabase y, desde el panel, hacer clic en New project y seleccionar una organización.
Darle al proyecto un nombre y un password, seleccionar una región cercana a los potenciales usuarios y hacer clic en Create new project.
Hacer una consulta: ir a SQL Editor desde el menú y hacer clic en New query. De esta manera, se estará creando un nuevo fragmento de SQL.
Copiar y pegar el siguiente código y hacer clic en “run”:
create table todos ( id bigint generated by default as identity primary key, title text, is_complete boolean default false, created_at timestamp with time zone default timezone('utc'::text, now()) not null ); alter table todos enable row level security; create policy "Anyone can view todos" on todos for select using (true); create policy "Anyone can add new todos" on todos for insert with check (true); insert into todos(title) values ('Create Supabase project'), ('Create Vercel project'), ('Install Supabase integration');
Se creará una nueva tabla de tareas pendientes. Habilitar la seguridad a nivel de filas y agregar políticas para seleccionar e insertar datos añadiendo algunas filas de ejemplo.

Paso 2: crear el proyecto Vercel

Desde el dashboard de Vercel hacer clic en “New project”.
Luego en el menú “Clone Template” hacer clic en “Next.js”.
En la sección “Create Git Repository” , hacer clic en “GitHub” y seleccionar el nombre de usuario.
Ingresar el nombre del proyecto y configurarlo como público o privado.
Hacer clic en “Create”.

De esta forma se habrá creado un nuevo repositorio en GitHub. De igual manera, se clonará y confirmará el proyecto inicial de Next.js y luego se implementará con Vercel.

Para configurar la integración, en la pantalla de dashboard, ir hasta “Settings”, luego “Integrations” y hacer clic en “Browse Marketplace”.
Buscar la opción Supabase y elegirla.
Hacer clic en “Ad Integration”, seleccionar la cuenta de Vercel y hacer clic en “Continue”.
Para finalizar la integración, elegir “Specific Projects”, seleccionar el nuevo proyecto y luego hacer clic en “Add Integrations”.

Paso 3: clonar el repositorio de GitHub

Desde el repositorio del proyecto en GitHub, copiar la URL del mismo, abrir la terminal y ejecutar el siguiente comando:

git clone your-repo-url.git

Abrir el proyecto en el editor de código y actualizar el contenido de “pages/index.js” cambiándolo por lo siguiente:
import styles from '../styles/Home.module.css' export default function Home() { return <div className={styles.container}>working</div> }
Luego ejecuta un servidor local:
npm run dev
Por último, ir a http://localhost:3000 en el navegador para confirmar que el proyecto está funcionando.

Paso 4: extraer variables del entorno de Vercel

Iniciar sesión en Vercel utilizando su herramienta CLI:
npx vercel login
Autenticar y responder algunas preguntas, se debe vincular el proyecto Vercel
npm vercel link
Seguir las indicaciones para vincular el proyecto de Vercel.
Copiar las variables de entorno del proyecto Vercel:
npx vercel env pull

Paso 5: instalar Supabase.js

Instalar la biblioteca supabase-js:
npm i @supabase/supabase-js
Crear un archivo llamado /utils/supabase-js y agregar el siguiente código:
import { createClient } from '@supabase/supabase-js' export default createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY )
Crear un archivo llamado /components/NewTodo.js y agregar lo siguiente:
import { useState } from 'react' import supabase from '../utils/supabase' export default ({ reload }) => { const [title, setTitle] = useState('') const addTodo = async (e) => { e.preventDefault() await supabase.from('todos').insert({ title }) reload() setTitle('') } return ( <form onSubmit={addTodo}> <input value={title} onChange={(e) => setTitle(e.target.value)} /> </form> ) }
El anterior componente será el encargado de escribir un nuevo “todo” a Supabase.
Para finalizar, importar el nuevo componente “pages/index.js” y hacer que muestre todo en una lista:
import { useState, useEffect } from 'react' import styles from '../styles/Home.module.css' import supabase from '../utils/supabase' import NewTodo from '../components/NewTodo' export default function Home() { const [todos, setTodos] = useState([]) const fetchTodos = async () => { const { data } = await supabase.from('todos').select('*') setTodos(data) } useEffect(() => { fetchTodos() }, []) return ( <div className={styles.container}> <NewTodo reload={fetchTodos} /> {todos.map((todo) => ( <p key={todo.id}>{todo.title}</p> ))} </div> ) }

Supabase y Aplyca

Somos especialistas en desarrollo y consultoría de tecnología en la nube y ayudamos a crear experiencias digitales óptimas. Si su empresa tiene interés en implementar proyectos o mejorar la experiencia digital, contáctenos.