How to Build a Basic CRUD App with RedwoodJS? A Step-by-Step Guide

обзор в этом руководстве вы узнаете, как создать базовое crud (создание, чтение, обновление, удаление) приложение с использованием redwoodjs этот учебник проведет вас через процесс настройки вашего проекта с back4app в качестве вашего серверного решения, проектирования надежной схемы базы данных и интеграции ее с фронтендом redwoodjs следуя этим шагам, вы создадите готовое к производству приложение, которое эффективно управляет данными, используя современные методы разработки основные идеи освойте создание crud приложения, которое эффективно обрабатывает данные с помощью мощного серверного решения узнайте, как спроектировать масштабируемую базу данных и объединить ее с интерфейсом redwoodjs для улучшения взаимодействия с пользователем изучите использование инструмента управления без кода с функцией перетаскивания — приложения back4app admin app — для упрощения операций crud изучите стратегии развертывания, включая контейнеризацию с помощью docker, для быстрого запуска вашего веб приложения предварительные требования перед тем как начать, убедитесь, что у вас есть следующее активная учетная запись back4app с новым проектом, готовым к запуску если вам нужна помощь, ознакомьтесь с началом работы с back4app https //www back4app com/docs/get started/new parse app настроенная среда разработки redwoodjs используйте cli redwoodjs для создания вашего приложения убедитесь, что установлен node js (версии 14 или выше) базовое понимание javascript, redwoodjs и graphql для получения дополнительной информации посетите документацию redwoodjs https //redwoodjs com/docs/introduction шаг 1 – инициализация вашего проекта запуск нового проекта back4app войдите в свою панель управления back4app выберите “новое приложение” чтобы начать новый проект назовите ваш проект basic crud app redwoodjs и следуйте инструкциям по настройке создать новый проект ваш проект теперь появится на панели управления, закладывая основу для вашей конфигурации и управления бэкендом шаг 2 – создание схемы базы данных структурирование вашей модели данных для этого crud приложения вы создадите несколько коллекций ниже приведены примеры двух основных коллекций вместе с необходимыми полями эти настройки имеют решающее значение для обеспечения надежной функциональности crud 1\ коллекция элементы эта коллекция содержит информацию о каждом элементе поле тип данных цель ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое резюме, описывающее предмет создано в дата время создания записи обновлено дата время последнего обновления 2\ сбор пользователи эта коллекция хранит учетные данные и детали пользователя поле тип данных цель ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хэш пароля строка зашифрованный пароль для аутентификации создано в дата время создания аккаунта обновлено дата время последнего обновления вы можете настроить эти коллекции непосредственно в панели управления back4app, создавая новые классы и добавляя соответствующие столбцы создать новый класс определите каждое поле, выбрав его тип, назвав его и установив его статус по умолчанию или обязательный создать колонку использование ai агента back4app для создания схемы ai агент back4app, доступный из вашей панели управления, может автоматически генерировать схему вашей базы данных на основе описательного запроса эта функция значительно ускоряет настройку согласованной схемы для вашего приложения как использовать ai агента запустите ai агента получите доступ к агенту из вашей панели управления back4app или настроек проекта подробно опишите вашу модель данных введите подробный запрос, описывающий коллекции и поля, которые вам нужны просмотрите и примените изучите предложенные схемы и примените их к вашему проекту пример запроса create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated primary key) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated primary key) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) использование этого подхода на основе ии не только экономит время, но и гарантирует хорошо оптимизированную и единообразную схему шаг 3 – активация админ приложения и управление crud операциями введение в админ приложение приложение back4app admin — это удобный интерфейс без кода, который позволяет вам легко управлять вашими данными на сервере его функция перетаскивания делает выполнение операций crud — таких как добавление, просмотр, обновление и удаление записей — простым делом как включить приложение admin перейдите в меню “дополнительно” на вашей панели управления back4app выберите “admin app” и затем нажмите на “включить admin app ” настройте свои учетные данные администратора создав первоначального администратора, что также устанавливает роли (например, b4aadminuser ) и системные коллекции включить admin app после активации войдите в приложение admin, чтобы управлять вашими данными панель управления admin app выполнение crud через приложение admin в приложении admin вы можете добавить новые записи используйте кнопку “добавить запись” в коллекции (например, товары), чтобы вставить новые данные просмотреть и изменить записи нажмите на запись, чтобы увидеть ее детали и внести изменения удалить записи выберите опцию удаления, чтобы устранить данные, которые больше не нужны этот интуитивно понятный интерфейс значительно упрощает задачи управления данными шаг 4 – интеграция redwoodjs с back4app теперь, когда ваш бэкенд настроен и управляется через admin app, пришло время подключить ваш фронтенд на redwoodjs к back4app использование интеграции graphql api redwoodjs построен вокруг graphql, что делает его идеальным для интеграции с back4app через api вызовы вместо использования sdk вы будете взаимодействовать с вашим бэкендом, используя запросы и мутации graphql настройка вашего проекта redwoodjs создайте новое приложение redwoodjs yarn create redwood app basic crud app redwood перейдите в каталог вашего проекта cd basic crud app redwood настройте ваши переменные окружения в вашем env файле добавьте свои учетные данные back4app back4app app id=your application id back4app rest api key=your rest api key back4app server url=https //parseapi back4app com получение данных с помощью ячеек redwoodjs ячейки redwoodjs упрощают получение данных вот пример ячейки, которая извлекает элементы // web/src/components/itemscell/itemscell js export const query = gql` query items query { items itemscollection { id title description } } `; export const loading = () => \<div>loading items…\</div>; export const empty = () => \<div>no items available \</div>; export const failure = ({ error }) => \<div>error {error message}\</div>; export const success = ({ items }) => { return ( \<ul> {items map((item) => ( \<li key={item id}> \<strong>{item title}\</strong> — {item description} \</li> ))} \</ul> ); }; вы можете интегрировать аналогичные запросы и мутации graphql в ваши компоненты redwoodjs для выполнения операций crud шаг 5 – защита вашего бэкенда реализация контроля доступа защитите ваши данные, установив списки контроля доступа (acl) непосредственно на объекты например, при создании приватного элемента вы можете убедиться, что только владелец имеет права на чтение/запись async function createprivateitem(itemdata, owner) { const response = await fetch(`${process env back4app server url}/classes/items`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ title itemdata title, description itemdata description, acl { \[owner] { read true, write true }, " " { read false, write false } } }) }); return response json(); } настройка разрешений на уровне классов в панели управления back4app установите разрешения на уровне классов (clp) для каждой коллекции, чтобы ограничить доступ для аутентифицированных пользователей или конкретных ролей, обеспечивая безопасность ваших данных шаг 6 – управление аутентификацией пользователей настройка управления учетными записями back4app использует надежную систему пользователей, которую вы можете интегрировать в redwoodjs для аутентификации пользователей в вашем приложении redwoodjs обрабатывайте регистрацию и вход пользователей через api вызовы пример регистрация пользователя // web/src/components/auth/signup js import { usestate } from 'react'; const signup = () => { const \[username, setusername] = usestate(''); const \[email, setemail] = usestate(''); const \[password, setpassword] = usestate(''); const handlesignup = async (e) => { e preventdefault(); try { const response = await fetch(`${process env back4app server url}/users`, { method 'post', headers { 'x parse application id' process env back4app app id, 'x parse rest api key' process env back4app rest api key, 'content type' 'application/json' }, body json stringify({ username, email, password }) }); const data = await response json(); if (data error) { alert('sign up failed ' + data error); } else { alert('user successfully registered!'); } } catch (error) { console error('registration error ', error); } }; return ( \<form onsubmit={handlesignup}> \<input type="text" placeholder="username" value={username} onchange={(e) => setusername(e target value)} /> \<input type="email" placeholder="email" value={email} onchange={(e) => setemail(e target value)} /> \<input type="password" placeholder="password" value={password} onchange={(e) => setpassword(e target value)} /> \<button type="submit">sign up\</button> \</form> ); }; export default signup; аналогичный метод можно применить для входа в систему и поддержания сеансов пользователей шаг 7 – развертывание вашего фронтенда redwoodjs через веб развертывание функция веб развертывания back4app делает хостинг вашего фронтенда redwoodjs бесшовным следуйте этим шагам, чтобы отправить ваш код в продакшн 7 1 создайте свою производственную версию откройте папку вашего проекта в терминале запустите команду сборки yarn rw build это создаст папку web/dist с вашими оптимизированными статическими файлами проверьте вывод сборки убедитесь, что папка web/dist содержит файл index html вместе со всеми необходимыми ресурсами 7 2 организуйте и зафиксируйте свой исходный код ваш репозиторий должен содержать полный исходный код вашего приложения на redwoodjs типичная структура может быть следующей basic crud app redwood/ ├── api/ ├── web/ │ ├── dist/ │ ├── src/ │ │ ├── components/ │ │ │ ├── itemscell/ │ │ │ └── auth/ │ │ └── app js │ └── index html ├── env └── package json коммит в github инициализируйте git (если необходимо) git init добавьте ваши файлы в индекс git add закоммитьте ваш код git commit m "первый коммит для redwoodjs crud фронтенда" создайте репозиторий на github (например, basic crud app redwood ) и отправьте ваш код git remote add origin https //github com/your username/basic crud app redwood git git push u origin main 7 3 интеграция с веб развертыванием доступ к веб развертыванию из вашей панели управления back4app в вашем проекте (basic crud app redwood) подключите свою учетную запись github , если вы еще этого не сделали, следуя подсказкам выберите свой репозиторий и ветку (например, main ) содержащие ваш код redwoodjs 7 4 установите параметры развертывания команда сборки укажите yarn rw build , если ваш репозиторий не включает предварительно собранное распределение каталог вывода настройте каталог вывода как web/dist переменные окружения включите все необходимые переменные окружения, такие как ваши ключи back4app 7 5 контейнеризация с docker если вы предпочитаете docker для развертывания, включите dockerfile в ваш репозиторий например \# use an official node image for building the app from node 16 alpine as builder \# set the working directory workdir /app \# copy dependency definitions copy package json / \# install dependencies run yarn install \# copy the project files copy \# build the redwoodjs app run yarn rw build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/web/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 6 развертывание приложения нажмите кнопку развертывание в back4app после завершения настройки отслеживайте процесс развертывания back4app получит ваш код, соберет проект и развернет его в контейнеризованной среде получите url вашего приложения после развертывания будет предоставлен url, по которому размещено ваше приложение redwoodjs 7 7 проверьте ваше развертывание откройте предоставленный url в вашем браузере, чтобы подтвердить, что сайт загружается проверьте функциональность приложения убедитесь, что все страницы, маршруты и ресурсы загружаются корректно устраните неполадки, если необходимо используйте инструменты разработчика браузера и журналы развертывания back4app для необходимой отладки шаг 8 – заключительные мысли и будущие направления поздравляем с созданием вашего crud приложения на основе redwoodjs с использованием back4app! вы успешно настроили проект под названием basic crud app redwood , создали подробные коллекции базы данных для предметов и пользователей, а также интегрировали чистый интерфейс с надежным управлением данными и безопасностью что дальше? усовершенствуйте ваш интерфейс улучшите ваше приложение на redwoodjs с помощью таких функций, как подробные страницы предметов, функции поиска и обновления в реальном времени внедрите расширенные функции рассмотрите возможность добавления безсерверных функций, интеграций с третьими сторонами или более сложных контролей доступа изучите дополнительные ресурсы углубитесь в документацию back4app https //www back4app com/docs и руководства redwoodjs https //redwoodjs com/docs для дальнейших улучшений следуя этому руководству, вы теперь обладаете знаниями для разработки масштабируемого crud бэкенда и бесшовной интеграции его с современным интерфейсом redwoodjs с использованием back4app наслаждайтесь вашим кодированием!