# 邏輯與程式設計 App Inventor 2
僑光科技大學 資訊科技系
2018/09/21 ~ 2019/01/18
授課老師：高吉隆
電子信箱：[kevinkao888@gmail.com](mailto://kevinkao888@gmail.com)
---
## 課程大綱
* 程式設計觀念
* App Inventor2開發環境介紹
* 元件介紹
* 常數、變數、運算子
* 控制流程與迴圈
* 定義程序及呼叫程序
* 特別元件介紹
* 範例實作
----
### 每週上課目標
* 前 9 週上課目標（觀念講解、上課練習）
* 後 9 週上課目標（分組練習、專題報告）
----
|週| 上課日期 | 前 9 週上課目標 | 備註
|:-:|:----------:| --------------- |:--:
| 1 | 107/09/21 | 課程設計與簡介 |
| 2 | 107/09/28 | 程式設計觀念介紹 |
| 3 | 107/10/05 | App Inventor開發環境 |
| 4 | 107/10/12 | 使用者介面及組件 |
| 5 | 107/10/19 | 變數、運算元、函數 |作業
| 6 | 107/10/26 | 元件與屬性設定1 |
| 7 | 107/11/02 | 元件與屬性設定2 |
| 8 | 107/11/09 | 流程、清單、迴圈控制|小考
| 9 | 107/11/16 | 期中考 |30%
----
| 週 | 上課日期 | 後 9 週上課目標 | 備註
|:--:|:----------:| --------------- |:--:
| 10 | 107/11/20.23 | 事件與程序 |
| 11 | 107/11/27.30 | 進階元件使用 |確認名單
| 12 | 107/12/04.07 | 期末報告分組 |訂定題目
| 13 | 107/12/11.14 | 撰寫規劃書 |
| 14 | 107/12/18.21 | 版面規劃實作 |作業二
| 15 | 107/12/25.28 | 程式設計實作 |
| 16 | 108/01/01.04 | 專題整合測試 |
| 17 | 108/01/08.11 | 專題整合測試 |
| 18 | 108/01/15.18 | 期末報告 |30%
----
### 課程評分方式
* 平時成績：40% (上課互動+三次小考)
* 上課互動：10%
* 第一次作業：10% (107/10/19)
* 第一次小考：10% (107/11/09)
* 第二次作業：10% (107/12/21)
* 期中成績：30% (期中考試)
* 考試範圍：App Inventor 2
* 期末成績：30% (期末報告)
* 專題製作：上台報告、PPT簡報
---
### 第一次作業成績：日資科三
* 未交名單：連政淮、盧彥竣、游濟銘、程柏鈞、林家瑩、劉閎弢、黃彥彰
----
### 第一次小考成績-日資料三
* 加分：10，平均：76.3
----
### 第一次小考成績-日創設一孝
* 加分：10，平：70.2
----
### 期中考成績-日資料三
----
### 期中考成績-日創設一孝
* 加分：10，平：75
----
### 使用教科書
* 書名：程式邏輯訓練 App Inventor2
* 出版社：高立圖書
* 作者：林正雄、洪啟舜、嚴礽麒、高吉隆、楊順評
---
### 程式設計是什麼？
* 一般認為的程式設計：Basic、C、Java
* 程式設計的組成要件
* 資料：數字、文字、布林
* 變數：就如同盛水的杯子
* 清單：同類型的資料
* 程序：組織程式的流程架構
* 控制：邏輯、迴圈
* 物件導向的組成要件
* 物件：實體或抽象的東西
* 屬性：東西的性質
* 事件：物件發生的狀況
----
### 一般認為的程式設計
* 程式碼：Basic
```htmlembedded
10 CLS
20 PRINT "Helloooooooooooooo, world!"
30 PRINT "I'm learning about commands in BASIC."
40 PRINT "This text is being printed via the PRINT command."
50 PRINT "On the next line, I'll use CLS."
60 CLS "Now the next word would be PRINT."
70 PRINT "Finally, on line 80, I'll use END."
80 END "And return to PRINT"
90 PRINT "this is my answer."
````
----
### 目前我們要學的程式設計
* 積木式：App Inventor
----
### 程式設計的組成要件
* 資料：數字、文字、布林
* 數字：成績，文字：姓名，布林：及格
* 變數：就如同盛水的杯子
* 暫時存放的空間
* 清單：同類型的資料
* 學生所有修課的課程清單
* 程序：組織程式的流程架構
* 計算所有學生的成績
* 控制：邏輯、迴圈
* 邏輯：判斷是否及格
* 迴圈：循環計算所有學生
----
### 物件導向的組成要件
* 物件：實體或抽象的東西
* 學生甲、學生乙
* 課程A、課程B
* 屬性：東西的性質
* 學生的姓名、學生的身高
* 課程的時間、課程的教室
* 事件：物件發生的狀況
* 學生進入教室、學生考完試時
* 課程開始選課、課程停止選課
---
### 課堂練習一：BMI基本計算(BMI_1)
* 使用者輸入身高(公分)、體重(公斤)
* 計算出BMI=體重(公斤)/身高(公尺)平方
----
#### BMI基本計算(BMI_1)-步驟1
* 建立新專案：名稱命名為BMI_10715801(學號)
* 命名規則：以英文開頭，不可為數字或中文
* 不可為特殊字元或空白，可以用底線(_)分開
----
#### BMI基本計算(BMI_1)-步驟2
* 建立元件：從[元件面板]拉以下元件至[工作面板]
* 標籤1：元件屬性->文字更改為(身高：)
* 文字輸入盒1：元件清單->重新命名為(身高)
* 標籤2：元件屬性->文字更改為(體重：)
* 文字輸入盒2：元件清單->重新命名為(體重)
* 按鈕1：
* 元件清單->重新命名為(計算)
* 元件屬性->文字更改為(計算)
* 標籤3：
* 元件清單->重新命名為(BMI)
* 元件屬性->文字更改為(BMI)
----
|修改前|修改後
|:-:|:----------:
| |
----
#### BMI基本計算(BMI_1)-步驟3
* 切換版面：切換至程式設計版面
* 撰寫程式：從[方塊]拉以下積木至[工作面板]
* 計算：當計算被點選->執行
* BMI：設定BMI.文字為
* 數學：除法->指數->數字(2)->除法->數字(100)
* 體重：體重.文字
* 身高：身高.文字
----
|流程圖|積木程式
|:-:|:-:
||
----
### 進階應用
* BMI_2：標準、過重(>25)、過輕(<18)
* BMI_3：身高和體重輸入改為滑桿
* BMI_4：若沒輸入數字顯示提醒
* BMI_5：使用定義回傳程序計算BMI
* BMI_6：使用定義回傳程序判斷結果
----
### 課堂練習二：BMI計算判斷標準(BMI_2)
* 新增元件(標籤4)：名稱和文字改為(結果)
* 流程控制：如果否則，如果否則
* 數學：比較大小元件
* BMI.文字分別與25和18做比較
* 結果.文字設定為(過重、過輕、標準)
* 置入當計算被點時中
----
|流程圖|積木程式
|:-:|:-:
||
----
### 課堂練習三：BMI計算使用滑桿(BMI_3)
* 滑桿元件：命名為身高滑桿、體重滑桿
* 身高滑桿/體重滑桿：設定元件屬性
* 設定寬度為填滿
* 最大(200/100)、最小(100/30)
* 指針位置(150/50)
* 當身高滑桿/體重滑桿.位置變化時：
* 將滑桿指針位置設為身高/體重.文字
----
|流程圖|積木程式
|:-:|:-:
||
----
### 課堂練習四：BMI計算錯誤提醒(BMI_4)
* 使用標籤元件，並命名為結果
* 使用如果否則流程控制
* 使用數學邏輯(或)
* 設定結果為請輸入身高或體重
----
|流程圖|積木程式
|:-:|:-:
||
----
### 課堂練習五：BMI計算自訂程序1(BMI_5)
* 使用自訂程序(回傳)，並命名為計算BMI
* 設定參數(身高)和參數(體重)
* 計算回傳值為BMI公式
----
|流程圖|積木程式
|:-:|:-:
||
----
### 課堂練習六：BMI計算自訂程序2(BMI_6)
* 使用自訂程序(回傳)，並命名為判斷結果
* 設定參數(身高)和參數(體重)
* 計算回傳值為BMI公式
----
|流程圖|積木程式
|:-:|:-:
||
---
### 課堂作業一：溫度直減率計算(ELR_1)
* 海拔若增加100公尺，則溫度減低0.6度
* 使用者輸入平地溫度(攝氏)、山地高度(公尺)
* 計算出山地溫度=平地溫度-山地高度/100*0.6
----
#### 課堂作業一：繳交說明(ELR_1)
* 建立新專案：名稱命名為ELR_10715801(學號)
* 建立輸入元件：平地溫度(攝氏)、山地高度(公尺)
* 建立按鈕、輸出元件：計算、山地溫度(攝氏)
* 程式：山地溫度=平地溫度-山地高度/100*0.6
* 連結模擬器執行：基本分數滿分60分
----
----
#### 課堂作業一：進階加分1(ELR_2)
* 夏季：海拔若增加100公尺，則溫度減低0.6度
* 冬季：海拔若增加100公尺，則溫度減低0.36度
* 請增加另一個按鈕：區分夏季計算及冬季計算
* 連結模擬器執行：可加滿分10分
----
----
#### 課堂作業一：進階加分2(ELR_3)
* 增加滑桿1：可使用滑桿更改平面溫度(5~40)
* 增加滑桿2：可使用滑桿更改山地高度(500~4000)
* 設定程式：使文字輸入盒和滑桿做單向連動
* 連結模擬器執行：可加滿分10分
----
----
#### 課堂作業一：進階加分3(ELR_4)
* 增加標籤1：提醒文字，預設為<山上天氣涼爽>
* 設定程式：若低於10度，則顯示<請攜帶外套>
* 設定程式：若低0度，則顯示<有機會下雪>
* 連結模擬器執行：可加滿分10分
----
----
#### 課堂作業一：進階加分4(ELR_5)
* 新增執行程序：將以下功能設為<判斷提醒>程序
* 設定提醒文字
* 新增回傳程序：將以下功能設為<溫度計算>程序
* 輸入平地溫度、山地高度、遞減率
* 回傳山地溫度
* 連結模擬器執行：可加滿分10分
----
----
### 元件面板介紹
* 使用者介面
* 標籤：屬性(文字)
* 文字輸入盒：設定/取得屬性值(文字)
* 按鈕：事件(當按鈕被點選)
* 滑桿：設定/取得屬性值(指針位置)
* 介面配置
* 水平配置：可置入元件左右排列(寬度:填滿)
* 垂直配置：可置入元件上下排列(寬度:填滿)
* BMI練習
* 請插入水平、垂直配置元件
* 寬度：自動、填滿、像素、百分比
---
### 進階練習一：BMI插入圖片(BMI_7)
* 依以下BMI範圍顯示不同圖片
|<18|18~25|25~30|30~35|>35
|:-:|:-:|:-:|:-:|:-:
|||||
|過輕|標準|過重|肥胖|過度肥胖
----
|標準範例|肥胖範例
|:-:|:-:
||
----
|回傳判斷標準|回傳圖檔名稱
|:-:|:-:
||
----
### 進階練習二：BMI加入變數(BMI_8)
* 變數：初始化全域變數(BMI)
|使用元件屬性|使用變數
|:-:|:-:
||
----
### 進階練習三：BMI加入清單(BMI_9)
|建立清單|讀取清單
|:-:|:-:
||
----
### 進階練習四：BMI加入二維清單(BMI_10)
|定義程序(判斷級數)|呼叫程序(判斷級數)
|:-:|:-:
||
----
#### 進階練習四：BMI加入二維清單(BMI_10)
|建立二維清單|讀取二維清單
|:-:|:-:
||
----
### 進階練習五：BMI去除原有變數(BMI_11)
|維持原有變數|去除原有變數
|:-:|:-:
||
----
### 進階練習六：BMI建立設定結果函數(BMI_12)
----
### 進階練習七：BMI使用迴圈判斷結果(BMI_13)
----
#### 進階練習八：BMI使用迴圈判斷結果(BMI_14)
----
#### 進階練習九：BMI使用檔案匯入CSV資料(BMI_15)
* 增加資料儲存中的檔案管理1：非可視元件
----
#### 進階練習十：BMI使用網址匯入CSV資料(BMI_16)
* 增加通訊中的網路1：非可視元件
----
#### 進階練習十一：BMI網址匯入JSON-1(BMI_17)
* 增加通訊中的網路1：非可視元件
----
#### 進階練習十一：BMI網址匯入JSON-2(BMI_17)
* 增加通訊中的網路1：非可視元件
----
#### 進階練習十二：BMI使用PHP匯入JSON(BMI_18)
* 網址改為：https://my.ocu.tw/db/bmi_json.php
```php=
<?php
$DB = new mysqli("localhost", "ocutw_my", "my.ocu.tw", "ocutw_my");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$Data = $DB->query("SELECT 結果文字, 圖片檔名, 最大值 FROM BMI ORDER BY 流水號");
$BMI = array();
while ($object = $Data->fetch_object()) {
array_push($BMI, $object);
}
echo json_encode($BMI);
?>
```
----
#### 進階練習十二：BMI使用PHP匯入JSON-1(BMI_18)
```php=
<?php
$DB = new mysqli("localhost", "ocutw_my", "my.ocu.tw", "ocutw_my");
if ($DB->connect_errno) exit();
$DB->set_charset("utf8");
$Data = $DB->query("SELECT 結果文字, 圖片檔名, 最大值 FROM BMI ORDER BY 流水號");
$BMI = array();
while ($object = $Data->fetch_object()) {
array_push($BMI, $object);
}
echo json_encode($BMI);
?>
```
---
### FLY隨堂練習：移動的球(FLY_1)
* 建立新專案名稱：FLY_1
* 下載球的PNG圖：[連結](https://www.iconfinder.com/)->輸入ball
* 於素材中上傳文件：ball.png
* 建立繪圖動畫->畫布：設定寬度和高度為填滿
* 建立繪圖動畫->圖像精靈：重新命名為球
* 設定大小為50x50、速度為20、指定圖檔
* 在程式設計中拉入以下積木
* 執行連接->模擬器
----
### FLY隨堂練習：互動的球(FLY_2)
* 另存專案名稱：FLY_2
* 建立使用者面->標籤：命名為方向
* 在程式設計中拉入以下積木
* 執行連接->模擬器
---
### WEB隨堂練習1：網頁瀏覽器(WEB_1)
* 建立新專案名稱：WEB_1
* 建立按鈕元件：按鈕1
* 建立網路瀏灠器元件：網路瀏灠器1
* 輸入字串元件：http://google.com/
----
### WEB隨堂練習2：網頁瀏覽器(WEB_2)
* 建立新專案名稱：WEB_2
* 建立按鈕元件：文字輸入盒1
* 建立按鈕元件：按鈕1
* 建立網路瀏灠器元件：網路瀏灠器1
* 建立合併字串元件：輸入以下文字
```javascript=
http://
```
----
### WEB隨堂練習3：產生QRCode(WEB_3)
* 建立新專案名稱：WEB_3
* 建立按鈕元件：文字輸入盒1
* 建立按鈕元件：按鈕1
* 建立網路瀏灠器元件：網路瀏灠器1
* 建立合併字串元件：輸入以下文字
```javascript=
http://chart.apis.google.com/chart?cht=qr&chs=240x240&chl=
```
---
### TinyDB練習：
* 建立按鈕元件：按鈕1(文字：儲存)
* 建立按鈕元件：按鈕2(文字：讀取)
* 建立標籤元件：標籤1
* 建立微型資料庫：微型資料庫1
----
### TinyWebDB練習
* 服務位址：https://ychao-1070102.appspot.com/
----
### 請於HACKMD.IO中填寫以下文件
* 網址：https://hackmd.io/yUt42VhCT42WamwjYUjXwQ
---
### 常用元件及其屬性、事件
* 標籤：
* 按鈕：
Sign in with Wallet
Connect another wallet