bubble无代码开发学习路径从注册工作区到发布ai聊天app：注册邮箱→建空应用→添加跳转链接→接入claude api→部署上线。
想系统学Bubble无代码开发，把点子快速变成能跑的App，又找不到一条清晰、不跳步、带实操演示的完整学习路径，这篇文章直接带你从注册第一个工作区开始，到发布可交互的AI聊天界面为止。
注册并初始化你的Bubble工作区
打开 bubble.io 官网，点击右上角 Sign up → 用邮箱注册（【不能用国内手机号+短信验证，必须填真实邮箱】）→ 验证邮箱后自动跳转至新建应用页。
在 “Create a new app” 页面，输入应用名称（比如 my-first-ai-tool），选择空模板（Blank template），点击 Create App → 等待约8秒，进入编辑器首页即算完成初始化。
添加首个可点击的文字跳转链接
方法一：用Text元素 + Workflow动作
在左侧元素面板拖一个 Text 到画布 → 双击修改文字为“去登录页” → 在右侧属性栏勾选 Make this element clickable → 展开下方 Workflow 标签 → 点击 Add an action → 选择 Navigation → Go to page → 在弹出页中选中已存在的 Login 页面（若没有，先建一个空页面再回来）。
方法二：用Link元素一步到位
直接拖 Link 元素到画布 → 输入显示文字 → 在右侧 Link URL 栏填入 /login（相对路径）或完整URL → 不用额外配Workflow，点击即跳转。
接入Claude API生成内容（零基础实操）
第一步：在 Bubble 后端 → API Connections 中点击 Add API → 名称填 Claude-3-Haiku，Base URL 填 https://api.anthropic.com/v1/messages；
第二步：在 Headers 区域添加两行：
Key 填 x-api-key，Value 填你从 Anthropic 控制台复制的密钥（【密钥一旦泄露无法重置，务必只粘贴进Bubble，别存本地文本】）；
Key 填 anthropic-version，Value 填 2023-06-01；
第三步：新建一个 Workflow，触发源设为按钮点击 → 添加 Action → API call → Claude-3-Haiku → Body 填写标准 JSON，含 model、max_tokens 和 messages 数组 → 返回数据绑定到页面上的 Text 元素即可实时显示AI回复。
发布你的第一个Bubble应用
点击右上角 Live 按钮 → 选择 Deploy your app → 等待状态变为 Deployed（通常需40–90秒）→ 点击生成的域名链接（形如 https://my-first-ai-tool.bubbleapps.io）→ 打开即见可交互页面。
