Angular & FireStore Application [1] - Setup & Getting Data

[Music] hey what's going on guys so I have a new project series for you we're gonna be building an angular application from scratch using the new fire store cloud platform from firebase now fire store allows you to store sync and query data for web applications or mobile applications and it's supposed to be really scalable as well as really fast and I've had quite a few requests for this especially from people that went through my angular 4 udemy course where we used firebase to build a pretty decent sized application and if you want to get into things like firebase authentication and stuff like that I'd suggest checking that course out I'll put a promo link in the description alright so this is the application here it's basically just an item manager now you guys can use posts or users or whatever resource you want I just chose items just to have something very general that you guys can build off of all right so we're also using materialized CSS for the CSS framework and if we want to add an item we can go up here and we'll say item say item five for the title and then we have a description we'll just say this is item five and submit and you can see it gets added down here now if I go when I look in my firestore back-end you'll see that it's added in real time I didn't even have to reload let's see where is it right here item five alright so each each item will have a unique ID generated by firebase and it also have a title and a description which you just saw me enter okay so in addition to adding them obviously we can read them and list them and then if I click on one of these icons over here these edit icons it'll pull down a little form and we'll be able to update the item so let's change this to item five and this this changes as I type right here because we have our two-way data-binding with angular and by the way we're using angular for but you know when angular 5 is released with the CLI you can use that as well there's nothing particular to angular for that you can't do with angular 5 here so we'll change this to I don't know we'll just say updated item just to show you that we can change it and then we'll click update and you can see that that's been updated all right and if you want to delete it you can click on the Edit icon again and you can click on delete item you can also double-click the item itself to delete it all right and you can see that that's been updated and firestore as well all right so that's what we'll be building guys so the very first step is to create our fire store so that's what we're gonna do next hey guys if you've been watching my videos for a while and you really like what I do when I've helped you out a lot consider becoming a patron even for one dollar per month it pushes me to keep bringing you guys the best content I possibly can there's reward tiers for discounts for you to me courses personal support and more so check out the patreon link in the description below for more info so to create a fire store you're gonna have to log in to firebase Google comm and log into your console ok so from the home page you'll see a console link up on the right here and then you should see a screen like this so I already have this fs1 dev database that's what I created to create you know the initial app but I'm gonna start from scratch so we're gonna click add new project and we're gonna call this let's call it FS 1 prod for production and then create project alright and that's gonna generate everything for us and just because used fire store doesn't mean that you can't use you know firebase authentication or storage or all that stuff alright it's just using the fire store instead of the real time database all right so what's that set up you'll get your standard firebase back-end but what we want to do is go over to database and then instead of choosing the real time database we want to choose the cloud fire store so we're gonna click try fire store beta and at the time you're watching this it may not be in beta anymore all right now this right here is asking us if we want to start in locked mode that means that we have to authenticate through firebase to actually read or writes to to our data now I'm not going to get into authentication in this tutorial in this series if you really want to get into firebase authentication again I would suggest watching the angular front-to-back udemy course alright so we're going to choose test mode so that we can publicly read and write to our database and we'll click enable alright an authentication doesn't change whether you're using real time database or a fire store it doesn't matter all right so once that's set up you'll see a screen like this now what's really nice about fire stores the interface it gives us to actually add data when we use the regular real time database we actually have to just add custom JSON which is kind of annoying so we can just click Add collection here and we'll say items next and then for the document ID we're gonna leave it to auto ID to auto generate and for the first field we want title we can choose the type okay so you have all these different types we're going to choose a string though and then the value I'm just gonna say item one alright so we want one more field I'm gonna click add field this is gonna be the description it's gonna be a string and it's going to say this is item one all right then we'll click Save and that will create our document for us okay you can see it has its own unique ID a title and a description so let's click well add document again will create one more will say title item to click another field this will be description and we'll say this is item two and save okay and that's it our firestore is now set up and we're ready to create our angular application alright guys so now we need to do is generate our angular application with the angular CLI okay now the main module we're using to interact with firebase or Phi store is this angularfire - so there's a lot of good documentation here we're not following it to a tee for example they show you how to bring it into a component here we're actually going to create a service which is a better thing to do because then your service is expandable across all of your components rather than just you know bringing in the inkwell you know what you need from angularfire in every single component so you don't repeat yourself so we'll do things a little more difficult but much more efficient so let's generate our application now you're gonna need the angular CLI to get that you want to do NPM install - g4 global and then the @ symbol angular slash CLI and I'm sure it'll most of you guys know this if you've ever worked with angular before but yeah this will this will Ghent this will make it so that we can generate any angular application from any directory alright so I'm gonna create my foot my project folder here in my Dropbox code prod folder and to create a new application we just need to do ng new and then the name of the application in this case I'm going to call it angular FS or angular firestore okay and that'll generate the folder and all of the all the main angular files it'll create the source folder with the app folder inside of it it'll have the core app component and then we'll create components to nest into that component all right and then we'll create our service and there's a bunch of things we need to do hopefully it's not too confusing like I said if you've used angular before you shouldn't have any issues if you haven't I'll try to explain things as well as I can but if you are absolutely new to angular and you've never used it I would suggest watching at least the angular 4 in 60 minutes video before watching this alright so now that that's done we're gonna just CD into the folder we created which is angular FS and I'll just clear that out so from here we should be able to generate or not generate but run our application with the dev server and we can do that with ng serve and then if we want that to open automatically we can do - - open and that should open it on port 4200 by default okay so there's our default angular application now what I want to do is now that we know that it's working we're gonna stop it with ctrl C and we're going to install some dependencies all right so we're gonna have a couple front-end dependencies like materialized CSS we're going to use for our framework our CSS framework we're going to need jQuery because it's a it's a dependency of materialized and then I'm also gonna use font awesome which is an icon library so let's install those with NPM so we'll say npm install now if you're using NPM version 5 or later you don't have to do - - save in order to save your dependencies to your package JSON file but I usually use it just in case especially where I do videos and you know a lot of you guys may not have NPM 5 or later so I'm just going to include it but let's do materialized - CSS jQuery and font - awesome okay so we'll install those three things alright and then I'm just clear this out there's two other things we need to install and that is firebase ok the firebase module itself and then angularfire - which is you know the connector between angular and firebase so we need both of those installed and angularfire - is very very powerful it included we can do authentication we can do you know real-time databases firestorm basically anything to do with with firebase storage file storage all that alright so that should do it for dependencies now what I'm going to do is open this folder in my text editor I'm using vs code so I'm able to do just to code dot and that should open it up in vs code all right so from here what I want to do is take the scripts and stylesheets that we just set up like materialize in jQuery and font awesome and we're gonna put them into the angular CLI dot JSON file okay there's a place for styles and for scripts and as you can see there's a default stylesheet included with angular that's actually the source assets no where is it right here styles dot CSS so it includes that in addition to that we're going to put a comma and we're going to include font awesome which is going to be dot dot slash in the node modules folder and font awesome let's see font awesome slash let me just check this the exact location let's see all right so it's gonna be fun awesome slash CSS slash font awesome dot CSS so we want that file loaded or included then we want the materialized CSS which is dot dot slash node module slash materialized - CSS slash dist slash CSS slash materialised dot CSS alright so those are the styles now in the scripts we first want to include jQuery so against in the node modules slash jquery slash dist slash jquery dot j s and then finally we want the materialized javascript file which is in materialized - CSS slash dist and then j s and then materialized j s sorry so those are all the scripts we need let's save this and then we're going to run the server again so let's go back to get bash or whatever terminal you're using and we're just going to run ng so and now all those scripts should be included and we should see this change a little bit because of the materialized framework alright so now you can see that the fonts are much bigger so things have changed a little bit and then just to check you want to do an f12 to look at your console make sure there's no you know missing jQuery or anything like that any errors like that so we should be all set we can close this file up now like I said I mean I'm not going to go through the very basics of angular you know if you don't know anything about angular 4 or 2 or 5 anything but angularjs I'd suggest watching the angular 4 in 60 minutes but basically we're going to go into the source folder and then app and then app dot module dot TS so this is basically like a meeting place for everything any component you create any service any module you bring in has to go into this file alright and then it has to be imported and put in to where it's supposed to go an NG module for example components go into declarations when we create a service that goes into providers and then modules go into imports all right so angular fire has some stuff we need to bring in if we look at the documentation here let's see it's actually a lot to this getting started with authentication we don't want that installation set up let's take a look at that so we've already installed it we've already done that all right so right here now in order to basically link our fire store with our application we need to include this object here with the API key the auth domain all this stuff and they recommend putting it in your environment TS file so what we're going to do is go into environments and then environment TS and we're going to inside of this constant let's put a comma right here and we'll say firebase and that's going to be an object okay and then we can get this stuff from our fire store if we go back to our fire base here you know what I'm gonna just make this bigger just so we can see things better and if we go to let's see overview make sure you're in your proper gear at the right project mines fs1 prod and then click on this icon right here and this will give you all of your information your API key everything you need to put in that object so let's copy that and we're just gonna paste that right in here alright so make sure it looks like that and make sure you use your own information not mine so we'll save that okay so that puts everything in that file now we have to import that file if we go down here you'll see we're importing environment from that environment file so I'm actually just going to copy that and let's put that right there we'll make this bigger too all right so we're importing environment and then there's some other things we need to import we need angularfire module which comes from angular fire too so let's grab that as well and you can either go you can copy it from here or you can just type it in now this is just angular fire itself we're also using a fire store and there's a separate module we need to import which is angular fire store module so let's say let's do that as well so import angular fire store module and that's gonna be from angularfire to slash fire store okay and then if you wanted authentication then you would bring that in separately as well but we're not going to get into authentication in this particular project at least up to this at least to the point that I have it alright so let's see we'll go back here and you can see that they're adding angular fire module dot initialize app to the imports and then they're passing in that fire bass object from the environment file that we put in so let's go ahead and do that so when the imports will put a comma here and it'll say angularfire module and then we want to call initialize app and we want to pass in environment dot firebase all right and then a second parameter of the app name which is in this case angular FS okay so that'll import firebase and you know everything that's needed so we also want to bring the angular firestorm module into the imports so we'll put a comma here and we'll say angular firestorm module okay just that we don't have to add any extra method or anything like that so that's that's pretty much it as far as bringing in angular fire into our app dot module file so let's save this make sure we have no errors in our application okay it's still running good all right now if we go into app you can see we have our app component ts file this is our main app component and then we have our HTML app component HTML file which is what you're looking at right here so I'm gonna clear all this stuff out we don't need any of this so we'll get rid of it and save and you can see that it'll just auto upload or auto load okay now we're gonna need a component to display our items from firebase or from fire store so let's let's generate a component so what I'm gonna do is open up my integrated terminal okay you can do this through your command line or your regular terminal I'm using vs codes integrated terminal and you can you can open that with control tilde or view integrated terminal and from here we're going to say ng g4 generate component and we want to go into the components folder and then call this items so we'll run that okay and then what that did is it created a components folder in our app folder and then we have an items folder with items component TS that's our main component class and then also the HTML file which is the view those are the two files you need to worry about with your components we're not dealing with the CSS or the spec test file just those two all right now I want this items component to display in the the main app component so notice that it has a selector of app items that means that we can display it with this selector so let's go back into the app component HTML file and just put in app - items as in as a custom HTML tag or as a directive and we'll save it go back and now we get items works ok now I just want to wrap this in a container okay we're using materialized CSS and it has a class of container which will just kind of push everything into the middle so we want to wrap that like that okay and that'll push it over to the middle alright so we have our item component or items component now we need a service to actually fetch stuff from you know using angular fire to fetch it from fire store so let's generate a service so we're gonna go back to our terminal down here and say ngg service we wanted to go on a folder called services and we're gonna call this let's call it iight 'm service so just item and then that generates a folder called services with a file called item service TS and it gives us a class of item service all right so this is where we're gonna basically do all of our interaction with firebase using angular fire now when you create a service or anything as I said before it has to go into the app dot module dot TS file now the component the items component that we generated with CLI automatically put in here it's imported and it's automatically put in the declarations services however are not so we're gonna have to just bring that in ourselves so we're going to say import items service from dot slash services slash item dot service okay now services don't get added to declarations again I get added to providers so we're gonna add in here item service like that and save and now we're gonna go back to our service and we're going to fetch our items from angularfire I'm sorry angular fire store Jesus is so many different things I could get them confused sometimes so there's a couple things we need to import from angular fire alright so one is the basic angular fire store alright the next is gonna be the angular fire store collection okay which represents collections in our case we only have one collection which is item and then also something called angular fire store document so it's the angular fire store document which is going to represent single documents so when we do like an update to a single document or delete things like that then we use that and these are all gonna be from whoops these are all going to be from angularfire 2 slash fire store ok and this stuff is in the documentation there it should be it's fires fire store module we already did that yeah so this gives us kind of bits and pieces of what we're doing let's check this out documents yeah see angularfire stored document we're not dealing with that yet we're dealing with collections so right here angularfire collection all right so anyway now that we even we've brought this stuff in the angularfire store we have to inject that as a dependency into the constructor so that we can use it within our service so we're going to say public and then we can call it whatever we want right here I'm gonna call it a FS and then just set it to angularfire store okay and then let's see we're gonna have a property up here and we're gonna add a property of items collection and we're gonna set that to angular fire store collection and I'm gonna give that a type whoops I'm gonna give that a type of item all right so right now doesn't know what item is so we're gonna basically just create an interface so we're gonna say interface item and we're gonna say that this should be an ID and I'm gonna put a question mark which basically means optional so ID which should be a string a title also optional string and description string okay so now we that red squiggly line is gone because it knows what this item type is now instead of putting it right in the file I don't want to do that because I'm going to be using this interface in multiple places and other components and stuff so what I'm going to do is in the app folder we're gonna create a folder called models and inside models we'll create a file called item dot TS okay and then we're just gonna grab that interface cut it put it in there and then just put a sport in front of it so that it can be used outside of this file so then we can just import it into our service so we can say import item from it's gonna be dot dot slash models slash item okay so now it knows what this item is and we can now use it in other files as well okay so items collection we have set to the angularfire store collection with the type of item then we're also going to have a property called items and this is going to be an observable so we need to actually bring in the observable package from reactive extensions so let's say import observable from reactive extensions which is rxjs slash observable okay and then what this items is going to have a type of observable and it's going to be an item as well so we can put in here item but it's going to be an array so we want to say item and then some brackets okay and then down here in the constructor we want to set this dot items okay so we're talking about this right here let's set this dot items to this dot af-s which is the angularfire store okay we injected that right here so it's available for us to use and we're going to call dot collection and we're gonna set this to items and then we're gonna say dot value changes like that and that's what this value changes does is it returns our collection has an observable so if we look over here let's see value changes so there's multiple ways of streaming collection data from your fires to our value changes as one of them [Music] observable data synchronized array of JSON objects but the thing is with this with value changes it doesn't give you the ID and we're gonna need the ID so later on we're actually going to change it to snapshot changes which does include the ID and this there's somewhere in here that shows you when to use which one but I'm not sure where it is but anyways I just want to show you an easy way to get your data so we're just going to do this now there's one more method I want to create and that's to get items so this is what we're actually gonna call from our component and all this is gonna do is return this dot items okay so items is being set or being initialized as an observable here with the type of item then we're taking it and we're setting it to a collection the items collection dot value changes which will send it as an observable which is like a data stream and then get items is just returning that okay so weird this is all we're gonna do for now we'll save it and then we're gonna go into our items component so it's going to component items component TS in order to use any of those service functions or service methods we need to import the service alright so we're going to say import items service from dot dot slash dot dot slash services slash item dot service okay and we need to inject that as a dependency into the constructor okay so for that will just say public let's say public item we can call this part whatever we want I'm just gonna say item service with a lowercase I and then we need to set it to item service with an uppercase I because that's what we brought in right here okay actually we're gonna set this to private alright so now we want to do is we want to fetch our items through the service okay using this get items right here so ng on an it is a life cycle method that runs automatically when your component is generated so just to show you that I'm going to just console dot log and let's just say ng on an it ran and we'll save that go back and let's open up our console with f12 or our dev tools and you can see ng on and it ran so it runs automatically just like the constructor okay although the constructor is really only supposed to be used for injecting things like services ng on an it is where you want to do your initializations okay things like fetching stuff so that's what we're gonna do here we're gonna we're gonna call that get items from the service and remember that's that's going to be an observable using value changes sends it as an observable which we need to subscribe to so let's go back and let's say this dot item service dot get items and then we need to subscribe and inside this subscribe we can put whatever we want here I'm going to call it items because that's that's what it's gonna give us set it to a set of curly braces and let's just console dot log the items okay and we'll go back here and if we look down here what's logged you'll see we're actually we're actually fetching the data from the fire store we have item one and item two alright so hopefully I mean I know that's kind of difficult to follow along with those of you that have taken my angular 4 course I know you know exactly what's going on but those of you that have and we're just fetching data through the service using angular fire we're returning the items as an observable and then we're catching it we're subscribing to them in our component and just logging them all right now obviously we don't want to just log them we want to show them in our template here so what we need to do is set these items as a property so in the class right above the constructor we're going to say items we're gonna set it to the type of item and it's going to be an array now it doesn't know what item is but remember we created the model right here what we can do is we can import that so we can say item from and let's see that's gonna be what dot dot slash yeah dot dot slash twice models slash oops item alright so now that that's a property what we want to do is when we get the items from the observable through the SUBSCRIBE right here we want to set them to this property so we'll save this dot items which is accessing this right here and we're going to set it equal to the items that are coming in from this subscription right here alright we'll just go just comment that out so now that we have that those items placed in this property this is accessible through our template through our HTML now since it's an array what we want to do is we want to loop through it okay and we can do that using the angular ng4 directive so let's go to our HTML items dot component HTML okay we're gonna get rid of this and then we're gonna put a div here and then I just want to check to see if they're actually our are any items because if there are not then I want to do something different I want to say basically there's no items so we're gonna do an NG if so asterisk and gif and we're gonna set that to items question mark dot length and we're going to say if the length is greater than zero okay and then we're going to we're actually going to use something called NG template which was new in angular 4 it wasn't available and angular 2 was one of the one of the few you know on the surface changes so we can say semicolon else no items okay and no items is going to be the name of our template so we're gonna go down below the div and say NG template and we're gonna say hash no items like that alright so if there's no items than whatever we put in here is going to show and I'm just gonna put in an HR and then I'm just gonna put an H five and I'm gonna say there are no items to list okay and then up here if there are items then what do we want to do we basically just want to loop through them so we're going to use a UL all right and we're gonna use an ng for to do the loop so we'll say asterisk ng for we want to say let item of items okay now this items right here what this is talking about is this items property which we set to the items coming in from the service okay hopefully that makes sense so we're gonna loop through those now we're using materialized CSS and for this ul I'm just gonna add a class of collection because it'll make it'll make it look better um yeah collection and then inside here for the lis these are gonna have a class let's say collection - item all right and then here we should be able to get the item filled so remember we have an ID title and a description so let's try to get the title okay we're going to use string interpolation with our double curly braces so we'll say item dot title alright we'll save that let's go to our application and there we go item two and item one so we can get the title so if we want the description what I'll do is put a colon here actually let's put strong tags around the title yeah so we'll put strong tags around it and then we'll put a space and then item dot description like that okay so now we have our item - this is item 2 same thing with item 1 alright and then these colors you're seeing the purple and the yellow that's because they have an extension installed called or as a bracket pair colorizer it helps you not get confused well you know what ending brackets go with what starting brackets things like that so don't worry about the colors if you're not seeing that whoops I didn't want to close that up alright so now we're actually fetching this data from firebase or from our fire store if I were to go to let's get if I were to go here and add another document say title we'll call this item 3 description this is item 3 and save let's go back to our application and you can see it's already there I didn't even have to reload alright so I think this is a good place to stop now that we have basically the hard part is done input you know bringing in angularfire creating our service and all that stuff now one issue we do have is we can't get we don't have the ID if I were to change item title to item dot ID and save you'll see it's not going to give it to us we got in order to get the ID we have to use instead of value changes we have to use snapshot changes and then we also have to add some other stuff we have to add a map and then we have to do this stuff here to get the ID which is a little confusing but I'll show you how to do that so let's put that back to title and save it and yeah we'll continue this in the next video

Channel: Traversy Media

Views: 127,220

Keywords: angular firestore, angular firebase, firestore, angular 4 firestore, firebase firestore

Id: gUmItHaVL2w

Length: 39min 58sec (2398 seconds)

Published: Fri Oct 27 2017