Webduino Database === [TOC] 此處介紹的內容,主要使用 Webduino 所提供的資料庫模組。其中包括 Google Sheets 及 Firebase 的使用。 ## Google Sheets 使用 Google Sheets 之前,要先建立一個 Google 試算表,先將權限設成「知道連結者均可以編輯」。 ![](https://i.imgur.com/lkM7V9w.png) 測試程式: ![](https://i.imgur.com/UYhX8CV.png) 執行結果: ![](https://i.imgur.com/rqr86z4.png) 參考資料: - [Google 試算表設定](https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet.html) - [Google 試算表儲存](https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet-write.html) - [Google 試算表讀取](https://tutorials.webduino.io/zh-tw/docs/cloud/database/google-spreadsheet-read.html) ##### 練習: - 使用讀取方塊模組,誰行資料的讀取 - 設定 Sheets 的分享權限,觀察執行結果 ### 程式碼探索: ```htmlembedded= <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Webduino Blockly Demo 01</title> <script src="https://blocklypro.webduino.io/components/jquery/dist/jquery.min.js?rev=4a356126b9573eb7bd1e9a7494737410"></script> <script src="https://blocklypro.webduino.io/dist/lib/webduino-all-0.4.20.min.js?rev=4426739c00d85325cb2d3d701fa50666"></script> <script src="https://blocklypro.webduino.io/dist/webduino-blockly.min.js?rev=6a9037f813da79372168951bbfeafb49"></script> <script src="https://blocklypro.webduino.io/dist/lib/firebase.min.js?rev=c0bfd493efd477d098a4ae9e92b13880"></script> <script src="https://blocklypro.webduino.io/dist/lib/runtime.min.js?rev=683a69503433786202911b4d9f766100"></script> </head> <body> <div><span id="demo-area-01-show">123</span></div> </body> </html> ``` ```javascript= var myData; myData= {}; myData.sheetUrl = 'https://docs.google.com/spreadsheets/d/1Aml7CI9xCXWaRtwnvi2OZHhjdhw0T1SYY0OCNY5zgkE/edit#gid=484544247'; myData.sheetName = 'T1'; myData.column0 = 'TEST'; myData.column1 = 'DATA'; writeSheetData(myData); ``` 從 Webduino 的檔案中,挖出讀取和寫入 Google Sheets 的程式碼: ```javascript= function writeSheetData(d) { $.get("https://script.google.com/macros/s/AKfycbyrYjDKcUswV_9VADdmHZ7WHnT5KmBp13k0-1NNCcDQ9w8H463m/exec", d); } function readSheetData(d, callback) { $.get("https://script.google.com/macros/s/AKfycbxJjv240G64yTmUyIzkCKi9r7Jux2c1YvEsaDWS-eawMjQz-nQ/exec", d, function (data) { callback(data); }); } ``` 簡單說明程式的意義: - $.get(...): 使用 jQuery 非同步指令執行 http get 方法,括號中分別是網址和參數。 - writeSheetData: 利用 http get 非同步指令,執行 Google Apps Script 指令。 - readSheetData: 利用 http get 非同步指令,執行 Google Apps Script 指令,成功後執行回呼函數。 補充講義: - 參考 i-learning 上的講義。 進階課題: - 使用 [Google Sheets API](https://developers.google.com/sheets/api/) 進行存取的處理。 ## Firebase 使用 Google Firebase 存取資料。目前 Firebase 除了原先的 Realtime Database 之外,新增了 Cloud Firestore,後者的功能更為豐富。不過目前 Webduino 所提供的模組主要是針對 Realtime Database 的使用。使用前必須將 R/W 權限都打開。 ![](https://i.imgur.com/3gJD3dQ.png) 測試程式: ![](https://i.imgur.com/zgUVnFG.png) 寫入結果: ![](https://i.imgur.com/yqaEtpA.png) 參考資料: https://tutorials.webduino.io/zh-tw/docs/useful/sensor/dht-firebase.html ### 程式碼探索: ```htmlembedded= <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Webduino Blockly App</title> <script src="https://blocklypro.webduino.io/components/jquery/dist/jquery.min.js?rev=4a356126b9573eb7bd1e9a7494737410"></script> <script src="https://blocklypro.webduino.io/dist/lib/webduino-all-0.4.20.min.js?rev=4426739c00d85325cb2d3d701fa50666"></script> <script src="https://blocklypro.webduino.io/dist/webduino-blockly.min.js?rev=6a9037f813da79372168951bbfeafb49"></script> <script src="https://blocklypro.webduino.io/dist/lib/firebase.min.js?rev=c0bfd493efd477d098a4ae9e92b13880"></script> <script src="https://blocklypro.webduino.io/dist/lib/runtime.min.js?rev=683a69503433786202911b4d9f766100"></script> </head> <body> <div></div> </body> </html> ``` ```javascript= var myFirebase; function get_time(t) { var varTime = new Date(), varHours = varTime.getHours(), varMinutes = varTime.getMinutes(), varSeconds = varTime.getSeconds(); var varNow; if (t == "hms") { varNow = varHours + ":" + varMinutes + ":" + varSeconds; } else if (t == "h") { varNow = varHours; } else if (t == "m") { varNow = varMinutes; } else if (t == "s") { varNow = varSeconds; } return varNow; } myFirebase = new Firebase('https://chin-firebase-01.firebaseio.com/'); myFirebase.push({ time: get_time("hms"), value: 'TEST' }); ``` 挖掘引入的 Firebase.js,版本為 2.2.9,應該是4年前發行的,另外這個程式已經經過 webpack 之類的程式壓縮處理,不容易觀察到其程式內容,只能大概從上面的範例得知大致的使用方式。 目前最新的 Firebase.js 版本為 5.9.2 (2019/03/31),在使用的時候,有許多設定資料,讀取也比較複雜,可參閱官網之說明: https://firebase.google.com/docs/web/setup 進階課題: - 使用新版的程式庫進行資料庫的存取。