인공지능 네트워크 애플리케이션 구축 방법을 단계별로 가르쳐주세요!

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

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

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

미리보기:

준비

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

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

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

Qwik 앱 설정

전제 조건을 충족한다고 가정하면 명령줄 터미널을 열고 다음 명령을 실행할 수 있습니다. <span style="font-family: 宋体, SimSun; 글꼴 크기: 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. /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; 글꼴 크기: 14px;">/src/comComponents🎜</span>🎜： 빌드할 재사용 가능한 구성 요소가 포함되어 있습니다. 우리의 애플리케이션 🎜🎜

3. <span style="font-family: 宋体, SimSun;" courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">/src/routes</span></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; ">index.{jsx|tsx}</span>

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

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:><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

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

1. 🎜Delete🎜🎜head🎜🎜Export🎜🎜

2. <span style="font-family: 宋体, SimSun; 글꼴 크기: 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; 글꼴 크기: 14px;">h1</span>

Bigger

태그로 콘텐츠 감싸기

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>
  );
});