亚马逊AWS官方博客
低代码构建企业级应用程序：体验 AWS App Studio 实现文件管理助手
亚马逊云科技 App Studio 是一项生成式 AI 服务，它可以基于用户提供的自然语言，在几分钟内创建企业级应用程序，而无需软件开发技能和代码编程。借助 App Studio，没有深厚软件开发技能的技术专业人员（例如 IT 项目经理、数据工程师和企业架构师）可以快速开发适合其组织需求的业务应用程序。
今天，我们将展示如何利用 App Studio 来快速实现一个文件管理助手。
开始使用
0. 前置条件
App Studio 可帮助两个主要用户角色：
- （Builder）构建者 – 构建者组的成员可以创建、构建和共享应用程序。
- （Admin）管理员 – 此组中的成员可以管理组和角色，创建和编辑连接器，并保持对组织内构建的其他应用程序的可见性。
首次使用时，我们建议管理员角色首先阅读以下部分来完成 App Studio 创建和连接器配置工作。
App Studio 的创建：
Setting up App Studio： https://docs.thinkwithwp.com/appstudio/latest/userguide/setting-up.html
App Studio Connector：
Connect App Studio to other services with connectors： https://docs.thinkwithwp.com/appstudio/latest/userguide/connectors.html
连接 S3： https://docs.thinkwithwp.com/appstudio/latest/userguide/connectors-s3.html
在完成 App Studio 创建和连接器配置之后，您可以进入到以下章节。
开始构建
1. 进入 App Studio 页面
您可以在亚马逊云科技控制台搜索“App Studio”，并通过控制台进入 App Studio 页面。
 |
在 App Studio 的页面中，作为管理者（Admin）我们可以选择“管理”或“构建”。在“管理”页面，我们可以管理角色以及连接器。在“构建”页面，我们可以选择创建应用以及查看全部应用。
 |
我们开始构建一款全新的应用。在“Build-Builder hub” 下，我们选择左上方“创建新应用（create a new app）”，并选择“通过 AI 来创建应用”。
 |
随后我们会进入到应用创建页面，我可以通过在文本框中简单描述我的需求来开始构建应用程序。App Studio 服务也在右侧为我们提供了常见的应用模板，我们也可以选择其中的一个模板并个性化内容来进一步使用。
 |
2. 基于自然语言生成App
接下来我们通过自然语言来创建一个“文件管理助手”的应用程序。在左侧的对话框中，输入以下内容:
我希望构建一个应用程序。首先，它允许用户上传一个文档，并且有一个 PDF 查看器组件用于显示上传的文件。然后，应用程序应该能够生成文件摘要。此外，还有一个表格来记录每个上传的文件，包括文件名、文件摘要、创建日期和存储路径等详细信息。
 |
在收到用户输入内容后，App Studio 会首先为我们创建一个构建计划。
2.1 分析用户需求
 |
App studio 会根据用户提供内容进行分析，拆分成细颗粒度的用户用例，用户操作流程，和数据源。
从上图可以看到，在“Use Cases”中，App Studio 将我们描述的需求进行了准确拆分。“上传文件”“查看文件”“文件元数据存储”等功能都被涵盖。在“User Flow”中，App Studio 也非常详细地描述了用户操作的流程。
2.2 生成 App 概览
在分析完用户需求后，App Studio 会生成一个应用概览，包括“App Summary”, “Key Features”和“Usage”。
 |
从上图可以看出，App 的规划较为严格地遵循了对用户需求的分析。其关键功能中“文件上传/查看”等功能均包含在内。
2.3 通过自然语言调整应用程序功能
我可以通过优化提示词和查看新需求的方式来改进我的应用程序计划。
比如，现在我希望为应用程序增加一个新的功能：我希望该应用程序可以实现文件管理功能，让我对文件元数据进行修改和更新。因此我在左侧的对话框中，输入“我想再增加一个功能，使应用程序能够实现文件管理。例如，它使用户能够根据需要编辑和删除文件记录。”
 |
