成都 · AI × SOLANA · 30 分钟工作坊
网页怎么接入钱包和链上交易？用咖啡摊收款台演示，再看支付、AI 和资产应用有哪些做法。
演示使用 Devnet 测试币。
活动现场的咖啡摊
0.01 SOL
Devnet · 教学金额
摊主开单，顾客用 Phantom 扫码付款，收款页显示这笔订单是否到账。下面的开发过程都用这个项目来演示。
商家
确定收款钱包。本课每单收取 0.01 测试 SOL，每笔订单有自己的标识。
顾客
钱包切换到 Devnet，检查收款人和金额，再批准付款。
收款页
核对交易结果、收款人、金额和订单标识，显示到账状态与交易链接。
网页仍然负责显示商品、按钮和订单。接入 Solana 后，付款需要用户在钱包里确认，再由网页查询链上的交易结果。
左侧 · dApp = 网页应用
用户点击付款，网页把收款人、金额等信息组成交易，交给钱包。
中间 · Wallet = 钱包
用户核对收款人和金额后批准，钱包用私钥签名并提交交易。
右侧 · Solana = 区块链网络
网络执行交易。网页用返回的交易标识查询结果，核对收款人、金额和本单标识。
网页通过 RPC 接口查询余额、提交已签名的交易、查看交易结果。HTTP 用于发送请求，WebSocket 用于订阅变化。
对应本课扫码收款：商家网页生成付款码 → 顾客扫码并在钱包确认 → 商家网页通过 RPC 核对到账。
| 对象 | 熟悉的 Web2 做法 | 本次 Solana 项目 |
|---|---|---|
| 用户授权 | 登录后，由后端检查操作权限。 | 钱包持有人检查并签名，批准付款。 |
| 业务逻辑 | 后端代码处理订单和付款回调。 | 调用现有 System Program 转账；应用负责把付款与订单对应起来。 |
| 数据 | 订单、余额等数据写入数据库。 | SOL 余额与交易结果在链上；订单、库存等仍可放在数据库。 |
本次 SOL 转账直接调用 Solana 已有的 System Program。
你提出业务需求，Skill 给 AI 提供领域资料和工作步骤。例如接入 Solana 时，让它参考钱包、交易和支付的写法，再结合项目里的依赖版本实现。
npx skills add https://github.com/product-on-purpose/pm-skills
npx skills add https://github.com/solana-foundation/solana-dev-skill
npx skills add coreyhaines31/marketingskills安装后在编程工具中检查是否可用。
新建一个空项目，在 AI 编程工具中打开它，按顺序粘贴下面的提示词。[] 内是可替换内容，默认填入巷口咖啡 Demo。做自己的项目时，替换括号里的名称、场景、金额和文件路径。
在同一个 AI 对话里依次执行，每步看过结果再继续。缺少 Skill 时，让 AI 协助安装。
先回答顾客怎么付款、店员怎么核对订单，再确定第一版做什么。
我想从一个空项目开始，做 [巷口咖啡]。请用 pm-skills 中适合的 Skill，先和我理清需求。 场景：[成都快闪店卖冰拿铁，店员开单，顾客用手机扫码或电脑钱包付款，店员核对后出餐]。 第一版：[每单一杯、0.01 SOL，只用 Solana Devnet 测试币；暂不做购物车、库存和多人订单后台]。 帮我梳理店员和顾客各自的操作，指出还没想清楚、会影响第一版的问题，再向我提问。 把确认的需求、演示假设和暂不做的功能分别保存到 [RESEARCH.md]。这一步完成需求文档，代码留到实现阶段。
确认需求后，把角色、流程、状态和验收条件写进 PRD.md。
请根据 [RESEARCH.md]，使用 pm-skills 中适合的 Skill，为 [巷口咖啡] 写一份简短的 [PRD.md]。 我希望有 [商家收款台和独立的顾客付款页]，流程是 [店员设置收款地址并开单 → 展示二维码或分享付款链接 → 顾客用自己的钱包确认 → 店员看到到账结果和交易凭证 → 开下一单]。 视觉偏好：[奶油白底、深棕文字、黄色咖啡杯图标，用留白分组，少用横线；电脑和手机都能看清商品、金额和下一步操作]。 每单固定收款地址、金额和订单标识，刷新后可继续查看；顾客切换钱包时保留订单信息，付款地址与收款地址须不同。 交易成功且收款人、金额、本单标识一致时显示已付款。取消、金额不符、其他订单的付款和查询失败分别显示对应状态；结果不明时先查本单，不自动再次付款。 沿用已确认的第一版范围，写清页面状态和验收条件。这一步只确认产品怎么用，技术方案留到下一步。
先切到 Plan Mode，再粘贴提示词。看 AI 准备用哪些 Skills、先做什么、怎样检查结果。
请阅读 [RESEARCH.md] 和 [PRD.md]，为 [巷口咖啡] 制订实现计划。 结合 solana-dev、其他适用的 Skills 和当前环境，自行选择技术方案。我的偏好是 [先把开单到付款核对的流程做通，项目容易在本地运行，也方便之后发布到 Cloudflare 或 Vercel]。 选择能满足第一版需求的简单方案，不提前加入后台和扩展功能；从当前项目开始，不复制预先完成的 Demo。 用简短的计划说明：会用哪些 Skills，关键选择及理由，先后做什么，怎样验证，以及需要我准备什么。 这一步只输出计划，等我确认后再实现。
确认计划后再执行。AI 检查代码和页面，电脑钱包或手机钱包的付款确认需要你操作。
我确认上一步的计划，请保存为 [PLAN.md]，按照 [PRD.md] 和计划实现 [巷口咖啡]，使用计划中选定的 Skills。 请运行应用，打开页面，按店员和顾客的操作顺序检查电脑、手机的布局和付款入口。 按 PRD 检查付款结果、取消和查询失败，也检查刷新后继续查看、开下一单。发现问题就修复并复查。 需要我的钱包、测试币或付款确认时，告诉我具体操作；付款检查附上对应的交易凭证。 把启动方式和访问地址写进 [README.md]，把本地测试、Devnet 付款结果和待检查项写进 [CHECKS.md]。 完成后给我本地访问地址。这一步先在本地运行，发布留到下一节。
用已有功能和验收记录写介绍，发布网址等下一节部署完成后补上。
请查看已完成的 [巷口咖啡]、[README.md] 和 [CHECKS.md]，使用 marketingskills 中适合的文案 Skill，写一份 [DEMO.md]。 读者是 [工作坊学员和项目评审]。我希望介绍 [谁在什么场景下使用、解决什么问题、现场按什么顺序演示]。 语气偏好：[直接、具体，用日常语言介绍功能和操作]。 根据 [CHECKS.md] 写明已完成的功能、付款验证状态和可用地址，注明 Solana Devnet 测试网络。 简介和演示步骤放在正文，测试记录放在讲师备注。
两个平台任选一个。先在项目终端安装对应 Skill，安装时选择你正在使用的 AI 编程工具；再把该平台的提示词粘贴给 AI，让它检查项目、完成配置和发布。
安装 cloudflare 与 wrangler：前者帮助选择部署方式，后者提供配置和发布操作。
npx skills add https://github.com/cloudflare/skills --skill cloudflare wrangler
请使用 cloudflare 和 wrangler Skills，把当前目录中的 [巷口咖啡] 配置并发布到 Cloudflare。 目标项目名：[xiangkou-coffee-demo]；访问入口：[/coffee/]；运行网络：[Solana Devnet]。 先读取当前项目和已有部署配置，结合 Skills 与官方文档，选择适合本项目的部署方式。 检查目标入口和页面资源，让发布后的页面、图片与按钮都能正常使用。 检查 Wrangler 和登录状态，需要登录时引导我完成。发布前确认目标账号与项目。 运行类型检查、相关测试和生产构建，只上传所需发布文件，不上传本地密钥或环境文件；新项目名若已被使用，先核对归属。 部署后打开 /coffee/ 地址，检查页面、图片和钱包按钮，返回网址和检查结果。 列出电脑钱包和手机扫码的付款检查步骤，将结果补充到 [CHECKS.md]。
安装 vercel-cli，让 AI 检查项目关联、构建配置，并通过 Vercel CLI 发布。
npx skills add https://github.com/vercel/vercel --skill vercel-cli
请使用 vercel-cli Skill，把当前目录中的 [巷口咖啡] 配置并发布到 Vercel。 目标项目名：[xiangkou-coffee-demo]；访问入口：[/coffee/]；运行网络：[Solana Devnet]。 先读取当前项目和已有部署配置，结合 Skill 与官方文档，选择适合本项目的部署方式。 检查目标入口和页面资源，让发布后的页面、图片与按钮都能正常使用。 检查 Vercel CLI、登录状态和项目关联，需要登录时引导我完成。部署前确认账号或团队与项目。 运行类型检查、相关测试和生产构建，先发布预览版本；不自动覆盖已有生产站点，不上传本地密钥或环境文件。 部署后打开 /coffee/ 预览地址，检查页面、图片和钱包按钮，返回网址和检查结果。 列出电脑钱包和手机扫码的付款检查步骤，将结果补充到 [CHECKS.md]。等我确认预览后，再发布生产版本。
用链上稳定币收付款，并把交易记录与订单对应起来。Solana Pay 可以通过链接或二维码发起付款。
用处：商家收款、跨境付款、自由职业者收账，以及企业付款后的对账。
前景：除了收款入口，还可以做账单管理、批量付款和财务系统接入。实际使用取决于客户能否方便地取得、支付和兑换稳定币。
让软件按次购买数据、AI 推理或其他在线服务。Pay.sh 使用 x402 和 MPP，把报价、付款与服务调用接在一起。
用处：AI 助手查询付费资料、调用模型；开发者按调用次数出售自己的接口。
前景：当更多服务支持按次付款时，可以发展服务交易平台、用量账单和预算管理工具。服务覆盖、价格透明和付款后能否取得结果，是实际使用的关键。
把现实资产对应的权益记录为链上代币。xStocks 是以股票或 ETF 为底层资产的案例；持有人拥有什么权益，要看发行条款。
用处：在钱包中查询和转移资产代币，把发行资料、交易记录与其他链上应用连接起来。
前景：可以围绕发行、资产信息查询、持仓管理和赎回服务做配套工具。应用范围取决于发行方授权、底层资产安排和用户所在地区的规则。
为 AI 代理登记身份、服务说明和反馈记录。Solana Agent Registry 让这些资料可以被不同应用查询；登记不等于服务已经过安全认证。
用处：查找能完成某类任务的 AI 服务，核对服务身份，查看评价来自哪里。
前景：如果服务资料和反馈能持续更新，可以发展专业服务目录、调用路由和跨平台评价工具。资料真实性与评价是否可核查，决定这些工具能否帮助选择服务。
让多人共享的游戏状态与链上程序连接。MagicBlock 的 Ephemeral Rollups 处理局内操作，再把状态提交回 Solana；Generals 是官方游戏示例。
用处：多人对战、协作游戏，以及需要共享操作结果的互动应用。
前景：当游戏开放规则和状态接口时，社区可以开发赛事工具、观战页面和扩展玩法。是否适合上链，要看共享状态和资产是否是玩法的一部分。
把分散的现实设备接成数据或服务网络。Hivemapper 用车载设备采集道路影像，并使用 Solana 上的 HONEY 组织贡献奖励与数据消费。
用处：更新地图、查询道路影像，为物流规划和道路设施管理提供资料。
前景：如果采集范围、更新时间和数据准确性满足业务需要，可以发展地图数据服务、道路变化分析和行业查询工具。价值取决于数据是否有人使用和付费。
MagicBlock 的 Blitz 面向 Solana 实时应用。想做游戏或多人交互项目，可以进一步查看它的 Ephemeral Rollups、隐私与随机数工具。
本期 Luma 页面列出的奖项为 500、250、150 和 100 USDC；奖金评选条件写明使用 ER 或 Private ER，也欢迎其他 MagicBlock 项目提交。
报名和提交项目是两个步骤。同时参加其他活动时，要分别核对资格与截止时间。
