Как создать фронтенд на Remix и подключить его к бэкенду?

в этом учебном пособии вы создадите приложение список дел, используя remix, и подключите его к управляемой службе бэкенда на back4app этот пошаговый гид предназначен для того, чтобы помочь вам освоить основные операции crud и разработать динамический пользовательский интерфейс с использованием remix создание полнофункционального приложения включает в себя настройку как фронтенда, так и бэкенда используя back4app, вы можете воспользоваться масштабируемым бэкендом как услугой (baas), чтобы сосредоточиться на создании привлекательного пользовательского опыта, не углубляясь в конфигурацию сервера back4app предоставляет готовую к использованию базу данных, аутентификацию, облачные функции и sdk для бесшовной интеграции с этими возможностями вы можете быстро прототипировать, строить и развертывать ваше приложение remix основные выводы следуя этому учебному пособию, вы инициализируйте современный проект remix, используя стандартные инструменты подключите ваш фронтенд remix к бэкенду back4app с помощью parse sdk реализуйте операции crud для управления вашим списком дел контейнеризируйте ваше приложение remix и разверните его через веб развертывание back4app предварительные требования перед тем как начать, убедитесь, что у вас есть следующее node js и npm установлены на вашей системе проверьте, выполнив node v и npm v в вашем терминале базовые знания remix , включая маршрутизацию, загрузчики и действия знание концепций react будет полезным, так как remix строится на react аккаунт на back4app для настройки и управления вашими бэкенд сервисами зарегистрируйтесь на back4app https //www back4app com/ если вы еще этого не сделали с этими инструментами вы готовы создать ваше приложение remix и интегрировать его с надежным бэкендом настройка проекта сначала настройте свою локальную среду разработки и инициализируйте свой проект remix это обеспечит вам чистую и эффективную основу для вашего приложения начните с установки проекта remix, используя следующую команду замените todo app на желаемое имя вашего проекта npx create remix\@latest todo app перейдите в каталог вашего нового проекта cd todo app запустите сервер разработки, чтобы убедиться, что все работает npm run dev откройте url, предоставленный в вашем терминале, чтобы подтвердить, что ваше приложение remix успешно работает настройка бэкенда todo на back4app back4app предлагает мощный управляемый бэкенд на базе parse вы создадите модель данных для ваших задач, которая будет служить основой для вашего приложения списка дел создание вашего бэкенд приложения войдите в ваш панель управления back4app https //www back4app com/ и нажмите "создать новое приложение " назовите ваше приложение (например, todoremixapp ) и выберите nodejs/parse в качестве типа бэкенда в разделе "база данных" > "обозреватель" нажмите "создать класс" и выберите "пользовательский " назовите класс задача и установите разрешения уровня класса, чтобы разрешить публичное чтение и запись (вы можете уточнить эти настройки позже) добавьте следующие поля в класс задача название (string) – название задачи описание (string) – подробности о задаче завершено (boolean) – указывает, выполнена ли задача срок (date) – срок выполнения задачи нажмите "сохранить" для завершения схемы интеграция back4app с remix вы будете использовать parse javascript sdk для подключения вашего приложения remix к back4app установите sdk, выполнив npm install parse далее настройте parse в вашем приложении remix откройте файл app/root tsx и добавьте следующий код инициализации в верхней части замените 'your application id' и 'your javascript key' на ваши учетные данные из панели управления back4app (в разделе app settings > security & keys ) // app/root tsx import parse from "parse"; import react from "react"; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); (parse as any) serverurl = parse server url; чтобы убедиться, что parse полностью инициализирован, когда выполняется ваша функция загрузчика, особенно на стороне сервера добавьте этот код в вашу layout функцию в файле root tsx // app/root tsx export function layout({ children } { children react reactnode }) { react useeffect(() => { if (typeof window !== 'undefined') { parse initialize(parse app id, parse js key); (parse as any) serverurl = "https //parseapi back4app com/"; } }, \[]); // rest of the layout function } эта настройка позволяет вашим маршрутам и действиям remix взаимодействовать с вашим бэкендом back4app без проблем создание фронтенда с помощью remix с настроенным бэкендом вы теперь создадите интерфейс списка дел, используя remix это включает в себя создание маршрутов, загрузчиков и действий для обработки получения данных и мутаций структурирование ваших маршрутов в remix каждый маршрут соответствует файлу в директории app/routes откройте app/routes/ index tsx и добавьте следующий код для определения структуры страницы и операций с данными // app/routes/ index tsx import { json, redirect } from "@remix run/node"; import { useloaderdata, form } from "@remix run/react"; import as parse from "parse"; export const loader = async () => { if (typeof window === "undefined") { try { const response = await fetch( "https //parseapi back4app com/classes/task", { headers { "x parse application id" "your application id", "x parse javascript key" "your javascript key", }, } ); const data = await response json(); return json({ tasks data results map((task) => ({ id task objectid, task })), }); } catch (error) { console error("error fetching tasks ", error); return json({ tasks \[] }); } } else { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); const tasks = results map((task) => ({ id task id, task tojson() })); return json({ tasks }); } catch (error) { console error("error fetching tasks ", error); return json({ tasks \[] }); } } }; export const action = async ({ request }) => { const formdata = await request formdata(); const actiontype = formdata get("actiontype"); // parse server details const parseserverurl = "https //parseapi back4app com"; const headers = { "x parse application id" "your application id", "x parse javascript key" "your javascript key", "content type" "application/json", }; try { if (actiontype === "add") { const title = formdata get("title"); const description = formdata get("description"); // create task using rest api const response = await fetch(`${parseserverurl}/classes/task`, { method "post", headers, body json stringify({ title, description, completed false, }), }); if (!response ok) { throw new error(`failed to add task ${response status}`); } } else if (actiontype === "toggle") { const id = formdata get("id"); // first get the current task to check its completed status const getresponse = await fetch(`${parseserverurl}/classes/task/${id}`, { headers, }); if (!getresponse ok) { throw new error(`failed to get task ${getresponse status}`); } const task = await getresponse json(); const updateresponse = await fetch( `${parseserverurl}/classes/task/${id}`, { method "put", headers, body json stringify({ completed !task completed, }), } ); if (!updateresponse ok) { throw new error(`failed to update task ${updateresponse status}`); } } else if (actiontype === "delete") { const id = formdata get("id"); const deleteresponse = await fetch( `${parseserverurl}/classes/task/${id}`, { method "delete", headers, } ); if (!deleteresponse ok) { throw new error(`failed to delete task ${deleteresponse status}`); } } return redirect("/"); } catch (error) { console error("error processing action ", error); return json({ error error message }, { status 400 }); } }; export default function todoroute() { const { tasks } = useloaderdata(); return ( \<div classname="container"> \<h1>to do list\</h1> \<form method="post" classname="form"> \<input type="hidden" name="actiontype" value="add" /> \<input type="text" name="title" placeholder="task title" required /> \<input type="text" name="description" placeholder="description" required /> \<button type="submit">add task\</button> \</form> \<div classname="tasks"> {tasks length === 0 ? ( \<p>no tasks available\</p> ) ( tasks map(task => ( \<div key={task id} classname={`task item ${task completed ? "completed" ""}`}> \<h3>{task title}\</h3> \<p>{task description}\</p> \<form method="post"> \<input type="hidden" name="actiontype" value="toggle" /> \<input type="hidden" name="id" value={task id} /> \<button type="submit">{task completed ? "undo" "complete"}\</button> \</form> \<form method="post"> \<input type="hidden" name="actiontype" value="delete" /> \<input type="hidden" name="id" value={task id} /> \<button type="submit">delete\</button> \</form> \</div> )) )} \</div> \</div> ); } этот маршрут использует загрузчики и действия remix для получения задач из back4app и обработки взаимодействий с пользователем, таких как добавление, переключение и удаление задач стилизация вашего remix приложения создайте файл css в app/global css для определения основного внешнего вида вашего приложения / app/global css / container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } tasks p { font size 1rem; } task item { display flex; flex direction column; align items center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } импортируйте файл css в вашем app/root tsx добавив // app/root tsx import " /global css"; ваше remix приложение теперь имеет функциональный интерфейс списка дел, который взаимодействует с бэкендом back4app контейнеризация и развертывание вашего remix приложения на back4app развертывание в back4app предлагает контейнеризированную среду для ваших приложений вы упакуете ваше remix приложение в контейнер docker и развернете его настройка remix для продакшена перед контейнеризацией соберите ваше remix приложение в готовый к продакшену пакет npm run build создание dockerfile создайте dockerfile в корне вашего проекта со следующим содержимым \# stage 1 build the remix app from node 18 alpine as builder workdir /app copy package json package lock json / run npm install copy run npm run build \# stage 2 serve the app using a lightweight node server from node 18 alpine workdir /app copy from=builder /app/build /build copy from=builder /app/package json / run npm install production expose 3000 cmd \["npm", "run", "start"] этот dockerfile собирает ваш проект remix и подготавливает его к производству с использованием минимального времени выполнения node js сборка и тестирование вашего docker контейнера соберите ваш docker образ локально docker build t todo remix frontend запустите контейнер, чтобы протестировать развертывание docker run p 8080 3000 todo remix frontend посетите http //localhost 8080 в вашем браузере, чтобы убедиться, что ваше приложение remix работает правильно развертывание через back4app web deployment отправьте ваш проект на github git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main затем войдите в back4app web deployment https //www back4app com/containers и выполните следующие шаги нажмите "создать новое приложение" и назовите ваш проект выберите github repository и авторизуйте back4app выберите ваш todo remix репозиторий выберите dockerfile deployment и подтвердите настройки сборки нажмите "развернуть" чтобы начать сборку после развертывания следите за вашим контейнером через панель управления back4app вы можете просматривать логи, управлять сборками и настраивать пользовательские домены тестирование и отладка вашего приложения после развертывания убедитесь, что ваше приложение работает как ожидалось вот как проверить интеграцию фронтенда и бэкенда подключение api откройте консоль разработчика вашего браузера (f12) и проверьте сетевые запросы при добавлении, переключении или удалении задач сохранение данных добавьте задачи через интерфейс и обновите страницу, чтобы подтвердить, что они сохранены проверьте изменения в браузере базы данных back4app в классе task операции crud проверьте переключение статуса выполнения и удаление задач если возникнут проблемы, проверьте консоль и журналы api обработка крайних случаев попробуйте отправить пустые данные, чтобы убедиться, что ваши проверки работают лучшие практики и советы по оптимизации следуйте этим рекомендациям, чтобы повысить безопасность, производительность и масштабируемость оптимизация вызовов api используйте пакетные запросы и выбирайте только необходимые поля в запросах переменные окружения храните чувствительные ключи (id приложения и ключ javascript) в файле env и ссылайтесь на них безопасно контроль доступа реализуйте динамические acl для ограничения модификации данных только для аутентифицированных пользователей облачный код перенесите сложную логику в облачный код back4app для повышения производительности и безопасности заключение вы успешно создали полнофункциональное приложение to do list с помощью remix и подключили его к бэкенду back4app этот учебник провел вас через инициализацию проекта remix, интеграцию службы управления для взаимодействия с бэкендом и контейнеризацию вашего приложения для развертывания теперь, когда ваше приложение работает, подумайте о расширении его функционала с помощью продвинутого управления пользователями, обновлений в реальном времени или интеграций с третьими сторонами для получения дополнительной информации изучите документацию back4app https //www back4app com/docs и ресурсы remix