Quickstarters
Comment construire un backend pour Gatsby ?

37min
Introduction
Dans ce tutoriel, vous apprendrez comment construire un backend pour Gatsby en utilisant Back4App. 
Nous vous montrerons comment intégrer les fonctionnalités de Back4App—telles que la gestion de base de données, les fonctions Cloud Code, REST API et GraphQL query capacités, l'authentification des utilisateurs, et les requêtes en temps réel (Live Queries)—pour créer un backend sécurisé, évolutif et robuste qui peut être accessible depuis votre site Gatsby.
Vous verrez également comment la configuration rapide de Back4App et son environnement intuitif peuvent réduire considérablement le temps et les efforts nécessaires pour gérer les tâches de backend. 
À la fin, vous saurez exactement comment construire un backend pour Gatsby qui stocke et récupère des données, gère l'authentification, intègre des fonctions cloud, et plus encore. 
Cela vous prépare à incorporer facilement une logique personnalisée, ajouter des API tierces, ou étendre votre modèle de données sans avoir à vous soucier de la maintenance traditionnelle des serveurs.
Ce que vous allez construire et pourquoi c'est précieux
Intégration Backend Complète: Vous créerez une structure de backend évolutive pour votre site Gatsby, incorporant Parse SDK, qui est parfait pour les besoins de données dynamiques.
Économies de Temps: Back4App fournit des outils comme l'Agent IA, des requêtes en temps réel, et des tâches cloud qui accélèrent la création de backend.
Compétences Évolutives: Après avoir terminé, vous serez en mesure d'adapter ces concepts pour des fonctionnalités Gatsby plus avancées, comme créer des pages au moment de la construction ou de se connecter à des fonctions sans serveur pour des opérations dynamiques.
Conditions préalables
Un compte Back4App et un nouveau projet Back4App
Commencer avec Back4app.
Si vous n'avez pas de compte, vous pouvez en créer un gratuitement. Suivez le guide ci-dessus pour préparer votre projet.
Environnement de développement Gatsby de base
Vous pouvez le configurer en installant le Gatsby CLI et en exécutant :
Node.js (version 14 ou supérieure) installé
Installer Node.js﻿
Familiarité avec JavaScript et les concepts de Gatsby
Documentation officielle de Gatsby.
Lisez la documentation ou un tutoriel pour débutants si vous êtes nouveau sur Gatsby.
Assurez-vous d'avoir ces exigences en place. Cela garantit une expérience fluide lorsque vous créez un nouveau fichier pour la configuration ou exécutez des requêtes GraphQL dans votre environnement Gatsby.
Étape 1 – Configuration du projet Back4App
Créer un nouveau projet
La première étape pour construire un backend pour Gatsby sur Back4App consiste à créer un nouveau projet. Si vous ne l'avez pas déjà fait :
Connectez-vous à votre compte Back4App.
Cliquez sur le bouton “Nouvelle application” sur votre tableau de bord.
Donnez un nom à votre application (par exemple, “Gatsby-Backend-Tutorial”).
﻿
Après avoir créé le projet, il apparaîtra dans votre tableau de bord Back4App. Nous utiliserons ce projet comme le cœur de notre backend.
Connectez le SDK Parse
Back4App utilise la plateforme Parse pour gérer vos données, offrir des fonctionnalités en temps réel, gérer l'authentification des utilisateurs, et plus encore. Pour Gatsby, vous pouvez toujours npm install parse puis l'intégrer dans vos fichiers sources :
Récupérez vos clés Parse:
Dans votre tableau de bord Back4App, localisez votre ID d'application et clé JavaScript, généralement sous “Paramètres de l'application” ou “Sécurité & Clés.” Vous trouverez également l'{URL du serveur Parse (souvent quelque chose comme https://parseapi.back4app.com).
﻿
Installez le SDK Parse dans votre site Gatsby :
Bash
npm install parse
npm install parse
﻿
Créez un parseConfig.js dans le répertoire racine de votre projet Gatsby ou dans src/:
src/parseConfig.js
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
// src/parseConfig.js
import Parse from 'parse';

