課程簡介

本課程專為希望快速掌握 Ionic Framework 的學員設計，三小時濃縮核心重點，帶領學員從環境安裝、專案建立到 UI 元件與 API 整合，一步步實作跨平台行動應用程式。

Ionic 是目前最受歡迎的 混合式行動應用框架（Hybrid App Framework），可使用 HTML、CSS、JavaScript（或 TypeScript） 技術，快速開發可部署於 iOS、Android 與 Web 的多平台應用。
課程以實務導向為主，結合 Ionic + Angular / React / Vue 架構範例，帶領學員學會開發具備前端互動、原生外觀與 API 整合的應用介面。

適合對象：

想以前端技術快速開發 App 的程式設計師
想學習行動 App 框架（無需原生開發背景）
前端工程師、UI 設計師、全端開發者
想進入跨平台應用開發領域的初學者

學習成果：

理解 Ionic 框架結構與開發流程
能建立 Ionic 專案與頁面導航結構
熟悉 Ionic UI 元件（列表、按鈕、表單、Modal 等）
能整合 REST API 資料並在行動端顯示
瞭解部署成 Web App 或行動應用的流程

課程時長

3 小時（180 分鐘）
理論講解與實作操作比例約 3 : 7

課程大綱

第一部份：Ionic 基礎概念與環境建置（30 分鐘）

什麼是混合式 App（Hybrid App）
Ionic 的特色與運作原理（Web View + Capacitor）
與 React Native / Flutter 的差異
安裝開發環境（Node.js + Ionic CLI）
實作：建立第一個 Ionic 專案並啟動模擬器

第二部份：專案結構與基礎頁面操作（40 分鐘）

Ionic 專案目錄介紹（src、pages、app、theme）
Router 與多頁導覽設計
建立與切換頁面（ion-router-outlet、routerLink）
模板與主題設定（CSS 變數與主題切換）
實作：建立多頁式應用介面（首頁、設定、關於）

第三部份：Ionic 核心元件與互動功能（40 分鐘）

常見 UI 元件介紹與使用：
- ion-button、ion-input、ion-card、ion-list、ion-modal
表單驗證與雙向綁定（Angular / React Framework）
動畫與過場效果（Animation / Transitions）
實作範例：建立「會員登入與使用者資料顯示」介面

第四部份：資料整合與原生功能（40 分鐘）

整合 REST API 資料（使用 Fetch / Axios）
儲存資料本地化（Storage / SQLite）
使用 Capacitor 外掛（Camera / Geolocation / Filesystem）
Push 通知與裝置權限簡介
實作：從 API 取得商品／文章清單並顯示於應用中

第五部份：打包、部署與延伸應用（30 分鐘）

App 模擬器與實機測試（Ionic DevApp / Android Studio）
Web 與行動端雙重輸出（PWA / iOS / Android）
Ionic Build 與 Capacitor 打包流程
UI 優化與 App 體驗設計技巧
延伸學習方向：Ionic + Firebase、Ionic Vue、Ionic React

課程特色

三小時完整掌握 Ionic 的核心開發流程與應用實務。
結合理論與實作，從零開始構建跨平台應用。
應用前端技能（HTML、CSS、JS）即可建立可部署 App。
上課即可完成一個具互動介面與資料串接的行動應用。

查詢/報讀

編程課程教材

已包括精美編程課程教材

環球AI能力基準評測考試 AI Capability Evaluation (ACE) Standard，「香港編程學院」報讀ACE AI課程/ AI考試/ AI證照，可享8折優惠！

Ionic編程 教學課程