顯示具有 app 標籤的文章。 顯示所有文章
顯示具有 app 標籤的文章。 顯示所有文章

2023年6月21日 星期三

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_5：計算體脂肪 BMI 值

 從流程圖到 Thunkable app_5：

計算體脂肪 BMI 值

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

June 21, 2023
[1]

 


本 Thunkable app 系列文之五係改編陳會安老師所著「2_fChart_Blockly_Thunkable_變數與運算子(循序結構).pdf（https://reurl.cc/6NEGRV）」中第 46、81 至 83 頁中攝氏溫度轉華氏範例。
第一小節先說明要解決的問題，再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖（圖 1、2）。最後再著手設計 app 的呈現畫面（圖 3、4）及其背後的控制程式（圖 5）。

問題說明

輸入身高 h（單位：公尺）及體重 w（單位：公斤），使用下列公式自動計算出相對應的 BMI（Body Mass Index，身體質量指標）數值：
BMI = w / h × h，h 以公尺計

根據陳會安老師提供的圖 1 流程。

圖 1：BMI 的解題流程圖

我們說這個人身高 180，基本單位是「公分」。然而，BMI 公式中的身高是要以「公尺」做度量。有句廣告詞說的好：電腦也會煮花生。不管使用者要輸入哪一種，程式應該可以更聰明地自動判斷出來吧？（圖 2）。

圖 2：程式會自動判斷身高的單位

畫面設計

會安老師設計的畫面如圖 3 所示，我們將使用 3 個 Label、2 個 Text Input 和 1 個 button 元件來完成。

圖 3：畫面設計圖

各元件的命名及其屬性設定詳列如圖 4。


圖 4：各元件設定

程式畫面

在程式自動化方面，當我們輸入完身高與體重，按下按鈕後即開始計算 BMI 值。最後，將計算結果直接更新到畫面最下方的文字標籤即可（圖 5）。


圖 5：積木程式

張貼者： 於 沒有留言:
標籤： , ,

2023年5月29日 星期一

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_4：攝氏轉華氏溫度

 從流程圖到 Thunkable app_4：

攝氏轉華氏溫度

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

May 29, 2023
[1]


本 Thunkable app 系列文之四係改編陳會安老師所著「2_fChart_Blockly_Thunkable_變數與運算子(循序結構).pdf（https://reurl.cc/6NEGRV）」中第 43 至 45 頁中攝氏溫度轉華氏範例。
第一小節先說明要解決的問題，再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖（圖 1、2）。最後再著手設計 app 的呈現畫面（圖 3、4）及其背後的控制程式（圖 5）。

問題說明

由鍵盤手動輸入圓的攝氏（Celsius）溫度 C 後 app 會自動代入以下公式來計算出對應的華氏（Fahrenheit）溫度 F：
F = C× 9 / 5 + 32

陳會安老師已提供了如圖 1 的轉換流程。

圖 1：溫度轉換問題流程圖

為了實作的方便起見，我們將圖 1 更精要地濃縮為圖 2 的流程圖。

圖 2：溫度轉換問題的抽象流程圖

畫面設計

畫面的安排如圖 3 所示，我們使用 3 個 Label 和 1 個 Text Input（右上處）元件。

圖 3：畫面設計圖

各元件的命名及其屬性設定詳列如圖 4。


圖 4：各元件設定

程式畫面

在程式自動化方面，當我們輸入完華氏溫度時會觸發（trigger）改變（Changes）事件，於是我們立刻計算對應的華氏溫度並更新顯示結果（圖 5）。


圖 5：積木程式

進階思考

請讀者們動動腦，將以上的問題修改為華氏溫度轉換為攝氏溫度。或者，調整為不管是輸入哪一種溫標，程式都能自動處理。

張貼者： 於 沒有留言:
標籤： , ,

2023年4月30日 星期日

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_3：計算圓面積

 從流程圖到 Thunkable app_3：

