Adding Firebase SDK In Unity WebGL builds!

hey guys and welcome back to you nico dev throughout my entire channel i made a lot of tutorials about firebase and more specifically firebase and unity combined now the first tutorials i've ever made on firebase and unity were done using the rest apis this means that instead of using the firebase sdk we were doing requests to certain endpoints okay to trigger database events such as putting data in or retrieving data and this is a pretty good system and it works for any platform because naturally in any platform you can just do a request to a certain endpoint and get a response i've also noticed that there are actually ways to stream from rest apis so you know if you work hard enough there are also ways to set up observers and stuff like that to check when data has changed but naturally the firebase sdk makes all of this so much easier and firebase actually has an sdk for unity now what's the problem with this sdk the problem is that firebase is targeted for mobile apps such as you know android apps or ios apps so the firebase sdk only works for these platforms there is actually a desktop workflow but this workflow is in beta and as you can see right here it says that this feature is intended only for development and not for shipping code so in theory there is a way to use the unity firebase sdk and build a standalone app but it's not recommended now there is one thing though that you can never do using the firebase sdk and that is building a webgl app so if i go back in unity as you can see and i go in build settings and i go into webgl i can actually build a project for webgl now if i try to use the unity sdk and build this project it's gonna fail miserably i'm gonna get a lot of errors nothing is gonna work because naturally the sdk was not done to work on a webgl build so what if you want to make a game okay and you want to use firebase and you want that game to be on webgl and you don't want to use the rest client apis because you need more services and you need to do more complex stuff and also maybe you need to use other services not just real-time database but an example you need to use firebase storage and as long as i know there are no rest client api for that service so how do you do this are you just stuck is there no way to do this well for the longest time i thought the answer was no there is no way to do this but recently i actually found a way to actually incorporate this to actually have the firebase sdk in a webgl build and making it work flawlessly now i created a small example library that you can find in the description where you can basically do simple real-time database requests in a webgl app all of the code is available in the description and it's really easy to install into your unity project and there are a lot of basic functions such as retrieving json posting json but also listening okay let me see if i can zoom this up a little bit okay that's too much but okay let's see if this works okay but also listening for child added to certain notes i don't know listening to other events or also running some simple transactions so these are all functions that you can incorporate into your code really easily using my library but in today's video i'm gonna show you how this library works and how you can add your own functions for your own firebase services uh you know for your webgl firebase unity app so let's begin first of all i'm gonna show you the finished product and there we go as you can see we have a path and in the past we can like do test path okay and then we can just post some json on this path we can just post hello and post the json and it will say that hello was posted now if i actually go to my real-time database console as you can see if i go right here you will see that the data was actually posted and this is working in webgl and this is not using rest client it is actually using the firebase javascript sdk so i can also retrieve the json at the same location and i'm gonna get hello as you can see and this is something you can also do with the rest api something you cannot do with the api as long as i know or something i never tried doing with such ease is actually listening for changes in values and as you can see now i can listen for a value changed on the test path and if i actually go here and change this value to anything else and i get back here as you can see i will get the updated value and every time this changes i'm gonna get the updated values uh you know right away you can also do transactions and this means you can do a race condition safe calls to the database so as you can see i can add an amount to this specific value so as you can see if i do this now it's gonna be five and if i do it again it's gonna be ten and no matter how much i spun how much i spam as you can see the value is gonna keep going up and there is not gonna be any corruptions or any inconsistencies with the count because it's a transaction i mean naturally i can also add negative numbers and uh stuff like that so as you can see this is going to happen i can also do a boolean transaction so this means that uh it's gonna be either true or false so it's gonna be like a toggle and yeah i can also listen for other values being changed these are all of the basic firebase functions i've incorporated in the example and you know if you are doing a simple real-time database dump for your app or for your game maybe just a simple scoreboard this is all that you need now let's actually check out how i managed to do this so the firebase unity sdk is a no no you cannot use the firebase unity sdk in webgl but webgl actually works using javascript because it's literally just a web page and firebase actually has an sdk just for javascript so what i was thinking is instead of using the unity sdk for firebase let's use the javascript sdk for firebase and somehow inject it into the finished webgl build luckily for us unity as a way to do exactly this i'm gonna leave this page in the description because it was really helpful to me so what you can do is you can write javascript code and then you can execute it from c-sharp in a webgl build so if we somehow managed to incorporate into this code the firebase javascript sdk we are all set because we can just call these functions and we can interact with these to the firebase real time database alright so let's do this following the documentation all we have to do is create a folder which is the plugins folder and you can create this anywhere you want and then you have to go to here and do open containing folder why does my file system crash uh let's try again uh thank you file system very kind but yeah here we are in our project folder and then once you're here you create a new document and this document can be whatever you want i'm gonna just name the class firebase okay and then it has to be and you have to be careful here it has to be dot js lib okay because it's a javascript library and then you can open this with whatever you want i'm gonna open it with resource studio code okay for reference i'm just gonna copy this code from the documentation and put it here okay and then i'm gonna clean it up a little bit i'm gonna only leave this hello world function okay so we have it so at the beginning of the file there needs to be this function which is merged into and you need a library manager library and then all of the functions that you put inside of this container all of these are gonna be integrated into your unity project and remember this file has to be under a plugins folder in your assets project or else nothing is gonna work and also it needs to have the javascript library extension okay we're good this is how you make the function you just do the name of the function column function and then right here you put any arguments for this example we're just gonna do a function that retrieves a value from the database we are gonna call this function get json so we're gonna get the json from the database now naturally as the variables we need a path uh like where we want to get the json from inside our database and we also need a few other parameters that i will explain in the future just give me a sec for now we are just going to create them we need an object name and also we need a callback and we need a fullback all of these parameters are gonna be strings now one thing to note one thing i really stumbled my head on every time i tried to make this work and i literally lost hours upon hours trying to figure out why this wasn't working uh these strings are actually not parsed a string yet so you cannot just use them normally throughout your code you actually need to pass them first i know it's pretty weird but the way you actually pass them is you create a new variable an example parse the path okay and you need to do pointer stringify and then inside you put the original parameter and now you actually have a string that you can use in your code if you don't do this operation this string is actually going to be a number i know it's really weird anyway let's copy this code and do it for all of the parameters that we currently have and also don't worry about it i will explain all of the other parameters right now just give me a sec all right so we can have parsed object name now we're gonna remove this window alert and we actually need to use the firebase javascript sdk now unfortunately our editor our ide in this case visual studio code cannot give us any advice on the code that we are writing because currently the firebase javascript sdk is not incorporated into our project so naturally visual studio code doesn't know what we're doing so we just have to rely on our writing skills but we think what you can do is firebase dot database to access the real-time database library and then we have to do ref and right here we can put the parsed path and then we can do once value and this basically means read the value at this location once and once this operation is done so we do what then we are gonna have a function and this function is gonna return a snapshot which is basically gonna be the value that we retrieve and this function is gonna do this code that we write right here and this is gonna happen if everything goes correctly when we go here okay we actually need to send back the data that we received from the database we need to send it back to unity right now we are in javascript we need some way to communicate to unity luckily there is a function that can do just that we can basically invoke the unity instance okay dot module and we can do the function dot send message now to explain this simply basically what this function does is it calls a method from your unity c okay basically what you have to tell the function is the name of the game object you want to invoke okay so let's see an example my main camera okay so let's do an actual example of this okay let's create a script and the script is gonna be just test okay and inside the script that i'm gonna open up okay this is our script let's delete all of this inside the script we're just gonna have a function and we're gonna call this my function and now this function is just gonna do i don't know some basic stuff like uh i don't know debug dialog test okay now let's actually take this script and put it into our main camera okay so our main camera is also gonna have the test script now if we want to invoke this function right here from our javascript code all we need to do is do this send message function but the send message function actually needs some parameters the first parameter that he needs is the name of the game object whose script is you know added as a component in this case the name of the game object is gonna be our main camera so right here i can put main camera and then what i also need is the name of the method okay and in my case the method is named my function so this is gonna be my function and then this is optional but i could also have a parameter that i passed this function now there can only be one parameter and it needs to be a you know um primitive parameter so it can be either a string or an integer or a char but it needs to be primitive in my case it's gonna be a string and it's gonna be the snapshot dot val and this is actually a javascript object and this is the json that i get back from the request i actually want to transform this into a json so i can just do json string divide this alright so every time the request goes through successfully i am gonna call the function that is inside the main camera which is this one and i'm gonna pass it a value which is gonna be this one so right here let's actually say that it accepts some value and then it will debug that log this value now for the specific example where the this function right here is located inside the main camera this code is gonna work but naturally if i change this function's name or this function location this code will no longer work so to make this system better we could actually make these two parameters actual variables so we can modify them from the c sharp code and this is why this object sorry these parameters are here instead of main camera right here we're gonna put object name so this parameter right here and instead of my function this is gonna be our callback also we can surround our code in a try catch statement and if there are any errors like this error right here we are going to catch the error and we are going to send it back to unity so we can just copy this code right here and we're gonna do object name but instead of callback we're actually gonna do a fullback now and instead of sending the data we're actually gonna send the error message and maybe we can see something like there was an error column and then pass the error all right and this actually doesn't have to be like this good and i think we are done with our function and you know we are calling unity uh once the function actually gets executed and we are actually getting back the data that we want which is basically the firebits snapshot at the location that we decided now let's go back into our c sharp code and let's actually learn how to call this function from c sharp for now let's actually remove this test function right here what you need to do is you actually have to add a reference to the javascript function into your c sharp code and this is the syntax to make it happen basically you have to do dll import underscore underscore internal and okay right here i need another parenthesis and let's actually import this it needs to be a using system runtime interop services and then we can declare our function make sure that the parameters of the functions match the parameters you put into the javascript so in this case we have a path object name callback and fullback and they are all string also the name of the function has to match the name of the function in the javascript and you need to make this an extern void which basically means that this function needs to be accessed from a external library in our case our javascript library that we created okay great and now we can call this function from our c-sharp code now if you remember correctly this script is actually in our main camera in our main scene so this click is going to be loaded as soon as we you know hit play so what we can do is we can add the function start okay so everything inside this function will be loaded as soon as we hit play and we can actually call this function right away so we can do get json and then we can define a path we're just gonna use an example path it's gonna be example and then we need the object name and for the object name we can just do gameobject.name which in our case will always be main camera and then we need a function for the callback and a function for the fullback let's just do it right now let's create a new function okay this is gonna do on a request success at example and it's gonna have the data and then we're gonna have another function which is gonna be on request uh field and it's gonna have the error and right here we're gonna do another string which is gonna be on request success and right here we're gonna have the fullback which is gonna be on request field and now we are correctly calling this function and we are referencing these two other functions okay so if the request goes through successfully we need to display on screen the data so what we can do is we can just create a text and we can do text i don't know great and then we can just copy this text and change the text of this text field to the data and also let me change the the text color to a green color just so we know everything went well correctly instead if there are any errors let's change the text to the error text and also let's make the color of the text red great now all we need to do is go back into our sample scene where everything is taking place and let's actually create a new text field there we go right here let's actually make the text field take over the entire screen so we're not gonna mess with any data let's actually make it centered and maybe i don't know uh yeah this is fine right i can see it okay it's a it's pretty bad because i'm not using textures pro but it's pretty it's all right let's remove the text for now and let's actually add to the main camera a reference to this text now naturally you don't want the script to be in the main camera this was just an example you want the script to be maybe in another object actually let's let's just do that okay let's create a new empty object and let's call it firebase handler and let's remove the script from here and let's actually put it in the firebase handler oh this actually moved it okay this is pretty great and then we already have the reference to the text good and we actually don't need to modify uh anything in our code because in our code we were using game objector name so this game object now name right here is gonna be firebase handler now and everything is gonna still work correctly okay great and now in theory what you would think is that we can just hit play and it is just gonna work but you'd be wrong because if we try to hit play is going to give us an error it's going to be entry point not found get json basically this file right here that we created only gets loaded in once we actually build our webgl project so we cannot actually test this in the editor unfortunately what we need to do is to build settings webgl switch platform and then we need to build for webgl in order to actually test our project and usually it takes like two three minutes to uh build a webgl project so i'm just gonna you know pass the recording and i'm gonna be back once this is done okay sorry guys it wasn't making me build as you can see the build failed but just because i made a really really stupid mistake because it is javascript you don't actually need to define the types in the parameter so you don't have to put string at the beginning you were probably all screaming at me because you were like nico what are you doing uh but no now we should be fine oh and i'm also dumb i also found another mistake but i guess this is what it is when you actually code without you know having any parsing right here we are using object name but actually we need to use the past one or else nothing is gonna work and also we need to use the parsed callback and a portrait a parse and fullback so i built it and it didn't work and now i just realized why this wasn't working okay now for the last time can i finally build and can this finally work okay finally it worked and as you can see once we actually load the app there is gonna be an error the error is firebase is not defined now this is really to be expected because we wrote our code right here expecting to know what firebase is but then we actually never incorporated the firebase library but don't worry it's really easy to incorporate and we're gonna do it right now now all you have to do is go to this page which is also in the description which is going to guide you through how to do exactly this in my case though i only have to go to the nicodebot console which is basically the project that i'm using i have to go in the settings go to project settings and right here as you can see i already have an app uh incorporated because i already did some testing we're gonna add an other app and it needs to be a web app okay and then you you can write the name it's gonna be just test okay we have to do register app and now that is add the firebase sdk which is basically what we're gonna do as you can see we have this code right here and all we have to do is copy it and then we have to go inside our unity project okay in my case my project is test go where we actually built our webgl page i built it in builds test okay and this is my webgl page actually open the index.html file and right here in the body at the end of the body like before the end of the body right here you paste what you actually copied from this screen right here and let's actually parse it okay this is good now as you can see right here it says to do add the sdks for firebase products that you use now in this in my case the only product that i'm using for this video is the real-time database okay but naturally if you want to expand this and maybe add more functions inside the file like i did you can also use authentication storage anything you want in my case i only need a real-time database so what i'm gonna do i'm gonna go into the reference again i'm gonna go to step five and as you can see right here we have all of our libraries we need to get these ones okay and i need to get the one for real-time database which is this one i'm gonna just copy this code right here okay that is also the copy button i'm gonna go back down and down here i mean i guess i can put it down here here i can just put it and great i can just save and now since i saved the new index.html i can go back into my webgl player i can refresh the page and now it should work okay and as you can see as we reload the page we are gonna get a result of no and the reason we get this result is because naturally on the example um endpoint or path there is nothing but if in the example path we actually put some data like an example test if we reload the page we are gonna get test in fact as you can see we are gonna get exactly that and also if right here we put more complicated data uh let me delete this like our example example and then inside we can put a test then we can put another value test true and this is gonna be one this is gonna be a string something like this if we reload we're gonna get the entire json and there you go so yeah this is just a simple gate function nothing really too complicated it's just one function but you can add more function to this by just doing this and you know writing your own code in javascript and down here you can use any javascript or sorry any firebase javascript sdk service that you want and then you can use the unity instance send message to communicate back to unity while in the unity editor you can use this syntax right here to communicate to the javascript function and just like this simple example that we made you could make literally anything that you want to do with the javascript sdk you can translate it into c-sharp all of the useful links to make this work are gonna be in the description but i wanted this video to be just a kind of overview video on the way that i managed to do this which is pretty straightforward if you ask me anyway yeah this is it i don't think i have anything more to say about this project i hope you really enjoyed it and if you have been struggling making a webgl app work hopefully this will help you out anyway that said i hope you really enjoyed this video leave a like if you did and you know subscribe to the channel if you're new and you enjoyed this content and i guess i'm gonna see you guys in the next video thank you so much for watching till the very end and i will see you later bye

Channel: uNicoDev

Views: 20,920

Keywords: unity, game, gamemaking, tutorial, how to, firebase, realtime database, cloud functions, multiplayer, webgl, html5, sdk, firbease sdk

Id: fg_aiGVeKc4

Length: 25min 20sec (1520 seconds)

Published: Thu Aug 27 2020