// Replace the placeholders with your Back4app credentials
Parse.initialize('YOUR_APPLICATION_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

export default Parse;
﻿
Chaque fois que vous importez Parse depuis parseConfig.js dans vos fichiers Gatsby (par exemple, dans gatsby-node.js, gatsby-browser.js, ou pages/composants), vous aurez une instance préconfigurée prête à effectuer des requêtes vers votre backend Back4App.
Étape 2 – Configuration de la base de données
Création d'un modèle de données
Dans Back4App, les données sont gérées sous forme de “classes” (similaires à des tables) avec des champs pour vos données. Créons une classe “Todo” à des fins de démonstration. Nous allons montrer quelques façons de sauvegarder et récupérer des données dans Gatsby avec Parse.
Naviguez vers la section “Base de données” dans votre tableau de bord Back4app.
Créez une nouvelle classe (par exemple, “Todo”) et ajoutez des colonnes comme titre (String) et isCompleted (Boolean).
Créer une nouvelle classe
﻿
Ou vous pouvez laisser Parse créer automatiquement des colonnes lorsque les objets sont d'abord enregistrés depuis votre code.
Créer un modèle de données avec l'agent IA
Back4App fournit un agent IA pour aider à définir votre structure de données.
Ouvrez l'agent IA depuis votre tableau de bord ou menu d'application.
Décrivez votre modèle de données (par exemple, “Veuillez créer un nouveau schéma d'application Todo avec un titre et un statut d'achèvement.”).
Laissez l'agent IA générer le schéma pour vous.
﻿
Lire et écrire des données en utilisant le SDK
Un extrait d'exemple dans Gatsby pourrait ressembler à ceci (par exemple, dans une page basée sur React ou dans gatsby-browser.js):
JS
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);
  todo.set('isCompleted', isCompleted);

  try {
    const savedTodo = await todo.save();
    console.log('Todo saved successfully:', savedTodo);
    return savedTodo;
  } catch (error) {
    console.error('Error saving Todo:', error);
  }
}

async function fetchTodos() {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Lecture et écriture de données en utilisant l'API REST
Alternativement, vous pouvez interagir avec la base de données via l' API REST:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"title": "Buy groceries", "isCompleted": false}' \
  https://parseapi.back4app.com/classes/Todo
﻿
Lecture et écriture de données en utilisant l'API GraphQL
Back4App prend également en charge une API GraphQL, vous pourriez donc exécuter des requêtes ou des mutations comme:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
C'est particulièrement pratique si vous souhaitez que votre site Gatsby récupère des données via des requêtes GraphQL au moment de la construction.
Travailler avec des requêtes en direct
Gatsby est un générateur de sites statiques, mais vous pouvez toujours configurer des connexions dynamiques en temps réel en utilisant Parse Requêtes en direct. Cela peut être utile dans le code exécuté par le navigateur ou dans vos propres hooks sans serveur.
Activer les requêtes en direct dans votre tableau de bord Back4app (sous Paramètres du serveur).
Ajouter l'URL du serveur de requêtes en direct à parseConfig.js:
JS
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
﻿
S'abonner à une classe pour des notifications en temps réel :
JS
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Cela enverra des mises à jour de données en temps réel à l'interface de votre projet Gatsby.
Étape 3 – Appliquer la sécurité avec les ACL et les CLP
Qu'est-ce que les ACL et les CLP ?
Les ACL (Listes de Contrôle d'Accès) vous permettent de définir des permissions sur des objets individuels, tandis que les CLP (Permissions au Niveau de la Classe) s'appliquent à des classes entières dans votre base de données Back4App.
﻿
Configuration des permissions au niveau de la classe
Allez à Database dans votre tableau de bord Back4App.
Sélectionnez la classe (par exemple, Todo).
Cliquez sur l'onglet Class-Level Permissions.
Configurez si la classe est lisible publiquement, nécessite une authentification ou est restreinte à certains rôles.
Utilisation des ACL dans le code
Dans votre code Gatsby, vous pouvez définir des ACL pour chaque nouvel objet :
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  const acl = new Parse.ACL(ownerUser);
  acl.setPublicReadAccess(false);
  acl.setPublicWriteAccess(false);

  todo.setACL(acl);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error saving private todo:', err);
  }
}
﻿
Étape 4 – Écriture des fonctions Cloud Code
Pourquoi Cloud Code ?
Avec Cloud Code, vous pouvez ajouter une logique personnalisée côté serveur à votre backend Back4App. C'est idéal pour les règles commerciales, les transformations de REST API , les déclencheurs ou les validations de données que vous souhaitez garder sécurisées et hors du côté client.
Exemple de fonction Cloud
JS
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// main.js
Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
﻿
Déploiement du code Cloud
Via Back4App CLI: Installez et configurez le CLI, puis exécutez b4a deploy.
Via Dashboard: Allez à Cloud Code > Functions dans votre tableau de bord, collez votre code dans main.js, et cliquez sur Déployer.
﻿
Appel de votre fonction
Depuis Gatsby/Parse SDK:
JS
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
import Parse from '../parseConfig';

