技术文章

低代码平台现在无法生成功能齐全、响应灵敏的现代应用程序，这是一个神话。大约十年或更久以前，它们只能帮助开发人员通过图形菜单定义有限的界面，甚至更有限的功能，同时生成可怕的意大利面条代码，并以某种方式忽略代码的可维护性。截至 2023 年，低代码/无代码技术的演变和实际价值比以往任何时候都更加明显。企业 Web 开发最重要的进步和优势之一是低代码/无代码工具能够通过使用示例应用程序、提供现成的模板和生成符合标准编码指南的干净、可用于生产的代码。

在这篇博文中，我们将使用 WYSIWYG App Builder 来构建 定制的 Angular CRM 应用程序， 使用示例和低代码开发方法，使流程速度提高 8 倍。

简而言之，什么是 CRM 应用程序以及为什么在您的项目中使用 Angular 示例应用程序？

CRM 应用程序（客户关系管理）是一款软件应用程序，旨在帮助企业管理与客户和潜在客户的互动和关系。此类软件解决方案通常提供使组织能够有效跟踪、分析和优化客户交互的工具和功能。

至于为什么您应该从示例应用程序开始，特别是如果它是您的第一个项目：

• 它提供了一个良好的开端。

• 这是一次亲身体验。

• 它消除了常见的开发任务。

• 它很容易修改和定制。

• 它敏捷、可扩展且易于维护。

• 有实时代码预览。

详细信息请参见：3 个可以立即使用的 Angular 应用程序示例

如何使用 App Builder 构建 Angular CRM 示例应用程序并使其成为您自己的应用程序

使用我们的低代码平台创建应用程序 UI 时，您可以利用各种预定义布局、即用型组件、对任何 REST API 的强大处理以及丰富的配置功能，从而提高您的效率和技能。有一个所见即所得的设计界面，同时利用 Angular 组件的 Ignite UI 同时图书馆。这样无需手动编写布局和组件代码，从而节省了您的时间。它可以让你更快地获得反馈，并根据反馈更快地进行迭代。这种无代码方法还扩展到数据绑定和导航工作流程。如果您想下载代码并添加到其顶部，请加载您的 Angular CRM 应用程序并根据您的需求通过 App Builder 扩展设计。尽管它是预定义的应用程序，但它仍然是可编辑的。您可以根据需要添加视图、组件并扩展设计。

您在这里看到的是一个受 HubSpot 启发的主从风格应用程序，用于管理客户详细信息。它包括概述仪表板的响应式视图以及带有多个选项卡的客户详细信息。使用的组件：使用的组件： 手风琴、 头像、 按钮、 图标按钮、 类别图表、 复选框、 对话框窗口、 下拉菜单、 扩展面板、 数据网格、 图标、 输入组、 列表、 导航栏、 导航抽屉、 选择、 选项卡布局。

您还可以查看 CRM 应用程序示例并 预览代码。

让我们继续执行在 App Builder 中使用示例的步骤，并以适合您的项目要求和业务目标的方式对其进行微调。

第 1 步：打开 App Builder 并导航至示例应用程序

打开应用程序生成器并选择“创建新应用程序”。然后，导航到“示例应用程序”部分并选择 CRM 应用程序作为项目的基础设计。出于我们项目的目的，我们在构建应用程序时考虑了响应能力，通过网格、列表和图表组件显示尽可能多的数据。这些控件具有对大数据的强大处理能力以及根据需要访问数据的功能。导航抽屉组件（具有飞出/飞入行为）处理跨视图导航和 SPA 外观。

另一方面，Flex 布局容器允许 我们修改任何嵌套 UI 元素的位置。其他值得注意的特性与流体调整大小和包裹有关。

从那里，您可以扩展和自定义设计以满足您的特定需求。

第2步：连接API

无需手动连接 API，因为这是通过指定公共或本地主机 URL 直接在 App Builder 中完成的。从那里，您有两个选择：

