網際 Gist 程式執行

前面已經提過, 每一個 Github 上的 Gist 都是倉儲, 有版本, 也可以將同一組相關程式放在一起, 對於直接在網際瀏覽器上練習的 Brython 程式, 可以直接存放至 Github 帳號下的 Gist 區域.

Brython 程式特性

Brython 程式是依賴一組 Javascript 程式庫, 在頁面中導入後, 以 brython() 啟動. 接下來存放在頁面中的 Brython 程式, 就可以透過 Brython 程式庫將這些特殊的 Python 程式轉為 Javascript 後執行.

由於 Python 的語法比 Javascript 更直覺且容易掌握. 因此假如能夠透過 Brython 的 document.query["get_變數名稱"] 取下 URL 參數中的值, 然後再透過網頁中的 Python 執行, 應該會比直接寫 Javascript 來得平易近人.

Gist 程式的 URL 引用

當使用者將程式存入 Gist, 可以透過 URL 連結取出特定版本的程式碼, 假如能夠在頁面解讀完成後, 讓頁面中的程式直接擷取 Gist 的 Brython 程式, 並直接執行, 那麼我們就可以設法要求初學者將作業存入 Gist, 然後透過 URL 連結, 在特定頁面中運行這些 Gist 程式.

目前在 Github Pages 上所架構的網站, 並沒有後端的伺服器, 但假如上述的 Gist 程式引用流程是配置在諸如 Heroku 雲端應用程式主機上, 我們就有了完整的前後端具備分散式版次管理的程式架構平台, 無論從機械設計的角度或機電資整合的應用上來看, 這應該就是 PTC 與 Onshape 老早 (應該是 Onshape 這一批人走在前頭, 帶著老大哥 PTC 往前衝) 就看到的雲端產品設計大未來.

以 Brython 執行 Gist 程式

理論上 Javascript 也可以呼叫 Brython 所寫的程式碼, 只要將 Brython 函式與 window 中的 Javascript 函式對應即可.

例如:

利用 Jquery 在頁面載入後執行 brythonListener 函式.

$(document).ready( function() { brythonListener(); });

而 brythonListener 則在 Brython 中透過 window 與 run() 對應.

window.brythonListener = run()

至於 run() 函式則由 Brython 程式區製作:

def run(): prog = open(document.query["src"]).read() ns = {'name':'main'} exec(prog, ns)

假如完全由 Brython 程式執行, 則 run() 定義完成後, 可直接以 run() 執行.

版本一的程式碼, 以 Javascript 居中的 brythonListener 呼叫 Brython 的 run().

第二個版本則是直接由 Brython 執行 run() 即可從 URL 取下 src 變數, 也就是 Gist 程式的 URL, 然後再以 open(url).read() 取下 Gist 程式原始碼, 然後再交由 exec() 執行.

第一版實作程式位於 https://mde.tw/cp2021/content/rungist%20src.html, Demo 則在這裡, 而第二版程式只是蓋掉 Javascript 呼叫 Brython 程式的部分, 連結網頁後給定 src 變數連結, 取得程式原始碼後就可以直接執行.