"firebase is not defined" error using the current vr. of firebase - javascript

I tried making a simple chat forum using YouTube tutorial. upon its release it works wonderful so I tried using its code structure while updating the core infos and it only result in an error. I tried many time to avail, I'm new to programming so im looking for help.
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"</script>
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js"</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCTBkpUWMU_pL6qIb_hMXVDS_sCYQ2BROU",
authDomain: "rd-try-ce276.firebaseapp.com",
databaseURL: "https://rd-try-ce276-default-rtdb.firebaseio.com",
projectId: "rd-try-ce276",
storageBucket: "rd-try-ce276.appspot.com",
messagingSenderId: "47874427531",
appId: "1:47874427531:web:819f34b203e6ae82c0628e"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function sendMessage() {
alert("Hello! I am an alert box!");
//get message
var message = document.getElementById("message").value;
//save in database
firebase.database().ref("messages").push().set({
"message": message
})
}
</script>

Related

Trying to read firebase database but a syntax error occurred

I was reading through Firebase web documentation on reading and writing data from a database, I want to add dynamic counters on my github website so i figured Firebase would be the way to go, I attempted to use code found on the documentation as an example, but the example simply outputs an error "Uncaught SyntaxError: Illegal return statement", below is my testing code i ran, the error occurred at line 22(the return statement)
<body>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDsjjwO1Jj0VKeZECp6l2NRgOKy9Yb0fYc",
authDomain: "site-counter-555dd.firebaseapp.com",
databaseURL: "https://site-counter-555dd.firebaseio.com",
projectId: "site-counter-555dd",
storageBucket: "site-counter-555dd.appspot.com",
messagingSenderId: "796019929207",
appId: "1:796019929207:web:51db340ecf1a53891e1672",
measurementId: "G-33WHDZ8X6K"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/Downloads' + userId).once('value').then(function(snapshot) {
var username = (snapshot.val() && snapshot.val().username) || 'Anonymous'
});
</script></body>
You're trying to use a return statement that's not within a function. Start by removing the return - there is nothing to return from.

How can I link up my Firebase CDN snippet to my JavaScript file?

I can't link the function below to my JavaScript file. I am using Firebase CDN code snippet. What am I doing wrong?
Firebase snippet:
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyAPeU7jO2Zz5kdrh-4g4ehfcrL8Aufzubs",
authDomain: "udemy-modern-javascript-cee40.firebaseapp.com",
databaseURL: "https://udemy-modern-javascript-cee40.firebaseio.com",
projectId: "udemy-modern-javascript-cee40",
storageBucket: "udemy-modern-javascript-cee40.appspot.com",
messagingSenderId: "941299603483",
appId: "1:941299603483:web:afcd4f1da6878b51ef80be",
measurementId: "G-BRYW3TQNLL"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.analytics();
js file:
db.collection('recipes').get().then((snapshot)=>{
console.log(snapshot);
}).catch(err =>{
console.log(err)
});
The error msg is:
sandbox.js:1 Uncaught TypeError: db.collection is not a function at sandbox.js:1 (anonymous) # sandbox.js:1
The db variable from the script tag in your HTML file is not automatically available in the .js file.
You'll typically want to put all JavaScript (including what you now have in the script tag into the .js file or have all of it in the script tag in the HTML file.
Putting all code in the .js file is more common, so that'd become:
var firebaseConfig = {
apiKey: "AIzaSyAPeU7jO2Zz5kdrh-4g4ehfcrL8Aufzubs",
authDomain: "udemy-modern-javascript-cee40.firebaseapp.com",
databaseURL: "https://udemy-modern-javascript-cee40.firebaseio.com",
projectId: "udemy-modern-javascript-cee40",
storageBucket: "udemy-modern-javascript-cee40.appspot.com",
messagingSenderId: "941299603483",
appId: "1:941299603483:web:afcd4f1da6878b51ef80be",
measurementId: "G-BRYW3TQNLL"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const db = firebase.analytics();
db.collection('recipes').get().then((snapshot)=>{
console.log(snapshot);
}).catch(err =>{
console.log(err)
});
const db = firebase.analytics();

Can't Access Firebase Database Outside Of My Wifi

For some reason I can only read and write in the firebase realtime database when I am connected to the wifi that I created the database on. Do any know a reason as to why this is happening?
I tried to debug the issue, however, my console log is not showing any details when I run the code that pulls a query. (assuming my credentials are correct)
import * as firebase from "firebase";
var config = {
apiKey: "********",
authDomain: "********",
databaseURL: "********",
projectId: "********",
storageBucket: "********",
messagingSenderId: "*******"
};
if (!firebase.apps.length) {
firebase.initializeApp(config);
console.log("initialized");
}
componentDidMount(){
console.log('before query function call');
firebase.database().ref().child('messages/').once('value', function (snapshot) {
console.log('in query function call');
console.log(snapshot.val())
});
expected results in console log
---initialized
---before query function call
---in query function call
---(snapshot of data in realtime database)
actual results in console log
---initialized
---before query function call

Firebase data retrieval to web

// Initialize Firebase
var config = {
apiKey: "AIzaSyBz13eirmEOGD1uXOZwf6tKGnEsjfwsUFo",
authDomain: "platformtechproject.firebaseapp.com",
databaseURL: "https://platformtechproject.firebaseio.com",
projectId: "platformtechproject",
storageBucket: "platformtechproject.appspot.com",
messagingSenderId: "1065758005439"
};
firebase.initializeApp(config);
var database = firebase.database();
ref msgs clllection
var msgRef = firebase.database().ref('survey');
I am trying to connect to firebase, but I continue getting these errors on chrome console failing to connect to firebase:
Chrome console error
This is because you did not write:
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
in the <head>...</head>
You have to write it to be able to use the firebase sdk in your project.
more info here:
https://firebase.google.com/docs/web/setup

Firebase Real-time Database connection from Java -> JavaScript

I want to set up a Firebase Real-time Database connection from my Java backend to my JavaScript frontend, but the messages are not pushed to the client.
The backend Java code looks like this:
FirebaseOptions options = new FirebaseOptions.Builder()
.setServiceAccount(getServletContext().getResourceAsStream("/WEB-INF/xxx.json"))
.setDatabaseUrl("https://xxx.firebaseio.com")
.build();
FirebaseApp.initializeApp(options);
DatabaseReference ref = FirebaseDatabase
.getInstance()
.getReference();
ref.child("users").setValue("aaa");
My javascript code on the frontend looks like this:
var config = {
apiKey: "xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx.firebaseio.com",
storageBucket: "xxx",
messagingSenderId: "xxx"
};
firebase.initializeApp(config);
var database = firebase.database();
var myRef = firebase.database().ref("users");
myRef.on('value', function(snapshot) {
alert(5);
});
Is there something wrong with this code or why are the messages are not pushed? Am I missing something?

Categories

Resources