DLAI-Replit-氛围编程笔记-全-

DLAI Replit 氛围编程笔记（全）

001：课程介绍

欢迎来到与Replit合作推出的《氛围编码101》课程。在本课程中，你将学习如何使用Replit的AI智能体进行编码。

Replit提供了一个云端环境，允许你构建、托管和分享应用程序。Replit最近增加了一个非常受欢迎的编码智能体，它能快速生成和托管基于Web的应用程序。

编码智能体正在改变我们编写代码的方式。我本人仍然进行相当多的软件开发，但现在我发现我可以依赖大型语言模型为我编写大部分代码。我会将一个问题分解成可管理的模块，然后花时间创建提示词来描述我想要什么，并使用模型一次生成一个模块的代码。这种流程让我和许多其他人成为了更高效、当然也更快速的开发者。

需要说明的是，由于Replit是一个云端托管环境，我们无法在我们通常的平台上呈现本课程，因此这是一个纯视频课程。如果你只观看视频，你将学习使用编码智能体的核心概念，以及使用大型语言模型编写代码的流程。有时你几乎不需要看代码本身，这种模式现在有些人称之为“氛围编码”。

除了观看视频，如果你想使用Replit，你需要在Replit上创建一个用户账户。

我很高兴本课程的讲师是Replit的产品副总裁Michaela Catasta，以及开发者关系主管Matt Palmer。谢谢，Andrew。我们非常兴奋能呈现这门课程。那么，Michaela，告诉我，你如何看待AI编码智能体的兴起对开发带来的改变？

AI消除了许多阻碍用户构建和部署应用程序的障碍。首先，Replit提供了一个强大的代码编辑器和一个通用的包管理器，因此你无需费力安装Python和JavaScript包。源代码控制由Git驱动，但我们为用户尽可能地简化了它。此外，Replit还提供15种存储、数据库和部署解决方案。但现在有了Replit智能体，任何没有编码经验的人都可以创建应用程序并将其公开部署。整个过程可能只需要几分钟。即使你不了解我刚才提到的许多术语，你仍然可以构建一个应用程序。Matt将在本课程中展示具体如何操作。

如今一个流行的术语是“氛围编码”，即你倾向于让编码智能体承担大部分繁重的工作。我们将最大化智能体的能力，但同时也会展示一些规划如何能在此过程中改善你的结果。你将学习一些技巧和窍门，以从我们的智能体中获得最佳效果。

我们将从构建一个搜索引擎优化分析器开始。这是一个基础应用程序，将帮助我们入门并介绍一些关键概念。然后，你将构建一个“一对一投票”应用程序，它将展示整个课程中的数据提取和存储。我们将学习Web应用程序的基本构建模块。我想你会惊讶于你能构建多少东西，我自己就深有体会。

为了培养你使用编码智能体的直觉，Michaela还将分享一些关于Replit智能体如何构建的细节。我希望他们在构建Replit（它本身就是一个复杂的智能体工作流）过程中学到的一些经验，也能为你如何构建其他智能体AI应用程序提供有用的见解。是的，我们在过去一年中学到了很多，我很高兴能分享这些。许多人已经完成了这门课程。我要感谢来自DeepLearning.AI的Blanca Li、Harrison Salami和Jeff Laway。

好的，让我们在下一个视频中开始第一课。

002：课程概述与核心原则

在本节课中，我们将学习如何利用Replit平台及其AI工具进行高效的“氛围编码”。我们将探讨与AI协作的核心概念、关键策略，并熟悉Replit的基本操作。

概述

氛围编码的核心是借助AI代理和工具来编写代码，而非完全手动编写。这能极大提升生产力，帮助你将脑海中的想法转化为部署在互联网上的真实应用。然而，这种开发方式受限于开发者体验，即开发应用所使用的工具、技术和环境。本课程旨在帮助你克服这些工具的复杂性，充分利用它们来构建最佳应用。

核心原则

在开始之前，了解一些与Replit AI代理成功协作的核心原则至关重要。以下是构建应用时需要牢记的关键策略。

精确与分解

首先，务必保持精确。确保一次只给Replit Agent一个任务。如果你有一个复杂的任务，请将其分解为更小的部分。同时向AI代理发出多个复杂指令，对当前的编码代理来说极具挑战性。

明确与详细

其次，确保你的提示词具体且详细。与人类开发者类似，编码AI代理在接收到清晰、明确的指令时表现最佳。

有条不紊

保持项目尽可能稳定。逐步添加功能，每次编辑后彻底测试，并在出现问题时毫不犹豫地回退版本。

使用新会话

为每个新功能开启一个新的会话。这样，如果需要，你可以更容易地回退到之前运行良好的版本。

及时回退

不要犹豫，及时回退到上一个可工作的版本。如果你不断在不稳定的代码功能上打补丁，最终很可能会陷入混乱，阻碍你取得稳定的进展。

保持耐心

最重要的建议是保持耐心。即使你不具备技术背景，也要尽力在过程中理解应用及其组件。Replit Agent会详细解释其每个操作背后的原理，描述其思考过程以及对代码所做的更改。通过仔细阅读Replit Agent的输出，你将快速了解你正在创建的应用的一切。

审慎采纳

因此，自然地，在采纳建议之前，请花点时间进行审查。一方面，质疑那些不合理的事情；但另一方面，也要相信Replit Agent，它常常能为你面临的问题提供有效的解决方案，让你感到惊喜。

耐心调试

调试时保持耐心，这一点再怎么强调都不为过。这是开发复杂功能过程中的一部分。即使是最好的软件开发人员，大部分时间也花在调试上。Replit Agent每天都在进步，但仍不完美。因此，给予它时间，让它尝试不同的调试策略，这将使你取得超出预期的成功。

上一节我们介绍了与AI协作的核心原则，本节中我们来看看Replit平台及其AI工具如何融入开发流程。

Replit平台与AI工具

你可以将Replit视为开发环境，而在此之上，我们拥有Agent（我们的自动化开发者）和Assistant（用于快速编辑和聊天的工具）。

Replit环境

Replit是一个独特的环境，它与你过去可能使用的其他工具不同。如果你曾需要编写代码或安装代码编辑器，就会知道这需要大量的设置工作：下载软件、在电脑上安装，这还不包括安装包、配置语言和环境。这可能会非常令人头疼。

Replit无需安装，完全在浏览器的一个标签页中运行，并且为每一步都提供了AI工具。更重要的是，它不仅仅是处理包和语言、实现零配置，它还拥有构建全栈应用所需的一切，包括数据库、对象存储、身份验证以及许多其他工具和服务。从这里，你只需点击几下即可部署应用。

Replit之所以强大，是因为你不必花费时间担心设置问题，这将使我们能够在本课程中快速推进。

Replit Agent

在Replit之上，我们构建了Agent（或称Replit Agent），这是我们的自动化开发者。它允许你仅用语音就能从头开始构建和配置整个项目，为你的项目生成和制定计划（正如我们今天将看到的），并对你的代码进行复杂的多步骤更改。

Replit Assistant

不能不提的是Replit Assistant，这是我们用于聊天和快速编辑的更轻量级工具。通过Assistant，你可以与AI就任何主题进行聊天，请求对代码进行快速的一次性编辑，并询问关于你项目的问题。

我们今天将看到一个相当常见的模式：使用Agent来搭建项目框架，使其达到最小可行产品状态并开始运行，然后切换到Assistant来精确调整功能并构建项目的其余部分。

在进入白板讨论环节并探讨一些提示词和氛围编码的基础知识之前，还有一点需要说明。Replit提供免费套餐，本课程的大部分（如果不是全部）内容都可以使用免费套餐完成。你可以在Replit上免费注册，你的第一个项目（在Replit上最多可有三个免费项目）属于免费套餐，并且你会获得一定数量的积分和检查点来使用Agent和Assistant，无需额外付费。

此外，本课程中的所有概念不仅适用于Replit，也适用于任何你使用AI和这些新工具进行构建的场景。

现在，我们将进入白板讨论环节，分解一些我认为对AI和Replit构建特别有用的概念。

氛围编码五大技能

接下来，我们将介绍我在氛围编码中深入思考并真正帮助我将应用提升到新水平的五项技能：思维框架、检查点、调试和上下文。我们将保持简短直接。

我希望你在开始构建这些项目时，将这些技能记在脑海深处，并开始注意其中的一些模式和概念，以便未来能够真正完善你的应用。我认为使用AI进行氛围编码是一个全新的概念，学习它的最佳方式就是动手实践，参加像这样的课程，并进行自己的实验。

1. 思维层次

现在我们来谈谈思维。希望这是你一生中大部分时间都在做的事情。我们可以将思维分解为一定的层次结构。逻辑思维非常重要。我们可以将其比作国际象棋游戏。逻辑思维可能像是问“国际象棋是什么？”这样的问题，而实际下棋则更多地涉及分析性思维。你们大多数人可能都熟悉分析性思维：分解游戏、学习如何玩好、分解问题并学习如何解决它们。

但在谈论使用AI构建时，我想介绍的两种思维是计算思维和过程思维。计算思维的一个例子可能是“国际象棋游戏背后的模式是什么？”，这可能会引导你去做一些事情，比如编写程序来强制执行国际象棋规则。当我们构建AI应用时，我们不仅仅是在逻辑思考，实际上是在创造性或计算性地思考如何将一套逻辑（实际上是一个应用）适配到一个复杂的问题中。

