interface Web
js tutoriel
Connexion de ZingGrid à Supabase : ajoutez un backend en quelques minutes
Connexion de ZingGrid à Supabase : ajoutez un backend en quelques minutes
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
La première étape consiste à donner un nom à notre table, ici j'utiliserai demoTable
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.
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 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
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>
Lorsque vous consultez cette page dans le navigateur, vous devriez commencer à voir apparaître 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 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>
Travailler comme avant
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1655
14
1413
52
1306
25
1252
29
1226
24
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
L'évolution de JavaScript: tendances actuelles et perspectives d'avenir
Apr 10, 2025 am 09:33 AM
Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Moteurs JavaScript: comparaison des implémentations
Apr 13, 2025 am 12:05 AM
Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
