Bubbly视频教程全集从入门到精通
如果你正打算系统学习Bubble无代码开发,想快速把脑子里的点子变成一个能跑的App,但又苦于找不到一条清晰、不跳步、带实操演示的完整路径——那这篇文章就是为你准备的。从注册第一个工作区开始,一步步演示如何添加可点击链接、接入Claude API,直到最终发布一个可交互的AI聊天界面。先快速梳理一下
如果你正打算系统学习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),打开就能看到可交互的页面了。
Postman是一套面向API全生命周期的开发与测试平台,可在Mac上发送和调试多种协议请求,管理集合、环境及认证信息,并完成脚本测试、模拟服务、监控、文档发布和团队协作。它适合开发、测试及运维人员使用,提供个人免费方案。
Docker Desktop 是 Docker 官方为 Mac 提供的容器开发环境,集成 Docker Engine、命令行工具、Compose、Build、Kubernetes 与图形化管理界面。
Android Studio 是 Google 面向安卓应用开发提供的官方集成开发环境,基于 IntelliJ IDEA 构建。它整合智能代码编辑、Gradle 构建、界面预览、设备模拟、性能分析、调试测试及 APK 分析等工具。
PixPix 是面向品牌、卖家和内容团队的在线 AI 图片视频创作平台,提供图视频 Agent、无限画布、图片生成、视频生成、自然语言编辑及商品套图、产品精修和带货视频等电商工具。
Postman 是面向 API 全生命周期的开发与协作平台。Windows 桌面版可用于构建和发送 HTTP、GraphQL、gRPC、WebSocket、MQTT 等请求,并提供环境变量、集合、脚本测试、模拟服务、监控、文档及团队工作区等
Docker Desktop 为 Windows 开发者提供集成式容器环境,内置 Docker Engine、命令行工具、Compose、Build 与 Kubernetes 等组件,可在本机完成镜像构建、容器运行、日志查看和资源管理。