更高层次的思维是过程思维，这可能是编写一个程序让计算机进行竞技性国际象棋对弈。这不仅要求我们理解国际象棋的规则以及如何编程让计算机执行这些规则，还要求我们理解如何编程让计算机在高级别上进行竞技性游戏。因此，这确实要求我们思考：我如何在这个游戏中表现出色？游戏的边界是什么？为了构建这个东西，我需要考虑哪些边界情况？最后，我如何将这些转化为代码，或者转化为自然语言供AI实现？

2. 框架思维

接下来，我想谈谈框架。如果你对框架（无论是语言还是包）没有高层次的理解，不用担心，因为这更多是概念性的。重要的是开始思考你的应用如何工作，这延续了我们刚才在“思维”部分讨论的内容。开始思考你的应用如何工作，我们如何为这些问题实现解决方案，然后思考已经存在的解决方案，因为人们已经编写了大量代码。AI能为你编写代码的原因，正是因为它理解人们编写的代码。

因此，如果你能理解一个问题领域，并开始思考你不知道的事情——也许这意味着询问AI：“解决这个问题的常见方案有哪些？”或者询问AI：“有哪些非常好的包可以帮助我解决这个问题？”——那么你就能理解如何做你想做的事情，或者在这个问题领域中定位自己。

这可能意味着向AI提出这样的问题：“哪些框架允许我做那件事？”例如，如果你想在你的一个应用中实现拖放界面，你可以说：“帮我找出用于在此应用中实现拖放的React框架，然后实现一个。”

以这种方式与AI互动，不仅是学习框架如何工作以及这些东西如何融入语言、包和所有其他结构的绝佳方式，也是更快完成任务的绝佳方式。这就是我完全通过AI学习前端开发的方式：我提出很多问题，试图理解它正在构建的东西，并且在核心上，我试图理解我不知道的东西。这涉及到一个询问AI问题和迭代的反馈过程。

3. 利用检查点

接下来，让我们谈谈检查点。构建中的一个不幸事实是：东西会坏掉。无论有没有AI，这都是事实。事实上，当我们使用AI构建时，这种情况更常见。所以在本课程中，东西很可能会出问题。但一个非常重要的概念叫做版本控制，Replit中的每个项目默认都有版本控制。你无需设置，也无需担心。

正因为如此，我们在使用AI构建时会有检查点。我们将把要构建的内容分块，将其分解为逻辑步骤，然后在短周期内快速推进，并在出现任何问题时利用这些检查点。这意味着，即使我们想尝试一个新功能，即使我们想提示AI、学习或尝试新事物，如果我们的应用中某些东西不能正常工作，我们可以回到旧状态并从上次离开的地方继续。

更广泛的意义在于，这是一种非常棒的构建和开发方式：利用检查点，测试你正在构建的东西，如果可行就继续，如果不行就返回重试。

4. 调试方法

好了，这里还有几个概念要讨论，然后我们就开始构建。首先是调试。正如我提到的，东西往往会坏掉。调试的过程就是找出东西为什么坏掉的过程。这可能看起来有点过于直白，但我保证值得仔细探讨。

如果你有一盏不亮的台灯，你可能会先问：“台灯插电了吗？”如果没有，你就插上电源。如果这不是问题所在，你可能会问：“嘿，灯泡烧坏了吗？”如果是，你就更换灯泡。如果不是，你需要继续调试或寻找其他修理台灯的方法。这与我们构建应用程序时要经历的过程完全相同。

你可能会说：“嘿，这其实有点无聊。”但你可以让任何事情变得有趣。对我来说，当我构建一些让我兴奋或我知道会产生非常酷结果的东西时，调试真的很有趣。因此，最好的调试是有条不紊、彻底，并且从第一性原理出发。

调试的目标是：首先理解我们的应用如何工作，然后理解错误在哪里，接着问自己：“嘿，我们如何才能找到这个问题的根源？”最后一步（这有点跳跃，对吧）是：我们如何告诉大语言模型（LLM）问题所在，以便它修复我们的问题？我们如何告诉Agent问题所在，以便它理解问题？这就是上下文发挥作用的地方。

5. 上下文管理

如果你一直在使用AI或LLM进行构建，你可能听说过“上下文窗口”或“上下文”这个术语。当我们说“上下文”时，我们指的是什么？上下文窗口是LLM在给定时间内可以处理的令牌数量。可以把它想象成你能提供给我们的Agent或模型的单词数量或信息量，它可以在任何一个聊天实例中思考。

我喜欢把它想象成多任务处理。作为人类，如果你让我做一大堆事情，我可能会开始忘记你要求我的一些事情。因此，当我们与LLM聊天时，一个持续的主题是：我们需要确保上下文与我们试图做的事情相关。

上下文可以是我们提供给LLM的提示词，也可以是图像（例如你提供的文档），我们今天将看一些这方面的例子。它还可以是错误、关于你的应用环境的详细信息或偏好设置。这正是我们刚才在调试中讨论的。当我们遇到错误时，我们将不得不尝试将这些错误纳入我们与LLM通信的上下文中，以便我们能克服这些问题，理解问题所在并继续前进，或者让LLM修复它正在做的工作。

非常重要的一点是，因为这些AI模型——为Replit Agent提供动力的底层模型——可能拥有过时的训练数据，或者它们可能是几个月甚至几年前构建的，我们可能需要提供额外的上下文，特别是当我们做一些新的、前所未有的事情时，或者当我们使用一个模型不熟悉的包、库或框架时。

上一节我们详细探讨了氛围编码的五大核心技能，本节中我们将把这些概念整合起来，看看它们如何指导我们使用AI构建最小可行产品。

构建MVP的实践循环

那么，将所有内容整合起来，这对于我们使用AI构建MVP意味着什么？我们将只向AI提供与MVP相关的信息。我们将从小处着手，正如Mackalay所提到的，逐步构建出功能齐全的产品。在构思第一个提示词时，我们将提供基础性的上下文和重要细节。

从那里，我们将开始实现新功能。我们将提供与新功能相关的上下文，提及框架，并提供关于实现的明确细节文档，以确保Agent理解我们想要做什么。我们将进行增量更改，利用检查点，并在出现任何问题或状况时回退版本。

在调试错误、遇到小障碍时，我们将弄清楚事情是如何运作的，找出问题所在，并找出如何将信息传递给LLM以摆脱困境，以及如何引导上下文来解决我们的问题。记住，它们不是错误，只是“快乐的小意外”——如果我能成为氛围编码界的鲍勃·罗斯，我会非常乐意。

这是我们开始构建之前的最后一点内容。在构建时，无论是考虑我们的最小可行产品（MVP）还是向该MVP添加新功能，我们都会从提示AI开始。然后我们将测试我们的应用程序，可能会尝试破坏它，可能会遇到错误，并不得不调试该应用。但一旦我们完成并拥有一个可工作的版本，我们就会到达一个检查点。也许我们不会遇到任何错误，可以直接从测试进入检查点。

但下一步是重复这一切。所以看起来我们通过提示获得MVP或功能，然后进行测试，遇到错误，调试，修复，或者没有错误，然后我们继续下一个MVP或功能。这种反馈循环，这种周期，很大程度上是我在使用AI构建时所遵循的模式。

现在，让我们直接开始吧。我们将快速浏览一下Replit，并开始我们的第一个项目。

快速入门Replit

在进入我们的应用程序之前，我只想快速介绍一下如何进入这个界面。为了看到这个页面（主页），你只需要在 replit.co 上创建一个账户。你可以使用Gmail，可以使用其他账户，也可以使用邮箱和密码，非常简单，然后你就会直接进入这里。这是我们的主页，是我们的概览页面。你可以看到它非常注重聊天，所以这是我们输入提示词与Agent交互的地方。任何时候你想管理你的应用程序，我们都有一个侧边栏，你可以看到你制作的所有应用、已部署的应用，查看使用情况，编辑设置或以其他方式管理你的账户。

但是，让我们开始构建吧。

总结

在本节课中，我们一起学习了氛围编码的核心原则与Replit平台的基础。我们明确了与AI协作时需要保持精确、明确、有条不紊，并善用检查点和耐心调试。我们探讨了计算思维与过程思维在AI辅助开发中的重要性，以及如何通过理解框架和有效管理上下文来提升构建效率。最后，我们介绍了Replit的Agent和Assistant工具，并概述了从提示到测试、调试、建立检查点的MVP构建循环。接下来，我们将动手开始我们的第一个项目。

003：规划与构建SEO分析器

在本节课中，我们将构建一个网站性能分析器。你将学习如何检查HTML内容并理解网站结构，也就是我们将要自动化的核心概念。

在利用Replit的Agent构建第一个原型之前，我们将创建一个产品需求文档和线框图。

规划我们的应用

上一节我们介绍了要构建一个SEO分析器，本节我们来看看如何具体规划它。

我们将构建一个SEO分析器，你可以输入任何网站URL，查看网站的加载时间和标签。我们还将具体解释这些是什么，以及它们为何重要。这使我们能够检查网站是否正确实施，并获得关于SEO最佳实践的见解。

当我们谈论构建PRD或线框图时，指的就是这个。接下来，我们将详细讲解我面前的内容。这是使用一个在线白板工具，我认为它很重要。

