第 7 章：将功能添加到应用

Kiana 和 Maria 很高兴地向现场技术人员 Caleb 显示库存管理应用。 Caleb 喜欢该应用，但建议添加一些额外的用户界面功能以使其更易于使用。 具体来说，Caleb 希望能够：

• 在样本或空调单位上添加已完成工作的照片，然后在编辑约会屏幕上将其添加到约会详细信息。 此图像可以证实是维修后的有用文件证据。 编辑约会屏幕当前使用户能够将图像添加到约会，但不会保存图像，因为此功能尚未完全实现。 这一遗漏的原因是 Kiana 和 Preeti 需要确定存储图像数据的最佳位置。 Caleb 希望尽快添加此功能。

• 查看客户的完整约会历史记录，以跟踪请求的维修并监视任何可能需要反复请求技术人员的持续问题。

• 从零件详细信息屏幕中订购零件。

此外，零件详细信息屏幕上的图像控件显示在指定 URL 中存储的图像。 当前，数据中的 URL 只是占位符。 与约会屏幕的照片一样，Kiana 和 Preeti 需要确定存储图像的最佳位置，以便应用可以使用它们。

向约会添加照片

照片需要存储在应用可访问的某个位置。 出于性能和安全原因，Preeti 不希望将照片保存在 OneDrive 或 Azure SQL 数据库中。 相反，他们决定使用 Azure Blob 存储。 Blob 存储经过优化，可存储大型二进制对象，并且非常强大，具有内置安全性。 Power Apps 具有允许访问 Blob 存储的连接器。 Maria 建议添加一个新的拍照屏幕，从而改进 Caleb 的用户体验。

详细信息：Azure Blob 存储

Preeti 通过执行以下步骤从 Azure 门户创建 Blob 存储帐户：

1. 在 Azure 门户中，在主页上，选择 + 创建资源。 在搜索市场框中，输入存储帐户，然后选择输入。

   

2. 在存储帐户页面上，选择创建。

3. 在创建存储帐户页面上，输入以下详细信息，然后选择查看 + 创建：

   • 订阅：选择您的订阅
   • 资源组：webapi_rg
   • 存储帐户名称：提供全局唯一名称并稍后记下该名称
   • 位置：选择最近的位置
   • 性能：标准
   • 帐户种类：BlobStorage
   • 复制：RA-GRS

   

4. 在验证页面上，选择创建，等待存储帐户预配。

5. 转到新存储帐户的页面。

6. 在概述页面上，选择容器。

   

7. 在容器页面上，选择 + 容器。 创建名为照片的新容器，然后选择创建。 将公共访问级别更改为 Blob。

   

8. 返回存储帐户的概述页面，在设置下，选择访问密钥。 在访问密钥页面上，选择显示密钥。 记下 key1 的密钥的值。

   

Preeti 向 Kiana 提供存储帐户名称和密钥，后者通过执行以下步骤使用此信息为应用创建自定义连接器。

1. 登录到 Power Apps。

2. 在左侧窗格上，展开数据，然后选择连接。 应列出应用使用的现有连接。 选择 + 新建连接。

   

3. 在新建连接页面上，向下滚动，选择连接，选择 Azure Blob 存储，然后选择创建。

   

4. 在 Azure Blob 存储对话框中，输入 Preeti 提供的存储帐户名称和访问密钥，然后选择创建。

   

5. 等待新连接创建。 它应显示在连接列表中。

Maria 可以使用与应用中 Blob 存储的此连接，以保存和检索照片图像。 Maria 的第一个任务是通过执行以下步骤添加与应用的连接：

1. 打开 VanArsdelApp 应用以供在 Power Apps Studio 中进行编辑。

2. 在数据窗格上，选择添加数据，搜索 Azure Blob 存储连接器，然后选择连接器。

   

3. 在 Azure Blob 存储对话框中，选择 Azure Blob 存储连接器以将其添加到应用。

   

Maria 的下一个任务是添加使技术人员或工程师能够保存照片的屏幕。 Maria 决定添加具有图片控件的新屏幕。 当应用在移动设备上运行时，此控件可以与相机集成，以便技术人员能够获取照片。 在其他设备上，此控件提示用户改为上传图像文件。 Maria 通过执行以下步骤从 EditAppointment 屏幕向此新屏幕添加链接：

1. 在插入菜单上，选择新建屏幕，然后选择可滚动模板。

   

2. 在树视图窗格上，选择新屏幕并将其重命名为 TakePhoto。

3. 将此屏幕上 LblAppNameX 控件的文本属性更改为获取照片。

4. 从屏幕中删除 CanvasX 控件。

5. 在插入菜单中，从媒体下拉列表中，选择添加图片以创建新图片控件。

   

   备注

   图片控件实际上是一个复合自定义组件，使用户能够将图片添加到屏幕并显示结果。

6. 调整图片控件的大小并重新定位以占据屏幕的主体。

7. 在树视图窗格上，选择 AppointmentDetails 屏幕上的 IconBackarrowX 控件，然后选择复制。

   

8. 在树视图菜单上，右键单击 TakePhoto 屏幕，然后选择粘贴。 IconBackArrowX 控件将添加到屏幕。

   

9. 将 IconBackArrowX 控件移动到标头栏的左上角。

10. 在树视图窗格上，选择 TakePhoto 屏幕上的 IconBackArrowX 控件。 在右侧窗格的高级选项卡上，将 OnSelect 操作属性修改为 Navigate(EditAppointment, ScreenTransition.None)。

11. 将新的保存图标控件添加到标头栏的右上角。 将此控件的可见属性设置为 If(IsBlank(AddMediaButton1.Media), false, true)。

    如果用户未选择图像，此设置将使保存图标不可见。

    

12. 将保存图标控件的 OnSelect 操作属性中的公式更改为以下项。

    Set(ImageID, GUID() & ".jpg");
    
    AzureBlobStorage.CreateFile("photos", ImageID, AddMediaButton1.Media);
    
    Patch(appointmentsCollection, LookUp(appointmentsCollection,id=BrowseAppointmentsGallery.Selected.id), {imageUrl:"https://myappphotos.blob.core.windows.net/photos/" & ImageID});
    
    Navigate(EditAppointment,ScreenTransition.Cover);
    

    将 <storage account name> 替换为 Preeti 创建的 Azure 存储帐户的名称。

    此代码将图像上传到 Blob 存储中的照片容器。 为每个图像提供唯一文件名。 修补函数使用 Blob 存储中图像的 URL 更新约会记录中的 imageUrl 属性。

13. 在树视图窗格上，展开 AddMediaWithImageX 控件。 修改 UploadedImageX 控件的图像属性，并将其设置为 AppointmentImage。

    AppointmentImage 是一个变量，将使用用户上传的图像或作为获取照片结果的图像填充。 稍后，您将在 EditAppointment 屏幕中初始化此变量。

14. 在树视图窗格上，选择 AddMediaButtonX 控件。 将此控件的 UseMobileCamera 属性设置为 true。 将控件的 OnChange 操作属性设置为以下项。

    Set(AppointmentImage, AddMediaButton1.Media)
    

    此公式更改 AppointmentImage 变量以引用新图像。 UploadedImageX 控件将显示此图像。

15. 在树视图窗格上，选择 EditAppointment 屏幕。

16. 展开 EditFormX 控件。 在 图像_DataCardX 控件下，删除 AddPictureX 控件。

    

17. 选择 图像X 控件。 更改以下属性：

    • 图像：Parent.Default
    • X：30
    • Y：DataCardKeyX.Y + DataCardKeyX.Height + 150（其中 DataCardKeyX 是包含 图像X 控件的数据卡）
    • 宽度：Parent.Width - 60
    • 高度：400

    备注

    图像控件将下拉到屏幕底部，但将自动添加滚动条以允许查看图像。

18. 将相机图标添加到数据卡，然后在图像标签和 ImageX 控件之间放置它。 将控件的名称更改为 CameraIcon。

    备注

    确保选择“相机图标”控件，而不是“相机媒体”控件。

    

19. 将 CameraIcon 控件的 OnSelect 操作属性设置为以下项。

    Set(AppointmentImage, SampleImage);
    
    Navigate(TakePhoto, ScreenTransition.None);
    

    当用户选择此图标时，他们将转到 TakePhoto 屏幕，可在该屏幕中获取照片或上传图像。 显示的初始图像将是默认的示例图像。

若要测试应用，请执行以下操作：

1. 在树视图窗格上，选择主屏幕。

2. 选择 F5 以预览应用。

3. 在主屏幕上，选择约会。

4. 在浏览屏幕中，选择任何约会。

5. 在约会的详细信息屏幕上，选择屏幕标头中的编辑图标。

6. 在编辑屏幕上，选择图像的相机图标。

7. 验证是否显示获取照片屏幕。

8. 选择更改图片并上传选择的图片（如果在移动设备上运行应用，则获取照片）。

9. 选择保存。 验证图像是否显示在详细信息页面上，然后选择对号图标以将更改保存回数据库。

10. 关闭预览窗口，并返回到 Power Apps Studio。

显示零件的图像

确定 Blob 存储是保存与约会关联的图片的理想位置后，Preeti 和 Kiana 决定他们应该使用存储零件图像的相同方法。 此方法的一个关键好处是不需要对应用进行任何修改。 应用重复使用同一存储帐户和同一连接。 作为单独的迁移练习，他们可以执行以下操作：