此时 App Studio 会重新分析用户需求，并重新规划应用程序的设计。从下图可以看到，在新的规划中，重新加入了“文件元数据修改”和“管理”的功能。
 |
现在，我对 App Studio 所产生的应用规划比较满意，因此，我点击右下角的“Generate app” 来生成应用程序。
App Studio 内置的生成式 AI 功能可以在几分钟内为我生成一个应用程序，而使用其他工具则需要花费数小时甚至数天才能达到同样的效果。
3. 查看 App Studio 生成的内容
在创建完成后，我们可以看到构建的应用程序的主页面。App Studio 中有三个主要区域：页面（Pages）、自动化（Automations）和数据（Data）。
页面（Pages）：每个页面都代表应用程序用户界面（UI）的一个屏幕，用户将与之交互。页面是组件（Components）的容器，使用页面和组件，我们能快速构建应用程序的 UI。我们可以看到，根据我们的需求，App Studio 已经为我们生成了对应的页面。
 |
自动化（Automations）：通过定义和配置自动化流程，我们可以让应用程序的行为符合我们的业务逻辑。自动化的主要组成部分包括：启动自动化的触发器（Trigger）、一个或多个操作的行动序列、用于将数据传递给自动化的输入以及输出参数。我们可以看到，根据我们的需求，App Studio 已经为我们生成了对应的自动化流程。
 |
数据（Data）：数据中主要包括实体。实体是 App Studio 中的数据表。实体直接与数据源中的表交互。实体包括用于描述其中数据的字段、用于定位和返回数据的查询以及用于将实体的字段连接到数据源的列的映射。我们可以看到，根据我们的需求，App Studio 已经为我们生成了对应的文件实体。
 |
如果您希望更加深入地了解 App Studio 的组件，您可以查看官方文档： https://docs.thinkwithwp.com/appstudio/latest/userguide/concepts.html#concepts-entity。
4. 构建和调整 App
App Studio 已经根据我们的需求为我们自动化的创建了应用程序的页面，自动化工作流以及数据实体。但是我们还可以进一步进行细化和配置，来使应用程序更加贴合我们的业务需求。
4.1 调整“文件上传页”
首先进入到“文件上传页面”，App Studio 帮我们创建了一个 S3 文件上传的组件，点击该组件，右侧出现配置栏。我们可以进一步配置：修改连接器，这里我指定了提前创建好的 S3 存储桶连接器，并且配置存储桶名称，文件夹和文件名，上传的文件会被保存在存储桶的对应路径下。
 |
此外，我们可以进行更多的上传文件的基础配置，比如指定上传的文件类型（文档，视频，图片，音频），一次性上传的文件数量以及文件文件大小限制等。
 |
在配置完“文件上传”页面之后，我们需要去 automation 部分配置后端流程。进入到 automation，在 Action 下选择“Put Object”，并拖拉到左侧面板上，这步操作增加了上传文件到 S3 的流程。
 |
此外，点击“PutObject ”，并在右侧“properties”下提供存储桶路径等基础信息。
 |
至此，应用程序的上传文件功能已经配置完毕。我们有了一个页面可以让我们选择上传的文件，并且将文件上传到指定的存储位置以便后续管理。
4.2 调整“文件浏览页”
在文件浏览页，APP Studio 自动为我们创建了一个表格来显示所有我们上传的文件信息。我们只需要点击该组件，并在右侧栏 Properties 上选择该组件的源。这里我们选择一个 automation，来帮助我们列出所有上传的文件。
 |
到该组件的 automation 下，APP Studio 已经为我们完成了基本配置，我们只需要提供文件所在的 S3 存储桶名称和前缀。
 |
此外，在文件浏览页的文件表格中，有一个名为“view”的行动按钮。我们需要在右侧栏进行简单配置，比如按钮的样式、尺寸，以及按钮点击后所触发的行动（on click），在这里我们让“view”按钮点击后触发“views3objects1”的 automation 功能。
 |