以下是应用的核心功能：

  • 它是一个交互式工具，允许你输入网站URL。
  • 查看网站加载时间和标签的可视化表示。
  • 确保我们构建的内容配置正确。
  • 检查网站是否正确实施。
  • 作为延伸目标，我们可能会将最近分析的网站存储在数据库中。

涉及的技能包括：

  • 提示、处理和分析HTML内容。
  • 创建直观的数据可视化。
  • 处理错误和边缘情况。
  • 存储。

可视化线框图

在左侧，我花时间草拟了我们将要构建的模型。

用户交互的主要入口是一个简单的文本框，你可以在其中输入URL。输入URL后，我们希望应用返回关于我们输入网站的建议。例如：“你没有为你的网站设置标题”或“你没有为你的网站设置描述”。这会使谷歌难以找到你的网站，或让人们难以了解你的网站内容。

这些元标签嵌入在每个网站中。因此，当你构建网站或部署应用程序时，考虑这些事情实际上很重要。考虑当人们搜索时你的网站如何显示预览很重要。这就是我们的应用将允许我们做的事情。它将允许我们分析任何网站并访问这些信息。

当我们谈论氛围编码或顺其自然时，进行这个练习并分解我们想要的东西通常更有帮助。将其概念化、可视化，这样我们就不会在没有任何概念的情况下进入工具，或者至少我们能更好地理解我们想要达到的目标。

构建初始提示

接下来，我们看看这如何转化为给Replit Agent的初始提示。

我的提示是：“帮我创建一个交互式应用，以交互和可视化的方式显示任何网站的SEO或元标签，以检查它们是否正确实施。”

请注意第一句话中的领域特定知识。你可能不知道SEO标签是什么，也可能不知道元标签是什么。但AI知道。通过使用这些术语，通过理解框架或理解我们可能不了解的这个领域，我们能够引导Replit Agent构建我们想要的东西。

我们提示的下一部分是：“应用应首先获取HTML，然后根据SEO优化的最佳实践提供关于SEO标签的反馈。应用应提供谷歌和社交媒体预览。”

我认为最后一点很重要，因为我在SEO优化方面做过一些工作。这是我特别想要可视化的东西，因为它可以非常直观。但请注意，我们要求应用获取网站的HTML。这本质上是抓取网站。所以我们要做的是，对于任何网站，我们将抓取它，然后获取其内容。我们希望我们的应用返回反馈，即我们希望获得关于我们所做事情的可操作见解。

因此，我们正在思考我们可以提供给Agent的语言和措辞，以获得这些结果。重要的是要注意，我知道SEO标签嵌入在网站的HTML中。任何人都可以访问它们。这就是我知道这个应用有很大可能成功的原因。

理解SEO标签

为了更清晰地展示我们正在构建的内容，当我们搜索“深度学习”时，谷歌返回的结果实际上是网站的SEO标题。

描述列在下方，我们可以在控制台或页面的实际底层HTML中看到这一点。

如果我点击页面，然后右键单击并选择“检查”，我们将访问所谓的浏览器控制台（或开发者工具）。这看起来可能有点吓人，但这只是网站的底层HTML。

如果你进入HTML的<head>部分，你会看到一大堆东西。你实际上可以看到称为元标签的东西，其中之一是标题：“DeepLearning.AI - 在AI领域开始或推进你的职业生涯”，以及描述：“加入超过700万人，通过我们的在线课程学习如何使用和构建AI”。这些就是我们将要提取的标签，以了解我们的网站是否正确实施。

启动Agent构建

我们已经讨论了我们的提示，回顾了线框图和PRD。现在，我们将在Replit中输入我们的提示，然后点击“开始构建”。

我们将看到一些事情开始发生。因为是我们的第一课，我将讲解Agent如何构建这些应用程序。

从根本上说，Agent与其他类型的氛围编码应用不同，因为Agent会生成一个计划。该计划将帮助我们理解我们正在构建什么，并确认我们正在采取正确的行动，或者我们正在接近我们实际想要的东西。

因此，Agent将分析该提示，并向我们展示一个计划。它将构建初始原型，并询问我们是否希望在初始原型中添加任何后续功能。它还会提及是否使用了任何框架或集成。

我将批准这个计划并开始，然后多谈一点。

需要提到的是，Agent确实附带大量集成。例如，如果你说“为我构建一个使用Anthropic API的应用”或“为我构建一个具有Stripe支付功能的应用”，我们原生支持这些集成，Agent应该在应用计划中提到这一点。

现在，右侧正在实时发生的是，Agent正在设计我们应用的视觉预览。其目标是尽快让你获得可以使用的或可以可视化的东西。

需要注意的是，这不是实际的应用。我们可以看到，它更接近我们的线框图。主要入口点就是这个网站URL。从那里我们将能够分析它。

一旦Agent完成视觉预览，它实际上会在这里告诉我们，它正在创建我们应用的完全交互式版本。在幕后，Agent正在搭建项目结构、安装包、配置你的环境。这就是我们一开始谈到的，Replit不仅仅是Agent和助手，它实际上是一个完整的环境、一个完整的工作空间。

探索工作空间

在Agent继续设置的同时，我将带大家浏览一下工作空间。如果你去左上角，可以查看工作空间中存在的文件。随着Agent继续构建，这些文件将被项目包含的文件夹和目录填充。

再次强调，这很重要，这确实是一个完整的云端交互式工作空间。任何时候，如果你熟悉编程概念，如果你想打开类似Shell或控制台的东西，你可以这样做。我们有权访问它。

如果你不熟悉编程，你也不必做这些事情。我们将完全使用自然语言构建。但需要提到的是，通过顶部的新标签界面或左侧的“所有工具”部分，你可以访问工作空间中可用的所有服务和工具，包括集成Git、安装依赖项、查看输出（我们将详细介绍这是什么）、存储密钥（密钥基本上是一种非常安全的方式来存储无需配置的环境变量）等等。

回到我们的应用，Agent仍在处理完全功能版本，这可能需要5到10分钟。这是我们在构建此应用程序时要指出的另一个重要事项。Agent的设计方式是从头开始构建这些应用到MVP（最小可行产品）。这就是为什么我们保持高层次，并保持提示简单。这些运行可能需要两分钟，也可能需要5或10分钟。

但对于第一次实现，你可以期待一个功能齐全的应用。正如你在左侧看到的，Agent刚刚创建了一个客户端、一个服务器和一大堆其他配置文件。

现在我们看到Agent实际上正在这个交互式窗格中编写和创建文件。我们这样做的部分原因是我们希望尽快让你达到MVP。因此，与Replit Agent的来回交流更少，但在此过程中，Agent将向你展示它正在做什么。

我们可以看到它正在编写这个文件server/routes，它已经编写了我们的客户端index和其他一些东西。现在，深入研究所有这些如何工作并不重要。但可能有用的是开始注意Agent如何创建这些应用，并开始逆向工程这些应用程序的工作原理，因为它可以教你很多关于编程的知识，可以教你很多关于构建的知识。

例如，我看到这里有文件夹：client、server和shared。如果你不熟悉，client通常是前端，server通常是后端。所以点击server会暴露像routes这样的东西是有道理的。如果你不熟悉API，这是一种应用程序进行通信的编程方式，这发生在我们的后端。但在client中，我们可能会看到这个源文件，注意有一个index.html文件，像app.tsx这样的东西可能是我们应用的主要入口点，或者index.css定义了应用的样式。

我想强调的是，你真的不需要看任何这些。如果这对你来说很吓人，就关掉它，别看它。我们将继续进行氛围编码。但如果你在构建这些东西时试图学习和跟随，你可以开始四处看看，开始注意。哦，嘿，Agent定义了这个叫做“社交媒体预览”的组件。我敢打赌，如果我们进入components文件夹，看看里面的东西，GooglePreview可能定义了会向我们展示它在谷歌上可能看起来像什么的预览。

所以，再次强调，Agent将在第一次运行时从头开始创建这个应用，将实现前端和后端。是的，这说了很多，但当Agent运行完毕时，我们将拥有一个可以开始迭代的MVP。它这样做是为了交付一个可以工作的东西，一旦我们的应用程序建立起来，我们可以继续推进或迭代。

这就是我们的工作空间概述。我们将让Agent继续构建，你将能够看到它所做的所有事情，然后一旦我们有了MVP，我们将回来开始迭代。这通常是我使用Replit Agent构建第一个原型时的开发方式。

审查构建结果

很好，现在你会在右侧注意到，我们有了一个已实现版本的应用。我想花点时间深入了解一下Agent的历史记录，看看发生了什么。

正如你在编写应用程序时看到的，发生了一堆文件编辑。任何时候你都可以深入研究这些，甚至可以点击下拉菜单查看具体创建了什么或具体更改了什么。

然后Agent继续并实际安装了我们的应用程序所需的依赖项，以及我在第一次传递时可能错过的一些辅助依赖项。

然后它配置了顶部的运行按钮来执行我们的应用，并循环检查，实际上识别出：“嘿，我们错过了一个包，除非我们安装它，否则这个东西无法工作。”

然后它做了一些最终检查，对我们的存储实现进行了编辑，没问题，重新启动了应用程序并修复了那个问题。

因此，使用Replit Agent构建的一个好处是，你不必担心一些启动时的麻烦，你可以让Agent接手，并从那里实现一些功能。

