Wie man ein Backend für htmx erstellt?

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 das clientseitige erlebnis 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 https //www back4app com/docs/get started/new parse app 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 https //htmx org/ in ihre html seite ein mit 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 https //htmx org/docs/ für weitere details zu html attributen und zur 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 connect via rest api 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 mit back4app darin, rest api aufrufe direkt aus ihrem html und javascript zu tätigen rufen sie ihre parse schlüssel ab gehen sie in ihrem back4app dashboard zu den „app einstellungen“ oder zum abschnitt „sicherheit & schlüssel“, um ihre anwendungs id , rest api schlüssel , und die parse server url , die oft im format https //parseapi back4app com ) ausfindig zu machen 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 step 2 – setting up the database saving and querying data mit ihrem back4app projekt, das eingerichtet ist, können sie jetzt daten speichern und abrufen, indem sie rest api aufrufe verwenden, 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 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 ebenso können sie daten abfragen 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 and data types standardmäßig erlaubt parse schemaerstellung zur laufzeit , 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 aus 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 “) lass den ki agenten das schema für dich erstellen die verwendung des ki agenten kann ihnen zeit bei der einrichtung ihrer datenarchitektur sparen und konsistenz in ihrer anwendung gewährleisten relational data wenn sie relationale daten haben, wie das verknüpfen von aufgaben mit kategorien, können sie zeiger oder beziehungen in parse über rest api aufrufe verwenden zum beispiel, um einen zeiger hinzuzufügen // 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 // 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 für echtzeit updates bietet back4app live abfragen während htmx sich auf serverseitiges rendering und html attribute konzentriert, kann die integration von live updates das benutzererlebnis erheblich verbessern aktivieren sie live abfragen in ihrem back4app dashboard unter ihrer app servereinstellungen stellen sie sicher, dass „live abfragen“ aktiviert ist initialisieren sie ein live query abonnement unter verwendung von javascript zusammen mit htmx triggern, falls erforderlich (hinweis live abfragen 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 veranschaulicht das konzept ) 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 step 3 – applying security with acls and clps back4app security mechanism 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 access control lists (acls) ein acl wird auf einzelne objekte angewendet, um zu bestimmen, welche benutzer, rollen oder die öffentlichkeit lese /schreiboperationen durchführen können zum beispiel 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 class level permissions (clps) clps regeln die standardberechtigungen einer gesamten klasse, wie zum beispiel, ob die klasse öffentlich lesbar oder schreibbar ist oder ob nur bestimmte rollen darauf zugreifen können gehe zu deinem back4app dashboard , wähle deine app aus und öffne die datenbank sektion wählen sie eine klasse (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 legen die grundlage fest, während acls die berechtigungen für einzelne objekte verfeinern ein robustes sicherheitsmodell kombiniert typischerweise sowohl clps (grobe einschränkungen) als auch acls (fein abgestimmte einschränkungen pro objekt) für weitere informationen gehen sie zu richtlinien zur app sicherheit https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions 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 how it works 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 // 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'); } }); implementieren sie ihren cloud code mit der back4app cli oder über das dashboard calling your function von einer htmx erweiterten schnittstelle aus können sie ihre cloud code funktionen mit javascript fetch aufrufen und teile ihrer html seite entsprechend aktualisieren zum beispiel 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 erstellen, was die gesamte benutzererfahrung verbessert step 5 – configuring user authentication user authentication 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 setting up user authentication zum beispiel, um einen neuen benutzer zu erstellen 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 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 nach einem erfolgreichen login erstellt parse ein sitzungstoken, das sie in ihrer htmx anwendung für nachfolgende authentifizierte anfragen speichern und verwalten können social login integration während htmx sich auf html attribute und serverseitige interaktionen konzentriert, kann die integration von sozialen logins wie google oder facebook dennoch erreicht werden, indem oauth flows initiiert und rückrufe auf der serverseite verarbeitet werden siehe dokumentation zu sozialen logins https //www back4app com/docs/platform/sign in with apple für detaillierte anleitungen email verification and password reset um die e mail verifizierung und das zurücksetzen des passworts zu aktivieren navigieren sie zu den e mail einstellungen in ihrem back4app dashboard e mail verifizierung aktivieren und die erforderlichen vorlagen konfigurieren verwenden sie fetch in ihren htmx workflows, um bei bedarf passwortzurücksetzanforderungen auszulösen step 6 – handling file storage uploading and retrieving files parse umfasst dateispeicherfähigkeiten, die sie über rest api aufrufe von ihrer htmx anwendung nutzen können zum beispiel, um ein bild hochzuladen 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 steuern sie, wer dateien hochladen und darauf zugreifen kann, indem sie die sicherheitseinstellungen in back4app konfigurieren und bei bedarf acls für dateiobjekte festlegen step 7 – scheduling tasks with cloud jobs cloud jobs cloud jobs in back4app ermöglichen es ihnen, routinemäßige aufgaben in ihrem backend zu planen, wie das bereinigen alter daten oder das versenden periodischer e mails diese jobs laufen serverseitig und können bei bedarf in ihren htmx workflow integriert werden // 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 step 8 – integrating webhooks 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 https //your external service com/webhook endpoint ) trigger konfigurieren um anzugeben, 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 kopiere die slack webhook url in deinem back4app dashboard setze den endpunkt auf die slack url für das ereignis „neuer datensatz in der todo klasse “ optional können benutzerdefinierte http header oder payloads nach bedarf hinzugefügt werden sie können auch webhooks im cloud code definieren, indem sie benutzerdefinierte http anfragen in triggern erstellen step 9 – exploring the back4app admin panel 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 sie bietet eine modellzentrierte, benutzerfreundliche oberfläche, die die datenbankverwaltung, das benutzerdefinierte datenmanagement und betriebliche abläufe auf unternehmensebene optimiert enabling the 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 administrationsbenutzer (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 administrationsoberfläche und schließen sie die einrichtung ab einloggen mit den administratoranmeldeinformationen, die sie erstellt haben, um auf ihr neues admin app dashboard zuzugreifen sobald aktiviert, ermöglicht die back4app admin app eine einfache ansicht, bearbeitung oder entfernung von datensätzen aus ihrer datenbank ohne dass eine direkte nutzung des parse dashboards oder backend codes erforderlich ist conclusion indem sie dieses umfassende tutorial zur erstellung eines backends für htmx mit back4app befolgen, haben sie einen sicheren backend speziell für htmx webanwendungen erstellt eine datenbank mit klassenschemas, datentypen und beziehungen konfiguriert integrierte echtzeitanfragen und überlegt, wie live abfragen das benutzererlebnis auf der client seite verbessern können angewandte sicherheitsmaßnahmen mit acls und clps zum schutz und zur verwaltung des datenzugriffs implementierte cloud code funktionen, um benutzerdefinierte geschäftslogik auf der serverseite auszuführen richten sie die benutzerauthentifizierung, die dateispeicherung, geplante cloud jobs und integrierte webhooks ein erforschte das back4app admin panel für eine effiziente datenverwaltung 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 ihren technologiestack bietet next steps erweitern sie dieses backend um komplexere datenmodelle, fortgeschrittene template engines und benutzerdefinierte serverseitige logik erforschen sie die integration mit serverseitigen frameworks um ein dynamischeres und reaktionsschnelleres client seitenerlebnis zu schaffen schau dir die offizielle dokumentation von back4app an für tiefere einblicke in erweiterte sicherheit, leistungsoptimierung und analytik fahren sie fort, mehr über htmx und moderne webentwicklung zu lernen um benutzerfreundliche, responsive webanwendungen zu erstellen, die das beste aus clientseitigen und serverseitigen technologien kombinieren 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 mit ihrem back4app projekt eingerichtet, können sie jetzt 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 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 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 z b 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 // 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 // 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 veranschaulicht das konzept ) 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, sodass 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 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 https //www back4app com/docs/security/parse security 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 // 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 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, die das gesamterlebnis der benutzer verbessern 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 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 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 sozialen logins während htmx sich auf html attribute und serverseitige interaktionen konzentriert, kann die integration von sozialen logins wie google oder facebook dennoch erreicht werden, indem oauth flows initiiert und rückrufe auf der serverseite behandelt werden siehe dokumentation zu sozialen logins https //www back4app com/docs/platform/sign in with apple 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 passwort zurücksetzanforderungen auszulösen schritt 6 – umgang mit dateispeicher hochladen und abrufen von dateien parse umfasst dateispeicherfähigkeiten, die sie über rest api aufrufe von ihrer htmx anwendung nutzen können zum beispiel, um ein bild hochzuladen 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 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 // 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 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 anmelden 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 abfragen 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