从零到令人惊叹：构建初学者友好的 Angular GPT 支持的应用程序

第 1 部分：简介？️

本文是关于什么的

欢迎来到构建您的第一个 Angular 应用程序的激动人心的旅程！本文专为想要深入 Web 开发世界的初学者而设计。我们将共同构建一个由 OpenAI 的 GPT API 提供支持的简单但功能强大的聊天应用程序。在此过程中，您将发现流行的前端框架 Angular 如何帮助开发人员创建可扩展的现代 Web 应用程序。

无论您是编码新手还是刚刚开始使用 Angular，本文都将指导您完成每一步，确保不需要任何经验。

为什么是角？

Angular 是用于构建交互式和动态 Web 应用程序的最通用的框架之一。这就是我们为这个项目选择它的原因：

• 初学者友好：Angular 提供了结构化且一致的开发体验，使其成为那些刚刚起步的人的绝佳选择。
• TypeScript 集成：它利用 TypeScript（JavaScript 的强类型超集）来提高生产力并在开发过程中捕获错误。
• 强大的生态系统：凭借内置依赖注入、可重用组件和活跃社区等功能，Angular 使您能够构建专业级应用程序。

你将取得什么成就

读完本文，您将拥有：

1. 功能齐全的 GPT 支持的应用程序：一个简单的交互式聊天应用程序，用户可以在其中提出问题并从 OpenAI 的 GPT 模型接收回复。
2. Angular 知识：对 Angular 组件、服务和配置如何组合在一起创建 Web 应用程序的基本了解。
3. API 集成体验：了解如何通过 HTTP 请求将 Angular 应用程序连接到外部 API，例如 OpenAI 的 GPT。

这篇文章有何特别之处

与许多教程不同，本指南不仅引导您创建应用程序，还为每个步骤提供清晰的解释，帮助您掌握 Angular 的基本概念。到最后，您不仅将拥有一个可以运行的应用程序，而且还将有信心构建自己的项目。

？ 准备好开始编码了吗？在下一节中，我们将探索构建此应用程序所需的基本工具和设置。

？ 完整代码存储库：您可以在此处找到本教程的完整源代码。

第 2 部分：准备学习 Angular：成为 Angular 开发人员

在开始构建 Angular GPT 支持的应用程序之前，准备好环境并熟悉将要使用的工具和概念非常重要。本部分将逐步指导您，以确保顺利的设置和学习体验。

你首先需要学习什么

要构建 Angular 应用程序，您需要掌握一些基本技能：

1. HTML 和 CSS

• 它们是什么：
  • HTML（超文本标记语言）定义网页的结构。
  • CSS（层叠样式表）用于设置内容的样式。
• 为什么它们很重要： Angular 组件依赖 HTML 模板和 CSS 样式来定义其结构和外观。
• 资源：
  • 适合初学者的 HTML 和 CSS：文章
  • HTML 速成课程：视频

2.打字稿

• 它是什么： TypeScript 是 JavaScript 的强类型超集，Angular 使用它来增强代码质量和可维护性。
• 为什么重要： Angular 使用 TypeScript 来实现类型检查、接口和装饰器等功能。
• 资源：
  • TypeScript 官方文档
  • 打字稿速成课程：视频

3.Node.js

• 它是什么：
  Node.js 是 Angular 用于管理依赖项和运行开发工具的 JavaScript 运行时。

• 如何安装：

1. 从 Node.js 官方网站下载适合您操作系统的安装程序。
2. 按照说明完成安装。
3. 验证安装：

   node -v
   npm -v

4.Git 基础知识

• 它是什么： Git 是一个版本控制系统，可让您跟踪更改并有效协作。
• 关键步骤：
  1. 安装 Git：Git 安装指南。
  2. 初始化存储库：

   git init

• 资源：
  • Git 基础知识指南

设置 Angular CLI

Angular CLI（命令行界面）是一个强大的工具，可以帮助您轻松搭建和管理 Angular 项目。

