Astro avec Supabase : guide pratique

Pourquoi Astro avec Supabase : guide pratique ?

Au quotidien, les développeurs ont besoin de solutions fiables et évoluant pour gérer la persistence des données. Supabase est une plateforme open-source d'infrastructure de base de données qui permet une utilisation simple et efficace. En combinant Astro avec Supabase, nous obtenons un environnement performant et facile à maintenir.

Un cas concret de ce que vous pouvez accomplir en utilisant Astro avec Supabase est la création d'une application web moderne où les utilisateurs peuvent créer des notes personnelles. Chaque note peut être stockée et récupérée à partir d'une base de données réactive, permettant une expérience utilisateur fluide.

Prerequis

• Connaissance de base de JavaScript ES6+
• Familiarité avec le concept de React (Astro utilise React sous le capot)
• Installation de Node.js v14.0+ et npm v6.0+
• Installation de PostgreSQL 12+

Concepts fondamentaux

Supabase Client

Le client Supabase est la bibliothèque principale qui permet d'interagir avec votre base de données. Il vous permet d'exécuter des requêtes SQL, de gérer les schémas et de travailler avec les abonnements.

// Création du client Supabase
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

Tables et Relations

Supabase utilise des tables pour stocker les données. Les relations entre ces tables sont définies via des clés étrangères.

// Création d'une table
await supabase
  .from('tasks')
  .insert([
    { title: 'Faire du code', completed: false },
    { title: 'Manger', completed: false }
  ]);

CRUD Operations

Supabase prend en charge toutes les opérations CRUD (Create, Read, Update, Delete).

// Lecture des données
const { data, error } = await supabase.from('tasks').select('*');
console.log(data);

// Mise à jour d'une donnée
await supabase.from('tasks').update({ completed: true }).eq('id', 1);

// Suppression d'une donnée
await supabase.from('tasks').delete().eq('id', 2);

Mise en pratique : projet fil rouge

Étape 1 : Initialiser le projet Astro

Créez un nouveau projet Astro et installez les dépendances nécessaires.

npm create astro@latest my-astro-project --template react
cd my-astro-project
npm install @supabase/supabase-js

Étape 2 : Configurer Supabase

Ajoutez votre clé Supabase dans les variables d'environnement.

echo "export SUPABASE_URL='https://your-supabase-url.supabase.co'" >> .env
echo "export SUPABASE_ANON_KEY='your-anon-key'" >> .env

Étape 3 : Créer une composante pour afficher les tâches

Créez un fichier TasksList.jsx dans le répertoire src/components.

// src/components/TasksList.jsx
import { useState, useEffect } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseKey = process.env.SUPABASE_ANON_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

export default function TasksList() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    async function fetchTasks() {
      const { data, error } = await supabase.from('tasks').select('*');
      if (error) throw error;
      setTasks(data);
    }
    fetchTasks();
  }, []);

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

Étape 4 : Ajouter une nouvelle tâche

Créez un fichier NewTaskForm.jsx dans le répertoire src/components.

// src/components/NewTaskForm.jsx
import { useState } from 'react';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.SUPABASE_URL;
const supabaseKey = process.env.SUPABASE_ANON_KEY;
const supabase = createClient(supabaseUrl, supabaseKey);

export default function NewTaskForm() {
  const [title, setTitle] = useState('');

  async function handleSubmit(event) {
    event.preventDefault();
    const { data, error } = await supabase.from('tasks').insert([{ title }]);
    if (error) throw error;
    setTitle('');
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={title} onChange={e => setTitle(e.target.value)} />
      <button type="submit">Ajouter</button>
    </form>
  );
}

Étape 5 : Intégrer les composantes dans la page principale

Modifiez le fichier src/pages/index.jsx.

// src/pages/index.jsx
import TasksList from '../components/TasksList';
import NewTaskForm from '../components/NewTaskForm';

export default function Home() {
  return (
    <div>
      <h1>Gestionnaire de tâches</h1>
      <NewTaskForm />
      <TasksList />
    </div>
  );
}

Étape 6 : Exécuter le projet

Lancez votre application Astro.

npm run dev

Accédez à http://localhost:3000 pour voir votre gestionnaire de tâches en action.

Erreurs frequentes et debugging

1. Erreur de connexion à Supabase

   # ❌ Mauvais
   const supabase = createClient('invalid-url', 'invalid-key');
   
   # ✅ Correct
   const supabaseUrl = process.env.SUPABASE_URL;
   const supabaseKey = process.env.SUPABASE_ANON_KEY;
   const supabase = createClient(supabaseUrl, supabaseKey);
   

2. Erreur lors de la création d'une table

   # ❌ Mauvais
   await supabase.from('tasks').insert({ title: 'Faire du code' });
   
   # ✅ Correct
   const { data, error } = await supabase.schema('public').from('tasks').insert([{ title: 'Faire du code' }]);
   if (error) throw error;
   

3. Erreur lors de la récupération des données

   # ❌ Mauvais
   const { data, error } = await supabase.from('tasks').select('*');
   
   # ✅ Correct
   const { data, error } = await supabase.from('tasks').select('*');
   if (error) throw error;
   

Pour aller plus loin

1. Authentification avec Supabase Supabase Auth

2. Stockage de fichiers avec Supabase Storage Supabase Storage

3. Notifications en temps réel avec Supabase Realtime Supabase Realtime

Défi pratique

Créez une application de chat simple où les utilisateurs peuvent envoyer et recevoir des messages. Utilisez Supabase pour la gestion des données et Astro pour afficher les messages en temps réel.

Ce guide pratique vous a permis de comprendre comment utiliser Astro avec Supabase pour créer une application web complète et fonctionnelle. Vous avez appris à configurer Supabase, à effectuer des opérations CRUD, et à intégrer ces concepts dans un projet React/JSX. N'oubliez pas de consulter les ressources supplémentaires pour approfondir votre compréhension des fonctionnalités avancées de Supabase et Astro.