Quickstarters
Comment construire un backend pour htmx ?

35min
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.
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 d'htmx
Incluez la bibliothèque htmx 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 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.
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” 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 requête de 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
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
﻿
De même, vous pouvez interroger des données :
Curl
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
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 de 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 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.
﻿
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 :
JS
// 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();
}
// 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 :
JS
// 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();
}
// 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 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 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.)
JS
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;
}
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 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 :
JS
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();
}
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.
É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.
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 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 :
JS
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);
}
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 :
JS
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();
}
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 :
JS
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();
}
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. Consultez Documentation sur la connexion sociale 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 :
JS
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();
}
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.
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);
  }
});
﻿
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).
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.”
Optionnellement, 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 rationalise 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-la 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 planifié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.
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Comment construire un backend pour Blazor ?
Comment construire un backend pour NativeScript ?