從零到令人驚嘆：建立初學者友好的 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 GPT動力應用程序之前，重要的是要準備環境並熟悉您將使用的工具和概念。本節指導您分步以確保平穩的設置和學習經驗。

您需要先學習的內容

要構建一個角度應用，您需要獲得一些基礎技能：>

1。 HTML和CSS

他們是什麼

：
• html（超文本標記語言）定義了您的網頁的結構。
  > css（級聯樣式表）用於樣式。
  • >
  為什麼它們很重要
： 角組件依賴於HTML模板和CSS樣式來定義其結構和外觀。
• >資源：
初學者
• html和CSS：文章 HTML速成課程：視頻
  2。打字稿

是什麼

： Typescript是JavaScript的強烈鍵入的超集，Angular用來提高代碼質量和可維護性。

>
• 為什麼很重要： Angular使用打字稿用於類型檢查，接口和裝飾器等功能。
• >資源：
打字稿官方文檔
• 打字稿速成課程：視頻
  • 3。 node.js

是什麼是

：

> Node.js是Angular用於管理依賴關係並運行開發工具的JavaScript運行時。

• 如何安裝：
  >

• >從node.js官方網站下載安裝程序。

  > 遵循說明完成安裝。

  >驗證安裝：

1. 4。基礎知識
3. 是什麼
： GIT是一個版本控制系統，可讓您有效跟踪更改並進行協作。 >

   node -v
   npm -v

關鍵步驟

：

>安裝git：git安裝指南。
• >初始化一個存儲庫：
• >資源
  2. ：
  > git基礎指南

   git init

• 設置角CLI
  • >使用NPM在全球安裝Angular CLI：

>驗證安裝：

>資源

：

   npm install -g @angular/cli

   ng version

獲取您的OpenAI API密鑰

1. >您需要一個API鍵將Angular應用程序連接到OpenAI的GPT API。
   1. 創建一個OpenAI帳戶：
      • >在Openai註冊。
   2. 生成您的API鍵：
      • >導航到API鍵部分。
      • >單擊創建新鍵並複制生成的鍵。

   ⚠️重要：保持私人的api鍵以避免未經授權的訪問。

   >

   熟悉角度

   花時間了解Angular的結構和生態系統。以下是一些有用的資源：

   1. 官方教程：
   ：
2. >在整個旅程中使用官方文檔作為參考。
   • 社區加入
   ：
