手把手教你打造人工智能网络应用！

如果你和我一样，你就会注意到人工智能技术的火爆。它不仅会颠覆软件工程，还会颠覆每个行业。

在本系列中，我们将学习如何将OpenAI的 AI 服务集成到使用Qwik构建的应用程序中，Qwik 是一个专注于可恢复性概念的 JavaScript 框架。

我们将深入了解 OpenAI 和 Qwik 的具体细节，但我将主要关注通用知识、工具和实现，这些知识、工具和实现应适用于您正在使用的任何框架或工具链。我们将尽可能密切地关注基础知识，我将指出该应用程序的独特部分。

预览：

准备工作

在开始构建任何东西之前，我们必须满足几个先决条件。Qwik 是一个 JavaScript 框架，因此我们必须安装Node.js（和 NPM）。您可以下载最新版本，但任何高于 v16.8 的版本都应该可以使用。我将使用版本 20。

接下来，我们还需要一个 OpenAI 帐户才能访问他们的API。

在本系列的最后，我们将把应用程序部署到 VPS（虚拟专用服务器）。无论您选择哪个提供商，我们遵循的步骤都应该是相同的。我将使用 Akamai 的云计算服务（以前称为 Linode）。 

设置 Qwik 应用程序

假设我们满足了先决条件，我们可以打开命令行终端并运行命令：<span style="font-family: 宋体, SimSun; font-size: 14px;">npm create qwik@latest<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">npm create qwik@latest</span>。这将运行 Qwik CLI，它将帮助我们引导我们的应用程序。

示例：

如果一切正常，请打开项目并开始探索。

在项目文件夹中，您会注意到一些重要的文件和文件夹：

1. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">/src</span>：包含所有应用业务逻辑

2. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/components</span>：包含所有应用业务逻辑

🎜🎜<span style="font-family: 宋体, SimSun; font-size: 14px;">/src/components🎜</span>🎜：包含可重用的组件来构建我们的应用程序🎜🎜

3. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/routes<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">/src/routes</span>：负责Qwik的基于文件的路由；每个文件夹代表一个路由（可以是页面或 API 端点）。要创建页面，请将<span style="font-family: 宋体, SimSun; font-size: 14px;">index.{jsx|tsx}</span>文件放入路线的文件夹中。

4. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/root.tsx</span>：该文件导出负责生成 HTML 文档根的根组件。

开始开发

Qwik 使用Vite作为捆绑器，这很方便，因为 Vite 内置了开发服务器。它支持在本地运行我们的应用程序，并在文件更改时更新浏览器。

要启动开发服务器，我们可以在终端中打开项目并执行命令<span style="font-family: 宋体, SimSun; font-size: 14px;">npm run dev</span>。开发服务器运行后，您可以打开浏览器并访问<span style="font-family: 宋体, SimSun; font-size: 14px;">http://localhost:5173</span>：负责Qwik的基于文件的路由；每个文件夹代表一个路由（可以是页面或 API 端点）。要创建页面，请将<span style="font-family: 宋体, SimSun; font-size: 14px;">index.{jsx|tsx}</span>

文件放入路线的文件夹中。

🎜🎜<span style="font-family: 宋体, SimSun; font-size: 14px;">/src/root.tsx🎜</span>🎜：该文件导出负责生成 HTML 文档根的根组件。🎜🎜🎜

🎜开始开发🎜

🎜Qwik 使用🎜Vite作为捆绑器，这很方便，因为 Vite 内置了开发服务器。它支持在本地运行我们的应用程序，并在文件更改时更新浏览器。🎜🎜🎜🎜🎜要启动开发服务器，我们可以在终端中打开项目并执行命令🎜<span style="font-family: 宋体, SimSun; font-size: 14px;">npm run dev🎜</span>🎜。开发服务器运行后，您可以打开浏览器并访问🎜<span style="font-family: 宋体, SimSun; font-size: 14px;">http://localhost:5173🎜</span>🎜，您应该会看到一个非常基本的应用程序。🎜🎜🎜🎜每当我们对应用程序进行更改时，我们都应该看到这些更改几乎立即反映在浏览器中。🎜🎜

添加样式

该项目不会过多关注样式，因此如果您想做自己的事情，这部分完全是可选的。为了简单起见，我将使用Tailwind。

通过执行终端命令 ，Qwik CLI 可以轻松添加必要的更改<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">npm run qwik add</span>npm run qwik add

。

示例：

🎜

您可以使用箭头键向下移动到 Tailwind 插件，然后按 Enter。然后它会向您显示将对您的代码库进行的更改并要求确认。只要看起来不错，您就可以再次按 Enter 键。

对于我的项目，我也喜欢有一致的主题，因此我在GitHub中保留一个文件以从中复制和粘贴样式。显然，如果你想要自己的主题，你可以忽略这一步，但如果你想让你的项目看起来像我的一样令人惊叹，请将GitHub 上这个文件中的样式复制到该文件中<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">/src/global.css</span>。您可以替换旧样式，但保留 Tailwind 指令。

准备主页

为了使项目有一个良好的起点，我们今天要做的最后一件事是对主页进行一些更改。我想要做出的更改包括：

1. 删除<span style="font-family: 宋体, SimSun; font-size: 14px;">head</span>/src/global.css。您可以替换旧样式，但保留 Tailwind 指令。

   🎜

   🎜准备主页🎜

   🎜🎜为了使项目有一个良好的起点，我们今天要做的最后一件事是对主页进行一些更改。🎜🎜我想要做出的更改包括：🎜🎜

   1. 🎜删除🎜🎜head🎜🎜导出🎜🎜

   2. <span style="font-family: 宋体, SimSun; font-size: 14px;">h1<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>删除除;之外的所有文本 请随意添加您自己的页面标题文本。

   3. 添加一些 Tailwind 类以将内容居中并使内容<span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>更大

   4. 用标签包裹内容<span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>以使其更具语义

   5. 将 Tailwind 类添加到<span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>删除除;之外的所有文本 请随意添加您自己的页面标题文本。

   添加一些 Tailwind 类以将内容居中并使内容<span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>

   更大

   用标签包裹内容

   <span style="font-family: 宋体, SimSun; font-size: 14px;">main<p style="box-sizing: border-box; margin-top: 5px; margin-bottom: 15px; padding-top: 0px; color: rgb(34, 38, 53); font-family: Cambria, serif; font-size: 19px; text-wrap: wrap; background-color: rgb(255, 255, 255);"></p></span>以使其更具语义🎜🎜🎜🎜将 Tailwind 类添加到🎜<span style="font-family: 宋体, SimSun; font-size: 14px;">main🎜</span>🎜标签以添加一些填充并使内容居中🎜🎜🎜🎜🎜🎜这些都是一些微小的变化，并不是绝对必要的，但我认为它们将为在下一篇文章中构建我们的应用程序提供一个很好的起点。🎜🎜🎜🎜这是我更改后文件的样子。🎜🎜🎜🎜🎜🎜

   import { component$ } from "@builder.io/qwik";
   export default component$(() => {
     return (
       <main class="max-w-4xl mx-auto p-4">
         <h1 id="Hi-nbsp-wave-nbsp-emoji">Hi [wave emoji]</h1>
       </main>
     );
   });

   🎜🎜在浏览器中：🎜🎜

   

   结论

   这就是我们今天要讨论的全部内容。同样，这篇文章的主要重点是消除样板内容，以便下一篇文章可以致力于将 OpenAI 的 API 集成到我们的项目中。

以上是手把手教你打造人工智能网络应用！的详细内容。更多信息请关注PHP中文网其他相关文章！