Meku AI編程課程

上門編程教學課程內容

課程簡介

本課程專注於 Meku.dev 這款 AI 全端 Web 應用建構平台，讓學員在三小時內透過自然語言對話，快速生成基於 React + Tailwind CSS 的前端介面，整合 Supabase 後端（資料庫、認證、API），並支援 GitHub 同步與自訂域名部署。Meku 提供即時預覽、聊天迭代優化、離線檔案下載等功能，從簡單網站到複雜 SaaS 儀表板皆能一鍵生成。課程強調實作導向，學員將從構想描述到公開上線網站，體驗「開發者導向的 AI 無代碼平台」，保留完整程式碼擁有權與自訂彈性。

課程目標

1. 掌握 Meku 的提示工程與即時迭代開發技巧。

2. 能生成全端應用（前端 UI + Supabase 後端 + 認證系統）。

3. 學習聊天式優化、GitHub 同步與自訂域名部署。

4. 完成具商業價值的 Web 應用（如目錄網站或 SaaS 原型）。

5. 建立「AI 加速 Web 開發」的工作模式，提升生產力 10 倍。

適合對象

• 前端開發者、完整棧工程師或 React 使用者。

• 非技術創業者、產品經理，想快速製作 MVP 原型。

• 小型團隊負責人或自由工作者，希望節省開發時間。

• Supabase 使用者，欲加速全端應用開發流程。

課程時長與授課方式

• 全長 3 小時。

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

• 全程使用 Meku 網頁平台（純瀏覽器，支援 Google/Email 登入）。

• 教學形式：模板實作、個人專案、分組分享與成果展示。

課程大綱

第一部分：Meku 平台導覽與快速入門（約 40 分鐘）

• Meku 核心特色：React + Tailwind 前端 + Supabase 全端後端一體化。

• 介面導覽：提示聊天框、即時預覽、程式碼檢視、部署面板與模板庫。

• 信用點系統：免費額度使用策略與付費方案選擇。

• 實作練習：

  • 輸入「建立一個個人作品集網站」，體驗 AI 幾分鐘內生成完整響應式頁面與即時預覽。

第二部分：全端應用聊天式開發（約 70 分鐘）

• 迭代優化：透過對話調整 UI（「加入深色模式」、「放大按鈕」、「行動端導覽列」）。

• Supabase 整合：自動生成認證、即時資料庫、使用者權限管理。

• 功能擴充：添加表單、搜尋、篩選、分頁等複雜互動。

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

  • 打造「目錄式網站」（搜尋 + 分類 + 詳細頁），包含使用者註冊與內容管理功能。

第三部分：部署與程式碼擁有權（約 50 分鐘）

• 多部署選項：Meku 託管、自訂域名、GitHub 同步、離線下載。

• 程式碼自訂：檢視生成原始碼，手動調整邏輯或整合第三方服務。

• 版本管理：即時撤銷、重做、分支比較與社群 Remix 功能。

• 實作練習：

  • 將目錄網站部署為公開連結，並同步至 GitHub 儲存庫，測試真實資料操作。

第四部分：商業應用與社群分享（約 20 分鐘）

• 模板 Remix：複製社群熱門專案作為開發起點，快速自訂品牌風格。

• 成果展示：學員分享上線應用，討論不同提示策略的效果。

• 商業場景應用：SaaS 儀表板、電商前台、內部工具等。

• 延伸學習方向：

  • Stripe 支付整合、多租戶架構、企業級部署。

課程特色

• 開發者導向：生成乾淨的 React + Tailwind 程式碼，完全擁有權。

• 真全端支援：Supabase 自動整合，包含認證、資料庫與即時同步。

• 社群模板：數百個可 Remix 的開源專案，加速開發起點。

• 三小時內從空白到公開網站，支援自訂域名與 SSL 證書。

• 迭代友好：聊天式優化 + 即時預覽，開發體驗流暢無阻。