Daytona-Sample-React：文本 AI

我的 daytona 示例是一个名为 Mindsnap-prosemaster-daytona 的 React 项目。这是一个非常简单的初学者友好的应用程序，使用 React、Node 和 AI 开发，遵循 MVC 架构

在我们快节奏的世界中，没有人愿意花时间配置东西，开发人员只想继续使用它并将其编码下来。听起来像你吗？那么，干杯！您来对地方了。

但是，等等，我们都知道开发不是这样的。遗憾的是，即使对于最简单的项目，您也需要配置工具、要安装的软件包、要转发的端口，有时还需要 VPN 设置等等。这就是 Daytona 为开发者提供简单但突破性的解决方案的原因。

开始感到好奇了吧？

在这篇文章中，我将带您了解我构建 MindSnap ProseMaster 的旅程 - 一个超级适合初学者的应用程序，旨在将长文本转换为快速摘要、关键见解和有趣的助记符。

让我们首先简短介绍一下我如何构建这个应用程序。我认为这是我使用 React 和 Node 构建的第一个应用程序。这相当简单。现在假设您知道如何进行 api 调用，这将相当容易！

首先，这是一个带有一个输入框的单页应用程序，用户可以在其中输入任何文本，现在使用此文本并传递提示，我将其发送到 Gemini api。来自 Gemini api 的响应将显示回屏幕。

那么，我这个对容器之类的东西一无所知的开发者是怎么知道 Daytona 的呢？

好吧，我们需要为此感谢 Quira。 Quira 的 Quest 023 以 Daytona 为特色，奖金高达 6000 美元。当我了解到这一点后，我开始浏览我的项目以提交任务！

我清楚地记得我认为我应该选择一个简单的项目，因为复杂的项目可能会让为我的工作区设置 DevContainer 变得更加困难。但是，天哪，我大错特错了。

我知道有些读者不熟悉开发容器、工作空间。但是，不用担心！我已经在这个博客中介绍了它们，所以只要继续阅读，慢慢地你就会明白。

事实上，让我们开始使用这些术语：

• 开发容器：预配置的环境，包含开发所需的所有工具和设置。

• 工作空间：这是一个数字空间，我们可以在其中存储和组织我们正在处理的所有文件、代码和各个项目。

• 端口：让我们把它想象成一扇门，数据通过它在我们的开发环境和其他服务或设备之间流动。

• PostCreateCommand：devcontainer.json 的一个重要命令，在设置开发环境后自动运行。我认为这是用来完成设置任务的。

使用 Daytona，我发现设置和管理开发环境是多么容易，无论您的技能水平如何。留下来学习我的经验，看看 Daytona 如何让您的下一个项目更顺利、更高效！

让我们深入了解我是如何开始的
我更像是一个视觉学习者！这意味着我不喜欢阅读冗长的文本，而是喜欢观看实施的视频或图像。因此，像往常一样，我没有阅读非常简单且易于遵循的说明。

在这里我要感谢 quira 正在创建的开源社区。我在社区遇到的一位亲爱的朋友 K OM 提供了帮助。我们希望在电话中他能解释 3 个简单的入门步骤：

1. 首先导航到项目并设置一个名为“.devcontainer/devcontainer.json”的文件
2. 使用开发容器生成器生成开发容器
3. 编辑自述文件以使用户了解并完成！

真的有这么简单吗？那么简短的回答是是。但除此之外，我相信测试工作空间是学习和使用 daytona 的重要组成部分。

真正激励我的是什么？这次旅程中最令人沮丧的部分是什么？
前 100 名有效提交的作品每人将获得 50 美元！如果这对你来说都不是激励因素那么我不知道什么才是。

代托纳有这样一句话：

但这对我来说是最令人沮丧的部分。该应用程序在我的机器上运行，但在审阅者机器上运行不正常，这立刻让我产生了一个问题：代托纳真的值得吗？

哈哈，现在想起来了。听起来真的很有趣。我是那个配置错误并指责代托纳的人，认为它做出了虚假声明。

是的，我承认我是为了奖励而来的，但说实话，我留下来是为了技术。我忍受了所有这些挫折，因为我看到了代托纳的真正能力。

*因此来到这个问题，我遇到了哪些具体问题？ *