1. 使用 npm 全局安装 Angular CLI：

   npm install -g @angular/cli

1. 验证安装：

   ng version

1. 资源：
   • Angular CLI 文档

获取您的 OpenAI API 密钥

您需要一个 API 密钥才能将 Angular 应用连接到 OpenAI 的 GPT API。

1. 创建一个OpenAI帐户：
   • >在Openai注册。
2. 生成您的API键：
   • >导航到API键部分。
   • >单击创建新键并复制生成的键。

⚠️重要：保持私人的api键以避免未经授权的访问。

>

熟悉角度

花时间了解Angular的结构和生态系统。以下是一些有用的资源：

1. 官方教程：
：
3. >在整个旅程中使用官方文档作为参考。
   • 社区加入
   ：
4. 堆栈溢出 - 角问题
   >角度不和谐社区
   • ：与开发人员互动以提出问题并分享知识。
   • ？ >您已经准备好了！
   >在设置和基础知识的情况下，您准备开始计划以GPT为动力的应用程序。

下一步：

第3节：计划GPT驱动的聊天应用。

第3节：计划GPT驱动的聊天应用程序

在进行编码之前，必须制定一个明确的计划。在本节中，您将了解应用程序的目的，所涉及的技术以及该应用程序的运行方式。

该应用的概述 的目标是构建

gpt供电的聊天接口

，该聊天接口

允许用户发送提示并从OpenAI的GPT API接收响应。该应用将在引入关键角度概念的同时着重于简单性和可用性。

关键功能：

一个用户友好的聊天接口。

与OpenAI的GPT API集成以处理提示并生成响应。 一个响应式设计，可提供更好的可用性。

您将使用的技术

将此应用程序栩栩如生，您将依靠以下技术：>
• Angular
• ：

>您将利用角度特征，例如组件

>，

> services

和
1. 依赖项注入

   。

   • > OpenAi的GPT API
   ： gpt API将为聊天机器人的响应提供动力。> >您将使用聊天完成API发送和接收用户提示。
