台灣的下一步，就從學 Coding 開始

「輕鬆使用 fChart 流程圖和 Blockly 積木學習基礎程式設計」

fChart
  • fChart 程式設計教學工具 - 學 Coding 的好幫手
  • fChart 分類 150 個流程圖專案 - 程式邏輯訓練的好幫手
  • Cake Blockly for C - 使用積木輕鬆拼出你的 ANSI-C 程式
  • ESP8266 Blockly for MicroPython - IoT 裝置用積木也會通喔
  • Node-RED - 免程式 AIoT 物聯網與 Web 網站架設必學神器

Cake Blockly for C 語言 1.01 中文線上版    ESP8266 Blockly for MicroPython 英文線上版    My Mind 心智圖 中文線上版

   下載fChart6標準版    下載fChart6Thonny套件    分類流程圖專案    fChart6使用手冊    運算思維與Python程式設計課程   

   下載fChart6標準版(MEGA)    下載fChart6Thonny套件(MEGA)

關於fChart教學工具

全系列 fChart 已經升級至.NET 4(完整支援Win 10)和最新流程圖直譯器(支援陣列)。

一套真正可以使用「流程圖」引導程式設計教學的「完整」學習工具， 不只可以透過流程圖學習程式邏輯，更可以幫助初學者或Scratch, AI2積木程式設計者， 輕鬆進入真正的「Coding」世界。官方網址: https://fchart.github.io 和 http://fchart.is-best.net

  • 大幅降低學習程式設計的門檻，源於App Inventor和Scratch的積木拼塊，我們一樣可以使用類似方式， 使用組裝方式建立英文程式碼，讓我們不用自行使用鍵盤輸入程式碼，就可以快速執行功能表命令來插入和輸入英文程式碼。
  • 提昇程式設計所需的抽象思考力，透過「可執行」流程圖讓初學者改用流程圖來思考程式問題，可以建立流程圖符號和程式碼片段之間的連接，讓初學者了解程式語法是如何使用，用在哪裡和如何將它們組裝成一個完整程式。
  • fChart程式設計教學工具是「綠化版本」，解壓縮後就可以馬上使用， 內附完整流程圖專案範例，你可以解壓縮至行動碟，隨時隨地開始寫C, C++, Python, JavaScript, VB, C#和Java程式，和使用Cake Blockly for C(CakeC)拼出C程式，主要有四種版本:
    • 標準版-支援C,C#,Java,VB(CakeC,NClass)
    • Arduino版-支援C,C++,C#,Java,VB,Arduino(CakeC,ArduBlockly)
    • Python版-支援C,Python,C#,HTML+JavaScript,Java,VB(CakeC,Blockly)
    • Node版-支援C,C#,HTML+JavaScript,Java,Node.js,VB(CakeC,Blockly,Node-RED)
  • 在標準版V5新增NClass最簡單的UML類別圖工具(支援C#和Java語言)，現在，我們可以使用流程圖學結構化程式設計; 類別圖學物件導向程式設計。
  • fChart 6.0版支援多國語言介面:英文, 繁體中文和簡體中文, 再加上全新的L和U型連接線, 可以更容易繪製流程圖來輕鬆學習程式邏輯.
fChart 6 使用手冊

fChart流程圖直譯器

fChart直譯器圖例

下載 fChart6 標準版

fChart流程圖直譯器是一套流程圖直譯器，我們不只可以編輯繪製流程圖； 還可以使用動畫來完整顯示流程圖的執行過程和結果，輕鬆驗證演算法是 否可行和訓練讀者的程式邏輯，V5版支援.NET Framework 4。

在了解程式執行流程之後，就可以啟動程式碼編輯器，一一將流程圖符號轉換成對應的程式碼， 讓你依據流程圖的程式說明書來真正寫出自己的完整程式，V4.7版支援陣列和換行輸入。

在V5版fChart流程圖的多個變數和常數欄位都支援使用+-*/等運算子建立的完整運算式，如下所示：
  • 在動作符號[定義變數]標籤的[變數值]欄位，例如：f = 2*x+3。
  • 一維和二維陣列的索引值，不只可以使用變數, 例如:Data[x]，也可以使用運算式，例如：Data[x+1]。
  • 決策符號的條件運算式，2個運算元可以使用常數，變數或運算式，例如: y+2 > 5。
  • 輸出符號的[變數名稱]欄位可以使用運算式，來直接輸出運算式的運算結果。
  • 函數符號的[參數1]和[參數2]欄位都支援運算式。

fChart 6.0版支援多國語言介面, 和全新的5種連接線, 支援直線, 2種方向的L型線, 順反時鐘的U型線, 能夠自動依據空間使用直線或L型線的連接符號.

fChart使用說明

fChart程式碼編輯器

fChart程式碼編輯器

Cake Blockly版

NClass類別圖

下載 fChart6 標準版

fChart程式碼編輯器是一套輕量級整合開發環境，不只可以編譯, 編輯和執行C, C++, C#, VB和Java程式， 更提供流程圖符號分類的功能表命令，可以快速插入指定程式語言的程式碼。

再加上附有可執行的程式組裝說明書（fChart流程圖直譯器可以使用動畫來執行流程圖） ，初學者不需先學習無趣的程式語法，就可以馬上實作，「真正從實作中學習」， 輕鬆使用C、Java、C#和VB語言來撰寫程式碼。

標準版V5支援Cake Blockly for C 1.0版可以使用積木程式拼出C程式 ，和支援C#和Java語言的UML類別圖工具NClass， 如下所示 ：
  1. 用fChart流程圖學習結構化程式設計。
  2. 用NClass類別圖學習物件導向程式設計。

新版支援多國語言介面: 英文, 繁體中文和簡體中文.

fChart使用說明

fChart程式設計教學工具-Python套件


下載Python圖書的WinPython客製化教學套件
Python套件 Python套件

下載(Google) 下載(Mega)

Blockly 版在新版本切割成 Python 和 Node 兩個版本, Python 版支援 Python 程式開發，Node 版支援 Node.js 和 Node-RED, 都可以使用全新方式來幫助初學者學習Python和JavaScript程式設計, 其步驟為：

  • 先使用fChart可執行流程圖來了解演算法和執行流程後，啟動fChart程式碼編輯器
  • 依據流程圖符號從功能表命令插入程式片段來寫出完整的程式碼
  • 如果仍有困難，請啟動 Blockly 改用積木建立程式來轉換成 Python/JS 程式
  • 回到fChart程式碼編輯器進一步編輯修改程式碼，並且測試執行 Python/JS 程式
Python 版的特點如下:
  • Python支援REPL交談介面(使用ptpython最好用的交談介面)和CLI命令列介面視窗
  • Blockly修正積木產生的Python程式碼, 只支援Python 3且新增整數型態。
  • 在功能表的[程序/函數]選單新增更多的程式碼片段, 包含: 內建函數, 字串, 清單和字典。
  • 在 Python [常用模組]選單新增 Requests 和 Turtle 模組。
* [人工智慧]和[生活應用]二種版本的 Python 教學套件是整合 fChart 工具的客製化 WinPython 套件, 這是搭配筆者 Python 圖書使用的教學套件。

* Blockly程式積木編輯器是使用源於"雲林SONG"的精簡版本，只保留Code部分
* 謝謝 Ping-Lun Liao的授權使用。

Python版使用說明

fChart程式設計教學工具-Node套件
(支援 Node-RED 物聯網 AIOT 工具)


下載Node-RED圖書的客製化教學套件
Node套件 Node套件

下載(Google) 下載(Mega)

Node 版源於 Blockly 版一樣支援 Blockly 可用積木建立程式來轉換成 JavaScript 程式， 並且支援 Node.js (Node.js 8)應用程式開發, 和 Node-RED 物聯網開發工具。 內建 HTML 網頁編輯工具, 這是Web介面隨看即所得的HTML工具。其特點如下:

  • 在HTML+JavaScript新增HTML表單標籤, TinyMCE 和啟動 Node-RED工具的命令。
  • Node-RED節點預設安裝Dashboard, MySQL和Arduino節點。
  • Node.js除了安裝 Johnny-Five 模組, 而且新增 MQTT 模組處理MQTT通訊協定。
  • Node圖書版本已經將 Node-RED 升級至2.04版。

Node版使用說明

fChart程式設計教學工具-Arduino版(未升級6.0版)

Arduino版

下載(Google) 下載(Mega)

支援Arduino程式編輯，可以作為Arduino IDE的外部編輯器，相關函數提供功能表命令， 可以快速插入來編輯Arduino程式碼，其撰寫的程式是透過Arduino IDE上傳至開發板， 內建Arduino UNO模擬器，不需購買開發板，就可以在Windows電腦模擬執行Arduino程式。

S2A或S4A自造者可以使用Arduino版學習原生Arduino開發，因為提供功能表命令來建立程式， 非常適合初學者或國中小學生從Scratch積木轉換成原生開發的Coding。

* v2 版: 更新Arduino IDE 1.8.2; Uno 模擬器 1.72，解決Windows 10注音輸入法的檔名字串問題。
* v3版: C和C++語言都改用GCC編譯器。
* v4版: 程式碼編輯器升級成.NET Framework 4。

請注意! 此版本尚未支援fChart 6.0流程圖和多國語言介面.

Arduino版使用說明

ArduBlockly中文離線版
使用Blockly建立原生Arduino C程式

ArduBlockly

下載(Google) 下載(MEGA)

ArduBlockly是源於 BlocklyDuino 的眾多 Blockly for Arduino 工具之一, 提供漂亮的使用介面和整合原生Arduino IDE工具, 不只可以自動將積木程式轉換成C語言的Arduino程式碼, 配合安裝的Arduino IDE, 我們只需按下按鈕, 馬上可以開啟 Arduino IDE, 驗證草稿碼, 或上傳程式至Arduino開發板.

請注意! ArduBlockly和眾多源於 BlockyDuino 的工具不同, ArduBlockly可以馬上看到轉換的Arduino C程式碼, 非常適合初學Arduino程式教學, 可以先使用Blockly積木學習入門基礎Arduino程式設計後, 才進入真正的原生開發來學習進階Arduino程式設計。

ArduBlockly中文離線版包含Arduino IDE 1.8.2, 在解壓縮下載檔案後, 按二下ardublockly_run.bat即可啟動離線版ArduBlockly, 和上傳草稿碼至Arduino開發板.

Micro:bit Python編輯器中文離線版
使用Micro:bit學習Python程式設計

Micro:bit Python Editor Micro:bit Simulator

下載(Google) 下載(MEGA)

Micro:bit Python編輯器是Web介面的Python程式碼編輯器, 可以編寫在Micro:bit執行的Python程式, 稱為MicroPython。 離線版和官方網站的線上版使用完全相同的介面, 不只如此, 離線版更支援Blockly積木程式編輯, 可以讓初學者使用積木拼出在Micro:bit開發板執行的Python程式, 如果需要, 也可以切換回一般Python編輯器來編輯修改Python程式碼, 然後下載編譯的HEX檔來傳送至Micro:bit開發板, 即可執行我們撰寫的Python程式.

Micro:bit Python編輯器中文離線版除了中文化使用介面外, 更在Blockly積木編輯頁面新增2個按鈕, 可以開啟和下載積木程式的XML檔, 在解壓縮下載檔案後, 請按二下pythonEditor.bat即可啟動離線版Python編輯器, 和馬上下載HEX檔傳送至Micro:bit開發板來執行.

Python編輯器第二版 PythonEditor2 整合withcode.uk的Micro:bit模擬器, 可以離線模擬執行MicroPython程式碼, 請注意 ! Micro:bit模擬器是早期版本, 並沒有完整支援microbit模組 , 為了啟動模擬器, Python編輯器改用Python+Bottle建立本機Web執行環境, 預設埠號是8000, 所以會有命令提示字元視窗, 在第三版修正積木產生程式碼的錯誤。

MicroPython官方文件

教學文件與下載

教學文件:

教學簡報:

fChart程式邏輯(流程控制)教學簡報相同, 僅程式語言部分不同

相關圖書:

fChart工具下載(Google):

fChart工具下載(MEGA):

fChart 分類150流程圖專案範例下載:

初學Python最佳的Python IDE Thonny可攜式版本:

ArduBlockly中文離線版下載:

Micro:bit Python編輯器下載:

Otto 機器人藍芽控制 App 下載:

fChart Jupyter for MicroPython版下載: