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

обзор в этом учебном пособии вы научитесь создавать приложение react native, которое выполняет основные операции crud (создание, чтение, обновление, удаление) с использованием back4app в качестве облачного бэкенда этот гид проведет вас через создание проекта в back4app, настройку гибкой модели данных и интеграцию вашего приложения react native с бэкендом с использованием restful api сначала вы создадите проект back4app под названием basic crud app reactnative для использования в качестве вашего бэкенда затем вы разработаете свою схему данных, вручную определяя классы и поля в панели управления back4app или используя встроенный ai agent для помощи после настройки вашего бэкенда вы будете использовать приложение back4app admin, которое предлагает удобный интерфейс перетаскивания для управления вашими данными, что упрощает выполнение операций crud к концу этого руководства у вас будет полностью функциональное приложение react native, которое может создавать, читать, обновлять и удалять записи, а также поддерживать безопасную аутентификацию пользователей и обработку данных основные преимущества создание мобильного приложения узнайте, как разработать приложение crud на react native с надежным бэкендом интеграция бэкенда поймите, как спроектировать и интегрировать масштабируемую модель данных с использованием back4app управление данными без усилий используйте приложение администратора back4app для быстрого управления данными вашего приложения безопасные операции реализуйте безопасную аутентификацию пользователей и меры по защите данных предварительные требования перед началом убедитесь, что у вас есть активная учетная запись back4app с настроенным новым проектом нужна помощь? обратитесь к начало работы с back4app https //www back4app com/docs/get started/new parse app среда разработки react native установите такие инструменты, как node js, npm (или yarn) и react native cli expo также можно использовать для быстрого прототипирования знание react, javascript и rest api обратитесь к документации react native https //reactnative dev/docs/getting started если вам нужно освежить знания шаг 1 – настройка вашего проекта back4app создание вашего проекта back4app войдите в свою учетную запись back4app нажмите кнопку “новое приложение” на вашей панели управления назовите ваш проект basic crud app reactnative и следуйте инструкциям для завершения настройки создать новый проект после создания вашего проекта он появится на вашей панели управления, закладывая основу для вашей конфигурации бэкенда шаг 2 – создание вашей модели данных структурирование ваших данных для этого crud приложения вы определите несколько коллекций в вашем проекте back4app ниже приведены примеры ключевых коллекций и полей, необходимых для поддержки основных функций crud 1\ коллекция элементы эта коллекция хранит детали для каждого элемента поле тип описание ид идентификатор объекта автоматически сгенерированный уникальный идентификатор название строка название или заголовок элемента описание строка краткое объяснение предмета создано дата время, когда элемент был добавлен обновлено дата метка времени для самого последнего обновления 2\ сбор пользователи эта коллекция управляет учетными данными пользователей и информацией об аутентификации поле тип описание ид идентификаторобъекта автоматически сгенерированный уникальный идентификатор имя пользователя строка уникальный идентификатор для пользователя электронная почта строка электронная почта пользователя (должна быть уникальной) хешпароля строка хэшированный пароль для безопасного входа создано дата время, когда была создана учетная запись обновлено дата время, когда данные учетной записи были в последний раз обновлены вы можете определить эти коллекции и их поля через панель управления back4app создать новый класс вы можете добавить новые поля, выбрав тип данных, введя имя поля, установив значение по умолчанию и отметив, является ли оно обязательным создать колонку использование ai агента back4app для генерации схемы интегрированный ai агент в back4app может автоматически создать вашу схему данных из простого описания этот инструмент помогает упростить настройку вашего проекта и гарантирует, что ваша модель данных поддерживает необходимые операции crud как использовать 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) этот метод экономит ваше время и обеспечивает согласованность в вашей модели данных шаг 3 – использование админ приложения для управления данными обзор админ приложения админ приложение back4app предоставляет интерфейс без кода, который упрощает управление данными на сервере его функция перетаскивания позволяет выполнять операции crud — добавление, просмотр, обновление и удаление записей — без написания сложных запросов включение админ приложения перейдите в меню “дополнительно” в вашей панели управления back4app нажмите на “admin app” и затем выберите “включить admin app ” настройте учетные данные администратора создайте свою первоначальную учетную запись администратора, которая также настраивает системные роли, такие как b4aadminuser включить admin app после активации войдите в admin app, чтобы управлять данными вашего приложения панель управления admin app управление crud операциями через admin app внутри admin app вы можете вставить новые записи используйте функцию “добавить запись” в любой коллекции (например, элементы), чтобы ввести новые данные изучить/изменить записи выберите запись, чтобы просмотреть детали или обновить ее поля удалить записи удалите записи, которые больше не нужны этот упрощенный инструмент улучшает ваш рабочий процесс, делая управление данными простым шаг 4 – интеграция вашего react native приложения с back4app после настройки вашего бэкенда пришло время подключить ваше react native приложение к back4app использование rest api для интеграции хотя существует sdk parse для javascript, в среде react native вы можете выбрать использование стандартных вызовов rest api для гибкости ниже приведен пример того, как выполнять операции crud с использованием javascript fetch api пример получение элементов async function fetchitems() { try { 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(); console log('fetched items ', data results); } catch (error) { console error('error fetching items ', error); } } export default fetchitems; пример создание нового элемента async function createitem(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(); console log('item created ', data); } catch (error) { console error('error creating item ', error); } } export { createitem }; вы также можете реализовать функции для обновления и удаления элементов, используя соответствующие http методы (put/post для обновлений и delete для удаления) интегрируйте эти функции в ваши компоненты react native по мере необходимости, чтобы завершить операции crud шаг 5 – улучшение безопасности бэкенда настройка списков контроля доступа (acl) защитите свои записи, настроив acl например, чтобы гарантировать, что элемент доступен только его владельцу async function createprivateitem(title, description, ownerid) { try { const acl = { " " { "read" false, "write" false }, \[ownerid] { "read" true, "write" true } }; 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, acl acl }) }); const data = await response json(); console log('private item created ', data); } catch (error) { console error('error creating private item ', error); } } export { createprivateitem }; настройка разрешений на уровне класса (clp) настройте разрешения по умолчанию для ваших коллекций через панель управления back4app это гарантирует, что только аутентифицированные пользователи могут взаимодействовать с определенными типами данных шаг 6 – реализация аутентификации пользователей настройка управления пользователями back4app использует встроенную коллекцию пользователей для обработки аутентификации в вашем приложении react native вы можете управлять регистрацией и входом пользователей с помощью вызовов rest api пример регистрация пользователя async function signup(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(); console log('user registered successfully ', data); } catch (error) { console error('error during sign up ', error); } } export { signup }; пример вход пользователя async function login(username, password) { try { const response = await fetch(`https //parseapi back4app com/login?username=${username}\&password=${password}`, { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('logged in user ', data); } catch (error) { console error('login failed ', error); } } export { login }; этот подход можно расширить, чтобы включить сброс пароля, управление сессиями и дополнительные функции аутентификации заключение и следующие шаги отличная работа! вы успешно создали приложение crud на react native, интегрированное с back4app в этом руководстве вы настроили проект под названием basic crud app reactnative , разработали схему данных для элементов и пользователей и управляли своим бэкендом с помощью приложения администратора back4app более того, вы подключили свое приложение через rest api и реализовали важные меры безопасности и аутентификации пользователей что дальше? расширьте свое приложение добавьте больше функций, таких как расширенная фильтрация, детальные представления элементов или обновления данных в реальном времени улучшите возможности бэкенда изучите облачные функции, интеграции с третьими сторонами или уточните свои политики контроля доступа продолжайте учиться посмотрите документацию back4app https //www back4app com/docs и дополнительные учебные пособия, чтобы еще больше улучшить свои навыки счастливого кодирования и удачи с вашим проектом на react native!