Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
EoinP

I want my website to be able to pull data from firebase realtime db and display it as text on the html page

Recommended Posts

Posted · Original PosterOP

I am creating a website for a local business. They were interested in going down the wordpress road to make it easy for them to edit, but i would much prefer not to build in wordpress. 

 

So why do they want wordpress? 

Well as it is a restaurant, opening hours change some times. They want to be able to update the opening hours themselves. I want to use firebase as there are many app builders out there now that use it and i could simply drag a few blocks and allow them to edit the opening hours via an app on their phone.

 

But i have come into a problem of making the website. Ive tried numerous guides on how to get it to work. I am trying to even make the website communicate in some shape or form so that the console will log the data but no use, I have attached screen shots. Can anyone help me?

 

Many Thanks.

 

index.html

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Firebase Web Test</title>
		<script
		src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
		
	</head>
	<body>
	
		
	<!-- Value -->
	<pre id="object"></pre>
	
	
	
	
	
	<!-- Child -->
	
	
		<script src="app.js></script>
		
	</body>

</html>

 

app.js

 

(function() {
	
	// Initialize Firebase

	const config = {
	  apiKey: "AIzaSyBv2ec5zJvAOvDp8u04pFI4Ws18CpIzReU",
	  authDomain: "pat-s-on-the-square.firebaseapp.com",
	  databaseURL: "https://pat-s-on-the-square.firebaseio.com",
	  storageBucket: "pat-s-on-the-square.appspot.com",
	};
	firebase.initializeApp(config);

	// Get elements
	const preObject = document.getElementById("object");
	
	// Create references
	
	const dbRefObject = firebase.database().ref().child("object");
	
	// Sync object changes
	dbRefObject.on("value", snap => console.log(snap.val()));
	
	
}())	

 

 

 

ltt1.PNG

ltt2.PNG

Link to post
Share on other sites

Why not simply add an "admin section" with a page where they can manually configure the hours.

Store the entered hours in a JSON or text file on the server, then on pages read the hours from that file.

 

You hardly need a database for a handful of values.

Link to post
Share on other sites

It looks like you're using this: https://www.npmjs.com/package/firebase/v/3.1.0

Perhaps try and incude just the things you need (This would make the website download less which is good: 

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-storage.js"></script>

 

Alternativly try using doing it this way, take a look at Step 3 and From the CDN. https://firebase.google.com/docs/web/setup#add_firebase_to_your_app

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×