ホームページ > 記事 > テクノロジー周辺機器 > 人工知能ネットワークアプリケーションを構築する方法を段階的に説明します。

人工知能ネットワークアプリケーションを構築する方法を段階的に説明します。

DDDオリジナル: 2023-09-18 10:35:421370ブラウズ

あなたも私と同じなら、人工知能テクノロジーの爆発的な発展に気づくでしょう。ソフトウェアエンジニアリングだけでなく、あらゆる業界に混乱をもたらすでしょう。

このシリーズでは、OpenAI の AI サービスを、回復可能性の概念に重点を置いた JavaScript フレームワークである Qwik で構築されたアプリケーションに統合する方法を学びます。

OpenAI と Qwik の詳細について説明しますが、使用しているフレームワークやツールチェーンに適用される一般的な知識、ツール、実装に主に焦点を当てます。できる限り基本に重点を置き、アプリケーションのユニークな部分についても説明します。

プレビュー:

##準備

何かを構築し始める前に、いくつかの前提条件を満たす必要があります。 Qwik は JavaScript フレームワークであるため、Node.js (および NPM) をインストールする必要があります。最新バージョンをダウンロードできますが、v16.8 以降であれば動作するはずです。バージョン20を使用します。

#次に、API にアクセスするための OpenAI アカウントも必要です。

このシリーズの最後では、アプリケーションを VPS (仮想プライベートサーバー) にデプロイします。どのプロバイダーを選択しても、従う手順は同じです。 Akamai のクラウドコンピューティングサービス (旧称 Linode) を使用します。

Qwik アプリケーションのセットアップ

前提条件を満たしていると仮定すると、コマンドラインターミナルを開いて次のコマンドを実行できます: npm では qwik@latest を作成します。これにより、アプリケーションのブートストラップに役立つ Qwik CLI が実行されます。＃＃＃＃＃＃＃＃＃＃＃＃例：＃＃＃＃＃＃

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

すべて問題なければ、プロジェクトを開いて探索を開始してください。

#プロジェクトフォルダーには、いくつかの重要なファイルとフォルダーがあることがわかります:

/src: すべてのアプリケーションビジネスロジックが含まれます
##/src/components: 再利用可能なコンポーネントが含まれますアプリケーションを構築するには
/src/routes: Qwik のファイルベースのルーティングを担当します。各フォルダーはルートを表します (ページまたは API エンドポイントにすることができます) ）。ページを作成するには、index.{jsx|tsx} ファイルをルートのフォルダーに配置します。
#/src/root.tsxx: このファイルは、HTML ドキュメントルートの生成を担当するルートコンポーネントをエクスポートします。。

開発の開始

Qwik は Vite をバンドラーとして使用します。 Viteには開発サーバーが内蔵されているので非常に便利です。これは、アプリケーションをローカルで実行し、ファイルが変更されたときにブラウザを更新することをサポートします。

#開発サーバーを起動するには、ターミナルでプロジェクトを開いてコマンド

npm run dev## を実行します。＃＃＃。開発サーバーが実行されたら、ブラウザを開いて http://localhost:5173 にアクセスすると、非常に基本的なアプリケーションが表示されるはずです。  アプリケーションに変更を加えると、その変更がほぼ即座にブラウザーに反映されることがわかります。

スタイルの追加

このプロジェクトではスタイルにはあまり焦点を当てていないため、独自のことを行いたい場合は、この部分は完全にオプションです。簡単にするために、Tailwind を使用します。

Qwik CLI を使用すると、ターミナルコマンドを実行して必要な変更を簡単に追加できますnpm 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 上のファイル /src/global.css。古いスタイルを置き換えることができますが、Tailwind ディレクティブは維持します。

ホームページの準備

プロジェクトを良いスタートを切るために、今日最後にやりたいことは、いくつかの変更を加えることです。ホームページをご覧ください。私が加えたい変更は次のとおりです:

Removehead # ＃＃輸出＃＃＃＃＃＃
h1 を除くすべてのテキストを削除します。独自のページタイトルテキストを自由に追加してください。
Tailwind クラスをいくつか追加してコンテンツを中央に配置し、h1大きくします
コンテンツをタグで囲みますmain より意味のあるものにします
Tailwind クラスを main#タグに追加してパディングを追加し、コンテンツを中央に配置します

これらは厳密には必要ではないいくつかの小さな変更ですが、次の記事の開始点でアプリケーションを構築するための良い出発点になると思います。

変更後のファイルは次のようになります。

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

ブラウザ内: