Quickstarters
Comment construire un backend pour jQuery ?

39min
Introduction
Dans ce tutoriel, vous apprendrez comment construire un backend pour jQuery en utilisant Back4app. 
Nous allons intégrer les fonctionnalités essentielles de Back4app : gestion de base de données, Cloud Code, APIs REST et GraphQL, authentification des utilisateurs et requêtes en temps réel, pour créer un backend sécurisé et évolutif. 
Ce backend communiquera avec votre frontend basé sur jQuery via des appels AJAX et d'autres méthodes jQuery courantes.
L'environnement intuitif de Back4app réduit le temps nécessaire pour configurer des serveurs ou des bases de données. 
En suivant quelques étapes simples, vous acquerrez une expérience pratique avec les ACL, les permissions au niveau des classes, la modélisation des données, les téléchargements de fichiers, et plus encore. 
À la fin de ce tutoriel, vous aurez une base solide pour une application entièrement fonctionnelle basée sur jQuery connectée à un backend Back4app. 
Vous serez prêt à ajouter une logique personnalisée, à intégrer des APIs externes et à sécuriser vos données avec un contrôle granulaire.
Prérequis
Pour compléter ce tutoriel, vous aurez besoin de :
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 jQuery de base
 Vous pouvez télécharger jQuery depuis le site officiel .
Node.js (version 14 ou supérieure) installé (Optionnel)
Bien que Node.js ne soit pas strictement nécessaire pour jQuery dans un navigateur, vous pourriez en avoir besoin pour exécuter des serveurs de test locaux ou installer des paquets npm si vous souhaitez effectuer des tests locaux. Installer Node.js﻿
Familiarité avec JavaScript et les bases de jQuery
 Documentation officielle de jQuery.﻿
Assurez-vous d'avoir tous ces prérequis en place avant de commencer, afin de pouvoir suivre facilement lors de la construction de votre interface frontale basée sur jQuery et de la connecter à Back4app.
Étape 1 – Configuration du projet Back4app
Créer un nouveau projet
Pour commencer votre projet backend jQuery, créez un nouveau projet Back4app :
Connectez-vous à votre compte Back4app.
Cliquez sur le bouton “Nouvelle application” dans votre tableau de bord Back4app.
Donnez un nom à votre application (par exemple, “jQuery-Backend-Tutorial”).
﻿
Lorsque le projet est créé, vous le verrez dans votre tableau de bord Back4app. Ce sera la base de vos configurations backend pour jQuery.
Connectez le SDK Parse
Back4app utilise la plateforme Parse pour les données et les fonctionnalités en temps réel. Si vous souhaitez utiliser le SDK Parse directement avec jQuery, vous pouvez le charger en tant que script dans votre HTML.
Récupérez vos clés Parse:
Dans le tableau de bord Back4app, ouvrez les “Paramètres de l'application” ou “Sécurité & Clés” de votre application pour trouver:
ID d'application
Clé JavaScript
URL du serveur Parse (généralement https://parseapi.back4app.com)
﻿
Inclure le SDK Parse dans votre fichier HTML:
HTML
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
<script src="https://cdn.jsdelivr.net/npm/parse/dist/parse.min.js"></script>  
<script>  
  // Initialize Parse  
  Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  
  Parse.serverURL = 'https://parseapi.back4app.com';  
</script>  
﻿
Dans un environnement jQuery, vous pouvez charger jQuery d'abord, puis Parse, et interagir avec les objets Parse dans vos scripts. Cette connexion garantit que tous les appels de données à votre backend Back4app passent par la plateforme Parse.
Étape 2 – Configuration de la base de données
Sauvegarde et requête de données
Après avoir intégré le SDK Parse, vous pouvez sauvegarder et récupérer des données de la base de données Back4app. Voici un exemple simple de création et de récupération d'objets "Todo" en utilisant jQuery et Parse :
HTML
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
<script>  
  // Example: Create a Todo item using jQuery  
  function createTodoItem(title, isCompleted) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
    todo.set('title', title);  
    todo.set('isCompleted', isCompleted);  
  
    todo.save().then((savedTodo) => {  
      console.log('Todo saved:', savedTodo);  
    }).catch((error) => {  
      console.error('Error saving Todo:', error);  
    });  
  }  
  
  // Example: Query all Todo items  
  function fetchTodos() {  
    const Todo = Parse.Object.extend('Todo');  
    const query = new Parse.Query(Todo);  
  
    query.find().then((results) => {  
      console.log('Fetched Todo items:', results);  
    }).catch((error) => {  
      console.error('Error fetching Todos:', error);  
    });  
  }  
</script>  
﻿
Vous pouvez également appeler des API REST en utilisant cURL :
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  
﻿
Ou utilisez GraphQL :
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  
    }  
  }  
}  
﻿
Conception de schéma et types de données
Dans le tableau de bord Back4app :
Allez à “Base de données.”
Créez une nouvelle classe (par exemple, “Todo”) et ajoutez des colonnes comme titre (String) et isCompleted (Boolean).
Créer une nouvelle classe
﻿
Vous pouvez également laisser Parse créer automatiquement des colonnes la première fois que vous enregistrez un objet.
Créer une colonne
﻿
Utilisation de l'agent IA
Back4app dispose d'un agent IA pour la modélisation des données :
Ouvrez l'agent IA dans le tableau de bord ou le menu de votre application.
Décrivez votre modèle de données (par exemple, “Créer une application ToDo avec un schéma de classe.”).
Laissez l'agent IA générer le schéma.
﻿
Données relationnelles
Si vous avez une Catégorie liée à de nombreux Todo éléments, vous pouvez utiliser des Pointeurs ou des Relations :
HTML
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
<script>  
  function createTaskForCategory(categoryObjectId, title) {  
    const Todo = Parse.Object.extend('Todo');  
    const todo = new Todo();  
  
    const categoryPointer = new Parse.Object('Category');  
    categoryPointer.id = categoryObjectId;  
  
    todo.set('title', title);  
    todo.set('category', categoryPointer);  
  
    return todo.save().catch((err) => {  
      console.error('Error creating Task with category relationship:', err);  
    });  
  }  
  
  function fetchTodosWithCategory() {  
    const query = new Parse.Query('Todo');  
    query.include('category');  
    return query.find();  
  }  
</script>  
﻿
Requêtes en direct
Pour des mises à jour en temps réel dans votre application jQuery :
Activer les requêtes en direct dans votre tableau de bord Back4app sous Paramètres du serveur.
Initialiser une souscription de requête en direct:
HTML
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
<script>  
  Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';  
  
  async function subscribeToTodos(callback) {  
    const query = new Parse.Query('Todo');  
    const subscription = await query.subscribe();  
  
    subscription.on('create', (newTodo) => {  
      console.log('New Todo created:', newTodo);  
      callback('create', newTodo);  
    });  
  
    subscription.on('update', (updatedTodo) => {  
      console.log('Todo updated:', updatedTodo);  
      callback('update', updatedTodo);  
    });  
  
    subscription.on('delete', (deletedTodo) => {  
      console.log('Todo deleted:', deletedTodo);  
      callback('delete', deletedTodo);  
    });  
  
    return subscription;  
  }  
</script>  
﻿
Cette souscription vous notifie en temps réel chaque fois qu'un objet “Todo” est créé, mis à jour ou supprimé.
Étape 3 – Application de la sécurité avec les ACL et les CLP
Mécanisme de sécurité Back4app
Les ACL (Listes de Contrôle d'Accès) et CLP (Permissions au Niveau de la Classe) vous permettent de contrôler qui peut lire et écrire des données au niveau des objets ou des classes.
﻿
Listes de Contrôle d'Accès (ACL)
Une ACL est définie sur des objets individuels pour limiter l'accès :
HTML
<script>  
  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);  
    }  
  }  
</script>  
<script>  
  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);  
    }  
  }  