然后它确认了它具体做了什么和创建了什么。现在，这是了解我们正在构建什么的另一个好方法。嘿，我们创建了一个用于存储和分析这些标签的完整数据模型，我们构建了后端API端点，我们用URL输入、结果概览和可视化实现了我们的前端。我们还做了一堆其他事情。

测试应用

现在我们可以看看它是否有效。我们可以开始调试，开始测试我们的应用。我们在右侧有我们的Web视图，它将向我们显示应用的预览。

需要注意的是，如果你曾经编写过代码，如果你曾经使用过其他工具构建，你可能是在本地主机上做的，这基本上是在你的本地机器上运行东西。这个Web视图看起来会相似，但从根本上说，这个应用，这个Replit应用，运行在一个URL上。所以你可以从任何地方实际访问它。如果我点击这个，它会在新标签页中打开这个Web视图，你可以扫描它并在手机上实时访问它，你的朋友可以在你构建时访问它。

需要提到的是，一旦你离开这个应用，一旦你关闭这个页面，这个URL将进入休眠状态。这不是部署，但从技术上讲，它是一个在互联网上实时存在的开发环境。所以从根本上说，我们正在处理一个真实的网页。

让我们测试一下，看看它是如何工作的。我将输入我的博客网址，看看会发生什么。

我点击“分析”。我们得到一个SEO摘要，86分（满分100分）。我想这还不错。可能像B+或A-。我不抱怨，看起来我们有一些分数。让我们看看这里发生了什么。“Matt Palmer”，没错。“开发者营销简化”，没错。看起来有一个警告：我们的标题标签太短。描述：描述有点短。细节在那里。看起来我们得到了一些最佳实践。所以这和我们想要的非常相似。

我们还有一些关键词建议。我们在那里算是通过了。以及其他一些建议。所以我们的分析器告诉我们的是：嘿，如果我们希望我们的网站在谷歌搜索中显示，甚至可能被LLM索引，我们可以优化我们的标题。我们可以改进描述，让它更长一点。

这真的很棒。我想说它接近我们想要的。看起来我们还有一些社交媒体预览。让我们去看看那里发生了什么。我们有一个Facebook预览，它正在正确加载图像。我们有一个Twitter预览，它也在那里正确加载图像。

我们在这里实现的是这个工具，然后检查以确保我们的网站在社交媒体上正确显示，并且被SEO正确索引。这是一次性完成的，我们所做的就是输入那个初始提示。

让我们用另一个网站试试。输入“DeepLearning.AI”，看看我们得到什么。

好吧，我只想指出我的网站得分更高。我确信在我录制完这个之后，Andrew的网站会有更高的分数。我毫不怀疑他会处理好这个。但只是为了看看一切是否正常，我们确实得到了我们的社交媒体预览，我们也得到了我们的Twitter卡片预览和其他一切。

迭代与改进

这就是我们正在谈论的部分，现在我只是在测试应用，看看它是否做了我期望它做的事情。氛围编码的很大一部分是注重细节，并拥有真正敏锐的产品感。

例如，我不太喜欢这里的间距，83看起来在100上面。那不够好。我们要修复它。我们要让它变得更好。下面的一些其他元素。这看起来不错，但这些没有对齐，“通过”不在这个药丸的中间。

我认为这个网站的其他许多视觉表现真的很好，但使用AI构建的一部分是详细描述什么有效、什么无效以及你想要改变什么。

另一个例子，这个的填充，可能甚至可以有更多的填充，让它看起来更好。关于Web开发的一件有趣的事情是，你希望你的应用具有响应性。所以你可以看到，如果我们把它变宽，填充实际上看起来好一点。

所以这里发生的情况可能是，这没有针对小屏幕进行优化。我们可以通过调整Web视图的大小，或者通过这个方便的小屏幕尺寸切换按钮，看看它在iPhone上的样子，来看到这一点。

也许我们想为iPhone构建这个。所以检查一下很重要，比如，嘿，这些药丸，它们没有按照我想要的方式展开，这些标签页，它们可能看起来有点压缩，所以图标可能没有正确对齐。然后这些图像没有得到相同的宽高比。

再次强调，这可能看起来微不足道，但深入研究细节真的很重要，文本在这里重叠了。

考虑到所有这些，我们有了一个MVP。我们有了一个可以工作的东西。我认为Agent一次性完成它令人印象深刻。

所以现在我们要跟进，修复其中的一些特性。我要说：“让我的应用完全响应。”

这个提示很重要。“响应式”是什么意思？在Web开发中，它实际上意味着你的应用能够响应屏幕尺寸的调整。这将使它移动设备友好。所以说“让我的应用完全响应和移动设备友好”，我们正在使用与Web开发技术同义的关键术语，AI将很好地理解和实现。

所以我要说：“让我的应用完全响应和移动设备友好，并修复一些对齐和填充问题。具体来说，修复整体SEO分数的居中问题，并移除‘/100’。” 我在这里非常具体地描述了我想要编辑的内容。

你可能注意到我要求了几件事。正如我们讨论过的，我们希望这些编辑简洁。但根据我使用AI构建的经验，我们可以这样做：嘿，我想让应用响应式和移动设备友好，我想修复一些其他东西。然后我们可以按回车键，用Agent运行它。

再次运行Agent

我们将再次启动一个Agent运行，我认为你可以期待这个运行得更快一些，因为编辑更小。我将稍微谈谈我们在这里做什么，然后让它完成，一旦完成我们就跳回来。

再次强调，使用AI进行氛围编码，就像要求一个初级开发人员或从未见过你项目的人进行更改。你必须非常具体地描述你想要什么。也许“完全响应和移动设备友好”。修复一些对齐和填充问题，特别是我看到的这个。如果你能做到这一点，Agent拥有所有工具来访问你工作空间上下文中的文件，以理解问题所在并修复它们。

所以你可以看到，嘿，我正在查看Home组件。我正在编辑客户端中的URLForm。我将开始更新ResultsOverview以修复SEO显示并使其更具响应性。

就像这样，我们正在针对其中一些编辑，我们可以希望，这将贯彻并做我们想让它做的事情。

另一个需要提及的重要事情是，当我们要求Agent做这些事情时，它拥有这些文件和目录的所有上下文。因此，它将能够搜索文件，能够准确理解正在发生的事情。

最后一点，你可以实时看到其中一些东西被更新，这很酷。我们现在正在做的是与Agent进行聊天。所以当我谈到上下文，当我谈到与AI交谈并告诉它所有这些不同的事情时，这个聊天中的所有内容都在Agent的上下文窗口中。它拥有所有已完成事情的历史记录。随着这个变得越来越长，你可能会想象AI变得更慢或反应更迟钝。

因此，当我们在处理不同的事情时，创建新的聊天很重要，这基本上会清除上下文或定位Agent的响应。As As的工作方式也非常相似。

所以我们正在做的是创建这个初始聊天，我们得到了一个原型，然后我们从那里进行一点迭代。对于我们的下一个功能，我们可能会切换到一个新的聊天，但这就是我想谈的全部。我们将让这个运行，一旦我们有了结果，我们就跳回来。

审查改进结果

看起来我们已经完成了那次运行。在我们深入研究之前，我只想指出，如果你相对较早地学习这门课程，你可能会看到这个“V2早期访问”的小药丸。我们正在开发Agent的新版本。当你学习时，希望这已经向所有人发布了。你可能看不到这个，你可以假设你拥有最新最好的Agent版本，并且一切都会以同样的方式运行。

现在，我们在这里看到的界面与我们刚才所做的非常相似。Agent改进了应用，返回了它所做的报告，并在过程中设置了一些检查点。

所以注意这些检查点是免费的，你应该在你的那边看到同样的东西。它修复了SEO分数显示，通过响应式布局改善了移动视图，添加了阴影效果和圆角以增强视觉层次感。我甚至没有要求那个，但你可以知道。那实际上看起来很不错。我非常喜欢。

因此，当我们思考框架和设计美丽、引人入胜、有趣的应用程序的方法时，我们可以把它作为一个提示：嘿，这看起来真的很酷。它使所有UI组件适应不同的屏幕尺寸。

测试改进版

那么我们现在做什么？我们要测试它。让我们做同样的事情，输入我们的网站。

好的，第一件事，这很好。它没有在开头添加“https://”，我想要一个网站。所以马上跟进：“让我不必每次都输入‘https://’。” 这是一个非常好的后续操作。我们将把它作为下一个提示的一部分发送。

现在，我将输入我的URL，看看会出现什么。这个对齐得更好，我认为它仍然可以居中。另外，我在右下角得到了一个不错的小提示弹出。

这些药丸现在实际上是对齐和居中的，所以我们修复了那个，这很酷。我真的很喜欢这个的大部分外观。看起来一切都正常，所以我检查社交媒体预览。这些，让我们看看这些看起来更好。如果我在这里调整屏幕大小会怎样？

所以，调整大小。看起来这些是响应式的，宽度显示得更好一些。如果你还记得，这些图标之前有点挤在一起。如果我们回到宽屏这里，我们将选择iPhone 14 Max，我们有点老派了，我们现在用的是16，但这看起来更好，对吧？我们有了一个更具响应性的布局。如果我在我的iPhone上做这个，这更友好。

