尝试初始化时JS 'Firebase is not defined'错误

Question

我正在与Glitch.com合作我的第一个物联网项目(也没有前端/后端的经验(。我设置了这个湿度植物传感器，并在Arduino中添加了一些代码。水分从Arduino上传到Firebase实时数据库。

现在，当我试图将这些数据从Firebase添加到我的网页上时，我总是遇到同样的错误。在我自己多次尝试失败后，我决定重新混合一个现有的项目来连接Firebase。在填写了我自己的所有Firebase信息(auth，url…(后，我仍然遇到了同样的问题，"Firebase未定义"。这个错误发生在这3条规则上；

firebase.initializeApp(config);

var rootRef = firebase.database().ref();

var myDBConn = firebase.database().ref("Moisture");

完整代码(针对某些上下文(：

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "your apiKey from firebase website",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://databaseName.firebaseio.com",
storageBucket: "bucket.appspot.com",
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();

// List to hold my moisture value
var myMoisture = [];
// Define database connection to correct branch, Moisture
var myDBConn = firebase.database().ref("Moisture");
// Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
myDBConn.on("child_added", function(data, prevChildKey){
// The data returned from the branch is put into a variable, dataPoint
var dataPoint = data.val();
// Convert the 'Temp' field from dataPoint into integers, then put them into the myTemps list
myMoisture.push(parseInt(dataPoint.Temp));
// Add all the Temps and get the total
var totalT = 0;
var i=0;
for (i=0; i<myMoisture.length; i++){
totalT += myMoisture[i];
}
// Create an average by dividing the sum of temps by the number of temps
var average = totalT / myMoisture.length;
// Update the page elements with the average and the last item (most recent) off the list 
document.getElementById("averageT").innerHTML=average;
document.getElementById("LiveT").innerHTML=myMoisture[myMoisture.length - 1];
});

我想知道的另一件事是，数据点是什么。温度平均值？最初的代码是为显示实时温度和平均温度的网页制作的，但我想要湿度值。我仍然需要对代码进行一些编辑，但在开始之前，我想确保Firebase连接正常工作。

Answer 1

您必须将JavaScript代码包含在script标记中，如下所示：

<script src="https://www.gstatic.com/firebasejs/7.11.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "your apiKey from firebase website",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://databaseName.firebaseio.com",
storageBucket: "bucket.appspot.com",
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();

// List to hold my moisture value
var myMoisture = [];
// Define database connection to correct branch, Moisture
var myDBConn = firebase.database().ref("Moisture");
// Function that acts when a 'new child is added to the DB' - i.e. new data is added this function runs.
myDBConn.on("child_added", function(data, prevChildKey){
// The data returned from the branch is put into a variable, dataPoint
var dataPoint = data.val();
// Convert the 'Temp' field from dataPoint into integers, then put them into the myTemps list
myMoisture.push(parseInt(dataPoint.Temp));
// Add all the Temps and get the total
var totalT = 0;
var i=0;
for (i=0; i<myMoisture.length; i++){
totalT += myMoisture[i];
}
// Create an average by dividing the sum of temps by the number of temps
var average = totalT / myMoisture.length;
// Update the page elements with the average and the last item (most recent) off the list 
document.getElementById("averageT").innerHTML=average;
document.getElementById("LiveT").innerHTML=myMoisture[myMoisture.length - 1];
});
</script>

有关JavaScript的更多详细信息，请参阅https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics和/或https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide