上門編程教學課程內容
課程簡介
本課程專注於 Macaly 這款 AI 驅動的全棧網站與 Web 應用平台,讓學員在三小時內透過自然語言描述、語音輸入、手繪草圖,快速生成包含前端 UI、後端資料庫、託管部署、分析追蹤的完整生產級應用。Macaly 提供內建即時資料庫、全球樣式管理、資產圖庫、SEO 最佳化與一鍵上線功能,支援儀表板、登陸頁、SaaS 工具等複雜場景。課程強調實作導向,學員將從構想草圖到公開上線應用,體驗「意圖即軟體」的 vibe-coding 開發流程,特別適合創業者與小型企業快速驗證產品想法。
課程目標
-
掌握 Macaly 的多模態輸入(語音+文字+草圖)與 AI 生成技巧。
-
能生成全棧應用(前端 UI + 即時資料庫 + 後端邏輯)。
-
學習視覺化編輯、全球樣式管理與 GitHub 程式碼同步。
-
完成具商業價值的應用(如 SaaS 原型或業務儀表板)並一鍵部署。
-
建立「AI 全棧開發」工作模式,從驗證到變現零程式碼。
適合對象
課程時長與授課方式
課程大綱
第一部分:Macaly 平台導覽與多模態入門(約 40 分鐘)
-
Macaly 核心架構:AI vibe-coding + 內建全棧(資料庫+託管+分析)。
-
介面導覽:畫布編輯器、全球樣式、資產圖庫、即時資料庫與部署面板。
-
多模態輸入:語音描述、手繪草圖、自然語言迭代優化。
-
實作練習:
第二部分:全棧應用生成實戰(約 70 分鐘)
-
畫布開發:手繪 wireframe,AI 自動轉換為響應式 React 元件。
-
即時資料庫:視覺化建立資料表、關聯、查詢,無需 SQL 語法。
-
視覺化編輯:直接點擊調整元件,AI 自動生成對應程式碼。
-
實作練習(個人任務):
第三部分:進階功能與商業部署(約 50 分鐘)
-
全球樣式管理:統一配色、字體、間距,所有頁面自動同步。
-
資產與分析:AI 生成圖片、內建 Analytics、SEO 自動最佳化。
-
GitHub 同步:一鍵推送原始碼,支援團隊協作與版本控制。
-
實作練習:
第四部分:成果展示與商業應用(約 20 分鐘)
-
一鍵發布:自動 DNS 配置、SSL 證書、全球 CDN 加速。
-
成果展示:學員分享上線應用,對比不同輸入方式的效果。
-
商業場景討論:MVP 驗證、客戶展示、內部工具、登陸頁優化。
-
延伸學習方向:
課程特色
-
多模態輸入:語音+手繪+文字,適應各種思考與表達習慣。
-
真全棧平台:內建資料庫、託管、分析、SEO,無需額外整合。
-
視覺化控制:直接點擊編輯,取代繁瑣的對話迭代。
-
三小時內從草圖到公開應用,支援自訂域名與企業級分析。