開始使用適用於 GitHub Copilot CLI 和 Claude Code 的 Power Pages 外掛（預覽版）

GitHub Copilot CLI 及 Claude Code 的 Power Pages 插件提供 AI 輔助的工作流程，用於在 Power Pages 上建立、部署及管理現代 單頁應用程式（SPA） 網站。 與其手動搭建專案架構、撰寫模板 API 程式碼或設定權限，不如用自然語言描述你想要的，外掛就會自動處理實作。

該外掛透過對話技巧支援完整的網站開發生命週期，從搭建新網站架構到部署、設定 Dataverse 資料模型，以及設定認證。

Important

  • 這項功能處於預覽狀態。
  • 預覽功能不供生產時使用，而且可能功能受限。 這些功能是在正式發行前先行推出，讓客戶能夠搶先體驗並提供意見反應。
  • 在核准前審查代理人提案

先決條件

在開始之前，請確認你擁有所需的軟體和權限。

軟體需求

組件 最低版本 詳細資訊
Node.js 18.0 或更新版本 下載 Node.js
Power Platform CLI （PAC CLI） 2.6.3 或更新版本（伺服器邏輯必備） 安裝 PAC CLI
Azure CLI Latest 安裝 Azure CLI
GitHub Copilot CLI 或 Claude Code Latest GitHub Copilot CLI 或 Claude Code
Visual Studio Code 與 Power Platform Tools 擴充功能（可選） Latest 下載 VS Code 並 安裝 Power Platform 工具

您也會需要：

  • 一個啟用 Power Pages 的 Power Platform 環境。
  • 一個 經過認證的 PAC CLI 會話 連接到你的目標環境。 如果你還沒連線，執行 pac auth create。
  • Azure CLI 工作階段已登入同一個租用戶。 執行 az login 來驗證。

驗證身份：

用指令 pac auth list 確認你已經認證。

pac auth list           # Should show authenticated profile

如果你沒有認證，請執行這個指令：

pac auth create --environment <Instance url>        # Authenticate to Power Platform

Tip

要取得實例網址，請前往Power Pages首頁，選擇右上角的 Settings 圖示，然後選擇 Session details。

安裝外掛

從市集安裝 Power Pages 外掛。 如果你使用 GitHub Copilot CLI，請參閱 Copilot CLI 擴充功能文件 中的相同安裝步驟。 以下指令使用 Claude Code 語法。

執行安裝程式，設定所有啟用自動更新的插件：

Windows （PowerShell）：

iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

macOS/Linux/Windows （cmd）：

curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

安裝程式會自動執行：

  • 若尚未安裝 pac CLI，則會進行安裝。
  • 偵測可用工具，如 Claude Code 與 GitHub Copilot CLI。
  • 註冊插件市集並安裝所有列出的插件。
  • 啟用自動更新，讓外掛保持最新。

安裝後，重新啟動 Claude Code 或 GitHub Copilot CLI，即可在代理會話中以斜線指令存取外掛的技能。

從市集安裝

  1. 在你的終端機裡開啟 Claude Code。

  2. 新增 Microsoft 市集：

    /plugin marketplace add microsoft/power-platform-skills

  3. 安裝 Power Pages 外掛：

    /plugin install power-pages@power-platform-skills

安裝外掛後，請重新啟動 Claude Code 或 GitHub Copilot CLI，以便在代理會話中以斜線指令的方式存取外掛功能。

Tip

要自動接收市場和技能的更新，請開啟自動更新。 使用 /plugin 指令，前往 市集，選擇市集，並開啟自動更新。

技能概觀

該外掛提供涵蓋 Power Pages 網站完整生命週期的技能。 在對話中召喚每個技能，無論是用斬擊指令，還是描述你想做的事。

技能 命令 其功能是什麼
建立網站 /create-site 搭建網站架構，套用你的設計方向，並建立頁面和元件
部署地點 /deploy-site 透過 PAC CLI 建置專案並上傳到 Power Pages
啟動網站 /activate-site 配置網站記錄並指派公開網址
建立資料模型 /setup-datamodel 建立 Dataverse 表格、欄位及關係
新增範例資料（可選） /add-sample-data 將真實的測試記錄填充 Dataverse 資料表
整合 Web API /integrate-webapi 產生有型別的 API 用戶端程式碼、服務及資料表權限
設定認證 /setup-auth 新增登入與登出功能及角色為基礎的存取控制功能
建立網頁角色 /create-webroles 產生網頁角色 YAML 檔案以管理使用者存取
新增伺服器邏輯 /add-server-logic 產生安全的伺服器端 JavaScript 端點，用於驗證、外部 API 呼叫、秘密管理及資料操作
新增雲流 /add-cloud-flow 將現有的 Power Automate 雲端流程整合到您的網站，用於審核工作流程、通知及排程自動化
整合後端 /integrate-backend 分析你的原型，判斷每個功能所需的正確方法（Web API、伺服器邏輯或雲端流程），並協調完整的建置序列
新增 SEO /add-seo 產生 robots.txt、sitemap.xml和元標籤

