網頁

2017年11月18日 星期六

手機 App 程式設計- AppInventor2 -計算BMI

題目

世界衛生組織建議以身體質量指數(Body Mass Index, BMI)來衡量肥胖程度,其計算公式是以體重(公斤)除以身高(公尺)的平方。 國民健康署建議我國成人BMI應維持在18.5(kg/m2)及24(kg/m2)之間,太瘦、過重或太胖皆有礙健康。
健康體位 : 18.5 ≦ BMI<24。
輸入身高和體重,算出 BMI。若 BMI ≧  24 ,表示「體重過重」;若 BMI < 18.5 ,表示「體重過輕」; 若 BMI  介於 18.5 及 24 之間,表示「體重標準」。

步驟

進入 Appinventor 

Google 輸入 appinventor,選 「MIT App Inventor」。

選 「Create Apps」。

建立新專案

在 Projects , 選 「Start  new project」。專案名稱輸入 : bmi。
在  Layout(介面配置) 選單下面 選 「HorizontalArrangement」(水平配置)元件,拖曳到工作面板區,此元件名稱預設為 HorizontalArrangement1, 屬性設定如下:
  • width: Fill parent(填滿)
按 User Interface(使用者介面)選單中的Label(標籤)元件,拖曳到 HorizontalArrangement1內,預設名稱為Label1,屬性設定如下:
  • Fontsize : 20 
  • Text : 身高(CM):
按 User Interface 選單中的TextBox(文字輸入盒,即文字方塊)元件,拖曳到 HorizontalArrangement1內,預設名稱為TextBox1 , 屬性設定如下:
  • Fontsize : 20 
  • Hint:   (請 刪除原來的文字,維持 清空)
在  Layout 選單下面 選 「HorizontalArrangement」元件,拖曳到工作面板區,此元件名稱預設為 HorizontalArrangement2, 屬性設定如下:
  • width: Fill parent
按 User Interface 選單中的Label元件,拖曳到 HorizontalArrangement2內,預設名稱為  Label2,屬性設定如下:
  • Fontsize : 20 
  • Text : 體重(KG):
按 User Interface 選單中的TextBox元件,拖曳到拖曳到 HorizontalArrangement2內,預設名稱為 TextBox2 , 屬性設定如下:
  • Fontsize : 20 
  • Hint:   (請 刪除原來的文字,維持 清空)
(TextBox2  和  TextBox1 ,2個相似,可以選 TextBox1,按 Ctrl +C,選 HorizontalArrangement2,再按  Ctrl +V ,貼過來)

按 User Interface 選單中的Button(按鈕)元件,拖曳到工作面板區,預設名稱為Button1,屬性設定如下:
  • Fontsize : 20 
  • width: Fill parent
  • Text : 計算 BMI
按 User Interface 選單中的 Notifier(對話框) 元件,拖曳到工作面板區,預設名稱為Notifier1。

更改元件(Component)名稱

TextBox1 、TextBox2 這樣的名稱,不知其意義,所以將元件取1個有意義的名稱。如 TextBox1 更名為  TextBoxHeight,表示要顯示 身高。
選 TextBox1 更名為  TextBoxHeight。

依此類推,選 TextBox2 更名為  TextBoxWeight(體重)。
將 Scree1 的Title  更改為 :計算BMI。
最後Designer (畫面編排)如下:

Blocks(程式設計)拼塊

按螢幕 右上方的 Blocks, 切換到 Blocks 模式。
按 Built-in 內的 Variables,選 「initialize global name to 」block。
把 name 改成 height。
按 Built-in 內的 Math,選 「number」block,插入到 「initialize global height to 」block。


仿照上述方式,做出 「initialize global weight to 」block,並設為0。
------------------------------------------------------------------------------------
另一種方式, 選「initialize global height to 」block,按右鍵,選 Duplicate,複製另一個block,把 height2 改成 weight。
------------------------------------------------------------------------------------
仿照上述方式,做出 「initialize global bmi to 」block,並設為0。
滑鼠移到 「initialize global height to 」block 中的 height 上面,把「 set global height to 」block 拉出來。
按 Built-in 內的 Math,選 「/ 」block。
按 Built-in 內的 Math,選 「number 」block。
按 TextBoxHeight,選 「TextBoxHeight.Text 」block。

