Chia sẻ qua

Chương 7: Thêm chức năng vào ứng dụng

  • Bài viết

Kiana và Maria rất hào hứng khi giới thiệu ứng dụng quản lý hàng tồn kho cho Caleb, kỹ thuật viên hiện trường. Caleb thích nó nhưng đề nghị thêm một số chức năng giao diện người dùng bổ sung để dễ sử dụng hơn. Cụ thể, Caleb muốn có thể:

  • Thêm ảnh chụp công việc đã hoàn thành trên lò hơi hoặc thiết bị điều hòa không khí và thêm ảnh đó vào chi tiết cuộc hẹn trên màn hình Chỉnh sửa cuộc hẹn. Hình ảnh này có thể hữu ích như bằng chứng tư liệu về việc sửa chữa được thực hiện. Màn hình Chỉnh sửa cuộc hẹn hiện cho phép người dùng thêm hình ảnh vào cuộc hẹn, nhưng hình ảnh chưa được lưu vì tính năng này chưa được triển khai đầy đủ. Sở dĩ có sự thiếu sót này là Kiana và Preeti cần xác định nơi tốt nhất để lưu trữ dữ liệu hình ảnh. Caleb muốn chức năng này được thêm vào càng sớm càng tốt.

  • Xem toàn bộ lịch sử cuộc hẹn cho khách hàng, để theo dõi các sửa chữa được yêu cầu và theo dõi mọi sự cố đang diễn ra mà có thể yêu cầu kỹ thuật viên phải gọi nhiều lần.

  • Đặt hàng các bộ phận từ màn hình Chi tiết bộ phận.

Ngoài ra, bảng điều khiển hình ảnh trên màn hình Chi tiết bộ phận sẽ hiển thị các hình ảnh được lưu trữ tại một URL được chỉ định. Hiện tại, các URL trong dữ liệu chỉ là chỗ dành sẵn. Giống như các bức ảnh cho màn hình cuộc hẹn, Kiana và Preeti cần xác định vị trí tốt nhất để lưu trữ hình ảnh để những hình ảnh này có sẵn cho ứng dụng.

Thêm ảnh vào cuộc hẹn

Ảnh cần được lưu trữ ở một nơi nào đó mà ứng dụng có thể truy nhập được. Vì lý do hiệu suất và bảo mật, Preeti không muốn lưu ảnh vào OneDrive hoặc trong Cơ sở dữ liệu Azure SQL. Thay vào đó, họ quyết định sử dụng Azure Blob Storage. Blob Storage được tối ưu hóa để chứa các đối tượng nhị phân lớn và mạnh mẽ, với tính năng bảo mật tích hợp. Power Apps có trình kết nối cho phép truy nhập vào Blob Storage. Maria gợi ý thêm một màn hình chụp ảnh mới, cải thiện trải nghiệm người dùng cho Caleb.

Thêm thông tin: Azure Blob Storage

Preeti tạo tài khoản Blob Storage từ cổng thông tin Azure bằng cách làm theo các bước sau:

  1. Trong Cổng thông tin Azure, trên trang Chủ, hãy chọn + Tạo nguồn lực. Trong hộp Tìm kiếm Marketplace, hãy nhập Tài khoản lưu trữ rồi chọn Nhập.

    Tìm kiếm trên Azure Marketplace.

  2. Trên trang Tài khoản lưu trữ, hãy chọn Tạo.

  3. Trên trang Tạo tài khoản lưu trữ, nhập các chi tiết sau, sau đó chọn Xem lại + tạo:

    • Đăng ký: Chọn đăng ký của bạn
    • Nhóm nguồn lực: webapi_rg
    • Tên tài khoản lưu trữ: Cung cấp một tên duy nhất trên toàn cục và ghi chú lại tên đó để sử dụng sau này
    • Vị trí: Chọn vị trí gần bạn nhất
    • Hiệu suất: Tiêu chuẩn
    • Loại tài khoản: BlobStorage
    • Sao chép: RA-GRS

    Tạo tài khoản lưu trữ Azure.

  4. Trên trang xác thực, hãy chọn Tạo và đợi tài khoản lưu trữ được cấp phép.

  5. Chuyển đến trang cho tài khoản lưu trữ mới.

  6. Trên trang Tổng quan, chọn Vùng chứa.

    Trang tổng quan về tài khoản lưu trữ.

  7. Trên trang Vùng chứa, hãy chọn + Vùng chứa. Tạo một vùng chứa mới có tên ảnh rồi chọn Tạo. Thay đổi Cấp truy nhập công cộng thành Blob.

    Tạo vùng chứa Ảnh.

  8. Quay lại trang Tổng quan cho tài khoản lưu trữ, trong phần thiết đặt, hãy chọn Khóa truy nhập. Trên trang Khóa truy nhập, chọn Hiển thị khóa. Ghi lại giá trị của khóa cho key1.

    Khóa truy nhập tài khoản lưu trữ.

Preeti cung cấp tên và khóa tài khoản lưu trữ cho Kiana, người sử dụng thông tin này để tạo trình kết nối tùy chỉnh cho ứng dụng bằng cách làm theo các bước sau:

  1. Đăng nhập vào Power Apps.

  2. Trên ngăn bên trái, bung rộng Dữ liệu và chọn Kết nối. Các kết nối hiện có được ứng dụng dùng sẽ được liệt kê. Chọn + Kết nối mới.

    Trang kết nối Power Apps.

  3. Trên trang Kết nối mới, hãy cuộn xuống, chọn Kết nối, chọn Azure Blob Storage rồi chọn Tạo.

    Chọn trình kết nối Azure Blob Storage.

  4. Trong Azure Blob Storage, nhập tên tài khoản lưu trữ và khóa truy nhập mà Preeti đã cung cấp, sau đó chọn Tạo.

    Nhập thông tin xác thực lưu trữ.

  5. Hãy đợi trong khi kết nối mới được tạo. Kết nối mới sẽ xuất hiện trên danh sách các kết nối.

Maria có thể sử dụng kết nối này với Blob Storage trong ứng dụng để lưu và truy xuất ảnh chụp. Nhiệm vụ đầu tiên của Maria là thêm kết nối vào ứng dụng bằng cách làm theo các bước sau:

  1. Mở ứng dụng VanArsdelApp để chỉnh sửa trong Power Apps Studio.

  2. Trên ngăn Dữ liệu, chọn Thêm dữ liệu, tìm kiếm trình kết nối Azure Blob Storage, rồi chọn trình kết nối đó.

    Tìm kiếm trình kết nối Blob Storage.

  3. Trong hộp thoại Azure Blob Storage, chọn trình kết nối Azure Blob Storage để thêm trình kết nối này vào ứng dụng của bạn.

    Thêm kết nối Blob Storage.