2. 应用程序如何工作

   这是您的应用程序如何运行的分步分类：>

   1. 用户输入：
      • 用户在聊天输入字段中输入提示。
   2. API 请求：
      • 输入使用 Angular 的 HTTP 客户端服务发送到 OpenAI 的 GPT API。
   3. 响应处理：
      • GPT API 根据提示生成响应并发回。
   4. 显示响应：
      • 回复显示在聊天界面中供用户查看。

   发展准备

   API密钥提醒：

   在继续之前，请确保您已：

   1. 已注册 OpenAI 帐户。
   2. 已生成并安全保存您的 API 密钥。您需要它来在您的应用中配置 GPT 服务。

   ？ 后续步骤：现在您已经有了计划，是时候在第 4 部分：设置 Angular 项目中设置 Angular 项目了。

   太棒了！准备好继续第 4 部分：设置 Angular 项目。让我们完成它吧！ ??️

   第 4 部分：设置 Angular 项目

   环境准备就绪并制定了明确的计划后，是时候为 GPT 支持的 Angular 应用程序创建基础了。在本部分中，您将设置 Angular 项目，探索其结构，并确保一切正常运行。

   安装 Angular CLI

   如果您尚未安装 Angular CLI，请快速回顾一下：

   1. 打开终端并运行以下命令以全局安装 CLI：

      node -v
      npm -v
   

   1. 验证安装：

      git init
   

   创建和探索您的项目

   1. 生成一个新项目：
      • 使用 Angular CLI 搭建一个新项目：

      npm install -g @angular/cli
   

   1. 导航到您的项目目录：
      • 创建项目后，进入项目文件夹：

      ng version
   

   项目结构概览

   Angular 生成默认的项目结构。以下是关键文件夹和文件：

   • src/app：
     • 应用程序代码所在的主文件夹。
     • 您将在这里创建组件、服务和模块。
   • angular.json：
     • Angular 应用程序的配置文件。
   • package.json：
     • 列出项目的所有依赖项和脚本。
   • 节点模块：
     • 包含应用程序的所有已安装依赖项。

   理解这个结构将帮助您在开发过程中导航您的项目。

   首次运行：测试您的设置

   1. 启动 Angular 开发服务器：

      node -v
      npm -v
   

   1. 打开浏览器并导航至：

      git init
   

   1. 您应该看到默认的 Angular 应用程序正在运行。如果页面加载成功，则您的设置已完成！

   ？ 后续步骤：基础到位后，是时候在第 5 部分：构建聊天应用程序中开始构建 GPT 支持的聊天应用程序的核心功能了。

   第 5 部分：构建 GPT 支持的 Angular 聊天应用程序

   现在您的 Angular 项目已设置完毕，是时候构建核心功能了：GPT 支持的聊天应用程序。在本部分中，您将创建一个聊天组件，实现 GPT 服务，并将它们连接在一起以获得功能齐全的体验。

   创建聊天组件

   Angular 组件是应用程序的构建块。请按照以下步骤创建独立的聊天组件：

   1. 生成组件：
      • 使用 Angular CLI 生成独立的聊天组件：

      npm install -g @angular/cli
   

   1. 发生了什么：
      • 此命令会在 src/app/components/chat/ 中创建以下文件：
        • chat.component.ts（逻辑和结构）
        • chat.component.html（HTML 模板）
        • chat.component.css（样式）

   更新聊天组件模板

   要创建聊天界面，请更新chat.component.html：
   

      ng version
   

   说明：

   1. 依赖注入：GptService 通过构造函数注入到组件中。
   2. 双向绑定：userInput 变量绑定到 上。用于无缝输入处理。
   3. API 集成：sendPrompt() 函数调用 GPT 服务、处理响应并更新响应变量。

   创建 GPT 服务

   Angular 中的服务管理可跨组件重用的数据和逻辑。请按照以下步骤创建和配置 GPT 服务：

   1. 生成服务：
      • 运行以下命令：

      npm install -g @angular/cli
   

   1. 更新 GPT 服务逻辑：
      • 打开 src/app/services/gpt.service.ts 并更新如下：

      ng version
   

   说明：

   1. > httpclient：用于将http请求发送到OpenAI的GPT API。
   2. > generateStresponse（）：将用户提示发送到API，并返回具有响应的可观察到的。
   API键
   3. ：用实际的OpenAI API键替换'your-api-key-here'。
   样式聊天组件

   >向chat.component.css添加基本样式：

   
   

      node -v
      npm -v
   

   说明

   ：

   聊天容器将聊天接口中心。
   • textarea和按钮样式可确保可用性和美观。
   >
   使用环境变量保护您的API密钥

   >硬编码敏感数据（例如服务文件中的API键）是有风险的。一种更好的方法是使用

   >环境变量

   来确保密钥安全。本节将指导您如何在Angular Project中设置和使用环境文件。> 步骤1：创建环境文件

   >导航到项目中的SRC/目录。
   >创建一个名为Environments的新文件夹，如果它尚不存在。
   1. >
   在环境/文件夹中，创建两个文件：
   环境.TS：用于开发设置。
   3. 环境.prod.ts：用于生产设置。
      步骤2：添加您的API密钥

   >打开环境文件并定义您的API密钥：

   >打开环境.prod.ts文件并添加相同的生产密钥：

      git init
   

   步骤3：更新GPT服务

      npm install -g @angular/cli
   

   ---

   >修改gpt.service.ts文件以使用环境变量，而不是硬编码的API键：

   
   

   步骤4：防止敏感数据被提交

      ng version
   

   ---

   >在您项目的根目录中打开.gitignore文件。>

   >添加以下行以忽略您的环境文件：
   2. 这确保您的API键和敏感数据不会包含在版本控制中。
   步骤5：共享环境设置说明

      npm install -g @angular/cli
   

   >在团队工作或共享项目时，请提供有关如何创建和配置环境文件的明确说明（如本节）。避免共享实际的API键。

   ---

   ？

   为什么使用环境变量？ 这种方法可确保您的敏感信息安全，同时允许用于开发和生产环境的不同配置。这是现代网络开发的最佳实践。
   ？

   ---

   下一步

   ：既然聊天组件和gpt服务已经准备就绪，则将组件集成到第6节中的应用程序中：测试您的应用程序。

   第6节：测试您的应用程序

   >现在构建了GPT供电的聊天应用程序，现在该测试它并确保一切正常工作了。本节将指导您在本地运行应用程序，测试其功能并解决常见问题。

   本地运行应用程序
   启动开发服务器：

      node -v
      npm -v
   

   >打开浏览器并导航至：

      git init
   

   1. 您应该看到的：>

   

   默认的Angular应用程序应加载中心的自定义GPT供电的聊天组件。
   如果您可以与聊天接口进行交互并从API中获得响应，恭喜！您的应用程序正在工作。
   • >
   与聊天接口交互
   在聊天输入字段中输入消息或问题。
   单击
   2. >发送按钮。>
   等待GPT API响应。答复应显示在输入下方的响应区域中。

   

   故障排除提示
   如果某些内容无法按预期工作，请使用以下清单调试您的应用程序：>

   常见问题和解决方案

   页面不加载
   1. ： 在运行NG服务时检查终端输出是否错误。
      确保安装所有依赖性：
   GPT API

      npm install -g @angular/cli
   

   1. 没有响应：

      > >在环境中验证您的API键。

      >在您的GPT服务URL中检查错字（https://api.openai.com/v1/chat/completions）。
      确保您包含了必要的标题（授权和内容类型）。>
      • CORS问题
      ：
   2. 确保您的浏览器不会阻止由于交叉原始资源共享（CORS）而阻止API请求。

      > 如果需要，请使用浏览器扩展名或配置后端以允许CORS。

      控制台中的错误
      在浏览器开发人员控制台中查找错误消息。
      • >
      如果错误与API有关，请仔细检查您的服务配置。
      >

   3. 样式问题

      ：
      确保正确应用Chat.component.css中的样式。
      • >
      使用浏览器开发人员工具检查DOM和调试CSS。

   4. ？ > Pro Tip：定期检查终端和浏览器控制台是否有任何警告或错误。这些通常为故障排除提供了有用的提示。

      ？ 后续步骤：一旦您的应用程序经过测试并正常运行，您可以在第 7 部分：采取后续步骤中进一步增强它。

      第 7 节：采取后续步骤

      恭喜！您已经使用 Angular 成功构建并测试了由 GPT 支持的聊天应用程序。现在，让我们探索 Angular 特定的增强功能和技术，以提升您的应用程序并扩展您的技能。

      增强您的应用程序

      1. 加载指示器：

         • 通过在等待响应时添加加载微调器或消息来改善用户体验。
         • 使用 Angular 的 *ngIf 指令在 HTTP 调用期间有条件地显示微调器。

      2. 使用角度材质进行样式:

         • 使用 Angular Material 组件增强应用的外观。
         • 安装角度材质：

         node -v
         npm -v
      

      • 添加按钮、输入字段和对话框等预构建组件，以获得精美的外观。
      • ?️ 资源：Angular 材质文档。
      1. 表单验证：
         • 对用户输入进行验证，以确保提示符合标准（例如非空、字符限制）。
         • 使用 Angular 的 FormBuilder 和反应式表单来管理表单状态和验证逻辑。

         git init
      

      1. 共享组件的可重用性:

         • 将可重用的 UI 元素（例如按钮或输入字段）提取到共享组件中。
         • 在应用程序的多个部分使用这些组件以保持一致性。

      2. 路由:

         • 向您的应用添加多个页面，例如用于自定义的设置页面或用于用户指导的帮助页面。
         • 使用 Angular Router 在这些页面之间进行设置和导航。
         • ?️ 资源：Angular 路由指南。

      3. 状态管理:

         • 使用 Angular 服务或 NgRx 等状态管理库管理应用程序范围内的状态，例如聊天历史记录或用户首选项。
         • ?️ 资源：NgRx 简介。

      连接到其他端点

      学习如何使用 API 是 Angular 开发的一项关键技能。通过将其他端点集成到您的应用程序中进行练习：

      1. REST API 集成:

         • 尝试连接公共 API，例如天气或新闻 API。
         • 使用 Angular 的 HttpClient 获取数据并在您的应用程序中动态显示它。
         • ?️ 资源：Angular HTTPClient 指南。

      2. CRUD 操作:

         • 构建一个简单的功能来使用 RESTful API 创建、读取、更新和删除数据。
         • 练习构建用于输入的表单、用于数据显示的列表以及编辑/删除功能。

      3. 错误处理:

         • 学习在 rxjs 中使用 Angular 的 catchError 运算符优雅地处理 API 错误。
         • 显示用户友好的错误消息以提高可用性。

      分享你的工作

      1. 部署您的应用程序：

         • 使用 Firebase、Vercel 或 Netlify 等平台托管您的应用。
         • ?️ 资源：Angular 部署指南。

      2. 与他人合作：

         • 在 GitHub 上分享您的代码并邀请 Angular 社区提供反馈或贡献。
         • 包含包含设置说明和项目概述的自述文件。

      ？ 后续步骤：
      不断完善您的应用程序，尝试 Angular 的功能，并构建更多项目来加深您的理解。 Angular 提供了强大的工具来构建动态且可扩展的 Web 应用程序 - 掌握它们是您的下一个里程碑！

      第 8 节：结论

      你已经走了很长的路了！从设置开发环境到构建和测试 GPT 支持的聊天应用程序，您已经成功迈出了 Angular 开发的第一步。在此过程中，您学习了创建组件、管理服务和集成 API 等关键技能。

      你已经取得了什么成就

      • 构建功能性 Angular 应用程序：您使用 Angular 强大的框架和工具创建了一个由 GPT 支持的聊天界面。
      • 学习了 Angular 基础知识：从组件到依赖注入，您已经探索了 Angular 的核心功能。
      • 连接到外部API：您集成了第三方API并有效处理HTTP请求和响应。
      • 遵循最佳实践：通过使用环境变量和安全开发技术，您已经采用了专业的编码标准。

      号召性用语

      您的 Angular 开发之旅才刚刚开始。以下是您如何不断进步的方法：

      1. 定期练习：

         • 构建更多项目来巩固您对 Angular 概念的理解。
         • 尝试路由、状态管理和动画等功能。

      2. 探索高级 Angular 主题:

         • 了解延迟加载、优化性能和测试 Angular 应用程序。
         • ？️ 资源：
           • Angular 高级主题。
           • Angular 与人工智能

      3. 加入社区：

         • 与其他 Angular 开发者互动以获得灵感和支持。
         • 为开源 Angular 项目做出贡献，以提高您的技能。

      4. 保持更新：

         • Angular 是一个不断发展的框架。关注 Angular 官方博客和社区渠道，随时了解新功能和最佳实践。

      鼓励

      开始新事物可能会令人畏惧，但请记住：每个专家都曾经是初学者。随着您的不断构建和成长，您在学习 Angular 上所付出的努力将会得到回报。凭借您现在拥有的资源和知识，您已经准备好应对更雄心勃勃的项目。

      ？ 继续建设：网络开发的世界广阔且充满机遇。 Angular 只是开始——更深入地研究、实验，让您的想法变成现实。如果有任何问题请随时提问或做出贡献，非常欢迎您！

      ？ 探索代码：该项目的完整源代码可在 GitHub 上找到。请随意克隆、修改或为项目做出贡献！

以上是从零到令人惊叹：构建初学者友好的 Angular GPT 支持的应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！