作者：Ted Lee
本 Thunkable app 系列文之六係改編陳會安老師所著「3_fChart_Blockly_Thunkable_是否選(選擇結構).pdf」中第 29~31 頁中「購物運費」範例。
第一小節先說明要解決的問題，再將它的解題步驟匯整為陳會安老師設計的 fChart 流程圖（圖 1）。最後再著手設計 app 的呈現畫面（表 1）及其背後的控制程式（圖 3）。
問題說明
手動輸入購物金額後，app 會自動判斷全部款項如果超過優惠門檻 490 元，則得以免除運費 50 元。
我們將題目的判斷邏輯以圖 1 的流程圖來表示。
圖 1：判斷流程圖
畫面設計
會安老師設計的畫面如圖 2 所示，我們將使用 2 個 Label（app 標題及結果訊息）、1 個 Text Input（輸入金額） 和 1 個 button（計算結果）元件來完成。
圖 2：畫面設計
上述各元件命名及其相關的屬性設定詳列如表 3。
表 3：各元件設定
程式畫面
在程式自動化方面，當我們輸入購物總金額，並按下計算按鈕後即自動計處理是否啟動含運的優惠方案。最後，將其結果直接顯示在畫面最下方的文字標籤（圖 3）。
圖 3：積木程式
[1]六種授權條款
（作者為本刊專欄作家，本文同步表於作者部落格，原文連結；責任編輯：謝涵如）
從工程師轉任中學教師，又為了捍衛教育理念，投身成為 STEAM 教育工作者，自稱「無可救藥的人文教育理想主義者」的李俊德（Ted Lee）。
Latest posts by Ted Lee (see all)
- 用GenAI生成連連看樣板 - 2025/05/15
- 細談「春仔產生器」的專案拆解 - 2025/04/17
- 用生成式AI打造「春仔」產生器 - 2025/03/12
訂閱MakerPRO知識充電報
與40000位開發者一同掌握科技創新的技術資訊！