Nhiệm vụ tiếp theo của Maria là thêm một màn hình cho phép kỹ thuật viên hoặc kỹ sư lưu ảnh. Maria quyết định thêm một màn hình mới với tính năng Điều khiển hình ảnh. Khi ứng dụng được chạy trên thiết bị di động, tùy chọn điều khiển này có thể tích hợp với máy ảnh để cho phép kỹ thuật viên chụp ảnh. Trên các thiết bị khác, tùy chọn điều khiển này sẽ nhắc người dùng tải lên tệp hình ảnh thay thế. Maria thêm một liên kết đến màn hình mới này từ màn hình Chỉnh sửa cuộc hẹn bằng cách làm theo các bước sau:

  1. Trên menu Chèn, chọn Màn hình mới và sau đó chọn mẫu Có thể cuộn được.

    Màn hình mới từ Mẫu có thể cuộn được.

  2. Trên Dạng xem cây, chọn màn hình mới và đổi tên màn hình này thành TakePhoto.

  3. Thay đổi thuộc tính Văn bản của tùy chọn điều khiển LblAppNameX trên màn hình này thành Chụp ảnh.

  4. Xóa tùy chọn điều khiển CanvasX khỏi màn hình.

  5. Trong menu Chèn, từ danh sách thả xuống Phương tiện, hãy chọn Thêm ảnh để tạo tùy chọn điều khiển ảnh mới.

    Thêm tùy chọn điều khiển Ảnh.

    Lưu ý

    Tùy chọn tùy chọn điều khiển ảnh thực sự là một thành phần tùy chỉnh tổng hợp cho phép người dùng thêm ảnh vào màn hình và hiển thị kết quả.

  6. Thay đổi kích thước và đặt lại vị trí tùy chọn điều khiển ảnh để chiếm phần thân của màn hình.

  7. Trên ngăn Dạng xem cây, hãy chọn tùy chọn điều khiển IconBackarrowX trên màn hình AppointmentDetails rồi chọn Sao chép.

    Sao chép tùy chọn điều khiển Mũi tên quay lại.

  8. Trên menu Dạng xem cây, nhấp chuột phải vào màn hình TakePhoto, sau đó chọn Dán. Điều khiển IconBackArrowX sẽ được thêm vào màn hình.

    Dán tùy chọn điều khiển Mũi tên quay lại vào màn hình TakePhoto.

  9. Di chuyển tùy chọn điều khiển IconBackArrowX ở phía trên bên trái của thanh tiêu đề.

  10. Trên ngăn Dạng xem cây, hãy chọn tùy chọn điều khiển IconBackArrowX trên màn hình TakePhoto. Ở ngăn bên phải, trên tab Nâng cao, sửa đổi thuộc tính hành động OnSelect thành Navigate(EditAppointment, ScreenTransition.None).

  11. Thêm bảng điều khiển của biểu tượng Lưu ở phía trên bên phải của thanh tiêu đề. Đặt thuộc tính Hiển thị của tùy chọn điều khiển này thành If(IsBlank(AddMediaButton1.Media), false, true).

    Thiết đặt này giúp biểu tượng Lưu ẩn nếu người dùng chưa chọn hình ảnh.

    Thêm tùy chọn điều khiển biểu tượng Lưu.

  12. Thay đổi công thức trong thuộc tính hành động OnSelect của tùy chọn điều khiển biểu tượng Lưu thành như sau.

    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);

    Thay thế <storage account name> bằng tên của tài khoản lưu trữ Azure mà Preeti đã tạo.

    Mã này tải hình ảnh lên vùng chứa ảnh trong Blob Storage. Mỗi hình ảnh được cung cấp một tên tệp duy nhất. Hàm Bản vá cập nhật thuộc tính imageUrl thuộc tính trong bản ghi cuộc hẹn với URL của hình ảnh trong Bộ nhớ Blob.

  13. Trên ngăn Dạng xem cây, hãy bung rộng bảng điều khiển AddMediaWithImageX. Sửa đổi thuộc tính Hình ảnh của tùy chọn điều khiển UploadedImageX và đặt tùy chọn điều khiển đó thành AppointmentImage.

    AppointmentImage là một biến sẽ được điền vào hình ảnh do người dùng tải lên hoặc là kết quả của việc chụp ảnh. Bạn sẽ khởi tạo biến này trong màn hình EditAppointment sau.

  14. Trên ngăn Dạng xem cây, hãy chọn bảng điều khiển AddMediaButtonX. Đặt thuộc tính UseMobileCamera của tùy chọn điều khiển này thành true. Đặt thuộc tính hành động OnChange của tùy chọn điều khiển thành sau đây.

    Set(AppointmentImage, AddMediaButton1.Media)

    Công thức này sẽ thay đổi biến AppointmentImage thành tham chiếu hình ảnh mới. Điều khiển UploadedImageX sẽ hiển thị hình ảnh này.

  15. Trên ngăn Dạng xem cây, hãy chọn màn hình EditAppointment.

  16. Bung rộng tùy chọn điều khiển EditFormX. Trong phần điều khiển Image_DataCardX, hãy loại bỏ tùy chọn điều khiển AddPictureX.

    Loại bỏ tùy chọn điều khiển AddPicture.

  17. Chọn tùy chọn điều khiển ImageX. Thay đổi các thuộc tính sau:

    • Hình ảnh: Parent.Default
    • X: 30
    • Y: DataCardKeyX.Y + DataCardKeyX.Height + 150 (trong đó: DataCardKeyX là thẻ dữ liệu chứa tùy chọn điều khiển ImageX)
    • Chiều rộng: Parent.Width - 60
    • Chiều cao: 400

    Lưu ý

    Bảng điều khiển hình ảnh sẽ thả xuống bên dưới cuối màn hình, nhưng một thanh cuộn sẽ tự động được thêm vào để cho phép xem hình ảnh.

  18. Thêm biểu tượng Camera vào thẻ dữ liệu, sau đó định vị biểu tượng này giữa nhãn Hình ảnh và tùy chọn điều khiển ImageX. Thay đổi tên của tùy chọn điều khiển thành CameraIcon.

    Lưu ý

    Đảm bảo rằng bạn chọn tùy chọn điều khiển Biểu tượng camera, không phải tùy chọn điều khiển Phương tiện camera.

    Thêm biểu tượng camera.

  19. Đặt thuộc tính hành động OnSelect của tùy chọn điều khiển CameraIcon thành sau đây.

    Set(AppointmentImage, SampleImage);

