健康一點靈BMI
1.1 專題介紹:BMI
隨著科技的發展,人們的生活越來越便利,交通方便、生活機能也很健全、美食當然就多囉,相對的,人們的健康就慢慢亮紅燈了,開始有肥胖的問題,所以為了讓我們能更清楚地了解自己的身體狀況,我們可以利用BMI,這個標準來確認自己的健康。
1.2 專題重點
※能夠用程式寫出四則運算
※能夠使用可回覆之文字輸入框
※能夠顯示出結果
※能夠使用變數
2.
專題實作:BMI
2.1專題總覽
開啟健康一點靈APP後,輸入身高與體重,點擊計算BMI就可以算出BMI值,也會顯示出你的身體健康情況為何。
2.2專題建置
1.
新增專案:BMI
按下Start new projects,新增「新增專案:BMI」的專案。
進入App Inventor的Designer視窗
(註:專案名稱開頭不能是數字;專案名稱中可用底線,但是不能使用空格或其他特殊字元)
2.3 介面配置
2.
為Screen1改名稱
在視窗右側的元件庫(Components)點Screen1一下,然後在右邊的屬性(Properties)面板上,找到 Text屬性,在方框中輸入「計算BMI值」。
重新命名:Componunts/ Screen1
Properties/ Text:計算BMI值
3.
使所有元件能夠橫向排列
在視窗左側的元件面板(Palette)中,點Layout一下,找到第一個可左右排列的橫向排列(HorizontalArrangement)按住並拖曳至中間的畫面預覽(Viewer)視窗中,一共要放兩個。
橫向排列:Palette/ Layout/ HorizontalArrangement
4.
加入文字(Label1),輸入身高(m)
在視窗左側的元件面板(Palette)中的User Interface,選取Label按住並拖曳至上一步驟的第一個橫向排列(HorizontalArrangement1)中,再到右邊的屬性(Properties)面板上,找到 Text 屬性,在方框中輸入「身高(m):」。
加入Label1:Palette / User Interface/ Label
Properties/ Text: 身高(m):
5. 加入文字(Label2),輸入體重(kg)
在視窗左側的元件面板(Palette)中的User
Interface,選取Label2按住並拖曳至上一步驟的第二個橫向排列(HorizontalArrangement2)中,再到右邊的屬性(Properties)面板中的 Text 屬性,在方框中輸入「體重(kg):」。
加入Label1:Pagette/ User Interface/ Label
Properties/ Text: 體重(kg)
6. 可以輸入數據的文字框(TextBox文字輸入框)
在視窗左側的元件面板(Palette)中的User Interface,選取TextBox按住並拖曳至在橫向排列(HorizontalArrangement)中的Label1、Label2旁邊,身高跟體重旁都需要放置一個。
加入文字輸入框:Palette/ User
Interface/ TextBox
7. 增加一個送出數值計算BMI的按鈕
在視窗左側的元件面板(Palette)中的User Interface,選取Button按住並拖曳至中間的畫面預覽(Viewer)視窗中。再到右邊的屬性(Properties)面板中的 Text 屬性,在方框中輸入「計算BMI值」。
增加按鈕:Palette/
User Interface/ Button
Properties/ Text: 計算BMI值
8.
新增文字,顯示BMI值與標準
在視窗左側的元件面板(Palette)中的User
Interface,拖曳兩個Label元件至Button1的下方。接著中找到剛剛放置好的Label3及Label4,分別在右邊的屬性(Properties)面板上的Text 屬性輸入「顯示BMI值」與「BMI的回饋」。
新增文字:Palette/ User Interface/ Label
Properties/ Text: 顯示BMI值
Properties/ Text: BMI的回饋
使用元件及其重要屬性
名稱
|
屬性
|
說明
|
Screen1
|
||
HorizontalArrangement1
|
||
Label1
|
Text:身高(m):
|
輸入身高之標題
|
TextBox1
|
輸入身高之輸入框
|
|
HorizontalArrangement2
|
||
Label2
|
Text:體重(kg):
|
輸入體重之標題
|
TextBox2
|
輸入體重之輸入框
|
|
Button1
|
Text:計算BMI
|
|
Label3
|
Text:顯示BMI值
|
顯示BMI值
|
Label4
|
Text: BMI的回饋
|
顯示標準為何
|
2.4專題分析與程式拼塊說明
請先從視窗右上角的 Designer 視窗切換至 Blocks 視窗。
9.
設立變數,分別記錄BMI、身高、體重
請在左側Blocks選單中點選Variables中選取第一個initialize global(name)to,重複此動作3次,分別將(name)改成h、w、bmi,為身高、體重、運算出的BMI設變數。並在每個global卡入左側Blocks選單中點選Built-in下的Math中,選取0。
新增變數:Blocks/
Variables/ initialize global name to將name改成h、w、bmi
Blocks/ Built-in/ Math/ 0
10. 讓Button 可執行指令
在左側Blocks選單中點選Screen1下的Button1,在彈出的拼圖式程式區塊中選取 when
Button1.Click do,置於預覽視窗中。
11. 讓只有回答框中為數字才可執行
在左側Blocks選單中點選Control下的if/then,卡入when Button1.Click do中。在左側Blocks選單中點選Built-in下的Logic,選取and卡入if後方,再從左側Blocks選單中點選Built-in下的Math,選取最下面的is the number,卡入and前後各一個。接著在左側Blocks選單中點選Screen1下的TextBox1,選取TextBox1.Text,卡入and前方和is a number?的後面。接著在左側Blocks選單中點選Screen1下的TextBox2,選取TextBox2.Text,卡入and後方的is a number?的後面。
限定執行條件:Blocks/
Control/ if then
Blocks/
Built-in/ Logic/ and
Blocks/
Built-in/ Math/ is a number?
Blocks/
Screen1/ TextBox1/ TextBox1.Text
Blocks/
Built-in/ Math/ is a number?
Blocks/
Screen1/ TextBox2/ TextBox2.Text
12.紀錄輸入之身高
在左側的Block中的Variables選取set to接在if/then中,並將空格中選取global h。在左側的Block中的Screen1裡面的TextBox1選取TextBox1.Text,接在set
global h to 的後方。
紀錄身高:Blocks/ Variables/ set global h to
Blocks/ Screen1/ TextBox1/ TextBox1.Text
13. 紀錄輸入之體重
在左側的Block中的Variables選取set to接在set global h to的下方,並將空格中選取global w。在左側的Block中的Screen1裡面的TextBox2選取TextBox2.Text,接在set
global w to 的後方。
紀錄體重:Blocks/ Variables/ set global w to
Blocks/ Screen1/ TextBox2/ TextBox2.Text
14. 計算BMI
再重複接上Variables中選取set to,並將空格中選取global bmi,因為要運算,所以要接上Math中選取/,在/的前方卡上Variables中選取get ,並將空格中選取global w。在/的後方卡入Math中選取×,在×中皆卡入Variables中選取get ,並將空格中選取global h。
計算BMI:Blocks/
Built-in/ Variables/ set global bmi to
Blocks/
Built-in/ Math/“/”
Blocks/ Built-in/ Variables/ get global w
Blocks/ Built-in/ Math/ ×
Blocks/ Built-in/ Variables/ get global h
15. 顯示BMI值
在左側Blocks選單中點選Screen1中的Label3選取set Label3.Text to 並放置於set global
bmi to的下方在左側Blocks選單中點選Built-in中的Text選取join,接在set Label3.Text to的後方。在左側Blocks選單中點選Built-in中的Text選取" ",將空格改成"BMI值"。在左側Blocks選單中點選Built-in中的Variables選取get
,將空格改成global bmi。並分別放置於join後的上方及下方
顯示BMI值: Blocks/ Screen1/ Label3/
Label3.Text0
Blocks/ Built-in/ Text/
join0
Blocks/ Built-in/ Text/ “BMI值”
Blocks/ Built-in/ Variables/ get global bmi
※BMI回饋
以下是標準的查表。
成人肥胖定義
|
身體質量指數(BMI)(kg/m*m)
|
體重過輕:BMI<18.5
|
健康體位:18.5<=BMI<24
|
體重過重:24<=BMI<27
|
輕度肥胖:27 <= BMI < 30
|
中度肥胖:30 <= BMI < 35
|
重度肥胖:BMI >= 35
|
依照上方的標準,再到Blocks撰寫程式。
16. 再做一個條件
在左側Blocks選單中點選Control下的if/then,置於set Label3.Text to的下方。
新增條件:Blocks/
Control/ if then
17. 限定條件的條件範圍(體重過輕:BMI<18.5)
在左側Blocks選單中點選Built-in下的Math,選取<,卡入if後方。接著在左側Blocks選單中點選Built-in下Variables中選取get ,並將空格中選取global bmi後卡入<後方。再到左側Blocks選單中點選Built-in下的到Math中選取第一個數字,插入後方,並將數字改成18.5。
條件範圍:Blocks/
Built-in/ Math/ <
Blocks/ Built-in/ Variables/ get global bmi
Blocks/ Built-in/ Math/ 0
將0改成18.5
18. 當符合條件時,顯示體重過輕
在左側Blocks選單中點選Screen1下的Label4,在彈出的拼圖式程式區塊中選取set Label4.Text
to,卡入then的後方。接著在左側Blocks選單中點選Text,選中第一個有雙引號,並輸入「體重過輕」。
顯示體重過輕:Blocks/
Screen1/ Label4/ set Label4.Text to
Blocks/ Text/ ““
輸入"體重過輕"
19. 限定條件的條件範圍(健康體位:18.5<=BMI<24)
在左側Blocks選單中點選Control下的if/then,置於上一步驟的if then下方。在左側Blocks選單中點選Built-in下的Logic,選取and卡入if後方,接著從Math中,選取一個>=和一個<,分別卡入and的前後方,分別在>=&<的前方各卡入一個get(global bmi)to,而後方放入Math中選取第一個數字,分別輸入18.5、24,因為條件有兩個,所以在將第二個條件卡入if後方時,要透過and來連結。。
條件範圍:Blocks/ Built-in/ Logic/ and
Blocks/ Built-in/ Math/ >=
Blocks/ Built-in/ Math/ <
Blocks/ Built-in/ get global bmi to
Blocks/ Math/ 0
將0改成18.5
將0改成24
20. 當符合條件時,顯示健康體位
在左側Blocks選單中點選Screen1下的Label4,在彈出的拼圖式程式區塊中選取set Label4.Text
to,卡入then的後方。接著在左側Blocks選單中點選Text,選中第一個有雙引號,並輸入"健康體位"。
顯示健康體位:Blocks/ Screen1/ Label4/ set Label4.Text to
Blocks/ Text/ ““
輸入"健康體位"
※以此類推,就可以將BMI的回饋也顯示在APP裡喔!
※注意:所有與回饋有關的if/then,都要包在第一個if/then裡。
3.其他應用
這樣不只可以快速知道自己的BMI值,還可以即時了解自己是否符合健康標準,真是一舉兩得啊!透過這個練習,對於四則運算的使用是否更加了解了呢!那就可以想想看還有什麼能運用四則運算的。
※完整程式碼:
影音解說在此:https://www.youtube.com/watch?v=qR1daOduoXI
回覆刪除原始碼(.aia)下載連結:https://drive.google.com/file/d/0Bz_3MvZ2YjRnaTRqQ3BNbm11ZzQ/view?pli=1
Ted Lee