教學大綱表 (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
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
扣考規定:https://curri.ttu.edu.tw/p/412-1033-1254.php