如何使用 NativeScript 构建 CRUD 应用？

概述 在本指南中，您将使用 nativescript 创建一个功能齐全的 crud（创建、读取、更新、删除）移动应用程序。 本教程将引导您设置项目，配置 back4app 上的强大后端，并集成 nativescript 前端以无缝管理和更新数据。 我们首先建立一个名为 basic crud app ns 的新 back4app 项目，它作为您数据操作的基础。然后，您将通过设置集合和字段来定义一个灵活的数据库架构，可以手动设置或利用 back4app ai agent。 接下来，您将利用 back4app 管理应用程序——一个旨在轻松数据操作的无代码界面——高效地执行 crud 任务。 最后，您将使用 rest api 将 nativescript 移动应用程序与 back4app 集成，确保您的后端通过高级访问控制保持安全。 在本教程结束时，您将拥有一个生产就绪的移动应用程序，它不仅执行基本的 crud 操作，还包含用户身份验证和安全数据处理。 主要见解 掌握构建 crud 移动应用程序的艺术，使用可靠的后端高效管理数据。 学习如何设计可扩展的数据库，并与 nativescript 前端无缝集成。 发现如何使用拖放管理界面（back4app 管理应用程序）简化数据管理。 了解使用 acl 和类级权限保护后端的最佳实践。 先决条件 一个带有新项目的 back4app 账户。 如果您需要帮助，请查看 开始使用 back4app https //www back4app com/docs/get started/new parse app 一个 nativescript 开发环境。 安装 nativescript cli 并按照 nativescript 文档 https //docs nativescript org/start/quick setup 设置您的环境 javascript/typescript、nativescript 和 restful api 的基本知识。 如有必要，请熟悉 nativescript 指南 https //docs nativescript org/ 在开始之前，请确保您拥有 步骤 1 – 项目初始化 建立一个新的 back4app 项目 登录到您的 back4app 仪表板。 选择“新应用”选项。 命名您的项目： basic crud app ns 并按照说明创建它 创建新项目 一旦您的项目设置完成，它将列在您的仪表板中，准备进行后端配置和管理。 步骤 2 – 设计数据库模式 构建您的数据模型 对于这个 crud 移动应用程序，您将创建关键集合。以下是示例集合以及设置您的架构所需的基本字段和数据类型，以便进行创建、读取、更新和删除数据的基本操作。 1\ 项目集合 此集合包含每个项目的详细信息。 字段 数据类型 描述 id 对象id 自动生成的主标识符。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简短摘要。 创建于 日期 项目创建时的时间戳。 更新于 日期 项目最后修改的时间戳。 2\ 用户集合 此集合存储用户凭据和详细信息。 字段 数据类型 描述 id 对象id 自动生成的主标识符。 用户名 字符串 用户的唯一用户名。 电子邮件 字符串 独特的电子邮件地址。 密码哈希 字符串 安全哈希密码。 创建于 日期 账户创建时间戳。 更新于 日期 用户个人资料的最后更新时间戳。 您可以通过在 back4app 控制面板中手动创建这些集合，为每个集合添加一个新类并定义相应的列。 创建新类 通过选择数据类型、命名字段以及指定默认值或要求来定义每个字段。 创建列 利用 back4app ai 代理进行模式设置 back4app ai 代理是您仪表板中的高效工具，可以根据描述您所需集合和字段的提示自动生成数据库模式。此功能简化了流程并确保一致性。 如何利用 ai 代理： 启动 ai 代理： 从 back4app 仪表板或项目设置中访问它。 详细描述您的数据模型： 输入一个提示，概述您所需的集合和字段。 审查并确认： 检查生成的模式建议并将其应用于您的项目。 示例提示 create these collections for my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) 此过程节省时间，并确保您的模式既一致又优化。 步骤 3 – 激活管理员应用程序并执行 crud 操作 介绍管理员应用程序 back4app 管理员应用程序提供了一个无代码界面，方便您轻松管理后端数据。其拖放设计使 crud 操作快速有效。 如何启用管理员应用程序 前往您的 back4app 仪表板中的 “更多” 菜单 。 选择 “管理员应用程序” 然后点击 “启用管理员应用程序。” 设置您的管理员凭据 通过创建第一个管理员用户，这也建立了角色（例如， b4aadminuser ) 和系统集合。 启用管理员应用程序 启用后，登录管理员应用程序以开始管理您的集合。 管理员应用程序仪表板 使用管理员应用程序执行 crud 操作 在管理员应用程序中，您可以： 创建记录： 在任何集合中使用 “添加记录” 选项（例如，项目）插入新条目。 读取/修改记录： 点击任何记录以查看其详细信息或编辑其信息。 删除记录： 选择删除选项以消除不再需要的记录。 这个直观的工具通过简化数据管理任务来增强用户体验。 步骤 4 – 将 nativescript 连接到 back4app 在设置好后端并通过管理应用管理数据后，下一步是将您的 nativescript 移动应用链接到 back4app。 使用 rest api 进行集成 由于在这种情况下 sdk 集成可能不适合 nativescript，您可以利用 rest api 执行 crud 操作。 示例：使用 rest 获取数据 以下是如何使用 rest 调用在 nativescript 服务文件中从您的 back4app 数据库检索项目的示例。 // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function fetchitems() { try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'get', headers { 'x parse application id' application id, 'x parse rest api key' rest api key } }); const data = response content tojson(); return data results; } catch (error) { console error('error fetching items ', error); throw error; } } 在您的 nativescript 组件中集成类似的 rest api 调用，以处理创建、更新和删除操作。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过为每个对象设置 acl 来保护您的数据。例如，要创建一个私有项目，请使用以下方法： // app/services/item service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function createprivateitem(itemdata { title string; description string }, ownerid string) { const payload = { title itemdata title, description itemdata description, acl { \[ownerid] { read true, write true }, " " { read false, write false } } }; try { const response = await http request({ url 'https //parseapi back4app com/classes/items', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('error creating item ', error); throw error; } } 配置类级权限 (clps) 在 back4app 仪表板中，调整每个集合的 clps 以定义默认访问权限。这有助于确保只有授权用户可以访问或修改敏感数据。 步骤 6 – 用户认证 设置账户管理 back4app 利用 parse 的用户类来管理认证。在您的 nativescript 应用中，实施注册和登录流程，如下所示。 示例：用户注册 // app/services/auth service ts import { http } from '@nativescript/core'; const application id = 'your application id'; const rest api key = 'your rest api key'; export async function signup(username string, password string, email string) { const payload = { username, password, email }; try { const response = await http request({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' application id, 'x parse rest api key' rest api key, 'content type' 'application/json' }, content json stringify(payload) }); return response content tojson(); } catch (error) { console error('sign up error ', error); throw error; } } 可以使用类似的方法进行登录和管理用户会话。可以通过 back4app 仪表板配置社交登录、电子邮件确认和密码重置等附加功能。 第 7 步 – 结论和未来方向 干得好！您现在已经使用 nativescript 和 back4app 创建了一个完整的基本 crud 移动应用程序。 您的项目， basic crud app ns ，包括一个定义良好的后端，具有 items 和 users 的集合，通过管理应用程序无缝管理。 您还通过 rest api 将 nativescript 前端与 back4app 集成，并通过强大的 acl 和 clp 保护您的数据。 下一步： 增强您的移动应用： 添加详细视图、搜索功能和推送通知等功能。 扩展功能： 集成高级后端功能，如云函数或第三方 api 服务。 进一步学习： 探索 back4app 文档 https //www back4app com/docs 和其他 nativescript 资源，以提高您的技能。 祝您编码愉快，祝您未来的移动应用项目好运！