Quickstarters

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

34min

Введение

В этом учебном пособии вы научитесь создавать полный бэкенд для веб-приложений htmx с использованием Back4app.

Мы пройдем через интеграцию основных функций Back4app - таких как управление базами данных, функции облачного кода, REST и GraphQL API, аутентификация пользователей, хранение файлов и запросы в реальном времени (Live Queries) - чтобы создать безопасный, масштабируемый и надежный бэкенд, который бесшовно взаимодействует с вашим фронтендом htmx.

Использование htmx, современного JavaScript-библиотеки, которая использует атрибуты html для обработки взаимодействий на стороне клиента, может значительно улучшить пользовательский опыт, сосредоточив внимание на рендеринге на стороне сервера.

Сочетая htmx с мощными серверными фреймворками и движками шаблонов Back4app, разработчики могут легко и эффективно создавать веб-приложения полного стека.

К концу этого учебного пособия вы создадите бэкенд, адаптированный для интеграции с htmx, что позволит выполнять операции с данными и улучшить клиентский опыт с динамическими обновлениями html-страниц без полной перезагрузки страниц.

Предварительные требования

Чтобы завершить это учебное пособие, вам потребуется:

  • Аккаунт Back4app и новый проект Back4app Начало работы с Back4app. Если у вас нет аккаунта, вы можете создать его бесплатно. Следуйте приведенному выше руководству, чтобы подготовить ваш проект.
  • Базовая настройка htmx Включите библиотеку htmx на вашей html-странице, используя:
  • Среда веб-разработки Убедитесь, что у вас настроен локальный сервер или используйте серверные фреймворки для обслуживания ваших html-шаблонов.
  • Знание HTML, CSS и JavaScript Документация htmx для получения дополнительной информации о атрибутах html и разработке веб-приложений.

Убедитесь, что у вас есть все эти предварительные условия, прежде чем вы начнете. Наличие вашего проекта Back4app и готовой локальной среды htmx поможет вам легче следовать инструкциям.

Шаг 1 – Настройка проекта Back4app

Создание нового проекта

Первый шаг в создании вашего htmx бэкенда на Back4app – это создание нового проекта. Если вы еще не создали его, выполните следующие шаги:

  1. Войдите в свою учетную запись Back4app.
  2. Нажмите кнопку “Новое приложение” на вашей панели управления Back4app.
  3. Дайте вашему приложению имя (например, “htmx-Backend-Tutorial”).
Document image


После создания проекта вы увидите его в списке на вашей панели управления 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


Аналогично, вы можете запрашивать данные:

Curl


Вы также можете использовать запросы GraphQL по мере необходимости для взаимодействия с вашей базой данных со стороны клиента.

Проектирование схемы и типы данных

По умолчанию Parse позволяет создание схемы на лету, но вы также можете определить ваши классы и типы данных в панели управления Back4app для большего контроля.

  1. Перейдите в раздел “База данных” в вашей панели управления Back4app.
  2. Создайте новый класс (например, “Todo”) и добавьте соответствующие столбцы, такие как заголовок (String) и isCompleted (Boolean).



Back4app поддерживает различные типы данных, такие как String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, и Polygon. Используйте их для проектирования надежной схемы для вашего приложения на основе htmx.

Back4app предлагает AI-агента, который может помочь вам спроектировать вашу модель данных:

  1. Откройте AI-агента из вашей панели управления приложением или в меню.
  2. Опишите вашу модель данных простым языком (например, “Пожалуйста, создайте новое приложение ToDo на back4app с полной схемой класса.”).
  3. Позвольте AI-агенту создать схему для вас.



Использование AI-агента может сэкономить ваше время при настройке архитектуры данных и обеспечить согласованность в вашем приложении.

Реляционные данные

Если у вас есть реляционные данные, такие как связывание задач с категориями, вы можете использовать Pointers или Relations в Parse через вызовы REST API. Например, добавление указателя:

JS


Когда вы выполняете запрос, включайте данные указателя по мере необходимости:

JS


Живые запросы

Для обновлений в реальном времени Back4app предоставляет Живые запросы. В то время как htmx сосредоточен на рендеринге на стороне сервера и атрибутах HTML, интеграция живых обновлений может значительно улучшить пользовательский опыт.

  1. Включите Живые запросы в вашей панели управления Back4app в разделе Настройки сервера. Убедитесь, что "Живые запросы" включены.
  2. Инициализируйте подписку на Живой запрос с использованием JavaScript вместе с триггерами htmx, если это необходимо:

(Примечание: Живые запросы обычно требуют Parse SDK; однако они все равно могут работать вместе с htmx, обновляя части страницы при изменении данных. Этот пример демонстрирует концепцию.)

JS


Эта подписка может затем инициировать запросы htmx или динамически обновлять html-шаблоны, чтобы отразить изменения на стороне клиента.

Шаг 3 – Применение безопасности с помощью ACL и CLP

Механизм безопасности Back4app

Back4app серьезно относится к безопасности, предоставляя Списки контроля доступа (ACL) и Разрешения на уровне класса (CLP). Эти функции позволяют ограничить, кто может читать или записывать данные на уровне объекта или класса, обеспечивая, чтобы только авторизованные пользователи могли изменять ваши данные.

Списки контроля доступа (ACL)

