Getting Started with Firebase Realtime Database and Xamarin.Forms

if you need to have your data synced over multiple devices in real time then firebase real-time database might be something for you let's see how we can implement this in a xamarin forms application let's have a quick look at what we're going to learn in this video on the left you can see a running application which is the client application where we are going to see the actual live data showing up as we add it to the database on the right you can see an app that is actually adding data to the database so we have this little entry here and hello world and whenever i click the save button in almost real time you can see it's added to the database and downloaded onto our device here on the left and that is what we're going to see what we're going to learn in this video now before we do anything let's create a firebase project and if you have another project then you can reuse that one because um you can see these projects as kind of like your apps and within these apps you can use multiple services right the push notifications that i got videos on as well maybe the the databases or some other stuff authentication they have a lot in here so if you have another app that this has to do with then reuse that project but i'm going to add a new project here so i'm going to click the add button here and i'm going to say real time database test something like that and i'm going to click continue then it's going to ask me do i want to do the google analytics now of course is that something that you're interested in feel free to do so i'm going to disable it for now because i don't use it and i'm going to say create project so this takes a little while and in the background in the cloud it's going to create this little project for me provisioning the resources and it gets me everything that i need to get started with these real-time databases so it should take a little while and finishing up come on come on let's get this going yes there we go so continue your new project is ready now let's continue and you will be brought to the dashboard of your new project so here you can get started for ios android the web on the left you can see all the things that you can do here machine learning functions firestore database real-time hey real-time database that is the one that we're after so let's just click that and it's also good to mention that i'm on the spark plan you can see it all the way here down left at the bottom which is free zero dollars a month just the way i like it and i think most of these services you can start for free um also with the real-time databases i think it allows for like one gigabyte of storage um in your real-time database and that is if you're just storing bits of text that is a lot of text that you can store for that but be sure to check out the billing details and if that is working for you now here i am in the real-time database section so i'm just going to go ahead and create a database you want to choose the right location now of course you know if you have a app that's going to be rolled out worldwide this might be a little bit tricky because normally i would recommend that you would choose the database location where it is closest to your user so if it's very regional um choose the the closest location there um but you know if it's going to be a worldwide app then it's it's going to be hard what the closest is going to be right so this says united states the closest for me is belgium so let's choose that and then we're going to click next and here we have the security rules now this is very important i'm not going to go over this into too much detail of course you want to you know specify users or keys or tokens or whatever that can access this database but for now i'm going to start in test mode which will allow me from like today to do 30 days of testing so it will add rules to do just testing reading writing by everyone basically now don't worry if you're watching this video i've thrown away this database already so you won't be able to use this if that was your plan but definitely look into this and how it works before you're going to release your app into production basically because you definitely want some kind of authentication in there right so be sure to look at that i'm going to say enable and it's going to create my database right now and it will take me to the page of that database this is my database basically so you can see the database location all the way down to the bottom and here in this this big white blob here you can see this is my real-time database test af 450d field default rtdb so this generates a unique name because we are supposed to be connecting to this from the outside right so the urls have to be unique and the url that we can reach this on is right here at the top um so we're gonna need this um like i said there's more in here the rules so you can edit the rules here make sure to have a look at that you can do backups you can see things about the usage so again make sure to look at that but i'm just going to focus on the crud actions here so create read update delete well not even all of those just get you started with how to work this real-time database so let's just copy this url let's remember this one copy it and we're going to go over to visual studio and see how to implement this to actual get real-time records in our real-time database now this video is a little bit different than other videos that i put out there because there is a lot to cover here so i don't start with a file new examine forms application well i started with that but i'm going to show you a little bit further down the road what i've been doing so let's start by inspecting all the things that you can see here on the left you see a little shared project which is a shared project between all of the apps basically because i have a client app right here and a server app if you will so i don't know if this is a typical real world scenario i don't think it really is but for now i have an application with a entry where you can just type some text and that will be saved to the database and on the client app it will be updated in real time just to show you the concept of course maybe you have this chat application where um the applications are both a server and a client right or maybe i don't know some other application where you are operations out in the field people are doing work orders and they have to have real-time information something like that so the more typical scenario is probably that you have one app which is a server and a client in one but this is just to get kind of like the point across so i have this server and this client and they both reference this shared project and it just is here for this little model class right so this is my database record this is the my property thing um so it's just a very simple object that we can save to the database and retrieve from the database now other things that you will see here is like i said this client client client so this is this is my shared client project for xamarin forms and this is the android and the ios targets and the same is here for the the real-time db sample so this maybe should have set server in it so this is kind of like the server application right so what i did on the shared applications here i'm going to show you for one i installed a nuget package that will make it possible to make the communication with the firebase servers a little bit easier so just right click manage nuget packages and let's have a look at the installed ones here this is called firebase.net firebase database.net excuse me so you know you can do all kinds of things with this but the most the thing that i'm going to use it for is the real-time firebase databases so that's what i'm going to show you install this on only the shared projects because it doesn't need anything specific to android or ios so just these shared projects and you will be good now here i have the main page of the server app so this just has an entry and a button so here i can enter some data and i can click the button and it will actually save that data to the database and if we inspect the code behind for this the mainpage.example.cs then you can see that it creates this new firebase client and it does that by referencing this url so let's put that in here i copied that from the portal and you know if you have to do some authentication here then definitely do that go check out the documentation for this plugin and for the database on how to do that or let me know down in the comments below if you can't figure it out then i will answer there or create a new video and we're all set now we have this firebase client also what you probably don't want to do this is all sample code is create this client over and over again whenever you click a button so just create this once and actually let me just fix that right now because this is i'm not going to do this i'm not going to show you this wrong way of doing things let me see a firebase client so let me get a firebase client here firebase client i need to add this right using so there you have it new firebase client and now this all works and we are not creating new clients all the time okay so that's fixed boom and now what it's going to do is firebaseclient.child record so this is going to be kind of like our name for the table that you're putting things in although this is a document database right so this is going to be um it's not going to have a scheme as you might know from like older sql things or other sql solutions this is just going to save like json files and it can look anything you can just add properties so you always have to also be aware of like hey do certain properties exist in the object that i'm getting back whenever you're adding new properties to things that's all things that you need to know about document databases right so be sure to check out what that is exactly as well if you're not too familiar with that but this is kind of like our table where we're going to save things and here we can also do a post async and here is where i'm creating my new database record with the text from the entry um and it's going to post that to a real-time database now in this child you can also see we have other things so the as observable we're going to see that in a little bit you can delete you can do get the results once you can do order buys you can do post put you can do all kinds of things right so this is kind of like the operations for your database again there is a lot to cover here so if you want to know more about this please let me know in the comments and i will sure be sure to create something for that and now let's hop over to the other side so here we have the mainpage.example on the client application so that's this one you can see it's selected here on the left and what i did here is implement a little collection view with an item source that is bound to a collection that is called database items i have a video a playlist even on how it works with data binding so be sure to check it out if you don't know what that is exactly and also on this next thing which is the item template so for each item in this collection right here we're going to have this template which has a little stack layout with a label and that's going to bind to the my property and we know that from our shared model right so this is where our shared model comes back in and it's going to show the records that are coming in into our database now how is going to do that in our mainpage.example.cs for this client application i'm creating this observable collection of database items so that's where the binding comes in right so the page binds to these database items i initialize it as a empty collection i set the binding context to this so that our collection views know to look at the main page and inside the database item so it knows that this is the object it has to use for its data binding properties and here again the firebase client so here we have again the to do oops this is not exactly what i wanted to do but the string is still in here so let me get that url out of here so again i'm creating this firebase client and i shouldn't do this all the time although this is happening only once for the constructor but let's move this out of this here as well and let's make this a firebase client and add the using again so that we have this firebase client and now this connects to our database as well so this is connecting through two applications to our our shared database so now we just have this collection which is actually an eye disposable well again typically you don't do this in the constructor probably but for now i'm doing this and this is an eye disposable so make sure to dispose of this whenever you don't need it anymore and what's interesting here is that we we know this already right firebaseclient.child so we're going to go to our records table and then we can say as observable so you can get the whole collection as an observable collection basically so this returns it as an observable collection and you can just put that in your items so that's one thing that you can do but the next thing that you should do is here at the subscribe and then whenever something changes in the database it will fire an event here which is really cool and we get that by you know whenever we do that we have this database event i named it like this and if we inspect that object db event you can see that it has a couple of things so we have the event source i'm not even sure what this is but it will tell you something about the source where this is coming from the event type which is interesting because the event type can be insert or update or delete so you can see what to do with this record inside of your own application so that is valuable information right there and of course we have the key and the object right so we have a key that is auto-generated by inserting the record it will do that automatically so that it's unique and we have the actual object which is the actual record and because you know we tell it here that this has to be the my database record it will know strongly typed what things we're looking at here so the only thing i did here is check if the object is not null and just add it so i didn't add any logic here to see if it has to insert or update or delete i'm just going to add it because that's the only scenario that i'm supporting here right so on our client it's just going to add new things whenever things are going to be added so actually let me just bring up the applications here side by side so you can see what is going on in the application right here now on the left you can see the client application so there we have a collection view which is empty right now and on the right you can see the entry with a save button so now the really really cool thing is whenever i start typing things here and i press save you can see it real time updates automatically on my client application so if i say did you subscribe to my channel yet then save it's going to boom save that in the collection view on the other side that is how you can implement real-time databases with firebase and xamarin forms now one more thing if we go back to the firebase console so here we have visual studio and here we have the firebase console you can see also this updates in real time so here we now have our records which is the database that the table name that i called it right this is the key so you can see that is very randomly generated very unique and whenever we go in here you can see the my property with the values that i just sent here so this is like also updating real time automatically you can see the usage do all the other things here so this you can very much use for debugging purposes and you can see what is going on here um to see whenever things are going wrong all right i think you can even edit it here and then probably the events are fired the other way as well i'm sorry if that might gone a little bit fast but i'm trying to keep my video short and concise so you know that you will only get the information that you're interested in if there is more that you want to know please let me know down in the comments and also be sure to check the video description for some links because there's also a link to the documentation for the real-time data databases because this database type is for a very specific use case i think where you really want to get those real-time things on there so you know they have in the firebase has in their documentation a very good guide on when to choose which database so you just have to answer a couple of questions do i need this or that or that and you will go to their website and see what database type is good for you but this real-time database is really cool to play with and very easy to implement as we've seen right now please let me know down in the comments what you still need help with or what you liked about this video or just you know a general thumbs up thank you i always appreciate those as well of course as always the link to the github repository with all the code is in the video description as well so be sure to check that out so you have a reference of everything that is going on here thank you so much for watching again one of my videos please click that like button so other people can get to watch this as well and they can click the like button and then i will get a lot of likes which is nice for the youtube algorithm please subscribe to my channel as well if you haven't done so already i will very much appreciate that as well and as always keep coding [Music]

Channel: Gerald Versluis

Views: 2,245

Keywords: xamarin firebase, xamarin forms, xamarin forms firebase, firebase tutorials, xamarin firebase tutorials, xamarin c#, Xamarin Forms 101, firebase realtime database, firebase realtime database tutorial, firebase realtime, xamarin forms firebase realtime database, xamarin firebase crud, xamarin firebase example, xamarin firebase plugin, xamarin app tutorial, Xamarin Forms 5, Xamarin.Forms 101, Xamarin 101, xamarin.forms tutorial, xamarin tutorial for beginners

Id: 9tWcv2_HK9E

Length: 17min 42sec (1062 seconds)

Published: Mon Nov 01 2021