1. 创建新的 Blob 存储容器。

2. 将零件图像上传到此容器。

3. 将 InventoryDB 数据库中零件表中的 ImageUrl 引用更改为每个图像的 URL。

应用将自动每个零件图像选取新的 URL，PartDetails 屏幕上的图像控件将显示该图像。

跟踪客户的约会历史记录

Maria 认为，可以通过创建自定义组件添加从客户的以前技术人员访问中快速查看所有历史记录的功能。 Maria 与 Caleb 协作处理他们希望看到的信息，草拟一个由每次访问的注释和日期组成的简单设计。

Maria 通过查看这些数据，认为库控件是在屏幕上显示表数据的最佳方式。

Maria 将创建自定义组件，如下所示：

1. 使用 Power Apps Studio，在树视图窗格上，选择组件，然后选择 + 新建组件。

   

   创建一个名为 Component1 的新空组件。 将该组件重命名为 DateHistoryComponent。

   

2. 在插入菜单上，选择库，然后选择空白灵活高度库模板。

   

3. 移动库控件并调整其大小以填充自定义组件。

4. 选择从插入窗格中添加项目，然后选择文本标签。

   

5. 在树视图窗格上，将标签控件重命名为 NotesLabel。 将溢出属性设置为 Overflow.Scroll。 此设置使控件能够显示多行文本，并允许用户滚动浏览它。 设置以下属性，以便可以放置控件并调整其大小：

   • LineHeight：2
   • X：28
   • Y：18
   • 宽度：574
   • 高度：140

6. 将第二个文本标签添加到控件。 将此控件重命名为 DateLabel，并设置以下属性：

   • LineHeight：2
   • X：28
   • Y：174
   • 宽度：574
   • 高度：70

7. 若要查看控件在插入到应用中并使用其主题显示时的外观，请在树视图窗格上，选择 DateHistoryComponent。 在右侧窗格的高级选项卡上，选择填充字段并将颜色更改为 RGBA(0, 0, 0, 1)。

   

8. 在插入窗格上，展开形状，然后将矩形控件添加到自定义组件。 为此控件设置以下属性：

   • X：0
   • Y：273
   • 宽度：Parent.Width
   • 高度：2

   此控件充当库中显示的记录之间的分隔符。

   

Maria 熟悉将控件添加到屏幕以及使用 Power Apps 生成应用。 但是，可重复使用组件不能以相同方式工作。 Kiana 向 Maria 介绍到，若要能够在自定义组件中使用数据，必须添加一些其他自定义输入属性。 Kiana 还解释到，Maria 需要为这些属性提供示例数据，以便在组件中引用控件中的数据字段，如下所示：

1. 在树视图窗格上，选择 DateHistoryComponent。 在右侧窗格的属性选项卡上，选择新建自定义属性。

   

2. 在新建自定义属性对话框中，指定以下值，然后选择创建：

   • 显示名称：数据
   • 名称：数据
   • 描述：客户的约会表，显示注释和日期
   • 属性类型：输入
   • 数据类型：表
   • 在值更改时引发 OnReset：保留为空

   

3. 若要更改控件显示的示例数据，请选择新的数据自定义属性。 在公式字段中，输入 Table({Notes: "Example notes field text.", 'Appointment Date': Text(Today())})。

   

4. 在树视图窗格上，选择 DateHistoryComponent 中的 库X 控件，然后将其重命名为 AppointmentHistory。

5. 在右侧窗格的高级选项卡上，将 AppointmentHistory 库控件的项目属性设置为 Parents.Data。

   

6. 选择 NotesLabel 控件。 在右侧窗格的高级选项卡上，将文本属性更改为 ThisItem.Notes，并将大小属性更改为 20。

   备注

   大小属性指定控件显示的文本的字体大小。

7. 选择 DateLabel 控件以将文本属性更改为 ThisItem.'Appointment Date' 并将大小属性更改为 20。 自定义组件中的字段应显示示例数据。

   

自定义组件已完成。 Maria 创建一个新屏幕，以使用此组件显示客户的约会历史记录，如下所示：

1. 在树视图窗格上，选择屏幕选项卡。

2. 展开 BrowseAppointments 屏幕，展开 BrowseAppointmentsGallery 控件，然后选择 Body1_1 控件。 在插入菜单上，选择图标，然后选择详细信息列表图标。

   

3. 将图标控件的名称更改为 ViewAppointments。

4. 在树视图菜单上，选择 BrowseAppointmentsGallery 控件。 在右侧窗格的高级选项卡上，将 TemplateSize 属性更改为 220。 增加此属性将扩展库中的可用空间。

