How to Build a Backend for React Native?

введение в этом учебном пособии вы научитесь создавать бэкенд для react native с использованием back4app мы сосредоточимся на совместимости между платформами и проиллюстрируем, как вы можете интегрировать основные функции back4app для управления данными, аутентификации пользователей и работы с данными в реальном времени используя rest и graphql api, вы можете разработать свой проект react native для работы как на ios, так и на android, обеспечивая бесшовный опыт работы с нативными компонентами и мобильными приложениями реализация безопасного входа пользователей, планирование задач и использование приложений в реальном времени упростят ваш путь как разработчика полного стека вы также увидите, как среда back4app может сократить время, необходимое для настройки таких услуг, как хостинг, база данных и уровни безопасности к концу вы получите надежную структуру бэкенда, которая поддерживает ваше приложение react native и прокладывает путь для создания мобильных решений в большом масштабе после завершения этого руководства вы будете готовы расширить свое приложение с помощью расширенных функций, интегрировать сторонние сервисы или превратить ваш проект в платформу, готовую к производству давайте погрузимся в современную разработку мобильных приложений с back4app и react native! предварительные требования для завершения этого учебника вам понадобятся учетная запись back4app и новый проект back4app начало работы с back4app https //www back4app com/docs/get started/new parse app если у вас нет учетной записи, зарегистрируйтесь бесплатно затем следуйте руководству, чтобы подготовить ваш проект базовая среда разработки react native вы можете использовать быстрый старт с react native cli https //reactnative dev/docs/environment setup или expo cli https //docs expo dev/get started/installation/ убедитесь, что у вас установлен node js установленный node js (версия 14 или выше) вам нужен node js для установки npm пакетов и запуска локальных серверов разработки установка node js https //nodejs org/en/download/ знание javascript и основных концепций react native официальная документация react native https //reactnative dev/ если вы новичок в разработке на react native, сначала ознакомьтесь с документацией или учебником для начинающих убедитесь, что у вас есть все эти предварительные требования перед началом создание вашего проекта back4app и настройка локальной среды react native обеспечат гладкий процесс шаг 1 – создание нового проекта на back4app и подключение создать новый проект первый шаг в создании мобильных бэкендов для вашего приложения react native – это создание нового проекта на back4app следуйте этим шагам войдите в свою учетную запись back4app нажмите кнопку “новое приложение” в вашей панели управления back4app дайте вашему приложению имя (например, “reactnative backend tutorial”) после создания проекта он появится на вашей панели управления back4app вы будете использовать этот новый проект для управления данными и настройки безопасности для вашего приложения на react native получение ключей вашего приложения в отличие от веб приложений на react, разработка на react native часто требует прямых http запросов для получения и манипуляции данными поскольку мы сосредоточены на rest api (или graphql api ) вместо parse sdk, вам все равно понадобятся ваши ключи back4app для отправки аутентифицированных запросов получите ваши ключи parse в панели управления back4app откройте раздел настройки приложения или безопасность и ключи чтобы найти ваш идентификатор приложения , ключ rest api , и конечную точку graphql (обычно https //parseapi back4app com/graphql ) запишите ваш ключ rest api вы будете включать его в заголовки fetch или axios вашего react native для аутентификации каждого запроса этот шаг гарантирует, что ваши мобильные приложения могут безопасно взаимодействовать с back4app шаг 2 – настройка базы данных back4app предоставляет широкий спектр вариантов бэкенда для приложений react native, включая надежные возможности управления данными вы можете создавать классы, добавлять поля и определять отношения через панель управления независимо от того, создаете ли вы приложения в реальном времени или более простые crud приложения, панель управления back4app помогает вам легко хранить и организовывать данные создание модели данных перейдите в раздел “база данных” в вашей панели управления back4app создайте новый класс (например, “todo”) и добавьте соответствующие столбцы, такие как title (строка) и iscompleted (булевый) back4app поддерживает различные типы данных строка , число , булевый , объект , дата , файл , указатель , массив , отношение , geopoint , и полигон вы также можете позволить parse автоматически создавать поля, когда вы отправляете новые данные создание модели данных с помощью ai агента если вы предпочитаете, вы можете использовать ai агента back4app откройте ai агента из вашей панели управления приложением опишите вашу модель данных простым языком (например, “создайте класс todo с полями title и iscompleted ”) позвольте ai агенту создать схему для вас это может сэкономить время на ранних этапах вашего проекта react native чтение и запись данных с использованием rest api для типичной разработки react native вы можете использовать нативный fetch api или стороннюю библиотеку, такую как axios для работы с rest api ниже приведен пример с использованием curl, который вы можете адаптировать для fetch post (создать todo) curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo get (получить todos) curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo в вашем приложении react native вы можете сделать то же самое с fetch async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } чтение и запись данных с использованием graphql api если вы предпочитаете graphql, back4app предоставляет конечную точку graphql ниже приведен пример мутации для создания новой записи mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } вы можете выполнять запросы graphql, используя библиотеку, такую как apollo client или даже простой fetch вызов async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { 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({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } работа с живыми запросами (по желанию) для получения данных в реальном времени back4app предлагает живые запросы, хотя обычно это требует использования parse sdk поскольку в этом учебнике мы сосредоточены на rest вызовах, вы можете включить живые запросы в настройках сервера вашего приложения, если планируете использовать их позже данные в реальном времени могут помочь вам мгновенно обновлять пользователей в приложении react native для более простого подхода вы можете опрашивать сервер с вашими собственными интервалами или полагаться на сторонние инструменты шаг 3 – применение безопасности с помощью acl и clp краткий обзор back4app защищает ваш бэкенд с помощью acl (списки управления доступом) и clp (разрешения на уровне класса) они позволяют защищать данные как на уровне объекта, так и на уровне класса они жизненно важны для реализации безопасных пользовательских разрешений в разработке мобильных приложений уровня производства пошагово разрешения на уровне класса (clp) перейдите в раздел база данных вашего приложения, откройте любой класс и переключитесь на "безопасность и разрешения" настройте разрешения на чтение/запись для различных ролей пользователей или публичного доступа acl вы можете применять контроль доступа на уровне объекта, включая acl поля в ваших rest запросах например для получения дополнительной информации ознакомьтесь с руководством по безопасности приложений https //www back4app com/docs/security/parse security шаг 4 – написание функций облачного кода почему облачный код облачный код позволяет вам запускать серверные скрипты на back4app для таких задач, как валидация, триггеры и обработка внешних api вызовов это помогает контролировать логику, которая должна оставаться скрытой от клиента, обеспечивая лучшую безопасность вашего проекта на react native пример функции ниже приведен пример, который вы бы написали в вашем main js на стороне сервера вы можете вызывать его из вашего приложения на react native через rest // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); развертывание back4app cli установите cli, настройте ключ вашей учетной записи и выполните b4a deploy панель управления вы также можете перейти в cloud code > functions , вставить ваш код в main js , и нажать развернуть вызов вашей функции (через rest) используйте rest api напрямую из вашего приложения react native async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } эта гибкость делает вас более эффективным разработчиком полного стека, так как вы можете интегрировать бизнес логику, не раскрывая чувствительные данные на клиенте шаг 5 – настройка аутентификации включить или настроить аутентификацию пользователя back4app использует класс parse user для управления аутентификацией пользователей даже если вы не используете parse sdk в react native, вы можете зарегистрироваться, войти в систему или выйти из нее, используя прямые http запросы зарегистрировать пользователя (rest) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users войти в систему (rest) curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secretpassword' \\ https //parseapi back4app com/login эти запросы возвращают токен сессии, который вы можете сохранить в своем приложении react native для управления сессиями пользователей это гарантирует, что каждый запрос, который вы делаете, может быть авторизован, создавая мобильные приложения, которые остаются безопасными социальный вход back4app поддерживает социальные входы (google, facebook, apple) через специализированные потоки вам нужно будет следовать за документация по социальному входу https //www back4app com/docs/platform/sign in with apple для настройки oauth приложений, а затем отправить соответствующие токены в back4app шаг 6 – обработка хранения файлов настройка хранения файлов back4app может хранить файлы для вашего приложения react native вы можете прикрепить их к объектам или загрузить их напрямую поскольку мы используем rest, ниже приведен пример загрузки файла (кодированного в base64) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary '@path to your file png' \\ https //parseapi back4app com/files/image png ответ возвращает url, который вы можете сохранить в своей базе данных из вашего приложения react native вы можете сделать это с помощью fetch отправив файл как blob или данные формы соображения безопасности чтобы предотвратить несанкционированные загрузки, настройте fileupload параметры в ваших настройках сервера parse например, вы можете разрешить загрузки только от аутентифицированных пользователей это гарантирует, что такие услуги, как хранение файлов, остаются защищенными шаг 7 – подтверждение электронной почты и сброс пароля обзор подтверждение права собственности на электронную почту является ключевым моментом для реализации безопасных пользовательских потоков back4app предлагает встроенные инструменты для проверки электронной почты и сброса паролей конфигурация панели управления back4app откройте настройки вашего приложения включите проверку электронной почты в настройках электронной почты настройте шаблоны для сообщений о сбросе пароля и проверке код/реализация пользователь, который забыл свой пароль, может инициировать запрос на сброс curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset back4app отправляет пользователю электронное письмо для сброса пароля это удобство избавляет вас от необходимости настраивать отдельные почтовые серверы в вашем приложении react native шаг 8 – планирование задач с помощью облачных заданий что делают облачные задания облачные задания помогают вам автоматизировать повторяющиеся задачи, такие как очистка данных или отправка ежедневных отчетов ниже приведен пример задания в main js // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); разверните этот код, затем перейдите в настройки сервера > фоновая работа для его планирования это поддерживает ваши данные актуальными на ваших платформах ios и android без ручного вмешательства шаг 9 – интеграция вебхуков определение вебхуки позволяют вашему бэкенду уведомлять внешние сервисы всякий раз, когда происходит событие например, вы можете уведомить slack или платежный шлюз при создании новой задачи конфигурация перейдите в дополнительно > вебхуки в вашей панели управления back4app добавьте новый вебхук на указанный внешний конечный пункт установите триггеры, чтобы определить, когда изменения данных вашего приложения react native должны вызывать вебхук вы также можете кодировать вебхуки внутри триггеров cloud code, что позволяет вам отправлять http запросы или интегрироваться с api сторонних разработчиков это расширяет возможности вашего бэкенда для работы с широким спектром внешних сервисов шаг 10 – изучение панели администратора back4app где это найти панель администратора back4app – это удобный интерфейс для нетехнических пользователей для управления данными это особенно полезно для владельцев продуктов, представителей клиентов или сотрудников поддержки, которым нужен прямой доступ к вашей модели данных особенности включите приложение администратора в вашем панель управления приложением > дополнительно > приложение администратора создайте администратора (имя пользователя/пароль) выберите поддомен для быстрого доступа к базе данных без кода после входа в систему ваши пользователи или команда могут просматривать, редактировать или удалять записи без написания кода этот подход поддерживает более быстрое управление данными и сотрудничество заключение в этом руководстве вы узнали как создать бэкенд для приложений react native с использованием back4app это включало создание безопасного бэкенда и реализация кроссплатформенной совместимости для вашего приложения react native настройка управления данными с помощью rest и graphql api настройка acl и clp для защиты конфиденциальных данных написание cloud code для серверной логики обработка аутентификации пользователей и проверки электронной почты управление хранилищем файлов с помощью прямых загрузок планирование фоновых задач с помощью cloud jobs использование webhooks для интеграции внешних сервисов изучение панели администратора back4app для удобного администрирования базы данных с этими инструментами и функциями ваш проект react native может вырасти в надежное и масштабируемое полностековое решение теперь вы готовы обрабатывать данные в реальном времени, обеспечивать безопасность пользователей и другие важные аспекты мобильных приложений продолжайте изучать документацию back4app https //www back4app com/docs/ для улучшения своих навыков и создания мощных мобильных приложений на платформах ios и android следующие шаги укрепите ваше приложение на react native с помощью расширенной безопасности и контроля доступа на основе ролей экспериментируйте с обновлениями в реальном времени с использованием live queries для приложений в реальном времени (если необходимо) интегрируйте внешние api и сервисы, включая платежные шлюзы или социальные входы улучшите производительность через кэширование или оптимизацию облачных функций углубитесь в официальную документацию back4app https //www back4app com/docs/ для разблокировки дополнительных функций