인공지능 네트워크 애플리케이션 구축 방법을 단계별로 가르쳐주세요!-일체 포함-php.cn

당신도 나와 같다면 인공지능 기술의 폭발적인 발전을 눈치챌 것입니다. 이는 소프트웨어 엔지니어링뿐만 아니라 모든 산업을 혼란에 빠뜨릴 것입니다.

이 시리즈에서는 복구 가능성 개념에 초점을 맞춘 JavaScript 프레임워크인 Qwik으로 구축된 애플리케이션에 OpenAI의 AI 서비스를 통합하는 방법을 알아봅니다.

OpenAI와 Qwik의 세부 사항을 다루겠지만, 주로 사용 중인 프레임워크나 도구 체인에 적용해야 하는 일반 지식, 도구 및 구현에 중점을 둘 것입니다. 우리는 가능한 한 기본 사항에 초점을 맞추고 응용 프로그램의 고유한 부분을 지적할 것입니다.

미리보기:

준비

무엇이든 만들기 전에 몇 가지 전제 조건을 충족해야 합니다. Qwik은 JavaScript 프레임워크이므로 Node.js(및 NPM)을 설치해야 합니다. 최신 버전을 다운로드할 수 있지만 v16.8보다 높은 버전이면 작동합니다. 버전 20을 사용하겠습니다.

다음으로 API에 액세스하려면 OpenAI 계정도 필요합니다.

이 시리즈의 끝에서는 애플리케이션을 VPS(Virtual Private Server)에 배포하겠습니다. 어떤 제공자를 선택하든 우리가 따르는 단계는 동일해야 합니다. 저는 Akamai의 클라우드 컴퓨팅 서비스(이전 Linode)를 사용할 예정입니다.

Qwik 앱 설정

전제 조건을 충족한다고 가정하면 명령줄 터미널을 열고 다음 명령을 실행할 수 있습니다. 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:>npm create qwik@latest. 그러면 애플리케이션을 부트스트랩하는 데 도움이 되는 Qwik CLI가 실행됩니다.

예:

让我们创建一个 Qwik 应用程序 ✨ (v1.2.7)您想在哪里创建新项目？（使用“.”或“./”表示当前目录）：与在 /home/austin/code/versus 中创建新项目选择启动器：空应用程序您想安装 npm 依赖项吗？是的初始化一个新的git存储库？是的正在完成安装。想听个笑话吗？是的，大花对小花说了什么？嗨，伙计！

모든 것이 괜찮다면 프로젝트를 열고 탐색을 시작하세요.

프로젝트 폴더에는 몇 가지 중요한 파일과 폴더가 있습니다:

/src<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>/src：包含所有应用业务逻辑
/src/components: 모든 애플리케이션 비즈니스 로직

/src/comComponents🎜

/src/routes：负责Qwik的基于文件的路由；每个文件夹代表一个路由（可以是页面或 API 端点）。要创建页面，请将index.{jsx|tsx}文件放入路线的文件夹中。
/src/root.tsx：该文件导出负责生成 HTML 文档根的根组件。

开始开发

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

要启动开发服务器，我们可以在终端中打开项目并执行命令npm run dev。开发服务器运行后，您可以打开浏览器并访问http://localhost:5173: Qwik의 파일 기반 라우팅을 담당합니다. 각 폴더는 경로를 나타냅니다(페이지 또는 API 엔드포인트일 수 있음). 페이지를 만들려면 index.{jsx|tsx}

파일을 경로 폴더에 복사합니다.

🎜🎜

<span style="font-family: 宋体, SimSun;">🎜: 이 파일은 HTML 문서 루트 생성을 담당하는 루트 구성 요소를 내보냅니다. 🎜🎜🎜<h2 style="box-sizing: border-box; 글꼴 가족: " helvetica neue arial sans-serif rgb margin-top: text-wrap: background-color:>🎜개발 시작 🎜</h2>🎜<span style="font-family: 宋体, SimSun; 글꼴 크기: 14px;"><span style="font-size: 14px; 글꼴-가족: 宋体, SimSun; 상자 크기: border-box; 수직 정렬: 상속;">Qwik은 🎜Vite<span style="font-size: 14px; 글꼴-가족: 宋体, SimSun;">번들러로서 Vite에는 개발 서버가 내장되어 있어 편리합니다. 이는 애플리케이션을 로컬에서 실행하고 파일이 변경될 때 브라우저를 업데이트하는 것을 지원합니다. 🎜🎜🎜🎜🎜개발 서버를 시작하려면 터미널에서 프로젝트를 열고 🎜<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, " courier new rgb><span style=" 글꼴-가족: 宋体, SimSun; 글꼴 크기: 14px;">npm run dev🎜</span>

