如何为 React Native 构建后端？

介绍 在本教程中，您将学习 如何使用 back4app 构建 react native 的后端 。 我们将专注于跨平台兼容性，并说明如何集成 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 apis （或 graphql apis ) 而不是 parse sdk，您仍然需要您的 back4app 密钥来发送经过身份验证的请求。 检索您的 parse 密钥 在 back4app 仪表板中，打开您应用的 应用设置 或 安全性与密钥 部分以找到您的 应用程序 id , rest api 密钥 , 和 graphql 端点 （通常是 https //parseapi back4app com/graphql )。 记下您的 rest api 密钥 您将在 react native 的 fetch 或 axios 头部中包含它以验证每个请求。 此步骤确保您的移动应用程序可以安全地与 back4app 通信。 步骤 2 – 设置数据库 back4app 提供了广泛的后端选项用于 react native 应用，包括强大的数据管理功能。您可以通过仪表板创建类、添加字段和定义关系。无论您是在构建实时应用还是更简单的 crud 应用，back4app 仪表板都能帮助您轻松存储和组织数据。 创建数据模型 在您的 back4app 仪表板中导航到 “数据库” 部分 。 创建一个新类 （例如，“待办事项”）并添加相关列，如 标题 （字符串）和 已完成 （布尔值）。 back4app 支持多种数据类型： 字符串 , 数字 , 布尔值 , 对象 , 日期 , 文件 , 指针 , 数组 , 关系 , 地理点 , 和 多边形 您还可以让 parse 在您发送新数据时自动创建字段。 使用 ai 代理创建数据模型 如果您愿意，可以使用 back4app ai 代理： 打开 ai 代理 从您的应用仪表板。 用简单的语言描述您的数据模型 （例如，“构建一个具有标题和 iscompleted 字段的 todo 类。”）。 让 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 } } } 您可以使用像 apollo client 的库执行 graphql 查询，甚至可以使用简单的 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 使用 acls（访问控制列表） 和 clps（类级权限） , 来保护您的后端。这些让您能够在对象和类级别保护数据。它们对于在生产级移动应用开发中实施安全用户权限至关重要。 逐步指南 类级权限（clps） 转到您应用的 数据库 部分，打开任何类，并切换到“安全性和权限”。调整各种用户角色或公共访问的读/写权限。 acls 您可以通过在 rest 请求中包含 acl 字段来应用每个对象的访问控制。例如 有关更多详细信息，请查看 应用安全指南 https //www back4app com/docs/security/parse security 步骤 4 – 编写云代码函数 为什么使用云代码 云代码允许您在 back4app 上运行服务器端脚本，用于验证、触发器和处理外部 api 调用等任务。它帮助您控制应保持隐藏的逻辑，从而为您的 react native 项目提供更好的安全性。 示例函数 以下是您在服务器端的 main js 中编写的示例。您可以通过 rest 从您的 react native 应用程序调用它 // 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） 直接从您的react native应用程序使用rest api 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 类来管理用户身份验证。即使您在 react native 中不使用 parse sdk，您也可以使用直接的 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 应用程序中，您可以通过发送文件作为 blob 或表单数据来实现 fetch 。 安全考虑 为了防止未经授权的上传，请在您的 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步 – 集成webhooks 定义 webhooks允许您的后端在事件发生时通知外部服务。例如，您可以在创建新的待办事项时通知slack或支付网关。 配置 前往 更多 > webhooks 在您的back4app仪表板中。 添加一个新的webhook 指向所需的外部端点。 设置触发器以定义何时您的react native应用数据更改应触发webhook。 您还可以在cloud code触发器中编写webhooks，允许您发送http请求或与第三方api集成。这将扩展您的后端功能到广泛的外部服务。 步骤 10 – 探索 back4app 管理面板 在哪里找到它 “ back4app 管理面板 ”是一个用户友好的界面，供非技术人员管理数据。它对产品所有者、客户代表或需要直接访问数据模型的支持人员特别有用。 功能 启用管理应用 在你的 应用仪表板 > 更多 > 管理应用 。 创建管理员用户 （用户名/密码）。 选择子域名 以便快速、无代码访问数据库。 一旦登录，您的用户或团队可以查看、编辑或删除记录，而无需编写任何代码。这种方法支持更快的数据管理和协作。 结论 在本指南中，您学习了 如何为 react native 应用程序构建后端，内容包括： 创建安全的后端并实现跨平台兼容性，以支持您的 react native 应用程序。 使用 rest 和 graphql api 设置数据管理。 配置 acl 和 clp 以保护敏感数据。 编写云代码以实现服务器端逻辑。 处理用户身份验证和电子邮件验证。 通过直接上传管理文件存储。 使用云作业调度后台任务。 使用 webhooks 集成外部服务。 探索 back4app 管理面板，以便轻松管理数据库。 借助这些工具和功能，您的 react native 项目可以发展成为一个可靠且可扩展的全栈解决方案。您现在具备处理实时数据、用户安全和移动应用程序其他关键方面的能力。继续探索 back4app 文档 https //www back4app com/docs/ ，以提升您的技能，并在 ios 和 android 平台上创建强大的移动体验。 下一步 增强你的 react native 应用 通过高级安全性和基于角色的访问控制。 尝试实时更新 使用实时应用程序的实时查询（如有需要）。 集成外部 api 和服务，包括支付网关或社交登录。 提升性能 通过缓存或优化云函数。 深入了解 back4app 的官方文档 https //www back4app com/docs/ 以解锁更多功能。