Quickstarters
Feature Overview
Comment construire un backend pour jQuery ?
39 min
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 https //www back4app com/docs/get started/new parse app 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 https //jquery com/download/ 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 https //nodejs org/en/download/ familiarité avec javascript et les bases de jquery documentation officielle de jquery https //api jquery com/ 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 de l'application clé javascript url du serveur parse (généralement https //parseapi back4app com ) inclure le sdk parse dans votre fichier html 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 vous pouvez également appeler des api rest en utilisant curl 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 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) vous pouvez également laisser parse créer automatiquement des colonnes la première fois que vous enregistrez un objet 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 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 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 permissions au niveau de la classe (clp) les clp contrôlent les permissions par défaut pour toute une classe dans votre tableau de bord back4app , ouvrez la base de données 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 clp pour des restrictions plus larges pour plus d'informations, voir directives de sécurité de l'application https //www back4app com/docs/security/parse security é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 // 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 https //www back4app com/docs/local development/parse cli 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 é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 gestion des sessions vous pouvez récupérer l'utilisateur actuel const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } déconnexion parse user logout(); intégration de la connexion sociale back4app prend en charge google, facebook, apple et d'autres fournisseurs oauth pour plus d'informations, consultez la documentation sur la connexion sociale https //www back4app com/docs/platform/sign in with apple é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 vous pouvez stocker le fichier dans une classe en l'assignant à un champ const photo = parse object extend('photo'); const photo = new photo(); photo set('imagefile', parsefile); photo save(); récupération de l'url du fichier 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 { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } étape 7 – planification des tâches avec les travaux cloud travaux cloud vous pouvez exécuter des tâches de routine, comme supprimer des données anciennes // 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 é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 ” vous pourriez intégrer slack ou une passerelle de paiement comme stripe en envoyant des données d'événements via des webhooks é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” 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 configuré 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