典型工作流程

常見的端到端工作流程如下：

  1. /create-site：架設、設計和建置頁面
  2. /deploy-site ：上傳到你的Power Pages環境
  3. /activate-site ：設置公開網址
  4. /setup-datamodel ：建立 Dataverse 表格
  5. /add-sample-data ：以範例數據填入資料表
  6. /integrate-webapi ：產生 API 客戶端程式碼並設定權限
  7. /create-webroles ： 定義訪問角色
  8. /setup-auth ：新增登入、登出及基於角色的使用者介面
  9. /add-server-logic ：新增安全的伺服器端端點
  10. /新增雲端流程：整合現有的 Power Automate 流程
  11. /add-seo ：搜尋引擎優化
  12. /deploy-site：即時推送最終變更

Tip

  • 你不需要完全照這個順序走。 每個技能都會檢查自己的前置條件，並告訴你是否缺少某些東西。 例如，如果你的網站需要先驗證，你可以先執行/setup-auth再執行/integrate-webapi。
  • 如果你不確定每個功能該用哪種方法，可以執行 /integrate-backend 而不是分別執行第 4 到 10 步。 它會分析你的原型，判斷每個功能是否需要 Web API、伺服器邏輯或雲端流程，並依正確順序協調各項技能。

建立你的 Power Pages 網站

本導覽涵蓋使用外掛建置 Power Pages 網站的完整生命週期，從支架架構到部署。 每個步驟都描述你說了什麼，以及外掛的回應。

步驟 1：建立你的網站

用自然語言描述你想要的網站：用途、需要哪些頁面，以及任何設計偏好，例如配色、版面風格或字體。 執行 /create-site 或描述你的網站，外掛就能辨識你的意圖。

如果你沒指定框架，外掛會要求你選擇一個（React、Vue、Angular 或 Astro），然後：

  1. 從範本架構專案，套用你的網站名稱、顏色和設計標記。
  2. 安裝相依性、啟動開發伺服器，並開啟即時預覽。
  3. 它會用相關的圖片來建構你要求的每一頁、元件和路線。
  4. 在重要里程碑處建立 git 提交，讓您有內建的復原歷程記錄。

步驟二：部署您的網站

執行 /deploy-site 將你的網站上傳至 Power Pages。 插件：

  1. 確認 PAC CLI 已安裝且你的認證會話仍在啟動。
  2. 在繼續前，先與你確認目標環境。
  3. 執行生產環境建置並上傳編譯輸出。
  4. 若不存在部署工件目錄，則會建立一個。

Note

如果你的環境阻擋了某些檔案附件，外掛會偵測問題並提供解決指令。

步驟三：啟用您的網站

執行 /activate-site 使網站對外開放。 插件：

  1. 根據你的網站名稱建議子網域，並讓你自訂。
  2. 透過 Power Platform API 提供網站紀錄。
  3. 輪詢直到網站上線，並傳回公用 URL。

此時，你有一個可用的公開網址網站。 剩下的步驟則會加入資料、驗證和 SEO。 跳過任何不適用於你網站的步驟。

步驟四：建立你的資料模型

執行 /setup-datamodel 以建立你網站所需的 Dataverse 表格。 如果你已經有 ER 圖或特定架構，直接提供，不要讓客服分析你的程式碼。

該外掛會產生一個 資料模型架構代理程式，該代理會：

  1. 分析您網站的程式碼，判斷頁面和元件需要哪些資料。
  2. 查詢 Dataverse 環境中現有的資料表以避免重複。
  3. 提出一個包含資料表、欄位、資料型態與關係的資料模型，並以ER圖示方式視覺化。

你審查並批准提案。 插件在你確認之前不會產生任何東西。 核准後，外掛會透過 API 呼叫建立資料表和欄位，並儲存一個清單檔案，步驟 5 和 6 會使用。

