Hướng dẫn: Tạo và triển khai ứng dụng một trang bằng GitHub Spark và Codespaces

Hỗ trợ ứng dụng một trang mới mang lại cho các nhà phát triển sự linh hoạt hơn: bạn có thể tạo, tùy chỉnh và quản lý các trang web Power Pages hoàn toàn bằng mã nguồn. Với bản phát hành gần đây của GitHub Spark, các nhà phát triển giờ đây có thể tạo một trang web, chỉnh sửa trang web trực tiếp trong Không gian mã GitHub và triển khai trang web đó vào môi trường Power Pages mà không cần rời khỏi trình duyệt của họ. Hướng dẫn này hướng dẫn bạn qua quy trình làm việc hoàn chỉnh.

GitHub Spark là một nền tảng ngôn ngữ tự nhiên mới được hỗ trợ bởi AI từ GitHub Copilot. Nó được thiết kế để giúp các nhà phát triển khởi động các ứng dụng web hiện đại một cách nhanh chóng. Khi kết hợp với GitHub Codespaces để chỉnh sửa mã, Spark cung cấp:

  • Kho lưu trữ mẫu sẵn sàng sử dụng cho dự án của bạn.
  • Vùng chứa nhà phát triển được cấu hình sẵn cho môi trường nhất quán.
  • Nền tảng ngôn ngữ tự nhiên, được hỗ trợ bởi AI từ GitHub Copilot.

Đối với nhà phát triển Power Pages, điều này có nghĩa là bạn có thể bắt đầu với mẫu trang web tạo sẵn, tùy chỉnh và triển khai mà không cần thiết lập cục bộ truyền thống.

Đến cuối bài viết này, bạn sẽ biết cách:

  1. Tạo trang web Power Pages nguyên mẫu bằng GitHub Spark.
  2. Định cấu hình Codespace của bạn để hỗ trợ .NET và PAC CLI.
  3. Xây dựng và tải ứng dụng một trang của bạn lên môi trường Power Pages.
  4. Kích hoạt lại và kiểm tra trang web của bạn trực tiếp từ Power Pages.

Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo rằng bạn có:

  • Một môi trường Power Pages có quyền quản trị.
  • Power Platform CLI (PAC CLI) phiên bản 1.44.x trở lên đã được cài đặt và xác thực.
  • Trang web ở phiên bản 9.7.4.x trở lên. Power Pages
  • Giấy phép GitHub Spark với Codespaces cho dự án giao diện người dùng tùy chỉnh của bạn.

Lưu ý

  • Để sử dụng GitHub Spark, hãy đảm bảo bạn có giấy phép GitHub thích hợp.
  • Hỗ trợ cho GitHub Spark hoặc Codespaces có sẵn thông qua nhóm hỗ trợ Spark.

Bước 1: Bắt đầu với mẫu GitHub Spark

  1. Truy cập công cụ GitHub Spark và tạo một trang web mới bằng ngôn ngữ tự nhiên.
  2. Sau khi tạo, hãy nhấp vào Mở trong Codespaces.

Điều này cung cấp cho bạn một môi trường phát triển dựa trên đám mây, nơi bạn có thể làm việc trên dự án Power Pages của mình mà không cần bất kỳ thiết lập cục bộ nào.

Bước 2: Cập nhật cấu hình container phát triển

Bên trong kho lưu trữ, hãy tìm tệp:

.devcontainer/devcontainer.json

Sửa đổi phần tính năng để thêm hỗ trợ cho .NET 9.0. Cấu hình của bạn sẽ có dạng như sau:

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

Xây dựng lại vùng chứa

Sau khi lưu các thay đổi của bạn:

  1. Nhấn Ctrl + Shift + P (hoặc Command + Shift + P trên máy Mac) để mở bảng lệnh.
  2. Nhập Codespaces: Rebuild Container và chọn nó.
  3. Vùng chứa sẽ khởi động lại. Trong quá trình này, .NET 9 và tất cả các phụ thuộc khác sẽ được cài đặt.
  4. Chờ vài giây để quá trình cài đặt hoàn tất trước khi tiếp tục.

Bước này đảm bảo môi trường Codespace của bạn được làm mới với cấu hình mới. Điều này đảm bảo Codespace của bạn bao gồm thời gian chạy cần thiết cho công cụ xây dựng Power Pages.

Bước 3: Cài đặt các công cụ Power Platform

Từ thiết bị đầu cuối Codespaces của bạn:

  1. Cài đặt các công cụ Power Platform (có sẵn dưới dạng tiện ích mở rộng VS Code).
  2. Cài đặt này cũng mang đến PAC CLI, một giao diện dòng lệnh cho phép bạn xác thực, tải xuống và tải lên các trang web.

Bước 4: Kết nối với môi trường Power Platform của bạn

Sử dụng PAC CLI để xác thực với môi trường mục tiêu của bạn:

pac auth create -u https://org12x34x45.crm.dynamics.com

Thay thế URL bằng URL môi trường Power Platform thực tế của bạn.

Bước 5: Xây dựng trang web của bạn

Trước khi triển khai, hãy xây dựng mã trang web của bạn:

npm run build

Lệnh này biên dịch trang web của bạn và xuất các cấu phần phần mềm vào một dist thư mục.

Bước 6: Tải trang web của bạn lên

Triển khai trang web của bạn vào môi trường Power Pages bằng cách:

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

Tham số

Tham số Biệt danh Sự miêu tả
--rootPath -rp Thư mục cục bộ chứa các tệp nguồn của trang web của bạn
--compiledPath -cp Đường dẫn đến các tài sản đã biên dịch, như React build
--siteName -sn Tên hiển thị cho trang web của bạn Power Pages

Bước 7: Kích hoạt lại và kiểm tra

  1. Sau khi tải lên, trang web của bạn sẽ xuất hiện trong Trang web không hoạt động trong Power Pages.
  2. Đi tới Trang web không hoạt động, tìm trang web của bạn và chọn Kích hoạt lại.
  3. Khi trang web hoạt động, hãy mở URL của trang web đó để xác nhận việc triển khai.

Bước tiếp theo: Bảo mật và mở rộng trang web của bạn

Bây giờ trang web của bạn đã được triển khai:

  • Last updated on