Firebase with Vue 3 and VueFire

so you've come to this point in your journey where you've been building powerful Dynamic apps with view but you're starting to hit a limit on what you can do with purely front-end Technologies for example while it's cool that you're able to create individualized sessions of data locally the reality is that users have come to have this expectation that their datas will be able to persist across things like multiple sessions of using the app or frankly being able to access their data across multiple devices and that's where the need for a database comes in but when it comes to choosing technology it can be fraught with frustration and decision paralysis because well there's frankly a lot to choose from and while going in depth on the different types of databases goes well beyond the scope of this course I thought we'd go ahead and cover three high-level categories that you should probably be aware of relational databases are the most common type of databases when people are talking about choosing a database and the reason for that is because they have a very highly structured approach and really they've been around for a long time so people had a lot of experience with them if you're new to relational databases think of them like spreadsheets where you have structured rows and columns that identify how the data should be structured and how the data is organized but when it comes to how they relate you have these foreign Keys basically specific columns that have identifiers that allow you to connect it from different rows to different tables and so forth and so forth and that's how you create relationships between your data some popular examples of relational databases include MySQL postgres a newer category of databases that's a bit more Cutting Edge but worth mentioning are graph databases and while graph databases are also interested in the relationship between data they're much more specialized as far as being able to represent data that's far more complex and has different Connections in comparison to a traditional relational database the third and final type of database that we'll be talking about today is document-based databases as the name implies this model stores data in the form of documents that are often in a Json format which many of us are familiar working with as front-end developers this is probably one of the reasons why Firebase has been a popular choice for many web developers and why we'll be using it for this course And to clarify you don't need any prior experience when it comes to working with databases I just want to make sure you have a high level understanding of what databases are and the types of databases that are out there so that when you're learning about this one and choosing to look at other Alternatives you know what category you're in that said some prerequisites which will be helpful when it comes to navigating the code base for this course includes fundamental view 3 knowledge so you know things like components some basic techniques when it comes to things like props and slots and those kind of things and then the ability to know about view router and how it works in regards to navigation for the app and pinia when it comes to managing State Management across the entire app and if you need to brush up on any of these topics we'll be sure to have them linked down below for you but otherwise in this course you'll be working on a food review app that you'll be taking to the next level by implementing a database as well as user authentication with Firebase [Music] when people talk about Firebase one of the common misconceptions is that Firebase itself is the database as if when we talk about like postgres or we talk about like MySQL and you hear people talk about that you might think Firebase is the database but that's not quite true so here we are on firebase.google.com and you'll notice here that on the very first line you'll actually learn about what Firebase is which is that it's an app development platform in other words it's a lot more than a database and so we'll cover what Firebase offers but that's the first thing I just want to clear up is that Firebase has a lot more to offer underneath the hood Beyond just the database portion now granted that will be a big part of what we talk about in this course and what we use but as I sort of allude to in the first lesson we'll also be talking about another service that's actually very popular in terms of when building apps which is what user authentication as we go through you'll also see as you can see here that there's different categories of products that Firebase offers but more importantly something that I do want you to know about is the fact that Firebase and one of the reasons is use and chosen bylaw developers is that as you can see it's used by a lot of really big names as you can see here we can have things like New York Times alibaba.com Lyft venmo I mean Duolingo clearly we have a lot of different types of apps that are using it and it's basically been battle tested and so that's something that's really important for us as developers when choosing our tooling because we want to choose something that people have won actually gone out and used with users so that we can build those products and then leverage that experience for our own app another reason why Firebase is really popular with developers is because as we can see here it actually is designed to be easily integrated across all the different platforms a lot of times when it comes to choosing products it's easy to focus on the website of things but if you have the kind of app that eventually is going to go across multiple devices it's nice to know that the database or the platform using supports other things so as you can see here Android iOS even Unity for game development Firebase supports all of these different platforms which means it really allows you a lot of possibility when it comes to developing your app let's go ahead and dive right into getting started the important thing for you to know when it comes to working with Firebase is really all you need is a Google account if we check out the pricing right here you'll see that basically it's at no cost to you like a lot of the popular Services these days they want you to have the ability to try out and see if it makes a lot of sense to you and then obviously if you actually grow to have users and have a lot of requests well by that point it'll probably make more financial sense to actually then pay for the service and figure out whether or not that makes sense but in the meantime let's learn about Firebase together at no cost to you so in terms of getting started I mentioned we needed a Google account but really all we need to do here once we are signed in as you can see here there's my little Avatar up there on the top we'll just click the getting started button on the firebase.google.com and this brings us to the Firebase console as you can see here you can see all the different Firebase projects that you have permissions to access and as you can see I have the V Mastery one but what we're going to do we're going to create a brand new project so for this project I'm going to call this view eats because as I mentioned before in the first lesson we're working on a food review app and so for me I kind of like the idea of view eats kind of like you eats you know I don't know fun little play on words but uh let's go and click continue and then you'll see here we have the option now to configure the analytics for the Firebase project given that we're buying into the Google ecosystem and analytics is an important part of tracking um and understanding what your users are doing I'm just going to leave this uh enabled by default but if for whatever reason you're not going to be using Google analytics or you want to use something else that's totally fine you can just disable it it's not required for this course once you do that we can actually associate the account um for where the Google analytics is if you chose it for me I'll just associate it to my Ben code Zen account and then we'll go ahead and let it create all right and with that our new project is ready as you see once we click continue now we'll redirect it into bud it's basically the project dashboard and as you can see here we can see that it gives us these easy call to actions as far as getting started by working with whatever platform is relevant for our app and for us we're not working on iOS we're not working Android but we are working on web so we could just do that directly but before we do that I wanted to give you a sense of what I mean when I said that Firebase is a platform so remember I showed you the different categories earlier on the home page you'll see here that the product categories also exist here on the left hand side so if you take a look at things like build you'll notice that there's a ton of offerings here from things like authentication app check which uh you know and all these these databases which we'll cover in just a second there's extension storage hosting as you can see there's a lot going on in here and then on top of that in under build you'll see the under release and monitor there's a whole thing for basically your devops for looking at performance your analytics for when things crash Etc as we mentioned earlier regarding analytics you have your whole platform for that and then of course engage you even have things like a b testing and messaging and honestly just so much stuff so obviously Firebase can have a whole master class in itself as far as understanding every single tool but here's the thing when it comes to learning any technology it's easy to be like oh I have to learn everything but as a developer we want to learn the thing that's going to basically leverage the most amount of effort for the rewards that we're going to end up getting so in other words just like the Pareto effect uh 20 of your efforts yield 80 of your results well a lot of times when it comes to Firebase the two things that people want to know about because it helps to really unlock what we can offer our customers is the ability to store data inside of the database and then leveraging the authentication so that we can protect that data so that everyone can have their own basically personalized set of data that said though one of the first thing you'll probably notice here is that there are two different databases that are being mentioned here there's the firestore database and the real-time database now we can certainly go into all the differences between what is you know which one is the right one for you and there's a link here that will link below inside a lesson for you to read about in case you're really curious about the differences between the two the main thing you need to know about these two databases is that one of them is the older one and the other one is the newer one and the older one is real-time database and the new one that they would prefer you to basically mostly use is the cloud firestore so that's what we're going to go ahead and use since that's kind of basically the more Cutting Edge one that they seem to be pushing us towards but more importantly as always go ahead and take a look if you want to read this article to see which one might make the most sense but for the most part I would say for a lot of the apps that I've seen in the ecosystem learning cloud firestore is a great place to start and as always if you have a special situation where you might need the real-time database go ahead and check that out and see if that's a better fit for you but just to reiterate for this course we'll be using Cloud firestore all right so now that we have it here let's go ahead and just create our first database and that is as simple as clicking on this button right here create database once that's been spun up you can see that we have two different modes that we can start it in production or test mode we'll just go ahead and do it in production mode because again at this point this is just basically a little side project we're doing but in the future if you're ever concerned about people accessing it or what it might happen in terms of like usage go ahead and use test mode but I'm going to go ahead and use production mode for the course in terms of the location you can basically choose where it's going to be think of this as like the servers um for where you're going to hit the data and so typically when it comes to side projects like this I usually want to choose whatever is closest to us um as far as like the developer so in my case I'm in the United States so I'm totally fine leaving it there but in case you're watching this from Asia or you're in Europe probably want to make sure that that's located closer to you just to make the latency of transferring data between the server and you just a little bit faster and in the future as you might have known there is that warning there that tells you that you can't change this later so in the event you're obviously creating a new instance and you're thinking about where you want to provision it that's where you obviously might want to think about where your primary user base is and then use that as the point of like the primary location for your cloud firestore and now that we've completed those problems believe it or not we have created our first database and what you'll notice here is that we have this little dashboard this interactive dashboard for how we interact with the database remember how in the first lesson we talked about how relational databases are like spreadsheets where you have columns and rows well don't forget we're in a document based database when we're working with Firebase and so what they call these basically uh collections of documents is well as you can see here a collection so since we're talking about a food review site let's start with a collection of cafes and so for here you might be like okay let's start a new collection and these will be cafes and then we'll click next and then what we'll see here now is you'll have the ability to define basically the structure of the document when it comes to that so in this case we can do like Auto ID to allow Firebase to generate an ID but in case you have a specific document ID you want to give it to you totally can but then in this case you can be like well okay so for example if we want a custom one just to make things a little bit easier from a readability perspective at the moment we say well at the moment we'll say this will be Cafe with a view and then we can add certain things about the cafe we can say well uh let's see the price and the price we're going to make this a number and so we'll basically do like a category which we'll explain on the UI later but basically we'll say like price one is like it's cheap two three four all the way four being like super expensive let's say maybe that's like over like a hundred dollars for a meal for a single person and so let's say Cafe with the view is on like the moderately inexpensive side we can say too if we do things like oh like where is it you know located so we can say like location and so in this case let's just keep it simple I'm just going to say it's going to be in the United States and then finally we'll just add a Boolean property of whether it's a favorite or not so here Boolean at the moment we'll just say false this is not a favorite just yet we can save that and what you'll see here now is that everything generates as this sort of like basically the ability to reference things within a collection of documents so as you can see here we have a collection of cafes and now within the collection we have these documents we have Cafe with the view and we can actually see the properties of our document inside of here which is pretty darn cool because essentially what this is if you think about it it looks a lot like the dev tools like you got to inspect what's going on underneath so get add another Cafe here and so what's another Cafe Let's see we can do the rain forest with uh computed properties for example and for this one we'll cut and then we'll do similar properties but one of the things you'll notice immediately though is that unlike a traditional database where once you decide on a schema basically how your data is going to be structured for the entire table like on a spreadsheet in this particular case it's incredibly flexible it says Define what it is that you want and this is call it one of the double-edged shorts of document-based databases in that they're really flexible but then as far as enforcing the schema if it's a little bit trickier in that regard our properties are pretty simple at the moment so let's go ahead and do that what do we have we had the price that we were going to do so the price and let's say the rainforest rainforest is fancy it's got like a bunch of organic stuff so let's make this one like a four it's got like cool scenery and everything super expensive and then where's the location this one we're just gonna uh let's say this one's gonna be in like Brazil's more South America area and then this one we're gonna say is this a favorite this one we're gonna say this is a favorite so this is a bullion and we'll say it's a favorite and so now we save that you'll see that our next document has generated you can see there we go we have the same two properties in here and what's neat about this is that you can go in and change the stuff and you're basically live updating a database that's what we're ultimately doing and something else is worth mentioning here though is that we also have the ability to create collections within the document so basically you can Nest those Collections and if we think about it as you start to see this unfold a collection is essentially an array that's really what it is and inside of that array you can put a bunch of stuff and so inside of those things I.E those documents you then put other Collections and so you can Nest collections within documents and you know it's cool because you get a lot of flexibility with this but once again it's like one of the things where you get to manage how that works and that can be a double-edged sword but just know these are the pros and cons of working with things like that and then for the sake of demonstrating this we can start other collections as well so you know we have a collection of cafes we might want a collection of restaurants and so inside of this restaurant we might be like okay well this one is going to say uh love the view and then inside of here let's let's use something slightly different let's say restaurants have slightly different properties so we can have a price in this price for the number uh has a great view let's say this one's a three and then this time the location will keep that similar and strain and this one we're going to put this in your let's say let's put this in France and then we'll have the favorite property for restaurants as a Boolean as well we'll make this one false but we can also add something else so let's say for example we start wanting to add tags for restaurants but cafes don't need tags well here we can actually add an actual NRA and then inside of the array you can see we have different types so in this side of case let's uh obviously we'll have the different types of food that they have here so let's say for example I want to just tag it Crepes so that in the future I can find all the restaurants that are related to Crepes that's all that is so once I say that we'll see here now we have this additional collection with the basically the restaurants that are inside of it and with that you actually now have the fundamentals as far as creating a brand new database with Firebase and then administering it creating data modifying data and being able to just inspect things as you go which is an incredibly powerful thing to have because once we start getting into the programmatic aspect of working with Firebase in terms of like hitting apis to automatically populate data fetching it down updating it deleting records which we're doing with the rest of the course it's nice that you'll be able to always come back here and always inspect things and know where everything is whereas with some of the other databases sometimes it was a bit involved as far as like making sure you had the right software downloaded and then you have to learn how to interact with different tables this as you can see here really does feel a lot like the native tooling that we're used to as web developers when it comes to being able to inspect data modify them and then just keep working on the things we love best which is building our application and then shipping that over to our users with that said I hope you're excited because going forward we're gonna be diving right into the code working with view 3 Firebase and especially the official binding library for view three view fire thank you [Music]

Channel: Vue Mastery

Views: 6,994

Keywords: vue js, vue, vue js tutorial, vue 3, vuejs, vue js tutorial for beginners, vue 3 tutorial, vue js 3, vuejs tutorial, vue tutorial, vue course, firebase, vuefire tutorial, vuefire, vuefire vue 3, vue and firebase, vue and firebase tutorial, vue 3 and firebase, vue 3 firebase authentication

Id: eEXEnZ9uG_Y

Length: 16min 50sec (1010 seconds)

Published: Wed Feb 22 2023