Schnellstarter
Wie man ein Backend für htmx erstellt?

34min
Einführung
In diesem Tutorial lernen Sie, wie Sie ein vollständiges Backend für htmx-Webanwendungen mit Back4app erstellen.
Wir werden die Integration wesentlicher Back4app-Funktionen durchgehen - wie Datenbankverwaltung, Cloud-Code-Funktionen, REST- und GraphQL-APIs, Benutzerauthentifizierung, Dateispeicherung und Echtzeitanfragen (Live Queries) - um ein sicheres, skalierbares und robustes Backend zu erstellen, das nahtlos mit Ihrem htmx-Frontend kommuniziert.
Die Verwendung von htmx, einer modernen JavaScript-Bibliothek, die HTML-Attribute nutzt, um clientseitige Interaktionen zu handhaben, kann das Benutzererlebnis erheblich verbessern, während der Fokus auf serverseitigem Rendering liegt.
Durch die Kombination von htmx mit den leistungsstarken serverseitigen Frameworks und Template-Engines von Back4app können Entwickler Full-Stack-Webanwendungen mit Leichtigkeit und Effizienz erstellen.
Am Ende dieses Tutorials haben Sie ein Backend erstellt, das auf die htmx-Integration zugeschnitten ist, was reibungslose Datenoperationen ermöglicht und die clientseitige Erfahrung mit dynamischen HTML-Seitenaktualisierungen ohne vollständige Seitenneuladevorgänge verbessert.
Voraussetzungen
Um dieses Tutorial abzuschließen, benötigen Sie:
Ein Back4app-Konto und ein neues Back4app-Projekt
Erste Schritte mit Back4app.
Wenn Sie kein Konto haben, können Sie eines kostenlos erstellen. Befolgen Sie die obige Anleitung, um Ihr Projekt vorzubereiten.
Grundlegende htmx-Einrichtung
Fügen Sie die htmx-Bibliothek in Ihre HTML-Seite ein, indem Sie:
Eine Webentwicklungsumgebung
Stellen Sie sicher, dass Sie einen lokalen Server eingerichtet haben oder verwenden Sie serverseitige Frameworks, um Ihre HTML-Vorlagen bereitzustellen.
Vertrautheit mit HTML, CSS und JavaScript
htmx-Dokumentation für weitere Details zu HTML-Attributen und der Entwicklung von Webanwendungen.
Stellen Sie sicher, dass Sie alle diese Voraussetzungen erfüllt haben, bevor Sie beginnen. Ihr Back4app-Projekt einzurichten und Ihre lokale htmx-Umgebung bereit zu haben, wird Ihnen helfen, leichter folgen zu können.
Schritt 1 – Einrichten des Back4app-Projekts
Ein neues Projekt erstellen
Der erste Schritt beim Erstellen Ihres htmx-Backends auf Back4app besteht darin, ein neues Projekt zu erstellen. Wenn Sie noch keines erstellt haben, folgen Sie diesen Schritten:
Melden Sie sich bei Ihrem Back4app-Konto an.
Klicken Sie auf die Schaltfläche „Neue App“ in Ihrem Back4app-Dashboard.
Geben Sie Ihrer App einen Namen (z. B. „htmx-Backend-Tutorial“).
﻿
Sobald das Projekt erstellt ist, sehen Sie es in Ihrem Back4app-Dashboard aufgeführt. Dieses Projekt wird die Grundlage für alle Backend-Konfigurationen sein, die in diesem Tutorial besprochen werden.
Über REST API verbinden
Back4app basiert auf der Parse-Plattform, um Ihre Daten zu verwalten, Echtzeitfunktionen bereitzustellen, die Benutzerauthentifizierung zu handhaben und mehr.
Während htmx selbst eine clientseitige Bibliothek ist, besteht die Verbindung Ihres htmx-Frontends zu Back4app darin, REST-API-Aufrufe direkt aus Ihrem HTML und JavaScript zu tätigen.
Rufen Sie Ihre Parse-Schlüssel ab:
Navigieren Sie in Ihrem Back4app-Dashboard zu den „App-Einstellungen“ oder dem Abschnitt „Sicherheit & Schlüssel“, um Ihre Anwendungs-ID, REST-API-Schlüssel, und die Parse-Server-URL (häufig im Format https://parseapi.back4app.com).
Mit diesen Schlüsseln können Sie htmx verwenden, um Ihre Backend-Endpunkte aufzurufen und Ihre HTML-Vorlagen entsprechend zu manipulieren. Zum Beispiel könnten Sie JavaScript-Fetch-Anfragen in Kombination mit htmx-Attributen verwenden, um über REST-Aufrufe mit Ihren Daten zu interagieren.
Schritt 2 – Datenbank einrichten
Daten speichern und abfragen
Nachdem Ihr Back4app-Projekt eingerichtet ist, können Sie nun Daten speichern und abrufen, indem Sie REST-API-Aufrufe tätigen, die Sie von htmx-Anfragen oder einfachem JavaScript aus auslösen können. Der einfachste Weg, einen Datensatz zu erstellen, besteht darin, eine POST-Anfrage an den Parse-Server zu senden:
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
﻿
Ähnlich können Sie Daten abfragen:
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
﻿
Sie können auch GraphQL-Abfragen nach Bedarf verwenden, um von der Client-Seite aus mit Ihrer Datenbank zu interagieren.
Schema-Design und Datentypen
Standardmäßig erlaubt Parse Schemaerstellung on the fly, aber Sie können auch Ihre Klassen und Datentypen im Back4app-Dashboard definieren, um mehr Kontrolle zu haben.
Navigieren Sie zum Abschnitt „Datenbank“ in Ihrem Back4app-Dashboard.
Erstellen Sie eine neue Klasse (z. B. „Todo“) und fügen Sie relevante Spalten hinzu, wie Titel (String) und isCompleted (Boolean).
﻿
Back4app unterstützt verschiedene Datentypen wie String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, und Polygon. Verwenden Sie diese, um ein robustes Schema für Ihre htmx-gesteuerte Anwendung zu entwerfen.
Back4app bietet einen KI-Agenten, der Ihnen helfen kann, Ihr Datenmodell zu entwerfen:
Öffnen Sie den KI-Agenten von Ihrem App-Dashboard oder im Menü.
Beschreiben Sie Ihr Datenmodell in einfacher Sprache (z.B. „Bitte erstellen Sie eine neue ToDo-App bei back4app mit einem vollständigen Klassenschema.“).
Lassen Sie den KI-Agenten das Schema für Sie erstellen.
﻿
Die Verwendung des KI-Agenten kann Ihnen Zeit sparen, wenn Sie Ihre Datenarchitektur einrichten, und die Konsistenz in Ihrer Anwendung sicherstellen.
Relationale Daten
Wenn Sie relationale Daten haben, wie das Verknüpfen von Aufgaben mit Kategorien, können Sie Pointer oder Relations in Parse über REST-API-Aufrufe verwenden. Zum Beispiel, um einen Pointer hinzuzufügen:
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();
}
﻿
Wenn Sie abfragen, fügen Sie bei Bedarf Zeigerdaten hinzu:
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();
}
﻿
Echtzeitabfragen
Für Echtzeit-Updates bietet Back4app Echtzeitabfragen. Während htmx sich auf serverseitiges Rendering und HTML-Attribute konzentriert, kann die Integration von Live-Updates das Benutzererlebnis erheblich verbessern.
Aktivieren Sie Echtzeitabfragen in Ihrem Back4app-Dashboard unter den Servereinstellungen. Stellen Sie sicher, dass „Echtzeitabfragen“ aktiviert sind.
Initialisieren Sie ein Echtzeitabonnement mit JavaScript zusammen mit htmx-Triggern, falls erforderlich:
(Hinweis: Echtzeitabfragen erfordern normalerweise das Parse SDK; sie können jedoch weiterhin zusammen mit htmx funktionieren, indem Teile der Seite aktualisiert werden, wenn sich die Daten ändern. Dieses Beispiel demonstriert das Konzept.)
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;
}
﻿
Dieses Abonnement kann dann htmx-Anfragen auslösen oder HTML-Vorlagen dynamisch aktualisieren, um Änderungen auf der Client-Seite widerzuspiegeln.
Schritt 3 – Anwendung von Sicherheit mit ACLs und CLPs
Back4app Sicherheitsmechanismus
Back4app nimmt Sicherheit ernst, indem es Zugriffskontrolllisten (ACLs) und Klassenebene-Berechtigungen (CLPs). Diese Funktionen ermöglichen es Ihnen, einzuschränken, wer Daten auf Objekt- oder Klassenbasis lesen oder schreiben kann, und stellen sicher, dass nur autorisierte Benutzer Ihre Daten ändern können.
Zugriffskontrolllisten (ACLs)
Eine ACL wird auf einzelne Objekte angewendet, um zu bestimmen, welche Benutzer, Rollen oder die Öffentlichkeit Lese-/Schreiboperationen durchführen können. Zum Beispiel:
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();
}
﻿
Wenn Sie das Objekt speichern, hat es eine ACL, die verhindert, dass jemand außer dem angegebenen Benutzer es liest oder ändert.
Klassenebene Berechtigungen (CLPs)
CLPs regeln die Standardberechtigungen einer gesamten Klasse, wie z.B. ob die Klasse öffentlich lesbar oder schreibbar ist oder ob nur bestimmte Rollen darauf zugreifen können.
Gehen Sie zu Ihrem Back4app-Dashboard, wählen Sie Ihre App aus und öffnen Sie den Datenbank-Bereich.
Wählen Sie eine Klasse aus (z.B. „Todo“).
Öffnen Sie die Klassenebene Berechtigungen-Registerkarte.
Konfigurieren Sie Ihre Standardwerte, wie „Erfordert Authentifizierung“ für Lesen oder Schreiben oder „Kein Zugriff“ für die Öffentlichkeit.
Diese Berechtigungen setzen die Basislinie, während ACLs die Berechtigungen für einzelne Objekte verfeinern. Ein robustes Sicherheitsmodell kombiniert typischerweise sowohl CLPs (breite Einschränkungen) als auch ACLs (fein abgestufte Einschränkungen pro Objekt). Für weitere Informationen gehen Sie zu App-Sicherheitsrichtlinien.
Schritt 4 – Schreiben und Bereitstellen von Cloud-Funktionen
Cloud Code ist eine Funktion der Parse Server-Umgebung, die es Ihnen ermöglicht, benutzerdefinierten JavaScript-Code auf der Serverseite auszuführen. 
Durch das Schreiben von Cloud-Code können Sie Ihr Back4app-Backend mit zusätzlicher Geschäftslogik, Validierungen, Triggern und Integrationen erweitern, die sicher und effizient auf dem Parse-Server ausgeführt werden.
Wie es funktioniert
Wenn Sie Cloud-Code schreiben, platzieren Sie typischerweise Ihre JavaScript-Funktionen, Trigger und alle erforderlichen NPM-Module in einer main.js-Datei. Diese Datei wird dann in Ihr Back4app-Projekt bereitgestellt, das innerhalb der Parse-Server-Umgebung ausgeführt wird.
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');
  }
});
﻿
Stellen Sie Ihren Cloud-Code mit der Back4app-CLI oder über das Dashboard bereit.
Aufrufen Ihrer Funktion
Von einer htmx-verbesserten Schnittstelle aus können Sie Ihre Cloud-Code-Funktionen mit JavaScript fetch aufrufen und Teile Ihrer HTML-Seite entsprechend aktualisieren. Zum Beispiel:
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);
}
﻿
Sie können ähnliche Aufrufe innerhalb Ihrer htmx-Trigger und HTML-Attribute integrieren, um dynamische, reaktionsschnelle Verhaltensweisen auf der Client-Seite zu schaffen, was die Benutzererfahrung insgesamt verbessert.
Schritt 5 – Konfigurieren der Benutzerauthentifizierung
Benutzerauthentifizierung in Back4app
Back4app nutzt die Parse User-Klasse als Grundlage für die Authentifizierung. Standardmäßig kümmert sich Parse um die Passwort-Hashing, Sitzungstoken und sichere Speicherung. 
Im Kontext einer htmx-Anwendung kann die Benutzerauthentifizierung über REST-Aufrufe verwaltet werden, die durch HTML-Formularübermittlungen oder JavaScript-fetch-Anfragen initiiert werden.
Einrichten der Benutzerauthentifizierung
Zum Beispiel, um einen neuen Benutzer zu erstellen:
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();
}
﻿
Ähnlich für die Benutzeranmeldung:
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();
}
﻿
Sitzungsverwaltung
Nach einer erfolgreichen Anmeldung erstellt Parse ein Sitzungstoken, das Sie in Ihrer htmx-Anwendung speichern und verwalten können, um nachfolgende authentifizierte Anfragen zu stellen.
Integration von sozialer Anmeldung
Während htmx sich auf HTML-Attribute und serverseitige Interaktionen konzentriert, kann die Integration von sozialen Anmeldungen wie Google oder Facebook dennoch erreicht werden, indem OAuth-Flows initiiert und Rückrufe auf der Serverseite behandelt werden. Verweisen Sie auf Dokumentation zur sozialen Anmeldung für detaillierte Anleitungen.
E-Mail-Verifizierung und Passwortzurücksetzung
Um die E-Mail-Verifizierung und das Zurücksetzen des Passworts zu aktivieren:
Navigieren Sie zu den E-Mail-Einstellungen in Ihrem Back4app-Dashboard.
Aktivieren Sie die E-Mail-Verifizierung und konfigurieren Sie die erforderlichen Vorlagen.
Verwenden Sie fetch in Ihren htmx-Flows, um bei Bedarf Passwortzurücksetzanforderungen auszulösen.
Schritt 6 – Umgang mit Dateispeicher
Hochladen und Abrufen von Dateien
Parse umfasst Dateispeicherfunktionen, die Sie über REST-API-Aufrufe von Ihrer htmx-Anwendung nutzen können. Zum Beispiel, um ein Bild hochzuladen:
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();
}
﻿
Dateisicherheit
Steuern Sie, wer Dateien hochladen und darauf zugreifen kann, indem Sie die Sicherheitseinstellungen in Back4app konfigurieren und bei Bedarf ACLs für Dateiobjekte festlegen.
Schritt 7 – Aufgaben mit Cloud-Jobs planen
Cloud-Jobs
Cloud-Jobs in Back4app ermöglichen es Ihnen, routinemäßige Aufgaben in Ihrem Backend zu planen, wie z. B. das Bereinigen alter Daten oder das Versenden regelmäßiger E-Mails.
Diese Jobs laufen serverseitig und können bei Bedarf in Ihren htmx-Workflow integriert werden.
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);
  }
});
﻿
Planen Sie diesen Job über das Back4app-Dashboard unter App-Einstellungen > Servereinstellungen > Hintergrundjobs.
Schritt 8 – Webhooks integrieren
Webhooks ermöglichen es Ihrer Back4app-App, HTTP-Anfragen an einen externen Dienst zu senden, wann immer bestimmte Ereignisse auftreten. Dies ist leistungsstark für die Integration mit Drittanbietersystemen wie Zahlungs-Gateways, E-Mail-Marketing-Tools oder Analyseplattformen.
Navigieren Sie zur Webhooks-Konfiguration in Ihrem Back4app-Dashboard > Mehr > WebHooks und klicken Sie auf Webhook hinzufügen.
Richten Sie einen Endpunkt ein (z. B. https://your-external-service.com/webhook-endpoint).
Konfigurieren Sie Trigger um festzulegen, welche Ereignisse in Ihren Back4app-Klassen oder Cloud-Code-Funktionen den Webhook auslösen.
Zum Beispiel, um einen Slack-Kanal zu benachrichtigen, wann immer ein neues Todo erstellt wird:
Erstellen Sie eine Slack-App, die eingehende Webhooks akzeptiert.
Kopieren Sie die Slack-Webhook-URL.
In Ihrem Back4app-Dashboard setzen Sie den Endpunkt auf diese Slack-URL für das Ereignis „Neuer Datensatz in der Todo-Klasse.“
Optional können Sie benutzerdefinierte HTTP-Header oder Payloads nach Bedarf hinzufügen.
Sie können auch Webhooks im Cloud-Code definieren, indem Sie benutzerdefinierte HTTP-Anfragen in Triggern erstellen.
Schritt 9 – Erforschen des Back4app-Admin-Panels
Die Back4app Admin App ist eine webbasierte Verwaltungsoberfläche, die für nicht-technische Benutzer entwickelt wurde, um CRUD-Operationen durchzuführen und routinemäßige Datenaufgaben ohne Programmierung zu erledigen.
Es bietet eine modellzentrierte, benutzerfreundliche Schnittstelle, die die Datenbankverwaltung, das benutzerdefinierte Datenmanagement und die unternehmensweiten Operationen optimiert.
Aktivierung der Admin-App
Aktivieren Sie es, indem Sie zu App-Dashboard > Mehr > Admin-App gehen und auf die Schaltfläche „Admin-App aktivieren“ klicken.
Erstellen Sie einen ersten Admin-Benutzer (Benutzername/Passwort), der automatisch eine neue Rolle (B4aAdminUser) und Klassen (B4aSetting, B4aMenuItem und B4aCustomField) im Schema Ihrer App generiert.
Wählen Sie eine Subdomain für den Zugriff auf die Admin-Oberfläche und schließen Sie die Einrichtung ab.
Einloggen mit den Admin-Anmeldeinformationen, die Sie erstellt haben, um auf Ihr neues Admin-App-Dashboard zuzugreifen.
Sobald aktiviert, erleichtert die Back4app Admin-App das Anzeigen, Bearbeiten oder Entfernen von Datensätzen aus Ihrer Datenbank - ohne dass eine direkte Nutzung des Parse-Dashboards oder Backend-Codes erforderlich ist.
Fazit
Indem Sie dieses umfassende Tutorial zur Erstellung eines Backends für htmx mit Back4app befolgen, haben Sie:
Ein sicheres Backend erstellt, das auf htmx-Webanwendungen zugeschnitten ist.
Eine Datenbank mit Klassenschemas, Datentypen und Beziehungen konfiguriert.
Echtzeitabfragen integriert und überlegt, wie Live Queries das Benutzererlebnis auf der Client-Seite verbessern können.
Sicherheitsmaßnahmen mit ACLs und CLPs angewendet, um den Datenzugriff zu schützen und zu verwalten.
Cloud-Code-Funktionen implementiert, um benutzerdefinierte Geschäftslogik auf der Serverseite auszuführen.
Benutzerauthentifizierung, Dateispeicherung, geplante Cloud-Jobs eingerichtet und Webhooks integriert.
Das Back4app-Admin-Panel für eine effiziente Datenverwaltung erkundet.
Mit diesem robusten Backend können Sie nun die Möglichkeiten von htmx nutzen, um dynamische, moderne Webanwendungen zu erstellen, die clientseitige Verbesserungen mit leistungsstarken serverseitigen Frameworks kombinieren.
Dieser Full-Stack-Ansatz verbessert das gesamte Benutzererlebnis, indem er reibungslose HTML-Seitenaktualisierungen, effizientes serverseitiges Rendering und nahtlose Integration in Ihrem Technologiestack bietet.
Nächste Schritte
Dieses Backend erweitern um komplexere Datenmodelle, fortschrittliche Template-Engines und benutzerdefinierte serverseitige Logik zu integrieren.
Integration mit serverseitigen Frameworks erkunden um ein dynamischeres und reaktionsschnelleres Benutzererlebnis auf der Client-Seite zu schaffen.
Die offizielle Dokumentation von Back4app ansehen für tiefere Einblicke in fortgeschrittene Sicherheit, Leistungsoptimierung und Analytik.
Weiter über htmx und moderne Webentwicklung lernen um benutzerfreundliche, reaktionsschnelle Webanwendungen zu erstellen, die das Beste aus clientseitigen und serverseitigen Technologien kombinieren.
﻿
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man ein Backend für Blazor erstellt?
ALS NÄCHSTES
Wie man ein Backend für NativeScript erstellt?