5. 将 ViewAppointments 图标移至客户名称下面的空白区域。

   

6. 选择 ViewAppointments 图标控件。 将 OnSelect 操作属性设置为以下公式。

   ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId));
   
   Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)
   

   此公式使用选定客户的约会填充名为 customerAppointmentsCollection 的集合，然后移动到 AppointmentHistoryScreen 以显示它们。 您将按照以下步骤创建此屏幕。

7. 在插入菜单上，选择新建屏幕，然后选择可滚动模板。

   

8. 将新屏幕的名称更改为 AppointmentHistoryScreen。

9. 删除已添加到此屏幕的 CanvasX 控件。

   

10. 在此屏幕上，选择 LblAppNameX 控件。 在右侧窗格的高级选项卡上，将文本属性更改为以下项。

    "Appointments History for " &  BrowseAppointmentsGallery.Selected.customer.name
    

11. 为 LblAppNameX 控件设置以下属性以调整位置和大小：

    • X：90
    • Y：0
    • 宽度：550
    • 高度：140

12. 选择 RectQuickActionBarX 控件，然后将高度属性设置为 140。

13. 将左图标控件添加到标题左侧的屏幕标头。 将此控件的 OnSelect 操作属性设置为 Navigate(BrowseAppointments, Transition.None)。

    

14. 在插入菜单上，选择自定义，然后选择 DateHistoryComponent。

    

15. 移动组件并调整其大小，以便它占据屏幕的主体（在标题下方）。

    

16. 为此组件设置以下属性：

    • 数据：customerAppointmentsCollection
    • 约会日期：startDateTime
    • 注释：notes

17. 保存应用。

若要测试应用，请执行以下操作：

1. 在树视图窗格上，选择主屏幕。

2. 选择 F5 以预览应用。

3. 在主屏幕上，选择约会。

4. 在浏览屏幕中，为任何约会选择详细信息列表图标。

5. 验证是否显示选定客户的约会历史记录屏幕。

6. 关闭预览窗口，并返回到 Power Apps Studio。

订购零件

系统的一个关键要求是使技术人员能够订购访问客户时所需的任何零件。 如果零件没有库存，应该可以安排另一次访问以在客户的下一个方便日期完成维修。 如果零件当前库存不足，必须订购，技术人员可以告诉客户。 然后，当 Maria 收到零件已到达仓库的通知时，Malik 可以与客户安排约会。

应用的预留部分使用 InventoryDB 数据库中的表，如下图所示。 订单表包含有关零件下单的信息。 预留表列出技术人员和工程师针对零件提出的预留请求。 工程师表提供提出预留的工程师的姓名和联系人号码，这便于库存经理 Maria 在必要时进行查询。

为了支持此功能，Kiana 必须使用为指定零件的预留件数的方法更新 Web API，如下所示：

1. 在 Visual Studio Code 中打开 FieldEngineerApi Web API 项目。

