Power Pages 5 天上手 · Vibe Coding 教程

给 Javis 的 Power Pages 教程。Vibe Coding = 用 AI 工具 (Power Pages Copilot + Claude Code) 写 Power Pages 站点。你 PwC 客户 (可口可乐 / 摩根大通 / Eli Lilly) 大量用 Power Pages, 知道这个 = 简历加分项。

D1Day 1 · Power Platform 生态 + 第一个站点

2026-08-13 周四 · 90 分钟 · 目标: 在 Power Pages 跑通 hello world 站点

4 个核心概念 (10 分钟)

• Power Pages = low-code 网站平台, 微软 Power Platform 的一部分
• Dataverse = 数据存储 (类似 SQL 表, 但 low-code 友好)
• Power Automate = 业务流程 (类似 IFTTT / Zapier)
• Power Pages Copilot = AI 助手, 用自然语言写 Power Pages

Power Platform 生态 (5 分钟)

前置 (15 分钟)

1. 注册 Microsoft 365 商业版账号: https://powerpages.microsoft.com (需信用卡, 30 天试用)
2. 或: Power Pages 开发者计划 (免费 1 年): https://powerpages.microsoft.com/en-us/developer-plan
3. 登录 make.powerpages.com

第一个站点 (30 分钟)

用 Power Pages Copilot 写第 1 个站点:

1. 登录 make.powerpages.com
2. 点 "Create a site" → 选空白模板 (Blank)
3. 站点名: "My First Power Pages" (你后面可改)
4. 等 2-3 分钟 Power Platform 准备环境
5. 在 Power Pages Studio (设计器) 里, 点右上 "Copilot" 图标
6. 输入: "Create a homepage with company name 'Javis Data' and a hero section with my photo placeholder"
7. Copilot 1-2 分钟生成

Vibe Coding 演示 (15 分钟)

继续用 Copilot, 试 3 个 prompt:

1. "Add a services section with 3 cards: Data Analytics, AI Solutions, Pricing Strategy"
2. "Change the color scheme to blue (#0078d4) and white"
3. "Add a contact form with fields: name, email, message, and submit button"

D2Day 2 · Vibe Coding 工具

2026-08-14 周五 · 90 分钟 · 目标: 3 个工具都装好, 都会用

3 个 Vibe Coding 工具对比

工具 1: Power Pages Copilot (30 分钟)

你在 Day 1 已经用过, 今天练 5 个 prompt:

1. "Add a pricing section with 3 tiers: Basic / Pro / Enterprise"
2. "Generate 5 FAQ items for a data analytics service"
3. "Add a testimonials carousel with 3 customer quotes"
4. "Create a footer with social media links and contact info"
5. "Suggest 3 improvements to the homepage design"

工具 2: Claude Code (30 分钟)

Power Pages 的 custom code 编辑器 支持写 JavaScript / Liquid 模板. 用 Claude Code 写:

1. 装 Claude Code: brew install claude-code 或 npm npm install -g @anthropic-ai/claude-code
2. Power Pages Studio → 选 "Advanced" (custom code editor)
3. 导出站点代码 (Power Pages → 站点设置 → Download Site)
4. 解压后用 Claude Code 打开: cd portal && claude
5. 让 Claude Code 改 1 个 Liquid 模板, 加 custom CSS

示例 prompt:

"Add a sticky header to the homepage that changes background
color to #0078d4 when the user scrolls down 100px.
Use vanilla JavaScript, no jQuery. Test in Chrome."

工具 3: Cursor (30 分钟)

Cursor 是 IDE, 写 Power Pages 的 custom code:

1. 下载 Cursor: cursor.sh
2. File → Open Folder → 你的 Power Pages 解压目录
3. Cmd+K: 写 1 个 prompt, 改 contact form
4. Cmd+L: 问代码问题

D3Day 3 · Dataverse 数据建模 + 表单

2026-08-15 周六 · 120 分钟 · 目标: 1 个能提交数据到 Dataverse 的表单

为什么 Day 3 最关键?

Power Pages 的核心价值是 收集 + 显示数据. 没有 Dataverse 表单 = 静态网站.

Step 1: 创建 Dataverse 表 (30 分钟)

1. 登录 make.powerapps.com → Dataverse → Tables
2. New table → 命名: "ContactSubmission"
3. 加字段:
   • Name (Text, 必填)
   • Email (Email, 必填)
   • Company (Text)
   • Message (Text Area, 多行)
   • SubmissionDate (Date Time, 默认值 = 现在)
4. Save & Close

Step 2: 用 Vibe Coding 生成 Power Pages 表单 (45 分钟)

用 Copilot prompt:

"Create a contact form page with 4 fields connected to
Dataverse table 'ContactSubmission':
- Name (required, max 100 chars)
- Email (required, email validation)
- Company (optional, max 200 chars)
- Message (required, textarea, max 1000 chars)

After successful submission:
- Show 'Thank you' message
- Send email to admin@yourcompany.com
- Redirect to /thank-you page"

Step 3: 配置权限 (15 分钟)

