Transcription
通常，当我们谈论原型制作时，尤其是在使用人工智能工具时，我们通常指的是仅在客户端构建事物。这与您知道的全栈应用程序的主要区别通常是添加了服务器和数据库的组合。您将拥有电子邮件集成、文件或 Blob 存储等功能，对吧？使用 Stripe 付款非常普遍。您必须拥有某种形式的身份验证和某种形式的产品分析，然后是一些日志分析。
>> 这就像要用 Vive Code 完成很多事情，伙计。这太多了。
>> 所以，如果您尝试部署此应用程序，它将无法正常工作。您会收到一个来自客户端到后端（对吧？）的请求，以生成图像，嗯，到您创建的 API 转换端点，但它会直接发送到 localhost 3001。所以，这些是 AI 可能出错的一些好例子。我构建了一个小模板，嗯，它包含了我认为构建 SaaS 项目最常见、最必要的功能。所以，基本上，让我们回顾一下构建真实产品的步骤，好吗？
好的，欢迎大家。嗯，今天，我的客人是 Colin Matthews，独一无二的。嗯，Colin 是我的好朋友。他教了很多学生如何用 AI 构建东西，并且像构建真实的东西，而不是仅仅是随机的原型，而是真实的东西，你可以真正获得付费客户的真实应用程序。所以，这就是我们今天要谈论的。我用 Vive Code 构建了一个相当糟糕的嗯，纳米香蕉嗯，图像原型制作器，然后我和 Colin 将把它转换成一个真正的 SaaS 应用程序。好的。
所以，欢迎 Colin。
>> 是的，很高兴回来。我想这是我第三次了。
>> 是的。太好了。好的。所以，嗯，为什么你不先谈谈 Vive Code 原型和应用程序的区别呢？
>> 当然。是的。所以，我实际上有一个快速的视觉辅助工具来帮助我们。让我快速分享一下我的屏幕。所以，嗯，如果您听我谈论过软件，您可能以前见过我谈论过这个。客户端、服务器和数据库。所以，通常，当我们谈论原型制作时，尤其是在使用 AI 工具时，我们通常指的是仅在客户端构建事物。所以，就像您在 UI 中看到的那样，对吧？所以，如果我在像 Bolt 或 Replit 或 Lovable 这样的工具中构建东西，很多时候，注意力实际上花在如何让它看起来正确，让它感觉良好，以及所有这些事情上。
嗯，这与您知道的全栈应用程序之间的主要区别通常是添加了服务器和数据库的组合。所以，有些东西可以处理应用程序逻辑，比如用户如何登录以及类似的事情，以及显然是随着时间的推移存储数据。然后，人们通常喜欢添加的唯一其他重要事情是第三方集成，对吧？所以，这些将是您知道的 Gmail 集成或类似的东西，通常它会与您的服务器通信。所以，这些是主要组件，就像原型只是一个漂亮的图片，对吧？只是客户端。全栈应用程序是客户端、服务器、数据库，然后通常是一些第三方集成。
>> 但是，当涉及到像 SaaS 应用程序时，通常它会有一套常见的功能，大多数这些应用程序都有，对吧？就像 >> 是的，没错。所以，我们可以把其中一些拉进来。但通常您会拥有像电子邮件集成这样的东西，对吧？所以，那将是第三方。所以，您可以发送交易电子邮件。您可能还会有文件或 Blob 存储，对吧？付款通常通过 Stripe 进行。您必须拥有某种形式的身份验证。通常您不想自己构建身份验证，这意味着您不自己构建它。您使用现有的身份验证工具。
>> 然后，从产品和工程方面来说，我认为最基本的是，您需要某种形式的产品分析。所以，了解用户行为，然后是一些日志分析，这是针对错误的。所以，如果您熟悉 Sentry 这个工具，那就是我所说的，但就像捕获产品中的错误一样。
>> 明白了。好的。是的，是的，是的，这就像要用 Vive Code 完成很多事情，伙计。这太多了。
>> 是的。
>> 您能实际展示一下我拥有的 Vive Coder 东西吗？
>> 当然。是的。现在我们有一个，嗯，我想如果您愿意，您可以解释一下。
>> 是的。这是我非常棒的头像 Pro AI 应用程序。您可以看到它非常专业。嗯，基本上，您可以上传一个头像，然后它将使用 Google Nano Banana 生成一个更专业的头像，希望它仍然有效。您尝试过确保它有效吗？
>> 是的。[笑声] 是的，它有效。它有效。
>> 好的，它仍然有效。好的，太好了。
>> 是的。您是怎么构建这个的？只是好奇。
>> 哦，那很好，伙计。是的。嗯，
>> 完美。
>> 我是怎么构建这个的？我使用了时钟代码，然后就像用 Vive Code 构建它一样，然后我不得不给它很多指令来使用 Gemini 的 API 和大量的文档。是的，
>> 我能够让它工作。实际上有一个教程，如果您想用 Vive Code 构建它，我可以链接到。是的。
>> 哦，完美。是的。是的，我只是想评论一下，根据这张照片，我可以看到我为什么不再有头发了。[笑声]
>> 发际线相当靠后。我认为 AI 准确地捕捉到了这一点。嗯，但是，嗯，所以，嗯，是的，所以，我认为这更接近于一个原型。
>> 在这种意义上，您没有所有那些额外的东西。然后，为了好玩，我们还将快速回顾一下您的代码。所以，您确实有一个前端和一个后端，对吧？所以，您有一个客户端和一个服务器，嗯，这已经是一个进步了，因为您不一定需要为这种类型的应用程序拥有服务器，如果您只是在本地运行它。嗯，但您知道它有效，这很好。嗯，然后这里有一些事情，我们将在后端指出一些事情，关于它是如何工作的。所以，如果我们看看您的 Gemini 东西，您可以看到，嗯，这是您的提示以及所有这些好的东西，对吧？所以，您可能写了，您是手动写了这个提示，还是 AI 为您生成的？
>> 嗯，我与 AI 一起编写了提示。是的。
>> 是的。很酷。然后它将请求发送到 Gemini，并做所有这些好的事情。老实说，这没关系，因为这只是我们刚才谈到的那种第三方集成步骤，对吧？就像发送请求到 Google 并获取结果一样。就整体设置而言，这并不是什么大问题。所以，有一些事情有点不对劲。嗯，让我看看我能否找到一个好例子。让我们看看这个。所以，一个很好的例子是您的图像是 B64 编码的文本。通常您会引用一个文件，但它只是一个非常长的文本字符串，您看到的预览图像是模拟图像。所以，这是一种奇怪的 AI 事情。嗯，不一定非常不正确，但有点奇怪的决定。
嗯，另一个好例子，让我看看我能不能在这里找到它。我想我们 somewhere 有一个 localhost。您实际上有一个，我相信 localhost URL，嗯，直接在代码的某个地方，看，[笑声]
>> 是的，所以，嗯，基本上，是的，就在这里。所以，这意味着您有一个来自客户端的后端请求，对吧？用于生成图像，嗯，到您创建的 API 转换端点，但它直接发送到 localhost 3001。所以，如果您尝试部署此应用程序，它将无法正常工作。
嗯，
>> 您的意思是 localhost 不起作用？[笑声]
>> 是的。是的。所以，这些是 AI 可能出错的一些好例子，即使在您构建一些更复杂的东西时也是如此，对吧？就像一些小的、小的您想修复或更改的事情。
>> 好的。
>> 嗯，然后显然，最大的事情是添加身份验证和 Stripe 以及您提到的所有其他事情，对吧？嗯，
>> 是的。
>> 是的。
>> 好的。所以，所以您有这个模板，对吧？您实际上添加了所有这些东西。您能给我们展示一下吗？
>> 是的，当然。所以，我构建的是一个小的模板，它包含了我认为构建 SaaS 项目最常见、最必要的功能。所以，模板本身只是一个待办事项列表。嗯，意图是，您知道，您用您正在构建的东西替换这个页面。嗯，但您可以看到它有定价，对吧？我们可以去升级到专业版。那将把我们带到 Stripe，以实际完成购买。它附带，嗯，我们的登录等功能。让我回到这里。登录。所以，您可以登录和登出。对吧？现在，它使用 Google 身份验证来实现这一点。您也可以使用 GitHub 身份验证或您想要的任何东西进行设置。
然后，它还带有一个 AI 聊天。实际上，我正在将它切换到 OpenAI 的新代理套件作为后端。所以，那将很有趣。嗯，然后在设置方面，您可以，您知道，像切换您的电子邮件偏好。它附带与 SendGrid 的集成。嗯，然后还有我提到的其他东西，比如 PostHog 用于产品分析，以及用于错误捕获和其他一些后台的小事情。
>> 嗯，抱歉，您提到有一种方法可以像枢轴一样获得报酬吗？
>> 哦，是的，当然。是的。所以，您基本上只需设置您想要的任何内容，然后提示，例如，更改此文本。
>> 对，但嗯，是的，您会提示，或者您只需插入您的 Stripe ID，然后您就可以从 Stripe 收款。
>> 好的。好的，伙计。本集由 Composeio 提供。大多数付费的 AI 功能并非来自模型，而是来自您正在处理的集成，混乱的 API，脆弱的工具调用，以及在 Slack 或 Salesforce 中调试和弄清楚为什么东西坏了而浪费的时间。Composio 为您提供了一个 SDK [音乐] 来连接到 800 多个应用程序，如 Slack、GitHub、Gmail、Jira，并且他们构建了 Rube.app，可以将所有这些应用程序直接插入 AI 聊天。所以，您只需询问，从 Mixpanel 中提取最新指标并更新 Linear。现在，与其与 API 斗争，不如专注于实际更快地发布。请访问 getrube.link/per 或视频描述中的链接。现在回到这一集。为什么你不开始将这个东西，嗯，将我的 Vive Code 的东西放进去，然后我们可以一边它尝试编程一边谈论其他话题。
>> 是的，听起来不错。所以，基本上，我们将尝试将您的原型转换为一个全栈应用程序。对吧？
>> 没错。
>> 嗯，很酷。所以，我将首先看一下您的代码，我想快速分解一下您的代码，以便人们对它是如何工作的有一个大致的了解。所以，您实际上可以看到您有两个文件夹，对吧？所以，您有后端和前端代码。后端代码。这是您的服务器端代码，就像我们谈到的那样，对吧？所以，这实际上只是与 Gemini 的集成。这里没有太多其他事情。我们可能会复制您的提示，以便我们保持提示的方式相同。老实说，其他所有东西我都会让 AI 重新生成代码，因为没有特别有用的东西。它只是一个调用 LLM 到 Gemini 来生成图像。
>> 好的。
>> 嗯，然后在前端，您可以看到前端中有不同种类的元素。其中一个元素是组件。所以，您有一个样式选择器组件、一个结果显示器、一个图像上传器和一个下载按钮。然后，您有一个名为 app.jsx 的主文件，它只是导入所有这些组件并将它们放在页面上。有点像乐高积木，对吧？所以，我们有所有这些独立的乐高积木，您在页面上组装这些乐高积木。嗯，所以，我很容易做到，任何人都可以做到的是，如果我们愿意，可以将您构建的组件带入全栈应用程序。所以，我们可以尝试维护您在原型中的一些视觉样式。
>> 好的。我认为这取决于我。我并不为视觉样式感到骄傲，但是的，这取决于您。
>> 是的，我们会尝试，我们会尝试保留它，嗯，只是为了好玩。所以，嗯，很酷。让我们开始把它移过去。我将在这里这样做，在这里这样做。您可以看到这是模板，顺便说一句，这是我这里的代码。您会看到一个非常相似的结构。所以，我们有客户端代码。我们有服务器代码，对吧？嗯，和您一样，客户端，前端和后端。然后，在客户端，如果我们进入这里，我们会看到一个名为 components 的文件夹，对吧？所以，这种模式将一直重复，关于您的代码是如何组织的。所以，我将在这里创建一个名为 Peter components 的新文件夹。我将把您的文件拖过来。
嗯，这就是我们所需要做的。顺便说一句，您也可以使用基于云的工具来做到这一点。所以，Replit 允许您将文件拖放到文件系统中，然后您可以将您的组件带入，也许在 v 0 中构建原型，然后您想，嗯，在 Replit 中改进它。嗯，您可以以同样的方式移动东西。
>> 好的。那么，还有什么呢？是的。
>> 是的。我还让它根据您的东西生成了一个小的规范。所以，让我关闭这个一点点，看看我们有什么。所以，我只是让它生成，您知道，一个 MD 文件来重建您的东西。基本上描述了需求，这样我就不必重写所有内容了。所以，这目前是一个原型应用程序。我们将重建它。我将删除一些嗯，或者修改一些。具体来说，我将说组件在 Peter components 中，因为我们刚刚创建了那个文件夹。是的，我将删除您已经拥有的很多后端服务的东西。
嗯，因为我们可以自己清理一些东西。其余的看起来都不错。哦，是的，它自动提取了您的提示，这很好。
>> 是的，我认为差不多了。所以，我将再次删除一些东西。是的，我们将删除很多这些额外的东西。这有很多代码，只是我不需要的东西。我只需要这上面的部分。这将成为我的提示。所以，我将基本上把这个带到我们的，您知道，实际应用程序，然后扔到云端。我，我的意思是，您已经完成了关于云代码的教程，所以我可能不会花很多时间来解释云代码。但我会先将其置于计划模式。嗯，这样我就可以确保我们得到的结果，您知道，与我们期望的一致，然后再开始。
>> 好的，太棒了。嗯，好的，所以，所以，只是为了回顾一下，您将一些组件文件拖放到您的模板中。
>> 是的。您在我原来的存储库中，您让 Claude 生成了一个 MD 文件，并且提示是，嘿，您知道，如果我想在别处重建这个，我需要什么，对吧？
>> 是的，没错。
>> 好的，然后，然后它神奇地在 MD 文件中包含了一个提示。
>> 是的。是的。它只是提取了所有，嗯，我想说所有重要的东西，可能还有很多不重要的东西。嗯，所以，您可以看到我删除了，它有 800 行，因为 Claude 喜欢说话。我认为我把它缩减到了 80 行。嗯，我只需要规范，我不需要，您知道，整个东西，您现有的所有代码。是的。是的。
>> 明白了。明白了。好的。
>> 所以，让我们快速通读一下。实际上，我认为这将非常有趣，可以说明原型和我们实际在生产应用程序中的区别。所以，它说的第一件事是我们需要更改数据库架构，对吧？所以，这是我们在数据库中存储信息的方式。让我看看我是否能快速运行一些东西，让它感觉更真实一点。嗯，给我一秒钟。很酷。所以，这是一个数据库浏览器，如果您使用模板或我使用的相同技术或您知道的工具，您可以在本地计算机上运行。所以，当我们谈论更改架构时，我们指的是，就像现在在这个数据库中，没有地方可以存储与这些要求相关的任何信息，对吧？就像我们有待办事项列表的条目，我们有用户信息，比如我的电子邮件和我的 ID，我们有文件存储，仅此而已。所以，Claude 告诉我们的第一件事，也是您需要做的非常常见的事情是更改数据库。所以，我们需要一个说我们需要一个头像表。我们还需要一个积分表来跟踪用户积分。嗯，我可能会稍微修改一下计划，因为我实际上并不关心跟踪用户积分。所以，我将说至少现在不需要跟踪用户积分。然后，让我们看看还有什么。我们有需要构建的后端路由。您将看到一些好东西，对吧？所以，我们将需要身份验证。这是一个关键的事情，每当您构建一个全栈应用程序时。每个后端端点都应该检查用户是否已登录，以及他们是否被允许执行此操作。是的。
>> 对。所以，这是另一个主要区别，介于一个简单的原型和一个真实的东西之间。嗯，然后看起来其他一切都差不多，对吧？嗯，所有那些东西。我将说，我们不需要将图像上传到 Firebase 存储。所以，暂时不要将您的文件存储在 Firebase 存储中，以保持事情更简单。用于文件存储。嗯，看看还有什么。然后是前端集成。它将为头像构建一个页面。嗯，它将使用我们已经拥有的现有组件。集成身份验证，所有这些好的东西。积分检查。嗯，付款集成。所以，我们已经有了付款计划。它将每月免费提供三个头像。这没关系。嗯，Gemini 集成，文件存储集成以长期存储文件。我将为了节省时间而跳过这个，但显然，我们希望长期存储图像，对吧？为了用户。
>> 是的。是的。
>> 然后，也非常重要，单元测试。所以，以防万一人们不熟悉，通常您会想编写单元测试来测试代码，这样您就可以自动运行这些测试，这样，嗯，当 AI 更改时，您可以测试是否出现问题。所以，单元测试是一种避免手动测试的方法，对吧？
所以，它也会为我们编写一些单元测试，然后实际应用数据库迁移更改。所以，基本上，这意味着我们将拥有新的代码，但我们实际上需要将该代码应用到数据库，以使数据库具有不同的架构。我们不能只是让代码与实际数据库不同。我们需要应用这个更改。
>> 明白了。是的。
>> 嗯，是的，差不多了。所以，我将开始启动它。嗯，我只会说给我一个更新的计划，然后继续。所以，您将，您将一次性完成所有这些步骤，还是？
>> 嗯，我的意思是，我将尝试让 Claude 一次性完成所有这些步骤。是的。老实说，这个变化似乎有点大，但实际上并不大。它只是一个 Gemini 集成。嗯，是的。顺便说一句，拥有这样的模板的一个很酷的事情是，您不必使用我的模板，总的来说，Claude 正在做出更好的决定，因为代码库中已有的模式，嗯，关于事情是如何工作的，对吧？就像它没有推断出后端应该如何设置，或者推断出测试应该如何设置。它正在查看事情如何设置的示例。所以，这使得像这样的更改变得容易得多，感觉很复杂，但实际上只是复制现有的模式。
>> 很酷。嗯，让我快速浏览一下。好的。嗯，我不会读完整个内容。所以，希望，希望它有效。所以，我们将说“是”，然后它会做它的事情。
>> 您正在使用 VS Code，对吧？只是因为它有一个 C call 代码的原生集成。
>> 是的，它只是比终端，嗯，从用户体验的角度来看更好一点，对吧？所以，您会得到这个漂亮的 Markdown 编辑器。嗯，您可以在底部的文本，输入文本中上下滚动。所以，它只是更干净一点。
>> 是的，那确实更干净。
>> 是的。
>> 嗯，好的。所以，它现在将运行一段时间，对吧？
>> 是的。正如您所看到的，我们有大约十几个待办事项需要处理。所以，这可能需要一分钟。好的。所以，让我们，让我们谈谈其他事情，而它在做它的工作。
>> 所以，让我们回到您的，嗯，确切的绘图。是的。好的。所以，让我们谈谈。我们之前有一个关于我们最喜欢的 AI 编码工具的视频，对吧？
>> 是的。
>> 但是，但是现在我认为外面有很多东西，而且，嗯，我认为您准备了一些关于这些原型制作 Vive Code 工具之间差异的图表。
>> 是的，没错。所以，嗯，我想从一些非常流行的开始，Lovable 和 Bolt 是现在的一些其他工具。它们都使用 Superbase 作为后端。所以，即使这很有趣，对于那些不知道的人来说，Lovable 和 Bolt 刚刚宣布了他们自己的云，对吧？所以，就像字面上，我认为是一周前，或者可能两周前，他们说，“哦，是的，您可以直接与我们自己的后端服务集成。”实际上发生的是 Superbase 发布了一个功能，允许公司在他们的产品中进行 Superbase 的白标。嗯，所以，它仍然是，它仍然是字面上的 Superbase，即使您查看代码，它也直接引用了代码中的 Superbase。
嗯，所以，
>> 所以，这只是一个品牌的事情。
>> 这是 100% 的品牌的事情。在功能、功能或任何方面，Bolt 集成 Superbase 或 Lovable 与您今天拥有的之间，在功能、功能或任何方面都没有任何区别。它完全相同。
>> 有趣。
>> 是的。这有点好笑，因为，嗯，这些公司针对的人群，他们可能根本不知道云或 Superbase 是什么。
>> 是的，有点，
>> 我同意。我认为这只是，嗯，我认为很多都是竞争，就像“哦，这是最好的工具，因为我们有自己的后端”或者“这是最好的工具，因为我们有最好的 Figma 集成”。
嗯，但无论如何，这些工具中一个有趣的事情是，特别是使用 Superbase 作为后端，默认情况下，它们实际上没有服务器。所以，如果我们回到我们刚才谈到的模式，
>> 它们的工作方式基本上是 Superbase 为您控制服务器。所以，这里有一个小的薄层，嗯，您数据库中的每个表都会自动获得一个相应的 API 端点。基本上意味着它们会自动生成服务器，但您不控制该服务器。所以，一方面这非常有趣和酷，因为这意味着您不必编写任何服务器端代码，对吧？另一方面，其中一个缺点是您无法修改任何服务器端代码，因为它会自动生成。
嗯，所以，特别是从安全角度来看，这会成为一个问题。所以，他们有一个叫做 RLS 的系统，它基本上是一个配置系统，用于谁应该能够访问什么。嗯，因为服务器通常会在我们正常的堆栈中处理这个问题。它会决定，用户是否被允许执行此操作。嗯，但在这种情况下不存在。一个非常有趣的事情是，默认情况下，您设置的每个 Superbase 项目的 RLS 规则都是完全开放的。所以，任何用户都可以访问任何信息，而这正是您听到关于 Vive Code 工具不安全的原因的主要驱动因素，因为人们正在基于这个系统构建，而他们根本不知道 RLS 或任何这些东西甚至存在，并且他们已经基于它构建了，或者如何修改或改进它，对吧？就像如何正确配置它一样。所以，他们正在构建这些系统，这些系统并不安全，因为，您知道，不是 Superbase 本身不好。只是，嗯，
>> 您不知道幕后到底发生了什么。
>> 等等，等等。所以，所以，RLS 是什么意思？或者这是一个缩写吗？
>> 是的。嗯，您知道吗？我一时想不起来，但它有点像，它就像规则和某种基于规则的访问系统。
嗯，
>> 好的。然后，然后如果我，有没有什么设置或东西让我改变这些？是的，没错。所以，在这些工具中，嗯，如果您提示它们询问您的 RLS 规则，它们会告诉您是什么，但默认情况下，它是完全开放的，然后您必须正确配置它。所以，一个像 Lovable 添加了一个东西，就像如果您发布您的应用程序，它们会弹出一个警告说，“嘿，现在任何人都可以访问您产品中的数据。您想，您想改变它吗？”嗯，然后您基本上尝试通过提示来获得这些规则，但同样，您依赖于 AI 来正确配置它。
嗯，这有点可怕。
>> 这太疯狂了。疯狂。所以，好的。所以，如果我使用这些工具构建一个应用程序，然后，嗯，比如我有一个用户表，里面有用户信息，对吧？因为人们会注册等等。
>> 所以，您是说任何人都可以获取所有用户的电子邮件？
>> 是的。是的。是的。默认情况下。是的。
>> 这太疯狂了，伙计。
>> 所以，它要求用户，嗯，项目作者，您知道，用户级别或 Bolt 来修改这些规则并正确设置它们。嗯，但我的观点是，使用这些工具的大多数人不知道这些规则甚至存在，对吧？
>> 但是，为什么 Lovable 和 Bolt 不修复这些东西呢？他们不知道哪个表是哪个表，还是什么的？
>> 嗯，更多的是，这就是 Superbase 的工作方式，因为他们试图通过不让您拥有服务器来使其简单化。您仍然需要一个服务器才能访问数据库中的数据。所以，这是简单版本，就像您使用规则系统而不是实际的代码一样。嗯，但同样，我认为它实际上更复杂，或者对普通人来说更难理解，而我认为，如果您拥有这个，嗯，它会变得更清楚，如果服务器有问题，问题出在哪里。
>> 是的。我的意思是，嗯，我认为设置服务器并不难，对吧？尤其是有非常强大的模型可以为您完成。
>> 是的。不，不，一点也不难。嗯，好的。托管也很简单，所有这些事情，对吧？您可以在 Vercel 或 Render 上托管。甚至 Replit，就像这是 Replit 在后台使用的堆栈一样。
嗯，所以，我认为 Replit 是，嗯，这就是我更喜欢 Replit 的原因之一，不是因为，嗯，AI 编码工具或任何东西。它实际上是，嗯，他们使用的是什么堆栈，以及一个人犯下他们会非常后悔的错误的几率有多大，
>> 对，
>> 对，
>> 哇。
>> 是的。是的。是的。这很有趣。我的意思是，我前几天在 Lovable 上构建了一个应用程序，它运行得很好，但是，嗯，我知道我必须进去并配置 ROS 规则以确保一切都正确。所以，您知道，
>> 哇。好的。好的。嗯，也许我们应该给 Lovable 的人发邮件。
>> 哦，他们都知道。他们都知道。嗯，是的，如果您再次阅读任何关于 Vive Code 工具不安全的内容，
>> 是的。
>> 嗯，这就是主要的安全性漏洞。人们会犯很多其他错误，
>> 但这是主要的。
>> 哇。好的。好的。好的。我有一个大胆的看法。就像，我觉得即使作为一个完全不懂技术的人，我也不认为像 Clock Coder 或 Cursor 或这些更高级的工具实际上很难使用。就像，您只是在打字聊天，对吧？
>> 是的。
>> 我的意思是，我认为它们实际上并不比这些基于 Web 的工具难用多少。
>> 是的，我绝对同意。我认为，嗯，再次，就像 Lovable 或类似工具的工作的一部分是说服您复杂性很低，这样您就会觉得您可以做到。
>> 是的。对。但是，再次，如果我们回到，就像上面的图片一样，在某个时候，您需要添加付款，并且他们有一个 Stripe 集成，但您仍然需要进入 Stripe 并设置所有内容。您必须添加电子邮件。您必须添加，嗯，如果您不了解这些系统如何工作，我认为最终，当您的电子邮件系统出现错误时，而您唯一能做的就是提示 Lovable 说“修复我的电子邮件系统”，那就是挑战所在，对吧？所以，嗯，不是试图劝阻任何人从事这项工作，因为显然我认为每个人都应该尝试学习，但同时我认为重要的是不要把它当作，“我希望尽快达到结果。”
>> 是的。
>> 我根本不在乎任何东西是如何工作的，而是说，“好的，它实际上是如何在后台工作的，并尝试学习一些东西。”
>> 明白了。好的。酷。您想检查一下 VS Code，看看是否生成了东西吗？
>> 是的。嗯，所以，让我们看看。我们需要生成并应用数据库迁移。所以，这实际上很有趣。嗯，我们在这里卡住了。可能很久以前就请求了权限，但是，它要求我们对数据库进行更改。这又是另一个非常好的模式，因为通常发生的情况是，大多数 AI 编码工具会直接修改您的数据库，这很可怕。这个工具所做的是，它生成一个文件来告诉我们它将要更改什么，然后我们应用这个更改，它使我们的数据库始终保持同步和最新变得容易。所以，这叫做迁移。再次，这是您想要学习并持续做的一种模式，而不是仅仅允许 AI 代理编写 SQL 查询来修改您的数据库并随时更改任何内容。这有点可怕。再次，这是默认模式。
>> 嗯，是的，因为如果您擦除 UI，您可以很容易地恢复它，但是擦除数据库更难，对吧？
>> 是的。是的。即使有撤销功能，我知道很多人依赖于尝试和撤销。嗯，您无法像撤销代码更改那样撤销数据库更改。
>> 嗯哼。
>> 对。所以，总的来说，您希望对，您知道，事情会奏效更有把握一点。
>> 是的。所以，所以，所以您不会危险地跳过权限。
>> 不，不，不，我不会。嗯，很酷。所以，它将运行这个。我可能需要注意一会儿，因为它会安装一些东西。嗯，
>> 好的。您有一个数据库。它之所以这样做是因为您已经用您的模板设置了一个数据库，其中包含一些基本表。
>> 是的，没错。是的。所以，我们有一个数据库，它包含用户存储信息，它包含 Stripe 集成。所以，它存储，嗯，相关的 Stripe ID 等等。所以，再次，模板就在那里。它不是，我不会声称它是先决条件，当然，您不需要它。嗯，但它的目的是，嗯，帮助人们避免常见的错误，尤其是在安全方面。也许这很有趣，当我们等待的时候。实际上，我让渗透测试人员，或者让模板经过安全公司的渗透测试，嗯，在我把它交给任何人之前，只是为了好玩。
>> 什么是渗透测试？
>> 哦，当然。是的，好问题。所以，基本上，嗯，它是一个，它就像一个安全审查，他们试图从您的网站或您的应用程序中提取信息。嗯，有很多非常常见的攻击模式，攻击者会使用这些模式。所以，他们会针对您的应用程序运行所有这些攻击模式，看看他们能，基本上能利用什么。嗯，然后在最后，他们会给您一份报告，关于，嗯，您需要更新或修改什么才能确保安全。
>> 做渗透测试是不是很贵？
>> 嗯，要几千美元。
>> 好的。好的。哇。好的。所以，您必须认真。是的。
>> 是的。是的，对我来说，如果我要把代码交给人们，那么，您知道，就像我的模板乘以一千或两千或五千倍一样，嗯，花几千美元来确保我给人们的是安全的代码是值得的。
>> 嗯，对于普通人来说，可能有点难以企及。
>> 明白了。好的。
>> 好的。我们回来了，这是我们拥有的。所以，它实际上将其添加到了导航栏，对吧？它不一定取代了我们拥有的东西。没关系，我们可以，您知道，稍后要求它删除一些东西。嗯，但理论上，所以，让我们快速看一下 UI，然后我们将尝试看看它是否真的有效。嗯，所以在定价方面，它似乎没有更新我们的定价页面。
所以，没有头像。我在这里看不到任何东西。没关系。但是，在头像这里，我们确实有一个本月使用次数的计数器。让我们试试。您会注意到的一件事是，它正在使用您的组件，对吧？所以，那部分奏效了。
嗯，所以，我们将点击选择图像。我们将选择我们的图片。我们有这个人在这里。生成头像。然后，我们将看看它是否有效。很酷。好的。所以，新的错误。嗯，生成失败，不支持。所以，这很可能是因为我们没有提供正确的文档。再次，这就是一些调试显然有帮助的地方。所以，如果我们看看这个，我们可以看到它说 Gemini 2.0 flash XP 图像预览。所以，这很可能是您之前遇到的问题，Peter，就是，它没有使用正确的模型，
>> 对，
>> 嗯，所以，我们将继续，是的。嗯，这实际上是 LLM 的一个非常常见的痛点，就是它们没有最新的信息，对吧？就像训练截止日期，
>> 然后，它们不知道一切是如何工作的。嗯，所以，我们将不得不去查找 Gemini Nano Banana 文档。嗯，让我们看看这个。我们将要提供相关的文档，并要求它更新。所以，我们正在做图像到图像编辑。我基本上将复制文档，粘贴在这里，然后说，嗯，您正在使用错误的模型。再次，我将打开计划模式，因为老实说，我几乎从不，我不知道您是否这样做，但我从不先不进行计划模式就启动它。我总是计划和实施交替进行。
>> 是的。
>> 嗯，我只是不喜欢让它自己做很多事情的想法。我不知道它在做什么。
>> 好的。[鼻息声] 嗯，但是，SaaS 的其他部分是否有效，比如身份验证和所有这些？它应该是一样的，对吧？
>> 是的。是的，它仍然有效。所以，我们可以，我们可以再回到那里看一眼。嗯，所以，让我们去这里。所以，我们可以登出。我们可以登录。我们可以稍后看看我们的定价页面。在这里，我们可以打开。我们可以升级到专业版。我显然不会真的升级，但我们有我们的定价设置在这里。如果我们想更改它，这只是 Stripe 中的一个设置，我们更改它。我们实际上不会更改任何代码。嗯，是的。
>> 好的。但是，要让这个付款的东西对我的东西起作用，我必须输入我自己的 Stripe 信息。
>> 没错。所以，您必须输入您自己的 Stripe 密钥，这只是 ENV 文件的一部分，就像我们为 Google 提供的 API 密钥一样。您只需输入您自己的，嗯，环境变量。
>> 好的，明白了。
>> 是的。嗯，很酷。好的。所以，它将基本上清理我们的服务器。错误的包，错误的模型，所有这些东西。所以，是的，如果我们一开始就提供文档，我们本可以避免这个问题。但没关系，我们会很快清理干净。
>> 我不知道，伙计。我花了大约 20 分钟才让这个东西工作起来，所以也许我运气更好。
>> 是的。我也做过这个。嗯，有点像，嗯，头像的东西，通常它只是犯了不使用正确最新信息的错误。嗯，我实际上部分是故意这样做的，因为我认为让人们看到循环很有用，就像我们尝试了一些东西，它坏了，我们读了它为什么坏了，对吧？它实际上给了我们一个非常有用的错误消息，如果您只是读它。嗯，立即发现了问题，找到了修复它的相关信息，粘贴进去，然后再次尝试。
>> 是的，所有这些安装东西，或者，嗯，选择正确的版本，这就像这些指向工具的麻烦。
>> 是的。是的，当然。顺便说一句，有些人可能在看这个，然后想，“哦，哇。这比 Lovable 或 Bolt 或类似的东西要难得多。”嗯，我会说，总的来说，我同意它更具挑战性，但我也认为，嗯，一个是你正在学习事物实际上是如何工作的。嗯，这很好。然后，二是，嗯，我认为那些工具确实有一个门槛，那就是，让我们说，更低。所以，您无法像使用这些更像强大的工具那样走得远。
>> 我的意思是，您在使用 Lovable 或 Bolt 时也会遇到同样的 API 问题，对吧？因为它们有相同的模型。
>> 是的。没错。是的。是的。是的。
>> 嗯，我确实比 Lovable 代理和 Bolt 代理更喜欢云代码。但是，是的。
>> Bolt 最近切换到了，我认为 Bolt 现在您可以使用云和代码代理。
>> 是的。在 Bolt 内部。是的。这通常是一个非常酷的决定，就像尝试走那条路一样。
>> 是的。
>> 是的。让我们看看我们有什么。
>> 好了。
>> 很好。
>> 我们有我们的头像。所以，理论上，我们现在有了，我的意思是，我们可能想删除模板中的一些东西，对吧？就像 AI 聊天和其他一些东西。嗯，但我们现在有了我们的专业头像编辑器。我们必须，嗯，做一些基本的提示来放入我们自己的 Logo 等等。嗯，也许重新排列一下页面，但是，嗯，是的，我们这个月用了一个，还剩四个。
>> 哦，您必须使用我最好的模板。您没有使用我最好的模板。
>> 那是什么？[笑声] 您想让我重新开始吗？
>> 不。是的。您能再上传一张照片吗？
>> 当然。嗯，让我们试试。所以，让我们，嗯，
>> 您得到了第三个。右边的那个。
>> 第三张。行政肖像。好的。好的。嗯，
>> 好了。
>> 但是，是的，我们还将您的过去头像存储在数据库中，稍后我们将看看数据库。嗯，这是我们的行政头像。好了。
>> 那看起来不错。是的，那看起来，[笑声] 不错。
>> 是的。所以，是的，让我们看看数据库，让我们刷新一下，看看我们有什么表。对，所以，我们现在有了头像表。我们有了新表。
>> 它存储用户 ID 和样式。嗯，还有其他什么吗？也许就是这样。等等。嗯，好的，明白了。那就是这样。好的，明白了。
>> 是的，我认为这是我对数据库的唯一更改。嗯，只是存储他们，嗯，过去使用该工具的历史记录。如果我们回到这里，我们可以看到下面，这就是它显示的方式，对吧？我们过去的头像。正如我提到的，我现在不存储图像。我只是想这样做是为了节省一点时间。但理想情况下，我们也会存储图像文件。
>> 但是，嗯，我怎么知道要开始存储这些东西呢？这是您的一部分，嗯，是的，所以，部分，部分模板包含了所有这些，嗯，数据库访问模式。
>> 好的。
>> 已经存在于代码中了。所以，总的来说，当您输入提示时，它将遵循已有的代码。
>> 好的。
>> 所以，它只是，它只是按照所有现有的模式设置它，一切都有效。所以，这就是为什么，嗯，在现有模板上一次性完成某件事比从头开始一次性完成某件事要容易得多。
嗯，因为所有这些东西都已经奏效了，而且一切都奏效了。还有一件事，只是为了好玩，我们可能时间不多了，但是，嗯，让我把它拉上来。我还连接了产品分析。
所以，我们可以看到，嗯，我们每天的活跃用户数量以及他们访问的次数。
而且所有这些好东西，嗯，都已经包含在模板里了。所以就像我说的，你知道，你可以加入所有这些第三方集成，以及所有那些好东西，嗯，让它[鼻息声]更像一个真实的产品，而不是像，你知道，一个随随便便写出来的东西。>> 所以基本上，让我们来回顾一下构建真实产品的步骤，好吗？>> 当然。所以，首先，我们要使用你神奇的模板，对吧？[笑声]>> 我会说使用模板是个好主意，而且网上有比我的更多的模板。所以，你知道，找一个你喜欢的，但是，嗯，是的，模板是个好主意。>> 好的，我们会把你的模板或你的课程链接放在下面，但我认为也有免费的模板，对吧？这不仅仅是纯粹的卖你的课程。实际上有免费的SaaS模板，对吧？>> 是的，没错。是的，我的意思是，如果你想用我的，那显然是一个选择。它包含在课程中。嗯，但是也有免费的你可以用。>> 然后就像在GitHub上搜索或者什么的。>> 是的，我的意思是，Vercel有一些非常好的。嗯，但是如果你通常如果你说，看看谷歌，技术，它会是，你知道，Next.js样板模板或Node React模板，嗯，它会包含所有东西。>> 好的。明白了。好的。所以第一点是使用模板。第二点是，就像在模板中开始构建，使用，你知道，嗯，一些，一些，一些，光标或者VS Code或者什么的。对吧？>> 而你现在偏好的组合是VS Code加上Codeium。>> 是的。>> 是的。是的。是的。我知道我们在这里演示了Cloud Code，它效果很好，但我现在更多地使用Codeium，特别是对于大型代码库。我发现它效果更好。嗯，但是两者都可以。我认为Cloud Code或Codeium都可以。>> 好的。然后第三点是，嗯，只是添加一堆API密钥，对吧？对于，就像，嗯，就是这样吗？>> 嗯，我的意思是，我想这取决于你想做什么，但是，是的，所以你需要你的Stripe密钥，嗯，用于支付。我猜你想要那个。嗯，你需要你的OAuth东西，嗯，用于你的Google登录，对吧？嗯，如果你处理任何文件，你可能需要文件存储。所以，是的，有几个密钥你需要为这些东西添加。>> 明白了。然后，然后你如何把这一切放到互联网上？你如何>> 啊，是的。好问题。是的。所以通常我使用一个叫做Render的服务进行部署。嗯，所以我们会做的是，我们基本上将代码同步到GitHub。我们会将其提交回GitHub，然后Render会在我们每次在GitHub上进行更新时自动部署它。所以这是一个选择。另一个选择是，如果这感觉太复杂了，你也可以在Replit中使用这个模板，而我的很多学生现在在我的课程中都在这样做。所以他们甚至不做任何本地设置。他们只是将模板导入Replit。Replit为他们提供数据库。Replit为他们提供服务器。他们点击一个按钮就可以发布。嗯，所以他们得到了两全其美。>> 他们是先将模板导入Replit，还是将整个，整个应用程序导入Replit。>> 是的。就像，我我们修改过的整个模板，他们将整个东西导入Replit。>> 好的。好的。明白了。好的。明白了。好的。是的。>> 太棒了，伙计。好吧，看起来我得再上一次你的课了。[笑声]>> 是的。其中一个，只是为了宣传一下，你知道，这是我的工作。嗯，课程还附带专门的工程支持。所以我知道这是一个很多人面临的挑战，我真的尽力去消除所有的障碍。所以，正如我提到的，模板经过安全渗透测试。嗯，工程支持。你有一个模板，所以你不需要自己去解决Stripe集成问题。然后显然，这是一个为期八周的课程。嗯，所以你有充足的支持和其他学生，以及所有那些好东西。所以，是的。>> 太棒了，伙计。让我，让我在这里结束，伙计。如果你在上Colin的课程，你应该真的，上课的目的是真正地构建一些东西，并希望，你知道，从你的软件工具中赚到一些钱。对吧？>> 对。就像，你知道，不要，不要，不要只是为了获得证书而去上他的课，你知道吗？>> 是的。>> 所以请记住这一点。>> 是的。也许我说这个不好，但我实际上并不特别喜欢证书，尤其是在产品或技术领域，作为一种提升你职业生涯的机制。我认为经验让你变得更好，对吧？就像技能。嗯，所以这是主要的事情，就是学习技能，然后获得物质成果，比如自己构建一个能带来一些收入的副项目。>> 那比拥有一个证书酷多了。所以至少是我的观点。>> 但我们去了，看我的SaaS应用生成证书，伙计。[笑声]>> 是的，你看。>> 不，我只是开玩笑。>> 是的。>> 酷。好吧，伙计。嗯，再次感谢你来。这是一次很棒的聊天。是的。>> 而，是的，如果你想找到Colin，你可以在LinkedIn上关注他。>> 对吧？>> 是的。>> 还有其他地方可以关注你吗？>> Substack。是的。实际上，我有一个自己的播客。如果你想看人们构建SaaS应用，我现在采访他们。主要是PM。>> 好的。>> 嗯，所以，它现在在YouTube上叫做Built with AI。我得把Spotify的东西弄上去，但如果你有兴趣，你可以看看。>> 而，我们也有一个社区，对吧？>> 哦，是的。我们当然有。是的，还有那个。嗯，我们有，我想我们现在快700人了，这很酷。>> 是的。所以，注册我们的新闻通讯，如果你想加入我们的社区。>> 酷。>> 好的。嗯，是的，我想就是这样了。非常感谢你，Colin。>> 好的。