(FireBase)(RESOLVIDO)Problema com push de dados no database
Estou buscando aprender sobre o real-time-database do firebase, e de inicio estou tentando dar um push de 2 inputs pro meu banco de dados, mas quando clico no botao, nada acontece :( .
Erro-Console:
Uncaught ReferenceError: firebase is not defined
at real-time-database.js:14
app.js:
const firebaseConfig = {
apiKey: "AIzaSyAz6JIkeQ6rH1gXTPIsTR24ce2nlLDUQcE",
authDomain: "curso-fb-2d7d0.firebaseapp.com",
databaseURL: "https://curso-fb-2d7d0.firebaseio.com",
projectId: "curso-fb-2d7d0",
storageBucket: "curso-fb-2d7d0.appspot.com",
messagingSenderId: "198229858892",
appId: "1:198229858892:web:aff0435d35f24210f432e9",
measurementId: "G-YRW39NLBWM"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
real-time-database.js
var nameInput = window.document.getElementById("nameInput");
var ageInput = window.document.getElementById("ageInput");
var addButton = window.document.getElementById("addButton");//Ao clicar no botão
addButton.addEventListener('click', function(){
create(nameInput.value, ageInput.value)
});
function create(name, age){
var data = {
name: name,
age: age
};
return firebase.database().ref().child('users').push(data);
}
Index.html<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html">
<title>Aula FireBase</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Bem Vindo ao FireBase</h1>
<ul>
<li><a href="real-time-database.html">Real Time Database</a></li>
</ul>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<script src="js/app.js"></script>
</body>
</html>
real-time-database.html<!DOCTYPE html>
<html lang="pt-BR">
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html">
<title>Aula FireBase</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Real Time Database</h1>
<ul id="usersList"></ul>
<div class="cool-md-4">
<form>
<div class="form-group">
<label for="nameInput">Nome</label>
<input type="text" class="form-control" id="nameInput" placeholder="Nome">
</div>
<div class="form-group">
<label for="ageInput">Idade</label>
<input type="number" class="form-control" id="ageInput" placeholder="Idade">
</div>
<button class="btn btn-lg btn-block btn-primary" id="addButton">Adcionar</button>
</form>
</div>
<br><br>
<a href="index.html">Voltar para Home</a>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="js/real-time-database.js "></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-analytics.js"></script>
<script src="js/app.js"></script>
</body>
</html>
package.json{
"name": "curso-fb",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"jquery": "^3.4.1",
"bootstrap": "^4.3.1"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Discussão (0)
Carregando comentários...