IOT 雲端控制LED Firebase Web 瀏覽器 控制LED 篇
上篇影片後作者有IOS的教學
但我沒Iphone 所以跳過
但Firebase 首頁 還是有提供 Android 跟 網路應用程式教學
點進 網路應用程式
一開始他已經把 網站 script 需要的做好了 就複製貼上 到 HTML就好
原始說明 全英文 不知要看到哪時候?
所以 參考
Firebase 心得（Realtime Database）
範例
以下是 控制燈 的 Web 程式
Update 部分
控制燈
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>
<script>
// Initialize Firebase 這一段自己複製過來
var config = {
apiKey:
authDomain:
databaseURL:
storageBucket:
messagingSenderId:
};
firebase.initializeApp(config);
//登入 這一段是有設要驗證的情況下 要登入才可以 讀或寫資料庫
//這一段是直接登入 還有很多方法 看
// https://firebase.google.com/docs/auth/web/password-auth
firebase.auth().signInWithEmailAndPassword("Mail", "Pass").catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorMessage);
// ...
});
</script>
<script>
var leds = [0, 0, 0];
//Update 部分
function writeNewPost(leds) {
var postData = {
"001": Boolean(leds[0]),
"002": Boolean(leds[1]),
"003": Boolean(leds[2]),
};
var updates = {};
updates['/123/states'] = postData;
return firebase.database().ref().update(updates);
}
function update_f() {
for (var i = 0; i < 3; i++) {
leds[i] = 0;
if ($('#led_' + i).is(":checked"))
leds[i] = 1;// it is checked
}
writeNewPost(leds);
}
</script>
</head>
<body>
<h1>Firebase Realtime Database</h1>
<h3>請勾選您想控制燈</h3>
<input type="checkbox" value="1" id="led_0"> LED 1<br>
<input type="checkbox" value="2" id="led_1"> LED 2<br>
<input type="checkbox" value="3" id="led_2"> LED 3<br>
<button id="update_test" onclick="update_f()">送出</button><br><br>
</body>
</html>
--------------------------------------------------------------
這樣就可以控制了
但我沒Iphone 所以跳過
但Firebase 首頁 還是有提供 Android 跟 網路應用程式教學
點進 網路應用程式
一開始他已經把 網站 script 需要的做好了 就複製貼上 到 HTML就好
原始說明 全英文 不知要看到哪時候?
所以 參考
Firebase 心得（Realtime Database）
範例
以下是 控制燈 的 Web 程式
Update 部分
控制燈
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.10/firebase.js"></script>
<script>
// Initialize Firebase 這一段自己複製過來
var config = {
apiKey:
authDomain:
databaseURL:
storageBucket:
messagingSenderId:
};
firebase.initializeApp(config);
//登入 這一段是有設要驗證的情況下 要登入才可以 讀或寫資料庫
//這一段是直接登入 還有很多方法 看
// https://firebase.google.com/docs/auth/web/password-auth
firebase.auth().signInWithEmailAndPassword("Mail", "Pass").catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
alert(errorMessage);
// ...
});
</script>
<script>
var leds = [0, 0, 0];
//Update 部分
function writeNewPost(leds) {
var postData = {
"001": Boolean(leds[0]),
"002": Boolean(leds[1]),
"003": Boolean(leds[2]),
};
var updates = {};
updates['/123/states'] = postData;
return firebase.database().ref().update(updates);
}
function update_f() {
for (var i = 0; i < 3; i++) {
leds[i] = 0;
if ($('#led_' + i).is(":checked"))
leds[i] = 1;// it is checked
}
writeNewPost(leds);
}
</script>
</head>
<body>
<h1>Firebase Realtime Database</h1>
<h3>請勾選您想控制燈</h3>
<input type="checkbox" value="1" id="led_0"> LED 1<br>
<input type="checkbox" value="2" id="led_1"> LED 2<br>
<input type="checkbox" value="3" id="led_2"> LED 3<br>
<button id="update_test" onclick="update_f()">送出</button><br><br>
</body>
</html>
--------------------------------------------------------------
這樣就可以控制了
留言
張貼留言