Google Blockly

[Google Blockly] Google Blockly 介紹

前言：

有鑒於程式語言的重要性日益增加
身為機械系一分子的我
多多少少有接觸過程式語言

而在我大二大三學習Arduino的時候
最常接觸過的就是類似Ｃ＋＋的Arduino開發程式

因緣際會下
接觸到了一種方便寫Arduino的方式

叫做 ArduBlock

他是一個利用「方塊堆疊」的方式來建構Arduino的程式
且由於強大的免費資源平台
讓這個ArduBlock對於應用的支援度日趨完美
Arduino相關的模組基本上都有相關的方塊程式碼

而在那個時候我心裡就在想
會不會有一種編輯程式語言的方式
就類似於ArduBlock的方式
是利用「拉方塊」與「堆疊」的方式
來進行程式碼的編輯

而這個就是我們今天的主角

Google Blockly

介紹：

Google Blockly
他是一個由google開發的服務
最初主要是想要讓App inventor後台程式碼的編輯更加方便
所創造出來的視覺化程式碼編輯器

他的程式碼編輯特色在於利用「方塊」「拼圖」「堆疊」的方式
來進行程式語言的撰寫
且不同的「程式拼圖」有相對應的「程式拼圖」
如果不符合程式碼的編輯原理
是無法把拼圖拼起來的

成功的編輯程式之後
按下右下角的

就可以即時在網頁裡面顯示結果


且不只這樣
利用一種編輯方法（方塊堆疊）
他可以轉譯程六種程式語言（JavaScript，Python，PHP，Lua，Dart，XML）

這真的是「太神了，傑克」
所以我義無反顧的開始利用這個方式來學習程式語言

然而
搜尋了網路上關於「Google Blockly」相關的資料少之又少
所以才促成了我寫這系列相關文章的契機
由於「如何使用“拉方塊”來建立函數功能」等等的教學

在坊間可以看到不少書
（推薦閱讀書籍如下：）
App inventor 2 零基礎入門班
App inventor 2 初學特訓班
App inventor 2 專題特訓班
App Inventor 2 資料庫專題特訓班

所以在這邊不多做贅述
這篇文章主要的目的是想要推廣
利用Google Blockly 的方式來撰寫程式語言

而以下是我最近開始建立的Google Blockly 範例程式
https://www.evernote.com/l/AajFtKR4ySFNDoa_3OnAj9HXzbf9nBv3dk4

然而事情總不是這麼的美好
利用Google Blockly建立的程式語言的時候
利用「拉方塊」建立方程式固然是一件化繁為簡的方法

但是

會遇到自己想要的功能「沒有方塊」可以用的窘境
但別擔心Google幫你想好了～

可以自行「建立方塊」

（但會不會建立方塊又是另外一件事情了）

且有時候在網頁執行順暢的「方塊程式碼」
經過轉譯之後變成的Python程式碼

「可能會無法執行」

原因我猜測是因為
「方塊程式碼」是利用JavaScript語言在網頁上建立的
他在轉成Python的時候可能有
「程式語言之間本身的差異」
（例如我目前遇到的問題是
Python could not convert string to float）
需要手動去更改轉譯後的程式碼去修正

最近我會陸陸續續更新Google Blockly 範例程式供大家參考

歡迎大家多多與我討論～

感謝大家

參考網站：

https://developers.google.com/blockly/
https://blockly-demo.appspot.com/static/demos/index.html
https://github.com/google/blockly/wiki