首页 > web前端 > js教程 > Daytona-Sample-React:文本 AI

Daytona-Sample-React:文本 AI

Barbara Streisand
发布: 2024-12-24 18:01:11
原创
802 人浏览过

我的 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 美元!如果这对你来说都不是激励因素那么我不知道什么才是。

代托纳有这样一句话:

Daytona-Sample-React: Text AI

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

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

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

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

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

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

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

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

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

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

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

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

  1. 如果您的项目使用 Vite,那么在您的 package.json 中您需要使用主机标志指定 vite。它应该看起来像这样:
    Daytona-Sample-React: Text AI

  2. 如果您有前端和后端需求,那么您必须将服务器端口添加为转发端口。应该看起来像这样:
    Daytona-Sample-React: Text AI

  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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板