Navigate(TakePhoto, ScreenTransition.None);

    Khi người dùng chọn biểu tượng này, họ sẽ chuyển đến màn hình TakePhoto, nơi họ có thể chụp ảnh hoặc tải lên hình ảnh. Hình ảnh ban đầu hiển thị sẽ là hình ảnh mẫu mặc định.

Để kiểm tra ứng dụng, hãy làm như sau:

  1. Trên ngăn Dạng xem cây, hãy chọn màn hình Chính.

  2. Chọn F5 để xem trước ứng dụng.

  3. Trên màn hình Chính, hãy chọn Cuộc hẹn.

  4. Trong màn hình duyệt, hãy chọn bất kỳ cuộc hẹn nào.

  5. Trên màn hình chi tiết của cuộc hẹn, hãy chọn biểu tượng chỉnh sửa trong tiêu đề màn hình.

  6. Trên màn hình chỉnh sửa, hãy chọn biểu tượng Camera cho hình ảnh.

  7. Xác minh rằng màn hình Chụp ảnh xuất hiện.

  8. Chọn Đổi ảnh và tải lên ảnh bạn chọn (hoặc chụp ảnh, nếu bạn đang chạy ứng dụng trên thiết bị di động).

  9. Chọn Lưu. Xác minh rằng hình ảnh xuất hiện trên trang chi tiết, sau đó chọn biểu tượng dấu tích để lưu các thay đổi trở lại cơ sở dữ liệu.

  10. Đóng cửa sổ xem trước và quay lại Power Apps Studio.

Hiển thị hình ảnh của các bộ phận

Khi xác định rằng Blob Storage là một vị trí lý tưởng để lưu hình ảnh liên quan đến các cuộc hẹn, Preeti và Kiana quyết định rằng họ nên sử dụng cùng một phương pháp để lưu trữ hình ảnh của các bộ phận. Một ưu điểm chính của phương pháp này là không yêu cầu bất kỳ sửa đổi nào đối với ứng dụng. Ứng dụng tái sử dụng cùng một tài khoản lưu trữ và cùng một kết nối. Là một hoạt động di chuyển riêng biệt, họ có thể thực hiện những việc sau:

  1. Tạo một vùng chứa Blob Storage mới.

  2. Tải hình ảnh bộ phận lên vùng chứa này.

  3. Thay đổi tài liệu tham chiếu ImageUrl trong bảng Bộ phận trong cơ sở dữ liệu InventoryDB thành URL của mỗi hình ảnh.

Ứng dụng sẽ tự động chọn URL mới cho từng hình ảnh bộ phận và tùy chọn điều khiển Hình ảnh trên màn hình PartDetails sẽ hiển thị hình ảnh.

Theo dõi lịch sử cuộc hẹn cho khách hàng

Maria cho rằng có thể nhanh chóng xem tất cả lịch sử từ các lần ghé thăm của kỹ thuật viên trước đây của khách hàng có thể được thêm vào ứng dụng bằng cách tạo một thành phần tùy chỉnh. Làm việc với Caleb về những thông tin họ muốn xem, Maria phác thảo một thiết kế đơn giản bao gồm các ghi chú và ngày tháng của mỗi chuyến thăm.

Dữ liệu cho lịch sử cuộc hẹn của khách hàng.

Nhìn vào dữ liệu, Maria tin rằng điều khiển thư viện là cách tốt nhất để hiển thị dữ liệu bảng trên màn hình.

Maria tạo thành phần tùy chỉnh như sau:

  1. Sử dụng Power Apps Studio, trên ngăn Dạng xem cây, chọn Thành phần, và sau đó chọn + Thành phần mới.

    Tạo thành phần mới.

    Một thành phần trống mới có tên Component1 được tạo ra. Đổi tên thành phần thành DateHistoryComponent.

    Đổi tên thành phần.

  2. Trên menu Chèn, chọn Thư viện, và sau đó chọn mẫu thư viện Chiều cao linh hoạt trống.

    Thêm tùy chọn điều khiển Thư viện.

  3. Di chuyển tùy chọn điều khiển thư viện và thay đổi kích thước để lấp đầy thành phần tùy chỉnh.

  4. Chọn Thêm một mục từ ngăn chèn, sau đó chọn Nhãn văn bản.

    Thêm nhãn Văn bản vào thành phần.

  5. Trên ngăn Dạng xem cây, đổi tên tùy chọn điều khiển nhãn thành NotesLabel. Đặt thuộc tính Tràn thành Overflow.Scroll. Thiết đặt này cho phép tùy chọn điều khiển hiển thị một số dòng văn bản và cho phép người dùng cuộn qua. Đặt các thuộc tính sau để bạn có thể định vị và căn chỉnh kích thước bảng điều khiển:

    • LineHeight: 2
    • X: 28
    • Y: 18
    • Chiều rộng: 574
    • Chiều cao: 140

  6. Thêm nhãn văn bản thứ hai vào bảng điều khiển. Đổi tên bảng điều khiển này thành DateLabel và đặt các thuộc tính sau:

    • LineHeight: 2
    • X: 28
    • Y: 174
    • Chiều rộng: 574
    • Chiều cao: 70

  7. Để xem bảng điều khiển sẽ trông như thế nào khi được chèn vào ứng dụng và hiển thị với giao diện của nó, trên ngăn Dạng xem cây, hãy chọn DateHistoryComponent. Ở ngăn bên phải, trên tab Nâng cao, hãy chọn trường Điền và thay đổi màu thành RGBA(0, 0, 0, 1).

    Xem thành phần.

  8. Trên ngăn Chèn, hãy bung rông Hình dạng và thêm một bảng điều khiển Hình chữ nhật vào thành phần tùy chỉnh. Đặt các thuộc tính sau cho tùy chọn điều khiển này:

    • X: 0
    • Y: 273
    • Chiều rộng: Parent.Width
    • Chiều cao: 2

    Bảng điều khiển này hoạt động như một ngăn cách giữa các bản ghi được hiển thị trong thư viện.

    Thêm bảng điều khiển Hình chữ nhật.