2. 将名为 Order.cs 的文件添加到模型文件夹。 将以下代码添加到此文件。 订单类跟踪为零件下单的详细信息。

   using System;
   using System.ComponentModel.DataAnnotations;
   using System.ComponentModel.DataAnnotations.Schema;
   
   namespace FieldEngineerApi.Models
   {
       public class Order 
       {
           [Key]
           public long Id { get; set; }
   
           public long BoilerPartId { get; set; }
   
           public BoilerPart BoilerPart { get; set; }
   
           public long Quantity { get; set; }
   
           [Column(TypeName = "money")]
           public decimal TotalPrice { get; set; }
   
           [Display(Name = "OrderedDate")]
           [DataType(DataType.DateTime)]
           [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
           public DateTime OrderedDateTime { get; set; }
   
           public bool Delivered { get; set; }
   
           [Display(Name = "DeliveredDate")]
           [DataType(DataType.DateTime)]
           [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
           public DateTime? DeliveredDateTime { get; set; }
       }
   }
   

3. 将另一个名为 Reservation.cs 的新文件添加到模型文件夹，然后将以下代码添加到此文件。 预留类包含有关当前为其他客户预留的给定零件的件数的信息。

   using System;
   using System.ComponentModel.DataAnnotations;
   
   namespace FieldEngineerApi.Models
   {
       public class Reservation
       {
           [Key]
           public long Id { get; set; }
   
           public long BoilerPartId { get; set; }
   
           public BoilerPart BoilerPart { get; set; }
   
           public int NumberToReserve { get; set; }
   
           public string EngineerId { get; set; }
   
           public InventoryEngineer Engineer { get; set; }
       }
   }
   

4. 使用以下代码将另一个名为 InventoryEngineer.cs 的文件添加到模型文件夹。 InventoryEngineer 类记录哪些工程师进行了哪些预留。

   using System.ComponentModel.DataAnnotations;
   using System.Collections.Generic;
   
   namespace FieldEngineerApi.Models
   {
       public class InventoryEngineer
       {
           [Key]
           public string Id { get; set; }
   
           [Required]
           public string Name { get; set; }
   
           public string ContactNumber { get; set; }
   
           public List<Reservation> Reservations { get; set; }
       }
   }
   

5. 打开模型文件夹中的 InventoryContext.cs 文件，然后将以下语句添加到 InventoryContext 类。

   public class InventoryContext : DbContext
   {
       public InventoryContext(DbContextOptions\<InventoryContext\> options)
           : base(options)
       {
   
       }
   
       public DbSet<BoilerPart> BoilerParts { get; set; }
       public DbSet<InventoryEngineer> Engineers { get; set; }
       public DbSet<Order> Orders { get; set; }
       public DbSet<Reservation> Reservations { get; set; }
   }
   

6. 在 Visual Studio Code 的“终端”窗口中，运行以下命令以生成用于处理订单和预留的控制器。

   dotnet aspnet-codegenerator controller ^
       -name OrdersController -async -api ^
       -m Order ^
       -dc InventoryContext -outDir Controllers
   
   dotnet aspnet-codegenerator controller ^
       -name ReservationsController -async -api ^
       -m Reservation ^
       -dc InventoryContext -outDir Controllers
   

7. 打开控制器文件夹中的 BoilerPartController.cs 文件，并将以下 GetTotalReservations 方法添加到 BoilerPartsController 类。

   public class BoilerPartsController : ControllerBase
   {
       private readonly InventoryContext _context;
   
       public BoilerPartsController(InventoryContext context)
       {
           _context = context;
       }
   
       ...
   
       // GET: api/BoilerParts/5/Reserved 
       [HttpGet("{id}/Reserved")]
       public async Task<ActionResult<object>> GetTotalReservations(long id)
       { 
           var reservations = await _context
               .Reservations
               .Where(r => r.BoilerPartId == id) 
               .ToListAsync();
   
           int totalReservations = 0; 
   
           foreach(Reservation reservation in reservations) 
           { 
               totalReservations += reservation.NumberToReserve; 
           } 
   
           return new {id, totalReservations}; 
       }
       ...
   }
   

8. 编辑 OrdersController.cs 文件，并通过以下方法修改 OrdersController 类中的 PostOrder 方法，如下所示。

   [HttpPost]
   public async Task<ActionResult<Order>> PostOrder(long boilerPartId, int quantity)
   {
       var part = await _context.BoilerParts.FindAsync(boilerPartId);
   
       Order order = new Order 
       {
           BoilerPartId = boilerPartId,
           Quantity = quantity,
           OrderedDateTime = DateTime.Now,
           TotalPrice = quantity * part.Price
       };
   
       _context.Orders.Add(order);
       await _context.SaveChangesAsync();
   
       return CreatedAtAction("GetOrder", new { id = order.Id }, order);
   }
   

9. 编辑 ReservationsController.cs 文件。 修改 ReservationsController 类中的 PostReservation 方法，如下所示。

   [HttpPost]
   public async Task<ActionResult<Reservation>> PostReservation(long boilerPartId, string engineerId, int quantityToReserve)
   {
       Reservation reservation = new Reservation 
       {
           BoilerPartId = boilerPartId,
           EngineerId = engineerId,
           NumberToReserve = quantityToReserve
       };
   
       _context.Reservations.Add(reservation);
       await _context.SaveChangesAsync();
   
       return CreatedAtAction("GetReservation", new { id = reservation.Id }, reservation);
   }
   

10. 在“终端”窗口中，运行以下命令以生成并发布 Web API 以供部署。

    dotnet build
    dotnet publish -c Release -o ./publish
    

11. 在 Visual Studio Code 中，右键单击发布文件夹，然后选择部署到 Web 应用。

现在，Preeti 可以更新 VanArsdel 应用使用的 API 管理服务以反映更新的 Web API。 这是一项不可中断的更改；现有操作将继续运行，不同之处在于用于进行预留和下订单的新控制器和操作。 Preeti 将执行以下任务：

备注

Preeti 已选择删除现有现场工程师 API 并将其替换为新版本，但该方法存在中断任何当前可能使用 API 的现有应用程序的风险。 最好是将现有 API 保留原样，然后将修改添加为修订。

1. 在 Azure 门户中，转到 API 管理服务。

2. 在 API 管理服务页面上，在左侧窗格上的 API 下，选择 API。

3. 选择现场工程师 API，选择省略号菜单，然后选择添加修订。

   

4. 在创建现场工程师 API 的新修订对话框中，输入描述为零件预留和订单添加了 GET 操作和 POST 操作，然后选择创建。

   

5. 在修订 2 页面上，选择设计。

   

6. 在设计页面上，选择添加操作。 在 FrontEnd 窗格上，设置以下属性，然后选择保存。 此操作用于检索为给定样本零件预留的件数：

   • 显示名称：api/BoilerParts/{id}/Reserved
   • 名称：api-boilerparts-id-reserved
   • URL：GET api/BoilerParts/{id}/Reserved

   

7. 在新操作的测试选项卡上，将 ID 参数设置为有效的零件编号（图像中的示例使用零件 1），然后选择发送。

   

8. 验证测试是否成功。 此操作在完成时应具有 HTTP 200 响应和一个显示产品的预留数量的主体。

   

9. 在设计页面上，选择添加操作。 在 FrontEnd 窗格上，设置以下属性（此操作定义用于创建新订单的 POST 请求）：

   • 显示名称：api/Orders - POST
   • 名称：api-orders-post
   • URL：POST api/Orders

10. 在查询选项卡上，选择 + 添加参数，添加以下参数，然后选择保存：

    • 名称：boilerPartId，描述：样本零件 ID，类型：long
    • 名称：数量，描述：数量，类型：整数

    

11. 在 FrontEnd 窗格上再次选择添加操作，并设置以下属性（此操作定义用于创建新预留的 POST 请求）：

    • 显示名称：api/Reservations - POST
    • 名称：api-reservations-post
    • URL：POST api/Reservations

12. 在查询选项卡上，添加以下参数，然后选择保存：

    • 名称：boilerPartId，描述：样本零件 ID，类型：long
    • 名称：engineerId，描述：工程师 ID，类型：字符串
    • 名称：quantityToReserve，描述：要预留的数量，类型：整数

13. 在修订选项卡上，选择新版本。 在此版本的省略号菜单上，选择设置当前值。

    

14. 在设置修订当前值对话框中，选择保存。

15. 在 Web 浏览器中打开另一个页面，并转到 URL https://<APIM name>.azure-api.net/api/boilerparts/1/reserved，其中 <APIM name> 是您的 API 服务的名称。 确认您获取类似于以下内容的响应。

    {"id":1,"totalReservations":5}
    

更新的 Web API 现已可用。 理论上，Kiana 可以为更新的 Web API 创建新自定义连接器并将其添加到应用。 然后，应用可以实施自己的逻辑以确定指定产品当前在库存中的件数、预留数量，将结果与所需的件数进行比较，下单获取更多库存（如果需要）或从现有库存中预留件数。 但是，此种逻辑更适合在 Azure 逻辑应用中实施。 当技术人员希望预留或订购零件时，Power Apps 可以通过自定义连接器调用逻辑应用。

若要创建逻辑应用，Kiana 使用以下步骤：

备注

为了简化操作，在此示例中创建的逻辑应用是非事务性的。 在检查零件的可用性和进行预留之间，并行用户可能会作出冲突的预留。 您可以通过将此逻辑应用中的一些逻辑替换为 InventoryDB 数据库中的存储过程来实施事务性语义。

1. 在 Azure 门户中，在主页上，选择 + 创建资源。

2. 在搜索市场框中，输入逻辑应用，然后选择输入。

3. 在逻辑应用页面上，选择创建。

   

4. 在创建逻辑应用页面上，输入以下值，然后选择查看 + 创建：

   • 订阅：选择您的 Azure 订阅
   • 资源组：webapi_rg
   • 逻辑应用名称：FieldEngineerPartsOrdering
   • 区域：选择用于 Web API 的相同位置
   • 与集成服务环境关联：保留为空
   • 启用日志分析：保留为空

5. 在认证页面上，选择创建，等待逻辑应用部署。

6. 完成部署后，选择转到资源。

7. 在逻辑应用设计器页面上，向下滚动到 模板 部分，然后选择 空白逻辑应用。

   

8. 在 所有 选项卡上，在 搜索连接器和触发器 文本框中，搜索请求。

    

9. 在触发器选项卡上，选择收到 HTTP 请求时。

   

10. 在请求正文 JSON 架构框中，输入以下架构，然后选择 + 新建步骤。

    {
        "type": "object",
        "properties": {
            "boilerPartId": {
                "type": "integer"
            },
            "numberToReserve": {
                "type": "integer"
            },
            "engineerId": {
                "type": "string"
            }
        }
    }
    

    

    此架构定义逻辑应用需要的 HTTP 请求的内容。 请求正文包含样本零件的 ID、要预留的件数以及进行请求的工程师的 ID。 当工程师想要预留零件时，应用将发送此请求。

11. 在选择操作框中，选择所有，然后选择 HTTP。

    

    逻辑应用将调用 Web API 的 BoilerParts{id} 操作，以检索有关应用请求提供的样本零件的信息。

12. 在操作窗格上，选择 HTTP 操作。

    

13. 在 HTTP 操作框中，在省略号菜单上，选择重命名，然后将操作名称更改为 CheckBoilerPart。

    

14. 按如下方式设置 HTTP 操作的属性，然后选择 + 新建步骤：

    • 方法：GET
    • URI：https://<APIM name>.azure-api.net/api/boilerparts/，其中 <APIM name> 是您的 API 管理服务的名称。 在此 URI 的动态内容框中，在动态内容选项卡上，选择 boilerPartId

    

15. 在选择操作框中，在搜索连接器和操作框中，输入分析 JSON，然后选择分析 JSON 操作。

    

16. 针对分析 JSON 操作使用省略号菜单，将该操作重命名为 ParseBoilerPart。

17. 在 ParseBoilerPart 操作的内容框中，在动态内容框中，选择正文。 在架构框中，输入以下 JSON 架构，然后选择 + 新建步骤。

    {
        "type": "object",
        "properties": {
            "id": {
                "type": "integer"
            },
            "name": {
                "type": "string"
            },
            "categoryId": {
                "type": "string"
            },
            "price": {
                "type": "number"
            },
            "overview": {
                "type": "string"
            },
            "numberInStock": {
                "type": "integer"
            },
            "imageUrl": {
                "type": "string"
            },
        }
    }
    

    

    此操作分析 getBoilerParts/{id} 请求返回的响应消息。 响应包含样本零件的详细信息，包括当前库存数量。

18. 在新步骤的选择操作框中，选择 HTTP 连接器。

19. 在操作选项卡上，选择 HTTP 操作。

20. 使用操作的省略号菜单，将操作重命名为 CheckReservations。

21. 设置此操作的以下属性，然后选择 + 新建步骤：

    • 方法：GET
    • URI：https://<APIM name>.azure-api.net/api/boilerparts/。 与以前一样，在此 URI 的动态内容框中，在动态内容选项卡上，选择 boilerPartId。 在 URI 字段中，在 boilerPartId 占位符后面追加文本 /reserved

    

22. 在新操作的选择操作框中，在搜索连接器和操作框中，输入分析 JSON，然后选择分析 JSON 操作。

23. 将操作重命名为 ParseReservations。

24. 将内容属性设置为正文。

25. 输入以下架构，然后选择 + 新建步骤。

    {
        "type": "object",
        "properties": {
            "id": {
                    "type": "integer"
            },
            "totalReservations": {
                    "type": "integer"
            }
        }
    }
    

    

26. 在新操作的选择操作框中，在搜索连接器和操作框中，输入条件，然后选择条件控件操作。

    

27. 将操作重命名为 CompareStock。

28. 选择选择值框。 在添加动态内容框中，在表达式选项卡上，输入以下表达式，然后选择确定。

    add(body('ParseReservations')?['totalReservations'], triggerBody()?['numberToReserve'])
    

    该表达式计算当前预留的指定样本零件的件数和工程师请求的数量的总和。

    

29. 在条件下拉列表框中，选择大于。

30. 在剩余的选择值框中，在动态内容框中，在动态内容选项卡上的 ParseBoilerPart 下，选择 numberInStock。

    

31. 如果所需的件数加上预留的数量大于库存中的数量，应用需要下订单来补充库存。 在 CompareStock 操作的 True 分支中，选择添加操作。

32. 在新操作的所有选项卡上，选择 HTTP，然后选择 HTTP 操作。

33. 将操作重命名为 PostOrder。

34. 为 PostOrder 操作设置以下属性：

    • 方法：POST
    • URI：https://<APIM name>.azure-api.net/api/orders
    • 在查询表的第一行中，输入密钥 boilerPartId。 对于添加动态内容框中的值，在动态内容选项卡上，选择 boilerPartId
    • 在查询表的第二行中，输入密钥 quantity。 在值字段中，输入 50。

    

    当库存不足时，逻辑应用将自动订购 50 件指定零件。

    备注

    逻辑应用假设工程师实际上不会尝试在单个请求中预留超过 50 件指定零件！

35. 将 CompareStock 操作的 False 分支保留为空。

36. 在 CompareStock 操作下，选择 + 新建步骤。

37. 在新操作的所有选项卡上，选择 HTTP，然后选择 HTTP 操作。

38. 将操作重命名为 PostReservation。

39. 为 PostReservation 操作设置以下属性：

    • 方法：POST
    • URI：https://<APIM name>.azure-api.net/api/reservations
    • 在查询表的第一行中，输入密钥 boilerPartId。 对于添加动态内容框中的值，在动态内容选项卡上，选择 boilerPartId。
    • 在第二行中，输入密钥 engineerId。 对于添加动态内容框中的值，在动态内容选项卡上，选择 engineerId
    • 在第三行中，输入密钥 quantityToReserve。 对于添加动态内容框中的值，在动态内容选项卡上，选择 numberToReserve

40. 选择 + 新建步骤。 在选择操作框中，搜索并选择响应操作。

41. 设置响应操作的以下属性：

    • 状态代码：200
    • 标头：键 - content-type，值 - application/json
    • 正文：在动态内容框中，从 PostReservation 请求中选择正文元素。 这是在进行预留时返回的正文。

    

42. 在逻辑应用设计器页面的左上角，选择保存。 验证可以保存逻辑应用，而不出现任何错误。

若要创建 Power Apps 可用于触发逻辑应用的自定义连接器，Kiana 在仍处于 Azure 门户中时执行以下步骤：

1. 在逻辑应用的概述页面上，选择导出。

   

2. 在导出到 Power Apps 窗格中，命名连接器 PartsOrderingConnector，选择您的 Power Apps 环境，然后选择确定。

   

3. 登录到 Power Apps。

4. 在您的环境中，在数据下，选择自定义连接器，然后验证是否列出 PartsOrderingConnector。

   

现在，Maria 可以修改 VanArsdel 应用，以便技术人员可以在访问客户现场时订购零件。 Maria 将订购按钮添加到 PartDetails 屏幕，如下所示：

1. 登录到 Power Apps（如果尚未登录）。

2. 在应用下，选择 VanArsdelApp 应用。 在应用的省略号菜单上，选择编辑。

3. 在数据窗格上，选择添加数据，搜索 PartsOrderingConnector 连接器，然后使用该连接器添加新连接。

   

4. 在树视图窗格上，展开 PartDetails 屏幕，然后展开 DetailForm1 窗体。

5. 在右侧的属性窗格上，选择编辑字段。 在字段窗格上，在省略号菜单上，选择添加自定义卡。

   

6. 在树视图窗格上，将新卡从 DataCard1 重命名为 ReserveCard。 在设计视图窗口中，调整卡大小，以便它占据屏幕的下半部分，位于 图像_DataCard1 控件下方。

   

7. 在插入菜单上，从输入子菜单中，将文本输入控件、按钮控件和标签控件添加到 ReserveCard 控件。

8. 调整控件的大小和位置，以便它们相邻，即按钮控件在文本输入控件右侧，标签在按钮控件下方。

9. 在文本输入控件的属性窗格上，清除默认属性。

10. 在按钮控件的属性窗格上，将文本属性设置为预留。

    

11. 将文本输入控件重命名为 NumberToReserve，将按钮控件重命名为预留，将标签控件重命名为消息。

12. 在消息控件的属性窗格上，将文本属性设置为零件已预留，然后将可见属性设置为 MessageIsVisible。

    备注

    MessageIsVisible 是一个变量，当显示屏幕时，您可以将其初始化为 false，但如果用户选择预留按钮，它将更改为 true。

13. 将预留按钮控件的 OnSelect 属性设置为以下公式。

    FieldEngineerPartsOrdering.manualinvoke({boilerPartId:ThisItem.id, engineerId:"ab9f4790-05f2-4cc3-9f01-8dfa7d848179", numberToReserve:NumberToReserve.Text});
    
    Set(MessageIsVisible, true);
    

    备注

    此公式使用硬编码的工程师 ID 来表示当前运行应用的技术人员。 第 8 章介绍如何检索已登录用户的 ID。

    此外，该应用不执行错误检查；它假设预留零件的请求始终成功。 有关错误处理的详细信息，请转到 Power Apps 中的错误功能。

14. 将 PartDetails 屏幕的 OnVisible 属性设置为 Set(MessageIsVisible, false)。

若要测试应用，请执行以下操作：

1. 在树视图窗格上，选择主屏幕。

2. 选择 F5 以预览应用。

3. 在主屏幕上，选择零件。

4. 在浏览屏幕中，选择任何零件。

5. 在零件详细信息屏幕上，向下滚动到预留部分，输入一个正整数值，然后选择预留。 验证是否显示零件已预留消息。

   

6. 关闭预览窗口，并返回到 Power Apps Studio。

7. 在 Azure 门户中，转到 InventoryDB SQL 数据库的页面。

8. 选择查询编辑器，然后使用您的密码以 sqladmin 身份登录。

9. 在查询 1 窗格中，输入以下查询，然后选择运行。 确认显示您在 VanArsdel 应用中进行的预留。

   SELECT * FROM [dbo].[Reservations]
   

   

上一个 下一个