https://padlet.com/danny7758/iot-am6xaie8gcso1kx5
광탄중학교 IOT 만들기
Padlet으로 만듦
padlet.com
오늘의 하이라이트 코드
파이어베이스에서 웹사이트 제공되는 코드(수정됨)
<!DOCTYPE html>
<html>
<head>
<title>Temperature and Humidity Monitor</title>
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-app.js";
import { getDatabase, ref, onValue, set } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-database.js";
const firebaseConfig = {
apiKey: "AIzaSyD7VZZqMbC4EXoN9ZCfRu9sHeaFrDEKIYw",
authDomain: "wonking-ac89d.firebaseapp.com",
databaseURL: "https://wonking-ac89d-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "wonking-ac89d",
storageBucket: "wonking-ac89d.appspot.com",
messagingSenderId: "341228787971",
appId: "1:341228787971:web:0ec9aca27c8456bcb0f136",
measurementId: "G-Z7GK450BBY"
};
// Firebase 초기화
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
// 데이터베이스 참조
const tempRef = ref(database, 'temperature');
const humRef = ref(database, 'humidity');
// 온도 데이터 실시간 업데이트
onValue(tempRef, (snapshot) => {
let temp = snapshot.val();
if (temp === null) {
temp = 0;
set(tempRef, temp); // Set initial temperature to 0 if null
}
document.getElementById('temperature').innerText = `Temperature: ${temp} °C`;
});
// 습도 데이터 실시간 업데이트
onValue(humRef, (snapshot) => {
let hum = snapshot.val();
if (hum === null) {
hum = 0;
set(humRef, hum); // Set initial humidity to 0 if null
}
document.getElementById('humidity').innerText = `Humidity: ${hum} %`;
});
</script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}
.data-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.data-container h1 {
margin: 0;
}
.data-container p {
font-size: 1.5em;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="data-container">
<h1>Temperature and Humidity</h1>
<p id="temperature">Temperature: -- °C</p>
<p id="humidity">Humidity: -- %</p>
</div>
</body>
</html>