Webduino Database
===
[TOC]
此處介紹的內容,主要使用 Webduino 所提供的資料庫模組。其中包括 Google Sheets 及 Firebase 的使用。
## Google Sheets
使用 Google Sheets 之前,要先建立一個 Google 試算表,先將權限設成「知道連結者均可以編輯」。

測試程式:

執行結果:

參考資料:
- [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://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
進階課題:
- 使用新版的程式庫進行資料庫的存取。