Как создать бекенд для htmx?

введение в этом учебном пособии вы научитесь создавать полный бэкенд для веб приложений htmx с использованием back4app мы пройдем через интеграцию основных функций back4app таких как управление базами данных, функции cloud code, rest и graphql api, аутентификация пользователей, хранение файлов и запросы в реальном времени (live queries) чтобы создать безопасный, масштабируемый и надежный бэкенд, который бесшовно взаимодействует с вашим фронтендом htmx использование htmx, современного javascript библиотеки, которая использует атрибуты html для обработки взаимодействий на стороне клиента, может значительно улучшить пользовательский опыт, сосредоточив внимание на рендеринге на стороне сервера сочетая htmx с мощными серверными фреймворками и движками шаблонов back4app, разработчики могут легко и эффективно создавать веб приложения полного стека к концу этого учебного пособия вы создадите бэкенд, адаптированный для интеграции с htmx, что позволит выполнять операции с данными и улучшить клиентский опыт с динамическими обновлениями html страниц без полной перезагрузки предварительные требования чтобы завершить это учебное пособие, вам потребуется аккаунт back4app и новый проект back4app начало работы с back4app https //www back4app com/docs/get started/new parse app если у вас нет аккаунта, вы можете создать его бесплатно следуйте приведенному выше руководству, чтобы подготовить ваш проект базовая настройка htmx включите библиотеку htmx https //htmx org/ на вашей html странице, используя среда веб разработки убедитесь, что у вас настроен локальный сервер или используйте серверные фреймворки для обслуживания ваших html шаблонов знание html, css и javascript документация htmx https //htmx org/docs/ для получения дополнительной информации о атрибутах html и разработке веб приложений убедитесь, что у вас есть все эти предварительные условия, прежде чем вы начнете наличие вашего проекта back4app и готовой локальной среды htmx поможет вам легче следовать инструкциям шаг 1 – настройка проекта back4app создание нового проекта первый шаг в создании вашего htmx бэкенда на back4app – это создание нового проекта если вы еще не создали его, выполните следующие шаги войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления back4app дайте вашему приложению имя (например, “htmx backend tutorial”) после создания проекта вы увидите его в списке на вашей панели управления back4app этот проект станет основой для всех конфигураций бэкенда, обсуждаемых в этом руководстве connect via rest api back4app полагается на платформу parse для управления вашими данными, предоставления функций в реальном времени, обработки аутентификации пользователей и многого другого хотя htmx сам по себе является библиотекой на стороне клиента, подключение вашего фронтенда htmx к back4app включает в себя выполнение rest api вызовов непосредственно из вашего html и javascript получите ваши ключи parse в вашей панели управления back4app перейдите в раздел “настройки приложения” или “безопасность и ключи”, чтобы найти ваш идентификатор приложения , ключ rest api , и url сервера parse , (часто в формате https //parseapi back4app com ) с этими ключами вы можете использовать htmx для вызова ваших конечных точек на сервере и соответствующего изменения ваших html шаблонов например, вы можете использовать запросы fetch в javascript в сочетании с атрибутами htmx для взаимодействия с вашими данными через rest вызовы step 2 – setting up the database saving and querying data с вашим проектом back4app, настроенным, вы теперь можете начинать сохранять и извлекать данные, используя вызовы rest api, которые вы можете инициировать из запросов htmx или простого javascript самый простой способ создать запись это сделать post запрос к серверу 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 аналогично, вы можете запрашивать данные 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 вы также можете использовать запросы graphql по мере необходимости для взаимодействия с вашей базой данных с клиентской стороны schema design and data types по умолчанию, parse позволяет создание схем на лету , но вы также можете определить свои классы и типы данных в панели управления back4app для большего контроля перейдите в раздел "база данных" в вашей панели управления back4app создайте новый класс (например, “todo”) и добавьте соответствующие столбцы, такие как заголовок (string) и iscompleted (boolean) back4app поддерживает различные типы данных, такие как string , number , boolean , object , date , file , pointer, array, relation , geopoint , и polygon используйте их для разработки надежной схемы для вашего приложения на основе htmx back4app предлагает ai агента, который может помочь вам разработать вашу модель данных откройте ai агент из вашей панели приложений или в меню опишите вашу модель данных простым языком (например, “пожалуйста, создайте новое приложение todo на back4app с полной схемой класса ”) пусть ии агент создаст схему для вас использование ai агента может сэкономить ваше время при настройке архитектуры данных и обеспечить согласованность в вашем приложении relational data если у вас есть реляционные данные, такие как связывание задач с категориями, вы можете использовать указатели или связи в parse через вызовы rest api например, добавление указателя // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } когда вы запрашиваете, включите данные указателя по мере необходимости // example 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 для обновлений в реальном времени back4app предоставляет live queries в то время как htmx сосредоточен на рендеринге на стороне сервера и html атрибутах, интеграция живых обновлений может значительно улучшить пользовательский опыт включите живые запросы в вашей панели управления back4app в разделе вашего приложения настройки сервера убедитесь, что «живые запросы» включены инициализируйте подписку на живой запрос с использованием javascript вместе с триггерами htmx, если это необходимо (примечание живые запросы обычно требуют parse sdk; однако они все равно могут работать вместе с htmx, обновляя части страницы, когда данные изменяются этот пример демонстрирует концепцию ) 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; } эта подписка может затем вызывать запросы htmx или динамически обновлять html шаблоны, чтобы отразить изменения на стороне клиента step 3 – applying security with acls and clps back4app security mechanism back4app серьезно относится к безопасности, предоставляя списки управления доступом (acl) и разрешения на уровне класса (clp) эти функции позволяют ограничить, кто может читать или записывать данные на уровне объекта или класса, обеспечивая, что только авторизованные пользователи могут изменять ваши данные access control lists (acls) а acl применяется к отдельным объектам, чтобы определить, какие пользователи, роли или общественность могут выполнять операции чтения/записи например 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(); } когда вы сохраняете объект, у него есть acl, который предотвращает доступ к чтению или изменению для всех, кроме указанного пользователя class level permissions (clps) clps управляют стандартными разрешениями целого класса, такими как возможность чтения или записи класса публично, или если только определенные роли могут получить к нему доступ перейдите на свою панель управления back4app , выберите свое приложение и откройте раздел база данных выберите класс (например, “todo”) откройте разрешения на уровне класса вкладку настройте свои параметры по умолчанию, такие как "требуется аутентификация" для чтения или записи, или "нет доступа" для общественности эти разрешения устанавливают базовый уровень, в то время как acl уточняют разрешения для отдельных объектов надежная модель безопасности обычно сочетает в себе как clp (широкие ограничения), так и acl (точные ограничения для каждого объекта) для получения дополнительной информации перейдите по ссылке руководство по безопасности приложений https //www back4app com/docs/security/parse security step 4 – writing and deploying cloud functions cloud code — это функция среды parse server, которая позволяет вам выполнять пользовательский javascript код на стороне сервера путем написания cloud code вы можете расширить свой бэкенд back4app дополнительной бизнес логикой, валидациями, триггерами и интеграциями, которые выполняются безопасно и эффективно на parse server how it works когда вы пишете cloud code, вы обычно размещаете свои функции javascript, триггеры и любые необходимые модули npm в main js файле этот файл затем развертывается в вашем проекте back4app, который выполняется в среде 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'); } }); разверните свой cloud code с помощью back4app cli или через панель управления calling your function с интерфейса, улучшенного htmx, вы можете вызывать функции cloud code, используя javascript fetch, и обновлять части вашей html страницы соответственно например 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); } вы можете интегрировать аналогичные вызовы в ваши триггеры htmx и атрибуты html, чтобы создать динамическое, отзывчивое поведение на стороне клиента, улучшая общий пользовательский опыт step 5 – configuring user authentication user authentication in back4app back4app использует класс parse user в качестве основы для аутентификации по умолчанию parse обрабатывает хеширование паролей, токены сессий и безопасное хранение в контексте приложения htmx аутентификация пользователей может управляться через rest вызовы, инициируемые отправкой html форм или запросами fetch на javascript setting up user authentication например, чтобы создать нового пользователя async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } аналогично, для входа пользователя async function 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 после успешного входа в систему parse создает токен сессии, который вы можете хранить и управлять им в своем приложении htmx для последующих аутентифицированных запросов social login integration хотя htmx сосредоточен на атрибутах html и взаимодействиях на стороне сервера, интеграция социальных логинов, таких как google или facebook, все еще может быть достигнута путем инициации oauth потоков и обработки обратных вызовов на стороне сервера обратитесь к документация по социальным логинам https //www back4app com/docs/platform/sign in with apple для получения подробных инструкций email verification and password reset чтобы включить проверку электронной почты и сброс пароля перейдите к настройкам электронной почты в вашей панели управления back4app включите проверку электронной почты и настройте необходимые шаблоны используйте fetch в ваших потоках htmx, чтобы по мере необходимости инициировать запросы на сброс пароля step 6 – handling file storage uploading and retrieving files parse включает в себя возможности хранения файлов, которые вы можете использовать через вызовы rest api из вашего приложения htmx например, чтобы загрузить изображение 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 контролируйте, кто может загружать и получать доступ к файлам, настраивая параметры безопасности в back4app и устанавливая acl на объекты файлов по мере необходимости step 7 – scheduling tasks with cloud jobs cloud jobs облачные задания в back4app позволяют вам планировать рутинные задачи на вашем сервере, такие как очистка старых данных или отправка периодических электронных писем эти задания выполняются на стороне сервера и могут быть интегрированы с вашим рабочим процессом htmx при необходимости // 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); } }); запланируйте эту задачу через панель управления back4app в разделе настройки приложения > настройки сервера > фоновые задачи step 8 – integrating webhooks вебхуки позволяют вашему приложению back4app отправлять http запросы на внешний сервис, когда происходят определенные события это мощный инструмент для интеграции с системами третьих сторон, такими как платежные шлюзы, инструменты email маркетинга или аналитические платформы перейдите к настройкам webhooks в вашей панели управления back4app > дополнительно > webhooks и нажмите на добавить webhook настройте конечную точку (например, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) настройте триггеры чтобы указать, какие события в ваших классах back4app или функциях cloud code будут вызывать вебхук например, чтобы уведомлять канал slack каждый раз, когда создается новая задача создайте приложение slack, которое принимает входящие вебхуки скопируйте url адрес вебхука slack в вашей панели управления back4app установите конечную точку на этот url slack для события "новая запись в классе todo " при необходимости добавьте пользовательские http заголовки или полезные нагрузки вы также можете определить webhooks в cloud code, делая пользовательские http запросы в триггерах step 9 – exploring the back4app admin panel это back4app admin app это веб интерфейс управления, разработанный для нетехнических пользователей, чтобы выполнять операции crud и обрабатывать рутинные задачи с данными без написания кода он предоставляет ориентированный на модель, удобный для пользователя интерфейс, который упрощает администрирование баз данных, управление пользовательскими данными и операции на уровне предприятия enabling the admin app включить это, перейдя в панель приложений > дополнительно > админ приложение и нажав кнопку “включить админ приложение” создать первого администратора (имя пользователя/пароль), который автоматически генерирует новую роль (b4aadminuser) и классы (b4asetting, b4amenuitem и b4acustomfield) в схеме вашего приложения выберите подсеть для доступа к административному интерфейсу и завершите настройку войти с использованием учетных данных администратора, которые вы создали для доступа к вашей новой панели администратора приложения после активации приложение администратора back4app упрощает просмотр, редактирование или удаление записей из вашей базы данных без необходимости прямого использования панели управления parse или кода на стороне сервера conclusion следуя этому подробному руководству о том, как создать бэкенд для htmx с использованием back4app, вы получили создана безопасная серверная часть, адаптированная для веб приложений htmx настроена база данных с классами схем, типами данных и отношениями интегрированные запросы в реальном времени и рассмотрение того, как живые запросы могут улучшить пользовательский опыт на стороне клиента применены меры безопасности с использованием acl и clp для защиты и управления доступом к данным реализованы функции cloud code для выполнения пользовательской бизнес логики на стороне сервера настройте аутентификацию пользователей, хранение файлов, запланированные облачные задания и интегрированные вебхуки изучил панель администратора back4app для эффективного управления данными с этим надежным бэкендом вы теперь можете использовать возможности htmx для создания динамичных, современных веб приложений, которые объединяют улучшения на стороне клиента с мощными фреймворками на стороне сервера этот подход полного стека улучшает общий пользовательский опыт, обеспечивая плавные обновления html страниц, эффективную отрисовку на стороне сервера и бесшовную интеграцию в вашем технологическом стеке next steps расширьте этот бэкенд чтобы включить более сложные модели данных, продвинутые шаблонные движки и пользовательскую серверную логику изучите интеграцию с серверными фреймворками чтобы создать более динамичный и отзывчивый клиентский опыт посмотрите официальную документацию back4app для более глубокого изучения вопросов безопасности, настройки производительности и аналитики продолжайте изучать htmx и современную веб разработку чтобы создавать удобные для пользователя, адаптивные веб приложения, которые объединяют лучшее из технологий клиентской и серверной стороны после создания проекта вы увидите его в списке на вашей панели управления back4app этот проект станет основой для всех конфигураций бэкенда, обсуждаемых в этом руководстве подключение через rest api back4app полагается на платформу parse для управления вашими данными, предоставления функций в реальном времени, обработки аутентификации пользователей и многого другого хотя htmx сам по себе является библиотекой на стороне клиента, подключение вашего фронтенда htmx к back4app включает в себя выполнение rest api вызовов непосредственно из вашего html и javascript получите ваши ключи parse в вашей панели управления back4app перейдите в раздел “настройки приложения” или “безопасность и ключи”, чтобы найти ваш идентификатор приложения , ключ rest api , и url сервера parse (обычно в формате https //parseapi back4app com ) с этими ключами вы можете использовать htmx для вызова ваших конечных точек бэкенда и соответствующей манипуляции вашими html шаблонами например, вы можете использовать запросы fetch javascript в сочетании с атрибутами htmx для взаимодействия с вашими данными через rest вызовы шаг 2 – настройка базы данных сохранение и запрос данных с вашим проектом back4app настроенным, вы теперь можете начать сохранять и извлекать данные, используя вызовы rest api, которые вы можете инициировать из запросов htmx или простого javascript самый простой способ создать запись – это сделать post запрос к серверу 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 аналогично, вы можете запрашивать данные 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 вы также можете использовать запросы graphql по мере необходимости для взаимодействия с вашей базой данных со стороны клиента проектирование схемы и типы данных по умолчанию parse позволяет создание схемы на лету , но вы также можете определить свои классы и типы данных в панели управления back4app для большего контроля перейдите в раздел “база данных” в вашей панели управления back4app создайте новый класс (например, “todo”) и добавьте соответствующие столбцы, такие как заголовок (string) и iscompleted (boolean) back4app поддерживает различные типы данных, такие как string , number , boolean , object , date , file , pointer, array, relation , geopoint , и polygon используйте их для проектирования надежной схемы для вашего приложения на основе htmx back4app предлагает ai агента, который может помочь вам спроектировать вашу модель данных откройте ai агента из вашей панели управления приложением или в меню опишите вашу модель данных простым языком (например, “пожалуйста, создайте новое приложение todo на back4app с полной схемой класса ”) позвольте ai агенту создать схему для вас использование ai агента может сэкономить ваше время при настройке архитектуры данных и обеспечить согласованность в вашем приложении реляционные данные если у вас есть реляционные данные, такие как связывание задач с категориями, вы можете использовать pointers или relations в parse через вызовы rest api например, добавление указателя // example linking a task to a category using rest api async function createtaskforcategory(categoryid, title) { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ title title, category { type "pointer", classname "category", objectid categoryid } }) }); return response json(); } когда вы выполняете запрос, включайте данные указателя по мере необходимости // example 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(); } живые запросы для обновлений в реальном времени back4app предоставляет живые запросы в то время как htmx сосредоточен на рендеринге на стороне сервера и атрибутах html, интеграция живых обновлений может значительно улучшить пользовательский опыт включите живые запросы в вашей панели управления back4app в разделе настройки сервера убедитесь, что "живые запросы" включены инициализируйте подписку на живой запрос с использованием javascript вместе с триггерами htmx, если это необходимо (примечание живые запросы обычно требуют parse sdk; однако они все равно могут работать вместе с htmx, обновляя части страницы при изменении данных этот пример демонстрирует концепцию ) 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; } эта подписка может затем инициировать запросы htmx или динамически обновлять html шаблоны, чтобы отразить изменения на стороне клиента шаг 3 – применение безопасности с помощью acl и clp механизм безопасности back4app back4app серьезно относится к безопасности, предоставляя списки контроля доступа (acl) и разрешения на уровне класса (clp) эти функции позволяют ограничить, кто может читать или записывать данные на уровне объекта или класса, обеспечивая, чтобы только авторизованные пользователи могли изменять ваши данные списки контроля доступа (acl) acl применяется к отдельным объектам, чтобы определить, какие пользователи, роли или общественность могут выполнять операции чтения/записи например 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(); } когда вы сохраняете объект, у него есть acl, который предотвращает чтение или изменение его кем либо, кроме указанного пользователя разрешения на уровне класса (clp) clp управляют стандартными разрешениями для всего класса, такими как возможность публичного чтения или записи, или доступ только для определенных ролей перейдите на свою панель управления back4app , выберите свое приложение и откройте раздел база данных выберите класс (например, “todo”) откройте вкладку разрешения на уровне класса настройте свои параметры по умолчанию, такие как “требуется аутентификация” для чтения или записи, или “нет доступа” для публичного эти разрешения устанавливают базовый уровень, в то время как acl уточняют разрешения для отдельных объектов надежная модель безопасности обычно сочетает как clp (широкие ограничения), так и acl (точные ограничения для каждого объекта) для получения дополнительной информации перейдите по ссылке руководство по безопасности приложений https //www back4app com/docs/security/parse security шаг 4 – написание и развертывание облачных функций облачный код – это функция среды parse server, которая позволяет вам запускать пользовательский javascript код на стороне сервера путем написания cloud code вы можете расширить свой бэкенд back4app дополнительной бизнес логикой, валидациями, триггерами и интеграциями, которые работают безопасно и эффективно на parse server как это работает когда вы пишете cloud code, вы обычно размещаете свои функции javascript, триггеры и любые необходимые модули npm в файле main js этот файл затем развертывается в вашем проекте back4app, который выполняется в среде 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'); } }); разверните свой cloud code с помощью back4app cli или через панель управления вызов вашей функции из интерфейса с поддержкой htmx вы можете вызывать функции cloud code, используя javascript fetch и обновлять части вашей html страницы соответственно например 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); } вы можете интегрировать аналогичные вызовы в ваши триггеры htmx и html атрибуты, чтобы создать динамическое, отзывчивое поведение на стороне клиента, улучшая общий пользовательский опыт шаг 5 – настройка аутентификации пользователей аутентификация пользователей в back4app back4app использует класс parse user в качестве основы для аутентификации по умолчанию parse обрабатывает хеширование паролей, токены сессий и безопасное хранение в контексте приложения htmx аутентификация пользователей может управляться через rest вызовы, инициируемые отправкой html форм или запросами javascript fetch настройка аутентификации пользователей например, чтобы создать нового пользователя async function signupuser(username, password, email) { const response = await fetch('https //parseapi back4app com/users', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, body json stringify({ username, password, email }) }); return response json(); } аналогично, для входа пользователя async function 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(); } управление сессиями после успешного входа parse создает токен сессии, который вы можете хранить и управлять им в вашем приложении htmx для последующих аутентифицированных запросов интеграция социальных логинов хотя htmx сосредоточен на атрибутах html и взаимодействиях на стороне сервера, интеграция социальных логинов, таких как google или facebook, все еще может быть достигнута путем инициации oauth потоков и обработки обратных вызовов на стороне сервера обратитесь к документации по социальным логинам https //www back4app com/docs/platform/sign in with apple для подробных инструкций подтверждение электронной почты и сброс пароля чтобы включить проверку электронной почты и сброс пароля перейдите в настройки электронной почты в вашей панели управления back4app включите проверку электронной почты и настройте необходимые шаблоны используйте fetch в ваших htmx потоках, чтобы по мере необходимости инициировать запросы на сброс пароля шаг 6 – обработка хранения файлов загрузка и получение файлов parse включает возможности хранения файлов, которые вы можете использовать через вызовы rest api из вашего htmx приложения например, чтобы загрузить изображение 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(); } безопасность файлов контролируйте, кто может загружать и получать доступ к файлам, настраивая параметры безопасности в back4app и устанавливая acl на объекты файлов по мере необходимости шаг 7 – планирование задач с помощью облачных заданий облачные задания облачные задания в back4app позволяют вам планировать рутинные задачи на вашем сервере, такие как очистка старых данных или отправка периодических электронных писем эти задания выполняются на стороне сервера и могут быть интегрированы с вашим рабочим процессом htmx при необходимости // 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); } }); запланируйте эту задачу через панель управления back4app в разделе настройки приложения > настройки сервера > фоновая работа шаг 8 – интеграция вебхуков webhooks позволяют вашему приложению back4app отправлять http запросы на внешний сервис, когда происходят определенные события это мощный инструмент для интеграции с системами третьих сторон, такими как платежные шлюзы, инструменты email маркетинга или аналитические платформы перейдите к конфигурации webhooks в вашей панели управления back4app > дополнительно > webhooks и нажмите на добавить webhook настройте конечную точку (например, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) настройте триггеры для указания, какие события в ваших классах back4app или функциях cloud code будут вызывать webhook например, чтобы уведомить канал slack, когда создается новая задача todo создайте приложение slack, которое принимает входящие вебхуки скопируйте url вебхука slack в вашей панели управления back4app установите конечную точку на этот url slack для события “новая запись в классе todo ” при необходимости добавьте пользовательские http заголовки или полезные нагрузки вы также можете определить webhooks в cloud code, выполняя пользовательские http запросы в триггерах шаг 9 – изучение панели администратора back4app приложение back4app admin app является веб интерфейсом управления, предназначенным для нетехнических пользователей, чтобы выполнять операции crud и обрабатывать рутинные задачи с данными без написания кода он предоставляет ориентированный на модель, удобный интерфейс, который упрощает администрирование баз данных, управление пользовательскими данными и операции на уровне предприятия включение приложения администратора включите его, перейдя в панель приложений > дополнительно > приложение администратора и нажав кнопку “включить приложение администратора” создайте первого администратора (имя пользователя/пароль), что автоматически создаст новую роль (b4aadminuser) и классы (b4asetting, b4amenuitem и b4acustomfield) в схеме вашего приложения выберите поддомен для доступа к интерфейсу администратора и завершите настройку войдите с использованием учетных данных администратора, которые вы создали, чтобы получить доступ к новой панели приложений администратора после включения приложение администратора back4app упрощает просмотр, редактирование или удаление записей из вашей базы данных без необходимости прямого использования панели управления parse или кода на стороне сервера заключение следуя этому подробному руководству о том, как создать бэкенд для htmx с использованием back4app, вы создали безопасный бэкенд, адаптированный для веб приложений htmx настроили базу данных с классами схем, типами данных и отношениями интегрировали запросы в реальном времени и рассмотрели, как live queries могут улучшить пользовательский опыт на стороне клиента применили меры безопасности с использованием acl и clp для защиты и управления доступом к данным реализовали функции cloud code для выполнения пользовательской бизнес логики на стороне сервера настроили аутентификацию пользователей, хранение файлов, запланированные cloud jobs и интегрировали webhooks изучили панель администратора back4app для эффективного управления данными с этим надежным бэкендом вы теперь можете использовать возможности htmx для создания динамичных, современных веб приложений, которые объединяют улучшения на стороне клиента с мощными фреймворками на стороне сервера этот подход полного стека улучшает общий пользовательский опыт, обеспечивая плавные обновления html страниц, эффективную отрисовку на стороне сервера и бесшовную интеграцию в вашем технологическом стеке следующие шаги расширьте этот бэкенд для включения более сложных моделей данных, продвинутых шаблонных движков и пользовательской логики на стороне сервера изучите интеграцию с фреймворками на стороне сервера для создания более динамичного и отзывчивого пользовательского опыта на стороне клиента посмотрите официальную документацию back4app для более глубокого изучения вопросов безопасности, настройки производительности и аналитики продолжайте изучать htmx и современную веб разработку для создания удобных, отзывчивых веб приложений, которые объединяют лучшее из технологий на стороне клиента и сервера