Bolt.new AI編程課程

上門編程教學課程內容

課程簡介

本課程專注於 Bolt.new 這款基於 StackBlitz WebContainers 的 AI 驅動開發平台，讓學員在三小時內透過自然語言提示，在瀏覽器中生成、執行、編輯並部署全端網頁應用（前端 React / Tailwind、後端 Node.js、資料庫整合）。 Bolt.new 使用 Claude 等 LLM 模型，將使用者描述轉化為完整專案，包括 npm 安裝、伺服器啟動與即時預覽，無需任何本地環境設定。 課程強調實作導向，學員將親手建立一個具實際價值的應用（如待辦清單或簡單 CRM），並學習提示優化、程式碼編輯與部署，體驗「AI 代理全權控制開發環境」的未來模式。

課程目標

• 掌握 Bolt.new 的核心功能與提示工程技巧。

• 能用自然語言生成全端應用，並即時預覽與修改。

• 學習手動編輯程式碼、除錯與整合外部套件（如資料庫、API）。

• 了解一鍵部署與專案匯出（ZIP / GitHub）。

• 建立對「瀏覽器內全端開發」的實務認知，為原型製作或團隊協作奠基。

適合對象

• 創業者、產品經理或設計師，想快速原型化應用。

• 具基礎程式經驗的學生或成人進修者，欲探索 AI 代理開發。

• 企業團隊或教師，希望學習無環境設定的協作開發工具。

課程時長與授課方式

• 全長 3 小時。

• 理論講解約 25%，實作操作約 75%。

• 全程使用 Bolt.new 平台（純瀏覽器，基於 WebContainers）。

• 教學形式：講師示範、個人實作、分組專題與成果分享。

課程大綱

第一部分：Bolt.new 平台導覽與入門（約 40 分鐘）

• Bolt.new 核心特色：AI 代理控制檔案系統、npm、伺服器與終端，即時預覽全端應用。

• 介面導覽：提示聊天視窗、程式碼編輯器、終端、預覽面板與部署選項。

• 提示工程基礎：如何描述需求，讓 AI 生成優質全端程式（支援 Next.js、Vite、Svelte 等框架）。

• 實作練習：

  • 輸入「建立一個個人待辦清單網站」，觀察 AI 生成前端、後端與即時運行。

第二部分：AI 生成與互動編輯實戰（約 70 分鐘）

• 示範進階提示：添加功能（如登入、資料儲存、API 呼叫）。

• 使用 AI 進行：

  • 程式碼生成與 npm 安裝（自動處理套件依賴）。

  • 即時除錯與修改（限制檔案範圍避免意外變更）。

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

  • 生成「簡單 CRM 或活動報名 App」，透過聊天調整 UI、邏輯與整合 Supabase 資料庫。

第三部分：手動優化與部署應用（約 50 分鐘）

• 程式碼檢視與手動編輯：瀏覽生成檔案、終端操作與預覽同步。

• 整合外部服務：API 連動、資料庫與一鍵部署（Netlify / Vercel）。

• 實作練習：

  • 匯出 ZIP 檔案或 GitHub 同步，並部署為公開連結測試響應式效果。

第四部分：協作與延伸應用（約 20 分鐘）

• 介紹分享 URL、多人協作與版本控制功能。

• 成果展示：學員分享自製應用，並討論 AI 生成的優缺點。

• 延伸學習方向：

  • 進階提示與大型專案管理。

  • 結合 Figma 或其他工具的混合開發。

課程特色

• 純瀏覽器操作，零環境設定，AI 代理全控開發流程（檔案、npm、伺服器）。

• 即時預覽與編輯，支援生產級程式碼生成與部署。

• 三小時內從提示到上線，加速原型驗證與學習曲線。

• 適合團隊協作與非工程背景人士，強調提示工程與手動微調。