Créez votre propre API de planification d'événements à l'aide d'Express et Supabase

Avez-vous déjà eu besoin d'une plateforme pour gérer les événements de votre club ? Ou peut-être planifier des réunions dans votre bureau ? Mais à la recherche de plateformes abordables, vous vous perdez dans les nombreuses options qui s’offrent à vous ? Ou peut-être souhaitez-vous simplement mieux organiser votre vie et planifier quand vous devez assister à quels événements ?

Suivez cet article jusqu'à la fin et vous obtiendrez une API de planification d'événements de base où toutes les fonctionnalités de base telles que la création et l'inscription d'événements seront disponibles.

Le référentiel GitHub de ce projet se trouve sur https://github.com/xerctia/gatherly

Qu’est-ce qu’Express ?

Express est un framework Javascript permettant de configurer et de construire des serveurs pour gérer différents types de requêtes telles que GET, POST, etc. Express est l'un des frameworks backend les plus utilisés, et est également l'un des frameworks les plus simples pour les débutants. . Dans ce blog, nous utiliserons Express pour créer notre serveur et configurer les points de terminaison requis.

Qu’est-ce que PostgreSQL ?

PostgreSQL est un système de gestion de bases de données relationnelles (SGBDR) open source, connu pour sa fiabilité, son évolutivité et sa prise en charge des requêtes complexes. Il offre des fonctionnalités avancées telles que la prise en charge des données JSON, la recherche en texte intégral et l'extensibilité, ce qui le rend polyvalent aussi bien pour les petits projets que pour les applications à grande échelle. PostgreSQL est populaire parmi les développeurs et est apprécié pour ses performances robustes.

Il existe de nombreux fournisseurs PostgreSQL disponibles sur le Web qui permettent l'utilisation d'une base de données PostgreSQL, certains gratuitement et d'autres avec un forfait payant. Dans ce projet, nous utiliserons Supabase et sa base de données comme PostgreSQL.

Mise en place du projet

• Créez un dossier pour ce projet. Je vais l'appeler Gatherly, c'est le nom que j'ai décidé.
• Configurer Node et npm : npm init -y
• Installez Express et les autres packages requis : npm installer express dotenv cors pg Remarque : pg est le package utilisé pour utiliser PostgreSQL dans Node.js.
• Créez maintenant un fichier index.js avec le code passe-partout suivant :

const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})

Félicitations ! Vous avez configuré avec succès un serveur de base dans Express !

Configuration de Supabase avec votre projet

Configuration de la Supabase

• Allez sur https://supabase.com et connectez-vous ou créez un compte, puis créez un nouveau projet avec le nom qui vous convient. Je l'ai nommé Gatherly (évidemment).
• Accédez maintenant au tableau de bord du projet, puis accédez à Paramètres du projet -> Base de données.
• Au début de la page, une section de "Connection String" sera présente. Cliquez sur l'onglet Node.js ici, copiez la chaîne de connexion et stockez-la quelque part pour le moment.
• Allez maintenant dans l'éditeur SQL et exécutez la requête suivante pour créer une table « événements » :

const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})

Connexion de la base de données à Express

• Allez dans le dossier de votre projet et créez un fichier nommé .env. Écrivez DATABASE_URL=, puis collez la chaîne de connexion que vous avez copiée précédemment (configuration de Supabase : étape 3) et placez-la entre guillemets doubles. Par exemple:

CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

• Créez un autre fichier JS db.js pour configurer et connecter la base de données PostgreSQL.

DATABASE_URL="postgresql://username:password@host:port/dbname"

• Enfin, nous devons importer cette base de données connectée dans notre fichier index.js principal.

const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;

Félicitations, vous avez réussi à connecter votre base de données Supabase à votre fichier index.js. Nous sommes maintenant prêts à commencer à créer les véritables points de terminaison de l'API.

Points de terminaison de l'API

GET /events : Récupère tous les événements

• Créez une nouvelle méthode GET comme suit :

const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})

• Dans cette fonction, nous écrirons le code réel qui nous récupérera les données. Tout d’abord, implémentons un bloc try-catch pour une meilleure gestion des erreurs.

CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

• Ce format sera conservé pour tous les points de terminaison que nous allons construire. Dans le bloc try, nous écrirons le code de la fonctionnalité requise.
• Pour récupérer tous les événements de la base de données, nous devons interroger la base de données et la stocker dans une variable. Puisque nous suivons une approche asynchrone, nous devons donc utiliser wait pour stocker correctement les données.

DATABASE_URL="postgresql://username:password@host:port/dbname"

• La sortie de cette requête, c'est-à-dire le résultat, contient un tableau d'objets appelés « lignes ». Ici, nous devons renvoyer tous les événements, nous renverrons donc simplement les « lignes » entières.

const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;

• Avec cela, notre premier point de terminaison est prêt ! Pour le tester, vous pouvez accéder à l'éditeur de table sur le tableau de bord du projet Supabase et ajouter 2 ou 3 événements à des fins de test. Le code complet de ce point de terminaison est :

const pool = require('./db');

POST /events : Créer un nouvel événement

• Tout d’abord, définissons un modèle de base d’un point de terminaison :

app.get('/events', async (req, res) => {
  // code to be written
})

• Dans ce cas, comme nous avons certaines données dont nous avons besoin de la part de l'utilisateur, nous pouvons définir celles en dehors du bloc try-catch.

try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}

• Maintenant, dans le bloc try, nous devons écrire la requête pour insérer une ligne dans une table. La méthode query() vous permet de désigner les valeurs des variables dans la requête de chaîne comme $1, $2, etc., puis de fournir ces variables dans l'ordre dans un tableau. C'est ainsi que nous ajouterons nos entrées variables de l'utilisateur à la requête.

