Bubbly视频教程全集从入门到精通

如果你正打算系统学习Bubble无代码开发，想快速把脑子里的点子变成一个能跑的App，但又苦于找不到一条清晰、不跳步、带实操演示的完整路径——那这篇文章就是为你准备的。从注册第一个工作区开始，一步步演示如何添加可点击链接、接入Claude API，直到最终发布一个可交互的AI聊天界面。先快速梳理一下核心路径：注册邮箱→建空应用→添加跳转链接→接入Claude API→部署上线。

注册并初始化你的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，选择 Na vigation → 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），打开就能看到可交互的页面了。