緣由：之前玩 Scratch 2.0 時，對於 MIT 致力兒童資訊多媒體教學的理念及行動表示激賞，也讚嘆其 積木程式 的創舉，接續聽聞之後將由 Google's Blockly 取代之，就來瞭解一下...
準備環境：
1.Windows 10筆電
2.Google Chrome
首先，到 https://github.com/google/blockly 查看其說明...
Google's Blockly is a web-based, visual programming editor.
Users can drag blocks together to build programs.
All code is free and open source.
接著下載源碼，如下圖
進入該目錄，如下圖
查看其目錄中有 package.json 檔案，先安裝套件 ( npm install )，如下圖
查看 python 程式 及 版本 ( 之前已安裝 2.7.13 )，如下圖
執行 build.py 程式，出現錯誤，如下圖
解壓縮並依網頁指示修改目錄結構，如下圖
除錯後，再執行一次 build.py 程式，如下圖
安裝完成(SUCCESS...)後，接下來測試...參攷 https://developers.google.com/blockly/guides/get-started/web 說明，如下圖
使用 python 的 SimpleHTTPServer 建立一個臨時網頁伺服器，如下圖
就可以打開 Chrome瀏覽器快樂使用了，如下圖
若只想玩 Blockly 請直接到demos網頁下方 點選 [Code Editor] 連結，如下圖
可轉換中文，如下圖
開始示範 Hello World!，拖曳積木後按右方的紅色鈕，如下圖
也可以查看其產生的 JavaScript, Python, PHP, Lua, Dart, XML...等程式碼，如下圖
此時，想到...如果 Blockly 是網頁版...那要給區網其他人使用，如何做呢?!
到網頁 https://gist.github.com/dergachev/7028596 下載 simple-https-server.py 並修改程式(開放IP)，如下圖
再者，參攷 http://blog.darkthread.net/post-2013-05-17-iis-ssl-cert-by-openssl.aspx 下載安裝 OpenSSL並建立CA及簽發SSL憑證(因為在Windows平台所以這些步驟很繁瑣)...
請至 http://slproweb.com/products/Win32OpenSSL.html 下載 Win32OpenSSL-1_1_0f.exe 並安裝，
再執行 set OPENSSL_CONF=C:\OpenSSL-Win32\bin\openssl.cfg
再將cacert.pem憑證匯入Chrome，如下圖
再將 cakey.pem, cacert.pem 複製至 \google\blockly 目錄內，
再修改 simple-https-server.py ，如下圖
終於，可以開啟區網連線版Blockly了...如下圖
後記：稍微看了相關的網頁javascript程式碼，其架構及演算法都相當精簡有效，真的值得多看...:-)
準備環境：
1.Windows 10筆電
2.Google Chrome
首先，到 https://github.com/google/blockly 查看其說明...
Google's Blockly is a web-based, visual programming editor.
Users can drag blocks together to build programs.
All code is free and open source.
接著下載源碼，如下圖
進入該目錄，如下圖
查看其目錄中有 package.json 檔案，先安裝套件 ( npm install )，如下圖
查看 python 程式 及 版本 ( 之前已安裝 2.7.13 )，如下圖
執行 build.py 程式，出現錯誤，如下圖
到網頁 https://developers.google.com/blockly/guides/modify/web/closure 下載 closure-library 壓縮檔 ( google-closure-library-v20170910-33-g37a4c36.zip )，如下圖
除錯後，再執行一次 build.py 程式，如下圖
安裝完成(SUCCESS...)後，接下來測試...參攷 https://developers.google.com/blockly/guides/get-started/web 說明，如下圖
使用 python 的 SimpleHTTPServer 建立一個臨時網頁伺服器，如下圖
就可以打開 Chrome瀏覽器快樂使用了，如下圖
若只想玩 Blockly 請直接到demos網頁下方 點選 [Code Editor] 連結，如下圖
可轉換中文，如下圖
開始示範 Hello World!，拖曳積木後按右方的紅色鈕，如下圖
也可以查看其產生的 JavaScript, Python, PHP, Lua, Dart, XML...等程式碼，如下圖
此時，想到...如果 Blockly 是網頁版...那要給區網其他人使用，如何做呢?!
到網頁 https://gist.github.com/dergachev/7028596 下載 simple-https-server.py 並修改程式(開放IP)，如下圖
再者，參攷 http://blog.darkthread.net/post-2013-05-17-iis-ssl-cert-by-openssl.aspx 下載安裝 OpenSSL並建立CA及簽發SSL憑證(因為在Windows平台所以這些步驟很繁瑣)...
請至 http://slproweb.com/products/Win32OpenSSL.html 下載 Win32OpenSSL-1_1_0f.exe 並安裝，
再執行 set OPENSSL_CONF=C:\OpenSSL-Win32\bin\openssl.cfg
再將cacert.pem憑證匯入Chrome，如下圖
再將 cakey.pem, cacert.pem 複製至 \google\blockly 目錄內，
再修改 simple-https-server.py ，如下圖
終於，可以開啟區網連線版Blockly了...如下圖
後記：稍微看了相關的網頁javascript程式碼，其架構及演算法都相當精簡有效，真的值得多看...:-)
留言