從流程圖到 Thunkable app_3：
計算圓面積
Line：ted2016.kpvs
Email：Lct4246@gmail.com
FB：http://gg.gg/TedLeeFB/
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。
程式畫面
在程式自動化方面，當我們輸入完圓形的半徑時會觸發（trigger）改變（Changes）事件，於是我們立刻計算該圓的面積並在畫布上畫出它的形狀（圖 5）。
[1] 六種授權條款。