步驟五：新增範例資料（可選）

執行 /add-sample-data 任務，將測試記錄填滿你的資料表。 此步驟需使用第四步的資料模型。

該外掛執行以下動作：

  1. 閱讀清單以了解你的表格、欄位和關係。
  2. 為每種欄位類型產生符合情境的值，例如真實的電子郵件、合理的日期及格式化的貨幣金額。
  3. 依相依順序插入紀錄（父資料表置於子資料表之前），並在批量插入時自動刷新認證權杖。

步驟 6：與 Dataverse Web API 整合

執行 /integrate-webapi 以即時 Dataverse 查詢取代模擬資料。 此步驟需使用第四步的資料模型。

該外掛執行以下動作：

  1. 掃描程式碼基底，找出使用模擬資料、預留位置擷取呼叫或硬式編碼陣列的元件。 它會將這些元件對應到你的 Dataverse 資料表。
  2. 為每個資料表生成 Web API 整合 代理程式，該代理程式會產生以下內容：
    • 一個共享的 API 客戶端，具備防偽造令牌管理與重試邏輯。
    • TypeScript 實體類型與領域映射器。
    • CRUD 服務層。
    • 框架專用的模式，例如 React 鉤子、Vue 組合檔或 Angular 服務。
  3. 會產生一個 權限架構 代理程式，提出表格權限與站點設定。

你審查並批准權限提案。 外掛在你確認之前不會建立任何設定檔。

步驟七：建立網頁角色

執行 /create-webroles 以定義使用者存取角色。 插件：

  1. 查詢您的環境中現有的 web 角色以避免重複。
  2. 產生具有唯一識別碼的角色定義。
  3. 強制每個站點最多擁有一個匿名角色和一個認證角色。

步驟八：設定認證

執行 /setup-auth 以新增登入與登出功能。 插件：

  1. 為 Microsoft Entra ID 流程產生認證服務，並具備防偽造令牌管理功能。
  2. 建立一個與網站版面整合的登入/登出介面元件。
  3. 新增基於角色的存取控制工具，可根據使用者的網頁角色顯示或隱藏 UI 元素。
  4. 全程使用你的框架模式（React Hook、Vue 組合式函數或 Angular 服務）。

步驟 9：新增伺服器邏輯

執行 /add-server-logic 以在您的網站新增安全的伺服器端點。 當你的網站需要無法在瀏覽器執行的邏輯時，例如外部 API 呼叫、伺服器端驗證、秘密管理或跨實體資料操作，請使用 Server Logic 。

Important

伺服器邏輯支援需要 PAC CLI 版本 2.6.3 或更新版本。 使用 快速安裝腳本 更新到最新版本。

請用淺顯的語言描述你需要什麼，以及外掛：

  1. 會產生一個 Server Logic Architect 代理程式，分析你的使用案例並分類其複雜度。
  2. 提出端點設計、安全設定及任何必要的資料表權限供您審查。
  3. 核准後，會在 /_api/serverlogics/<name> 生成伺服器端的 JavaScript 端點。
  4. 建立具類型的用戶端服務以從您的元件叫用端點。
  5. 更新您裝置的元件，使其能呼叫新的服務。
  6. 設定端點的網頁角色指派與資料表權限。

你審查並批准提案。 在你確認之前，不會產生任何程式碼。

常見用例：

  • 連接外部服務。 呼叫 REST API、Azure Functions 或第三方服務，且不暴露憑證。 （教學：與外部服務互動）
  • 執行安全的資料操作。 查詢、更新或刪除 Dataverse 紀錄，並具備一致的伺服器端驗證。 （教學：與 Dataverse 表格互動）
  • 執行自訂邏輯。 在資料表間彙整資料、執行業務規則，或在將結果回傳給用戶端前計算衍生值。
  • 伺服器端管理秘密資訊。 憑證和 API 金鑰儲存在伺服器端，絕不存在客戶端程式碼。 （教學：與Microsoft Graph及SharePoint互動）

Note

每個使用案例執行 /add-server-logic 一次。 舉例來說，如果你的網站同時需要一個庫存驗證端點和一個全域搜尋端點，請執行該技能兩次。

步驟 10：整合雲端流程

執行 /add-cloud-flow，將現有的Power Automate雲端流程整合到你的網站。 這項技能能將您的 Power Pages 網站與您已在 Power Automate 中建立的流程連結起來。 它不會創建新的雲端工作流程。