</script>  
﻿
Modifier les ACL
﻿
Permissions au niveau de la classe (CLPs)
Les CLPs contrôlent les permissions par défaut pour toute une classe :
Dans votre tableau de bord Back4app, ouvrez la base de données section.
Sélectionnez votre classe (par exemple, “Todo”).
Allez à l'onglet des Permissions au niveau de la classe pour configurer l'accès public, authentifié ou basé sur des rôles.
﻿
Combinez les ACL pour la sécurité au niveau des objets avec les CLPs pour des restrictions plus larges. Pour plus d'informations, voir Directives de sécurité de l'application.
Étape 4 – Écriture et déploiement des fonctions cloud
Le code cloud exécute du JavaScript personnalisé côté serveur, vous permettant d'ajouter de la logique métier, des validations de données ou des appels d'API externes.
Comment ça fonctionne
Vous placez votre code dans main.js (ou un fichier similaire), le déployez sur Back4app, et laissez le serveur Parse gérer l'exécution. Vous pouvez également utiliser des modules NPM pour une logique plus complexe.
JS
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
// main.js  
const axios = require('axios');  
  
Parse.Cloud.define('fetchExternalData', async (request) => {  
  const url = request.params.url;  
  if (!url) {  
    throw new Error('URL parameter is required');  
  }  
  const response = await axios.get(url);  
  return response.data;  
});  
  
Parse.Cloud.beforeSave('Todo', (request) => {  
  const todo = request.object;  
  if (!todo.get('title')) {  
    throw new Error('Todo must have a title');  
  }  
});  
﻿
Déployez votre fonction
Via le Back4app CLI:
Bash
b4a deploy  
b4a deploy  
﻿
À travers le tableau de bord:
Dans le tableau de bord de votre application, allez à Cloud Code > Functions.
Copiez/collez la fonction dans main.js.
Cliquez sur Déployer.
﻿
Appeler votre fonction
Depuis jQuery, vous pouvez appeler une fonction Cloud comme ceci :
HTML
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
<script>  
  function getTextLength(text) {  
    Parse.Cloud.run('calculateTextLength', { text }).then((result) => {  
      console.log('Text length:', result.length);  
    }).catch((err) => {  
      console.error('Error calling cloud function:', err);  
    });  
  }  
</script>  
﻿
Étape 5 – Configuration de l'authentification des utilisateurs
Authentification des utilisateurs dans Back4app
Back4app utilise la Parse.User classe pour l'authentification. Le hachage des mots de passe, les jetons de session et le stockage sécurisé sont gérés automatiquement.
Configuration de l'authentification des utilisateurs
HTML
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
<script>  
  function signUpUser(username, password, email) {  
    const user = new Parse.User();  
    user.set('username', username);  
    user.set('password', password);  
    user.set('email', email);  
  
    user.signUp().then(() => {  
      console.log('User signed up successfully!');  
    }).catch((error) => {  
      console.error('Error signing up user:', error);  
    });  
  }  
  
  function logInUser(username, password) {  
    Parse.User.logIn(username, password).then((user) => {  
      console.log('User logged in:', user);  
    }).catch((error) => {  
      console.error('Error logging in user:', error);  
    });  
  }  
</script>  
﻿
Gestion des sessions
Vous pouvez récupérer l'utilisateur actuel :
Text
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
const currentUser = Parse.User.current();  
if (currentUser) {  
  console.log('Logged-in user:', currentUser.getUsername());  
} else {  
  console.log('No user is logged in');  
}  
﻿
Déconnexion :
Text
Parse.User.logOut();  
Parse.User.logOut();  
﻿
Intégration de la connexion sociale
Back4app prend en charge Google, Facebook, Apple et d'autres fournisseurs OAuth. Pour en savoir plus, consultez la Documentation sur la connexion sociale.
Étape 6 – Gestion du stockage de fichiers
Téléchargement et récupération de fichiers
Utilisez Parse.File pour gérer les téléchargements :
HTML
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
<script>  
  function uploadImage(file) {  
    const parseFile = new Parse.File(file.name, file);  
  
    parseFile.save().then((savedFile) => {  
      console.log('File saved:', savedFile.url());  
    }).catch((err) => {  
      console.error('Error uploading file:', err);  
    });  
  }  
</script>  
﻿
Vous pouvez stocker le fichier dans une classe en l'assignant à un champ :
Text
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
const Photo = Parse.Object.extend('Photo');  
const photo = new Photo();  
photo.set('imageFile', parseFile);  
photo.save();  
﻿
Récupération de l'URL du fichier :
Text
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
const imageFile = photo.get('imageFile');  
const imageUrl = imageFile.url();  
﻿
Sécurité des fichiers
Vous pouvez gérer qui peut télécharger des fichiers en modifiant les paramètres de téléchargement de fichiers dans Parse Server :
JSON
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
{  
  "fileUpload": {  
    "enableForPublic": true,  
    "enableForAnonymousUser": true,  
    "enableForAuthenticatedUser": true  
  }  
}  
﻿
Étape 7 – Planification des tâches avec des travaux Cloud
Travaux Cloud
Vous pouvez exécuter des tâches de routine, comme supprimer des données anciennes :
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);  
  }  
});  
﻿
Dans le tableau de bord, allez à Paramètres de l'application > Paramètres du serveur > Tâches en arrière-plan pour le planifier.
Planification d'un travail Cloud
﻿
Étape 8 – Intégration des Webhooks
Webhooks permettent à votre application d'envoyer des requêtes HTTP à un service externe chaque fois que certains événements se produisent :
Allez à Plus > WebHooks dans votre tableau de bord Back4app.
Ajoutez un nouveau Webhook avec votre point de terminaison externe.
Configurez des déclencheurs pour des événements comme “nouvel enregistrement dans la classe Todo.”
Ajout d'un Webhook
﻿
Vous pourriez intégrer Slack ou une passerelle de paiement comme Stripe en envoyant des données d'événements via des webhooks.
WebHook AvantSauvegarde
﻿
Étape 9 – Explorer le panneau d'administration Back4app
L' Application Admin Back4app offre une interface web non technique pour les opérations CRUD.
Activation de l'Application Admin
Allez à App Dashboard > More > Admin App et cliquez sur “Activer l'application Admin”:
Activer l'application Admin
﻿
Créer un premier utilisateur admin, ce qui crée automatiquement un nouveau rôle (B4aAdminUser) et des classes dans votre schéma:
﻿
Choisissez un sous-domaine pour accéder à l'application admin:
﻿
Connectez-vous en utilisant vos nouvelles informations d'identification admin:
﻿
Une fois activée, cette application Admin vous permet de gérer des données ou d'accorder l'accès aux membres de l'équipe sans coder.
Conclusion
Dans ce guide, vous avez appris à construire un backend pour jQuery avec Back4app. Vous :
Créé un nouveau projet Back4app comme fondation de votre backend.
Mis en place une base de données, y compris la conception du schéma et les relations de données.
Utilisé des ACL et des CLP pour une sécurité granulaire.
Déployé du code Cloud pour une logique côté serveur personnalisée.
Configuré l'authentification des utilisateurs, le stockage de fichiers et les mises à jour en temps réel.
Planifié des tâches en arrière-plan et intégré des webhooks pour des services externes.
Exploré le panneau d'administration Back4app pour une gestion des données simplifiée.
Vous êtes maintenant équipé pour étendre cette configuration de base jQuery + Back4app en une solution de production complète. Continuez à intégrer des fonctionnalités avancées comme la connexion sociale ou des règles de sécurité plus détaillées. Amusez-vous à construire vos applications évolutives et axées sur les données !
Prochaines étapes
Devenez prêt pour la production : Ajoutez des autorisations avancées basées sur les rôles, des stratégies de mise en cache et un réglage des performances.
Intégrez des API tierces : Pour les paiements, la messagerie ou l'analyse.
Explorez la documentation Back4app : Plongez plus profondément dans la sécurité avancée, les journaux ou l'analyse.
Créez des applications réelles : Utilisez la simplicité de jQuery combinée aux puissants services backend de Back4app.
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment construire un backend pour Gatsby ?
Comment construire un backend pour WatchOS ?