const result = await pool.query("SELECT * FROM events");

• Encore une fois, comme la fois précédente, nous imprimerons les lignes de résultats. Mais cette fois, il suffit d'imprimer le premier élément du tableau 'rows', qui sera la ligne que nous venons d'insérer.

res.status(200).json(result.rows); // 200 = OK

• Hourra, nous avons construit notre point de terminaison pour ajouter de nouveaux événements ! Voici le code complet :

app.get('/events', async (req, res) => {
    try {
        // Getting all events
        const result = await pool.query("SELECT * FROM events");
        res.status(200).json(result.rows); // 200 = OK
    } catch (e) {
        console.error(e);
        res.status(500).json({error: 'Database error'}); // 500 = Internal Server Error
    }
})

GET /event/:id : Récupère les détails d'un événement individuel

• Je suis sûr que vous êtes assez intelligent pour pouvoir configurer une fonction de base pour n'importe quel point de terminaison, donc je ne le montrerai pas à chaque fois.
• Ici, notre objectif est de créer un point de terminaison dynamique, où la valeur de « id » continuera de changer. Nous l'avons donc marqué comme :id, et nous pouvons accéder à sa valeur comme suit :

app.post("/events", async (req, res) => {
  try {
    // code to be written
  } catch (e) {
    console.error(e);
    res.status(500).json({error: "Failed to create event."}); // 500 = Internal Server Error
  }
})

Cela peut également être fait en dehors du try-catch, tout comme les valeurs d'entrée dans le point de terminaison précédent.

• Maintenant, dans le bloc try, nous devons écrire la requête pour sélectionner les lignes où le champ 'id' sera égal à l'identifiant fourni. Si aucun résultat n'est trouvé, cela signifie que l'événement avec cet identifiant n'existe pas, nous pouvons donc renvoyer une erreur 404.

const exp = require('express');
const cors = require('cors');

const app = exp();
const PORT = 3000 || process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.use(cors());

app.get("/", (req, res) => {
    res.send("Hello, Gatherly!");
})

app.listen(PORT, () => {
    console.log(`server started on ${PORT}`);
})

• Si ce n'est pas le cas, cela signifie que l'événement existe. Mais comme 'rows' est un tableau, donc même s'il contient un élément, nous devons y accéder par rows[0]. La ligne requise est donc dans les lignes[0].

CREATE TABLE events (
  id SERIAL PRIMARY KEY,
  title VARCHAR(255) NOT NULL,
  description TEXT,
  start_time TIMESTAMP NOT NULL,
  end_time TIMESTAMP,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

• Et voilà ! Vous pouvez désormais obtenir avec succès les détails d'un événement spécifique ! Voici le code complet :

DATABASE_URL="postgresql://username:password@host:port/dbname"

Inscription des utilisateurs

Supabase

Pour implémenter cette fonctionnalité, vous devrez d'abord créer une nouvelle table dans Supabase.

Allez dans l'éditeur SQL et exécutez la requête suivante :

const { Pool } = require('pg');
require('dotenv').config();

const pool = new Pool({
  connectionString: process.env.DATABASE_URL,
  ssl: {
    rejectUnauthorized: false
  }
});

module.exports = pool;

POST /event/:id/register

• Nous pouvons prendre les valeurs d'entrée ainsi que la valeur du paramètre en dehors du try-catch.

const pool = require('./db');

• Maintenant, nous allons d'abord vérifier si l'événement avec 'id' existe. Pour cela, nous suivrons l'approche de GET /event/:id et vérifierons si rows.length est différent de zéro, c'est-à-dire qu'il a des résultats.

app.get('/events', async (req, res) => {
  // code to be written
})

• Maintenant que l'événement existe, nous pouvons écrire la requête permettant d'ajouter réellement une inscription à la base de données dans la nouvelle table que nous venons de créer, c'est-à-dire « inscriptions ».

try {
  // code to be written
} catch (e) {
  console.error(e);
  res.status(500).json({error: "Database error."}); // 500 = Internal Server Error
}

• Nous avons ainsi également implémenté une fonctionnalité permettant d'inscrire les utilisateurs à un événement ! Voici le code complet :

const result = await pool.query("SELECT * FROM events");

GET /event/:id/registrations : Récupère toutes les inscriptions pour un événement donné

Celui-ci est un devoir pour vous les gars. (Ne soyez pas en colère, si vous n'y parvenez pas même après avoir essayé, le code GitHub est toujours disponible)
Un indice : vous pouvez vérifier si l'événement existe de la même manière que nous l'avons fait dans POST /event/:id/register. Après cela, vous devez écrire une requête SELECT pour la table d'inscriptions afin de récupérer toutes les lignes avec l'identifiant d'événement donné.

De même, vous pouvez également essayer de créer un point de terminaison pour supprimer un événement particulier, comme DELETE /event/:id .

Conclusion

Félicitations ! Vous avez créé avec succès votre propre API pour planifier des événements et gérer les inscriptions des utilisateurs. Vous avez parcouru un long chemin.

Vous pouvez ajouter plus de fonctionnalités, comme l'ajout d'une tâche cron afin que les événements dont l'heure de fin est passée soient automatiquement supprimés.

Si vous avez aimé cet article, lâchez un like et commentez si vous avez des doutes ou si vous souhaitez simplement discuter à ce sujet. Suivez-moi également sur LinkedIn : https://www.linkedin.com/in/amartya-chowdhury/

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!