firebase (FireBase)(RESOLVIDO)Problema com push de dados no database

Ted2370 · Novembro 15, 2019

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"
}

Entrar

Arquivado

firebase (FireBase)(RESOLVIDO)Problema com push de dados no database

Recommended Posts

Ted2370 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante