{"id":1312,"date":"2017-11-13T15:11:27","date_gmt":"2017-11-13T14:11:27","guid":{"rendered":"https:\/\/blog.thecodecampus.de\/?p=1312"},"modified":"2022-03-14T14:29:58","modified_gmt":"2022-03-14T13:29:58","slug":"getting-started-firestore-angularfire2","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/getting-started-firestore-angularfire2\/","title":{"rendered":"Getting started with Firestore and AngularFire2"},"content":{"rendered":"

\"Cloud<\/a><\/p>\n

A few weeks ago, Google has released its new solution for building scalable cloud databases\u00a0\u2014 the Cloud Firestore. It has some nice improvements in comparison to their previous database (which used to be called Firebase but is now referred to as ‘Realtime Database’), like better data structuring and a more powerful querying API. In this post I’m going to go through everything you need to get started with Cloud Firestore in Angular with the official AngularFire2 library. So let’s get started!<\/p>\n

Setup<\/h1>\n

1. installation<\/h2>\n

First things first, let’s set up a project. In this tutorial we want to build a little blog app where a user can manage their blog posts and save them to Firestore. So let’s go ahead and create a new project:<\/span><\/p>\n

ng new blog-app\r\ncd blog-app\r\n<\/pre>\n
Next thing we need to do is install the necessary packages and tools for our project.<\/p>\n
npm install firebase angularfire2 --save<\/pre>\n
In the first line we installed Firebase package itself plus AngularFire2, which is a wrapper that adds some neat Angular-specific features to Firebase. Those packages also include things like Firebase Authentication, Hosting etc. but for now we’re only concerned with Cloud Firestore.<\/p>\n
2. Firebase console<\/span><\/h2>\n
In order to actually use Cloud Firestore we need to create a new Firebase project that our app can connect to. To do this, go to the firebase console<\/a>, click on ‘add project’ and fill in your project name. Once your project is set up, click on the ‘Database’ tab and activate Cloud Firestore.<\/p>\n
The Database will then prompt you to select a security rule setting:<\/p>\n
\"security<\/a><\/p>\n
For now we’ll go with “start in test mode” which allows everyone (including us) to read and write to our database. When your app goes to production you should definitely consider changing your security rules to something more sane (learn more about security rules here<\/a>), but for our purposes this is good enough.<\/p>\n
The last thing we need in our console is our config data. For this, go back to ‘Project Overview’ and click on ‘Add Firebase to your web app’. From the popup you’ll need to copy just the content of the config object. With that we can head back to our project.<\/p>\n
3. project<\/h2>\n
Next we’ll need to provide the config to our Angular application. For this we’ll head to\u00a0app\/src\/environment.ts<\/code>\u00a0 and create a field called\u00a0firebase<\/code>\u00a0in which we’ll copy our config data, like this:<\/p>\n
export const environment = {\r\n  production: false,\r\n  firebase: {\r\n    \/\/your config here\r\n  }\r\n};<\/pre>\n
Lastly we have to pass this config data to AngularFire2. Add the following line to the imports of your app.module.ts:<\/p>\n
 imports: [\r\n    ...\r\n    AngularFireModule.initializeApp(environment.firebase),\r\n ]<\/pre>\n
Now we’re all set and done and can start building our Firestore app!<\/p>\n
creating a CRUD service<\/span><\/h1>\n
We want to create a blog app where one can write posts (create), display them (read), rate them by giving likes (update) and deleting them again (delete). If you want to see the source code you can check out the github repo<\/a>.\u00a0<\/span><\/p>\n
Let’s start by creating a component to manage our posts and a F<\/span>irestore service to add them to our database.<\/span><\/p>\n
ng generate component manage-posts\r\nng generate component view-posts\r\nng generate service post<\/pre>\n
The manage-posts-component will be used to create and delete posts, the view-posts will read and update them.<\/span><\/p>\n
Next we need a model to define how our posts should look like. create a file called post.model.ts with the following content:\u00a0<\/span><\/p>\n
export interface Post {\r\n  title: string;\r\n  content: string;\r\n}<\/pre>\n
We’ll add the likes later. Next let’s build a form in the manage-posts-component to create our posts.<\/span><\/p>\n
<form [formGroup]=\"postForm\" (ngSubmit)=\"save()\">\r\n  <input type=\"text\" placeholder=\"your post title\" formControlName=\"title\">\r\n  <textarea placeholder=\"your post title\" formControlName=\"content\">\r\n<\/form><\/pre>\n
postForm: FormGroup;\r\n\r\nconstructor(private postService: PostService){ }\r\n\r\nngOnInit() {\r\n  this.postForm = new FormGroup({\r\n    title: new FormControl('', Validators.required),\r\n    content: new FormControl('', Validators.required)\r\n  });\r\n}\r\n\r\nsave() {\r\n  const title = this.postForm.get('title').value;\r\n  const content = this.postForm.get('content').value;\r\n  \/* TODO: save data to firestore *\/\r\n}<\/pre>\n
The only thing left to set up is our post service that communicates with Firestore. But before that let’s first talk about how Firestore structures your data.<\/span><\/p>\n
Firestore Data Structure<\/h2>\n
Firestore data is stored within a document<\/span><\/strong>. A document is very similar to a JSON Object – it contains fields which map to values. It has all the regular JSON data types like strings, numbers, booleans etc. plus some additional ones<\/a>.<\/span> Then there’s also collections<\/span><\/strong>.<\/span> Collections are basically just lists of documents that organize your documents and group them together.\u00a0The most important two rules to keep in mind about documents and collections are these:<\/span><\/span><\/p>\n