Is there an example of a database connection with PlayCanvas?

Help & Support
1

I want to add firebase to my playcanvas application. I’ve created a database to test it but I don’t know how to add it to my project.

2

Hi @Axel_Saucedo,

There isn’t an example, that I know of, to demonstrate adding Firebase to a Playcanvas project. But it’s quite easy, here are some steps:

  1. Add the Firebase SDKs to your Playcanvas project. Download the firebase .js files for the relevant components (firebase-app.js, firebase-auth.js etc.) and upload them to your Playcanvas project.

You can find links to those files in this guide, step 3:

https://firebase.google.com/docs/web/setup

  1. Make sure all Firebase SDK scripts are first in your scripts loading order:

https://developer.playcanvas.com/en/user-manual/scripting/loading-order/

  1. Grab the firebase config object from your google firebase dashboard. It will look like this:
var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
  appId: "app-id",
  measurementId: "G-measurement-id",
};
  1. You are ready to initialize the firebase app, you can put this code in any regular Playcanvas script. The initialize method will be a good place for that:
MyScript.prototype.initialize = function(){

   var firebaseConfig = {
      // ...
   };

   // Initialize Firebase
   firebase.initializeApp(firebaseConfig);

};
5 Likes
3

Hello. Here is my take on it :slight_smile:

  1. Learn to use https://developer.playcanvas.com/en/tutorials/htmlcss---live-updates/.
  2. Use JS/HTML knowledge to communicate both ways (from HTML-front to 3D backdrop and back), but be aware of the minor/small adjustment and tricks needed to make basic JS work at PlayCanvas code editor.
  3. Use any DB that can work with JS.
    …
  4. As a PS: if discomfort with HTML-rendered buttons, one can play making them invisible on top of 3D button (this can save time in regards to regular 3D backdrop functionality >> in the shape of raycasting or likewise)
4

how would I add firebase auth to this?

1 Like
5

so means i don’t need these two command anymore ?

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
6

A user email us having trouble adding Firebase 9 modules to a PlayCanvas application. I don’t use Firebase myself so not 100% sure this is the correct way but it seems to run fine and have access to the module functions

https://playcanvas.com/project/919976/overview/firebase-test

Important notes:

firebase-setup.js should have preload disabled

image
image3356×1702 317 KB

2 Likes
7

Thank you so much for your help @yaustar! Very helpful.

DISABLE PRELOAD on the setup file and I can import all the things I need. I appreciate you looking into this for me!

For future ref, @yaustar created a firebase folder with firebase-integration.js…

(function() {
    var scriptAsset = pc.Application.getApplication().assets.find('firebase-setup.js');

    var moduleElement = document.createElement('script');
    moduleElement.setAttribute('type', 'module');
    moduleElement.setAttribute('src', scriptAsset.getFileUrl());

    document.head.appendChild(moduleElement);
})();

-AND a NON preloaded firebase-setup.js

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.6.11/firebase-app.js';

// If you enabled Analytics in your project, add the Firebase SDK for Google Analytics
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/9.6.11/firebase-analytics.js';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
    // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
1 Like
8

Hey I followed all the steps to get firebase working properly, now I’m retrieving a Json file from firebase but I want to access it from other scripts with in playcanvas, since I disabled preload how can I access the JSON file?

9

Hi @Lukas_31,

How are you retrieving the JSON file from firebase?

If you have the file contents as a string (text), you can parse its contents like this:

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count); // outputs 42

Check this manual page on how to communicate between scripts and make your data available.

1 Like
10

Thanks for reply, I figured it out

1 Like
11

Can you elaborate on what your solution to this problem was, or where you found your solution? I’m looking at two firebase scripts, neither of which is a playcanvas script component. I’m not sure what step I’m missing here that would allow me to do something like:

this.firebaseManager.saveData(data);

Edit: Am I supposed to attach them to a script component as assets? If so, I don’t see any documentation on how to access functions within .js asset types. It’s also worth noting that the example given here doesn’t actually demonstrate any functionality, and only serves as an example of a setup that some have claimed works for them. I’m obviously missing something here.

12

Hey Jonah,

Once you retrieve the data from firebase or any other server, just fire an event and you can subscribe to it from any script with in engine.

e.g.

Fire event:

pc.Application.getApplication().fire('app:data', data);

Subscribe to event:

 this.app.on('app:data', function(data) { console.log(data) });

This is the easiet way I found.

13

This is a little bit ahead of where I am though. I have the firebase-setup.js and firebase-integration.js, but neither is attached to anything in my game. Do I subscribe to the event within the firebase-setup.js? When I do that, it doesn’t recognize this.app as a domain. I can fire events from within my existing scripts, but I don’t know how to subscribe to the event, or access functions or variables of firebase-setup.js as it is currently set up. Can you elaborate a bit more or give an example of how you have firebase setup and how you access it from your existing scripts?

14

Firebase scripts are preloaded before the engine itself. You don’t attach them to entities. These two scripts are just any other js code. You will call the firebase fetch in firebase-setup once you have your data then first make sure that engine is loaded like this:

pc.Application.getApplication().once('postrender', function () {
  pc.Application.getApplication().fire('data', yourdata);
});

Then you can subscribe in different script that you’ve created that is attached to entity.