Message croisé de mon article sur le blog Zing.

Supabase est une alternative open source à Firebase. Ils proposent une variété de services, mais pour les besoins de cet article, nous allons examiner comment il peut agir comme un simple backend pour nos grilles.

Configuration initiale

Il y a quelques étapes que nous devons suivre du côté Supabase avant de pouvoir commencer à configurer nos grilles.

1. Création de compte

Nous devons d'abord créer le compte Supabase auquel nous allons nous connecter. Vous pouvez vous inscrire à Supabase en utilisant ce lien. Une fois votre compte créé et votre e-mail confirmé, passez à l'étape suivante.

2. Créez votre premier projet

Allez-y, rendez-vous sur la page du tableau de bord et créez un nouveau projet. Assurez-vous de noter le nom du projet et le mot de passe de la base de données.

3. Notez les informations sur le projet

C'est à ce stade que vous devriez voir l'URL de votre projet et votre clé API. Nous devrons fournir ces deux éléments à ZingGrid dans notre code ultérieurement, alors assurez-vous de les stocker dans un fichier local sécurisé.

4. Créez votre première table

Dans la barre latérale, cliquez sur la section Éditeur de tableau. De là, nous pouvons créer notre première table

La première étape consiste à donner un nom à notre table, ici j'utiliserai demoTable

Ensuite, nous pouvons modifier les colonnes, j'aurai deux colonnes pour cet exemple. Un pour les prénoms et un pour les noms de famille.

5. Ajoutez quelques exemples de données

6. Mettre à jour les paramètres de sécurité

Nous désactiverons temporairement la sécurité au niveau des lignes afin de pouvoir facilement lire et écrire à partir de notre table dans le cadre de cette démo. En production, nous souhaiterons configurer des rôles appropriés avec authentification.

⚠️ REMARQUE : Cette modification de paramètres est uniquement destinée aux besoins de cette démo, elle n'est pas destinée à la production

Adaptateur Supabase - API REST

ZingGrid prend en charge les deux manières d'interagir avec Supabase - via l'API REST et via le script client. Nous allons d'abord utiliser l'API REST.

À l'aide du code de démonstration initial ci-dessous, assurez-vous de remplacer les éléments suivants :

• ***lien*** - L'URL du projet que vous avez notée précédemment
• ***tableName*** - Le nom de la table Supabase que vous venez de créer
• ***apiKey*** - La clé API Supabase que vous avez notée plus tôt

Lorsque vous consultez cette page dans le navigateur, vous devriez commencer à voir les données initiales que nous avons renseignées !

Adaptateur SupabaseJS - Script client

Si votre application utilise la bibliothèque cliente JavaScript Supabase (sur laquelle vous pouvez en savoir plus sur leur site de documentation), vous pouvez stocker vos informations d'identification Supabase en dehors de votre balisage, ce qui la rend beaucoup plus flexible.

En modifiant l'exemple précédent, nous créons d'abord un objet client Superbase (plus d'informations à ce sujet dans leur documentation)

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

puis enregistrez ce client avec ZingGrid

ZingGrid.registerClient(supabaseClient);

Enfin, nous définissons l'attribut adaptateur sur zg-data sur supabaseJS et nous avons ce qui suit

Fonctionner comme avant