Trae AI編程課程

上門編程教學課程內容

課程簡介

本課程專注於 Trae IDE 這款由字节跳動推出的中文 AI 程式編輯器，讓學員在三小時內掌握 Builder 模式、Chat 模式、多模態交互 等核心功能，透過純中文對話快速生成、優化與部署完整應用程式。Trae 整合 Claude 3.5 Sonnet、GPT-4o 等先進模型，提供智能代碼生成、實時錯誤修復、內建 Webview 預覽與全代碼庫上下文理解，特別適合中文開發環境。課程強調實作導向，學員將親手建立一個前端後端整合專案（如圖片壓縮工具或漢諾塔遊戲），體驗從需求描述到程式上線的完整 AI 協作流程。

課程目標

1. 掌握 Trae 的雙模式操作（Builder/Chat）與中文提示工程技巧。

2. 能用自然語言生成多語言代碼（Python、JavaScript、HTML/CSS）。

3. 學習多模態交互（圖片轉代碼）、上下文引用與實時優化。

4. 完成具 Webview 預覽與部署功能的小型實用專案。

5. 建立「中文 AI 人機協同」的工作模式，為全棧開發奠基。

適合對象

• 中文開發者、初學者或具基礎程式概念的學生與成人進修者。

• 前端、後端開發者，希望提升中文環境下的開發效率。

• 設計師、產品經理或教師，想將 AI 編程應用於原型製作或教學。

• 企業團隊，欲導入中文友好的 AI 開發工具。

課程時長與授課方式

• 全長 3 小時。

• 理論講解約 30%，實作操作約 70%。

• 使用 Trae IDE 桌面應用（完全中文介面，免費無限使用）。

• 教學形式：環境設定、講師示範、個人實作與成果分享。

課程大綱

第一部分：Trae IDE 環境設定與基礎功能（約 40 分鐘）

• Trae 簡介：中文原生 AI IDE 與國際工具的差異優勢。

• 安裝與設定：模型選擇（Claude 3.5、GPT-4o、DeepSeek）、快捷鍵（Cmd+U）。

• 核心功能導覽：Builder 模式、Chat 模式、Webview 預覽、多模態輸入。

• 實作練習：

  • 輸入「請幫我寫一個簡單計算器網頁」，體驗 AI 自動生成 HTML/CSS/JS 並內建預覽。

第二部分：Builder 模式與代碼生成實戰（約 70 分鐘）

• Builder 模式：自然語言構建完整專案框架（前端 UI + 後端邏輯）。

• Chat 模式：即時問答、代碼優化、錯誤修復（選中代碼快捷鍵調用）。

• 上下文引用：引用檔案、資料夾或整個代碼庫進行智能對話。

• 實作練習（個人任務）：

  • 生成「圖片壓縮工具」（上傳圖片 → 壓縮 → 下載），包含前端介面與後端處理邏輯。

第三部分：多模態交互與進階應用（約 50 分鐘）

• 多模態輸入：上傳設計圖、截圖轉換為 HTML/CSS 代碼。

• 實時優化：AI 自動檢測 lint 錯誤、安全漏洞與效能瓶頸。

• 跨語言支援：Python 遊戲、JavaScript 應用、TypeScript 全端專案。

• 實作練習：

  • 上傳簡單設計稿生成響應式網頁，或用中文描述「漢諾塔遊戲 Python 程式」。

第四部分：專案整合與部署實務（約 20 分鐘）

• VS Code 遷移：無縫導入設定、外掛與快捷鍵配置。

• 版本控制與分享：Git 整合、專案匯出與團隊協作。

• 成果展示：學員分享專案，講師示範 AI 生成測試用例與部署指令。

• 延伸學習方向：

  • SOLO 模式全自動開發、Figma 整合、大型企業專案管理。

課程特色

• 完全中文介面，免費無限使用先進 AI 模型，中文開發者首選。

• 雙模式切換，Builder 快速構建、Chat 精準優化，一鍵搞定全流程。

• 多模態交互，圖片轉代碼、上下文理解，支援設計師與工程師協作。

• 三小時內完成生產級專案，內建 Webview 即時預覽與調試。

• 企業級適用，支援 VS Code 遷移，適合團隊導入與教學使用。