計算圓面積

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Apr. 30, 2023
[1]


本 Thunkable app 系列文之三係改編陳會安老師所著「2_fChart_Blockly_Thunkable_變數與運算子(循序結構).pdf（https://reurl.cc/6NEGRV）」中第 40 至 42 頁中計算圓面積範例。
第一小節先說明要解決的問題，再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖（圖 1、2）。最後再著手設計 app 的呈現畫面（圖 3、4）及其背後的控制程式（圖 5）。

問題說明

由鍵盤手動輸入圓的半徑（radius）後 app 會自動計算該圓的面積，並將之繪於畫面上。
陳會安老師提供了本問題前半段的解決流程：輸入圓的半徑 r，自動計算其面積，如圖 2 所示。

圖 1：長方形面積的計算流程

緊接著，要以半徑 r 在畫面上實際畫出該圓，如圖 2 所示。

圖 2：計算圓面積並繪圖的解題流程

畫面設計

畫面的安排如圖 3 所示，我們使用 3 個 Label、1 個 Text Input 和 1 個 Canvas（畫布）元件。

圖 3：畫面設計圖

各元件的命名及其屬性設定詳列如圖 4。


圖 4：各元件設定

程式畫面

在程式自動化方面，當我們輸入完圓形的半徑時會觸發（trigger）改變（Changes）事件，於是我們立刻計算該圓的面積並在畫布上畫出它的形狀（圖 5）。


圖 5：積木程式

張貼者： 於 沒有留言:
標籤： , ,

2023年3月11日 星期六

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_2：計算長方形面積

 從流程圖到 Thunkable app_2：

計算長方形面積

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Mar. 11, 2023
[1]

當雲端的新服務發佈（publish）後沒多久，透過 API（Application Programming Interface）呼叫，App 版的介面也會很快的發行。舉例來說，ChatGPT 在 2022 年 11 月上線後，對應的 apps 在近期也可以陸陸續續從 app 市集（markets）上下載到。因此，雲端服務同時能提供網頁和 app 形式來連接已成為現今最主流的雙介面。
另一方面，行動載具採 MVC（Model View Controller）設計概念，分成畫面設計和程式設計兩個階段。本文先說明要解決的問題，再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖。最後再著手設計 app 的呈現畫面及其背後的控制程式。

問題說明

由鍵盤輸入長方形的寬，並自動計算其面積。
陳會安老師提供了本問題的解決流程如圖 2 所示。首先，設定好長方形的高 height 為 135。接著，讀取輸入的寬 width。最後，計算其面積 area，並將之顯示在畫面上。

圖 1：長方形面積的計算流程

畫面設計

畫面的安排如圖 2 所示，我們使用馬 3 個 Label 和 1 個 Text Input 元件。
圖 2：畫面設計圖

各元件的命名及其屬性設定詳列如圖 3。

 
圖 3：各元件設定

程式畫面

在程式自動化方面，當我們輸入完長方形寬的大小後，按下 Enter 鍵或以滑鼠在空白處輕點一下（完成輸入）後會立即啟動 Submit（提交）事件。因此，我們將長方形的計算方式及結果輸出包在這個事件處理積木之內即可完成處理（圖 4）。


圖 4：積木程式

張貼者： 於 沒有留言:
標籤： , ,

2023年2月28日 星期二

[app, Thunkable, flowchart] 從流程圖到 Thunkable app_1：加法

 從流程圖到 Thunkable app_1：

加法

Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
Blog：http://gg.gg/TedLeeBlog/

Feb. 28, 2023
[1]


我們在這篇文章《從想法到實現：怎麼用程式解決問題？》（https://reurl.cc/6NEG7d）中已明確的指出：

