How to Build a Backend for htmx?

introducción en este tutorial, aprenderás a construir un backend completo para aplicaciones web htmx utilizando back4app recorreremos la integración de características esenciales de back4app como la gestión de bases de datos, funciones de cloud code, apis rest y graphql, autenticación de usuarios, almacenamiento de archivos y consultas en tiempo real (live queries) para crear un backend seguro, escalable y robusto que se comunique sin problemas con tu frontend htmx usar htmx, una moderna biblioteca de javascript que aprovecha los atributos html para manejar interacciones del lado del cliente, puede mejorar drásticamente la experiencia del usuario mientras se enfoca en el renderizado del lado del servidor al combinar htmx con los poderosos frameworks del lado del servidor y motores de plantillas de back4app, los desarrolladores pueden crear aplicaciones web de pila completa con facilidad y eficiencia al final de este tutorial, habrás construido un backend adaptado para la integración de htmx, permitiendo operaciones de datos fluidas y mejorando la experiencia del lado del cliente con actualizaciones dinámicas de páginas html sin recargas completas requisitos previos para completar este tutorial, necesitarás una cuenta de back4app y un nuevo proyecto de back4app comenzando con back4app https //www back4app com/docs/get started/new parse app si no tienes una cuenta, puedes crear una gratis sigue la guía anterior para preparar tu proyecto configuración básica de htmx incluye la biblioteca htmx https //htmx org/ en tu página html usando un entorno de desarrollo web asegúrate de tener un servidor local configurado o utiliza frameworks del lado del servidor para servir tus plantillas html familiaridad con html, css y javascript documentación de htmx https //htmx org/docs/ para más detalles sobre atributos html y desarrollo de aplicaciones web asegúrate de tener todos estos requisitos previos en su lugar antes de comenzar tener tu proyecto de back4app configurado y tu entorno local de htmx listo te ayudará a seguir más fácilmente paso 1 – configuración del proyecto de back4app crear un nuevo proyecto el primer paso para construir tu backend de htmx en back4app es crear un nuevo proyecto si aún no has creado uno, sigue estos pasos inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” en tu panel de control de back4app dale un nombre a tu app (por ejemplo, “htmx backend tutorial”) una vez que se crea el proyecto, lo verás listado en tu panel de control de back4app este proyecto será la base para todas las configuraciones de backend discutidas en este tutorial connect via rest api back4app se basa en la plataforma parse para gestionar tus datos, proporcionar características en tiempo real, manejar la autenticación de usuarios y más aunque htmx en sí es una biblioteca del lado del cliente, conectar tu front end de htmx a back4app implica hacer llamadas a la api rest directamente desde tu html y javascript recupera tus claves de parse en tu panel de back4app, navega a la sección “configuración de la aplicación” o “seguridad y claves” de tu aplicación para encontrar tu id de aplicación , clave de api rest , y la url del servidor de parse (a menudo en el formato https //parseapi back4app com ) con estas claves, puedes usar htmx para llamar a tus puntos finales de backend y manipular tus plantillas html en consecuencia por ejemplo, podrías usar solicitudes fetch de javascript combinadas con atributos htmx para interactuar con tus datos a través de llamadas rest step 2 – setting up the database saving and querying data con tu proyecto de back4app configurado, ahora puedes comenzar a guardar y recuperar datos utilizando llamadas a la api rest, que puedes activar desde solicitudes htmx o javascript puro la forma más sencilla de crear un registro es hacer una solicitud post al servidor parse curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo de manera similar, puedes consultar datos 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 también puedes usar consultas graphql según sea necesario para interactuar con tu base de datos desde el lado del cliente schema design and data types por defecto, parse permite la creación de esquemas sobre la marcha , pero también puedes definir tus clases y tipos de datos en el panel de control de back4app para tener más control navega a la sección “base de datos” en tu panel de control de back4app crea una nueva clase (por ejemplo, “todo”) y añade columnas relevantes, como título (string) y iscompleted (boolean) back4app admite varios tipos de datos como string , number , boolean , object , date , file , pointer, array, relation , geopoint , y polygon utiliza estos para diseñar un esquema robusto para tu aplicación impulsada por htmx back4app ofrece un agente de ia que puede ayudarte a diseñar tu modelo de datos abre el agente de ia desde tu panel de aplicaciones o en el menú describe tu modelo de datos en un lenguaje simple (por ejemplo, “por favor, crea una nueva aplicación todo en back4app con un esquema de clase completo ”) deja que el agente de ia cree el esquema por ti usar el agente de ia puede ahorrarte tiempo al configurar tu arquitectura de datos y garantizar la consistencia en tu aplicación relational data si tienes datos relacionales, como vincular tareas a categorías, puedes usar punteros o relaciones en parse a través de llamadas a la api rest por ejemplo, agregar un puntero // 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(); } cuando consultes, incluye los datos del puntero según sea necesario // 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 para actualizaciones en tiempo real, back4app proporciona consultas en vivo mientras que htmx se centra en la renderización del lado del servidor y los atributos html, integrar actualizaciones en vivo puede mejorar significativamente la experiencia del usuario habilitar consultas en vivo en el panel de control de back4app bajo la configuración de tu configuración del servidor asegúrate de que “consultas en vivo” esté activado inicializar una suscripción de consulta en vivo utilizando javascript junto con los disparadores de htmx si es necesario (nota las consultas en vivo generalmente requieren el sdk de parse; sin embargo, aún pueden funcionar junto con htmx actualizando partes de la página cuando los datos cambian este ejemplo demuestra el concepto ) 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; } esta suscripción puede activar solicitudes htmx o actualizar plantillas html dinámicamente para reflejar cambios en el lado del cliente step 3 – applying security with acls and clps back4app security mechanism back4app se toma la seguridad en serio al proporcionar listas de control de acceso (acls) y permisos a nivel de clase (clps) estas características te permiten restringir quién puede leer o escribir datos a nivel de objeto o de clase, asegurando que solo los usuarios autorizados puedan modificar tus datos access control lists (acls) un acl se aplica a objetos individuales para determinar qué usuarios, roles o el público pueden realizar operaciones de lectura/escritura por ejemplo 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(); } cuando guardas el objeto, tiene un acl que impide que cualquier persona que no sea el usuario especificado lo lea o lo modifique class level permissions (clps) clps gobiernan los permisos predeterminados de toda una clase, como si la clase es legible o escribible públicamente, o si solo ciertos roles pueden acceder a ella ve a tu panel de control de back4app , selecciona tu aplicación y abre la sección de base de datos selecciona una clase (por ejemplo, “todo”) abre los permisos a nivel de clase pestaña configura tus valores predeterminados, como “requiere autenticación” para leer o escribir, o “sin acceso” para el público estos permisos establecen la línea base, mientras que las acls ajustan los permisos para objetos individuales un modelo de seguridad robusto típicamente combina tanto clps (restricciones amplias) como acls (restricciones específicas por objeto) para más información, visita directrices de seguridad de la aplicación https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions el cloud code es una característica del entorno de parse server que te permite ejecutar código javascript personalizado en el lado del servidor al escribir cloud code, puedes extender tu backend de back4app con lógica de negocio adicional, validaciones, disparadores e integraciones que se ejecutan de manera segura y eficiente en el parse server how it works cuando escribes cloud code, normalmente colocas tus funciones de javascript, disparadores y cualquier módulo npm requerido en un main js archivo este archivo se despliega en tu proyecto de back4app, que se ejecuta dentro del entorno de 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'); } }); despliega tu cloud code utilizando el cli de back4app o a través del dashboard calling your function desde una interfaz mejorada con htmx, puedes llamar a tus funciones de cloud code usando fetch de javascript y actualizar partes de tu página html en consecuencia por ejemplo 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); } puedes integrar llamadas similares dentro de tus disparadores htmx y atributos html para crear comportamientos dinámicos y responsivos en el lado del cliente, mejorando la experiencia general del usuario step 5 – configuring user authentication user authentication in back4app back4app aprovecha la parse user clase como base para la autenticación por defecto, parse maneja el hash de contraseñas, los tokens de sesión y el almacenamiento seguro en el contexto de una aplicación htmx, la autenticación de usuarios se puede gestionar a través de llamadas rest iniciadas por envíos de formularios html o solicitudes fetch de javascript setting up user authentication por ejemplo, para crear un nuevo usuario async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } de manera similar, para el inicio de sesión del usuario 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 después de un inicio de sesión exitoso, parse crea un token de sesión que puedes almacenar y gestionar en tu aplicación htmx para solicitudes autenticadas posteriores social login integration mientras htmx se centra en los atributos html y las interacciones del lado del servidor, integrar inicios de sesión sociales como google o facebook aún se puede lograr iniciando flujos de oauth y manejando callbacks en el lado del servidor consulta documentación de inicio de sesión social https //www back4app com/docs/platform/sign in with apple para obtener orientación detallada email verification and password reset para habilitar la verificación de correo electrónico y el restablecimiento de contraseña navega a la configuración de correo electrónico en tu panel de control de back4app habilitar la verificación de correo electrónico y configurar las plantillas necesarias utiliza fetch en tus flujos htmx para activar solicitudes de restablecimiento de contraseña según sea necesario step 6 – handling file storage uploading and retrieving files parse incluye capacidades de almacenamiento de archivos que puedes utilizar a través de llamadas a la api rest desde tu aplicación htmx por ejemplo, para subir una imagen 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 controla quién puede subir y acceder a archivos configurando la configuración de seguridad en back4app y estableciendo acls en los objetos de archivo según sea necesario step 7 – scheduling tasks with cloud jobs cloud jobs los trabajos en la nube en back4app te permiten programar tareas rutinarias en tu backend, como limpiar datos antiguos o enviar correos electrónicos periódicos estos trabajos se ejecutan del lado del servidor y se pueden integrar con tu flujo de trabajo htmx cuando sea necesario // 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); } }); programa este trabajo a través del panel de control de back4app en configuración de la aplicación > configuración del servidor > trabajos en segundo plano step 8 – integrating webhooks webhooks permiten que tu aplicación de back4app envíe solicitudes http a un servicio externo cada vez que ocurren ciertos eventos esto es poderoso para integrarse con sistemas de terceros como pasarelas de pago, herramientas de marketing por correo electrónico o plataformas de análisis navega a la configuración de webhooks en tu panel de back4app > más > webhooks y haz clic en agregar webhook configura un punto final (por ejemplo, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configurar disparadores para especificar qué eventos en tus clases de back4app o funciones de cloud code activarán el webhook por ejemplo, para notificar a un canal de slack cada vez que se crea un nuevo todo crea una aplicación de slack que acepte webhooks entrantes copia la url del webhook de slack en tu panel de back4app, establece el endpoint a esa url de slack para el evento “nuevo registro en la clase todo ” opcionalmente, agrega encabezados http personalizados o cargas útiles según sea necesario también puedes definir webhooks en cloud code haciendo solicitudes http personalizadas en los disparadores step 9 – exploring the back4app admin panel el back4app admin app es una interfaz de gestión basada en la web diseñada para usuarios no técnicos para realizar operaciones crud y manejar tareas rutinarias de datos sin escribir ningún código proporciona una interfaz centrada en el modelo, fácil de usar, que simplifica la administración de bases de datos, la gestión de datos personalizados y las operaciones a nivel empresarial enabling the admin app habilitar yendo a panel de la aplicación > más > aplicación de administración y haciendo clic en el botón “habilitar aplicación de administración” crear un primer usuario administrador (nombre de usuario/contraseña), que genera automáticamente un nuevo rol (b4aadminuser) y clases (b4asetting, b4amenuitem y b4acustomfield) en el esquema de tu aplicación elige un subdominio para acceder a la interfaz de administración y completar la configuración iniciar sesión utilizando las credenciales de administrador que creaste para acceder a tu nuevo panel de control de la aplicación de administrador una vez habilitada, la aplicación de administración de back4app facilita la visualización, edición o eliminación de registros de tu base de datos, sin requerir el uso directo del panel de control de parse o código de backend conclusion al seguir este tutorial completo sobre cómo construir un backend para htmx utilizando back4app, tienes creé un backend seguro adaptado para aplicaciones web htmx configuré una base de datos con esquemas de clase, tipos de datos y relaciones consultas en tiempo real integradas y se consideró cómo las consultas en vivo pueden mejorar la experiencia del usuario en el lado del cliente se aplicaron medidas de seguridad utilizando acls y clps para proteger y gestionar el acceso a los datos se implementaron funciones de cloud code para ejecutar lógica de negocio personalizada en el lado del servidor configurar la autenticación de usuarios, el almacenamiento de archivos, trabajos programados en la nube y webhooks integrados exploré el panel de administración de back4app para una gestión de datos eficiente con este robusto backend, ahora puedes aprovechar las capacidades de htmx para crear aplicaciones web dinámicas y modernas que combinan mejoras del lado del cliente con potentes frameworks del lado del servidor este enfoque de pila completa mejora la experiencia general del usuario, proporcionando actualizaciones suaves de páginas html, renderizado eficiente del lado del servidor y una integración fluida en toda tu pila tecnológica next steps amplía este backend para incorporar modelos de datos más complejos, motores de plantillas avanzados y lógica personalizada del lado del servidor explorar la integración con frameworks del lado del servidor para crear una experiencia del lado del cliente más dinámica y receptiva consulta la documentación oficial de back4app para profundizar en seguridad avanzada, ajuste de rendimiento y análisis continúa aprendiendo sobre htmx y el desarrollo web moderno para construir aplicaciones web amigables y responsivas que combinen lo mejor de las tecnologías del lado del cliente y del lado del servidor una vez que se crea el proyecto, lo verás listado en tu panel de control de back4app este proyecto será la base para todas las configuraciones de backend discutidas en este tutorial conectar a través de la api rest back4app se basa en la plataforma parse para gestionar tus datos, proporcionar características en tiempo real, manejar la autenticación de usuarios y más mientras que htmx es una biblioteca del lado del cliente, conectar tu frontend de htmx a back4app implica hacer llamadas a la api rest directamente desde tu html y javascript recupera tus claves de parse en tu panel de back4app, navega a la sección “configuración de la aplicación” o “seguridad y claves” de tu aplicación para encontrar tu id de aplicación , clave de api rest , y la url del servidor parse (a menudo en el formato https //parseapi back4app com ) con estas claves, puedes usar htmx para llamar a tus puntos finales de backend y manipular tus plantillas html en consecuencia por ejemplo, podrías usar solicitudes fetch de javascript combinadas con atributos de htmx para interactuar con tus datos a través de llamadas rest paso 2 – configuración de la base de datos guardar y consultar datos con tu proyecto de back4app configurado, ahora puedes comenzar a guardar y recuperar datos utilizando llamadas a la api rest, que puedes activar desde solicitudes htmx o javascript puro la forma más sencilla de crear un registro es hacer una solicitud post al servidor parse curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo de manera similar, puedes consultar datos 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 también puedes usar consultas graphql según sea necesario para interactuar con tu base de datos desde el lado del cliente diseño de esquema y tipos de datos por defecto, parse permite la creación de esquemas sobre la marcha , pero también puedes definir tus clases y tipos de datos en el panel de back4app para tener más control navega a la sección “base de datos” en tu panel de back4app crea una nueva clase (por ejemplo, “todo”) y agrega columnas relevantes, como título (string) y estácompletado (boolean) back4app admite varios tipos de datos como string , number , boolean , object , date , file , pointer, array, relation , geopoint , y polygon utiliza estos para diseñar un esquema robusto para tu aplicación impulsada por htmx back4app ofrece un agente de ia que puede ayudarte a diseñar tu modelo de datos abre el agente de ia desde tu panel de control de la app o en el menú describe tu modelo de datos en un lenguaje simple (por ejemplo, “por favor, crea una nueva aplicación todo en back4app con un esquema de clase completo ”) deja que el agente de ia cree el esquema por ti usar el agente de ia puede ahorrarte tiempo al configurar tu arquitectura de datos y asegurar la consistencia en tu aplicación datos relacionales si tienes datos relacionales, como vincular tareas a categorías, puedes usar pointers o relations en parse a través de llamadas a la api rest por ejemplo, añadiendo un puntero // 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(); } cuando consultes, incluye datos de puntero según sea necesario // 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(); } consultas en vivo para actualizaciones en tiempo real, back4app proporciona consultas en vivo mientras htmx se centra en la renderización del lado del servidor y atributos html, integrar actualizaciones en vivo puede mejorar significativamente la experiencia del usuario habilitar consultas en vivo en tu panel de back4app bajo la configuración del servidor asegúrate de que “consultas en vivo” esté activado inicializar una suscripción a consultas en vivo usando javascript junto con disparadores de htmx si es necesario (nota las consultas en vivo generalmente requieren el sdk de parse; sin embargo, aún pueden funcionar junto con htmx actualizando partes de la página cuando los datos cambian este ejemplo demuestra el concepto ) 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; } esta suscripción puede luego activar solicitudes htmx o actualizar plantillas html dinámicamente para reflejar cambios en el lado del cliente paso 3 – aplicando seguridad con acls y clps mecanismo de seguridad de back4app back4app toma la seguridad en serio al proporcionar listas de control de acceso (acls) y permisos a nivel de clase (clps) estas características te permiten restringir quién puede leer o escribir datos a nivel de objeto o de clase, asegurando que solo los usuarios autorizados puedan modificar tus datos listas de control de acceso (acls) una acl se aplica a objetos individuales para determinar qué usuarios, roles o el público pueden realizar operaciones de lectura/escritura por ejemplo 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(); } cuando guardas el objeto, tiene un acl que impide que cualquier persona, excepto el usuario especificado, lo lea o lo modifique permisos a nivel de clase (clps) los clps rigen los permisos predeterminados de toda una clase, como si la clase es legible o escribible públicamente, o si solo ciertos roles pueden acceder a ella ve a tu panel de control de back4app , selecciona tu aplicación y abre la base de datos sección selecciona una clase (por ejemplo, “todo”) abre la pestaña de permisos a nivel de clase configura tus predeterminados, como “requiere autenticación” para leer o escribir, o “sin acceso” para el público estos permisos establecen la línea base, mientras que los acls ajustan los permisos para objetos individuales un modelo de seguridad robusto combina típicamente tanto clps (restricciones amplias) como acls (restricciones detalladas por objeto) para más información, ve a directrices de seguridad de la aplicación https //www back4app com/docs/security/parse security paso 4 – escribir y desplegar funciones en la nube el código en la nube es una característica del entorno de parse server que te permite ejecutar código javascript personalizado en el lado del servidor al escribir cloud code, puedes extender tu backend de back4app con lógica de negocio adicional, validaciones, disparadores e integraciones que se ejecutan de manera segura y eficiente en el parse server cómo funciona cuando escribes cloud code, normalmente colocas tus funciones de javascript, disparadores y cualquier módulo npm requerido en un main js archivo este archivo se despliega en tu proyecto de back4app, que se ejecuta dentro del entorno 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'); } }); despliega tu cloud code utilizando el cli de back4app o a través del dashboard llamando a tu función desde una interfaz mejorada con htmx, puedes llamar a tus funciones de cloud code utilizando fetch de javascript y actualizar partes de tu página html en consecuencia por ejemplo 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); } puedes integrar llamadas similares dentro de tus disparadores htmx y atributos html para crear comportamientos dinámicos y responsivos en el lado del cliente, mejorando la experiencia general del usuario paso 5 – configurando la autenticación de usuarios autenticación de usuarios en back4app back4app aprovecha la clase parse user como base para la autenticación por defecto, parse maneja el hash de contraseñas, tokens de sesión y almacenamiento seguro en el contexto de una aplicación htmx, la autenticación de usuarios puede ser gestionada a través de llamadas rest iniciadas por envíos de formularios html o solicitudes fetch de javascript configurando la autenticación de usuarios por ejemplo, para crear un nuevo usuario async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } de manera similar, para el inicio de sesión del usuario 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(); } gestión de sesiones después de un inicio de sesión exitoso, parse crea un token de sesión que puedes almacenar y gestionar en tu aplicación htmx para solicitudes autenticadas posteriores integración de inicio de sesión social mientras htmx se centra en los atributos html y las interacciones del lado del servidor, integrar inicios de sesión sociales como google o facebook aún se puede lograr iniciando flujos de oauth y manejando callbacks en el lado del servidor consulta documentación de inicio de sesión social https //www back4app com/docs/platform/sign in with apple para obtener orientación detallada verificación de correo electrónico y restablecimiento de contraseña para habilitar la verificación de correo electrónico y el restablecimiento de contraseña navega a la configuración de correo electrónico en tu panel de back4app habilita la verificación de correo electrónico y configura las plantillas necesarias usa fetch en tus flujos htmx para activar solicitudes de restablecimiento de contraseña según sea necesario paso 6 – manejo del almacenamiento de archivos subiendo y recuperando archivos parse incluye capacidades de almacenamiento de archivos que puedes utilizar a través de llamadas a la api rest desde tu aplicación htmx por ejemplo, para subir una imagen 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(); } seguridad de archivos controla quién puede subir y acceder a archivos configurando la configuración de seguridad en back4app y estableciendo acls en los objetos de archivo según sea necesario paso 7 – programación de tareas con cloud jobs cloud jobs los cloud jobs en back4app te permiten programar tareas rutinarias en tu backend, como limpiar datos antiguos o enviar correos electrónicos periódicos estos trabajos se ejecutan del lado del servidor y se pueden integrar con tu flujo de trabajo htmx cuando sea necesario // 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); } }); programa este trabajo a través del panel de control de back4app en configuración de la aplicación > configuración del servidor > trabajos en segundo plano paso 8 – integración de webhooks webhooks permiten que tu aplicación back4app envíe solicitudes http a un servicio externo cada vez que ocurren ciertos eventos esto es poderoso para integrarse con sistemas de terceros como pasarelas de pago, herramientas de marketing por correo electrónico o plataformas de análisis navega a la configuración de webhooks en tu panel de back4app > más > webhooks y haz clic en agregar webhook configura un endpoint (por ejemplo, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configura los triggers para especificar qué eventos en tus clases de back4app o funciones de cloud code activarán el webhook por ejemplo, para notificar a un canal de slack cada vez que se crea un nuevo todo crea una aplicación de slack que acepte webhooks entrantes copia la url del webhook de slack en tu panel de back4app, establece el endpoint a esa url de slack para el evento “nuevo registro en la clase todo ” opcionalmente, agrega encabezados http personalizados o cargas útiles según sea necesario también puedes definir webhooks en cloud code haciendo solicitudes http personalizadas en los triggers paso 9 – explorando el panel de administración de back4app la aplicación de administración de back4app es una interfaz de gestión basada en la web diseñada para usuarios no técnicos para realizar operaciones crud y manejar tareas rutinarias de datos sin escribir ningún código proporciona una interfaz centrada en el modelo y fácil de usar que simplifica la administración de bases de datos, la gestión de datos personalizados y las operaciones a nivel empresarial habilitando la aplicación de administración habilitar yendo a app dashboard > más > aplicación de administración y haciendo clic en el botón “habilitar aplicación de administración” crea un primer usuario administrador (nombre de usuario/contraseña), que genera automáticamente un nuevo rol (b4aadminuser) y clases (b4asetting, b4amenuitem y b4acustomfield) en el esquema de tu aplicación elige un subdominio para acceder a la interfaz de administración y completa la configuración iniciar sesión utilizando las credenciales de administrador que creaste para acceder a tu nuevo panel de control de la aplicación de administración una vez habilitada, la aplicación de administración de back4app facilita la visualización, edición o eliminación de registros de tu base de datos, sin requerir el uso directo del panel de control de parse o código de backend conclusión al seguir este tutorial completo sobre cómo construir un backend para htmx utilizando back4app, has creado un backend seguro adaptado para aplicaciones web htmx configurado una base de datos con esquemas de clase, tipos de datos y relaciones integrado consultas en tiempo real y considerado cómo las consultas en vivo pueden mejorar la experiencia del usuario en el lado del cliente aplicado medidas de seguridad utilizando acls y clps para proteger y gestionar el acceso a los datos implementado funciones de cloud code para ejecutar lógica de negocio personalizada en el lado del servidor configurado la autenticación de usuarios, almacenamiento de archivos, trabajos programados en la nube e integrado webhooks explorado el panel de administración de back4app para una gestión eficiente de datos con este robusto backend, ahora puedes aprovechar las capacidades de htmx para crear aplicaciones web dinámicas y modernas que combinan mejoras del lado del cliente con potentes frameworks del lado del servidor este enfoque de pila completa mejora la experiencia general del usuario, proporcionando actualizaciones suaves de páginas html, renderizado eficiente del lado del servidor e integración fluida en tu pila tecnológica próximos pasos extender este backend para incorporar modelos de datos más complejos, motores de plantillas avanzados y lógica personalizada del lado del servidor explorar la integración con frameworks del lado del servidor para crear una experiencia del lado del cliente más dinámica y receptiva consultar la documentación oficial de back4app para profundizar en seguridad avanzada, optimización de rendimiento y análisis seguir aprendiendo sobre htmx y desarrollo web moderno para construir aplicaciones web amigables y receptivas que combinen lo mejor de las tecnologías del lado del cliente y del servidor