Debuter avec Supabase

Débuter avec Supabase

Pourquoi Supabase ?

Supabase est une plateforme open source pour le développement de bases de données relationnelles et d'applications backend. Il offre une solution complète pour les développeurs qui cherchent à créer des applications web et mobiles rapidement et efficacement.

Un cas d'utilisation concret : Vous êtes un entrepreneur qui souhaitez lancer une application e-commerce. Supabase vous permet de construire votre base de données, de gérer vos utilisateurs et de mettre en place les fonctionnalités backend nécessaires (comme le paiement) sans avoir à gérer manuellement la mise en place et la maintenance des serveurs.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Un compte Supabase : Inscrivez-vous ici
• Node.js v14.0 ou plus tard : Téléchargez Node.js
• Postman (pour tester les API) : Téléchargez Postman

Concepts fondamentaux

1. Projet Supabase

Un projet Supabase est un espace de travail où vous stockez toutes vos bases de données et vos applications backend.

## Créez un nouveau projet dans le tableau de bord Supabase

2. Tableau de bord Supabase

Le tableau de bord Supabase est votre interface principale pour gérer vos projets, vos bases de données et vos utilisateurs.

## Connectez-vous à votre compte Supabase et accédez au tableau de bord

3. Base de données PostgreSQL

Supabase utilise PostgreSQL comme langage de requêtes SQL pour accéder et modifier la base de données.

-- Créez une nouvelle table dans le tableau de bord Supabase
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    email TEXT UNIQUE NOT NULL,
    password TEXT NOT NULL
);

4. API RESTful

Supabase génère automatiquement une API RESTful pour votre base de données, vous permettant d'interagir avec elle via des requêtes HTTP.

## Testez l'API en utilisant Postman
GET http://localhost:54321/rest/v1/users?email=eq.user@example.com

5. Authentification

Supabase offre une authentification complète pour gérer les utilisateurs et leurs droits d'accès.

// Connectez un utilisateur avec Supabase Auth
const { data, error } = await supabase.auth.signIn({
    email: 'user@example.com',
    password: 'password'
});

Mise en pratique : projet fil rouge

Nous allons construire un simple gestionnaire de tâches. C'est un mini-projet complet et réaliste qui vous permettra d'acquérir des compétences pratiques avec Supabase.

Étape 1 : Initialiser le projet

## Créez un nouveau répertoire et initialisez npm
mkdir todo-app
cd todo-app
npm init -y

## Installez les dépendances nécessaires
npm install supabase react react-dom axios

Étape 2 : Configurer Supabase

Créez un fichier .env pour stocker vos variables d'environnement.

## Créez le fichier .env et ajoutez votre URL et clé API
echo "REACT_APP_SUPABASE_URL=your-supabase-url" >> .env
echo "REACT_APP_SUPABASE_ANON_KEY=your-supabase-anon-key" >> .env

Étape 3 : Créer le fichier index.js

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Étape 4 : Créer le fichier App.js

// App.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      const response = await axios.get('http://localhost:54321/rest/v1/tasks', {
        headers: {
          'Authorization': `Bearer ${process.env.REACT_APP_SUPABASE_ANON_KEY}`
        }
      });
      setTasks(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  const addTask = async () => {
    try {
      await axios.post('http://localhost:54321/rest/v1/tasks', { task: newTask }, {
        headers: {
          'Authorization': `Bearer ${process.env.REACT_APP_SUPABASE_ANON_KEY}`
        }
      });
      setTasks([...tasks, { id: Date.now(), task: newTask }]);
      setNewTask('');
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>Todo App</h1>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Add a new task"
      />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.task}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Étape 5 : Lancer l'application

## Lancez le serveur de développement
npm start

Erreurs frequentes et debugging

Erreur 1 : Uncaught ReferenceError: fetch is not defined

Cause: Vous n'avez pas inclus la bibliothèque axios dans votre fichier.

Correction:

import axios from 'axios';

Erreur 2 : 403 Forbidden

Cause: La clé API est incorrecte ou ne dispose pas des droits nécessaires.

Correction:

Vérifiez que votre URL et clé API sont corrects et que vous avez les autorisations nécessaires pour accéder à la base de données.

Erreur 3 : SyntaxError: Unexpected token <

Cause: Votre serveur local n'est pas démarré ou ne répond pas correctement.

Correction:

Assurez-vous que votre serveur local est démarré et qu'il répond aux requêtes HTTP.

Pour aller plus loin

1. Authentification avancée

Découvrez comment implémenter des fonctionnalités d'authentification plus complexes, comme la création de comptes utilisateurs et l'envoi de mots de passe oubliés.

Lien

2. Triggers et fonctions

Explorez comment utiliser les triggers et les fonctions pour automatiser des tâches dans votre base de données.

Lien

3. Sécurité avancée

Apprenez à sécuriser votre application en utilisant des règles de sécurité et en limitant l'accès aux ressources.

Lien

Défi pratique

Créez une API pour un blog simple. Implémentez les fonctionnalités suivantes :

1. Créer un article
2. Lire tous les articles
3. Mettre à jour un article
4. Supprimer un article

Testez votre API en utilisant Postman ou en créant des composants React pour l'interface utilisateur.