How to Build a Backend for htmx?

introdução neste tutorial, você aprenderá como construir um backend completo para aplicativos web htmx usando o back4app vamos passar pela integração de recursos essenciais do back4app como gerenciamento de banco de dados, funções de código em nuvem, apis rest e graphql, autenticação de usuários, armazenamento de arquivos e consultas em tempo real (consultas ao vivo) para criar um backend seguro, escalável e robusto que se comunica perfeitamente com seu front end htmx usar htmx, uma biblioteca javascript moderna que aproveita atributos html para lidar com interações do lado do cliente, pode melhorar drasticamente a experiência do usuário enquanto se concentra na renderização do lado do servidor ao combinar htmx com os poderosos frameworks e motores de template do back4app, os desenvolvedores podem criar aplicativos web full stack com facilidade e eficiência ao final deste tutorial, você terá construído um backend adaptado para a integração com htmx, permitindo operações de dados suaves e melhorando a experiência do lado do cliente com atualizações dinâmicas de páginas html sem recarregamentos completos pré requisitos para completar este tutorial, você precisará uma conta no back4app e um novo projeto no back4app começando com o back4app https //www back4app com/docs/get started/new parse app se você não tiver uma conta, pode criar uma gratuitamente siga o guia acima para preparar seu projeto configuração básica do htmx inclua a biblioteca htmx https //htmx org/ na sua página html usando um ambiente de desenvolvimento web certifique se de ter um servidor local configurado ou use frameworks do lado do servidor para servir seus templates html familiaridade com html, css e javascript documentação do htmx https //htmx org/docs/ para mais detalhes sobre atributos html e desenvolvimento de aplicativos web certifique se de ter todos esses pré requisitos em vigor antes de começar ter seu projeto back4app configurado e seu ambiente local htmx pronto ajudará você a acompanhar mais facilmente passo 1 – configurando o projeto back4app criar um novo projeto o primeiro passo para construir seu backend htmx no back4app é criar um novo projeto se você ainda não criou um, siga estas etapas faça login na sua conta back4app clique no botão “novo app” no seu painel do back4app dê um nome ao seu app (por exemplo, “htmx backend tutorial”) uma vez que o projeto é criado, você o verá listado no seu painel do back4app este projeto será a base para todas as configurações de backend discutidas neste tutorial connect via rest api back4app depende da parse platform para gerenciar seus dados, fornecer recursos em tempo real, lidar com autenticação de usuários e mais embora o htmx em si seja uma biblioteca do lado do cliente, conectar seu front end htmx ao back4app envolve fazer chamadas de api rest diretamente do seu html e javascript recupere suas chaves parse no seu painel do back4app, navegue até a seção “configurações do app” ou “segurança e chaves” para encontrar seu id do aplicativo , chave da api rest , e a url do servidor parse , (geralmente no formato https //parseapi back4app com ) com essas chaves, você pode usar htmx para chamar seus endpoints de backend e manipular seus templates html de acordo por exemplo, você pode usar requisições fetch do javascript combinadas com atributos htmx para interagir com seus dados via chamadas rest step 2 – setting up the database saving and querying data com o seu projeto back4app configurado, você pode agora começar a salvar e recuperar dados usando chamadas de api rest, que você pode acionar a partir de solicitações htmx ou javascript puro a maneira mais simples de criar um registro é fazer uma solicitação post para o 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 da mesma forma, você pode consultar dados 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 você também pode usar consultas graphql conforme necessário para interagir com seu banco de dados do lado do cliente schema design and data types por padrão, o parse permite criação de esquema em tempo real , mas você também pode definir suas classes e tipos de dados no painel do back4app para mais controle navegue até a seção “banco de dados” no seu painel do back4app crie uma nova classe (por exemplo, “todo”) e adicione colunas relevantes, como título (string) e iscompleted (boolean) back4app suporta vários tipos de dados, como string , número , booleano , objeto , data , arquivo , ponteiro, array, relação , geopoint , e polígono use esses para projetar um esquema robusto para sua aplicação impulsionada por htmx back4app oferece um agente de ia que pode ajudá lo a projetar seu modelo de dados abra o agente de ia no seu painel de aplicativos ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “por favor, crie um novo aplicativo todo no back4app com um esquema de classe completo ”) deixe o agente de ia criar o esquema para você usar o agente de ia pode economizar seu tempo ao configurar sua arquitetura de dados e garantir consistência em seu aplicativo relational data se você tiver dados relacionais, como vincular tarefas a categorias, pode usar pointers ou relations no parse através de chamadas de api rest por exemplo, adicionando um ponteiro // 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 você consultar, inclua os dados do ponteiro conforme necessário // 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 atualizações em tempo real, o back4app fornece consultas ao vivo enquanto o htmx se concentra na renderização do lado do servidor e nos atributos html, a integração de atualizações ao vivo pode melhorar significativamente a experiência do usuário ativar consultas ao vivo no seu painel back4app sob o configurações do servidor certifique se de que “consultas ao vivo” esteja ativado inicializar uma assinatura de consulta ao vivo usando javascript junto com gatilhos htmx, se necessário (nota consultas ao vivo normalmente requerem o parse sdk; no entanto, elas ainda podem funcionar ao lado do htmx atualizando partes da página quando os dados mudam este exemplo demonstra o conceito ) 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 assinatura pode então acionar solicitações htmx ou atualizar modelos html dinamicamente para refletir mudanças no lado do cliente step 3 – applying security with acls and clps back4app security mechanism back4app leva a segurança a sério, fornecendo listas de controle de acesso (acls) e permissões de nível de classe (clps) esses recursos permitem que você restrinja quem pode ler ou escrever dados com base em cada objeto ou classe, garantindo que apenas usuários autorizados possam modificar seus dados access control lists (acls) um acl é aplicado a objetos individuais para determinar quais usuários, funções ou o público podem realizar operações de leitura/gravação por exemplo 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 você salva o objeto, ele tem um acl que impede que qualquer pessoa além do usuário especificado o leia ou modifique class level permissions (clps) clps governam as permissões padrão de toda a classe, como se a classe é publicamente legível ou gravável, ou se apenas certos papéis podem acessá la vá para o seu painel do back4app , selecione seu aplicativo e abra a seção banco de dados selecione uma classe (por exemplo, “todo”) abra as permissões de nível de classe aba configure suas preferências, como “requer autenticação” para leitura ou escrita, ou “sem acesso” para o público essas permissões definem a linha de base, enquanto as acls ajustam as permissões para objetos individuais um modelo de segurança robusto geralmente combina tanto clps (restrições amplas) quanto acls (restrições detalhadas por objeto) para mais informações, vá para diretrizes de segurança do app https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions o cloud code é um recurso do ambiente parse server que permite executar código javascript personalizado no lado do servidor ao escrever cloud code, você pode estender seu backend do back4app com lógica de negócios adicional, validações, gatilhos e integrações que são executadas de forma segura e eficiente no parse server how it works quando você escreve cloud code, normalmente coloca suas funções javascript, gatilhos e quaisquer módulos npm necessários em um main js arquivo este arquivo é então implantado no seu projeto back4app, que é executado dentro do ambiente do 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'); } }); implante seu cloud code usando o back4app cli ou através do painel calling your function a partir de uma interface aprimorada com htmx, você pode chamar suas funções de cloud code usando fetch do javascript e atualizar partes da sua página html de acordo por exemplo 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); } você pode integrar chamadas semelhantes dentro dos seus gatilhos htmx e atributos html para criar comportamentos dinâmicos e responsivos no lado do cliente, melhorando a experiência geral do usuário step 5 – configuring user authentication user authentication in back4app back4app aproveita a parse user classe como a base para autenticação por padrão, o parse lida com a hash de senhas, tokens de sessão e armazenamento seguro no contexto de uma aplicação htmx, a autenticação do usuário pode ser gerenciada por meio de chamadas rest iniciadas por envios de formulários html ou requisições fetch em javascript setting up user authentication por exemplo, para criar um novo usuário 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(); } da mesma forma, para o login do usuário 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 após um login bem sucedido, o parse cria um token de sessão que você pode armazenar e gerenciar em sua aplicação htmx para solicitações autenticadas subsequentes social login integration enquanto o htmx se concentra em atributos html e interações do lado do servidor, integrar logins sociais como google ou facebook ainda pode ser alcançado iniciando fluxos oauth e lidando com callbacks no lado do servidor consulte documentação de login social https //www back4app com/docs/platform/sign in with apple para orientações detalhadas email verification and password reset para habilitar a verificação de e mail e a redefinição de senha navegue até as configurações de email no seu painel do back4app ativar verificação de e mail e configurar os modelos necessários use fetch em seus fluxos htmx para acionar solicitações de redefinição de senha conforme necessário step 6 – handling file storage uploading and retrieving files o parse inclui capacidades de armazenamento de arquivos que você pode utilizar através de chamadas de api rest a partir da sua aplicação htmx por exemplo, para fazer o upload de uma imagem 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 controle quem pode fazer upload e acessar arquivos configurando as configurações de segurança no back4app e definindo acls em objetos de arquivo conforme necessário step 7 – scheduling tasks with cloud jobs cloud jobs os trabalhos em nuvem no back4app permitem que você agende tarefas rotineiras em seu backend, como limpar dados antigos ou enviar e mails periódicos esses trabalhos são executados no lado do servidor e podem ser integrados ao seu fluxo de trabalho htmx quando necessário // 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); } }); agende este trabalho através do painel do back4app em configurações do app > configurações do servidor > trabalhos em segundo plano step 8 – integrating webhooks webhooks permitem que seu aplicativo back4app envie requisições http para um serviço externo sempre que certos eventos ocorrerem isso é poderoso para integrar com sistemas de terceiros, como gateways de pagamento, ferramentas de marketing por e mail ou plataformas de análise navegue até a configuração de webhooks no seu painel do back4app > mais > webhooks e clique em adicionar webhook configure um ponto de extremidade (por exemplo, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configure gatilhos para especificar quais eventos nas suas classes back4app ou funções de cloud code ativarão o webhook por exemplo, para notificar um canal do slack sempre que um novo todo for criado crie um aplicativo slack que aceite webhooks de entrada copie a url do webhook do slack no seu painel do back4app, defina o endpoint para essa url do slack para o evento “novo registro na classe todo ” opcionalmente, adicione cabeçalhos http ou cargas úteis personalizados conforme necessário você também pode definir webhooks no cloud code fazendo solicitações http personalizadas em gatilhos step 9 – exploring the back4app admin panel o back4app admin app é uma interface de gerenciamento baseada na web projetada para usuários não técnicos realizarem operações crud e lidarem com tarefas rotineiras de dados sem escrever nenhum código ele fornece uma interface centrada no modelo e amigável ao usuário que simplifica a administração de banco de dados, o gerenciamento de dados personalizados e operações em nível empresarial enabling the admin app ativar indo para painel do app > mais > app do administrador e clicando no botão “ativar app do administrador” crie um primeiro usuário administrador (nome de usuário/senha), que gera automaticamente um novo papel (b4aadminuser) e classes (b4asetting, b4amenuitem e b4acustomfield) no esquema do seu aplicativo escolha um subdomínio para acessar a interface de administração e completar a configuração entrar usando as credenciais de administrador que você criou para acessar o seu novo painel do admin app uma vez ativado, o aplicativo admin do back4app facilita a visualização, edição ou remoção de registros do seu banco de dados sem exigir o uso direto do parse dashboard ou código de backend conclusion ao seguir este tutorial abrangente sobre como construir um backend para htmx usando back4app, você tem criou um backend seguro adaptado para aplicativos web htmx configurou um banco de dados com esquemas de classe, tipos de dados e relacionamentos consultas em tempo real integradas e considerado como consultas ao vivo podem melhorar a experiência do usuário no lado do cliente medidas de segurança aplicadas usando acls e clps para proteger e gerenciar o acesso aos dados implementou funções de cloud code para executar lógica de negócios personalizada no lado do servidor configure a autenticação de usuário, armazenamento de arquivos, jobs em nuvem agendados e webhooks integrados explorou o painel de administração do back4app para uma gestão de dados eficiente com este robusto backend, você agora pode aproveitar as capacidades do htmx para criar aplicações web dinâmicas e modernas que combinam melhorias do lado do cliente com poderosos frameworks do lado do servidor esta abordagem de pilha completa melhora a experiência geral do usuário, proporcionando atualizações suaves de páginas html, renderização eficiente do lado do servidor e integração perfeita em toda a sua pilha tecnológica next steps amplie este backend para incorporar modelos de dados mais complexos, mecanismos de template avançados e lógica personalizada do lado do servidor explore a integração com frameworks do lado do servidor para criar uma experiência do lado do cliente mais dinâmica e responsiva confira a documentação oficial do back4app para mergulhos mais profundos em segurança avançada, ajuste de desempenho e análises continue aprendendo sobre htmx e desenvolvimento web moderno para construir aplicativos web responsivos e amigáveis ao usuário que combinam o melhor das tecnologias do lado do cliente e do lado do servidor uma vez que o projeto é criado, você o verá listado no seu painel do back4app este projeto será a base para todas as configurações de backend discutidas neste tutorial conectar via rest api back4app depende da parse platform para gerenciar seus dados, fornecer recursos em tempo real, lidar com autenticação de usuários e mais embora o htmx seja uma biblioteca do lado do cliente, conectar seu front end htmx ao back4app envolve fazer chamadas de api rest diretamente do seu html e javascript recupere suas chaves parse no seu painel do back4app, navegue até a seção “configurações do app” ou “segurança & chaves” para encontrar seu id da aplicação , chave da api rest , e a url do servidor parse , (geralmente no formato https //parseapi back4app com ) com essas chaves, você pode usar htmx para chamar seus endpoints de backend e manipular seus templates html de acordo por exemplo, você pode usar requisições fetch do javascript combinadas com atributos htmx para interagir com seus dados via chamadas rest passo 2 – configurando o banco de dados salvando e consultando dados com seu projeto back4app configurado, você pode agora começar a salvar e recuperar dados usando chamadas de api rest, que você pode acionar a partir de requisições htmx ou javascript puro a maneira mais simples de criar um registro é fazer uma requisição post para o 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 da mesma forma, você pode consultar dados 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 você também pode usar consultas graphql conforme necessário para interagir com seu banco de dados do lado do cliente design de esquema e tipos de dados por padrão, o parse permite criação de esquema em tempo real , mas você também pode definir suas classes e tipos de dados no painel do back4app para mais controle navegue até a seção “banco de dados” no seu painel do back4app crie uma nova classe (por exemplo, “todo”) e adicione colunas relevantes, como título (string) e iscompleted (boolean) back4app suporta vários tipos de dados, como string , number , boolean , object , date , file , pointer, array, relation , geopoint , e polygon use esses para projetar um esquema robusto para sua aplicação impulsionada por htmx back4app oferece um agente de ia que pode ajudá lo a projetar seu modelo de dados abra o agente de ia no seu painel de aplicativos ou no menu descreva seu modelo de dados em linguagem simples (por exemplo, “por favor, crie um novo aplicativo todo no back4app com um esquema de classe completo ”) deixe o agente de ia criar o esquema para você usar o agente de ia pode economizar tempo ao configurar sua arquitetura de dados e garantir consistência em sua aplicação dados relacionais se você tiver dados relacionais, como vincular tarefas a categorias, pode usar pointers ou relations no parse via chamadas de api rest por exemplo, adicionando um ponteiro // 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 você consulta, inclua dados de ponteiro conforme necessário // 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 ao vivo para atualizações em tempo real, o back4app fornece consultas ao vivo enquanto o htmx se concentra na renderização do lado do servidor e atributos html, a integração de atualizações ao vivo pode melhorar significativamente a experiência do usuário ative as consultas ao vivo no seu painel do back4app em configurações do servidor certifique se de que “consultas ao vivo” esteja ativado inicialize uma assinatura de consulta ao vivo usando javascript junto com gatilhos htmx, se necessário (nota consultas ao vivo geralmente requerem o sdk do parse; no entanto, elas ainda podem funcionar ao lado do htmx atualizando partes da página quando os dados mudam este exemplo demonstra o conceito ) 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; } essa assinatura pode então acionar requisições htmx ou atualizar templates html dinamicamente para refletir mudanças no lado do cliente passo 3 – aplicando segurança com acls e clps mecanismo de segurança back4app back4app leva a segurança a sério, fornecendo listas de controle de acesso (acls) e permissões de nível de classe (clps) esses recursos permitem que você restrinja quem pode ler ou escrever dados com base em cada objeto ou classe, garantindo que apenas usuários autorizados possam modificar seus dados listas de controle de acesso (acls) uma acl é aplicada a objetos individuais para determinar quais usuários, funções ou o público podem realizar operações de leitura/escrita por exemplo 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 você salva o objeto, ele tem um acl que impede que qualquer pessoa, exceto o usuário especificado, o leia ou modifique permissões em nível de classe (clps) clps governam as permissões padrão de toda a classe, como se a classe é legível ou gravável publicamente, ou se apenas certos papéis podem acessá la vá para o seu painel do back4app , selecione seu aplicativo e abra a base de dados seção selecione uma classe (por exemplo, “todo”) abra as permissões em nível de classe aba configure seus padrões, como “requer autenticação” para leitura ou gravação, ou “sem acesso” para o público essas permissões definem a linha de base, enquanto os acls ajustam as permissões para objetos individuais um modelo de segurança robusto geralmente combina tanto clps (restrições amplas) quanto acls (restrições detalhadas por objeto) para mais informações, vá para diretrizes de segurança do aplicativo https //www back4app com/docs/security/parse security passo 4 – escrevendo e implantando funções em nuvem o cloud code é um recurso do ambiente parse server que permite executar código javascript personalizado no lado do servidor ao escrever cloud code, você pode estender seu backend back4app com lógica de negócios adicional, validações, gatilhos e integrações que são executadas de forma segura e eficiente no parse server como funciona quando você escreve cloud code, normalmente coloca suas funções javascript, gatilhos e quaisquer módulos npm necessários em um main js arquivo este arquivo é então implantado em seu projeto back4app, que é executado dentro do ambiente do 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'); } }); implante seu cloud code usando o back4app cli ou através do dashboard chamando sua função de uma interface aprimorada com htmx, você pode chamar suas funções cloud code usando fetch do javascript e atualizar partes da sua página html de acordo por exemplo 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); } você pode integrar chamadas semelhantes dentro de seus gatilhos htmx e atributos html para criar comportamentos dinâmicos e responsivos no lado do cliente, melhorando a experiência geral do usuário passo 5 – configurando a autenticação do usuário autenticação de usuário no back4app o back4app utiliza a classe parse user como base para autenticação por padrão, o parse lida com a hash de senhas, tokens de sessão e armazenamento seguro no contexto de uma aplicação htmx, a autenticação do usuário pode ser gerenciada por meio de chamadas rest iniciadas por envios de formulários html ou requisições fetch do javascript configurando a autenticação do usuário por exemplo, para criar um novo usuário 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(); } da mesma forma, para login do usuário 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(); } gerenciamento de sessão após um login bem sucedido, o parse cria um token de sessão que você pode armazenar e gerenciar em sua aplicação htmx para solicitações autenticadas subsequentes integração de login social enquanto o htmx se concentra em atributos html e interações do lado do servidor, integrar logins sociais como google ou facebook ainda pode ser alcançado iniciando fluxos oauth e lidando com callbacks no lado do servidor consulte documentação de login social https //www back4app com/docs/platform/sign in with apple para orientações detalhadas verificação de email e redefinição de senha para habilitar a verificação de e mail e a redefinição de senha navegue até as configurações de e mail no seu painel do back4app habilite a verificação de e mail e configure os templates necessários use fetch em seus fluxos htmx para acionar solicitações de redefinição de senha conforme necessário passo 6 – gerenciando armazenamento de arquivos carregando e recuperando arquivos o parse inclui capacidades de armazenamento de arquivos que você pode utilizar através de chamadas de api rest a partir de sua aplicação htmx por exemplo, para carregar uma imagem 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(); } segurança de arquivos controle quem pode enviar e acessar arquivos configurando as configurações de segurança no back4app e definindo acls em objetos de arquivo conforme necessário passo 7 – agendando tarefas com cloud jobs cloud jobs cloud jobs no back4app permitem que você agende tarefas rotineiras no seu backend, como limpar dados antigos ou enviar e mails periódicos esses trabalhos são executados do lado do servidor e podem ser integrados ao seu fluxo de trabalho htmx quando necessário // 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); } }); agende este trabalho via o painel do back4app em configurações do app > configurações do servidor > tarefas em segundo plano passo 8 – integrando webhooks webhooks permitem que seu aplicativo back4app envie solicitações http para um serviço externo sempre que certos eventos ocorrerem isso é poderoso para integrar com sistemas de terceiros, como gateways de pagamento, ferramentas de marketing por e mail ou plataformas de análise navegue até a configuração de webhooks no seu painel do back4app > mais > webhooks e clique em adicionar webhook configure um endpoint (por exemplo, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configure gatilhos para especificar quais eventos nas suas classes do back4app ou funções de cloud code dispararão o webhook por exemplo, para notificar um canal do slack sempre que um novo todo for criado crie um aplicativo slack que aceite webhooks de entrada copie a url do webhook do slack no seu painel do back4app, defina o endpoint para essa url do slack para o evento “novo registro na classe todo ” opcionalmente, adicione cabeçalhos http ou payloads personalizados conforme necessário você também pode definir webhooks no cloud code fazendo solicitações http personalizadas em gatilhos passo 9 – explorando o painel de administração do back4app o aplicativo de administração do back4app é uma interface de gerenciamento baseada na web projetada para usuários não técnicos realizarem operações crud e lidarem com tarefas rotineiras de dados sem escrever nenhum código ele fornece uma interface centrada no modelo e amigável ao usuário que simplifica a administração de banco de dados, gerenciamento de dados personalizados e operações em nível empresarial habilitando o app admin habilitar indo para painel do app > mais > app admin e clicando no botão “habilitar app admin” crie um primeiro usuário admin (nome de usuário/senha), que gera automaticamente um novo papel (b4aadminuser) e classes (b4asetting, b4amenuitem e b4acustomfield) no esquema do seu app escolha um subdomínio para acessar a interface de administração e complete a configuração faça login usando as credenciais de admin que você criou para acessar o novo painel do app admin uma vez habilitado, o app admin do back4app facilita a visualização, edição ou remoção de registros do seu banco de dados sem exigir o uso direto do painel parse ou código de backend conclusão ao seguir este tutorial abrangente sobre como construir um backend para htmx usando back4app, você tem criado um backend seguro adaptado para aplicativos web htmx configurado um banco de dados com esquemas de classe, tipos de dados e relacionamentos integrado consultas em tempo real e considerado como consultas ao vivo podem melhorar a experiência do usuário no lado do cliente aplicado medidas de segurança usando acls e clps para proteger e gerenciar o acesso aos dados implementado funções de cloud code para executar lógica de negócios personalizada no lado do servidor configurado autenticação de usuário, armazenamento de arquivos, jobs em nuvem agendados e integrado webhooks explorado o painel de administração do back4app para gerenciamento eficiente de dados com este backend robusto, você pode agora aproveitar as capacidades do htmx para criar aplicações web dinâmicas e modernas que combinam melhorias do lado do cliente com poderosos frameworks do lado do servidor esta abordagem de stack completa melhora a experiência geral do usuário, proporcionando atualizações suaves de páginas html, renderização eficiente do lado do servidor e integração perfeita em sua pilha tecnológica próximos passos estender este backend para incorporar modelos de dados mais complexos, motores de template avançados e lógica personalizada do lado do servidor explorar integração com frameworks do lado do servidor para criar uma experiência do lado do cliente mais dinâmica e responsiva verificar a documentação oficial do back4app para mergulhos mais profundos em segurança avançada, ajuste de desempenho e análises continuar aprendendo sobre htmx e desenvolvimento web moderno para construir aplicativos web responsivos e amigáveis que combinam o melhor das tecnologias do lado do cliente e do lado do servidor