2023年4月30日 星期日

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

 從流程圖到 Thunkable app_3:

計算圓面積

Line:ted2016.kpvs
Email:Lct4246@gmail.com
FBhttp://gg.gg/TedLeeFB/
Bloghttp://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:積木程式