我遇到的第一个问题是，我使用 AI 生成的容器在尝试创建 daytona 工作区时抛出了致命错误。

解决了这个问题后，我想到的下一个问题是我的项目是使用 vite 创建的，结果发现在这种情况下屏幕上不会显示任何内容。它将作为一个白色的空白页出现。这是一个客户问题。

后来，当我解决了客户端问题时，现在我的服务器没有响应。

当我的客户端和服务器开始工作时，我遇到了这个 CORS 问题。

最后，我删除了服务器并直接调用 api，但随后在创建工作区时收到错误消息，但它仍然打开 IDE。结果我必须更改 devcontainer.json 以匹配我在代码中所做的更改。

解决方案以及我如何找到它们？

老实说，所有问题都有非常简单的解决方案。如果没有 Daytona 团队的帮助，尤其是 Jafa 的帮助，我可能永远也无法弄清楚这些问题，他耐心地审查并提出了必要的更改建议。他帮助我更多地了解代托纳、它的工作原理以及为什么它是最好的。

您可能需要的一些解决方案是：

1. 如果您的项目使用 Vite，那么在您的 package.json 中您需要使用主机标志指定 vite。它应该看起来像这样：
   

2. 如果您有前端和后端需求，那么您必须将服务器端口添加为转发端口。应该看起来像这样：
   

3. 您可能遇到的所有问题的最终解决方案是：询问。去加入代托纳的 Slack 并告诉他们你的问题。我确信您会得到您正在寻找的帮助。松弛链接

我的建议，为什么使用 Daytona？
我更想问为什么不戴托纳？它使用起来超级简单并且易于管理。它确保您不再需要经历设置开发环境的复杂性

有了 Daytona，您可以专注于真正重要的事情，而不用担心任何设置。

我认为 Daytona 对于开发者来说是一个有吸引力的选择的一些最佳功能是：

• 单个命令:
  只需一个命令即可启动整个开发环境。无需手动设置——一切都准备就绪，可以立即开始。

• 到处运行：
  无论您是在笔记本电脑上、远程服务器上还是在云中，您的开发环境都可以在任何地方运行。它完全灵活，因此您可以在任何机器上工作。

• IDE 支持:
  与 VS Code 和 JetBrains 等流行工具无缝集成。另外，还有一个内置的 Web IDE，因此您无需任何设置即可开始编码。

• 安全：
  通过安全 VPN 自动将您连接到您的开发环境。这可以保证您的数据安全，并确保您可以安全地工作，甚至远程工作。

这些功能可以节省时间、提高灵活性并保持开发过程的顺利和安全。嘿，开发人员还能要求什么呢？它非常适合各个级别的开发人员。

诚实的反馈！
好吧，说它是完美的可能有点太牵强了。 虽然我觉得它是业内最好的之一，但有一些改变实际上可以改善用户体验。

• 预构建的框架特定模板 是的，我的意思是模板，而不是样本。他们之间有什么不同？我知道 Daytona 正在收集样本，以便开发人员可以参考这些样本并在旋转 Daytona 工作区上工作。

但是，如果 daytona 为一些流行的技术堆栈提供即用型模板，包括预先配置的 devcontainer.json 文件。类似于支持某些模板的交互式设置向导。

• 一键环境共享 我认为 Daytona 可以添加一个功能来立即共享开发环境。开发人员可以向团队成员发送链接以进行协作。

诸如 daytona share 之类的东西将生成到环境的安全链接，可通过内置 Web IDE 访问。我们甚至可以像在 Google 文档中一样在这里进行实时协作。

• 也许是人工智能驱动的故障排除程序 我之所以想到这一点，是因为许多项目都陷入了非常简单的事情上，例如端口配置错误、依赖项不匹配等。

再说一次，这些是我关于如何让它变得更好的想法！

外卖：
简单地说；不要以貌取人。代托纳比我所描述的要复杂得多，除非你尝试，否则你永远不会发现。那你还等什么？立即尝试！

送行之前的最后一件事：我要向整个 Quira 和 Daytona 团队提出这一建议表示最深切的谢意。荣誉！

我的项目的 Github 链接
代托纳的Github链接
代托纳任务链接

以上是Daytona-Sample-React：文本 AI的详细内容。更多信息请关注PHP中文网其他相关文章！