2014年12月25日 星期四

第五章 健康一點靈-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):」。

加入Label1Palette / User Interface/ Label
        Properties/ Text: 身高(m)

5.     加入文字(Label2),輸入體重(kg)
在視窗左側的元件面板(Palette)中的User Interface,選取Label2按住並拖曳至上一步驟的第二個橫向排列(HorizontalArrangement2)中,再到右邊的屬性(Properties)面板中的 Text 屬性,在方框中輸入「體重(kg):」。

加入Label1Pagette/ User Interface/ Label
        Properties/ Text: 體重(kg)


6.  可以輸入數據的文字框(TextBox文字輸入框)
在視窗左側的元件面板(Palette)中的User Interface選取TextBox按住並拖曳至在橫向排列(HorizontalArrangement)中的Label1Label2旁邊身高跟體重旁都需要放置一個。

加入文字輸入框: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.Textset 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.Textset 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-inVariables中選取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.524,因為條件有兩個,所以在將第二個條件卡入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


1 則留言:

  1. 影音解說在此:https://www.youtube.com/watch?v=qR1daOduoXI
    原始碼(.aia)下載連結:https://drive.google.com/file/d/0Bz_3MvZ2YjRnaTRqQ3BNbm11ZzQ/view?pli=1

    Ted Lee

    回覆刪除