第五章 健康一點靈-BMI計算

健康一點靈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 ａ number？的後面。接著在左側Blocks選單中點選Screen1下的TextBox2，選取TextBox2.Text，卡入and後方的is ａ 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下的到Ｍath中選取第一個數字，插入後方，並將數字改成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，而後方放入Ｍath中選取第一個數字，分別輸入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值，還可以即時了解自己是否符合健康標準，真是一舉兩得啊！透過這個練習，對於四則運算的使用是否更加了解了呢！那就可以想想看還有什麼能運用四則運算的。

※完整程式碼：

程式專案檔QRcode：

手機執行檔QRcode：