Comment construire un backend pour htmx ?

introduction dans ce tutoriel, vous apprendrez à construire un backend complet pour les applications web htmx en utilisant back4app nous allons passer en revue l'intégration des fonctionnalités essentielles de back4app telles que la gestion de base de données, les fonctions cloud code, les api rest et graphql, l'authentification des utilisateurs, le stockage de fichiers et les requêtes en temps réel (live queries) pour créer un backend sécurisé, évolutif et robuste qui communique sans effort avec votre interface htmx utiliser htmx, une bibliothèque javascript moderne qui exploite les attributs html pour gérer les interactions côté client, peut considérablement améliorer l'expérience utilisateur tout en se concentrant sur le rendu côté serveur en combinant htmx avec les puissants frameworks côté serveur et moteurs de templates de back4app, les développeurs peuvent créer des applications web full stack avec aisance et efficacité à la fin de ce tutoriel, vous aurez construit un backend adapté à l'intégration htmx, permettant des opérations de données fluides et améliorant l'expérience côté client avec des mises à jour dynamiques des pages html sans rechargements complets 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 configuration de base de htmx incluez la bibliothèque htmx https //htmx org/ dans votre page html en utilisant un environnement de développement web assurez vous d'avoir un serveur local configuré ou d'utiliser des frameworks côté serveur pour servir vos templates html connaissance de html, css et javascript documentation htmx https //htmx org/docs/ pour plus de détails sur les attributs html et le développement d'applications web assurez vous d'avoir tous ces prérequis en place avant de commencer avoir votre projet back4app configuré et votre environnement htmx local prêt vous aidera à suivre plus facilement étape 1 – configuration du projet back4app créer un nouveau projet la première étape pour construire votre backend htmx sur back4app consiste à créer un nouveau projet si vous ne l'avez pas encore fait, suivez ces étapes connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” dans votre tableau de bord back4app donnez un nom à votre application (par exemple, “htmx backend tutorial”) une fois le projet créé, vous le verrez listé dans votre tableau de bord back4app ce projet sera la base de toutes les configurations backend discutées dans ce tutoriel connect via rest api back4app s'appuie sur la plateforme parse pour gérer vos données, fournir des fonctionnalités en temps réel, gérer l'authentification des utilisateurs, et plus encore bien qu'htmx soit lui même une bibliothèque côté client, connecter votre interface htmx à back4app implique de faire des appels api rest directement depuis votre html et javascript récupérez vos clés parse dans votre tableau de bord back4app, accédez à la section “paramètres de l'application” ou “sécurité et clés” de votre application pour trouver votre id d'application , clé api rest , et l' url du serveur parse , souvent au format https //parseapi back4app com ) avec ces clés, vous pouvez utiliser htmx pour appeler vos points de terminaison backend et manipuler vos modèles html en conséquence par exemple, vous pourriez utiliser des requêtes fetch javascript combinées avec des attributs htmx pour interagir avec vos données via des appels rest step 2 – setting up the database saving and querying data avec votre projet back4app configuré, vous pouvez maintenant commencer à enregistrer et à récupérer des données en utilisant des appels api rest, que vous pouvez déclencher à partir de requêtes htmx ou de javascript pur la manière la plus simple de créer un enregistrement est de faire une requête post au serveur parse 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 de même, vous pouvez interroger des données curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo vous pouvez également utiliser des requêtes graphql selon vos besoins pour interagir avec votre base de données depuis le côté client schema design and data types par défaut, parse permet la création de schémas à la volée , mais vous pouvez également définir vos classes et types de données dans le tableau de bord back4app pour plus de contrôle naviguez vers la section « base de données » dans votre tableau de bord back4app créer une nouvelle classe (par exemple, “todo”) et ajouter des colonnes pertinentes, telles que titre (string) et estterminé (boolean) back4app prend en charge divers types de données tels que string , number , boolean , object , date , file , pointer, array, relation , geopoint , et polygon utilisez les pour concevoir un schéma robuste pour votre application alimentée par htmx back4app propose un agent ia qui peut vous aider à concevoir votre modèle de données ouvrez l'agent ia depuis votre tableau de bord d'application ou dans le menu décrivez votre modèle de données dans un langage simple (par exemple, « veuillez créer une nouvelle application todo sur back4app avec un schéma de classe complet ») laissez l'agent ia créer le schéma pour vous l'utilisation de l'agent ia peut vous faire gagner du temps lors de la configuration de votre architecture de données et garantir la cohérence de votre application relational data si vous avez des données relationnelles, telles que l'association de tâches à des catégories, vous pouvez utiliser pointers ou relations dans parse via des appels api rest par exemple, ajouter un pointeur // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } lorsque vous interrogez, incluez les données de pointeur si nécessaire // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } live queries pour des mises à jour en temps réel, back4app fournit live queries alors que htmx se concentre sur le rendu côté serveur et les attributs html, l'intégration de mises à jour en direct peut améliorer considérablement l'expérience utilisateur activer les requêtes en direct dans votre tableau de bord back4app sous l’ paramètres du serveur assurez vous que « requêtes en direct » est activé initialiser une souscription de requête en direct en utilisant javascript avec des déclencheurs htmx si nécessaire (remarque les requêtes en direct nécessitent généralement le sdk parse ; cependant, elles peuvent toujours fonctionner avec htmx en mettant à jour des parties de la page lorsque les données changent cet exemple illustre le concept ) import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment 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; } cette souscription peut alors déclencher des requêtes htmx ou mettre à jour des modèles html dynamiquement pour refléter les changements du côté client step 3 – applying security with acls and clps back4app security mechanism back4app prend la sécurité au sérieux en fournissant listes de contrôle d'accès (acls) et permissions au niveau de la classe (clps) ces fonctionnalités vous permettent de restreindre qui peut lire ou écrire des données sur une base par objet ou par classe, garantissant que seuls les utilisateurs autorisés peuvent modifier vos données access control lists (acls) un acl est appliqué à des objets individuels pour déterminer quels utilisateurs, rôles ou le public peuvent effectuer des opérations de lecture/écriture par exemple async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } lorsque vous enregistrez l'objet, il a une acl qui empêche quiconque, sauf l'utilisateur spécifié, de le lire ou de le modifier class level permissions (clps) clps régissent les autorisations par défaut d'une classe entière, telles que si la classe est lisible ou modifiable publiquement, ou si seuls certains rôles peuvent y accéder allez à votre tableau de bord back4app , sélectionnez votre application, et ouvrez la section base de données sélectionnez une classe (par exemple, “à faire”) ouvrez les autorisations au niveau de la classe onglet configurez vos paramètres par défaut, tels que « nécessite une authentification » pour la lecture ou l'écriture, ou « pas d'accès » pour le public ces autorisations définissent la base, tandis que les acl affinent les autorisations pour des objets individuels un modèle de sécurité robuste combine généralement à la fois des clp (restrictions larges) et des acl (restrictions détaillées par objet) pour plus d'informations, allez à directives de sécurité de l'application https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions le cloud code est une fonctionnalité de l'environnement parse server qui vous permet d'exécuter du code javascript personnalisé côté serveur en écrivant du cloud code, vous pouvez étendre votre backend back4app avec une logique métier supplémentaire, des validations, des déclencheurs et des intégrations qui s'exécutent de manière sécurisée et efficace sur le parse server how it works lorsque vous écrivez du code cloud, vous placez généralement vos fonctions javascript, déclencheurs et tous les modules npm requis dans un main js fichier ce fichier est ensuite déployé dans votre projet back4app, qui est exécuté dans l'environnement du serveur parse // 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 cloud code en utilisant le cli back4app ou via le tableau de bord calling your function depuis une interface améliorée par htmx, vous pouvez appeler vos fonctions cloud code en utilisant javascript fetch et mettre à jour des parties de votre page html en conséquence par exemple async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } vous pouvez intégrer des appels similaires dans vos déclencheurs htmx et attributs html pour créer des comportements dynamiques et réactifs côté client, améliorant ainsi l'expérience utilisateur globale step 5 – configuring user authentication user authentication in back4app back4app utilise la parse user classe comme base pour l'authentification par défaut, parse gère le hachage des mots de passe, les jetons de session et le stockage sécurisé dans le contexte d'une application htmx, l'authentification des utilisateurs peut être gérée via des appels rest initiés par des soumissions de formulaires html ou des requêtes fetch javascript setting up user authentication par exemple, pour créer un nouvel utilisateur async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } de même, pour la connexion de l'utilisateur async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } session management après une connexion réussie, parse crée un jeton de session que vous pouvez stocker et gérer dans votre application htmx pour les requêtes authentifiées suivantes social login integration alors que htmx se concentre sur les attributs html et les interactions côté serveur, l'intégration de connexions sociales telles que google ou facebook peut toujours être réalisée en initiant des flux oauth et en gérant les rappels côté serveur consultez documentation sur la connexion sociale https //www back4app com/docs/platform/sign in with apple pour des conseils détaillés email verification and password reset pour activer la vérification par e mail et la réinitialisation du mot de passe accédez aux paramètres de messagerie dans votre tableau de bord back4app activer la vérification par e mail et configurer les modèles nécessaires utilisez fetch dans vos flux htmx pour déclencher des demandes de réinitialisation de mot de passe si nécessaire step 6 – handling file storage uploading and retrieving files parse inclut des capacités de stockage de fichiers que vous pouvez utiliser via des appels api rest depuis votre application htmx par exemple, pour télécharger une image async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } file security contrôlez qui peut télécharger et accéder aux fichiers en configurant les paramètres de sécurité dans back4app et en définissant des acl sur les objets de fichiers si nécessaire step 7 – scheduling tasks with cloud jobs cloud jobs les emplois cloud dans back4app vous permettent de planifier des tâches de routine sur votre backend, telles que le nettoyage des anciennes données ou l'envoi d'e mails périodiques ces emplois s'exécutent côté serveur et peuvent être intégrés à votre flux de travail htmx si nécessaire // 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); } }); planifiez ce travail via le tableau de bord back4app sous paramètres de l'application > paramètres du serveur > travaux en arrière plan step 8 – integrating webhooks webhooks permettent à votre application back4app d'envoyer des requêtes http à un service externe chaque fois que certains événements se produisent c'est puissant pour s'intégrer à des systèmes tiers comme des passerelles de paiement, des outils de marketing par e mail ou des plateformes d'analyse accédez à la configuration des webhooks dans votre tableau de bord back4app > plus > webhooks et cliquez sur ajouter un webhook configurer un point de terminaison (par exemple, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configurer des déclencheurs pour spécifier quels événements dans vos classes back4app ou fonctions cloud code déclencheront le webhook par exemple, pour notifier un canal slack chaque fois qu'un nouveau todo est créé créez une application slack qui accepte les webhooks entrants copiez l'url du webhook slack dans votre tableau de bord back4app, définissez le point de terminaison sur cette url slack pour l'événement « nouvel enregistrement dans la classe todo » optionnellement, ajoutez des en têtes http ou des charges utiles personnalisés si nécessaire vous pouvez également définir des webhooks dans le cloud code en effectuant des requêtes http personnalisées dans les déclencheurs step 9 – exploring the back4app admin panel le back4app admin app est une interface de gestion basée sur le web conçue pour les utilisateurs non techniques afin d'effectuer des opérations crud et de gérer des tâches de données courantes sans écrire de code elle fournit une interface centrée sur le modèle, conviviale, qui simplifie l'administration de la base de données, la gestion des données personnalisées et les opérations à l'échelle de l'entreprise enabling the admin app activer en allant à tableau de bord de l'application > plus > application admin et en cliquant sur le bouton “activer l'application admin” créer un premier utilisateur administrateur (nom d'utilisateur/mot de passe), ce qui génère automatiquement un nouveau rôle (b4aadminuser) et des classes (b4asetting, b4amenuitem et b4acustomfield) dans le schéma de votre application choisissez un sous domaine pour accéder à l'interface d'administration et compléter la configuration se connecter en utilisant les identifiants administratifs que vous avez créés pour accéder à votre nouveau tableau de bord de l'application admin une fois activée, l'application admin back4app facilite la visualisation, l'édition ou la suppression d'enregistrements de votre base de données sans nécessiter l'utilisation directe du tableau de bord parse ou du code backend conclusion en suivant ce tutoriel complet sur la façon de construire un backend pour htmx en utilisant back4app, vous avez créé un backend sécurisé adapté aux applications web htmx configuré une base de données avec des schémas de classe, des types de données et des relations requêtes en temps réel intégrées et prise en compte de la manière dont les requêtes en direct peuvent améliorer l'expérience utilisateur du côté client mesures de sécurité appliquées en utilisant des acl et des clp pour protéger et gérer l'accès aux données fonctions de cloud code mises en œuvre pour exécuter une logique métier personnalisée côté serveur configurer l'authentification des utilisateurs, le stockage de fichiers, les tâches cloud planifiées et les webhooks intégrés exploré le panneau d'administration back4app pour une gestion efficace des données avec ce backend robuste, vous pouvez désormais tirer parti des capacités d'htmx pour créer des applications web dynamiques et modernes qui combinent des améliorations côté client avec des frameworks puissants côté serveur cette approche full stack améliore l'expérience utilisateur globale, offrant des mises à jour de pages html fluides, un rendu côté serveur efficace et une intégration transparente à travers votre pile technologique next steps étendre ce backend pour incorporer des modèles de données plus complexes, des moteurs de templates avancés et une logique côté serveur personnalisée explorer l'intégration avec des frameworks côté serveur pour créer une expérience côté client plus dynamique et réactive consultez la documentation officielle de back4app pour des plongées plus profondes dans la sécurité avancée, l'optimisation des performances et l'analyse continuez à apprendre sur htmx et le développement web moderne pour créer des applications web conviviales et réactives qui combinent le meilleur des technologies côté client et côté serveur une fois le projet créé, vous le verrez listé dans votre tableau de bord back4app ce projet sera la base de toutes les configurations backend discutées dans ce tutoriel se connecter via l'api rest back4app s'appuie sur la plateforme parse pour gérer vos données, fournir des fonctionnalités en temps réel, gérer l'authentification des utilisateurs, et plus encore bien que htmx soit lui même une bibliothèque côté client, connecter votre interface htmx à back4app implique de faire des appels d'api rest directement depuis votre html et javascript récupérez vos clés parse dans votre tableau de bord back4app, accédez à la section “paramètres de l'application” ou “sécurité & clés” de votre application pour trouver votre id d'application , clé api rest , et l' url du serveur parse (souvent au format https //parseapi back4app com ) avec ces clés, vous pouvez utiliser htmx pour appeler vos points de terminaison backend et manipuler vos modèles html en conséquence par exemple, vous pourriez utiliser des requêtes fetch javascript combinées avec des attributs htmx pour interagir avec vos données via des appels rest étape 2 – configuration de la base de données sauvegarde et interrogation des données avec votre projet back4app configuré, vous pouvez maintenant commencer à sauvegarder et récupérer des données en utilisant des appels d'api rest, que vous pouvez déclencher à partir de requêtes htmx ou de javascript pur la manière la plus simple de créer un enregistrement est de faire une requête post au serveur parse 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 de même, vous pouvez interroger des données curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo vous pouvez également utiliser des requêtes graphql si nécessaire pour interagir avec votre base de données depuis le côté client conception du schéma et types de données par défaut, parse permet la création de schéma à la volée , mais vous pouvez également définir vos classes et types de données dans le tableau de bord back4app pour plus de contrôle accédez à la section “base de données” dans votre tableau de bord back4app créez une nouvelle classe (par exemple, “todo”) et ajoutez des colonnes pertinentes, telles que titre (string) et iscompleted (boolean) back4app prend en charge divers types de données tels que string , number , boolean , object , date , file , pointer, array, relation , geopoint , et polygon utilisez les pour concevoir un schéma robuste pour votre application pilotée par htmx back4app propose un agent ia qui peut vous aider à concevoir votre modèle de données ouvrez l'agent ia depuis votre tableau de bord d'application ou dans le menu décrivez votre modèle de données dans un langage simple (par exemple, “veuillez créer une nouvelle application todo sur back4app avec un schéma de classe complet ”) laissez l'agent ia créer le schéma pour vous utiliser l'agent ia peut vous faire gagner du temps lors de la configuration de votre architecture de données et garantir la cohérence de votre application données relationnelles si vous avez des données relationnelles, comme l'association de tâches à des catégories, vous pouvez utiliser pointers ou relations dans parse via des appels api rest par exemple, ajouter un pointeur // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } lorsque vous interrogez, incluez les données de pointeur si nécessaire // example querying with pointer inclusion async function fetchtodos() { const response = await fetch('https //parseapi back4app com/classes/todo?include=category', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); return response json(); } requêtes en direct pour des mises à jour en temps réel, back4app fournit requêtes en direct alors qu'htmx se concentre sur le rendu côté serveur et les attributs html, l'intégration de mises à jour en direct peut améliorer considérablement l'expérience utilisateur activer les requêtes en direct dans votre tableau de bord back4app sous les paramètres du serveur assurez vous que « requêtes en direct » est activé initialiser une souscription de requête en direct en utilisant javascript avec les déclencheurs htmx si nécessaire (remarque les requêtes en direct nécessitent généralement le sdk parse ; cependant, elles peuvent toujours fonctionner avec htmx en mettant à jour des parties de la page lorsque les données changent cet exemple démontre le concept ) import parse from ' /parseconfig'; // this assumes use of the parse sdk in js environment 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; } cette souscription peut alors déclencher des requêtes htmx ou mettre à jour des modèles html dynamiquement pour refléter les changements du côté client étape 3 – application de la sécurité avec les acl et les clp mécanisme de sécurité back4app back4app prend la sécurité au sérieux en fournissant listes de contrôle d'accès (acl) et permissions au niveau de la classe (clp) ces fonctionnalités vous permettent de restreindre qui peut lire ou écrire des données sur une base par objet ou par classe, garantissant que seuls les utilisateurs autorisés peuvent modifier vos données listes de contrôle d'accès (acl) une acl est appliquée à des objets individuels pour déterminer quels utilisateurs, rôles ou le public peuvent effectuer des opérations de lecture/écriture par exemple async function createprivatetodo(title, owneruser) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, acl { \[owneruser id] { "read" true, "write" true }, " " { "read" false, "write" false } } }) }); return response json(); } lorsque vous enregistrez l'objet, il a un acl qui empêche quiconque, sauf l'utilisateur spécifié, de le lire ou de le modifier permissions au niveau de la classe (clps) les clps régissent les permissions par défaut d'une classe entière, telles que si la classe est lisible ou modifiable publiquement, ou si seuls certains rôles peuvent y accéder allez sur votre tableau de bord back4app , sélectionnez votre application et ouvrez la base de données section sélectionnez une classe (par exemple, “todo”) ouvrez l'onglet des permissions au niveau de la classe configurez vos paramètres par défaut, tels que “nécessite une authentification” pour la lecture ou l'écriture, ou “aucun accès” pour le public ces permissions établissent la base, tandis que les acl affinent les permissions pour des objets individuels un modèle de sécurité robuste combine généralement à la fois les clps (restrictions larges) et les acls (restrictions fines par objet) pour plus d'informations, allez à 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 est une fonctionnalité de l'environnement parse server qui vous permet d'exécuter du code javascript personnalisé côté serveur en écrivant du code cloud, vous pouvez étendre votre backend back4app avec une logique métier supplémentaire, des validations, des déclencheurs et des intégrations qui s'exécutent de manière sécurisée et efficace sur le serveur parse comment ça fonctionne lorsque vous écrivez du code cloud, vous placez généralement vos fonctions javascript, déclencheurs et tous les modules npm requis dans un main js fichier ce fichier est ensuite déployé sur votre projet back4app, qui s'exécute dans l'environnement du serveur parse // 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 code cloud en utilisant le cli back4app ou via le tableau de bord appeler votre fonction depuis une interface améliorée par htmx, vous pouvez appeler vos fonctions de code cloud en utilisant javascript fetch et mettre à jour des parties de votre page html en conséquence par exemple async function gettextlength(text) { const response = await fetch('https //parseapi back4app com/functions/calculatetextlength', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ text }) }); const result = await response json(); console log('text length ', result result length); } vous pouvez intégrer des appels similaires dans vos déclencheurs htmx et attributs html pour créer des comportements dynamiques et réactifs côté client, améliorant ainsi l'expérience utilisateur globale étape 5 – configuration de l'authentification des utilisateurs authentification des utilisateurs dans back4app back4app utilise la classe parse user comme base pour l'authentification par défaut, parse gère le hachage des mots de passe, les jetons de session et le stockage sécurisé dans le contexte d'une application htmx, l'authentification des utilisateurs peut être gérée via des appels rest initiés par des soumissions de formulaires html ou des requêtes fetch javascript configuration de l'authentification des utilisateurs par exemple, pour créer un nouvel utilisateur async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } de même, pour la connexion de l'utilisateur async function loginuser(username, password) { const response = await fetch(`https //parseapi back4app com/login?username=${encodeuricomponent(username)}\&password=${encodeuricomponent(password)}`, { headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' } }); return response json(); } gestion de session après une connexion réussie, parse crée un jeton de session que vous pouvez stocker et gérer dans votre application htmx pour les requêtes authentifiées ultérieures intégration de la connexion sociale bien que htmx se concentre sur les attributs html et les interactions côté serveur, l'intégration de connexions sociales telles que google ou facebook peut toujours être réalisée en initiant des flux oauth et en gérant les rappels côté serveur référez vous à documentation sur la connexion sociale https //www back4app com/docs/platform/sign in with apple pour des conseils détaillés vérification de l'email et réinitialisation du mot de passe pour activer la vérification par e mail et la réinitialisation du mot de passe accédez aux paramètres de messagerie dans votre tableau de bord back4app activez la vérification par e mail et configurez les modèles nécessaires utilisez fetch dans vos flux htmx pour déclencher des demandes de réinitialisation de mot de passe si nécessaire étape 6 – gestion du stockage de fichiers téléchargement et récupération de fichiers parse inclut des capacités de stockage de fichiers que vous pouvez utiliser via des appels api rest depuis votre application htmx par exemple, pour télécharger une image async function uploadimage(file) { const data = new formdata(); data append('file', file); data append('object', '{" type" "file","name" "' + file name + '"}'); const response = await fetch('https //parseapi back4app com/files/' + file name, { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key' }, body data }); return response json(); } sécurité des fichiers contrôlez qui peut télécharger et accéder aux fichiers en configurant les paramètres de sécurité dans back4app et en définissant des acl sur les objets de fichier selon les besoins étape 7 – planification des tâches avec les cloud jobs cloud jobs les cloud jobs dans back4app vous permettent de planifier des tâches de routine sur votre backend, telles que le nettoyage des anciennes données ou l'envoi d'e mails périodiques ces tâches s'exécutent côté serveur et peuvent être intégrées à votre flux de travail htmx si nécessaire // 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); } }); planifiez ce travail via le tableau de bord back4app sous paramètres de l'application > paramètres du serveur > tâches d'arrière plan étape 8 – intégration des webhooks les webhooks permettent à votre application back4app d'envoyer des requêtes http à un service externe chaque fois que certains événements se produisent c'est puissant pour s'intégrer à des systèmes tiers comme des passerelles de paiement, des outils de marketing par e mail ou des plateformes d'analyse accédez à la configuration des webhooks dans votre tableau de bord back4app > plus > webhooks et cliquez sur ajouter un webhook configurez un point de terminaison (par exemple, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configurez des déclencheurs pour spécifier quels événements dans vos classes back4app ou fonctions cloud code déclencheront le webhook par exemple, pour notifier un canal slack chaque fois qu'un nouveau todo est créé créez une application slack qui accepte les webhooks entrants copiez l'url du webhook slack dans votre tableau de bord back4app, définissez le point de terminaison sur cette url slack pour l'événement “nouvel enregistrement dans la classe todo ” en option, ajoutez des en têtes http ou des charges utiles personnalisées si nécessaire vous pouvez également définir des webhooks dans le cloud code en effectuant des requêtes http personnalisées dans les déclencheurs étape 9 – explorer le panneau d'administration back4app l' application d'administration back4app est une interface de gestion basée sur le web conçue pour les utilisateurs non techniques afin d'effectuer des opérations crud et de gérer des tâches de données de routine sans écrire de code il fournit une interface centrée sur le modèle et conviviale qui simplifie l'administration de la base de données, la gestion des données personnalisées et les opérations au niveau de l'entreprise activation de l'application admin activez en allant dans tableau de bord de l'application > plus > application admin et en cliquant sur le bouton “activer l'application admin” créez un premier utilisateur admin (nom d'utilisateur/mot de passe), ce qui génère automatiquement un nouveau rôle (b4aadminuser) et des classes (b4asetting, b4amenuitem et b4acustomfield) dans le schéma de votre application choisissez un sous domaine pour accéder à l'interface admin et complétez la configuration connectez vous en utilisant les identifiants admin que vous avez créés pour accéder à votre nouveau tableau de bord de l'application admin une fois activée, l'application admin back4app facilite la visualisation, l'édition ou la suppression d'enregistrements de votre base de données sans nécessiter l'utilisation directe du tableau de bord parse ou du code backend conclusion en suivant ce tutoriel complet sur la façon de construire un backend pour htmx en utilisant back4app, vous avez créé un backend sécurisé adapté aux applications web htmx configuré une base de données avec des schémas de classe, des types de données et des relations intégré des requêtes en temps réel et considéré comment les requêtes en direct peuvent améliorer l'expérience utilisateur côté client appliqué des mesures de sécurité en utilisant des acl et des clp pour protéger et gérer l'accès aux données implémenté des fonctions cloud code pour exécuter une logique métier personnalisée côté serveur mis en place l'authentification des utilisateurs, le stockage de fichiers, des tâches cloud programmées et intégré des webhooks exploré le panneau d'administration de back4app pour une gestion efficace des données avec ce backend robuste, vous pouvez maintenant tirer parti des capacités d'htmx pour créer des applications web dynamiques et modernes qui combinent des améliorations côté client avec des frameworks puissants côté serveur cette approche full stack améliore l'expérience utilisateur globale, offrant des mises à jour de pages html fluides, un rendu côté serveur efficace et une intégration transparente à travers votre pile technologique prochaines étapes étendre ce backend pour incorporer des modèles de données plus complexes, des moteurs de templates avancés et une logique serveur personnalisée explorer l'intégration avec des frameworks côté serveur pour créer une expérience côté client plus dynamique et réactive consulter la documentation officielle de back4app pour des plongées plus profondes dans la sécurité avancée, l'optimisation des performances et l'analyse continuer à apprendre sur htmx et le développement web moderne pour construire des applications web conviviales et réactives qui combinent le meilleur des technologies côté client et côté serveur