在前兩篇文章中，我們講了如何從基本的 HTML 和 CSS 開始，慢慢學習一些基礎，然後幫助我們可以進入專案實作。但對於許多新手來說，從零開始設計和撰寫程式碼還是不簡單，畢竟我們在寫程式的時候，CSS、TypeScript 和 HTML 會交互影響，對新手來說其實蠻複雜的。這時，AI 工具 可以成為你快速上手的助手。

在這篇文章中，我將分享如何使用 AI 工具，在這裡我選擇的是 ChatGPT 來幫助你生成一個基本的登入畫面。這不僅能讓你迅速進入專案開發，也能加速你對 CSS、TypeScript 和 HTML 的學習過程。我們將慢慢用 ChatGPT 生成的程式碼來幫助我們學習。

文章大綱：

1. 使用 AI 會不會影響學習效果？
2. 利用 ChatGPT 生成登入畫面
3. 利用 AI 的程式碼來學習：如何從 ChatGPT 生成的內容中吸取知識
4. 用 AI 加速學習的力量

1. 使用 AI 會不會影響學習效果？

使用 AI 工具雖然能快速生成程式碼，當然也會想到一些問題，特別是在學習過程中，我列出一些狀況，我們一起來看看吧。

1-1. AI 生成的程式碼不符合需求

AI 工具生成的程式碼有時可能不完全符合你想要的設計或需求，特別是在有比較細節的需求上。

這時我們不要太擔心，因為用 AI 產出的東西本來就很難在第一時間府和我們的需求，我們再進行額外的修改來達到預期效果就好。了解生成程式碼的基本邏輯，根據實際需求進行微調，並學習如何修改特定的部分，如樣式、邏輯或互動。

1-2. AI 生成的程式碼難以維護

有時 AI 生成的程式碼可能會太難導致不好理解，也會造成未來在修改程式碼維護專案的時出現問題。

但我們可以把這個也當成是一個學習過程，學習如何重構和優化程式碼，將生成的程式碼簡化，讓結構更清晰、易讀，便於日後維護和擴展。

1-3. 對生成程式碼的過度依賴

依賴 AI 生成程式碼可能讓開發者忽略學習過程中的核心知識，從而阻礙長期成長。

我們可以將 AI 視為輔助工具，對生成程式碼進行深入分析，從中學習 CSS、TypeScript 和 HTML 的運作方式，並嘗試手動優化 AI 生成的程式碼。

2. 利用 ChatGPT 生成登入畫面（Angular 框架）

我們現在來生成一個 Angular 框架中的登入頁面，這能幫助你同時學習 CSS、TypeScript 和 HTML。下面是使用 Angular 實現的最簡單登入畫面範例，這個頁面包含兩個輸入框（Email 和 密碼）以及一個提交按鈕

Prompt：

我使用的框架是 Angular，請生成一個最簡單的登入畫面。這個登入頁面應包含兩個輸入框（Email 和 密碼），還有一個提交按鈕。

以下就是 AI 產生出的內容：

步驟 1：建立登入元件

首先，使用 Angular CLI 命令生成一個登入元件：

ng generate component login

步驟 2：編輯 Login 元件的 HTML (login.component.html)

<div class="login-container">
  <form (ngSubmit)="onSubmit()">
    <label for="email">Email:</label>
    <input
      type="email"
      id="email"
      name="email"
      [(ngModel)]="email"
      required
      placeholder="輸入你的電子郵件"
    />

    <label for="password">密碼:</label>
    <input
      type="password"
      id="password"
      name="password"
      [(ngModel)]="password"
      required
      placeholder="輸入你的密碼"
    />

    <button type="submit">提交</button>
  </form>
</div>

