Webduino Blockly 「積木方城市」:如何利用「iframe 顯示網頁」自有積木,免用任何網頁語法就能輕鬆在 Blockly 中動態顯示「Google 統計圖」?

image

最近在 Webduino FB 技術討論區上,看到「法蘭斯」分享了他製作的自有積木:顯示網頁、溫濕度關係圖,官方也有釋出 WebVR 自訂積木與「自訂積木模組開發」的文件,如果想要擁有 Blockly 現有積木程式以外的功能,又不想每次都手動 Coding 的話,透過開發自己專屬的積木,的確可以節省不少的時間!這樣的方式也如同瀏覽器外掛擴充工具、套裝軟體的第三方增強工具一樣,可以在雲端服務或是軟體原有基礎上增加許多應用!

如果你已經具備開發自訂積木的相關背景知識,可以自行參考這些開發文件來製作自己專屬的積木!

但是,如果你尚未具備這樣的能力,又想要將一些雲端服務加入 Blockly 中,其實也可以借用「法蘭斯」的「顯示網頁」自有積木來實現!

現在有非常多的雲端服務都能藉由「嵌入 iframe」方式提供!不僅降低許多的網頁技術門檻,也能讓國中小的同學可以馬上學會,增加在 Blockly 頁面呈現的豐富性!

例如我們這次所要分享的,就是利用 Google 試算表做為資料庫,儲存溫溼度數據記錄資料,並在Google 試算表上即時產生自訂的統計圖表!除了進入 Google 試算表瀏覽外,也可以指定將溫溼度記錄文字資料或統計圖表發佈,直接在 Blockly 中顯示出來,省去在不同雲端服務瀏覽分頁切換的時間,又能在不使用任何語法的狀態下,在 Blockly 中顯示統計圖表。

image


※ 此方式僅適合 Webduino Cloud 雲端平台,免註冊的 Webduino Blockly 版本就不適用囉!


關於如何註冊 Webduino Cloud 雲端平台與建立新專案的方式,請參考這篇文章「Webduino Blockly 「積木方城市」:如何利用「使用自有積木」找回失落的「Google 地圖」積木「拼圖」?

以下,我們馬上來看看該如何利用「iframe 顯示網頁」自有積木,免用任何網頁語法就能輕鬆在 Blockly 中動態顯示「Google 統計圖」?


一、安裝法蘭斯:「顯示網頁」自訂積木

1.進入 Blockly 程式積木頁面後,選按左下角的「齒輪」圖示

image


2.選按「使用自有積木」,在文字欄位中貼上以下的「顯示網頁」積木設定網址,並按下「匯入」。

完成後,即可在「進階功能」類別中看到「顯示網頁」相關積木。

※ 「顯示網頁」積木設定:https://rawgit.com/fustyles/webduino/temp/iframe_20180103/blockly.json

image

image


二、準備 Google 試算表檔案

在 Webduino 雲端平台上的「資料庫」類別,已經具有存取 Google 試算表的程式積木功能,我們只需完成下列幾個條件,就能讓 Webduino 直接存取 Google 試算表。

※ 想了解 Webduino 如何使用 Google 試算表的詳細步驟,可以參考此篇官方教學:https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html

image


1.建立新的 Google 試算表檔案後,將 Google 試算表檔案的「共用」權限設為「知道連結的人均可以編輯」。

image


2.在 Google 試算表中準備以下四個欄位:日期、時間、溫度、溼度,如果是比較短時間的記錄,也可以不用加入「日期」欄位。

image


3.選取「日期、時間、溫度、溼度」這四欄做為統計圖表的資料來源,接著選按「插入 / 圖表」。

image

image


4.選擇適合的「圖表類型」。

image

image


5.發佈圖表並取得圖表網址

請先選按統計圖表,再選按右上方的「三個圓點」,按下「發佈圖表」。

image

按下「發佈」後,就能取得此統計圖表的網址。

image

image


三、使用「顯示網頁」積木顯示 Google 試算表統計圖表

現在就能進入 Blockly 頁面,開始進行相關的程式積木設計,Google 試算表的載入、寫入…等詳細步驟,就不在這裏贅述,請自行參閱 Webduino 官網教學文章囉!https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html


1.「網頁互動區域」請選擇「顯示文字」

image


2.「顯示網頁」積木的使用,只需要將剛才取得的 Google 試算表統計圖網址貼入,並指定在「網頁互動區域」顯示的大小與圖表與左上角原點的距離就可以!

image

image


以下可以依據溫溼度元件(或是其他元件)偵測的間隔時間,提供兩種積木設計方式供大家參考:


A:溫溼度偵測的間隔時間較長,例如 1 分鐘偵測一次

此時可以將「顯示網頁」積木直接加入溫溼度偵測積木中,當溫溼度每次偵測時,此頁面就會自動重新整理,取得最新數據資料。

image


B:溫溼度偵測的間隔時間很短,例如預設 1 秒即偵測一次

此時可以將「顯示網頁」積木獨立在溫溼度偵測積木之後,配合「基本功能 / 迴圈 / 重複..執行」與「進階功能 / 等待」積木,自行指定此頁面的重新整理時間。

image



※ 延伸閱讀:

張貼留言