🎜. 개발 서버가 실행되면 브라우저를 열고 🎜http://localhost:5173🎜🎜 그러면 매우 기본적인 응용 프로그램이 표시됩니다. 🎜🎜🎜🎜 애플리케이션을 변경할 때마다 해당 변경 사항이 거의 즉시 브라우저에 반영되는 것을 확인해야 합니다. 🎜🎜

Add Styles

이 프로젝트는 스타일에 너무 중점을 두지 않으므로 자신만의 작업을 하고 싶다면 이 부분은 완전히 선택 사항입니다. 간단하게 하기 위해 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:>npm run qwik addnpm run qwik add /코드>.

예:

🎜

您想要添加什么集成？- 适配器：Cloudflare Pages- 适配器：AWS Lambda- 适配器：Azure Static Web Apps- 适配器：Netlify Edge- 适配器：Vercel Edge- 适配器：Google Cloud Run 服务器- 适配器：Deno Server- 适配器： Node.js Express 服务器- 适配器：Node.js Fastify 服务器- 适配器：Node.js 服务器- 适配器：静态站点（.html 文件）- 集成：Builder.io- 集成：Cypress- 集成：Storybook- 集成：Auth.js （身份验证）- 集成：Orama（全文搜索引擎）- 集成：PandaCSS（样式）- 集成：Playwright（E2E 测试）- 集成：PostCSS（样式）- 集成：Prisma（数据库 ORM）- 集成：Styled-Vanilla -提取（样式）-集成：Tailwind（样式）（在 Qwik 应用程序中使用 Tailwind）-集成：Turso（数据库）-集成：Vitest（单元测试）

화살표 키를 사용하여 Tailwind 플러그인으로 이동한 다음 Enter 키를 누를 수 있습니다. 그런 다음 코드 베이스에 적용될 변경 사항을 표시하고 확인을 요청합니다. 모양이 좋아지면 Enter를 다시 누를 수 있습니다.

准备好？将 tailwind 添加到您的应用程序？修改- package.json- .vscode/settings.json- src/global.css 创建- postcss.config.js- tailwind.config.js 安装 npm 依赖项：- autoprefixer ^10.4.14- postcss 8.4.27 - tailwindcss 3.3.3准备好将 tailwind 更新应用到您的应用程序了吗？- 是的，看起来不错，完成更新！

저는 프로젝트에 일관된 테마를 갖고 싶어서 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:>/src/global.css。您可以替换旧样式，但保留 Tailwind 指令。

准备主页

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

删除head/src/global.css

. 이전 스타일을 바꿀 수 있지만 Tailwind 지시어는 유지하세요. 🎜

🎜홈페이지 준비🎜 🎜🎜프로젝트를 잘 시작하기 위해 오늘 우리가 마지막으로 하고 싶은 일은 홈페이지를 약간 변경하는 것입니다. 🎜🎜제가 만들고 싶은 변경 사항은 다음과 같습니다: 🎜🎜

🎜Delete🎜`🎜head🎜`🎜Export🎜🎜

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

添加一些 Tailwind 类以将内容居中并使内容`h1`更大

用标签包裹内容`main`以使其更具语义

将 Tailwind 类添加到`main`을 제외한 모든 텍스트를 제거하세요. 페이지 제목 텍스트를 자유롭게 추가하세요.

tailwind 클래스를 추가하여 콘텐츠를 중앙에 배치하고 콘텐츠를 만듭니다. h1

Bigger

태그로 콘텐츠 감싸기

<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; 🎜 🎜 패딩을 추가하고 콘텐츠를 중앙에 배치하는 태그 🎜🎜🎜🎜🎜🎜 이는 꼭 필요한 것은 아니지만 몇 가지 사소한 변경 사항이지만 다음 문서에서 앱을 구축하는 데 유용할 것이라고 생각합니다. 좋은 시작을 제공합니다. 가리키다. 🎜🎜🎜🎜파일을 변경한 후의 모습입니다. 🎜🎜🎜🎜🎜🎜

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

로그인 후 복사

🎜🎜브라우저에서: 🎜🎜