作者：Ted Lee
當雲端的新服務發佈（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] 六種授權條款。
從工程師轉任中學教師，又為了捍衛教育理念，投身成為 STEAM 教育工作者，自稱「無可救藥的人文教育理想主義者」的李俊德（Ted Lee）。
Latest posts by Ted Lee (see all)
- 用GenAI生成連連看樣板 - 2025/05/15
- 細談「春仔產生器」的專案拆解 - 2025/04/17
- 用生成式AI打造「春仔」產生器 - 2025/03/12
訂閱MakerPRO知識充電報
與40000位開發者一同掌握科技創新的技術資訊！