插件：

  1. 將現有的雲端流程註冊於您的網站。
  2. 產生用戶端程式碼以從您的頁面觸發流程。
  3. 處理非同步工作流程狀態與回調模式。
  4. 連結頁面與流程之間的資料交換。

使用 /add-cloud-flow 來處理比伺服器端端點更適合由Power Automate執行的核准工作流程、電子郵件通知、排程工作和事件驅動自動化。

替代方案：使用 /integrate-backend 來規劃完整服務層

如果你不確定哪些功能需要 Web API、伺服器邏輯或雲端流程，建議執行 /integrate-backend 步驟 4 到 10 步驟，而不是手動執行。 此技能作為一種調度者，能夠：

  1. 分析你的原型，找出所有需要服務層的功能。
  2. 將每個功能分類為正確的方法：標準 CRUD 的 Web API、伺服器端驗證與外部 API 的 Server Logic，或審核工作流程與自動化的雲端流程。
  3. 提出包含所有技能、相依性與配置的序列執行計畫。
  4. 系統在您核准後，依正確順序編排技能。

計畫是持久的、可恢復且可編輯的。 每一步結束後，先停下來檢視產生的程式碼或測試網站，然後再跑 /integrate-backend 一遍，從中斷的地方繼續。

步驟 11：加入 SEO

執行 /add-seo 以優化您的網站，使其對搜尋引擎更友好。 插件：

  1. 從你的架構路由器設定中發現路由。
  2. 為所有發現路線產生搜尋引擎指令及網站地圖。
  3. 新增中繼標籤：檢視區、字元集、描述、Open Graph、Twitter Card 和最愛圖示參考。

步驟 12：部署最終站點

如果你執行了任何可選步驟，請再次執行 /deploy-site 以即時推送變更。 該外掛會執行生產環境建置，並將網站及所有部署產物（資料表權限、網站設定、網頁角色、伺服器邏輯檔案）上傳到你的 Power Pages 環境。

請驗證你的網站

完成技能後，請確認你的 Power Pages 網站是否正常運作。

  1. 請前往Power Pages。
  2. 請在 活躍網站 列表中找到您的網站。
  3. 使用 預覽 選項在桌面版預覽您的網站。
  4. 測試功能。

訣竅和最佳做法

以下建議能幫助你在建立 Power Pages 網站時，充分發揮外掛和 AI 編碼代理的效能。

第一次運行時，請注意終端機輸出是否有缺少的工具

外掛提供技能和工作流程，但 AI 程式代理程式——GitHub Copilot CLI 或 Claude Code——會實際執行你的電腦指令。 當你第一次使用這些工具時，請仔細觀察終端輸出。 AI 程式代理在幕後執行指令和腳本，其中一些指令依賴可能未安裝在你電腦上的工具。 如果步驟失敗，終端機輸出通常會顯示找不到哪個工具或指令。

如果你看到像 command not found 或 這樣的 is not recognized錯誤，安裝缺少的工具並重新啟動工作流程。 AI 編碼代理在此工具可用後，會從中斷的地方繼續。

在核准前審查代理人提案

資料模型架構師與網頁 API 權限架構師代理會先提出提案，然後再進行變更。 請花時間仔細審閱這些提案。

  • 資料模型提案：檢查資料表名稱、欄位類型與關聯是否符合您的業務需求。 調整提案比在資料已插入後重新命名欄位要容易得多。
  • 權限提案：確認每個角色對每個資料表都有正確的存取權限（建立、讀取、更新、刪除）。 過於寬鬆的資料表權限是常見的安全風險。

直接貼上錯誤並附上上下文

當發生失敗時，無論是建置錯誤、部署失敗，或瀏覽器執行時例外，都要複製完整的錯誤輸出。 貼上去，並附上你當時的簡單說明。 你提供越多的背景，修正速度就越快。

範例：建置錯誤

I ran npm run build and got this error. Fix it.

error TS2339: Property 'jobTitle' does not exist on type 'JobPosting'.

  src/components/JobCard.tsx:24:31
    24   <Text>{posting.jobTitle}</Text>

Tip

請包含檔案名稱、你執行的指令，以及你預期會發生什麼。 外掛會利用這個上下文來定位問題並針對性地修正，而不是靠猜測。

分享 Web API 錯誤與完整請求 URL