步驟 3：編輯 Login 元件的 TypeScript (login.component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent {
  email: string = '';
  password: string = '';

  onSubmit() {
    if (this.email && this.password) {
      // 處理登入邏輯
      console.log('Email:', this.email);
      console.log('Password:', this.password);
    } else {
      console.log('請填寫所有欄位');
    }
  }
}

步驟 4：新增基本樣式 (login.component.css)

.login-container {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin: 0 auto;
}

input {
  margin-bottom: 10px;
  padding: 8px;
  font-size: 14px;
}

button {
  padding: 8px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

步驟 5：導入 FormsModule 模組

為了讓表單中的 ngModel 正常工作，你需要在應用中導入 FormsModule：

在 app.module.ts 中，加入以下內容：

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    // 你的元件
  ],
  imports: [
    // 其他模組
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

步驟 6：編輯 app.component.html

找到並打開 app.component.html，將 <app-login> 加到這裡：

<div>
  <h1>歡迎來到我們的應用程式</h1>
  <app-login></app-login>
</div>

3. 利用 AI 的程式碼來學習：如何從 ChatGPT 生成的內容中吸取知識

當我們使用 ChatGPT 生成程式碼後，下一步是深入學習如何閱讀這些程式碼，並了解其運作方式。AI 生成的程式碼可以幫助你快速進入開發狀態，但學習如何解讀程式碼的邏輯、樣式和結構是更重要的。這樣，你不僅能更快掌握 CSS、TypeScript 和 HTML，之後也才能修改裡面的內容。

3-1. 閱讀和理解 HTML 結構

首先，從最簡單的 HTML 開始。在這裡，我們看到生成的程式碼定義了一個登入表單，其中包含兩個輸入框（Email 和 密碼）以及一個提交按鈕。每一個標籤在這裡都有特定的作用：

• 標籤功能：了解 form、input 和 button 是如何工作的。label 用來描述每個輸入框，而 ngSubmit 則是 Angular 中用來處理表單提交的功能。
• 屬性解讀：required 是 HTML 的一個基本屬性，用來確保表單在提交前輸入框不為空。[(ngModel)] 是 Angular 的雙向資料綁定，可以將表單中的資料和 TypeScript 變數連接在一起。
• 逐行分析：嘗試閱讀程式碼，理解每一行的作用，這樣能幫助你逐步掌握 HTML 的基礎。

3-2. 探索 CSS 的樣式規則

接下來，看看程式碼中的 CSS 部分，這裡定義了頁面元件的樣式，包括登入表單的佈局和按鈕的樣式：

• 佈局：flex 是一個強大的佈局工具，學習它能幫助你快速設計網頁佈局。在這裡，flex-direction: column 則表示元素按列排列。
• 樣式改變：嘗試改變按鈕的顏色、邊框或大小，看看畫面效果如何改變。這有助於你熟悉 CSS 屬性如 margin、padding 和 background-color。
• 互動設計：button:hover 是一個偽類，可以設計滑鼠懸停時的效果，這樣能讓你更靈活地設計互動式的按鈕。

3-3. 深入理解 TypeScript 和邏輯處理

最重要的部分是 TypeScript，它處理了表單提交的邏輯。當使用者點擊提交按鈕時，onSubmit() 函數會檢查是否已填寫了 Email 和密碼。

• 變數定義：了解 TypeScript 如何定義變數類型（如 string）。這有助於在專案中避免因為變數類型不匹配而導致的錯誤。
• 條件邏輯：學習 if 條件語句，理解如何在表單提交時檢查資料是否完整。
• 函數學習：onSubmit() 是如何觸發的？你可以自己嘗試新增其他功能（如清除表單）來深入理解函數的操作。

3-4. 提升學習效果：解讀 ChatGPT 生成的程式碼

在你了解了程式碼的每個部分後，思考如何將這些技術應用到其他場景。當你需要更多進階的功能時，ChatGPT 也可以協助你生成程式碼。學會從 ChatGPT 的輸出中提取知識，分析並解釋每個程式碼片段的運作方式，這樣你的學習效果會大大提升。

4. 用 AI 加速學習的力量

透過 ChatGPT 生成登入頁面的範例程式碼，你可以更快進入開發狀態，並在此過程中學習 CSS、TypeScript 和 HTML 的實際應用。這種方式不僅能幫助你克服一開始學習的障礙，還能讓你更靈活地運用這些技術。

修改 AI 生成的程式碼是學習的關鍵，它能讓你更深入了解技術的細節，並通過實際應用加深理解。希望你能透過這些練習，加速學習並順利完成你的專案！加油！