1. Power Pages → 你的站点 → Set up → Security
2. 加 1 个 Web Role: "Anonymous" (允许未登录用户提交)
3. Table Permissions: 给 "ContactSubmission" 表加 Insert 权限给 Anonymous 角色

Step 4: 测试 (30 分钟)

1. 打开站点 /contact
2. 填表提交
3. Power Pages Studio → Data → ContactSubmissions → 看到 1 条数据
4. 邮箱 (admin@yourcompany.com) 收到通知 (如果配置了)

D4Day 4 · 业务流程 (Power Automate)

2026-08-16 周日 · 90 分钟 · 目标: 1 个完整审批流

Power Automate 是什么?

类似 IFTTT / Zapier, 但微软生态. 触发 → 条件 → 动作. 你 Day 3 提交的表单, 触发 1 个 Power Automate 流:

Step 1: 创建 Power Automate (30 分钟)

1. 登录 make.powerautomate.com
2. Create → Automated cloud flow
3. Trigger: "When a row is added" (Dataverse → ContactSubmission)
4. Action 1: "Send an email" (V2) — to admin@yourcompany.com
5. Action 2: "Post a message" (Teams) — to "Sales" channel

Step 2: Vibe Coding 写条件分支 (30 分钟)

用 Copilot 写 (Power Automate 也支持 AI):

"Add a condition: if the message contains the word 'enterprise',
route the submission to the 'Sales-Enterprise' channel
and assign to user 'sales-lead@yourcompany.com'."

Step 3: 测试 (30 分钟)

1. 提交 1 个含 "enterprise" 的表单
2. 查看 Power Automate run history, 确认路由正确
3. 提交 1 个普通表单, 确认常规流程

D5Day 5 · 实战项目 (公司介绍页 + 客户门户)

2026-08-17 周一 · 150 分钟 · 目标: 完成简历可写项目

项目 1: 公司介绍页 (60 分钟)

1. 用 Power Pages Copilot 1 句话生成完整站点: "Create a B2B SaaS company website for 'Javis Data' with 4 sections: hero, services (3 cards), about, contact form"
2. 加 Dataverse 联系表单 (复用 Day 3 配置)
3. 加 Power Automate 审批流 (复用 Day 4 配置)
4. SEO 优化: 加 meta description / OG image

项目 2: 客户门户 (90 分钟)

1. 登录后页面: 用 Power Pages Studio 加 "Login" 组件
2. 配置 Azure AD B2C (身份验证) 或本地账号
3. 登录后显示: 客户订单列表 (从 Dataverse)
4. 加 "Submit ticket" 表单 (Dataverse Ticket 表)

部署到生产 (10 分钟)

1. Power Pages → 你的站点 → "Go Live" (生产环境)
2. 绑定自定义域名 (你公司域名)
3. 启用 HTTPS (免费)

常见问题 FAQ

Q1: Power Pages 收费吗?

Power Pages 许可证是 每用户每月 15-200 USD. 但 开发者计划免费 1 年 (5 站), 适合学习. 生产环境看公司 license.

Q2: Vibe Coding 跟 Power Pages Copilot 一样吗?

不一样: - Power Pages Copilot = 微软官方, 只能在 Power Pages 平台内用 - Vibe Coding = 通用概念, 包括 Cursor / Claude Code / v0 / Copilot - 建议 双线: Copilot 写平台配置, Claude Code 写 custom code

Q3: 学完能写简历吗?

能. 5 天做完后, 简历可以写: - "用 Power Pages + Vibe Coding (Copilot + Claude Code) 实现 2 个公司站点, 含联系表单和客户门户" - "用 Dataverse + Power Automate 实现端到端数据流, 表单提交 → 自动邮件 → 团队路由"

Q4: Power Pages 跟你 D+4 关系?

Power Pages 是 low-code, 跟你 D+4 LangGraph 完全不一样. 但 Power Pages 跟 Azure Functions + Durable Functions (你 D+11 学的) 是互补: Power Pages 前端, Azure Functions 后端. 两者结合 = 完整 web 应用.

Q5: D+10 阶段值得学吗?

周末学 (D+13/14-16). 不影响主线. 微软客户 (可口可乐 / 摩根大通 / Eli Lilly) 招人时, 知道 Power Pages = 加分项.

诚实总结

5 天下来, 你会:

1. 理解 Power Platform 生态 (Power Pages + Dataverse + Power Automate)
2. 用 3 个 Vibe Coding 工具 (Copilot / Claude Code / Cursor)
3. 创建 Dataverse 表 + Power Pages 表单 (Day 3 是核心)
4. 配 Power Automate 业务流程 (审批 / 通知)
5. 上线 1 个公司介绍页 + 1 个客户门户

前提: 你有 Microsoft 365 账号 + Power Pages 开发者计划.

本研究基于 Microsoft Learn 官方文档 + Power Pages 开发者计划 + Vibe Coding 工具链. 所有 prompt 示例为简化版, 实际 Copilot 输出可能不同. 诚实标注: 我没真实跑过 Power Pages, Day 3 Dataverse 部分可能需要更多调试时间.