部署後常見的問題是，當欄位未啟用 API 存取時，Power Pages Web API 會發出 403 錯誤。 遇到錯誤時，貼上 完整的 API URL 和 完整的 JSON 錯誤回應。 錯誤訊息會告訴你需要修正哪個表格和欄位，外掛也能幫你更新資料表權限的 YAML 和網站設定。

範例：Web API 未啟用資料行 (403)

I'm getting a 403 error when the documents page loads. Here's the API call and the response. Fix the issue so this API works.

URL:
https://my-site.powerappsportals.com/_api/crd50_documents?$select=crd50_documentid,crd50_name,crd50_documentcategory,crd50_filetype,crd50_filesize,crd50_updateddate,crd50_description,_crd50_propertyid_value

Response:
{
  "error": {
    "code": "90040101",
    "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
    "innererror": {
      "code": "90040101",
      "message": "Attribute _crd50_propertyid_value in table crd50_document is not enabled for Web Api.",
      "type": "AttributePermissionIsMissing"
    }
  }
}

這個錯誤AttributePermissionIsMissing（）表示查詢欄位 _crd50_propertyid_value 存在於 Dataverse 資料表中，但未列在 Web API 的資料表權限設定中。 外掛會透過將缺失欄位加入資料表權限 YAML .powerpages-site/table-permissions/ 並重新部署來解決此錯誤。

Note

Power Pages Web API 要求 API 呼叫回傳的每一欄都必須在資料表權限中明確列出。 查找屬性（前綴_與後綴_value）容易被忽略，因為它們的 API 名稱與 Dataverse 中列的邏輯名稱不同。 當你看到 AttributePermissionIsMissing時，務必將該欄位加入資料表權限。 不要更改 API 查詢。

要具體說明你想要什麼

模糊的請求只會產生模糊的結果。 告訴外掛你需要什麼，包括版面偏好、資料欄位和行為。

取代 試用
建立職位頁面 建立一個職缺頁面，頂部設有搜尋欄，並使用篩選標籤來篩選地點和部門，此外，以卡片網格顯示每個職缺的職稱、公司、薪資範圍及發布日期。
「修正造型」 任務卡在桌面上垂直堆疊。 在螢幕寬於768px的螢幕上，讓它們以三欄格子顯示，間隔16px。」
「新增一些資料」 「新增20則涵蓋四個部門（工程、行銷、銷售、人力資源）的範例職缺，職稱實際，薪資介於6萬至18萬美元，並公布過去30天內的日期。」
「設定 API」 將 JobListings 元件連接到 cr_jobposting Dataverse 資料表。 用一個真正的 API 呼叫取代硬編碼陣列，該呼叫能取得職稱、部門、薪資和發布日期。」

對於視覺問題，請使用截圖

當網站在瀏覽器中看起來不對時，截圖直接貼到對話中，或提供檔案路徑。 視覺語境有助於辨識難以在文字中描述的版面、間距與樣式問題。

The header overlaps the hero section on mobile. Here's a screenshot:

[paste screenshot or provide path to screenshot file]

Fix the header so it doesn't overlap. It should be a fixed header with the content starting below it.

逐步迭代

與其在一個提示中描述整個網站，不如逐步建立。 先從結構和版面開始，然後一個一個地加入功能。 這種方法讓你有機會在每個步驟中檢視並修正方向。

Step 1: /create-site → Get the basic scaffold and layout right
Step 2: "Add a hero section to the home page with a search bar"
Step 3: "Add a job listings page with filter and sort"
Step 4: "Add a job detail page that shows full description"
Step 5: /setup-datamodel → Create tables now that you know the data shape
Step 6: /integrate-webapi → Wire up real data

Tip

每一步結束後，請查看瀏覽器預覽。 如果有什麼不對勁，先修正再繼續前進。 在一個元件中解決問題比在整個網站中解開問題要容易得多。

在批准前請先詢問原因

當你對擬議的變更不確定時，特別是允許權限、資料模型修改或認證設定時，請要求外掛程式說明它計畫要做什麼以及原因，然後再批准。

Before you create the table permissions, explain what access each role will have and why. I want to understand the security implications.

獨立執行技能以從問題中復原

如果某個技能在過程中途失敗，你不需要重新開始。 每個技能獨立運作，可以從中斷的地方接續。 例如，如果 /integrate-webapi 對第三個資料表執行失敗，您可以重新執行，系統會偵測已完成的工作。

/integrate-webapi failed while processing the cr_applications table. Here's the error: [paste error]. Resume the integration from where it stopped.

相關內容

  • Last updated on