在 automation 页面下，APP Studio 自动为我们创建了“views3objects1”流程，主要包括从 S3 存储桶中取出指定的文件对象。
 |
在文件浏览页，APP Studio 也为我们自动创建了一个 PDF Viewer 组件，用于查看选择的文件。我们在右侧进行配置，使其后侧的工作流能够正确的展示文件内容。
 |
至此，文件浏览部分已经配置完毕，在后面我们会统一进行功能测试。
4.3 创建“创建文件记录页面”
除了 APP Studio 自动为我们创建的页面外，我们还可以手动创建页面。在“页面”侧选择“Add（添加）”来添加一个页面，我们希望利用该页面来创建文件记录，因此我们对该页面命名为“CreateFileRecord”。
 |
随后，我们在组件页选择“Form”，并且选择“文件实体”，点击创建。
 |
完成后，我们得到了一个新的页面。点击“Submit”按钮，我们来进行额外配置。可以看到 APP Studio 已经帮我们创建一个触发器，使得能够在点击“提交”按钮后触发对应流程。
 |
同样，APP Studio为我们自动生成了一个名为“createrecord2”的工作流来实现文件元信息的创建与提交，我们无需做任何修改。APP Studio 会使用默认的 Amazon Dynamodb 连接器，并且在用户信息提交后自动在数据库中创建一条记录。
 |
此外，在创建文件记录页面，我们可以再一次点击“Submit”按钮。现在我增加了额外一个“navigate（导航）”功能，并选择了一个名为“FileList”的页面。因此在点击提交按钮后，会跳转到 FileList 页面来为我们呈现记录详情。
 |
 |
至此，创建文件记录页面部分已经配置完毕，在后面我们会统一进行功能测试。
4.4 Ask AI
在使用 APP Studio 来构建应用程序的过程中，我们可以借助人工智能助手来帮助我们加速开发过程。APP Studio 为我们提供了一个开箱即用的 AI 助手，在其页面左下角，有一个 Ask AI 的对话窗口，我们在遇到问题时可以通过询问 AI 来解决问题。
 |
 |
5. 预览应用程序
在构建应用程序时，我可以通过选择右上角“预览（Preview）”来查看实时页面预览。
 |
应用程序预览环境不支持显示实时数据或使用连接器与外部资源（如数据源）的连接，仅支持对静态 UI 内容的展示。
 |
6. 发布与测试
最后，在对所有 UI 页面、数据实体和自动化流程感到满意后，我可以通过选择右上角“发布（Publish）”按钮来发布它。
 |
我可以灵活地在测试或生产环境中发布我的应用程序，这有助于我在将应用程序推向生产之前对其进行测试。
 |
发布完成后，会通过邮件进行提示，此外会有一个 Url，点击进去后我们可以测试。
首先我们测试文件上传功能，我在页面上选择了一个文件进行上传：
 |
随后自动跳转到文件浏览页面，我们看到应用程序帮我列出了我所上传的所有文件，我选择其中一个进行查看。
 |
随后我希望创建一条文件记录，我到“文件记录创建页面”，然后输入以下信息并点击“提交”。
 |
随后会自动跳转到文件清单页来显示文件信息。
 |
开始使用 App Studio
大约 20 分钟左右的时间，我们便完成了一个简单的“文件管理助手”系统的开发，包括前端 UI 和后端与数据库及其他服务/系统的集成。在此过程中我们几乎没有编写任何程序，这对于没有深厚软件开发技能的技术专业人员（例如 IT 项目经理、数据工程师和企业架构师）来说十分友好。
App Studio 目前处于预览阶段，您可以在美国西部（俄勒冈）区域访问它，但您的应用程序可以连接到其他区域的数据。让我们现在开始使用 App Studio 来构建安全、可扩展且性能卓越的自定义业务应用程序，以实现关键任务的现代化和简化。
*前述特定亚马逊云科技生成式人工智能相关的服务仅在亚马逊云科技海外区域可用，亚马逊云科技中国仅为帮助您了解行业前沿技术和发展海外业务选择推介该服务。