如何为Ionic构建后端？

介绍 在本教程中，您将学习如何使用 back4app 为 ionic 应用构建完整的后端。 我们将涵盖数据库管理、云代码函数、rest 和 graphql api、用户身份验证、文件处理等内容。 我们的目标是向您展示 如何为 ionic 构建后端 ，该后端是安全的、可扩展的，并且易于维护。 我们将使用 back4app 的直观环境来简化服务器端设置，免去您手动配置服务器或数据库的麻烦。 您将学习一些基本工具，例如使用云作业调度任务、应用高级安全规则以及将 webhook 与其他服务集成。 到最后，您将准备好将这个基础后端扩展为适合生产的系统，以供您的 ionic 应用使用。 前提条件 一个 back4app 账户和一个新的 back4app 项目 开始使用 back4app https //www back4app com/docs/get started/new parse app 如果您没有账户，请免费创建一个，并按照上面的指南设置您的项目。 基本的 ionic 开发环境 确保您已安装 ionic cli https //ionicframework com/docs/intro/cli 并且能够创建和运行 ionic 应用。 已安装 node js（版本 14 或更高） 下载 node js https //nodejs org/en/download/ 以管理依赖关系并构建您的项目。 熟悉 javascript/typescript 和 ionic 概念 ionic 官方文档 https //ionicframework com/docs 对 ionic 结构、组件和生命周期钩子的良好掌握将会有所帮助。 步骤 1 – 在 back4app 上创建新项目并连接 登录到您的 back4app 账户 。 创建一个新应用 使用您 back4app 仪表板中的“新应用”按钮。 为您的应用命名 （例如，“ionic backend tutorial”）。 这个 back4app 项目是您后端的基础。与使用客户端 parse sdk 不同，本教程将演示如何通过 rest 和 graphql 从您的 ionic 应用进行调用。 检索您的凭据 在 back4app 仪表板中，转到 应用设置 或 安全性与密钥 记下你的 应用程序 id , rest api 密钥 , 和 graphql 端点 你将需要这些来从你的 ionic 应用发送请求。 步骤 2 – 设置数据库 拥有一个结构良好的数据库是每个应用的基础。back4app 的仪表板使设计数据模型和处理关系变得简单。 1\ 创建数据模型 在你的 back4app 仪表板中转到 数据库 部分。 创建一个新类（例如，“待办事项”）并添加列（例如， 标题 作为字符串， 已完成 作为布尔值）。 2\ 使用 ai 代理创建数据模型 从你的 back4app 仪表板打开 ai agent 。 描述你想要的模式，例如“创建一个包含标题（字符串）和 iscompleted（布尔值）字段的 todo 类。” ai agent 将自动生成模式。 3\ 使用 rest api 读取和写入数据 在你的 ionic 代码中，你可以执行 http 请求。例如， 创建 一个 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 要 获取 所有 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 您可以使用 fetch , axios , 或任何 http 客户端库在您的 ionic 应用的服务或组件文件中集成这些调用。 4\ 使用 graphql api 读取和写入数据 同样，您可以从您的 ionic 应用发送 graphql 变更和查询。例如，要 创建 一个新的 todo mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 示例 rest 或 graphql 调用可以放置在您 ionic 结构中的提供者/服务文件中，然后从您的页面调用。 5\ 使用实时查询（可选） 实时查询为您的应用数据提供实时更新，尽管它们需要 parse sdk 或专门的订阅方法。如果您需要实时数据，可以从您的 back4app 服务器设置中启用 实时查询 。您通常会使用 websocket 连接来监视类中的更改。然而，对于基于标准 http 的调用，您可以定期查询 rest 或 graphql 端点。 步骤 3 – 使用 acl 和 clp 应用安全性 简要概述 acl（访问控制列表） 让您为单个对象设置读/写权限。 clp（类级权限） 允许您在类级别管理更广泛的访问。这些功能对于保护私人数据和确保只有授权用户可以修改信息至关重要。 设置类级权限 在您的 back4app 仪表板中，转到 数据库 > 类级权限 配置您的类默认值（例如，只有经过身份验证的用户可以创建新的 todo）。 配置 acl 在创建或更新记录时，您可以通过 rest 传递 acl 字段： 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 '{ "title" "private task", "acl" { "user object id here" { "read" true, "write" true } } }' \\ https //parseapi back4app com/classes/todo 有关更多信息，请参见 应用安全指南 https //www back4app com/docs/security/parse security 。 步骤 4 – 编写云代码函数 为什么使用云代码 云代码允许您执行服务器端 javascript 以进行数据验证、触发器或集成等任务。您可以创建自定义端点以集中逻辑，这在您希望将代码保留在客户端之外时尤其有用。 示例函数和触发器 在您的 main js 服务器端（back4app）中，您可以编写： // main js parse cloud define('validatetodo', (request) => { const { title } = request params; if (!title) { throw 'a title is required '; } return `title "${title}" looks good `; }); parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw 'todos must have a title '; } }); 通过 back4app cli https //www back4app com/docs/local development/parse cli 或在仪表板的 云代码 部分进行部署。 从 ionic 调用云代码 您可以发送一个 post 请求： 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 '{"title" "check this out"}' \\ https //parseapi back4app com/functions/validatetodo 您将获得一个包含任何返回数据或错误消息的 json 响应。 npm 模块 您可以在您的云代码环境中安装像 axios 的包，以集成第三方服务。将它们包含在 main js const axios = require('axios'); parse cloud define('fetchdata', async (request) => { const url = request params url; const response = await axios get(url); return response data; }); 以与您调用任何云代码函数相同的方式部署并调用它。 步骤 5 – 配置身份验证 启用用户身份验证 用户注册和登录可以通过对 user 类的 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" "jon", "password" "somepassword", "email" "jon\@example com" }' \\ https //parseapi back4app com/users 登录 curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ \ data urlencode 'username=jon' \\ \ data urlencode 'password=somepassword' \\ https //parseapi back4app com/login 成功后，您将收到一个 sessiontoken 请安全存储它，并在未来请求的头部中包含它以进行身份验证操作。 社交登录 您可以通过通过 back4app 设置 oauth 流程或使用外部提供商来配置社交登录（如 google 或 facebook）。请参考 社交登录文档 https //www back4app com/docs/platform/sign in with apple 以获取详细步骤。 步骤 6 – 处理文件存储 设置文件存储 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 image/png" \\ \ data binary "@path/to/your/image png" \\ https //parseapi back4app com/files/myimage png 响应将包括一个文件 url，您可以将其存储在一个类中： 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 '{ "imagefile" { " type" "file", "name" "myimage png", "url" "response url here" } }' \\ https //parseapi back4app com/classes/photo 安全考虑 您可以在 back4app 的 服务器设置 中启用文件安全规则，以要求身份验证或限制文件上传到特定角色。 步骤 7 – 电子邮件验证和密码重置 为什么验证很重要 电子邮件验证确保用户电子邮件的合法性。密码重置提供了一种安全的方式来恢复丢失的凭据。这有助于维护信任和在您的 ionic 应用中进行适当的用户管理。 back4app 仪表板配置 转到 应用设置 > 电子邮件设置 启用 电子邮件验证 自定义验证和密码重置电子邮件模板。 步骤 8 – 使用云作业调度任务 云作业的功能 云作业允许您调度定期任务，例如数据清理或发送摘要电子邮件。您可以在您的 main js parse cloud job('cleanupoldtodos', async (request) => { 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); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); 部署后 转到 应用设置 > 服务器设置 > 后台作业 调度 cleanupoldtodos 每天运行 步骤 9 – 集成 webhooks webhooks 允许您在 back4app 项目中发生某些事件时将数据发送到外部服务。如果您的 ionic 应用在创建新记录后需要在 stripe 或 slack 中触发某个操作，您可以使用 webhooks 来自动化这一过程。 前往 更多 > webhooks 在您的 back4app 控制面板中。 添加一个新的 webhook 并设置其端点 (例如， https //your service com/webhook endpoint )。 选择 事件 (例如，“保存后”在 todo 类中)。 您还可以在 main js 中使用标准 http 库从 cloud code 触发器发起外发请求。 步骤 10 – 探索 back4app 管理面板 这个 back4app admin app 是一个更简单的界面，适合非技术利益相关者。它提供了一种简单的方法来对您的类进行 crud 操作，而无需进入主 parse dashboard。 启用管理应用程序 在仪表板中，转到 更多 > 管理应用程序 点击 启用管理应用程序 并创建一个管理员用户。 选择一个子域以访问您的管理界面。 此面板帮助您在不编写查询的情况下管理数据，非常适合喜欢图形界面的客户或团队成员。 结论 通过完成本指南，您已经 如何为ionic构建后端 创建了一个安全的后端 在back4app上，具有强大的数据模型和关系 与rest和graphql api集成 以从您的ionic应用程序读取和写入数据 实施了安全性 使用acl和clp 部署了云代码 用于自定义逻辑和触发器 配置了用户身份验证 和文件存储 设置了云作业 用于调度任务 利用了webhooks 用于外部集成 探索了管理面板 以简化数据管理 有了这个基础，您的 ionic应用程序 可以发展成一个生产就绪的平台。添加更多逻辑，连接第三方api，或微调安全规则以匹配您的用例 下一步 增强您的生产构建 通过实现缓存、基于角色的访问和性能监控 集成高级功能 例如实时live queries或多因素身份验证 查阅back4app的官方文档 以深入探索分析、日志和性能调优 探索其他教程 这些教程展示了聊天应用程序、物联网集成或基于位置的功能，结合了back4app强大的后端服务