This tutorial is based off of Sparsha's tutorial found here: https://www.construct.net/en/tutorials/construct-firebase-2163
Please thank him for his work.
Setting up Firebase
- Create a new script in construct 3 and insert the code below.
- Observe the instructions in the configHTML variable and edit it accordingly.
- Reference the firebase documentation to understand how the firebase and db objects can be used to read/write database values and log players in.
Documentation
https://firebase.google.com/docs/firestore/manage-data/add-data
https://firebase.google.com/docs/firestore/query-data/get-data
https://firebase.google.com/docs/auth/web/start
Example Implementation
Template Code
var configHTML = 'YOUR FIREBASE CONFIG HERE, KEEP IT ON 1 LINE. EXAMPLE: var firebaseConfig = { apiKey: "EXAMPLE", authDomain: "EXAMPLE.EXAMPLE.COM",}'
+'firebase.initializeApp(firebaseConfig); var db = firebase.firestore();';
runOnStartup(async runtime =>
{
// Code to run before the first layout starts
initializeFirebase();
});
function initializeFirebase(){
var script1= document.createElement('script');
var script2= document.createElement('script');
var script3= document.createElement('script');
script1.src= "https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js";
script2.src= "https://www.gstatic.com/firebasejs/6.1.0/firebase-auth.js";
script3.src= "https://www.gstatic.com/firebasejs/6.1.0/firebase-firestore.js";
document.getElementsByTagName('body')[0].appendChild(script1);
document.getElementsByTagName('body')[0].appendChild(script2);
document.getElementsByTagName('body')[0].appendChild(script3);
script3.onload=function(){startFirebase()};
}
function startFirebase() {
var script4= document.createElement('script');
script4.innerHTML = configHTML;
document.getElementsByTagName('body')[0].appendChild(script4);
}