1.什麼是Blockly？
Blockly是一個JavaScript可視化編程編輯器開發框架。目前，它是一個開源項目，由Google公司發起並維護。
2.Blockly能做什麼？
官方解釋是，Blockly是一個用於給web或者手機app添加可視化程序編輯器的框架。它採用圖形化的咬合拼接的積木塊表示變量、邏輯表達式、循環以及其他編程概念。它能讓用戶在不關心語法的情況下進行編程練習，同時擺脫那可怕的命令行。
Blockly is library that adds a visual code editor to web and mobile apps. The Blockly editor uses interlocking, graphical blocks to represent code concepts like variables, logical expressions, loops, and more. It allows users to apply programming principles without having to worry about syntax or the intimidation of a blinking cursor on the command line.
目前，Blockly主要應用在兒童編程領域。比較著名的有CODE、Microsoft MakeCode、micro:bit、Scratch Blocks等等。
個人認爲Blockly可以應用到更多的領域中，因爲Blockly提供了強大的自定義模塊功能，所以，理論上它能將任何基於文本的邏輯（程序或配置文件）可視化。在需要編輯複雜的邏輯或大量靈活配置的地方，都可以用Blockly改善用戶體驗，減少錯誤概率，降低學習成本。例如，遊戲邏輯編輯器、藝術裝置的控制、數字圖像和動畫程序化生成等等。
下圖展示了Blockly的核心功能：將圖形化的積木塊邏輯（左側）轉化爲代碼（右側）。
Blockly核心功能
3. 如何獲得Blockly？
Blockly目前已經在Github上開源。可以從github（https://github.com/google/blockly）上獲取Blockly的最新版本，查看已知的bug和最新的開發進度。
4.如何學習Blockly？
Google在Blockly開發者網站（https://developers.google.com/blockly/）上提供了詳細的開發教程，幫助文檔以及官方示例。其中官方示例在github的源碼中均有提供。
還可以在Youtube等視頻網站上搜索Blockly視頻教程，或在Google上搜索相關的文字教程和博客。
目前Blockly中文開發教程還比較少，大部分是關於如何使用Blockly的，所以百度搜索的結果價值很有限。
5.關於本攻略
本攻略面向有一定程序開發經驗的開發者。主要介紹如何使用Blockly框架開發web應用。
不涉及Blocky的使用方法以及核心源碼分析。（源碼可能偶爾會拿出來解釋一些接口，幫助理解和加深記憶）
在開始後面的內容之前，你需要先完成一下四件事情：
- 會用HTML，JS進行簡單的web應用開發
- 準備Chrome瀏覽器
- 有一個熟悉的文本編輯器（vscode，sublime等）
- 科學上網工具（許多問題的解決方案都在那些不存在的網站上）
- 最重要的，在github上下載blockly工程並解壓到你的工作目錄（建議新建一個文件夾）