ARTICLE · 1337716
从一个想法到一个真正能用的 App,我离不开这三个平台
从一个想法到一个真正能用的 App,我离不开这三个平台作者：DAVYLAB · 从念头到产品 1/4 · GitHub、Cloudflare、Supabase：AI 时代，每个人都值得认识的三个工具 · 约 9 分钟读完 
一、如果有一个好想法，现在你真的可以把它做出来 以前，如果你有一个想法。 比如，想做一个记录灵感的小工具，一个帮助旅行者分摊费用的 App，或者一个可以自动整理信息、生成报告的工作助手。 你可能需要经历这样一条漫长的路：找程序员、找设计师、组建团队、确定预算、开发、测试、上线。 一个想法能不能落地，往往取决于你有没有技术团队和足够的资金。 但现在，情况正在发生变化。AI 让写代码这件事变得容易了许多。你可以用自然语言描述自己的想法，让 AI 帮你设计界面、编写代码、调整功能，甚至修复程序中的问题。 我自己也在持续做这样的尝试。从念头盒 NianBox，到 MelodyMe，再到 Dashboard Studio、AI Field Notes，以及其他一些小工具，我逐渐发现： AI 可以帮你把想法变成代码，但要让一个应用真正运行起来，还需要另外一套工具。 代码放在哪里？网站怎么发布？用户的数据保存在哪里？怎样实现账号登录？修改以后如何自动更新？ 这些问题，恰好涉及三个值得认识的平台：GitHub、Cloudflare 和 Supabase。它们不是三个功能相同的网站，而是分别解决应用开发过程中不同的问题。 如果把开发一个 App 比作建造一间房子： ▪ GitHub 更像是图纸和施工档案室，记录项目的设计、代码和每一次修改。 ▪ Cloudflare 更像是房子的建设和交付系统，让应用能够运行，并被互联网用户访问。 ▪ Supabase 更像是房子里的数据管理系统，负责保存信息、管理用户和处理数据。 
图 1 三个平台的分工（示意图，是便于理解的概括，不是官方定义） 当然，这只是帮助理解的比喻，三个平台实际承担的技术职责远比这复杂。今天先不深入技术细节，我们先认识它们。 二、GitHub：不只是程序员的代码仓库 第一次接触 GitHub 的时候，很多人会有一个印象：这是程序员使用的网站，里面全是看不懂的代码。 但如果你开始使用 AI 开发应用，就会发现 GitHub 的意义远不止于此。 简单来说，GitHub 是一个帮助人们保存、管理、分享和协作开发项目的平台。你可以把它理解为一个专门为数字产品准备的项目档案库。 它究竟能做什么？ 第一，保存项目。你开发的 App、网站、工具，其代码和相关文件都可以放在 GitHub 仓库（Repository）中。每个项目可以拥有独立的仓库。 第二，记录修改过程。假如今天让 AI 修改了首页，明天增加了一个功能，后天又调整了界面。GitHub 可以记录这些变化。如果某次修改出现问题，还可以根据版本记录检查和恢复。 第三，发现优秀资源。GitHub 上有大量开源项目、开发工具、AI Skills 和各种技术资源。很多开发者会把自己制作的工具开放出来，供其他人学习、使用和改进。这意味着，即使你不会编程，也可以借助 AI 去理解和使用别人已经创造出来的成果。 第四，自动化项目管理。GitHub Actions 可以按照预设规则执行任务，例如自动测试、构建和部署。这让很多重复性工作不再需要每次手动完成。 
图 2 GitHub 仓库里有什么（示意图） 对我来说，GitHub 最重要的价值是：它让每一个 AI 项目都有了自己的长期存档和持续迭代的基础。一个想法不再只是聊天窗口里的一段对话，而是可以逐渐沉淀成一个完整的数字产品。 三、Cloudflare：让你做出来的东西真正出现在互联网上 代码写好了，然后呢？如果只是保存在自己的电脑里，别人并不能直接使用。你需要一个地方，让网站或者应用真正运行起来，并通过互联网访问。这就是 Cloudflare 能发挥作用的地方。 Cloudflare 是一家提供网络基础设施和开发者服务的公司。它的开发者平台包含网站发布、服务端运行、数据库、文件存储以及 AI 等多种能力。对于 AI 应用开发者，有几个功能尤其值得了解。 1. 发布你的网站：Workers 静态资源与 Pages 假设你让 AI 帮你制作了一个网站。把它放到 Cloudflare 上，你就能得到一个可以访问的网站地址。 这里有一个新变化，需要先说明：Cloudflare 官方文档提供了《从 Pages 迁移到 Workers》的指南，其中说明，Workers 既可以部署网站的静态文件，也可以运行后端代码，功能更全面。所以，如果现在从零开始做一个新项目，Workers 是值得优先了解的选择；已经用 Pages 部署的项目，要不要迁移、什么时候迁移，可以参考官方的迁移指南。 我实际部署的暖间地图用的是 Pages：https://warm-room-map.pages.dev/ 不管用 Workers 还是 Pages，都可以把 GitHub 仓库连接到 Cloudflare，设置自动部署。以后修改代码并推送更新，平台就可以自动完成构建和发布，你不需要每次都手动上传网站文件。具体入口和步骤，以官方文档当前页面为准，后面的 Cloudflare 专题会一步步讲。 2. Cloudflare Workers：让应用拥有后端能力 如果一个网站只有展示页面，它能做的事情相对有限。例如，你想让用户提交信息、调用 AI、处理数据，或者运行一些自动化任务。这时候就需要后端服务。 Cloudflare Workers 可以理解为一个运行程序逻辑的云端环境。你可以利用它处理请求、提供 API，并连接 Cloudflare 提供的数据库等其他服务（具体能力以官方文档为准）。 3. Cloudflare D1：保存应用的数据 D1 是 Cloudflare 提供的托管 SQL 数据库。例如，一个费用分摊 App，需要记录：谁支付了费用、参与人是谁、每个人应该承担多少、最终结算结果是什么。这些信息不能只放在网页上，需要有数据库进行保存和管理。D1 就可以承担这类工作。 我在 AI Field Notes 项目中，就实际采用了 Cloudflare Workers + D1 的组合，逐步搭建应用的后端和数据存储能力。 
图 3 一个典型的 Cloudflare 应用架构（示意图，实际项目可按需求调整） 所以，Cloudflare 不只是一个发布网站的平台。它正在成为个人开发者构建完整应用的重要基础设施。 四、Supabase：让你的应用真正拥有记忆 如果说 Cloudflare 解决了应用运行和数据服务的问题，那么 Supabase 则提供了另一种非常值得了解的后端开发方案。它最大的特点是：把很多应用开发中常见的后端能力整合到了一起。尤其适合那些希望快速实现用户登录、数据保存和多设备同步的应用。 它能解决哪些问题？ 举个例子。你开发了一个个人记账 App。用户在手机上记录了一笔支出，第二天换到电脑，希望还能看到昨天的数据。这就需要解决数据存储和同步问题。Supabase 提供了几项重要能力： 第一，数据库。它以 PostgreSQL 为基础，可以保存用户信息、交易记录、文章内容以及各种业务数据。 第二，用户认证。可以实现注册、登录以及不同用户的身份管理。 第三，文件存储。例如用户上传的头像、图片、附件等，都可以通过存储服务进行管理。 第四，实时数据。当数据发生变化时，可以让订阅相关数据的客户端及时收到更新。 第五，后端函数。可以编写服务端逻辑，处理一些不能简单放在前端执行的任务。 
图 4 Supabase 提供的几类后端能力（示意图） 这些能力组合起来，就能帮助开发者快速搭建一个具有完整后端功能的应用。 在我之前的 Dashboard Studio 项目中，就曾经接入 Supabase，实现用户登录、云端看板存储和历史版本管理。下面是这个项目的界面： 
图 5 我的 Dashboard Studio 界面（作者项目截图，预览中的数字为演示数据） 不过，实际开发也让我意识到：选择平台不能只看功能，还要考虑项目规模、使用成本和后续维护。后来在 AI Field Notes 项目中，我根据成本因素选择了 Cloudflare Workers + D1 的技术方案。因此，Supabase 是一个值得认识的平台，但不意味着每个项目都必须使用它。 选型时还要知道的一个细节：Supabase 免费计划里的项目，在一段时间不活跃后会被暂停（官网目前写的是一周，具体规则以官网当前页面为准）。如果你的应用需要长期稳定在线，选型时要把这一点考虑进去。 五、三个平台放在一起，到底能做什么？ 到这里，我们可以把三个平台的作用串起来了。假设你想开发一个自己的 AI 旅行助手（这里只是示意，不是某个真实项目）。它需要一个网站，需要能够处理用户请求，还需要保存用户的旅行记录。一种典型的技术组合可以是： 第一步：GitHub。保存整个项目的代码、设计文件和开发记录。AI 每次修改，都可以通过版本管理留下记录。 第二步：Cloudflare。将网站部署到 Cloudflare，利用 Workers 处理后端请求。根据实际架构，还可以使用 D1 保存数据。 第三步：Supabase。如果选择 Supabase 作为后端方案，就可以利用它的数据库、用户认证、文件存储等能力。 这里需要特别说明：Supabase 和 Cloudflare D1 并不是必须同时使用的两个数据库。它们可以是不同架构下的替代选择，也可以在有明确需求时组合使用。 把三个平台放在一起看，就能理解它们的分工：
当然，这并不是开发 App 的唯一方案。不同项目可以采用不同技术组合。有些简单工具只需要 GitHub 和网站托管平台就能运行；有些应用则需要数据库、用户认证和复杂的后端服务。关键是根据实际需求选择，而不是为了使用技术而使用技术。 六、AI 时代，值得学习的不只是怎么使用 AI 以前，我们可能认为：不会编程，就很难开发自己的应用。但现在，AI 正在降低软件开发的门槛。不过，真正把一个想法做成产品，还需要了解一些基本的工具和运行逻辑。 我越来越觉得，普通人没有必要一开始就学习复杂的编程语言。但有必要逐渐认识： ▪ 什么是代码仓库？ ▪ 什么是网站部署？ ▪ 什么是数据库？ ▪ 什么是用户认证？ ▪ 什么是前端和后端？ 当你理解这些基本概念，再借助 AI 去完成具体工作，就会发现自己能够做的事情比想象中多得多。 接下来，我准备把这三个平台分别拆开，做成三个独立的入门专题，隔天更新一篇： ▪ 2/4 GitHub 从入门到实践：普通人如何找到、理解并使用全球开发者分享的资源？ ▪ 3/4 Cloudflare 实战入门：如何把 AI 帮你制作的网站发布到互联网上？（以 Workers 为主，也会讲 Pages） ▪ 4/4 Supabase 入门指南：如何让你的 App 拥有数据库、用户登录和数据同步能力？ 每一篇都尽量从实际操作出发，不讲晦涩的专业术语，而是用普通人能够理解的方式，一步一步讲清楚。 因为我始终相信：AI 时代，最重要的变化不是每个人都要成为程序员，而是每个人都有机会把自己的想法变成真正有用的工具。 把想法，做成能用的工具。这里是 DAVYLAB。 专业术语解释 仓库（Repository）：GitHub 上存放一个项目全部文件和修改记录的地方，可以理解为项目档案库。 版本记录：每次修改都会留下一份存档，出问题时可以查看和恢复。 开源：作者把项目的代码公开，允许别人学习、使用和改进。 GitHub Actions：GitHub 提供的自动化功能，可以按规则自动测试、构建和发布。 部署：把做好的网站或应用放到服务器上，让别人能通过网址访问。 静态文件 / 静态网站：内容固定的网页文件，打开时不需要服务器现场计算，比如展示型页面。 前端 / 后端：前端是用户看得到、点得到的界面；后端是在后台处理请求和数据的部分。 API：程序之间交换数据的约定接口，可以理解为“点单窗口”。 数据库 / SQL：数据库是有规则地保存数据的地方；SQL 是操作数据库的常用语言。 PostgreSQL：一种常用的开源数据库，Supabase 以它为基础。 用户认证：确认“你是谁”的过程，比如注册、登录。 Pages / Workers / D1：Cloudflare 的三个产品：Pages 用于发布网站，Workers 用于运行后端代码（也可部署静态资源），D1 是托管的 SQL 数据库。 Edge Functions：Supabase 提供的服务端函数，用来处理不适合放在前端的逻辑。 实时数据：数据一有变化，就及时通知正在使用的客户端。 无服务器：你不需要自己管理服务器，由平台负责运行和扩容。 来源与说明：本文提到的平台功能，依据 GitHub、Cloudflare、Supabase 官方文档整理（docs.github.com、developers.cloudflare.com、supabase.com/docs）；Cloudflare 一节参考其官方文档《从 Pages 迁移到 Workers》，Supabase 免费项目暂停规则参考其官网定价页，均以官网当前页面为准。平台功能、套餐和命名会变化，本文不引用价格和免费额度。三个平台的“通俗理解”和 AI 旅行助手组合属于便于理解的概括和示意，不是官方定义。暖间地图、Dashboard Studio、AI Field Notes 为作者个人项目，Dashboard Studio 截图来自作者项目，预览中的数字为演示数据。本文由 Claude 协助整理。
