AI Web 全棧編程課程簡介
以下課程結構在課程期間會根據學員回饋做內容方向、篇幅、細節、順序等方面的調整
相關課程
啟動 Kickoff
- 完整的開發環境配置指南，包括 Node、NPM、IDE 工具、瀏覽器外掛與平台帳號設定
- 開發相關的基本操作講解，協助你快速上手開發工具與環境
- 學習如何配置與管理開發伺服器，為專案開發做好準備
環境配置
完整的開發環境配置指南
- 開發相關的基本操作講解
- Node：
- 原生安裝
- nvm 安裝
- nvm 配置
- NPM 配置
- 淘寶源配置
- Chrome 與外掛
- Vue 外掛
- Nuxt 外掛
- 開發工具 IDE：
- 主力：Cursor + Plus
- 平替：VSCode + Codeium
- 平台帳號：
- 部署與網域相關
- GitHub
- Vercel
- Cloudflare
理論基礎 Theories
- 從零開始學習 Web 開發的核心概念，包含前端與後端的基礎知識
- 深入理解 Nuxt 與 Next 框架的異同，掌握 SSR 的工作原理
- 學習 Vue 與 TypeScript 的基礎知識，為實際專案打下紮實基礎
Web 開發基礎概念
理解現代 Web 開發的核心概念
- 什麼是 Nuxt？
- 什麼是客戶端（前端）與伺服端（後端）？
- Nuxt 和 Next
- 什麼是 SSR？
- 什麼是 Vue？
- 什麼是 Nodejs？
- 什麼是 Typescript？
- …十萬個為什麼（隨時穿插）
技術棧
課程涉及的主要技術棧介紹
- 前端框架：
- Vue 3
- Nuxt 3
- Next
- 開發語言：
- JavaScript
- TypeScript
- 樣式相關：
- TailwindCSS
- CSS
- HTML
- 開發工具：
- Git
- VSCode
- Chrome DevTools
- 部署平台：
- Vercel
- Cloudflare
- 後端技術：
- Node.js
基礎知識 Basics
- 核心技術文件精讀，掌握 HTML、CSS、JavaScript 的關鍵知識點
- 深入學習 Vue、Nuxt、Next 與 React 官方文件，理解框架設計思想
- 了解 SQL 基礎知識，為後續資料管理模組做好準備
核心技術文件
快速了解主要技術棧文件
- HTML 核心文件 Quick Through
- CSS 核心文件 Quick Through
- Javascript 核心文件 Quick Through
- Vue 官方文件 Quick Through
- Nuxt 官方文件 Quick Through
- Next 官方文件 Quick Through
- React 官方文件 Quick Through
- SQL 核心文件 Quick Through
新手教程 Tutorial
- 從零開始搭建專案，學習基於官方模板的本地開發與部署流程
- 掌握元件化與模板的使用，提高程式碼重用性與可維護性
- 學習內容管理、流量分析與使用者體驗優化，打造專業級網站
專案起步
從零開始搭建專案
- 基於官方模板的本地開發
- 基於 Vercel 的發布流程
- 官方模板結構及本地啟動
專案進階
深入專案開發實踐
- 元件化與模板的使用
- 內容管理模組整合
- 基於內容管理模組的實踐
- 流量分析：Vercel Analytics
- 使用者體驗
實際專案 Projects
- 實際專案開發實戰，包括課程官網迭代、開源導航站專案開發
- 基於 Next.js 的 AI 聊天機器人開發，整合自選 LLM
- Article AI 二次開發，支援多語言、資料管理、使用者管理與付費功能
課程官網迭代
實戰課程網站開發
- FAQ 頁面、Promo 頁面
- 合作夥伴頁面
- 課程大綱頁面
- 作品展示頁面
- 體驗優化
- SEO 優化
導航站專案
開源導航站完整開發流程
- 基礎技術棧（繼承新手教程專案）
- 產品功能設計
- 技術架構設計
- 核心功能 MVP 實作
- 基於 AI 的內容準備
- 自動化內容準備
AI ChatBot 二次開發
基於 Next.js 的 AI 聊天機器人開發
- 基於 Nextjs 的 AI ChatBot 在 Vercel 上的配置上線
- AI Chatbot 與自選 LLM 的整合（AI-SDK）
- Next 與 React 的基礎知識
Article AI 二次開發
基於 AI 的文章生成系統
- 多語言：簡體、英語、日語
- 資料管理：Neon
- 使用者管理：Neon
- 廣告
- 付費
- 分析
- 成長實驗
進階 Advance
- 使用主流 Hybrid 方案構建行動應用，擴展專案應用場景
- 學習 Docker 相關技術，掌握基於 Github Action 的自動化建置
- 完整的 VPS 伺服器部署流程，從初始化配置到應用發布
行動端開發
使用主流 Hybrid 方案構建行動應用
- 客戶端 Apps（基於主流 Hybrid 方案）
VPS 部署
完整的伺服器部署流程
- Docker 相關
- 本地建置
- 基於 Github Action 建置
- Dockerhub
- VPS 初始化配置與安裝
- VPS 應用發布
社群協作 Collaborate
- 學習 GitHub 的工作流程，掌握團隊協作的基本技能
- 參與開源導航站原始碼的開發，累積實際專案經驗
- 開發屬於學員自己的有趣開源專案，展示個人能力
開源專案協作
參與開源專案開發
- GitHub 的 workflow
- 核心：導航站原始碼
- 其他：開發屬於學員自己的有趣開源專案
基於 AI 的 Web 開發課程
基於 AI 的 Web 開發課程
軟體開發課程
- 完整的開發環境配置指南，包括 Node、NPM、IDE 工具、瀏覽器外掛與平台帳號設定
- 從零開始學習 Web 開發的核心概念，包括 Vue 3、Nuxt 3、TypeScript、TailwindCSS 等現代技術棧
- 核心技術文件精讀，掌握 HTML、CSS、JavaScript、Vue 與 Nuxt 的關鍵知識點
- 從零開始搭建專案，學習元件化開發、內容管理、使用者體驗優化與部署發布流程
- 實際專案開發實戰，包括課程官網迭代、開源導航站專案開發與現代 Web 技術整合應用
- 進階內容涵蓋行動端開發與 VPS 伺服器部署，掌握全棧開發技能