我开始得到一个看起来设计更好、移动设备友好的应用程序。这真的很酷。我们正在构建工具，构建任何人都可以使用的工具，我们可以用来分析自己的网站，并且它们可以工作，这真的很有趣。

总结与展望

所以我们将这个称为我们应用的V1，在下一课中，我们将为它添加一些润色。我们将通过助手进行一些编辑，真正将我们的应用提升到一个新的水平，也许添加一些高级功能，然后进行部署。下一课见。

本节课总结：
在本节课中，我们一起学习了如何规划和构建一个SEO分析器。我们从定义产品需求文档和线框图开始，然后使用自然语言提示引导Replit Agent构建了第一个功能原型

004：实现SEO分析功能

概述

在本节课中，我们将增强搜索引擎优化（SEO）分析器原型的功能。我们将使用Agent添加核心功能，然后切换到Assistant进行定制和功能扩展。最后，我们将部署应用程序，以便其他人可以在线访问。

增强应用功能

上一节我们构建了基本的SEO分析器。本节中，我们将开始为已构建的内容添加更多功能，使其更具视觉吸引力。

首先，我将创建一个新的Agent对话以清除上下文。我们将要求Agent使应用程序更具视觉吸引力。目前，我们拥有关于网站和标签的所有数据，但唯一的视觉总结是一个整体的SEO分数。我们需要一个能更好捕捉这些标签整体情况的功能，例如提供图像摘要、标题和描述摘要以及高级信息。

我们将把这些需求整合到一个提示中，并要求Agent对用户界面进行更多优化。

以下是给Agent的提示要点：

  • 为每个元标签类别创建摘要，并以视觉方式展示给用户，类似于整体分数。
  • 使应用程序整体上更具视觉吸引力。
  • 允许用户一眼就能获得SEO结果的摘要。
  • 帮助使应用程序对SEO新手来说更直观、更友好，以便他们能快速了解页面实施情况。

同时，我们需要明确告诉Agent，不要移除任何现有功能，只需让高级摘要更容易查看，或让细节更容易深入。

现在，我们让Agent运行并实现这些功能，稍后再查看结果。

查看并评估改进

好的，编辑轮次已完成，让我们看看得到了什么。

我们使用之前的示例进行分析。现在，我们获得了更直观的检查结果展示。界面上生成了关键发现，列出了好的方面（如存在元关键词）和需要注意的方面，以及一些优先建议（如优化标题标签和改进描述）。

我们还获得了一些分类细分，例如SEO和社交媒体优化。系统正在检查标题以及内容在社交媒体上的显示方式。它检查机器人如何索引我们的网站（通常由robots.txt决定），并检查开放图谱标签和Twitter卡片。

我们仍然可以深入查看技术细节，并获得Google搜索预览，这很好。同样，社交媒体预览（Facebook和Twitter）的展示也更清晰、更美观。

如果我们想深入了解SEO建议，会得到一个更具描述性的视图。我们仍然可以看到原始标签，并且有一些不错的悬停效果。

经过三到四个提示，我们得到了一个本质上更完善的应用程序。当然，仍有一些不完美的地方，例如某些间距不理想。但总体而言，我们有了一个更精致的基础。

切换到Assistant进行精细调整

现在还有一些细节需要处理。我们将打开Assistant，对我们刚刚构建的内容进行更精细的调整。当你打开Assistant时，可能会注意到应用程序重启或刷新，这是因为我们正在“离开”Agent模式。

我记得我不喜欢必须手动输入“HTTPS”。因此，我将告诉Assistant（它实际上拥有与Agent相同的应用程序上下文）：能否修改网站输入表单，使其自动填充“HTTPS://”，用户无需输入其他信息？

因为Assistant是一个更轻量级的工具，你会注意到响应速度更快。它将读取相关文件，做出更改，并创建一个检查点。

更改完成后，理论上“HTTPS://”应该被自动添加为前缀。让我们测试一下，输入“deeplearning.ai”并获取结果。

你可能会注意到，地球图标覆盖了“HTTPS://”文本。为了向Assistant提供上下文，我将使用截图工具截取这个问题，然后粘贴截图并说：现在地球图标与“HTTPS://”重叠了，你能修复它吗？

当我们讨论上下文时，我们提到要向AI提供额外细节，给予它修复错误所需的信息。这正是我们现在所做的。现在Assistant可以看到重叠问题，它将提出解决方案并询问我们是否要应用这些更改。

看起来我们遇到了一点错误。让我们预览一下发生了什么。实际上，它似乎只是移除了地球图标，但提交没有完全成功。没关系，有时会发生这种情况。我只需重新粘贴代码并再次运行即可。

当系统创建一个新的检查点时，它会重启我们的应用。现在，我们的应用已经更新，我可以直接输入“deeplearning.ai”并点击分析。就这样，我们切换到了Assistant，并完成了一些更轻量级的细节调整。这基本上就是我们想要为应用程序构建的样子。

部署应用程序

接下来，我们将介绍部署模式。这是我们为两个应用程序都会做的步骤。请注意，部署功能仅限于Replit核心用户，因此你可能看不到此体验。但你可以随时订阅或升级以进行部署。

点击“部署”，系统将为你配置构建，你无需担心这些细节，甚至无需了解“自动扩展”的含义。我们将改进和配置设置，然后为应用程序命名。我将我的应用命名为“SEO Tag Inspector”。

请注意，我们正在配置构建命令和运行命令。我完全不需要担心这些，AI会为我处理。点击“部署”。

需要说明的是，这个过程通常需要两到三分钟。我们正在将这个应用程序打包，将我们与Agent一起构建的整个环境放到云端。你无需担心其中的技术复杂性、细微差别或细节。你只需要知道，你刚刚构建的一切在我们将要部署的网页上看起来是一样的。

如果你之后回去做了更多更改，这些更改不会自动生效，你必须点击“重新部署”。本节课我们进行得稍慢一些，这是因为我们希望涵盖所有基础知识并理解其工作原理。

当我们构建应用程序并点击部署时，我们正在为与Agent和Assistant一起构建的所有内容、添加的所有功能创建一个快照，然后将它们推送到我们刚刚定义的独立网页上。如果你想了解更多关于不同类型的部署、部署工作原理或任何技术细节，可以查阅我们的文档或观看我在YouTube上制作的一些深度内容视频。

总的来说，系统将为你选择合适的部署类型，并且我们可以非常有信心这是正确的部署类型。同时，你可以观看这个很酷的加载屏幕。所有部署都附带日志，因此你可以准确查看部署中发生的情况。它们还附带分析功能，因此你将能够看到谁访问了你的部署、有多少用户，以及其他一些可以深入查看的设置。这些将在部署完成后可见。

部署完成与总结

我们回来了。部署大约花了两分钟，这很棒。系统将提供你刚刚部署到的域名。如果我访问这个URL，我们将看到相同的应用程序。它现在已部署在互联网上，拥有自己的URL。

我可以输入一个网站地址，表单会自动为我移除“HTTPS://”，这非常好。点击分析，它的工作方式将与之前完全相同。

总结：本节课，我们使用Agent和Assistant端到端地构建了一个应用程序。该应用程序可以抓取网页，对网页进行分析，告诉我们是否有可以改进或优化的地方（例如针对SEO、Google结果或社交媒体帖子），然后将其部署。我们完全构建了一个可供他人和你自己使用的工具。过程就是如此简单。

本节课的重点是完善应用程序并切换到Assistant。在下一课中，由于我们已经涵盖了基础知识，我们将能够更快地推进，并进入更复杂的主题。期待在下一课与你相见。

005：规划与构建投票应用 🗳️

在本节课中，我们将构建一个具有投票功能的美国国家公园排名应用。我们将遵循与上节课类似的流程：制定产品需求文档和线框图，构思有效的提示词，并使用 Agent 工具，结合我们提供的示例数据，来创建应用的初始版本。

现在，让我们开始下一个项目。这个项目将稍微复杂一些，会用到持久化存储和一些更完整的交互功能。

项目规划与设计 📝

上一节我们介绍了项目目标，本节中我们来看看具体的规划与设计。

我们将构建一个“一对一”排名应用，使用数据库来存储投票和排名数据。核心思路是：我们将引入一些美国国家公园的数据，用户可以在应用中看到两个公园进行对比投票。一旦用户投票，我们将实时计算该公园的排名，并返回相关的排名结果。

我们将经历一个类似的过程：从产品需求文档开始，然后是线框图，接着在进入 Replit 开发应用时，讨论一些更高级的构建技巧。

以下是我们的线框图构思：

  • 我们正在构建“一对一”投票应用。
  • 我提前画好了草图。
  • 我们有两个公园进行“一对一”比较。
  • 一旦我们对某个公园投票，我们将计算动态排名。
  • 公园将根据 Elo 系统 进行排名。

因此，我们的目标是：实时显示排名，将公园数据和排名存储在数据库中，使用数据库等持久化存储方法，并显示总体排名和最近的投票。

这引出了一个重要观点：默认情况下，无论在哪个平台或 Replit 上创建应用，数据都必须存储在某个地方，以便我们可以随时访问和使用。因此，我们将初始化这个应用，然后将数据迁移到持久化存储（如数据库）中，这样我们就可以访问、更新这些值，并将其存储在我们的应用中。这是 Replit 的一个非常酷的功能：我们内置了数据库，稍后会详细介绍。

本项目的关键点包括：提示词构思、持久化数据、部署、调试以及处理错误和边界情况。

构思与编写提示词 💡

上一节我们完成了项目规划，本节中我们来看看如何构思有效的提示词。

让我们看看我们的提示词：

Help me build an interactive app for voting and ranking the best national parks. The app should allow users to vote on parks head to head, then calculate a ranking for the parks based on the chess Elo system. The app should prominently display the matchup, along with overall rankings and recent votes.

这个提示词非常直接，我们强调了使用线框图和 Elo 系统。

你可能会问：数据怎么办？LLM 会知道所有这些国家公园吗？很可能不知道。即使知道，它也不会有这些公园的图片，很难找到相关信息。因此，对于这个应用，我们实际上要从外部来源拉取数据。我会在 Replit 中向你展示如何操作，这非常简单。但首先，让我们把提示词带到 Replit 主页。

利用外部数据增强提示词 🌐

上一节我们有了基础提示词，本节中我们来看看如何利用外部数据来增强它。

就像上节课一样，我们从提示词开始，已经输入了所有内容。现在，我们要用一些额外的上下文来增强这个提示词，正如我们在课程介绍中讨论的那样。

看起来美国有 63 个国家公园，这是国家公园的维基百科页面。它实际上列出了所有的国家公园，这非常酷。

我们还没讨论过的一点是，Agent 实际上可以为我们抓取这个网页。考虑到我们提供给 LLM 的上下文，如果我们说“用所有这些国家公园构建这个排名器”，然后我们只给 AI 一个所有国家公园的列表以及这些公园的图片 URL，我们可以相当确信它能够使用这些数据并将其集成到我们的应用中。

所以，我们只需复制 URL 并将其粘贴到 Agent 中。

我们将按下 Shift+Enter 创建一个新行，然后粘贴我们的维基百科链接。你会看到顶部出现一个小弹窗，提示我们是截取该页面的屏幕截图还是获取文本内容。显然，维基百科页面的截图可能不是我们想要的，所以我们可以获取文本内容。我们的工具将抓取该网页并返回文本内容，你可以实时看到它，所以你会确切知道它完成了什么。这通常需要一两秒钟。

一旦你看到有内容填充，你就可以看到内容。现在我们知道，我们要求 AI 构建这个交互式投票应用。理论上，它应该拥有所需的所有内容、所有数据，即 63 个公园的列表。它还将可以访问 URL，所以我们将看看 Agent 是否能正确实现这些功能，这可能需要一些额外的提示。

接下来，我们可以比上一个应用更直接地使用产品需求文档和线框图。我们将回到我们的线框图。

整合线框图以完善设计 🎨

上一节我们导入了数据，本节中我们来看看如何整合设计线框图。

现在，对于这个应用，我们实际上要截取这个线框图的屏幕截图，因为我喜欢这个设计，我希望 AI 也能了解我们在做什么的上下文，然后我们将把它粘贴到 Agent 中。

现在我已经粘贴了线框图，我们的提示词更加完整了。我们不仅有一个描述性很强但简洁的提示词，告诉 Agent 我们到底想要什么，而且还有维基百科页面的文本内容，解释了什么是国家公园、美国有哪些公园，并提供了完整的公园列表以及非常相关的数据。我们还附上了屏幕截图，所以让我们看看 Agent 如何处理这些信息。

就像上次一样，Agent 将制定一个计划，并在我们开始之前向我们展示它将构建的内容信息。既然我们已经经历过这个过程，从第一节课开始就熟悉了我们要构建的内容，我们将在这里确认计划，然后在 Agent 完成初始 MVP 构建后与大家会合。

需要注意的重要一点是，这里的附加功能只是附加功能。因此，无论 Agent 朝着初始原型努力，我们实际上都将致力于实现像 Postgres 数据库或一些其他功能。所以你不必担心，只需批准计划并开始。另外请注意，结果可能会有所不同。所以如果你正在学习本教程，AI 可能会做不同的事情，有时你的预览可能看起来不同，最终结果可能看起来不同，但我们将一起完成，所以一旦这个预览完成，我会与大家会合。

测试与迭代开发 🔄

好了，我们回来了。如果你在应用构建过程中跟着操作，你可能看到了一些错误出现，并且我们仍然有一些错误。这没关系，我们将逐一解决这些问题。你可能实际上看到 Agent 修复了一些错误。这是因为 Agent 能够读取应用程序的输出（即控制台写入的内容），如果我们打开一个新标签页并输入“控制台”，你实际上可以看到应用程序运行时发生了什么。

它还能够截取屏幕截图并动态修复问题。所以我们有了界面。这里发生了很多事情，但很多功能不工作，不过这没关系。总的来说，我们预计会出现错误。这看起来不错。图片没有显示出来，我认为我们没有所有的公园数据，我认为它没有像我们要求的那样抓取数据。顶部有一些非功能性的账户按钮，这没关系。

但这看起来像我们的线框图。所以我认为这很好。我们将尝试修复它。

我们不会太担心损坏的图片或其他一些问题。我们只专注于看看能否让它工作。但让我们检查一下投票是否有效。所以我点击投票。

实际上，在这些选项中，图片确实有效。所以大沼泽地公园获得了一票。它被计入我的最近投票中，这很酷。看起来它没有流入我的排名，所以需要注意：排名似乎不工作，但最近的投票和某些情况下的图片似乎确实有效。

这时深入研究代码并看看发生了什么可能会有所帮助。所以我要在组件中查看一下。

它在 hooks、Lib 中。好的，所以是公园数据。看起来它只是在这里硬编码了一堆公园。这些似乎不是所有的公园，并且它为这些公园分配了一个图标类型，这可能是前端显示的内容。然后 Replit 可以访问 Unsplash，所以看起来它只是从 Unsplash 拉取了这些图片，然后我猜对于一些公园，它没有图片。

所以我认为我们的目标将是看看能否让它使用我们最初要求的维基百科。可能我们给它的信息有点太多了。这就是用 AI 构建的过程，我们将看看这个。

正如我们讨论的，我们现在正在做的是测试应用程序，看看什么工作，什么不工作。不工作的是我们的排名没有从持久化数据存储中拉取。我们正在记录最近的投票，这很酷，但我们也没有真正按照我们想要的方式拉取公园数据。

所以我要告诉 Agent，我们将尝试不同的方法，我们会说：

The parks data are listed on the Wikipedia page inside a table in the HTML. Please fetch the page, download it, and extract all the parks from the source. There should be 63 if I remember correctly. Each park has an image in the table. You should use the externally hosted image as the park image in our app.

然后我将粘贴维基百科页面。这次，我们实际上不获取文本内容。这里的目的是看看是否通过另一种提示方法，我们可以让 Agent 直接集成这个。我将运行它。

所以这里的目的是，我在思考我们应用的最大问题。第一个问题是我们没有准确的数据。当然，还有其他方法可以解决这个问题，我们可以自己处理数据，可以上传。但我只是提示了 Agent。你可以看到它做的是在该维基百科页面上运行了一个 curl 命令，curl 只是获取 HTML 的一种高级方式。现在，它正在使用几个库，Beautiful Soup 和 Requests，并编写一个 Python 脚本来从维基百科页面提取公园数据。这相当复杂。

但我认为逐步讲解很重要，因为 Agent 可以为我们做这些工具能做的事情，有时有效，有时无效，但这会节省我们的时间，并让我们构建一些非常酷的东西，因为我们拥有所需的所有资源。这有点像我们之前在 SEO 分析器中构建的，我们能够抓取和访问数据。

所以看起来它刚刚运行了脚本来提取公园数据。但现在它正在尝试一种不同的方法。所以实际上看起来 Agent 正在编写一些脚本来分析它刚刚下载的 HTML 的结构。希望如果这个正在运行，我们可以在文件结构中看到它正在读取和写入的脚本。

所以我们有分析公园的脚本，更新这些脚本来实际内省那个它下载的网站。我猜我们的目标或我的期望是，我们会得到一个实现了所有公园数据、相当完整的东西。我实际上相当印象深刻，Agent 能够做到这一点。所以理论上，它理解了我们刚刚提取的结构，现在它正在执行那个 Python 脚本。

数据提取与集成成功 ✅

好了，现在我想谈谈刚刚发生了什么，因为在那次运行中发生了很多事情。Agent 所做的是编写了 Python 脚本来获取和分析公园数据。如果你一直关注这里，如果你一直在编写程序或做更多技术工作，你可能已经注意到这是一个 JavaScript 项目，一个 TypeScript 项目。但我们现在也有了 Python 文件，你可能会问，我们如何设置这个？这是因为 Replit 作为一个平台，允许你在几秒钟内安装语言。所以 Agent 实际上配置了整个环境来运行 Python，运行这些文件来分析维基百科条目，拉下维基百科页面，将数据写入 parks_data.json，验证列表中有 63 个条目，我们可以浏览这个列表并确认这是相同的。它实际上使用了相同的图片。

这些图片比我们之前的好多了，如果我们想再次确认，我们可以切换到维基百科。现在我在维基百科上，我要搜索维尔京群岛。

我们可以验证这实际上与我们之前拥有的图片相同。

所以我们刚刚做了什么？我们能够提取这些数据，而无需自己提供或清理任何数据。Agent 为我们完成了所有这些。这真的很酷，我们正在取得良好进展，因为我的猜测是投票可能仍然完全一样地工作。我们得到新的对决。我们可以跳过对决。我们得到最近的投票，排名可能不工作。它们肯定不工作。

