作者：Ted Lee
綜觀各類積木程式（Google Blockly、MIT Scratch、MakeCode…）的學習，學員們拉完／玩積木後是否都已學會了程式設計的「邏輯」了呢？還是只是拼拼湊湊地在玩拼圖遊戲而已？
程式設計的訓練目在培養解決問題（problem solving）能力（圖 1），在這一方面，陳會安老師以自己研發的流程圖識讀工具 fChart 精編了 150 道題目（https://reurl.cc/m3G2XW） 來協助初學者從流程圖轉換到 Python、C、Java…等各程式語言語法。
圖 1：問題解決流程
因此，本文第 1 至 3 小節以問題形式來包裝所有程式語言都會支援的循序結構（sequential structure）、選擇結構（selective structure）和重複結構（repetitive structure）結構化程式設計共通的三大結構來呈現圖 1 的完整解題過程。
在第 4 小節中，我們從 fChart 150 題中選出符合這三大結構的三個示例來說明如何用這 150 題來熟悉圖 1 後半中流程圖識讀並能以 MakeCode 程式來實現的轉換過程。
註：fChart 能用的「有限」流程圖符號（symbols）如圖 2。原作者陳會安老師總是再三強調：就是因為它只有幾個少少的符號，所以將問題解法以流程圖來表達是很容易學會的！
圖 2：fChart 包含的流呈圖符號
1. 例 1
問題：讓小彼特（文後皆以此來稱呼 micro:bit）可以呈現心跳（heart beating）的效果。
流程圖：以大愛心、小愛心兩圖示依序輪流顯示來達到心跳的律動（圖 3）。注意：想法不同，解法就各異，而不同的解法也就會對應出不同的解決流程。
實作：以 MakeCode 來實作流程圖的解法如圖 4 所示，圖 3 的兩個步驟分別對應到圖 4 的大小愛心兩塊積木，而且我們可以很清楚地從圖 5 的小彼特模擬器（simulator）中觀看到圖 4 積木程式的執行結果動畫。
圖 3：解法流程圖
圖 4：MakeCode 實作
圖 5：實作結果動畫
完整的程式碼可由 https://reurl.cc/gM2qxX 下載之。
2. 例 2
問題：接下 A 按鈕後，讓小彼特心跳一下。
流程圖：當按鈕 A 接下後，顯示大愛心和小愛心圖示一次，如圖 6 所示。
實作：以 MakeCode 實作後的積木程式如圖 7 所示，其中，心跳完一下應該停止顯示，所以，我們在小愛心圖示之後加上清除的積木。最後，程式的執行動畫如圖 8 所示。
圖 6：解法流程圖
圖 7：MakeCode 實作
圖 8：實作結果動畫
完整的程式碼可由 https://reurl.cc/jG1AL1 下載之。
3. 例 3
問題：接下 A 按鈕後，讓小彼特心跳三下。
流程圖：當按鈕 A 接下後，重複顯示大愛心和小愛心圖示三次，如圖 9 所示。
實作：以 MakeCode 實作後的積木程式如圖 10 所示。程式的執行動畫如圖 11 所示。
圖 9：解法流程圖
圖 10：MakeCode 實作
圖 11：實作結果動畫
完整的程式碼可由 https://reurl.cc/nO1aWn 下載之。
4. fChart 的選例
我們從 fChart 150 題（https://reurl.cc/m3G2XW） 中，選出循序、選擇與重複三大結構的示例來展示圖 1 後半段（流程圖轉語法）的練習方法。
A. 循序結構
題目：（01.變數與輸出輸入：01-02輸出二行）顯示 520 後再顯示 1314 。
MakeCode 程式：如圖 12 所示。完整程式碼可從 https://reurl.cc/2mZpVm 下載之。
圖 12：fChart 循序結構選例
B. 選擇結構
題目：（03.條件判斷：03-01.單選_絕對值）。計算變數 value 的絕對值。
MakeCode 語法積木：
MakeCode 程式：如圖 13 所示。完整程式碼可從 https://reurl.cc/yMrza6下載之。
圖 13：fChart 選擇結構選例
C. 重複結構
題目：（04.迴圈結構：04-01.前測_顯示5次大家好）。重複顯示五次「Hi」。
MakeCode 語法積木：
MakeCode 程式：如圖 14 所示。完整程式碼可從 https://reurl.cc/bE2086 下載之。
圖 14：fChart 重複結構選例
fChart 150 題把各種程式語言裡「共通」的內容從基礎到進階彙編成一道一道的基本功練習：讀懂流程圖，用對應程式語法實現。這樣的練習有助於用最短的時間熟悉任何程式語言語法（syntax）的七成以上內涵。然而，語法只是表達的工具，在解決問題的任務下，想法邏輯的訓練才是最關鍵的基礎能力喔！
