I5630A 教學大綱表

教學大綱表 (112學年度第2學期)

請遵守智慧財產權，勿使用非法影印教科書，避免觸法。

課程名稱 Course Title	(中文) 手持裝置應用系統設計 (英文) Handheld Devices Application Systems Design			開課單位 Departments	資訊工程研究所
				課程代碼 Course No.	I5630A
授課教師 Instructor	鄭福炯
學分數 Credit	3.0	必/選修 core required/optional	選修	開課年級 Level	研究所
先修科目或先備能力(Course Pre-requisites)：程式設計(C/C++, Java or Python), 資料庫系統(MySQL or MongoDB)
課程概述與目標(Course Overview and Goals)：本課程傳授最熱門也最歡迎的2大框架： Vue 和 Ionic framework 用來時做出手持裝置App 和全棧開發 (full stack development)。這門課程會學到: 1.響應式網頁設計 2. 將單一程式碼開發(Vue+Ionic)轉成 Android App & iOS App 3. Vue reactive framework。 4. Ionic App框架本課程運用理論與實務並重的教學方式，配合實機操作演練，厚實學習者就業所需之紮實的程式設計技巧，並加強學習者核心概念、應用框架運作原理，以期提昇同學對手持裝置的應用程式設計能力與水準。
教科書(Textbook)	Ionic Dev Guides 1. https://ionicframework.com/docs 2. https://ionic.io/docs/portals/getting-started/guide#install Vue dev Guides: 1. https://vuejs.org/ 2. https://cn.vuejs.org/
參考教材(Reference)	Snap!IonicVue: https://iot.ttu.edu.tw/app/
圖書館電子書(E-book of the Library)	1. Build mobile apps with Ionic 4 and Firebase : hybrid mobile app development Second edition. 著者Cheng, Fu, 索書號QA76.76.A65 出版日期2018 2. Learn Ionic 2 : develop multi-platform mobile apps著者Justin, Joyce, 出版者:Apress :出版日期:2017. 3. Building native web components : front-end development with Polymer and Vue.js