但同样，这就是我们之前讨论的。我们正在添加上下文。我们正在获取数据。我们一步一步地做事。现在，我们有了公园的描述，我们拉取了一些数据，我们可以提供那些投票。登录/注册功能不可用。投票功能不可用。我们将一步一步地解决这个问题。所以我们会说：

The rankings currently are not working. The recent votes flow through, but I don't see any updates for these scores.

同样，我们将相信 Agent 能够分析并修复这个问题。现在我们有了存储实现，Agent 将打开它并查看。现在你可能会说，Matt，为什么我们不直接从数据库开始？你谈到了实现数据库。我们知道我们最终想要一个数据库。根据我的经验，实际上更好的做法是确保数据被正确获取，然后确保应用实际上在内存存储中工作。所以在这个应用中使用内存存储是可行的，但这意味着每次重启时，我们可能会丢失排名，所以首先要确保应用工作，然后要求 Agent 将数据迁移到数据库，这就是我们正在做的。

其他需要注意的事项。我们也可以依赖 Agent 来解决这些问题。那么我们之前做了什么？我们只是指定了图片的位置，给了它一个 URL，指定了我们希望如何解决问题。我希望你访问这个 URL，有一个表格，你必须分析表格，提取数据，Agent 能够做到这一点，并实际上为我们处理了整个事情。所以同样，随着这些模型变得更好，我们可以思考 AI 能够解决的最小构建块。也许像一年前，6 个月前，它只是编写一个函数或标签自动完成，或者做一些甚至不那么令人印象深刻的事情。现在，它可以解决更高级别的问题。嘿，我们没有数据源。嘿，我们需要修复排名系统。嘿，我们需要更新这些东西是如何流通的。

现在，如果你还记得，我们刚刚为维尔京群岛投票了，对吧？所以维尔京群岛击败了夏威夷火山，我们的排名现在反映了 1516 分。我们也可以检查一下。让我们确保我们所有的公园都被拉取到这里，我们确实有 63 个国家公园。所以我们拥有所有这些。

同样，所以我们有死亡谷对阵维尔京群岛。Elo 系统的工作方式是，如果竞争对手的分数更高，并且排名较低的竞争对手击败了该竞争对手，它应该在排名中更高。所以如果我们投票给死亡谷，你现在可以看到死亡谷是第一。它有 1517 分，而不是 1516。看起来让我们检查一下第 30 名，我不知道怎么发音这个，所以请不要怪我。我们将检查并确保这实际上是第 30 名。在页面上查看。它是。我们可以确认这有效。同样，我们在做什么？我们只是在测试我们的应用程序。这就是我在第一节课中谈到的那个循环。

那么我们现在能做什么？嗯，我们有了投票系统。我们有了排名。它们正在实时更新，我们有了最近的投票。但这都是在内存中。所以我们想做的就是把它添加到数据库中。现在，如果你用其他工具构建过，你知道添加数据库是相当复杂的。

集成持久化数据库 🗄️

上一节我们实现了核心功能，本节中我们来看看如何添加数据库以实现数据持久化。

关于 Agent 和 Replit Agent 氛围编码的一个非常棒的功能是，我们可以说，好的，现在让我们的存储持久化。将所有数据存储在数据库中，以便它在会话和用户之间持久存在。真的，就这样。我们可以相信，如果我们发送这个提示，Agent 将能够第一，理解我们想要什么，并拥有访问工具的权限。你可以看到我们刚刚创建了一个数据库，我们创建了一个服务器数据库文件。现在它将把内存存储迁移到我们的数据库中。

当 Agent 执行我们的数据库步骤时，我们将打开一个新标签页，因为我想向你展示发生了什么。我们有一个 Postgres 数据库。

如果你以前没有使用过数据库，或者你甚至不知道数据库是什么，它有点像 CSV，但与其他表相关联，所以我们将有一个表结构，我们将看到 Agent 将开始用数据填充这个数据库。你实际上可以在左边看到它在做什么，它将开始运行一些脚本。我们包含了一个数据库查看器，你可以在其中与所有表进行交互，我们将在有表之后回到这里，但我想指出这里发生的基本情况，理解我们的数据库如何工作很重要，如果我们转到工具并转到密钥，我们有一些非常棒的合作伙伴，我们与 Neon 合作处理数据库，所以你可以想象的是，我们通过 Neon 的合作伙伴在后端启动了这个 Postgres 数据库，我们所做的只是将这些连接密钥放入我们的密钥面板中。

所以我们的密钥面板，如果我们以前构建过应用程序，这就像一个环境，这些是环境变量，我们可以从我们的账户中拉取密钥，或者只是让这些密钥存在于我们的应用中。让我们看看这里发生了什么，看起来 Agent 仍在处理数据库连接，它正在调试和修复一些类型错误，然后执行一些数据库迁移脚本。同样，不要太担心这个。但如果你对此感兴趣，并且你想了解更多关于数据库如何与全栈 Web 应用程序工作的知识，嘿，你知道，理解它正在使用 Postgres，理解 Postgres 是什么，理解连接如何工作以及包如何工作，这些都是了解更多关于数据库、数据库迁移是什么以及应用程序如何工作的好方法。这就是我学习的方式。所以这就是我讲解这个的原因。

同样，Agent 将在这里花一分钟，我们只是让它工作，然后一旦我们的数据库中有了一些数据，我们再回来。

处理错误与回滚操作 ↩️

好了，我们回来了，我们尝试了数据库实现。我们将逐步讲解发生了什么，因为 Agent 完全偏离轨道大约 15 分钟，但这没关系。所以发生了什么？它做了很多事情，设置了我们的 Postgres 数据库，创建了模式，它使用了一致的命名，它说它将公园加载到了数据库中，但是，我在这里刷新，好吧，我们有对决、公园、用户和投票表。但它然后开始研究一个与数据库存储集成的 API 服务器，这与我们的实际集成是分开的。

所以让我们看看 Web 视图中发生了什么。如果我们运行应用程序，它运行失败。所以我们得到了错误。所以看起来我做了大部分工作。出了问题。这就是我们将使用之前讨论过的回滚功能的地方。我们做的最后一次更改是在这里，你可以看到大约 15 分钟前我们有一个检查点，这是由 Git 支持的。所以如果你真的想看看我们的检查点发生了什么，你可以转到 Git 面板。

我们实际上会得到 Agent 所做的一切的摘要。这真的很有用。你实际上可以在这里创建一个 GitHub 仓库，或者将其推送到你的 GitHub 账户，如果你喜欢的话。但检查点的酷之处在于，我们遇到了一个真正的障碍。我要回滚这个。

所以你将看到的是 Agent 正在回滚。它完成了回滚。现在，如果我运行我们的应用程序，我们回到了之前的状态。东西坏了。这就是我之前谈到的，对吧？没关系，东西坏了。酷的是我们正在回滚，我们将再试一次。

所以我们要思考我们做了什么，我们将尝试不同的方法。所以我认为我之前的提示太基础了。我将创建一个新的聊天，这次我们将非常详细地描述。我们会说：

Our app currently uses parks data hard-coded in parks_data.json. We'd like to move this to a Postgres database. Agent is going to know have the tools to access that, but I think what we need to do is just be very explicit about the type of data we're using and how we want that data inserted. You should analyze the structure of the data and create a schema for rapid import. Be sure to check the data types and perform all necessary migrations.

所以，我们在这里做什么？我们正在重试。我们遇到了障碍，我们重置了应用，我们正在用新数据再试一次。你可能在应用中注意到的是，我们丢失了所有的分数和投票，这是预期的，因为我们还没有持久化数据。

成功实现数据持久化 🎉

上一节我们遇到了问题并进行了回滚，本节中我们来看看如何成功实现数据迁移。

我们采取了另一种方法。我们在提示词中添加了更多描述。我们开始了一个新的聊天会话，以确保上下文清晰，因为你知道，我们在这个应用中做了很多事情，现在我们正在运行应用以重新运行那个转换。所以我们将让 Agent 运行，希望时间更短。我们会回来，看看发生了什么，然后继续构建。

好的，太棒了。所以看起来我们更新的提示词得到了我们想要的结果。所以 Agent 经历了这个过程，拉取了数据，创建了我们的数据库，然后执行了迁移，将我们 JSON

006：增强国家公园投票应用 🏞️

在本节课中，我们将通过集成完整的数据集来完善我们的国家公园投票应用。我们还将利用智能体和助手添加最终功能，确保一切正常运行。最后，我们将部署应用程序供公众使用。

回顾与理解现有项目

上一节课，我们构建了公园排名和投票应用的核心功能。我们实现了所有功能，将公园数据存储在数据库中，并创建了一个漂亮的排名表，同时将最近的投票记录存储在Postgres数据库中。

现在，我们将添加一些额外的功能。但在开始之前，我们需要理解当前项目是如何工作的。在上次智能体构建时，我可能有些分心，因此我需要回顾一下具体的实现细节。

接下来，我们将切换到助手模式，请求它帮助我们理解项目的运作方式。

以下是向助手提出的问题：

我们为数据库使用了什么框架？它是如何工作的？我们是如何管理它的？

