构建一个 CRUD 应用与 Jetpack Compose？

概述 在本指南中，您将学习如何使用 jetpack compose 为 android 开发 crud（创建、读取、更新、删除）应用程序。 我们将通过将您的应用与 back4app 集成，说明如何有效管理数据操作。 项目开始时将设置一个名为 basic crud app jetpackcompose 的 back4app 实例，这将作为一个坚实的后端基础设施。 我们将概述如何通过定义特定的集合和字段（手动或利用 back4app 的 ai 驱动工具）来设计最佳数据库架构。这确保了您的应用数据结构足够强大，以实现无缝的 crud 操作。 接下来，您将配置 back4app 管理控制台，这是一个用户友好的拖放界面，简化了数据管理，使执行 crud 操作变得简单明了。 最后，您将使用 parse android sdk（在适用的情况下）或直接 rest api 调用，将 jetpack compose 前端与 back4app 连接，同时通过高级访问控制实施强大的安全措施。 在本教程结束时，您将拥有一个支持基本 crud 功能的 android 应用程序，配备用户身份验证和安全数据处理。 您将学习到的内容 如何在 android 上使用 jetpack compose 构建基于 crud 的应用程序。 创建可扩展后端的方式，使用 back4app。 使用直观的 back4app 管理控制台进行数据操作的策略。 与 parse android sdk 或 rest api 的集成技术。 前提条件 在继续之前，请确保您已准备好以下内容： 一个拥有新创建项目的 back4app 账户。 如果您需要帮助，请查看 back4app 入门指南 https //www back4app com/docs/get started/new parse app 。 一个带有 android studio 的 android 开发环境。 确保您安装了最新版本的 android studio 和 kotlin。 熟悉 kotlin、jetpack compose 和 restful api。 要快速回顾，请访问 jetpack compose 文档 https //developer android com/jetpack/compose 。 步骤 1 – 启动您的项目 创建 back4app 项目 登录到您的 back4app 账户。 从您的仪表板中选择 “新应用” 选项 。 为您的项目命名： basic crud app jetpackcompose 并完成设置过程。 创建新项目 设置完成后，您的项目将在 back4app 控制台中可见，为您的后端配置奠定基础。 步骤 2 – 构建您的数据库架构 概述您的数据结构 对于这个crud应用程序，您将定义几个集合。以下是示例集合以及必要的字段和数据类型，确保您的后端能够很好地处理数据。 1\ 集合：项目 此集合用于存储每个条目的详细信息。 字段 类型 细节 id 对象id 自动生成的唯一标识符。 标题 字符串 项目的名称或标题。 描述 字符串 该项目的简要概述。 创建于 日期 添加该项目的时间戳。 更新于 日期 最后更新的时间戳。 2\ 收集：用户 此集合管理用户档案和身份验证数据。 字段 类型 描述 id 对象id 自动生成的主键。 用户名 字符串 唯一用户标识符。 电子邮件 字符串 用户的唯一电子邮件地址。 密码哈希 字符串 为了安全而加密的密码。 创建于 日期 账户创建时间戳。 更新于 日期 最后账户更新时间戳。 您可以通过创建新类并指定必要的列，手动通过 back4app 仪表板添加这些集合和字段。 创建新班级 您可以通过选择数据类型、命名、分配默认值以及确定是否为必填项来设置每一列。 创建列 利用 back4app 的 ai 进行模式设置 back4app ai 工具可以通过解释描述您所需集合和字段的提示来自动化您的数据库模式创建。此功能显著加快了项目配置。 如何使用 ai 工具： 访问 ai 工具： 登录您的 back4app 控制台并导航到 ai 部分。 输入您的模式描述： 提供详细的提示，概述集合及其相应字段。 审查并应用： 生成后，检查提议的模式并将其集成到您的项目中。 示例 ai 提示 create the following collections in my back4app project collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto assigned) \ updated at date (auto updated) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto assigned) \ updated at date (auto updated) 使用这种 ai 方法可以确保您的数据库结构正确，并针对您的应用需求进行了优化。 步骤 3 – 激活管理员控制台并管理 crud 功能 管理员控制台简介 back4app 管理员控制台是一个多功能的无代码解决方案，允许您轻松监督和操作后端数据。其直观的界面支持拖放 crud 操作，使数据管理变得简单。 激活管理员控制台 前往“更多”部分 在您的back4app仪表板中。 选择“管理员控制台” 然后选择 “激活管理员控制台。” 设置您的管理员凭据 通过注册您的第一个管理员用户，这也建立了必要的角色和系统集合。 启用管理员应用 激活后，登录管理员控制台以管理您的集合。 管理员应用仪表板 通过控制台执行crud操作 在管理员控制台中，您可以： 添加记录： 使用集合中的“添加记录”功能（例如，项目）插入新条目。 查看/编辑记录： 点击任何记录以查看或修改其字段。 删除记录： 选择删除选项以消除过时的记录。 这个简化的界面通过使后端操作既可访问又高效来提高生产力。 步骤4 – 将jetpack compose与back4app连接 现在您的后端已配置完成，是时候将使用 jetpack compose 构建的 android 应用程序链接到 back4app。 选项 a：使用 parse android sdk 添加 parse sdk 依赖： 更新您的 build gradle 文件： implementation 'com parse\ parse android\ latest version' 在您的应用程序类中初始化 parse： 创建或更新您的应用程序类（例如， myapplication kt )： // myapplication kt package com example basiccrud import android app application import com parse parse class myapplication application() { override fun oncreate() { super oncreate() parse initialize( parse configuration builder(this) applicationid("your application id") clientkey("your client key") server("https //parseapi back4app com") build() ) } } 在 compose 屏幕中实现 crud： 例如，创建一个屏幕以列出项目： // itemsscreen kt package com example basiccrud import androidx compose foundation layout import androidx compose foundation lazy lazycolumn import androidx compose foundation lazy items import androidx compose material button import androidx compose material text import androidx compose runtime import androidx compose ui modifier import androidx compose ui unit dp import com parse parseobject import com parse parsequery import kotlinx coroutines dispatchers import kotlinx coroutines withcontext @composable fun itemsscreen() { var items by remember { mutablestateof(listof\<parseobject>()) } launchedeffect(unit) { withcontext(dispatchers io) { val query = parsequery getquery\<parseobject>("items") try { val result = query find() items = result } catch (e exception) { e printstacktrace() } } } column(modifier = modifier padding(16 dp)) { text(text = "项目", modifier = modifier padding(bottom = 8 dp)) lazycolumn { items(items) { item > row( modifier = modifier fillmaxwidth() padding(8 dp), horizontalarrangement = arrangement spacebetween ) { text(text = item getstring("title") ? "无标题") button(onclick = { / 触发编辑操作 / }) { text(text = "编辑") } } } } } } 选项 b：使用 rest 或 graphql 如果您不想使用 parse sdk，您可以直接使用 restful api 或 graphql 与 back4app 进行交互。例如，通过 rest 获取项目： suspend fun fetchitems() { try { val response = khttp get( url = "https //parseapi back4app com/classes/items", headers = mapof( "x parse application id" to "your application id", "x parse rest api key" to "your rest api key" ) ) // process json response accordingly } catch (e exception) { e printstacktrace() } } 根据需要将这些 api 调用集成到您的 compose 组件中。 步骤 5 – 保护您的后端 实施访问控制列表 (acls) 通过将 acl 分配给您的对象来增强数据安全性。例如，要创建一个仅由其所有者访问的记录： suspend fun createsecureitem(itemdata map\<string, string>, owneruser parseobject) { val item = parseobject("items") item put("title", itemdata\["title"]) item put("description", itemdata\["description"]) // define acl so that only the owner has read/write privileges val acl = parseacl(owneruser) acl publicreadaccess = false acl publicwriteaccess = false item acl = acl try { item save() println("secure item saved successfully") } catch (e exception) { e printstacktrace() } } 配置类级权限 (clps) 在您的 back4app 控制台中，调整每个集合的 clp。这确保只有授权或经过身份验证的用户可以访问敏感数据。 第 6 步 – 管理用户身份验证 设置用户帐户 back4app利用parse内置的用户类来管理身份验证。在您的jetpack compose应用中，使用parse sdk处理用户注册和登录。 以下是使用compose的注册屏幕示例： // signupscreen kt package com example basiccrud import androidx compose foundation layout import androidx compose material button import androidx compose material outlinedtextfield import androidx compose material text import androidx compose runtime import androidx compose ui modifier import androidx compose ui unit dp import com parse parseuser @composable fun signupscreen() { var username by remember { mutablestateof("") } var email by remember { mutablestateof("") } var password by remember { mutablestateof("") } column(modifier = modifier padding(16 dp)) { outlinedtextfield( value = username, onvaluechange = { username = it }, label = { text("username") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(8 dp)) outlinedtextfield( value = email, onvaluechange = { email = it }, label = { text("email") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(8 dp)) outlinedtextfield( value = password, onvaluechange = { password = it }, label = { text("password") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(16 dp)) button(onclick = { val user = parseuser() user username = username user email = email user setpassword(password) user signupinbackground { e > if (e == null) { println("user registered successfully!") } else { println("registration error ${'$'}{e message}") } } }) { text(text = "sign up") } } } 您可以为登录和会话管理实现类似的屏幕。社交登录、电子邮件验证和密码恢复等附加功能可以通过back4app的控制台进行管理。 第 7 步 – （不适用） 注意：在此移动应用程序上下文中，无法通过 web 部署。 第 8 步 – 最终想法和下一步 恭喜！您现在已经使用 jetpack compose 和 back4app 开发了一个完整的 crud 应用程序。 您设置了一个名为 basic crud app jetpackcompose 的项目，为项目和用户设计了有效的数据库架构，并利用 back4app 管理控制台进行轻松的数据管理。 此外，您将 android 前端与 back4app 集成，并在此过程中应用了强大的安全措施。 接下来是什么？ 扩展您的 compose ui： 通过详细的项目视图、搜索功能和实时数据更新等附加功能来增强您的应用程序。 整合更多后端逻辑： 考虑使用云函数、集成第三方 api 或实施基于角色的访问控制。 进一步学习： 探索 back4app 文档 https //www back4app com/docs 和其他 compose 教程，以优化性能并探索自定义集成。 通过遵循本教程，您现在拥有使用 jetpack compose 和 back4app 为您的 android 应用程序构建安全、高效的 crud 后端的工具。祝您编码愉快！