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

введение в этом руководстве вы узнаете, как создать веб приложение crud (создание, чтение, обновление, удаление) с использованием gatsby мы будем использовать back4app в качестве облачного бэкенда для легкого управления данными это руководство проведет вас через настройку проекта back4app, определение гибкой схемы и подключение вашего приложения gatsby к rest или graphql api для выполнения операций crud сначала вы создадите проект back4app с именем basic crud app gatsby этот проект предоставляет вам доступ к мощной нереляционной базе данных вы будете разрабатывать свою схему данных, вручную создавая классы и поля в панели управления back4app или используя ai агента back4app затем вы будете использовать приложение администратора back4app — интерфейс перетаскивания — для легкого выполнения задач управления данными наконец, вы интегрируете ваше приложение gatsby с api back4app (через rest или graphql) для выполнения безопасных операций crud к концу этого учебника вы разработаете готовое к производству приложение gatsby, которое выполняет основные операции crud с безопасной обработкой данных и аутентификацией пользователей ключевые выводы узнайте, как создать приложение crud с помощью gatsby, поддерживаемое низкокодовой платформой поймите, как структурировать ваш бэкенд и связать его с современным сайтом на gatsby используйте интуитивно понятное приложение admin от back4app для управления созданием, чтением, обновлением и удалением данных узнайте о вариантах развертывания, включая стратегии контейнеризации для вашего приложения gatsby предварительные требования перед началом убедитесь, что у вас есть аккаунт back4app с активным проектом нужна помощь? смотрите начало работы с back4app https //www back4app com/docs/get started/new parse app среда node js с установленным gatsby cli используйте node js https //nodejs org/ и установите gatsby через npm install g gatsby cli знание react, graphql и rest api при необходимости ознакомьтесь с документацией react https //reactjs org/docs/getting started html шаг 1 – настройка вашего проекта создание нового проекта back4app войдите в свою учетную запись back4app нажмите на “новое приложение” на вашей панели управления назовите ваш проект basic crud app gatsby и завершите шаги настройки создать новый проект после создания ваш проект появится на панели управления, готовый к настройке бэкенда шаг 2 – определение вашей модели данных настройка вашей схемы для этого crud приложения вам нужно настроить несколько классов в back4app ниже приведены примеры основных классов и полей 1\ класс items этот класс хранит детали о каждом элементе поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название предмета описание строка краткое описание предмета создано дата время создания элемента обновлено дата время, когда элемент был последний раз обновлен 2\ класс пользователей этот класс обрабатывает учетные данные пользователя и аутентификацию поле тип данных описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка уникальный адрес электронной почты пользователя хешпароля строка зашифрованный пароль для входа создано дата время создания аккаунта обновлено дата время последнего обновления аккаунта вы можете добавить эти классы и поля непосредственно в панели управления back4app создать новый класс вы можете определить поля, выбрав тип данных, назвав поле, установив значения по умолчанию и отметив обязательные поля создать колонку использование ai агента back4app для генерации схемы агент ai back4app может автоматически создать вашу схему на основе ваших спецификаций это ускоряет настройку и гарантирует, что ваша модель данных поддерживает все операции crud как использовать агента ai откройте агента ai войдите в свою панель управления back4app и найдите агента ai в настройках вашего проекта введите ваши требования опишите классы и поля, которые вам нужны просмотрите и примените агент предложит схему просмотрите ее и подтвердите для реализации пример запроса create the following classes in my back4app project 1\) class items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) class 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 – подключение вашего приложения gatsby к back4app после настройки вашего бэкенда следующим этапом является связывание вашего приложения gatsby с back4app использование api запросов в gatsby мы будем использовать rest или graphql запросы для связи с back4app второй вариант – использование sdk получение данных с помощью rest вы можете использовать api fetch javascript для получения данных например, чтобы загрузить элементы из back4app // src/services/api js export const fetchitems = async () => { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data results; } catch (error) { console error('error fetching items ', error); return \[]; } }; отправка данных через rest чтобы добавить новый элемент, используйте post запрос // src/services/api js export const createitem = async (title, description) => { try { 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', }, body json stringify({ title, description }), }); const data = await response json(); return data; } catch (error) { console error('error creating item ', error); } }; аналогично вы можете реализовать функции обновления и удаления, используя методы put/post и delete интегрируйте эти api вызовы в ваши страницы или компоненты gatsby для динамического управления данными шаг 5 – защита вашего бэкенда реализация контроля доступа защитите ваши данные, установив списки контроля доступа (acl) в back4app например, чтобы создать элемент, видимый только его владельцу // example payload for a private item const privateitem = { title 'private title', description 'this item is private', acl { " " { "read" false, "write" false }, "user object id" { "read" true, "write" true } } }; разрешения на уровне класса (clp) настройте clp в вашей панели управления back4app, чтобы обеспечить соблюдение правил доступа по умолчанию, гарантируя, что только аутентифицированные пользователи могут получить доступ к определенным классам шаг 6 – добавление аутентификации пользователей настройка учетных записей пользователей в gatsby back4app использует встроенный класс пользователей parse для аутентификации в вашем приложении gatsby управляйте регистрацией и входом пользователей через api вызовы пример регистрация пользователя // src/services/auth js export const signup = async (username, password, email) => { try { 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 }), }); const data = await response json(); return data; } catch (error) { console error('error during sign up ', error); } }; пример вход пользователя // src/services/auth js export const login = async (username, password) => { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', }, }); const data = await response json(); return data; } catch (error) { console error('login error ', error); } }; этот подход можно расширить для управления сессиями, сбросом паролей и многим другим шаг 7 – развертывание вашего приложения gatsby back4app поддерживает плавный процесс развертывания вы можете развернуть ваше приложение gatsby, используя несколько методов, включая контейнеризацию 7 1 создание вашего сайта gatsby установите зависимости запустите npm install соберите сайт используйте команду сборки gatsby gatsby build тестируйте локально запустите вашу сборку для проверки функциональности gatsby serve 7 2 обзор структуры проекта типичная структура проекта gatsby может выглядеть следующим образом basic crud app gatsby/ \| node modules/ \| src/ \| | components/ \| | | itemform js \| | | itemlist js \| | pages/ \| | index js \| | login js \| static/ \| gatsby config js \| package json \| readme md 7 3 докеризация вашего приложения gatsby если вы предпочитаете контейнерные развертывания, добавьте dockerfile \# use an official node js image as the base from node 14 alpine \# set the working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the remaining source code copy \# build the gatsby site run npm run build \# expose port (adjust if needed) expose 8000 \# serve the built site cmd \["npx", "gatsby", "serve", " h", "0 0 0 0"] 7 4 развертывание через back4app web deployment свяжите ваш репозиторий разместите исходный код gatsby на github настройте развертывание в панели управления back4app выберите web deployment , подключите ваш репозиторий (например, basic crud app gatsby ), и выберите ветку установите команды сборки укажите команду сборки (например, npm run build ) и выходной каталог развертывание нажмите deploy и следите за журналами, пока ваш сайт не станет доступен шаг 8 – заключение и следующие шаги отличная работа! вы создали crud приложение на основе gatsby, интегрированное с back4app вы настроили проект под названием basic crud app gatsby , определили свою модель данных, управляли данными с помощью admin app и подключили свой фронтенд на gatsby к back4app, используя rest/graphql api вызовы следующие шаги улучшите свое приложение рассмотрите возможность добавления расширенного поиска, детализированных представлений или обновлений в реальном времени расширьте возможности бэкенда изучите облачные функции, интеграции с api третьих сторон или уточненные контролы доступа на основе ролей узнайте больше посетите документацию back4app https //www back4app com/docs для получения дополнительных сведений и учебных пособий счастливого кодирования и наслаждайтесь созданием вашего crud приложения на gatsby!