ACL применяется к отдельным объектам, чтобы определить, какие пользователи, роли или общественность могут выполнять операции чтения/записи. Например:

JS


Когда вы сохраняете объект, у него есть ACL, который предотвращает чтение или изменение его кем-либо, кроме указанного пользователя.

Разрешения на уровне класса (CLP)

CLP управляют стандартными разрешениями для всего класса, такими как возможность публичного чтения или записи, или доступ только для определенных ролей.

  1. Перейдите на свою панель управления Back4app, выберите свое приложение и откройте раздел База данных.
  2. Выберите класс (например, “Todo”).
  3. Откройте вкладку Разрешения на уровне класса.
  4. Настройте свои параметры по умолчанию, такие как “Требуется аутентификация” для чтения или записи, или “Нет доступа” для публичного.

Эти разрешения устанавливают базовый уровень, в то время как ACL уточняют разрешения для отдельных объектов. Надежная модель безопасности обычно сочетает как CLP (широкие ограничения), так и ACL (точные ограничения для каждого объекта). Для получения дополнительной информации перейдите по ссылке Руководство по безопасности приложений.

Шаг 4 – Написание и развертывание облачных функций

Облачный код – это функция среды Parse Server, которая позволяет вам запускать пользовательский JavaScript код на стороне сервера.

Путем написания Cloud Code вы можете расширить свой бэкенд Back4app дополнительной бизнес-логикой, валидациями, триггерами и интеграциями, которые работают безопасно и эффективно на Parse Server.

Как это работает

Когда вы пишете Cloud Code, вы обычно размещаете свои функции JavaScript, триггеры и любые необходимые модули NPM в файле main.js. Этот файл затем развертывается в вашем проекте Back4app, который выполняется в среде Parse Server.

JS


Разверните свой Cloud Code с помощью Back4app CLI или через Панель управления.

Вызов вашей функции

Из интерфейса с поддержкой htmx вы можете вызывать функции Cloud Code, используя JavaScript fetch и обновлять части вашей html-страницы соответственно. Например:

JS


Вы можете интегрировать аналогичные вызовы в ваши триггеры htmx и html-атрибуты, чтобы создать динамическое, отзывчивое поведение на стороне клиента, улучшая общий пользовательский опыт.

Шаг 5 – Настройка аутентификации пользователей

Аутентификация пользователей в Back4app

Back4app использует класс Parse User в качестве основы для аутентификации. По умолчанию Parse обрабатывает хеширование паролей, токены сессий и безопасное хранение.

В контексте приложения htmx аутентификация пользователей может управляться через REST-вызовы, инициируемые отправкой html-форм или запросами JavaScript fetch.

Настройка аутентификации пользователей

Например, чтобы создать нового пользователя:

JS


Аналогично, для входа пользователя:

JS


Управление сессиями

После успешного входа в систему Parse создает токен сессии, который вы можете хранить и управлять им в своем приложении htmx для последующих аутентифицированных запросов.

Интеграция социальных логинов

Хотя htmx сосредоточен на атрибутах html и взаимодействиях на стороне сервера, интеграция социальных логинов, таких как Google или Facebook, все же может быть достигнута путем инициации OAuth-потоков и обработки обратных вызовов на стороне сервера. Обратитесь к Документации по социальным логинам для получения подробных инструкций.

Подтверждение электронной почты и сброс пароля

Чтобы включить проверку электронной почты и сброс пароля:

  1. Перейдите в настройки электронной почты в вашей панели управления Back4app.
  2. Включите проверку электронной почты и настройте необходимые шаблоны.
  3. Используйте fetch в ваших htmx потоках, чтобы по мере необходимости инициировать запросы на сброс пароля.

Шаг 6 – Работа с файловым хранилищем

Загрузка и получение файлов

Parse включает возможности файлового хранилища, которые вы можете использовать через вызовы REST API из вашего htmx приложения. Например, чтобы загрузить изображение:

JS


Безопасность файлов

Контролируйте, кто может загружать и получать доступ к файлам, настраивая параметры безопасности в Back4app и устанавливая ACL на объекты файлов по мере необходимости.

Шаг 7 – Планирование задач с помощью облачных заданий

Облачные задания

Облачные задания в Back4app позволяют вам планировать рутинные задачи на вашем сервере, такие как очистка старых данных или отправка периодических электронных писем.

Эти задания выполняются на стороне сервера и могут быть интегрированы с вашим рабочим процессом htmx при необходимости.

JS


Запланируйте эту задачу через панель управления Back4app в разделе Настройки приложения > Настройки сервера > Фоновая работа.

Шаг 8 – Интеграция вебхуков

Webhooks позволяют вашему приложению Back4app отправлять HTTP-запросы на внешний сервис, когда происходят определенные события. Это мощный инструмент для интеграции с системами третьих сторон, такими как платежные шлюзы, инструменты email-маркетинга или аналитические платформы.

  1. Перейдите к конфигурации Webhooks в вашей панели управления Back4app > Дополнительно > WebHooks и нажмите на Добавить Webhook.
  2. Настройте конечную точку (например, https://your-external-service.com/webhook-endpoint).
  3. Настройте триггеры для указания, какие события в ваших классах 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 и современную веб-разработку для создания удобных, отзывчивых веб-приложений, которые объединяют лучшее из технологий на стороне клиента и сервера.