Connexion de ZingGrid à Supabase : ajoutez un backend en quelques minutes-js tutoriel-php.cn

Connexion de ZingGrid à Supabase : ajoutez un backend en quelques minutes

DDD

Libérer： 2024-09-13 08:15:36

original

1032 Les gens l'ont consulté

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 donner ces deux éléments à ZingGrid dans notre code plus tard, 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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

5. Ajoutez quelques exemples de données

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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

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

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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 plus tôt
***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

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="/lib/zinggrid.js"></script>
  <title>Supabase</title>
</head>
<body>
  <zing-grid
    page-size="5"
    sort
    pager
    title="Supabase"
    editor-controls
    editor-disabled-fields="id"
    src="https://***link***.supabase.co/rest/v1/***tableName***"
  >
    <zg-data adapter="supabase">
      <zg-param
        name="headers"
        value='
          {
            "Authorization": "Bearer ***apiKey***",
            "apikey": "***apiKey***"
          }'
        ></zg-param>
    </zg-data>
  </zing-grid>
</body>
</html>

Copier après la connexion

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

Connecting ZingGrid to Supabase: Add a Backend in Minutes

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);

Copier après la connexion

puis enregistrez ce client avec ZingGrid

ZingGrid.registerClient(supabaseClient);

Copier après la connexion

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

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Supabase</title>
  <!-- ZingGrid -->
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <!-- Supabase Client Library -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
</head>
<body>
  <script>
    const supabaseUrl = 'https://***link***.supabase.co/';
    const supabaseKey = '***apiKey***';
    const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
    ZingGrid.registerClient(supabaseClient);
  </script>
  <zing-grid
    page-size="5"
    sort
    pager
    title="SupabaseJS"
    editor-controls
    editor-disabled-fields="id"
  >
    <zg-data adapter="supabaseJS">
      <zg-param name="dataTable" value="***tableName***"></zg-param>
    </zg-data>
  </zing-grid>
</body>
</html>

Copier après la connexion

Travailler comme avant

Connecting ZingGrid to Supabase: Add a Backend in Minutes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!