理解我们使用的框架非常重要，这也是我在整个课程中一直强调的。理解我们构建的内容至关重要，因为当我们遇到调试问题时，我们需要知道如何解决这些问题，以及事物的工作原理才能找到解决方案。

助手基本上复述了智能体构建的所有内容。我们使用了Postgres作为主数据库，通过环境变量中的连接URL进行配置。我们使用了一个名为Drizzle ORM的ORM框架，这是一个TypeScript优先的ORM。我们还进行了一些模式管理。

我可以查看 shared/schema.ts 文件来了解具体的表结构定义。它定义了公园表和投票表。代码库中有两种存储实现：内存实现（旧的开发实现）和数据库实现。这是一个很好的说明，解释了这些组件是如何工作的。

深入理解ORM框架

然而，我还不完全清楚什么是ORM框架。因此，我继续向助手提问：

什么是ORM框架？为什么我要使用Drizzle？

这正是我学习编码、使用AI构建以及今天向你们展示的一切的方式。我只是提出一堆问题，助手利用最新的模型来回答，帮助我们理解正在发生的事情。

助手将告诉我们ORM（对象关系映射）是什么。它是一个框架，允许你使用编程语言中的对象与数据库交互，而不是编写原始的SQL查询。因此，我们使用对象而不是编写SQL（一种与数据库交互的语言）。它还告诉我们使用ORM的一些好处，例如类型安全、模式管理、查询构建和模式验证。

也许我还不完全理解这些概念的具体含义，但我可以继续深入研究。这里的真正目标是帮助你理解：我实际上不知道这个东西是什么，我不太清楚发生了什么，但我可以学习，我可以询问AI，并以此作为巩固我正在构建的内容并持续迭代的一种方式。

就这样，助手帮助我们理解了应用程序的工作原理，甚至可能让我们学到了一些关于Drizzle、Postgres以及我们正在使用的工具的知识。

应用功能与部署准备

我对目前的成果印象深刻。我们拥有一个可以投票给公园的应用程序，公园数据被记录在数据库中，并且我们得到了排名系统。这正是我想要的，而且它非常酷且具有交互性。我们实际上从维基百科提取了数据和这些图片。所以，这是一个涉及数据操作、可视化的相当复杂的应用程序，有点像ETL（提取、转换、加载）类型的工作。

现在，我们将继续部署这个应用程序。就像上次一样，我们将使用自动扩展部署，并批准相关设置。这次你会注意到，我们为数据库设置了密钥。如果我们要部署带有API或外部服务的应用，我们也需要传递这些密钥。

我们将把这个部署命名为 park-challenge。然后，我们将启动部署过程。就像上次一样，Replit将构建这个部署，配置一切，并将其推送到我们的生产环境。我们基本上不需要担心太多，因为我们已经构建了整个应用。

在开发过程中，通常很难不仅在云端重建你的环境，还要添加那些外部服务、添加数据库并在独立环境中管理这些数据库，或者做一堆其他事情。而我们在这里拥有的是一个直接集成到环境中的数据库。正如之前讨论的，我们的应用为我们安装了一堆东西，运行了一些Python脚本来导入数据。智能体配置了这个嵌入到我们应用程序中的数据库，我们不需要去任何其他地方，不需要打开另一个标签页，不需要设置另一个账户或输入API密钥。我们只是在Replit中编写代码就完成了一切。

因此，使用智能体和助手构建的力量在于，我们能够创建这些全栈应用程序，它们拥有数据库、前端和后端，并且真正从一个界面构建复杂的工具。这就是氛围编码。我们做了很多规划，讨论了很多关于工具和框架的内容。但在很大程度上，这与传统的编码或构建方式有很大不同。这里有很多“感觉”，我们只是凭感觉进行调试，凭感觉管理上下文。

我将让这个部署过程完成。完成后，我们会回来检查，确保我们的应用程序正常工作，然后继续前进。

部署完成与功能验证

很好，我们的应用程序已经部署完成，我们获得了一个URL，并且再次以自动扩展部署的形式上线。如果你想了解更多关于自动扩展的信息，可以查看我们的视频或文档。

打开应用程序，我们得到了和之前完全一样的内容。我可以为猛犸洞国家公园投票。值得注意的是，之前的分数被保留了下来，这是因为我们使用了同一个数据库。因此，我们拥有了投票系统、一些最近的投票记录以及存储在数据库中的持久化排名。

正如我之前提到的，这就是Replit的强大之处。我们刚刚将这个应用部署到了互联网上，任何人都可以访问。如果你想与家人或朋友分享，完全可以做到。是的，这是一个端到端的全栈应用程序，具有持久化存储，全程氛围编码完成。

在下一节课中，我们将讨论后续步骤，探讨你从这里可以走向何方。感谢你的参与，感谢一起构建这些很酷的应用程序。让我们圆满结束这节课。

007：后续步骤与最佳实践

在本节课中，我们将回顾整个课程中构建的内容，讨论最佳实践，并探索如何继续你的氛围编码学习之旅。

课程到此结束。恭喜你完成本课程。

我们刚刚构建了一些相当出色的应用程序，而整个过程几乎没有编写任何代码。我们所做之事的惊人之处在于，我们构建了两个可用于生产环境的应用程序，而不仅仅是玩具演示。这些应用是全栈的，具有持久化存储，并部署到了专属URL，可供任何人访问。我们再次强调，我们编写了很少甚至几乎没有代码。整个过程都是逻辑和我们在课程开始时讨论的那些概念。

那么，这些概念是什么呢？它们与思考、框架、调试、检查点和上下文有关。在继续探讨氛围编码之旅的后续步骤之前，让我们快速回顾一下所学的一切。

🧠 核心概念回顾

上一节我们介绍了课程的整体目标，本节我们来详细回顾一下构成氛围编码的五个核心技能。

在我们的第一课中，我们讨论了五项技能：思考、框架、检查点、调试和上下文。

  • 思考：我们讨论了一种逻辑化的思考层次结构。这包括从逻辑思考（例如，如果我们在下国际象棋，要问“我正在玩什么游戏？”）到程序性思考（例如，“我如何精通这个游戏？”以及“我如何实现功能或指导计算机精通这个游戏？”）。这正是我们构建应用时所做的：我们问自己，SEO是什么？我们试图实现哪些功能？我们的国家公园系统排名应用试图做什么？我们要实现什么？

  • 框架：这一切始于理解我们不知道什么，并试图弄清楚我们想要的东西，理解哪些框架能让我们最好地完成那件事并与大语言模型协同工作。在某些情况下，这意味着向我们的工具（如Agent助手）提问来学习。

  • 检查点：即使在我们构建的过程中，东西会出错，我们对此早有预期。但我们使用了检查点和版本控制来最小化构建过程的影响。最棒的是，Agent和助手内置了这些检查点和版本控制功能。这意味着我们可以将构建过程分解为最小可行产品和功能模块，从而快速推进。

  • 调试：我们进行了相当多的调试。这个过程很有趣，但我们是有条不紊、细致入微的。我们理解应用的工作原理，有时会询问助手。我们追根溯源，解决了问题。

  • 上下文：显然，上下文非常重要，这是我在整个课程中一直强调的。我们通过提供图像、提供我们正在构建内容的链接，以及在一种情况下，通过向网页提供实际数据来获取上下文。因为我们提供了上下文，因为我们向Agent详细解释了我们要做什么，它实际上能够提取这些数据并将其实现到我们的应用程序中。当Agent在实现我们的数据库时出错，我们提供了额外的上下文（即关于我们应用的更多细节）来绕过这个问题。请记住，始终要考虑你向大语言模型提供或未提供的上下文。

最后，我们使用我们的框架进行迭代构建，即迭代式的氛围编码。你可以称之为用AI创建功能、测试这些功能、发现错误（或可能根本不是错误）、调试该错误以达到一个检查点，然后继续下一个功能。在这个过程中，我们构建了两个可运行的应用程序。如果你遵循这个模式，你将能够构建更高级、更酷的应用程序。

🚀 后续步骤建议

回顾了核心概念后，你可能想知道接下来该做什么。本节将为你提供一些实用的后续步骤。

如果你刚接触氛围编码，或者这是你旅程的起点，我认为最重要的一步就是持续构建。我发现通过实践学习效果最好。我鼓励你也这样做，最重要的是，保持乐趣。

以下是一些具体的建议：

  1. 持续实践：通过寻找生活中的常见问题，或者寻找你想要尝试自动化、重建或改进的事情，然后运用我们刚刚一起实践的技能来实现。
  2. 社交媒体互动：你可以在社交媒体上关注动态，可以联系Replit，也可以联系我。我很乐意看到你构建的东西，并在我们的Replit账户上展示它们。
  3. 加入社区：如果你是Replit核心会员，我们有一个Replit社区。一旦你加入核心会员，就有资格加入我们的社区，在那里你可以发帖并与其他成员互动。

📝 课程总结

本节课中，我们一起学习了氛围编码课程的总结与展望。我们回顾了构建两个生产级应用的过程，重温了思考、框架、检查点、调试、上下文这五项核心技能，并理解了迭代构建的模式。最后，我们探讨了持续学习的最佳途径：通过实践解决问题、保持乐趣、参与社区互动。

我是Replit开发者关系团队的Matt。以上就是Replit上的氛围编码101课程。感谢你的参与。

posted @ 2026-03-26 08:12  绝不原创的飞龙  阅读(9)  评论(0)    收藏  举报