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