3. 堆棧溢出 - 角問題
   >角度不和諧社區
   • ：與開發人員互動以提出問題並分享知識。
   • ？ >您已經準備好了！
   >在設置和基礎知識的情況下，您準備開始計劃以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應用程式運行。如果頁面成功加載，您的設定已完成！
   >

   ？ 下一步：在原始基礎之後，是時候開始建立GPT供電聊天應用程式的核心功能，第5節：建立聊天應用程式。 第5節：建立GPT驅動的角度聊天應用程式

   >現在已經設定了Angular專案了，該建立核心功能了：GPT驅動的聊天應用程式。在本節中，您將建立一個聊天元件，實現GPT服務，然後將它們連接在一起以獲得功能齊全的體驗。

   建立聊天元件

   生成組件

   ：
   1. >使用Angular CLI產生獨立的聊天元件：
   發生了什麼事：

      npm install -g @angular/cli
   

   此指令在src/app/components/chat/：中建立以下檔案：
   1. chat.component.ts（邏輯與結構）
      chat.component.html（html模板）
      • chat.component.css（樣式）
        更新聊天元件模板
      要建立聊天介面，更新chat.component.html：
   說明

   ：
   

      ng version
   

   依賴注入：透過建構子將gptservice注入元件。 >

   >雙向綁定
   1. ：UserInput變數綁定到＆lt; textarea＆gt;用於無縫輸入處理。
   api Integration
   2. ：sendPrompt（）函數呼叫gpt服務，處理回應並更新回應變數。
   創建GPT服務
   3. 角度管理資料和邏輯中的服務可以跨元件重複使用。請依照下列步驟建立並設定GPT服務：>
   生成服務
   ：
   執行以下命令：
   1. • >更新GPT服務邏輯
      ：
   >開啟SRC/App/services/gpt.service.ts，並依照下列方式更新：

      npm install -g @angular/cli
   

   1. 說明
      • ：
      1. HttpClient：用於向 OpenAI 的 GPT API 發送 HTTP 請求。
      2. generateResponse()：將用戶提示發送到 API 並返回一個可觀察的響應。
      3. API 密鑰：將“your-api-key-here”替換為您的實際 OpenAI API 密鑰。

      設置聊天組件的樣式

      向chat.component.css添加基本樣式：
      

         node -v
         npm -v
      

      說明：

      • 聊天容器以聊天界面為中心。
      • 文本區域和按鈕樣式確保可用性和美觀。

      使用環境變量保護您的 API 密鑰

      在服務文件中硬編碼 API 密鑰等敏感數據是有風險的。更好的方法是使用環境變量來保證密鑰的安全。本節將指導您如何在 Angular 項目中設置和使用環境文件。

      第1步：創建環境文件

      1. 導航到項目中的 src/ 目錄。
      2. 創建一個名為environments的新文件夾（如果它尚不存在）。
      3. 在environments/文件夾中，創建兩個文件：
         • environment.ts：用於開發設置。
         • environment.prod.ts：用於生產設置。

      第 2 步：添加您的 API 密鑰

      1. 打開environment.ts文件並定義您的API密鑰：

         git init
      

      1. 打開environment.prod.ts文件並添加與生產相同的密鑰：

         npm install -g @angular/cli
      

      ---

      步驟 3：更新 GPT 服務

      修改 gpt.service.ts 文件以使用環境變量而不是硬編碼的 API 密鑰：
      

         ng version
      

      ---

      第 4 步：防止敏感數據被洩露

      1. 打開項目根目錄中的 .gitignore 文件。
      2. 添加以下行以忽略您的環境文件：

         npm install -g @angular/cli
      

      這可確保您的 API 密鑰和敏感數據不會包含在版本控制中。

      ---

      第 5 步：共享環境設置說明

      在團隊工作或共享項目時，提供有關如何創建和配置環境文件的清晰說明（如本節）。避免共享實際的 API 密鑰。

      ---

      ？ 為什麼使用環境變量？
      
      這種方法可以保證您的敏感信息的安全，同時允許對開發和生產環境進行不同的配置。這是現代 Web 開發的最佳實踐。

      ？ 後續步驟：現在聊天組件和 GPT 服務已準備就緒，您將在第 6 部分：測試您的應用程序中將該組件集成到您的應用程序中。

      第 6 部分：測試您的應用程式

      現在您的 GPT 支援的聊天應用程式已經建置完成，是時候對其進行測試並確保一切按預期工作。本部分將指導您在本地運行應用程式、測試其功能以及排除常見問題。

      在本地運行應用程式

      1. 啟動開發伺服器：

         node -v
         npm -v
      

      1. 開啟瀏覽器並導航至：

         git init
      

      1. 你應該看到什麼：

      

      • 預設的 Angular 應用程式應在中心載入由您的自訂 GPT 驅動的聊天元件。
      • 如果您可以與聊天介面互動並從 API 獲得回應，那麼恭喜您！您的應用程式正在運行。

      與聊天介面交互

      1. 在聊天輸入欄位中輸入訊息或問題。
      2. 點選發送按鈕。
      3. 等待 GPT API 回應。回應應顯示在輸入下方的回應區域。

      

      故障排除技巧

      如果某些功能未如預期運作，請使用以下清單來偵錯您的應用程式：

      常見問題及解決方案

      1. 頁面無法載入：
         • 執行 ngserve 時檢查終端輸出是否有錯誤。
         • 確保安裝了所有依賴項：

         npm install -g @angular/cli
      

      1. GPT API 沒有回應:

         • 驗證environment.ts檔案中的API金鑰。
         • 檢查 GPT 服務 URL (https://api.openai.com/v1/chat/completions) 中的拼字錯誤。
         • 確保您已包含必要的標頭（授權和內容類型）。

      2. CORS 問題：

         • 確保您的瀏覽器不會因跨來源資源共用 (CORS) 而阻止 API 要求。
         • 如果需要，請使用瀏覽器擴充功能或設定後端以允許 CORS。

      3. 控制台錯誤：

         • 在瀏覽器開發者控制台中尋找錯誤訊息。
         • 如果錯誤與 API 有關，請仔細檢查您的服務配置。

      4. 樣式問題：

         • 確保 chat.component.css 中的樣式正確套用。
         • 使用瀏覽器開發者工具檢查 DOM 並除錯 CSS。

      ？ 專業提示：定期檢查終端機和瀏覽器控制台是否有任何警告或錯誤。這些通常為故障排除提供有用的提示。

      ？ 下一步：一旦測試了應用程序並實現了功能，您可以在第7節中進一步增強它：採取後續步驟。 第7節：採取下一步

      恭喜！您已經成功地使用了Angular構建並測試了一個由GPT驅動的聊天應用程序。現在，讓我們探索角度特定的增強功能和技術以提升您的應用程序並擴展您的技能。

      >

      增強您的應用程序

      1. 加載指示器

         ：

         在等待響應時添加加載旋轉器或消息來改善用戶體驗。
         >
         • >使用Angular的 *NGIF指令在HTTP調用期間有條件顯示旋轉器。
         用角材料
      2. >

         ：

         >通過角材料組件增強應用的外觀。
         >
         • 安裝角材料：

         node -v
         npm -v
      

      >添加預構建的組件，例如按鈕，輸入字段和對話框，以進行拋光外觀。
      • ？ ¶
      資源
      • ：角材料文檔。 >
      表格驗證
      1. ： >實施用戶輸入的驗證，以確保提示符合條件（例如，非空，角色限制）。
         • >使用Angular的FormBuilder和反應性形式來管理形式狀態和驗證邏輯。

         git init
      

      共享組件的可重複使用
      1. ：

         > 提取可重複使用的UI元素（例如按鈕或輸入字段）中的共享組件。

         >在應用程序的多個部分中使用這些組件來保持一致性。 >
         路由
      ：

      2. >在您的應用中添加多個頁面，例如用於自定義的設置頁面或用戶指導的幫助頁。 使用Angular路由器在這些頁面之間進行設置和導航。 >

         ？ ¶
         資源
         • ：角路由指南。
         • 狀態管理
         ：
      3. >使用Angular服務或狀態管理庫，例如NGRX。

         ？ ×資源：ngrx概論

         >
         • 連接到其他端點 學習如何使用API​​是角度發展的重要技能。通過將其他端點集成到您的應用中來練習：

      rest API Integration

      ：
      >實驗與公共API連接，例如天氣或新聞API。
      >使用Angular的HTTPClient獲取數據並在您的應用中動態顯示。

      1. >？ ️資源：Angular HttpClient指南。

         • crud操作
         ：
         • • 構建一個簡單的功能來使用 RESTful API 創建、讀取、更新和刪除數據。
           • 練習構建用於輸入的表單、用於數據顯示的列表以及編輯/刪除功能。

         • 錯誤處理:

           • 學習在 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中文網其他相關文章！