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

 從流程圖到 Thunkable app_2：

計算長方形面積

Ted Lee的土饅頭（To Mentor）工坊

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：積木程式

---

[1] 六種授權條款。