流程圖（flowchart）為程式邏輯之母
將原始問題的一連串解決步驟表達成清晰、明確的解題流程之後，想要使用任何的程式語言來實作（implement）成軟體工具就變成「流程圖與程式語言」對應的轉換問題了。
本文以陳會安老師分享的 fChart+Thunkable 示例，詳細的解說 fChart（https://reurl.cc/gZ0rXV）流程圖如何以手工方式（目前沒有流程圖自動轉成程式語言語法（syntax）的演算法）一一轉換為 Thunkable app 。

  1. 1_fChart_Blockly_Thunkable_基礎與程式邏輯（https://reurl.cc/qkOp2p）
  2. 2_fChart_Blockly_Thunkable_變數與運算子(循序結構)（https://reurl.cc/6NEGRV）
  3. 3_fChart_Blockly_Thunkable_是否選(選擇結構)（https://reurl.cc/MRb2om）
  4. 4_fChart_Blockly_Thunkable_二選一(選擇結構)（https://reurl.cc/pLWpbd）
  5. 5_fChart_Blockly_Thunkable_多選一(選擇結構)（https://reurl.cc/DmdxMO）
  6. 6_fChart_Blockly_Thunkable_迴圈(重複結構)（https://reurl.cc/mlGpbV）
  7. 7_fChart_Blockly_Thunkable_函數(模組)（https://reurl.cc/AdK9ed）
  8. 8_fChart_Blockly_Thunkable_清單(資料結構)（https://reurl.cc/Nqp2mm）
  9. 9_Thunkable多螢幕App開發（https://reurl.cc/xlOWME）
  10. 10_Thunkable跨平台行動開發(專案實例)（https://reurl.cc/qkOpRD）

App 設計在 maker、IoT 上扮演的角色定位

在筆者拙著《物聯網的兩種標準作業模式：地對雲與雲對地》（https://reurl.cc/xlOWrb）一文中，從圖 1 中可以看出行動 Apps 扮演著兩種模式：遠端監控（remote monitoring）和遠端顯示（remote display）。

 
圖 1：IoT 三大技術領域：邊緣運算、雲端服務與行動 Apps

雖然目前 app 開發的市場已趨近飽和，像憤怒鳥 app 那樣一上架就萬人下載的榮景不再，不過 maker 或 IoT 創作者客製化（customize）成符合自己作品應用情境的版本仍是有其需求的。
註：我們之所以挑選 Thunkable 做為 apps 開發的入門工具乃是因為它能同時支援 Android 與 iOS 軟硬體平台。

問題說明

由鍵盤輸入兩數字，並顯示其和。
在圖 2 中，我們截取會安老師繪製的 fChart 流程圖來說明上述問題的四個解決步驟：輸入兩個數字 a 和 b、計算相加之和、顯示結果。

圖 2：兩數求和計算

App 設計邏輯：三區與二畫面

apps 設計工具多半採用 MVC（Mode-View-Controller，模型─視圖─控制器）架構，圖 3 即為 Thunkable IDE 的三明治式執行畫面：左側為元件（components）區、中間為 UI 設計區，最右側為元件屬性（properties）區。
此外，apps 設計的過程也分成設計（Design）畫面與程式（Blocks）畫面。我們將在隨後的兩小節中詳細說明。

圖 3：Thunkable IDE

設計畫面

app 設計第一要務是要先想好它的呈現畫面。如圖 4 所示，我們需要 3 個文字標籤、2 個輸入文字和 1 個按鈕。
圖 4：UI 設計圖

在圖 5 中詳列了圖 4 用到的元件，將之以「元件名稱縮寫+用途」重新命名，並各元件對應的屬性。其中，為了畫面管理方便，我們在第一個數字和第二個數字區域使用 Group 來將 Label 與 Text Input 兩個元件以群組方式打包起來。

   
圖 5：元件配置、命名與其屬性設定

程式畫面

在圖 4 的 app 畫面中，我們輸入兩個數字 opd1 和 opd2，按下（Click 事件）藍色的計算鈕後將它們的相加的結果顯示在畫面的最下方。


圖 6：積木程式

張貼者： 於 沒有留言:
標籤： , ,
訂閱： 文章 (Atom)