Как создать CRUD-приложение с Remix?

обзор в этом руководстве вы узнаете, как создать приложение crud (создание, чтение, обновление, удаление) с использованием remix js мы будем использовать back4app в качестве нашего серверного решения для бесшовного хранения данных это руководство охватывает настройку проекта back4app, проектирование динамической схемы данных и подключение операций crud в вашем приложении remix js сначала вы создадите проект back4app, который мы назовем basic crud app remix , предоставляя масштабируемое нереляционное хранилище данных затем вы создадите модель данных, вручную установив коллекции и поля через панель управления back4app, или даже используете встроенный ai agent для автоматической настройки далее вы исследуете приложение администратора back4app — удобный интерфейс, который позволяет вам легко управлять вашими данными с помощью операций перетаскивания наконец, вы подключите ваше приложение remix js к back4app через вызовы rest api, обеспечивая надежность и безопасность ваших функций crud, а также аутентификации пользователей к концу этого учебника у вас будет готовое к производству приложение remix js, способное выполнять основные операции crud вместе с безопасным управлением пользователями что вы узнаете как создать приложение crud с remix js и надежным бэкендом лучшие практики для структурирования вашего бэкенда и интеграции его с фронтендом remix js как использовать приложение back4app admin для упрощения задач управления данными техники развертывания вашего приложения remix js, включая контейнеризацию с помощью docker предварительные требования перед тем как начать, убедитесь, что у вас есть аккаунт back4app с новым проектом готовым к работе нужна помощь? посетите начало работы с back4app https //www back4app com/docs/get started/new parse app рабочая среда разработки remix js вы можете использовать любой современный редактор кода, например, vs code node js (версии 14 или выше) должен быть установлен базовые знания javascript, react и restful api для освежения знаний ознакомьтесь с документацией remix https //remix run/docs шаг 1 – настройка вашего проекта запуск нового проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app remix , и следуйте инструкциям, чтобы завершить процесс создания создать новый проект как только ваш проект будет готов, он появится на вашей панели управления, предоставляя основу для вашего бэкенда шаг 2 – создание вашей модели данных создание структур данных для этого crud приложения вы определите несколько коллекций в back4app ниже приведены примеры основных коллекций и полей, которые будут поддерживать ваши функции crud 1\ коллекция предметов эта коллекция будет хранить информацию о каждом элементе поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое резюме, описывающее предмет создано дата время, когда элемент был добавлен обновлено дата метка времени для последнего изменения 2\ коллекция пользователей эта коллекция управляет учетными данными пользователей и информацией об аутентификации поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальное имя пользователя для пользователя электронная почта строка уникальный адрес электронной почты пользователя хешпароля строка хэшированный пароль для безопасной аутентификации создано дата время создания учетной записи обновлено дата метка времени, когда аккаунт был обновлён вы можете создать эти коллекции и добавить поля непосредственно из панели управления back4app создать новый класс чтобы добавить новое поле, просто выберите тип данных, введите имя поля и установите значения по умолчанию или обязательные параметры по мере необходимости создать колонку использование ai агента back4app для генерации схемы интегрированный в back4app ai агент может автоматически генерировать вашу схему на основе вашего описания, упрощая начальную настройку как использовать ai агента получите доступ к ai агенту войдите в свою панель управления back4app и найдите ai агента в настройках проекта опишите вашу модель данных предоставьте подробное объяснение коллекций и полей, которые вам нужны просмотрите и подтвердите ai агент представит предложенную схему проверьте детали и подтвердите настройку пример запроса create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) этот метод с помощью ai ускоряет процесс и гарантирует, что ваша схема идеально соответствует потребностям вашего приложения шаг 3 – активация приложения администратора и выполнение операций crud обзор приложения администратора приложение администратора back4app предоставляет интерфейс без кода, который упрощает управление данными на сервере его функции перетаскивания делают операции crud — такие как добавление, редактирование и удаление записей — более интуитивными включение приложения администратора перейдите в меню “дополнительно” в вашей панели управления back4app выберите “приложение администратора” и нажмите на “включить приложение администратора ” настройте свою учетную запись администратора введя свои учетные данные это также настроит роли (например, b4aadminuser ) и системные классы включить приложение администратора после активации войдите в приложение администратора, чтобы легко управлять своими данными панель управления приложения администратора выполнение задач crud через приложение администратора внутри приложения администратора вы можете вставить новые записи используйте кнопку “добавить запись” в коллекции (например, товары), чтобы создать новые записи просматривать и изменять записи нажмите на любую запись, чтобы увидеть ее детали и внести изменения удалить записи удалите любые записи, которые больше не нужны этот интуитивно понятный интерфейс значительно улучшает ваш опыт управления данными шаг 4 – подключение вашего приложения remix js к back4app теперь, когда ваш бэкенд настроен, пришло время интегрировать ваше приложение remix js с back4app использование rest api вызовов в remix js поскольку sdk parse обычно не используется с remix js, вы будете выполнять операции crud через rest api запросы 1\ настройка вашего проекта remix js если вы еще этого не сделали, создайте новый проект remix npx create remix\@latest следуйте подсказкам, чтобы выбрать целевую платформу для развертывания 2\ выполнение api запросов из remix создайте файлы маршрутов api в app/routes каталоге для обработки операций crud например, у вас может быть файл с именем items server js , который включает функции для получения, создания, обновления и удаления элементов пример получение элементов // app/routes/items server js import { json } from "@remix run/node"; export async function loader() { const response = await fetch("https //parseapi back4app com/classes/items", { method "get", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", }, }); const data = await response json(); return json(data); } аналогично, вы можете создать маршруты post, put и delete для обработки создания, обновления и удаления элементов 3\ подключение компонентов пользовательского интерфейса в ваших компонентах remix вы можете использовать хуки, такие как useloaderdata для получения данных и fetch api или функций действий для отправки данных обратно в back4app например, в вашем компоненте react // app/routes/items jsx import { useloaderdata, form } from "@remix run/react"; export default function items() { const data = useloaderdata(); return ( \<div> \<h1>items list\</h1> {data results map((item) => ( \<div key={item objectid}> \<h2>{item title}\</h2> \<p>{item description}\</p> \</div> ))} \<form method="post"> \<input type="text" name="title" placeholder="item title" required /> \<textarea name="description" placeholder="item description" required /> \<button type="submit">add item\</button> \</form> \</div> ); } интегрируйте аналогичные вызовы api для операций обновления и удаления в ваших действиях remix шаг 5 – защита вашего бэкенда реализация списков контроля доступа (acl) укрепите безопасность данных, установив acl для ваших объектов например, чтобы создать предмет, доступный только его создателю // example api call to create a private item using acls async function createprivateitem(title, description, usersessiontoken) { const response = await fetch("https //parseapi back4app com/classes/items", { method "post", headers { "x parse application id" "your application id", "x parse rest api key" "your rest api key", "content type" "application/json", "x parse session token" usersessiontoken, }, body json stringify({ title, description, acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } }, }), }); return response json(); } разрешения на уровне класса (clp) настройте clp в вашей панели управления back4app, чтобы обеспечить соблюдение стандартных политик безопасности, гарантируя, что только аутентифицированные пользователи могут получать доступ к определенным коллекциям шаг 6 – добавление аутентификации пользователей настройка управления пользователями back4app использует встроенный класс пользователя parse для управления аутентификацией в вашем приложении remix обрабатывайте регистрацию и вход пользователей с помощью api вызовов пример конечная точка регистрации пользователя // app/routes/signup server js import { json, redirect } from "@remix run/node"; export async function action({ request }) { const formdata = await request formdata(); const username = formdata get("username"); const password = formdata get("password"); const email = formdata get("email"); const response = await fetch("https //parseapi back4app com/users", { 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({ username, password, email }), }); if (!response ok) { throw new error("signup failed"); } return redirect("/login"); } реализуйте аналогичные конечные точки для входа, управления сессиями и сброса пароля шаг 7 – развертывание вашего приложения remix js back4app поддерживает бесшовное развертывание вы можете развернуть ваше приложение remix js, используя различные стратегии, включая docker 7 1 сборка вашего приложения remix js компиляция и упаковка используйте ваш менеджер пакетов и скрипты сборки (например, через npm run build ) для компиляции вашего приложения проверьте вывод убедитесь, что ваш выход сборки содержит все необходимые файлы 7 2 пример структуры проекта типичный проект remix js может выглядеть следующим образом basic crud app remix/ \| app/ \| | routes/ \| | | items jsx \| | | items server js \| | | signup server js \| | components/ \| | itemform jsx \| public/ \| package json \| remix config js \| readme md 7 3 пример структуры проекта 7 3 докеризация вашего приложения если вы выберете контейнеризацию, добавьте dockerfile в корень вашего проекта \# use an official node js runtime as a base from node 16 alpine \# set the working directory in the container workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the application code copy \# build the remix app run npm run build \# expose the port the app runs on expose 3000 \# start the application cmd \["npm", "start"] 7 4 развертывание через back4app web deployment подключите ваш репозиторий разместите исходный код вашего remix js на github настройте развертывание в вашей панели управления back4app выберите web deployment функцию, свяжите ваш репозиторий (например, basic crud app remix ), и выберите правильную ветку установите команды сборки и вывода укажите вашу команду сборки (например, npm run build ) и директорию вывода разверните ваше приложение нажмите deploy и следите за логами, пока ваше приложение не станет доступным шаг 8 – завершение и будущие направления молодец! теперь вы создали crud приложение с использованием remix js, интегрированное с back4app в этом руководстве вы настроили проект под названием basic crud app remix , определили коллекции для элементов и пользователей, а также управляли данными через приложение администратора back4app затем вы подключили свое приложение remix js к back4app через вызовы rest api и реализовали безопасную аутентификацию пользователей и меры по защите данных следующие шаги улучшите ваше приложение рассмотрите возможность добавления дополнительных функций, таких как функция поиска, детальные представления элементов или обновления в реальном времени расширьте возможности бэкенда изучите облачные функции, интеграции с внешними api или более сложный контроль доступа продолжайте учиться посетите документацию back4app https //www back4app com/docs и изучите дополнительные учебные материалы по remix js, чтобы еще больше оптимизировать ваше приложение счастливого кодирования и удачи в вашем путешествии с remix js!