將「number」block的值改為100 ,因為身高是 cm,要轉換成 m (公尺)。
將 TextBoxHeight.Text 插入到 「/ 」block 的第1個位置。100 此 block 插入到 「/ 」block 的第2個位置。再整個插入到  「 set global height to 」block。
按 Button1,選 「when  Button1.Click do 」 block。
將 「 set global height to 」block  插入到 「when  Button1.Click do 」 block內。
滑鼠移到 「initialize global weight to 」block 中的 weight 上面,把「 set global weight to 」block 拉出來。
按 TextBoxWeight,選 「TextBoxWeight.Text 」block,插入到 「 set global weight to 」block 。
再插入到 「when  Button1.Click do 」 block內。
滑鼠移到 「initialize global height to 」block 中的 height 上面,把「 get global height 」block 拉出來。
滑鼠移到 「initialize global weight to 」block 中的 weight 上面,把「 get global weight 」block 拉出來。
按 Built-in 內的 Math,選 「/ 」block。
按 Built-in 內的 Math,選 「^ 」(次方)block。
按 Built-in 內的 Math,選 「number 」block,輸入2。
依下列組合    weight/height^2
滑鼠移到 「initialize global bmi to 」block 中的 bmi 上面,把「 set global bmi to  」block 拉出來,把上面的 「/ 」block,插入到 「 set global bmi to  」block。
「 set global bmi to  」block 插入到 「when  Button1.Click do 」 block內。
按 Built-in 內的 Variables,選 「initialize global name to」block,變數名稱改為 message。
按 Built-in 內的 Text,選 「text string」block,插入到 「initialize global message to」block。
按 Built-in 內的 Control,選 「if then」block。


滑鼠移到 「initialize global bmi to 」block 中的 bmi 上面,把「 get global bmi 」block 拉出來。
按 Built-in 內的 Math,選 「equal」block,改成  >= 。選 「number」block,數值改為24。
將上述三個block 組合。

滑鼠移到 「initialize global message to 」block 中的 message 上面,把「 set global message to 」block 拉出來。
按 Built-in 內的 Text,選 「text string」block,輸入 ",體重過重",插入到 「 set global message to 」block 。
按 「if then」block 左上方的藍色小圖示,將 else if 拉到 if  內,如下圖。
選下圖藍色 「equal」block,按右鍵,選 duplicate,複製,改成 < ,插入到 else if 後面。
24 改成 <18.5。
選 「set global message to」block,按右鍵,選 duplicate,複製,插入到 then 後面。
改為 ",體重過輕"。
按 「if then」block 左上方的藍色小圖示,將 else  拉到 if  內,如下圖。

複製出另一個「set global message to」block ,插入到 else後面,並改成 ",體重標準"。
滑鼠移到 「initialize global message to 」block 中的 message 上面,把「 get global message  」block 拉出來,相同方式 拉出「 get global bmi   」block 。
按 Built-in 內的 Text,選 「text string」block,輸入 "BMI值="。並拉出 2個 「join」block。
按 Built-in 內的 Math,選 「format as decimal 」block,並拉出 「number」block,數值改為2,也就是顯示到小數點第2位。
format as decimal 的意義:
將原數字轉換為指定位數之小數。指定小數位數不能為負數。若原小數位數過多則四捨五入,反之則補0。 

依下圖組合這些 block。
按 Notifier1,選 「call Notifier1.ShowMessageDialog 」block。
把上面做好的 「join」block ,插入到 message 後面。
按 Built-in 內的 Text,選 「text string」block,輸入 "您的BMI值如下",插入到 title 後面 。
按 Built-in 內的 Text,選 「text string」block,輸入 "確定",插入到  button Text 後面 。
將 所有 Block 組合成下面的畫面:

執行結果