Maria đã quen với việc thêm bảng điều khiển vào màn hình và xây dựng ứng dụng với Power Apps. Tuy nhiên, các thành phần có thể tái sử dụng không hoạt động theo cách hoàn toàn giống nhau. Kiana mô tả với Maria rằng để có thể sử dụng dữ liệu trong một thành phần tùy chỉnh, một số thuộc tính đầu vào tùy chỉnh bổ sung phải được thêm vào. Kiana cũng giải thích rằng Maria cần cung cấp dữ liệu mẫu cho các thuộc tính này để tham chiếu đến các trường dữ liệu trong các điều khiển trong thành phần, như sau:

  1. Trên ngăn Dạng xem cây, hãy chọn DateHistoryComponent. Trên ngăn bên phải, trên tab Thuộc tính, hãy chọn Thuộc tính tùy chỉnh mới.

    Thuộc tính tùy chỉnh mới.

  2. Trong hộp thoại Thuộc tính tùy chỉnh mới, hãy chỉ định các giá trị sau rồi chọn Tạo:

    • Tên hiển thị: Dữ liệu
    • Tên: Dữ liệu
    • M tả: Bảng cuộc hẹn cho một khách hàng, hiển thị các ghi chú và ngày tháng
    • Loại thuộc tính: Đầu vào
    • Loại dữ liệu: Bảng
    • Tăng OnReset khi giá trị thay đổi: Để trống

    Các thuộc tính của thuộc tính tùy chỉnh mới.

  3. Để thay đổi dữ liệu mẫu do bảng điều khiển hiển thị, hãy chọn thuộc tính tùy chỉnh của Dữ liệu mới. Trong trường công thức, hãy nhập Bảng({Ghi chú: "Văn bản trường ghi chú mẫu.", 'Appointment Date': Text(Today())}).

    Thay đổi dữ liệu mẫu.

  4. Trên ngăn Dạng xem cây, hãy chọn bảng điều khiển GalleryX trong DateHistoryComponent rồi đổi tên thành AppointmentHistory.

  5. Ở ngăn bên phải, trên tab Nâng cao, hãy đặt thuộc tính Mục của bảng điều khiển thư viện AppointmentHistory thành Parents.Data.

    Cập nhật thuộc tính Mục cho bảng điều khiển thư viện.

  6. Chọn tùy chọn điều khiển NotesLabel. Ở ngăn bên phải trên tab Nâng cao, hãy đổi thuộc tính Văn bản thành ThisItem.Notes, và đổi thuộc tính Kích thước thành 20.

    Lưu ý

    Thuộc tính Kích thước chỉ định kích thước phông chữ cho văn bản do bảng điều khiển hiển thị.

  7. Chọn bảng điều khiển DateLabel để thay đổi thuộc tính Văn bản thành ThisItem.'Appointment Date' và thay đổi thuộc tính Kích thước thành 20. Các trường trong thành phần tùy chỉnh sẽ hiển thị dữ liệu mẫu.

    Thành phần tùy chỉnh với dữ liệu mẫu.

Thành phần tùy chỉnh đã hoàn tất. Maria tạo một màn hình mới để hiển thị lịch sử cuộc hẹn cho khách hàng bằng cách sử dụng thành phần này, như sau:

  1. Trên ngăn Dạng xem cây, hãy chọn tab Màn hình.

  2. Bung rộng màn hình BrowseAppointments, bung rộng bảng điều khiển BrowseAppointmentsGallery rồi chọn bảng điều khiển Body1_1. Trên menu Chèn, chọn Biểu tượng và sau đó chọn biểu tượng Danh sách chi tiết.

    Thêm biểu tượng danh sách Chi tiết.

  3. Thay đổi tên của tùy chọn điều khiển biểu tượng thành ViewAppointments.

  4. Trên menu Dạng xem cây, hãy chọn bảng điều khiển BrowseAppointmentsGallery. Trên ngăn bên phải, trên tab Nâng cao, hãy thay đổi thuộc tính TemplateSize thành 220. Việc tăng thuộc tính này sẽ bung rộng không gian có sẵn trong thư viện.

  5. Di chuyển biểu tượng ViewAppointments vào khoảng trống bên dưới tên khách hàng.

    Thư viện cuộc hẹn đã sửa đổi.

  6. Chọn bảng điều khiển của biểu tượng ViewAppointments. Đặt thuộc tính hành động OnSelect cho công thức sau.

    ClearCollect(customerAppointmentsCollection, FieldEngineerAPI.getapicustomeridappointments(ThisItem.customerId));

Navigate(AppointmentsHistoryScreen, ScreenTransition.Fade)

    Công thức này điền vào một tập hợp có tên customerAppointmentsCollection với các cuộc hẹn cho khách hàng đã chọn, rồi chuyển đến AppointmentHistoryScreen để hiển thị những cuộc hẹn đó. Bạn sẽ tạo màn hình này theo các bước sau.

  7. Trên menu Chèn, chọn Màn hình mới và sau đó chọn mẫu Có thể cuộn được.

    Màn hình mới dựa trên Mẫu có thể cuộn được.

  8. Thay đổi tên của màn hình mới thành AppointmentHistoryScreen.

  9. Xóa bảng điều khiển CanvasX đã được thêm vào màn hình này.

    Xóa bảng điều khiển Canvas.

  10. Chọn bảng điều khiển LblAppNameX trên màn hình này. Trên ngăn bên phải, trên tab Nâng cao, hãy thay đổi thuộc tính Văn bản thành như sau.

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

  11. Đặt các thuộc tính sau cho bảng điều khiển LblAppNameX để điều chỉnh vị trí và kích thước:

    • X: 90
    • Y: 0
    • Chiều rộng: 550
    • Chiều cao: 140

  12. Chọn bảng điều khiển RectQuickActionBarX và đặt thuộc tính Chiều cao thành 140.

  13. Thêm một bảng điều khiển Biểu tượng bên trái vào tiêu đề màn hình, ở bên trái tiêu đề. Đặt thuộc tính hành động OnSelect cho bảng điều khiển này thành Navigate(BrowseAppointments, Transition.None).

    Màn hình AppointmentsHistory trống.

  14. Trên menu Chèn, chọn Tùy chỉnh và sau đó chọn DateHistoryComponent.

    Thêm thành phần DateHistory.

  15. Di chuyển và thay đổi kích thước thành phần để thành phần đó chiếm phần thân của màn hình, bên dưới tiêu đề.

    Đã thay đổi kích thước thành phần.

  16. Đặt các thuộc tính sau cho thành phần này:

    • Dữ liệu: customerAppointmentsCollection
    • Ngày hẹn: startDateTime
    • Ghi chú: ghi chú

  17. Lưu ứng dụng.