• 添加 Swagger 定义

• 或者使用 JSON URL

出于我们的目的，我们将利用 Swagger 方法 并添加 URL。

之后，指定数据源的名称并继续下一步。确定您想要包含哪些端点。设置授权后，继续选择数据，确保选择所有字段，然后单击完成。

然后，当数据源上传成功后，您可以在仪表板页面上连接网格。

为此，请选择网格并从数据字段更新数据源。从那里，您可以添加更新和删除操作，这些操作将链接到 API 中的端点，从而允许通过 与网格交互来实时修改数据。

创建所有页面后，您可以通过选择右上角的绿色按钮来预览应用程序。为了便于进一步定制，请下载您的 Angular CRM 应用程序。

第 3 步：自定义并应用主题

您可以创建自定义应用程序主题来匹配您的品牌。您可以通过创建一个新主题并选择一个基本主题作为起点来完成此操作。调色板是根据您选择的主要颜色和次要颜色自动生成的。就排版而言，目前我们内置了一组字体，但我们计划在未来的版本中添加更多创意控制。完成编辑后，保存应用程序主题以应用更改。

第 4 步：预览代码

这使您可以与您的设计进行交互，就像它是一个正在运行的应用程序一样，并分别查看 HTML、CSS 和 TS。要查看您的应用程序的运行情况并检查代码，只需点击右上角的“代码视图”操作按钮即可。

第5步：生成应用程序

使用导航栏中“发布到 GitHub”和“预览”操作按钮旁边的平台选择器下拉列表。选择 Blazor Server/Blazor Web Assembly 选项为 Blazor 或 Angular 生成代码，以查看生成的应用程序和代码的预览。Web 组件选项也可用。

使用 App Builder 的好处

我们已经多次详细讨论了在应用程序设计和开发中使用低代码的优点。不过，总的来说，WYSIWYG App Builder 提供了任何 Web 应用程序所需的工具提示、直观的 UI 和即用型 UI 部件，例如组件、大纲树视图、内置应用程序布局和不同的属性来满足您的需求、主题、外部数据源处理、应用程序预览（当您仍在构建它时）、通过工作区的协作功能、应用程序共享、GitHub 发布、更改跟踪等。

使用应用程序构建的其他优势亮点：

• 低代码平台 提供可视化界面和预构建组件 ，减少了在 Angular 中手动编码的需要，使具有不同专业水平的开发人员更容易构建应用程序。

• 您可以通过查看不同页面的视图、单击周围查看所使用的每个组件的属性以及进一步探索该应用程序来开始工作，而无需自己进行任何开发。

• 它们允许快速原型设计和迭代，并通过 完整的拖放应用程序构建体验确保更快、更直观的开发，同时使用预构建的 Angular 组件。您可以将 UI 工具箱中的任何内容拖放到屏幕上，它将位于屏幕的布局中。

• Angular 应用程序与后端服务和 API 的集成速度更快，这使得 无需编写大量代码即可更轻松地获取和管理数据。

• 所提供的 组件的可重用性是无价的，因为不同的 Angular 控件不仅可以在此 CRM 应用程序中自定义和重用，而且还可以在其他 Angular 项目中自定义和重用，从而提高设计的一致性。

• App Builder 为您提供应用内置和自定义主题功能所需的所有功能 。您的预构建主题选项包括 Material、Bootstrap 或 Fluent UI。但您也可以通过修改版式、颜色、圆度和高度来创建自己的 Fluent、Bootstrap 或基于 Material 的主题，并选择浅色或深色模式。

• 使用与框架无关的方法生成 Angular 代码 是使用 App Builder 进行 Angular 项目的另一个好处。除了通过点击生成符合最佳实践和行业标准的干净 Angular 代码之外，我们的低代码工具还可以创建与框架无关的应用程序。您可以轻松地从 Angular 切换到低代码工具支持的另一个框架 - Blazor 和 Web Components。所有这一切只需单击一下即可。