Come costruire un backend per htmx?

introduzione in questo tutorial, imparerai a costruire un backend completo per le app web htmx utilizzando back4app esploreremo l'integrazione delle funzionalità essenziali di back4app come la gestione del database, le funzioni cloud code, le api rest e graphql, l'autenticazione degli utenti, l'archiviazione dei file e le query in tempo reale (live queries) per creare un backend sicuro, scalabile e robusto che comunica senza problemi con il tuo front end htmx utilizzare htmx, una moderna libreria javascript che sfrutta gli attributi html per gestire le interazioni lato client, può migliorare drasticamente l'esperienza dell'utente mentre ci si concentra sul rendering lato server combinando htmx con i potenti framework lato server e i motori di template di back4app, gli sviluppatori possono creare app web full stack con facilità ed efficienza alla fine di questo tutorial, avrai costruito un backend su misura per l'integrazione htmx, consentendo operazioni sui dati fluide e migliorando l'esperienza lato client con aggiornamenti dinamici delle pagine html senza ricaricare l'intera pagina prerequisiti per completare questo tutorial, avrai bisogno di un account back4app e un nuovo progetto back4app iniziare con back4app https //www back4app com/docs/get started/new parse app se non hai un account, puoi crearne uno gratuitamente segui la guida sopra per preparare il tuo progetto impostazione di base di htmx includi la libreria htmx https //htmx org/ nella tua pagina html utilizzando un ambiente di sviluppo web assicurati di avere un server locale configurato o utilizza framework lato server per servire i tuoi template html familiarità con html, css e javascript documentazione htmx https //htmx org/docs/ per ulteriori dettagli sugli attributi html e lo sviluppo di app web assicurati di avere tutti questi prerequisiti in atto prima di iniziare avere il tuo progetto back4app configurato e il tuo ambiente htmx locale pronto ti aiuterà a seguire più facilmente passo 1 – configurazione del progetto back4app crea un nuovo progetto il primo passo per costruire il tuo backend htmx su back4app è creare un nuovo progetto se non ne hai già creato uno, segui questi passaggi accedi al tuo account back4app clicca sul pulsante “nuova app” nel tuo dashboard di back4app dai un nome alla tua app (ad esempio, “htmx backend tutorial”) una volta creato il progetto, lo vedrai elencato nel tuo dashboard di back4app questo progetto sarà la base per tutte le configurazioni del backend discusse in questo tutorial connect via rest api back4app si basa sulla parse platform per gestire i tuoi dati, fornire funzionalità in tempo reale, gestire l'autenticazione degli utenti e altro ancora sebbene htmx sia una libreria lato client, collegare il tuo front end htmx a back4app comporta effettuare chiamate api rest direttamente dal tuo html e javascript recupera le tue chiavi parse nel tuo dashboard di back4app, vai alla sezione “impostazioni dell'app” o “sicurezza e chiavi” per trovare il tuo id dell'applicazione , chiave api rest , e il url del server parse , (spesso nel formato https //parseapi back4app com ) con queste chiavi, puoi utilizzare htmx per chiamare i tuoi endpoint backend e manipolare i tuoi modelli html di conseguenza ad esempio, potresti utilizzare richieste fetch di javascript combinate con attributi htmx per interagire con i tuoi dati tramite chiamate rest step 2 – setting up the database saving and querying data con il tuo progetto back4app impostato, ora puoi iniziare a salvare e recuperare dati utilizzando chiamate api rest, che puoi attivare da richieste htmx o javascript semplice il modo più semplice per creare un record è effettuare una richiesta post al server parse curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo allo stesso modo, puoi interrogare i dati 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 puoi anche utilizzare le query graphql secondo necessità per interagire con il tuo database dal lato client schema design and data types per impostazione predefinita, parse consente la creazione di schemi al volo , ma puoi anche definire le tue classi e i tuoi tipi di dati nel dashboard di back4app per avere un maggiore controllo naviga alla sezione “database” nel tuo dashboard di back4app crea una nuova classe (ad esempio, “todo”) e aggiungi colonne pertinenti, come titolo (stringa) e iscompleted (booleano) back4app supporta vari tipi di dati come string , number , boolean , object , date , file , pointer, array, relation , geopoint , e polygon usa questi per progettare uno schema robusto per la tua applicazione basata su htmx back4app offre un agente ai che può aiutarti a progettare il tuo modello di dati apri l'agente ai dal tuo cruscotto dell'app o nel menu descrivi il tuo modello di dati in linguaggio semplice (ad esempio, “per favore, crea una nuova app todo su back4app con uno schema di classe completo ”) lascia che l'agente ai crei lo schema per te utilizzare l'agente ai può farti risparmiare tempo nella configurazione della tua architettura dei dati e garantire coerenza nella tua applicazione relational data se hai dati relazionali, come collegare compiti a categorie, puoi usare pointers o relations in parse tramite chiamate api rest ad esempio, aggiungendo un puntatore // 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(); } quando interroghi, includi i dati del puntatore secondo necessità // 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 per aggiornamenti in tempo reale, back4app fornisce live queries mentre htmx si concentra sul rendering lato server e sugli attributi html, integrare aggiornamenti in tempo reale può migliorare significativamente l'esperienza dell'utente abilita le query live nel tuo dashboard di back4app sotto il impostazioni del server assicurati che “query live” sia attivato inizializza un abbonamento a una query live utilizzando javascript insieme ai trigger htmx se necessario (nota le query live richiedono tipicamente il parse sdk; tuttavia, possono comunque funzionare insieme a htmx aggiornando parti della pagina quando i dati cambiano questo esempio dimostra il concetto ) 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; } questa sottoscrizione può quindi attivare richieste htmx o aggiornare i modelli html dinamicamente per riflettere le modifiche sul lato client step 3 – applying security with acls and clps back4app security mechanism back4app prende sul serio la sicurezza fornendo liste di controllo degli accessi (acl) e permessi a livello di classe (clp) queste funzionalità ti consentono di limitare chi può leggere o scrivere dati su base per oggetto o per classe, garantendo che solo gli utenti autorizzati possano modificare i tuoi dati access control lists (acls) un acl è applicato a singoli oggetti per determinare quali utenti, ruoli o il pubblico possono eseguire operazioni di lettura/scrittura ad esempio 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(); } quando salvi l'oggetto, ha un acl che impedisce a chiunque tranne l'utente specificato di leggerlo o modificarlo class level permissions (clps) clps governano le autorizzazioni predefinite di un'intera classe, come se la classe sia leggibile o scrivibile pubblicamente, o se solo determinati ruoli possano accedervi vai al tuo dashboard di back4app , seleziona la tua app e apri la sezione database seleziona una classe (ad esempio, “todo”) apri le autorizzazioni a livello di classe scheda configura le tue impostazioni predefinite, come “richiede autenticazione” per la lettura o la scrittura, o “nessun accesso” per il pubblico queste autorizzazioni impostano la base, mentre le acl affinano le autorizzazioni per singoli oggetti un modello di sicurezza robusto combina tipicamente sia i clp (restrizioni ampie) che le acl (restrizioni dettagliate per oggetto) per ulteriori informazioni vai a linee guida sulla sicurezza delle app https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions il cloud code è una funzionalità dell'ambiente parse server che consente di eseguire codice javascript personalizzato lato server scrivendo il cloud code, puoi estendere il tuo backend back4app con logica aziendale aggiuntiva, validazioni, trigger e integrazioni che vengono eseguiti in modo sicuro ed efficiente sul parse server how it works quando scrivi il cloud code, di solito posizioni le tue funzioni javascript, i trigger e eventuali moduli npm richiesti in un main js file questo file viene quindi distribuito al tuo progetto back4app, che viene eseguito all'interno dell'ambiente del parse server // 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'); } }); distribuisci il tuo cloud code utilizzando il back4app cli o tramite il dashboard calling your function da un'interfaccia potenziata da htmx, puoi chiamare le tue funzioni cloud code utilizzando javascript fetch e aggiornare le parti della tua pagina html di conseguenza ad esempio 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); } puoi integrare chiamate simili all'interno dei tuoi trigger htmx e degli attributi html per creare comportamenti dinamici e reattivi sul lato client, migliorando l'esperienza complessiva dell'utente step 5 – configuring user authentication user authentication in back4app back4app sfrutta la parse user classe come base per l'autenticazione per impostazione predefinita, parse gestisce l'hashing delle password, i token di sessione e lo storage sicuro nel contesto di un'applicazione htmx, l'autenticazione degli utenti può essere gestita tramite chiamate rest avviate da invii di moduli html o richieste fetch di javascript setting up user authentication ad esempio, per creare un nuovo utente 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(); } allo stesso modo, per il login dell'utente 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 dopo un accesso riuscito, parse crea un token di sessione che puoi memorizzare e gestire nella tua applicazione htmx per le successive richieste autenticate social login integration mentre htmx si concentra sugli attributi html e sulle interazioni lato server, l'integrazione di accessi sociali come google o facebook può comunque essere realizzata avviando flussi oauth e gestendo i callback sul lato server fare riferimento a documentazione accesso sociale https //www back4app com/docs/platform/sign in with apple per una guida dettagliata email verification and password reset per abilitare la verifica dell'email e il ripristino della password naviga alle impostazioni email nel tuo dashboard di back4app abilita la verifica dell'email e configura i modelli necessari usa fetch nei tuoi flussi htmx per attivare le richieste di reimpostazione della password secondo necessità step 6 – handling file storage uploading and retrieving files parse include funzionalità di archiviazione file che puoi utilizzare tramite chiamate api rest dalla tua applicazione htmx ad esempio, per caricare un'immagine 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 controlla chi può caricare e accedere ai file configurando le impostazioni di sicurezza in back4app e impostando le acl sugli oggetti file secondo necessità step 7 – scheduling tasks with cloud jobs cloud jobs i lavori cloud in back4app ti permettono di pianificare attività di routine sul tuo backend, come la pulizia dei dati obsoleti o l'invio di email periodiche questi lavori vengono eseguiti lato server e possono essere integrati con il tuo flusso di lavoro htmx quando necessario // 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); } }); pianifica questo lavoro tramite il dashboard di back4app sotto impostazioni app > impostazioni server > lavori in background step 8 – integrating webhooks webhook consentono alla tua app back4app di inviare richieste http a un servizio esterno ogni volta che si verificano determinati eventi questo è potente per l'integrazione con sistemi di terze parti come gateway di pagamento, strumenti di email marketing o piattaforme di analisi naviga alla configurazione dei webhook nel tuo dashboard di back4app > altro > webhooks e clicca su aggiungi webhook imposta un endpoint (ad es , https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configura i trigger per specificare quali eventi nelle tue classi back4app o nelle funzioni cloud code attiveranno il webhook ad esempio, per notificare un canale slack ogni volta che viene creato un nuovo todo crea un'app slack che accetta webhook in entrata copia l'url del webhook di slack nel tuo dashboard di back4app, imposta l'endpoint su quell'url di slack per l'evento “nuovo record nella classe todo ” facoltativamente, aggiungi intestazioni http personalizzate o payload come necessario puoi anche definire webhook nel cloud code effettuando richieste http personalizzate nei trigger step 9 – exploring the back4app admin panel il back4app admin app è un'interfaccia di gestione basata sul web progettata per utenti non tecnici per eseguire operazioni crud e gestire attività di routine sui dati senza scrivere codice fornisce un'interfaccia centrata sul modello, facile da usare, che semplifica l'amministrazione del database, la gestione dei dati personalizzati e le operazioni a livello aziendale enabling the admin app abilita andando su app dashboard > altro > admin app e cliccando sul pulsante “abilita admin app ” crea un primo utente amministratore (nome utente/password), che genera automaticamente un nuovo ruolo (b4aadminuser) e classi (b4asetting, b4amenuitem e b4acustomfield) nello schema della tua app scegli un sottodominio per accedere all'interfaccia di amministrazione e completare la configurazione accedi utilizzando le credenziali di amministratore che hai creato per accedere al tuo nuovo dashboard dell'app admin una volta abilitata, l'app admin di back4app rende facile visualizzare, modificare o rimuovere record dal tuo database senza richiedere l'uso diretto del parse dashboard o del codice backend conclusion seguendo questo tutorial completo su come costruire un backend per htmx utilizzando back4app, hai creato un backend sicuro su misura per le app web htmx configurata un database con schemi di classe, tipi di dati e relazioni query in tempo reale integrate e considerato come le query live possano migliorare l'esperienza dell'utente sul lato client misure di sicurezza applicate utilizzando acl e clp per proteggere e gestire l'accesso ai dati funzioni di cloud code implementate per eseguire logica aziendale personalizzata lato server imposta l'autenticazione degli utenti, l'archiviazione dei file, i lavori programmati su cloud e i webhook integrati esplorato il pannello di amministrazione di back4app per una gestione dei dati efficiente con questo robusto backend, puoi ora sfruttare le capacità di htmx per creare applicazioni web dinamiche e moderne che combinano miglioramenti lato client con potenti framework lato server questo approccio full stack migliora l'esperienza complessiva dell'utente, fornendo aggiornamenti fluidi delle pagine html, rendering efficiente lato server e integrazione senza soluzione di continuità nel tuo stack tecnologico next steps estendi questo backend per incorporare modelli di dati più complessi, motori di template avanzati e logica personalizzata lato server esplora l'integrazione con i framework lato server per creare un'esperienza lato client più dinamica e reattiva controlla la documentazione ufficiale di back4app per approfondimenti su sicurezza avanzata, ottimizzazione delle prestazioni e analisi continua a imparare su htmx e lo sviluppo web moderno per costruire app web reattive e user friendly che combinano il meglio delle tecnologie lato client e lato server una volta creato il progetto, lo vedrai elencato nel tuo dashboard di back4app questo progetto sarà la base per tutte le configurazioni del backend discusse in questo tutorial collegati tramite rest api back4app si basa sulla parse platform per gestire i tuoi dati, fornire funzionalità in tempo reale, gestire l'autenticazione degli utenti e altro ancora sebbene htmx sia una libreria lato client, collegare il tuo front end htmx a back4app implica effettuare chiamate rest api direttamente dal tuo html e javascript recupera le tue chiavi parse nel tuo dashboard di back4app, vai alla sezione “impostazioni app” o “sicurezza e chiavi” della tua app per trovare il tuo id applicazione , chiave rest api , e il url del server parse (spesso nel formato https //parseapi back4app com ) con queste chiavi, puoi utilizzare htmx per chiamare i tuoi endpoint backend e manipolare i tuoi modelli html di conseguenza ad esempio, potresti utilizzare richieste fetch di javascript combinate con attributi htmx per interagire con i tuoi dati tramite chiamate rest passo 2 – configurazione del database salvataggio e query dei dati con il tuo progetto back4app configurato, puoi ora iniziare a salvare e recuperare dati utilizzando chiamate rest api, che puoi attivare da richieste htmx o javascript semplice il modo più semplice per creare un record è effettuare una richiesta post al server parse curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo allo stesso modo, puoi interrogare i dati 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 puoi anche utilizzare query graphql secondo necessità per interagire con il tuo database dal lato client progettazione dello schema e tipi di dati per impostazione predefinita, parse consente la creazione di schemi al volo , ma puoi anche definire le tue classi e tipi di dati nel dashboard di back4app per avere maggiore controllo naviga nella sezione “database” nel tuo dashboard di back4app crea una nuova classe (ad esempio, “todo”) e aggiungi colonne pertinenti, come titolo (string) e iscompleted (boolean) back4app supporta vari tipi di dati come string , number , boolean , object , date , file , pointer, array, relation , geopoint , e polygon usa questi per progettare uno schema robusto per la tua applicazione basata su htmx back4app offre un agente ai che può aiutarti a progettare il tuo modello di dati apri l'agente ai dal tuo dashboard app o dal menu descrivi il tuo modello di dati in linguaggio semplice (ad esempio, “per favore, crea una nuova app todo su back4app con uno schema di classe completo ”) lascia che l'agente ai crei lo schema per te utilizzare l'agente ai può farti risparmiare tempo nella configurazione della tua architettura dati e garantire coerenza nella tua applicazione dati relazionali se hai dati relazionali, come collegare compiti a categorie, puoi utilizzare pointers o relations in parse tramite chiamate api rest ad esempio, aggiungere un puntatore // 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(); } quando interroghi, includi i dati del puntatore secondo necessità // 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(); } interrogazioni in tempo reale per aggiornamenti in tempo reale, back4app fornisce interrogazioni in tempo reale mentre htmx si concentra sul rendering lato server e sugli attributi html, integrare aggiornamenti dal vivo può migliorare significativamente l'esperienza dell'utente abilita le interrogazioni in tempo reale nel tuo dashboard di back4app sotto le impostazioni del server assicurati che “interrogazioni in tempo reale” sia attivato inizializza un abbonamento a interrogazioni in tempo reale utilizzando javascript insieme ai trigger htmx se necessario (nota le interrogazioni in tempo reale richiedono tipicamente il parse sdk; tuttavia, possono comunque funzionare insieme a htmx aggiornando parti della pagina quando i dati cambiano questo esempio dimostra il concetto ) 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; } questa sottoscrizione può quindi attivare richieste htmx o aggiornare dinamicamente i modelli html per riflettere le modifiche sul lato client passo 3 – applicare la sicurezza con acl e clp meccanismo di sicurezza di back4app back4app prende sul serio la sicurezza fornendo liste di controllo degli accessi (acl) e permessi a livello di classe (clp) queste funzionalità ti consentono di limitare chi può leggere o scrivere dati su base per oggetto o per classe, garantendo che solo gli utenti autorizzati possano modificare i tuoi dati liste di controllo degli accessi (acl) un acl è applicato a singoli oggetti per determinare quali utenti, ruoli o il pubblico possono eseguire operazioni di lettura/scrittura ad esempio 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(); } quando salvi l'oggetto, ha un acl che impedisce a chiunque tranne l'utente specificato di leggerlo o modificarlo permessi a livello di classe (clp) i clp governano i permessi predefiniti di un'intera classe, come se la classe sia leggibile o scrivibile pubblicamente, o se solo determinati ruoli possano accedervi vai al tuo dashboard di back4app , seleziona la tua app e apri la sezione database seleziona una classe (ad esempio, “todo”) apri la scheda dei permessi a livello di classe configura i tuoi predefiniti, come “richiede autenticazione” per la lettura o la scrittura, o “nessun accesso” per il pubblico questi permessi impostano la base, mentre gli acl affinano i permessi per oggetti individuali un modello di sicurezza robusto combina tipicamente sia i clp (restrizioni ampie) che gli acl (restrizioni dettagliate per oggetto) per ulteriori informazioni vai a linee guida sulla sicurezza dell'app https //www back4app com/docs/security/parse security passo 4 – scrivere e distribuire funzioni cloud il cloud code è una funzionalità dell'ambiente parse server che ti consente di eseguire codice javascript personalizzato sul lato server scrivendo il cloud code, puoi estendere il tuo backend back4app con logica aziendale aggiuntiva, validazioni, trigger e integrazioni che vengono eseguite in modo sicuro ed efficiente sul parse server come funziona quando scrivi il cloud code, di solito posizioni le tue funzioni javascript, i trigger e eventuali moduli npm richiesti in un main js file questo file viene quindi distribuito al tuo progetto back4app, che viene eseguito all'interno dell'ambiente del parse server // 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'); } }); distribuisci il tuo cloud code utilizzando il back4app cli o tramite il dashboard chiamare la tua funzione da un'interfaccia migliorata con htmx, puoi chiamare le tue funzioni cloud code utilizzando fetch di javascript e aggiornare le parti della tua pagina html di conseguenza ad esempio 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); } puoi integrare chiamate simili all'interno dei tuoi trigger htmx e degli attributi html per creare comportamenti dinamici e reattivi sul lato client, migliorando l'esperienza complessiva dell'utente passo 5 – configurazione dell'autenticazione utente autenticazione utente in back4app back4app sfrutta la parse user classe come base per l'autenticazione per impostazione predefinita, parse gestisce l'hashing delle password, i token di sessione e lo storage sicuro nel contesto di un'applicazione htmx, l'autenticazione utente può essere gestita tramite chiamate rest avviate da invii di moduli html o richieste fetch di javascript impostare l'autenticazione utente ad esempio, per creare un nuovo utente 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(); } allo stesso modo, per il login dell'utente 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(); } gestione delle sessioni dopo un login riuscito, parse crea un token di sessione che puoi memorizzare e gestire nella tua applicazione htmx per richieste autenticate successive integrazione del login sociale mentre htmx si concentra sugli attributi html e sulle interazioni lato server, integrare login sociali come google o facebook può comunque essere realizzato avviando flussi oauth e gestendo i callback sul lato server fare riferimento a documentazione sul login sociale https //www back4app com/docs/platform/sign in with apple per indicazioni dettagliate verifica dell'email e reimpostazione della password per abilitare la verifica dell'email e il ripristino della password naviga alle impostazioni email nel tuo dashboard di back4app abilita la verifica dell'email e configura i modelli necessari usa fetch nei tuoi flussi htmx per attivare le richieste di ripristino della password secondo necessità passo 6 – gestione dello storage dei file caricamento e recupero dei file parse include capacità di storage dei file che puoi utilizzare tramite chiamate api rest dalla tua applicazione htmx ad esempio, per caricare un'immagine 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(); } sicurezza dei file controlla chi può caricare e accedere ai file configurando le impostazioni di sicurezza in back4app e impostando gli acl sugli oggetti file secondo necessità passo 7 – pianificazione dei compiti con cloud jobs cloud jobs i cloud jobs in back4app ti permettono di pianificare compiti di routine sul tuo backend, come la pulizia dei dati obsoleti o l'invio di email periodiche questi lavori vengono eseguiti lato server e possono essere integrati con il tuo flusso di lavoro htmx quando necessario // 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); } }); pianifica questo lavoro tramite il dashboard di back4app sotto impostazioni app > impostazioni server > lavori in background passo 8 – integrazione dei webhook webhooks consentono alla tua app back4app di inviare richieste http a un servizio esterno ogni volta che si verificano determinati eventi questo è potente per l'integrazione con sistemi di terze parti come gateway di pagamento, strumenti di email marketing o piattaforme di analisi naviga nella configurazione dei webhooks nel tuo dashboard di back4app > altro > webhooks e clicca su aggiungi webhook imposta un endpoint (ad esempio, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configura i trigger per specificare quali eventi nelle tue classi back4app o nelle funzioni cloud code attiveranno il webhook ad esempio, per notificare un canale slack ogni volta che viene creato un nuovo todo crea un'app slack che accetta webhook in entrata copia l'url del webhook di slack nel tuo dashboard di back4app, imposta l'endpoint su quell'url di slack per l'evento “nuovo record nella classe todo ” facoltativamente, aggiungi intestazioni http personalizzate o payload come necessario puoi anche definire webhooks nel cloud code effettuando richieste http personalizzate nei trigger passo 9 – esplorare il pannello di amministrazione di back4app l' app di amministrazione di back4app è un'interfaccia di gestione basata sul web progettata per utenti non tecnici per eseguire operazioni crud e gestire attività di routine sui dati senza scrivere codice fornisce un'interfaccia centrata sul modello e facile da usare che semplifica l'amministrazione del database, la gestione dei dati personalizzati e le operazioni a livello aziendale abilitare l'app admin abilita andando su app dashboard > altro > app admin e cliccando sul pulsante “abilita app admin” crea un primo utente admin (nome utente/password), che genera automaticamente un nuovo ruolo (b4aadminuser) e classi (b4asetting, b4amenuitem e b4acustomfield) nello schema della tua app scegli un sottodominio per accedere all'interfaccia admin e completare la configurazione accedi utilizzando le credenziali admin che hai creato per accedere al tuo nuovo dashboard dell'app admin una volta abilitata, l'app admin di back4app rende facile visualizzare, modificare o rimuovere record dal tuo database senza richiedere l'uso diretto del parse dashboard o del codice backend conclusione seguendo questo tutorial completo su come costruire un backend per htmx utilizzando back4app, hai creato un backend sicuro su misura per le app web htmx configurato un database con schemi di classe, tipi di dati e relazioni integrato query in tempo reale e considerato come le live queries possano migliorare l'esperienza utente sul lato client applicato misure di sicurezza utilizzando acl e clp per proteggere e gestire l'accesso ai dati implementato funzioni di cloud code per eseguire logica aziendale personalizzata sul lato server impostato l'autenticazione degli utenti, l'archiviazione dei file, i cloud jobs programmati e integrato i webhook esplorato il pannello di amministrazione di back4app per una gestione efficiente dei dati con questo robusto backend, puoi ora sfruttare le capacità di htmx per creare applicazioni web dinamiche e moderne che combinano miglioramenti sul lato client con potenti framework sul lato server questo approccio full stack migliora l'esperienza utente complessiva, fornendo aggiornamenti delle pagine html fluidi, rendering efficiente sul lato server e integrazione senza soluzione di continuità attraverso il tuo stack tecnologico prossimi passi estendi questo backend per incorporare modelli di dati più complessi, motori di template avanzati e logica personalizzata sul lato server esplora l'integrazione con framework sul lato server per creare un'esperienza più dinamica e reattiva sul lato client controlla la documentazione ufficiale di back4app per approfondimenti su sicurezza avanzata, ottimizzazione delle prestazioni e analisi continua a imparare su htmx e lo sviluppo web moderno per costruire app web user friendly e reattive che combinano il meglio delle tecnologie sul lato client e server