Để kiểm tra ứng dụng, hãy làm như sau:

  1. Trên ngăn Dạng xem cây, hãy chọn màn hình Chính.

  2. Chọn F5 để xem trước ứng dụng.

  3. Trên màn hình Chính, hãy chọn Cuộc hẹn.

  4. Trong màn hình duyệt, hãy chọn biểu tượng Danh sách chi tiết cho bất kỳ cuộc hẹn nào.

  5. Xác minh rằng màn hình Lịch sử cuộc hẹn cho khách hàng đã chọn xuất hiện.

  6. Đóng cửa sổ xem trước và quay lại Power Apps Studio.

Đặt hàng các bộ phận

Yêu cầu chính của hệ thống là cho phép kỹ thuật viên đặt hàng bất kỳ bộ phận nào được yêu cầu khi đến thăm khách hàng. Nếu các bộ phận còn hàng, có thể hẹn một chuyến thăm khác để hoàn thành việc sửa chữa vào ngày thuận tiện tiếp theo cho khách hàng. Nếu các bộ phận hiện đang hết hàng và phải được đặt hàng, kỹ thuật viên có thể cho khách hàng biết. Malik sau đó có thể sắp xếp một cuộc hẹn với khách hàng khi Maria nhận được thông báo rằng các bộ phận đã về đến kho.

Bộ phận đặt trước của ứng dụng dùng các bảng trong cơ sở dữ liệu InventoryDB hiển thị trong hình ảnh sau đây. Bảng Đơn hàng lưu trữ thông tin về các đơn đặt hàng cho các bộ phận. Bảng Đặt trước liệt kê những yêu cầu đặt trước mà các kỹ thuật viên và kỹ sư đã thực hiện cho các bộ phận. Bảng Kỹ sư cung cấp tên và số điện thoại liên hệ của kỹ sư đã đặt trước, điều này giúp Maria – người quản lý hàng tồn kho dễ dàng truy vấn nếu cần.

Mô hình dữ liệu đặt trước.

