行動應用程式設計

課程目標

本課程旨在教授學生如何開發基於 Web 的應用，並透過免費工具轉換為 Android 與 iOS 原生應用。課程為入門基礎，不涉及進階技術與 PWA，採實務導向，每 3 週完成一個應用專題，並於期中與期末提交報告。

課程大綱

第一部分：基礎與環境建置（Week 1-3）

• Week 1：行動應用開發概述（Web vs. 原生應用、轉換技術概論）
• Week 2：開發環境設置（HTML、CSS、JavaScript、免費開發工具）
• Week 3：簡單 Web 應用開發與調試
  ✅ 作業 1：開發一個個人簡介 Web 應用

第二部分：互動式應用開發（Week 4-6）

• Week 4：JavaScript 事件與 UI 操作
• Week 5：簡單資料儲存（LocalStorage、SessionStorage）
• Week 6：Web 版待辦事項應用
  ✅ 作業 2：開發一個待辦事項應用

第三部分：將 Web 應用轉換為行動應用（Week 7-9）

• Week 7：使用 Capacitor.js / Cordova 進行轉換
• Week 8：測試與模擬（Android Emulator、iOS Simulator）
• Week 9：發布與封裝應用
  ✅ 作業 3：將待辦事項應用轉換為 Android / iOS 應用
  📌 期中報告：開發歷程與技術學習心得

第四部分：API 整合與資料存取（Week 10-12）

• Week 10：透過 Fetch API 與 Open API 取得資料
• Week 11：應用於天氣、新聞或社群資訊
• Week 12：整合至行動應用並測試
  ✅ 作業 4：開發一個使用 API 的行動應用

第五部分：使用者驗證與資料庫（Week 13-15）

• Week 13：Firebase Authentication（免費方案）
• Week 14：Firestore 資料庫簡介
• Week 15：串接登入與資料儲存功能
  ✅ 作業 5：開發一個簡單會員系統應用

第六部分：專案整合與應用發布（Week 16-18）

• Week 16：優化與除錯（行動版 UI、效能調整）
• Week 17：封裝與發布流程
• Week 18：專案展示與總結
  📌 期末報告：完整行動應用開發專案

學習工具（免費）

• 開發工具：VS Code、CodeSandbox
• 轉換工具：Capacitor.js / Cordova
• 測試環境：Android Studio（Emulator）、Xcode（iOS Simulator）
• 資料庫：Firebase（免費方案）
• API 測試：Postman、Open API 服務（如天氣、新聞）

這樣的安排可以讓學生逐步學習 Web 開發與行動應用轉換的實務技能，同時透過每 3 週一次的專案練習來提升應用能力。