課程大綱 Syllabus			學生學習目標 Learning Objectives	單元學習活動 Learning Activities	學習成效評量 Evaluation	備註 Notes
序 No.	單元主題 Unit topic	內容綱要 Content summary	學生學習目標 Learning Objectives	單元學習活動 Learning Activities	學習成效評量 Evaluation	備註 Notes
1	Snap!IonicVue開發環境介紹	•視覺化程式積木介紹 •帳號註冊與密碼修改 •創建專案 •HTML/JavaScript 介紹 •建立第一個 Web App	•瞭解Snap!IonicVue開發平台 •瞭解視覺化程式積木 •學會建立Web App
2	Vue框架介紹	•Vue 發展歷史 •組件與組件化 •Vue MVVM model •自動計數範例	•瞭解Vue 發展歷史與功能的演變 •瞭解Vue組件與組件化概念 •瞭解MVVM (Model, View, ViewModel) 概念 •瞭解完成一支Android應用程式需要哪些東西
3	Vue框架介紹	•單檔組件(Single File Component)結構 •引入單檔組件 •使用 Template •使用 Script setup	•瞭解單檔組件(Single File Component)結構 •瞭解如何引入單檔組件 •瞭解如何使用 Template •瞭解如何使用 Script setup
4	Vue Template 介紹	•使用所見即所得(WYSIWYG)GUI編輯器 •控制指令(Control directives): v-for, v-if, v-else-if, v-else •數據綁定指令(Data binding directives): v-model, v-bind, … •事件指令(Event directives): @click, @keyup, @input, …	•熟悉所見即所得(WYSIWYG)GUI編輯器使用方法 •熟悉控制指令(Control directives)處理程式之各種撰寫方式 •熟悉控制數據綁定指令(Data binding directives)處理程式之各種撰寫方式 •熟悉事件指令(Event directives)處理程式之各種撰寫方式
5	Vue Script setup	•響應式資料(Responsive data) •響應式方法(JavaScript functions)	•瞭解響應式資料(Responsive data)概念 •熟悉響應式資料(Responsive data)用法 •瞭解響應式方法(JavaScript functions)概念 •熟悉響應式方法(JavaScript functions)用法
6	Vue Script setup	•計算屬性(Computed properties) •生命週期函數(Life-cycle hooks)	•瞭解計算屬性(Computed properties)概念 •熟悉計算屬性(Computed properties)用法 •瞭解生命週期函數(Life-cycle hooks)概念 •熟悉生命週期函數(Life-cycle hooks)用法
7	Vue Script setup	•狀態管理(State management) •狀態管理 action 方法 •狀態管理 mutation 方法	•瞭解狀態管理(State management)概念 •熟悉狀態管理(State management)用法
8	Vue Route	•Vue Router •Vue routes	•瞭解Vue Router概念 •熟悉Vue Router用法 •瞭解Vue routes 概念 •熟悉Vue routes 用法
9	期中考	線上測驗與上機實作測驗	檢驗上半學期學習成效
10	Ionic框架介紹	Ionic layout 元件： •Grid layout •Card layout •Item and List •toolbar •tabs	瞭解Ionic layout 元件概念與方法 •Grid layout •Card layout •Item and List •toolbar •tabs
11	Ionic框架介紹	Ionic display 元件： •accordion •ion-avatar •ion-chip •ion-datetime •ion-icon •ion-label, ion-note •ion-image •ion-thumbnail	瞭解Ionic display 元件與熟悉Ionic display 元件用法 •accordion •ion-avatar •ion-chip •ion-datetime •ion-icon •ion-label, ion-note •ion-image •ion-thumbnail
12	Ionic框架介紹	Ionic action 元件 •ion-button •ion-checkbox •ion-input •ion-textarea •ion-popover •ion-radio •ion-range	瞭解Ionic action 元件與熟悉Ionic action元件用法 •ion-button •ion-checkbox •ion-input •ion-textarea •ion-popover •ion-radio •ion-range
13	Ionic框架介紹	Ionic action 元件 •ion-refresher •ion-searchbar •ion-segment •ion-select •ion-toggle	瞭解Ionic action 元件與熟悉Ionic action元件用法 ion-refresher •ion-searchbar •ion-segment •ion-select •ion-toggle
14	axios 連結後端資料庫	axios API 連結後端資料庫: •restful request API •restful get API •restful delete API •restful post API •restful put API	瞭解Ionic display 元件與熟悉Ionic display 元件用法 •restful request API •restful get API •restful delete API •restful post API •restful put API
15	axios 連結後端資料庫	•MySQL CRUD SQL命令複習 •後端PHP資料庫資料存取	•瞭解MySQL CRUD SQL命令 •熟悉MySQL CRUD SQL命令用法 •瞭解後端PHP資料庫資料存取命令 •熟悉後端PHP資料庫資料存取用法
16	Snap APIs	Snap built-in APIs: •註冊Snap帳號 •取得安全存取token •使用token存取資料庫	瞭解Snap built-in APIs與熟悉ISnap built-in APIs用法 •註冊Snap帳號 •取得安全存取token •使用token存取資料庫
17	期末專題UML分析與設計	•UML use case diagram •UML sequence diagram	瞭解與熟悉UML分析與設計： •UML use case diagram •UML sequence diagram
18	期末考	專案實作與報告	檢驗本課程學習成效

彈性教學週活動規劃

序 No.	實施期間 Period	實施方式 Content	教學說明 Teaching instructions	彈性教學評量方式 Evaluation	備註 Notes
1	起:2024-06-10 迄:2024-06-23	5.小專題 Project	找到有痛點問題, 利用手機實作來解決這個痛點.	1. 問題痛點的重要性, 價值主張與目標客群的描述詳細程度. 2. 手機實作的完程度

教學要點概述：
1.自編教材 Handout by Instructor：
■ 1-1.簡報 Slids
■ 1-2.影音教材 Videos
□ 1-3.教具 Teaching Aids
■ 1-4.教科書 Textbook
□ 1-5.其他 Other
□ 2.自編評量工具/量表 Educational Assessment
□ 3.教科書作者提供 Textbook

成績考核 Performance Evaluation：期末考：20% 期中考：20% 報告：10% 彈性教學：10% 上機測驗：20% 作業：20%

教學資源(Teaching Resources)：
■ 教材電子檔(Soft Copy of the Handout or the Textbook)
■ 課程網站(Website)
課程網站(Website)：TronClass
扣考規定：http://eboard.ttu.edu.tw/ttuwebpost/showcontent-news.php?id=504