async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
﻿
Étape 5 – Configuration de l'authentification
Classe Utilisateur Parse
Back4App utilise la Parse.User classe pour l'authentification. Par défaut, elle gère le hachage des mots de passe, les sessions et le stockage sécurisé.
Inscription et Connexion dans Gatsby
JS
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
import Parse from '../parseConfig';

// SignUp
async function signUpUser(username, password, email) {
  const user = new Parse.User();
  user.set('username', username);
  user.set('password', password);
  user.set('email', email);

  try {
    await user.signUp();
    console.log('User signed up successfully!');
  } catch (error) {
    console.error('Error signing up user:', error);
  }
}

// Login
async function logInUser(username, password) {
  try {
    const user = await Parse.User.logIn(username, password);
    console.log('User logged in:', user);
  } catch (error) {
    console.error('Error logging in user:', error);
  }
}
﻿
Après vous être connecté, vous pouvez appeler Parse.User.current() pour vérifier si un utilisateur est connecté.
Connexion Sociale
Vous pouvez intégrer Google, Facebook, Apple, et d'autres fournisseurs avec des configurations supplémentaires. Lisez-en plus dans la Documentation sur la Connexion Sociale.﻿
Étape 6 – Gestion du Stockage de Fichiers
Téléchargement de Fichiers
Utilisez Parse.File pour télécharger des images ou d'autres fichiers. Par exemple, dans un composant Gatsby :
JS
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
async function uploadImage(file) {
  const name = file.name;
  const parseFile = new Parse.File(name, file);

  try {
    const savedFile = await parseFile.save();
    console.log('File saved:', savedFile.url());
    return savedFile.url();
  } catch (err) {
    console.error('Error uploading file:', err);
  }
}
﻿
Vous pouvez ensuite attacher ce fichier à un Objet Parse, le stocker, et plus tard récupérer l'URL du fichier pour l'afficher sur votre site Gatsby.
Étape 7 – Vérification par Email et Réinitialisation de Mot de Passe
Pourquoi c'est important
La vérification de l'email confirme l'adresse email de l'utilisateur, et les flux de réinitialisation de mot de passe améliorent l'expérience utilisateur. Les deux sont facilement configurables dans Back4App.
Accédez aux paramètres d'email de votre application dans le tableau de bord.
Activez la vérification de l'email et configurez le modèle d'email de réinitialisation de mot de passe.
Utilisez les méthodes du SDK Parse (par exemple, Parse.User.requestPasswordReset(email)) pour déclencher les emails de réinitialisation.
Étape 8 – Planification des tâches avec les Cloud Jobs
Aperçu des Cloud Jobs
Utilisez Cloud Jobs pour automatiser les tâches récurrentes, comme la suppression des données obsolètes ou l'envoi de résumés quotidiens. Par exemple :
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  const cutoff = new Date(now - THIRTY_DAYS);

  query.lessThan('createdAt', cutoff);

  try {
    const oldTodos = await query.find({ useMasterKey: true });
    await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
    return `Deleted ${oldTodos.length} old Todos.`;
  } catch (err) {
    throw new Error('Error during cleanup:' + err.message);
  }
});
﻿
Puis planifiez-le sous Paramètres de l'application > Paramètres du serveur > Tâches en arrière-plan.
Planification d'un travail dans le cloud
﻿
Étape 9 – Intégration des Webhooks
Les Webhooks permettent à votre application Back4App d'envoyer des requêtes HTTP à des services externes lorsque des événements spécifiques se produisent, comme la création d'un nouvel enregistrement.
Allez à votre tableau de bord Back4App > Plus > WebHooks.
Ajoutez un nouveau Webhook, en spécifiant l'URL de point de terminaison pour un service externe.
Sélectionnez ce qui déclenche le Webhook (par exemple, afterSave sur la classe Todo).
Ajout d'un Webhook
﻿
Vous pouvez également vous intégrer à Slack ou à des passerelles de paiement en ajoutant le point de terminaison approprié.
Étape 10 – Exploration du panneau d'administration Back4App
L'application Admin App de Back4App est une interface centrée sur le modèle pour la gestion des données. Vous pouvez donner aux utilisateurs non techniques un accès sécurisé pour effectuer des opérations CRUD sur vos classes.
Activation de l'application Admin
Allez à App Dashboard > Plus > Admin App et cliquez sur “Activer l'application Admin.”
Activer l'application Admin
﻿
Ensuite, créez un utilisateur Admin et choisissez un sous-domaine pour l'interface admin.
﻿
Vous pouvez maintenant vous connecter à votre application Admin pour visualiser et modifier des données sans écrire de code.
﻿
Conclusion
Dans ce tutoriel, vous avez découvert comment construire un backend pour Gatsby en utilisant Back4App. Vous avez appris à:
Configurer une base de données sécurisée avec des classes, des champs personnalisés et des relations.
Utiliser le SDK Parse, ainsi que l'API REST et les options de requête GraphQL pour les transactions de données.
Configurer des ACL et des CLP pour la sécurité des données.
Écrire et déployer du Cloud Code pour étendre la logique métier et les déclencheurs.
Gérer l'authentification des utilisateurs avec l'inscription, la connexion, la réinitialisation du mot de passe et la vérification par e-mail.
Gérer le stockage de fichiers pour les images et les documents.
Planifier des tâches automatisées avec des Cloud Jobs.
Intégrer des services externes via des Webhooks.
Exploiter l'Admin App pour une administration facile des données.
Avec ces compétences, votre site Gatsby peut tirer parti de puissantes fonctionnalités dynamiques tout en profitant du rendu statique de Gatsby. À partir de là, vous pouvez:
Élargir votre modèle de données et ajouter une logique métier avancée.
Intégrer plus d'APIs externes pour une plateforme véritablement complète.
Suivre la documentation officielle de Back4App pour des plongées plus profondes dans la sécurité, la performance et l'analyse.
Expérimenter avec les fonctionnalités de construction de Gatsby—par exemple, “créer des pages” à partir de données dynamiques ou configurer un “plugin source gatsby” pour votre backend Back4App.
Maintenant, vous avez une base solide pour construire des applications orientées données et à l'épreuve du temps avec Gatsby et Back4App.
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment construire un backend pour Flutter ?
Comment construire un backend pour jQuery ?