Để hỗ trợ tính năng này, Kiana phải cập nhật API Web bằng một phương pháp tìm nạp số lượng mục dành riêng cho một phần cụ thể, như sau:

  1. Mở dự án API Web FieldEngineerApi trong Visual Studio Code.

  2. Thêm một tệp có tên Order.cs vào thư mục Mô hình. Thêm mã sau vào tệp này. Lớp Đơn hàng sẽ theo dõi các chi tiết của đơn đặt hàng cho bộ phận.

    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. Thêm một tệp mới khác có tên Reservation.cs vào Mô hình và thêm mã sau vào tệp này. Lớp Đặt trước có chứa thông tin về số lượng mặt hàng cho một phần nhất định hiện đang được đặt trước cho khách hàng khác.

    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. Thêm một tệp nữa có tên InventoryEngineer.cs vào thư mục Mô hình với mã sau. Lớp InventoryEngineer ghi lại nội dung mà các kỹ sư đã đặt chỗ.

    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. Mở tệp InventoryContext.cs trong thư mục Mô hình và thêm các câu lệnh sau vào lớp 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. Ở cửa sổ Đầu cuối trong Visual Studio Code, hãy chạy các lệnh sau để xây dựng bộ điều khiển nhằm xử lý các đơn đặt hàng và đặt trước.

    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. Mở tệp BoilerPartController.cs trong thư mục Controllers và thêm phương thức GetTotalReservations sau vào lớp 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. Chỉnh sửa tệp OrdersController.cs và sửa đổi phương thức PostOrder trong lớp OrdersController như hiển thị sau đây.

    [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. Chỉnh sửa tệp ReservationsController.cs. Sửa đổi phương thức PostReservation trong lớp ReservationsController như sau.

    [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. Trong cửa sổ Đầu cuối, hãy chạy các lệnh sau để xây dựng và phát hành API Web đã sẵn sàng để triển khai.

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

  11. Trong Visual Studio Code, nhấp chuột phải vào thư mục phát hành, sau đó chọn Triển khai ứng dụng web.

Preeti hiện có thể cập nhật dịch vụ Quản lý API do ứng dụng VanArsdel dùng để phản ánh API Web đã cập nhật. Đây là một thay đổi không mang tính đột phá; các hoạt động hiện tại sẽ tiếp tục được thực hiện , sự khác biệt là các hoạt động và bộ điều khiển mới để đặt trước và đặt hàng. Preeti thực hiện các nhiệm vụ sau:

Lưu ý

Preeti có thể đã chọn xóa API Field Engineer hiện có và thay thế API này bằng một phiên bản mới, nhưng phương pháp đó có nguy cơ phá vỡ bất kỳ ứng dụng hiện có nào có thể đang sử dụng API. Cách tốt hơn là giữ nguyên API hiện có và thêm các nội dung sửa đổi dưới dạng bản sửa đổi.

  1. Trong cổng thông tin Azure, hãy chuyển đến dịch vụ Quản lý API.

  2. Trên trang Dịch vụ quản lý API, trên ngăn bên trái trong API, chọn API.

  3. Chọn API Field Engineer, chọn menu dấu chấm lửng rồi chọn Thêm bản sửa đổi.

    Thêm bản sửa đổi vào API Field Engineer.

  4. Trong hộp thoại Tạo bản sửa đổi mới của API Field Engineer, hãy nhập mô tả Đã thêm hoạt động GET và hoạt động POST cho các đơn đặt hàng và đặt trước một phần rồi chọn Tạo.

    Tạo bản sửa đổi.

  5. Trên trang BẢN SỬA ĐỔI 2, hãy chọn Thiết kế.

    Thiết kế bản sửa đổi.

  6. Trên trang Thiết kế, hãy chọn Thêm hoạt động. Trên ngăn FrontEnd, hãy đặt các thuộc tính sau rồi chọn Lưu. Thao tác này được sử dụng để truy xuất số lượng các mặt hàng đã đặt trước cho một bộ phận nồi hơi nhất định:

    • Tên hiển thị: api/BoilerParts/{id}/Reserved
    • Tên: api-boilerparts-id-reserved
    • URL: GET api/BoilerParts/{id}/Reserved

    Thêm thao tác API đặt trước.

  7. Trên tab Kiểm tra cho hoạt động mới, đặt tham số id thành số bộ phận hợp lệ (ví dụ trong hình ảnh sử dụng bộ phận 1), rồi chọn Gửi.

    Kiểm tra API Web.

  8. Xác minh rằng kiểm tra thành công. Thao tác sẽ hoàn tất với phản hồi HTTP 200 và phần nội dung hiển thị số lượng đặt trước cho sản phẩm.

    Phản hồi thử nghiệm.

  9. Trên trang Thiết kế, hãy chọn Thêm hoạt động. Trên ngăn FrontEnd, hãy đặt các thuộc tính sau (thao tác này xác định yêu cầu POST để tạo đơn hàng mới):

    • Tên hiển thị: api/Orders - POST
    • Tên: api-orders-post
    • URL: POST api/Orders

  10. Trên tab Truy vấn, hãy chọn + Thêm tham số, thêm các tham số sau, rồi chọn Lưu:

    • Tên: boilerPartId, Mô tả : ID bộ phận nồi hơi, Loại: dài
    • Tên: số lượng, Mô tả : Số lượng, Loại: số nguyên

    Thêm tham số vào hoạt động truy vấn Quản lý API.

  11. Chọn Thêm hoạt động một lần nữa trên ngăn FrontEnd, đặt các thuộc tính sau (thao tác này xác định yêu cầu POST để tạo đơn hàng mới):

    • Tên hiển thị: api/Reservations - POST
    • Tên: api-reservations-post
    • URL: POST api/Reservations

  12. Trên tab Truy vấn, thêm các tham số sau, rồi chọn Lưu:

    • Tên: boilerPartId, Mô tả: ID bộ phận nồi hơi, Loại: dài
    • Tên: engineerId, Mô tả: ID kỹ sư, Loại: chuỗi
    • Tên: quantityToReserve, Mô tả: Số lượng cần đặt trước, Loại: số nguyên

  13. Trên tab Bản sửa đổi, hãy chọn phiên bản mới. Trên menu dấu chấm lửng cho phiên bản này, hãy chọn Tạo hiện tại.

    Đặt phiên bản hiện tại cho bản sửa đổi.

  14. Trong hộp thoại Tạo bản sửa đổi hiện tại, hãy chọn Lưu.

  15. Mở một trang khác trong trình duyệt web của bạn và truy nhập vào URL https://<APIM name>.azure-api.net/api/boilerparts/1/reserved trong đó <APIM name> là tên của dịch vụ API của bạn. Xác minh rằng bạn nhận được phản hồi tương tự như sau.

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

API Web cập nhật hiện đã có sẵn. Về lý thuyết, Kiana có thể tạo một trình kết nối tùy chỉnh mới cho API Web cập nhật và thêm trình kết nối này vào ứng dụng. Sau đó, ứng dụng có thể triển khai logic của chính ứng dụng để xác định có bao nhiêu mặt hàng của sản phẩm được chỉ định hiện còn trong kho, bao nhiêu mặt hàng được đặt trước, so sánh kết quả với số lượng mặt hàng được yêu cầu, đặt hàng để có thêm hàng nếu cần hoặc đặt trước các mặt hàng từ hàng trữ hiện có. Tuy nhiên, loại logic này được triển khai tốt hơn trong ứng dụng logic Azure. Power Apps có thể gọi ứng dụng logic thông qua một trình kết nối tùy chỉnh khi kỹ thuật viên muốn đặt trước hoặc đặt hàng một bộ phận.

Để tạo ứng dụng logic, Kiana sử dụng các bước sau:

Lưu ý

Để đơn giản hóa mọi thứ, ứng dụng logic được tạo trong ví dụ này không phải là giao dịch. Giữa việc kiểm tra tính khả dụng của một bộ phận và đặt trước, một người dùng đồng thời có thể đặt trước mang tính xung đột. Bạn có thể triển khai ngữ nghĩa giao dịch bằng cách thay thế một số logic trong ứng dụng logic này bằng thủ tục lưu trữ trong cơ sở dữ liệu InventoryDB.

  1. Trong Cổng thông tin Azure, trên trang Chủ, hãy chọn + Tạo nguồn lực.

  2. Trong hộp Tìm kiếm marketplace, hãy nhập Logic App rồi chọn Nhập.

  3. Trên trang Logic App, chọn Tạo.

    Tạo logic app.

  4. Trên trang Tạo logic app, nhập các giá trị sau, sau đó chọn Xem lại + tạo:

    • Đăng ký: Chọn đăng ký Azure của bạn
    • Nhóm nguồn lực: webapi_rg
    • Tên Logic App: FieldEngineerPartsOr Order
    • Khu vực: Chọn cùng một vị trí bạn đã sử dụng cho API Web
    • Liên kết với môi trường dịch vụ tích hợp: Để trống
    • Bật phân tích nhật ký: Để trống

  5. Trên trang xác thực, hãy chọn Tạo và đợi trong khi logic app được triển khai.

  6. Khi quá trình triển khai hoàn tất, hãy chọn Chuyển đến nguồn lực.

  7. Trên trang Trình thiết kế ứng dụng logic, cuộn xuống phần Mẫu rồi chọn Ứng dụng logic trống.

    Chọn mẫu Logic App trống.

  8. Trên tab Tất cả , trong hộp văn bản Trình kết nối tìm kiếm và trình kích hoạt , hãy chọn Yêu cầu.

    Chọn trình kích hoạt Yêu cầu. 

  9. Trên tab Trình kích hoạt, hãy chọn Khi nhận được yêu cầu HTTP.

    Kích hoạt khi nhận được yêu cầu HTTP.

  10. Trong hộp Lược đồ JSON nội dung yêu cầu, hãy nhập lược đồ sau rồi chọn +Bước mới.

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

    Lược đồ yêu cầu của ứng dụng Logic.

    Lược đồ này xác định nội dung của yêu cầu HTTP mà logic app đang mong đợi. Nội dung yêu cầu bao gồm ID của một bộ phận nồi hơi, số lượng các hạng mục cần dự trữ và ID của kỹ sư đưa ra yêu cầu. Ứng dụng sẽ gửi yêu cầu này khi một kỹ sư muốn đặt trước một bộ phận.

  11. Trong hộp Chọn một hoạt động, hãy chọn Tất cả rồi chọn HTTP.

    Tùy chọn chọn hoạt động HTTP.

    Ứng dụng logic sẽ gọi hoạt động BoilerParts{id} của API Web để truy xuất thông tin về bộ phận nồi hơi được cung cấp do ứng dụng yêu cầu.

  12. Trên ngăn Hành động, hãy chọn hành động HTTP.

    Chọn tùy chọn hành động HTTP.

  13. Trong hộp hành động HTTP, trên menu dấu chấm lửng, hãy chọn Đổi tên và thay đổi tên của hành động thành CheckBoilerPart.

    Đổi tên hành động HTTP.

  14. Đặt các thuộc tính của hành động HTTP như sau, rồi chọn + Bước mới:

    • Phương thức: GET
    • URI: https://<APIM name>.azure-api.net/api/boilerparts/, trong đó <APIM name> là tên dịch vụ Quản lý API của bạn. Trong hộp Nội dung động cho URI này, trên tab Nội dung động, hãy chọn Id phần nồi hơi

    Chỉ định nội dung động cho hành động HTTP.

  15. Trong hộp Chọn một hoạt động, trong hộp Tìm kiếm trình kết nối và hành động, hãy nhập Parse JSON rồi chọn hoạt động Parse JSON.

    Chọn hành động Parse JSON.

  16. Sử dụng menu dấu chấm lửng cho hành động Parse JSON, đổi tên hành động thành ParseBoilerPart.

  17. Trong ô Nội dung cho hành động ParseBoilerPart, trong ô Nội dung động, hãy chọn Nội dung. Trong hộp Lược đồ, hãy nhập lược đồ JSON sau rồi chọn +Bước mới.

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

    Phân tích cú pháp đối tượng BoilerPart.

    Hành động này phân tích cú pháp thông báo phản hồi do yêu cầu getBoilerParts /{id} trả về. Phản hồi chứa thông tin chi tiết của bộ phận nồi hơi, bao gồm cả số lượng hiện có trong kho.

  18. Trong ô Chọn một hoạt động cho bước mới, hãy chọn trình kết nối HTTP.

  19. Trên tab Hành động, hãy chọn hành động HTTP.

  20. Sử dụng menu dấu chấm lửng cho thao tác, đổi tên thao tác thành CheckReservations.

  21. Đặt các thuộc tính sau cho thao tác này, rồi chọn + Bước mới:

    • Phương thức: GET
    • URI: https://<APIM name>.azure-api.net/api/boilerparts/. Như trước đó, trong ô Nội dung động cho URI này, trên tab Nội dung động, hãy chọn boilerPartId. Trong trường URI, nối văn bản /reserved sau chỗ dành sẵn cho boilerPartId

    Bước CheckReservations.

  22. Trong hộp Chọn một hoạt động cho hành động mới, trong hộp Tìm kiếm trình kết nối và hành động, hãy nhập Parse JSON rồi chọn hoạt động Parse JSON.

  23. Đổi tên hoạt động thành ParseReservations.

  24. Đặt thuộc tính Nội dung thành Phần nội dung.

  25. Nhập lược đồ sau, rồi chọn + Bước mới.

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

    Phân tích cú pháp dữ liệu Đặt trước.

  26. Trong hộp Chọn một hoạt động cho hành động mới, trong hộp Tìm kiếm trình kết nối và hành động, hãy nhập Điều kiện rồi chọn hoạt động Điều khiển điều kiện.

    Chọn bảng điều khiển Điều kiện.

  27. Đổi tên hoạt động thành CompareStock.

  28. Chọn ô Chọn giá trị. Trong ô Thêm nội dung động, trên tab Biểu thức, hãy nhập biểu thức sau, rồi chọn OK.

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

    Biểu thức này tính tổng số hạng mục của bộ phận nồi hơi được chỉ định hiện đang được đặt trước và số lượng mà kỹ sư yêu cầu.

    Điều kiện CompareStock.

  29. Trong hộp danh sách điều kiện thả xuống, hãy chọn lớn hơn.

  30. Trong hộp Chọn một giá trị còn lại, trong hộp Nội dung động, trên tab Nội dung động, trong phần ParseBoilerPart, hãy chọn numberInStock.

    So sánh tổng số lượng đặt trước với số lượng mặt hàng trong kho.

  31. Nếu số lượng mặt hàng được yêu cầu cộng với số lượng đặt trước lớn hơn số lượng trong kho, thì ứng dụng cần phải đặt hàng để bổ sung hàng tồn kho. Trong nhánh True của hành động CompareStock, hãy chọn Thêm một hành động.

  32. Trên tab Tất cả cho hoạt động mới, chọn HTTP rồi chọn hành động HTTP.

  33. Đổi tên hoạt động thành PostOrder.

  34. Đặt các thuộc tính sau cho hoạt động PostOrder:

    • Phương thức: POST
    • URI: https://<APIM name>.azure-api.net/api/orders
    • Trong bảng Truy vấn, trong hàng đầu tiên, hãy nhập khóa boilerPartId. Đối với giá trị trong hộp Thêm nội dung động, trên tab Nội dung động, chọn boilerPartId
    • Trong bảng Truy vấn, trong hàng đầu tiên, hãy nhập khóa boilerPartId. Trong trường giá trị, hãy nhập 50.

    Đăng yêu cầu đặt thêm các bộ phận khác.

    Ứng dụng logic sẽ tự động đặt 50 mặt hàng của bộ phận được chỉ định khi lượng hàng sắp hết.

    Lưu ý

    Ứng dụng logic giả định rằng kỹ sư sẽ không thực sự cố gắng đặt trước hơn 50 mặt hàng của một bộ phận được chỉ định trong một yêu cầu duy nhất!

  35. Để trống nhánh False của hành động CompareStock.

  36. Dưới hành động CompareStock, chọn + Bước mới.

  37. Trên tab Tất cả cho hoạt động mới, chọn HTTP rồi chọn hành động HTTP.

  38. Đổi tên hoạt động thành PostReservation.

  39. Đặt các thuộc tính sau cho hoạt động PostReservation:

    • Phương thức: POST
    • URI: https://<APIM name>.azure-api.net/api/reservations
    • Trong bảng Truy vấn, trong hàng đầu tiên, hãy nhập khóa boilerPartId. Đối với giá trị trong ô Thêm nội dung động, trên tab Nội dung động, hãy chọn boilerPartId.
    • Trong hàng thứ hai, hãy nhập khóa engineerId. Đối với giá trị trong ô Thêm nội dung động, trên tab Nội dung động, hãy chọn engineerId.
    • Trong hàng thứ ba, hãy nhập khóa quantityToReserve. Đối với giá trị trong ô Thêm nội dung động, trên tab Nội dung động, hãy chọn numberToReserve.

  40. Chọn Bước mới. Trong ô Chọn một hoạt động, tìm kiếm và chọn hoạt động Phản hồi.

  41. Đặt các thuộc tính sau cho hành động Phản hồi:

    • Mã trạng thái: 200
    • Tiêu đề: Khóa - content-type, Giá trị - application/json
    • Nội dung: Trong ô Nội dung động, hãy chọn phần tử Nội dung từ yêu cầu PostReservation. Đây là nội dung được trả về khi thực hiện đặt trước.

    Thông báo phản hồi do ứng dụng logic gửi.

  42. Ở phía trên bên trái của trang Logic Apps Designer, hãy chọn Lưu. Xác minh rằng ứng dụng logic có thể được lưu mà không có bất kỳ lỗi nào.

Để tạo trình kết nối tùy chỉnh mà Power Apps có thể sử dụng để kích hoạt ứng dụng logic, Kiana thực hiện các bước sau khi vẫn ở trong cổng thông tin Azure:

  1. Trên trang Tổng quan cho ứng dụng logic, chọn Xuất.

    Xuất ứng dụng logic.

  2. Trong ngăn Xuất sang Power Apps, hãy đổi tên trình kết nối PartsOrderingConnector, chọn môi trường Power Apps của bạn rồi chọn OK.

    Xuất ứng dụng logic sang Power Apps.

  3. Đăng nhập vào Power Apps.

  4. Trong môi trường của bạn, trong Dữ liệu, chọn Trình kết nối tùy chỉnh và xác minh rằng PartsOrderingConnector được liệt kê.

    Các trình kết nối tùy chỉnh của Power Apps.

Maria hiện có thể sửa đổi ứng dụng VanArsdel để cho phép kỹ thuật viên đặt hàng các bộ phận trong khi tham gia trang web của khách hàng. Maria thêm nút Đặt hàng vào màn hình PartDetails như sau:

  1. Đăng nhập vào Power Apps (nếu chưa đăng nhập).

  2. Trong phần Ứng dụng, chọn ứng dụng VanArsdelApp. Trên menu dấu chấm lửng cho ứng dụng, hãy chọn Chỉnh sửa.

  3. Trên ngăn Dữ liệu, hãy chọn Thêm dữ liệu, tìm kiếm trình kết nối PartsOrderingConnector và thêm một kết nối mới bằng cách sử dụng trình kết nối đó.

    Thêm trình kết nối PartsOrdering vào ứng dụng.

  4. Trên ngăn Dạng xem cây, hãy bung rộng màn hình PartDetails rồi bung rộng biểu mẫu DetailForm1.

  5. Trên ngăn Thuộc tính ở bên phải, hãy chọn Chỉnh sửa trường. Trên ngăn Trường, trên menu dấu chấm lửng, hãy chọn Thêm thẻ tùy chỉnh.

    Thêm bảng điều khiển thẻ dữ liệu tùy chỉnh vào ứng dụng.

  6. Trên ngăn Dạng xem cây, đổi tên thẻ mới từ DataCard1 sang ReserveCard. Trong cửa sổ Dạng xem thiết kế, hãy thay đổi kích thước thẻ để thẻ chiếm phần dưới của màn hình, bên dưới bảng điều khiển Image_DataCard1.

    Đổi tên và thay đổi kích thước bảng điều khiển thẻ dữ liệu.

  7. Trên menu Chèn, từ menu con Đầu vào, hãy thêm bảng điều khiển Nội dung nhập văn bản, bảng điều khiển Nút và bảng điều khiển Nhãn vào bảng điều khiển ReserveCard.

  8. Thay đổi kích thước và định vị các bảng điều khiển sao cho chúng liền nhau, với bảng điều khiển Nút bên phải của bảng điều khiển Nội dung nhập văn bản và Nhãn bên dưới bảng điều khiển Nút.

  9. Trên ngăn Thuộc tính cho bảng điều khiển Nội dung nhập văn bản, hãy xóa sạch thuộc tính Mặc định.

  10. Trên ngăn Thuộc tính cho bảng điều khiển Nút, hãy đặt thuộc tính Văn bản thành Đặt trước.

    Bố cục của màn hình ParttDetails.

  11. Đổi tên bảng điều khiển Nội dung nhập văn bản thành NumberToReserve, đổi tên bảng điều khiển Nút thành Đặt trước và đổi tên bảng điều khiển Nhãn thành Thông báo.

  12. Trên ngăn Thuộc tính cho bảng điều khiển Thông báo, hãy đặt thuộc tính Văn bản thành Đã đặt trước các bộ phận và đặt thuộc tính Hiển thị thành MessageIsVisible.

    Lưu ý

    MessageIsVible là một biến mà bạn sẽ khởi tạo thành false khi màn hình được hiển thị, nhưng biến này sẽ được thay đổi thành true nếu người dùng chọn nút Đặt trước.

  13. Đặt thuộc tính OnSelect cho bảng điều khiển nút Đặt trước thành công thức sau.

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

Set(MessageIsVisible, true);

    Lưu ý

    Công thức này sử dụng ID kỹ sư được mã hóa cứng để đại diện cho kỹ thuật viên hiện đang chạy ứng dụng. Chương 8 mô tả cách truy xuất ID cho người dùng đã đăng nhập.

    Ngoài ra, ứng dụng không thực hiện kiểm tra lỗi; ứng dụng giả định rằng yêu cầu đặt trước các bộ phận luôn thành công. Để biết thêm thông tin về xử lý lỗi, hãy truy nhập vào Hàm lỗi trong Power Apps.

  14. Đặt thuộc tính OnVisible cho màn hình PartDetails thành Set(MessageIsVisible, false).

Để kiểm tra ứng dụng, hãy làm như sau:

  1. Trên ngăn Dạng xem cây, hãy chọn màn hình Chính.

  2. Chọn F5 để xem trước ứng dụng.

  3. Trên màn hình Chính, hãy chọn Bộ phận.

  4. Trong màn hình duyệt, hãy chọn bất kỳ bộ phận nào.

  5. Trên màn hình Chi tiết bộ phận, hãy cuộn xuống phần đặt trước, nhập giá trị số nguyên dương rồi chọn Đặt trước. Xác minh rằng thông báo Đã đặt trước các bộ phận xuất hiện.

    Màn hình PartDetails với hàm Đặt trước được bật.

  6. Đóng cửa sổ xem trước và quay lại Power Apps Studio.

  7. Trong cổng thông tin Azure, hãy truy nhập vào trang Cơ sở dữ liệu SQL InventoryDB.

  8. Chọn Trình soạn thảo truy vấn và đăng nhập với tư cách sqladmin bằng mật khẩu của bạn.

  9. Trong ngăn Truy vấn 1, hãy nhập truy vấn sau, sau đó chọn Chạy. Xác minh rằng nội dung đặt trước bạn đã thực hiện trong ứng dụng VanArsdel xuất hiện.

    SELECT * FROM [dbo].[Reservations]

    Kết quả truy vấn trong Cơ sở dữ liệu SQL.

Trước Tiếp