Let’s make a series of entries in which we’ll create an application with Angular 8 and Firebase. The application will be a ToDo App, that is, a task manager app. It will use the Cloud Firestore database, and Firebase Authentication for the login system.

Entradas relacionadas

1. Introduction 
2. Configuring Firebase and Bootstrap in Angular. Understanding Cloud Firestore <– You are here
3. Creating our first component – Click event
4. Our first reactive form
5. Saving and reading data in Cloud Firestore – ngIf and ngFor
6. Introduction to Routing
7. Login system with Angular and Firebase
8. Releasing our Angular App in Azure with VS Code

As I publish the articles, I will be placing the links here above.

Configuring Firebase and Bootstrap in Angular

As we said in the previous post, the database of our application is going to be an instance of Cloud Firestore of Firebase. The good thing about this is that for our purposes it will be a free database in the cloud with which we can work. We are going to configure Firebase in our project.

The first thing we need is to install the dependencies of the packages that we are going to use in our project, for that we are going to use the following command in a terminal in our project:

npm install firebase @angular/fire font-awesome bootstrap @ng-bootstrap/ng-bootstrap –save

With this command we are installing the Firebase, angular fire, bootstrap 4, ng-bootstrap and Font-Awesome libraries:

• We need the Firebase library to work with Firebase;
• We use Angular Fire to work with Firebase in Angular;
• We’ll use Bootstrap 4 for styling;
• ng-bootstrap helps us using bootstrap components by turning them into angular components;
• Font-Awesome can be used to display icons in our application, this is important because bootstrap 4 does not handle icons as it did in previous versions.

Now that we have these dependencies installed in our Angular project, we will go to the Firebase page to create our Firebase project, in order to have our database and, later, login system:

• Let’s go to: https://firebase.google.com/
• We must be authenticated, for example, with an email account. Then we go to Go to Console (It is located at the top right)
• Then we click on Add Project. To the name of the project we will put everything-app.
• We click on Create Project.

Now with this we have created a Firebase project.

Cloud Firestore

Where we are is called the Firebase console of your project:

Let’s create our database:

• We go to Database.
• Click on “Create database” in the Cloud Firestore section
• In the Cloud Firestore Security Rules section, choose “Start in test mode“. With respect to permissions, as this is a test app, and since this is a tutorial of angular, and not Firebase, we will leave the permissions open, so that anyone can read and write data in our database .
• Click on Enable.

We got our database created.

Let’s talk for a moment about Cloud Firestore. Cloud Firestore allows us to have NoSQL databases in the cloud. Cloud Firestore does not work with tables, as is the case with SQL Server, Oracle or MySQL. No. Cloud Firestore works with documents. The idea is that a document is like a text file, whose content is represented in JSON format. Then, each record in our database will be like a text document. The documents are grouped into a structure called collection.

To help visualize this, we will use this analogy:

A collection can be viewed as a folder on our computer.

Collections have a name, which helps us identify what we are going to store in them, just like folders. If we enter into the Users folder, we will see a set of text documents:

Again, each document has a name, and, if we open one of them, we will see within this a structure similar to JSON:

{
“name”: “Felipe Gavilán”,
“age”: 999
}

We see that we have a set of keys and values. This is the information that contains the document, we see that it contains the name of a user, and his age. If we open the other document:

{
“name”: “Claudia Rodríguez”,
“age”: 199,
“address”: “Av Winston Churchill 123”
}

We see that is has name, age and address.

Note that while one document contains two fields, the other has three fields, and there is no problem with this. Because, as we said, Cloud Firestore is a NoSQL database where there is no schema. This means that each document is free to contain information independently of the information of the other documents in the collection.

Configuring Firebase in Angular

We already have a basic understanding of Cloud Firestore. Let’s continue with the development of our application. What we are going to do is to configure Firebase and Cloud Firestore in our Angular application:

• For this we return to the Firebase page, and click on Project Overview.
• Let’s click on the web symbol (</>):

• Choose a nickname for the app
• Click on Register App
• You should get some configuration code for your Web App, something like the following:

• Take this code and put it in your Environment.ts file in your Angular project:

With this, we can access this info from anyplace in your app.

Note: You should also remember to fill this information in the file environment.prod.ts if you plan to publish this app.

The reason to do it “twice” is because we can have a configuration for our testing environment, and another for our production environment, where environment.prod.ts is the production file.

After that, we must go to the app.module.ts file and import two modules, one from Firebase and one from Firestore:

app.module.ts

With this we have configured Firebase in our Angular project. Also, since we are here, we are going to add other modules that we will need during development:

import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;

import { ReactiveFormsModule } from ‘@angular/forms’;

Place these modules in the imports property of our AppModule.

The first, NgbModule, is the ng-bootstrap module. The second, ReactiveFormsModule, will allow us to work with reactive forms.

Configuring Bootstrap

We are also going to place the bootstrap CSS in our project. This will allow us to use the bootstrap style rules in our project. For that, we’re going to go to the angular.json file, and in the styles property we’re going to place the booststrap css:

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
]

Note: It is possible that you’ll have to stop the Angular application and re-do the ng serve, this to reflect the changes we made in the angular.json. If you were not running the project, you do not have to do anything 🙂

We configured bootstrap and firebase in our app. In the next entry, we’ll create our first component.

Summary

• Cloud Firestore is a NoSQL Database that we can easily setup and use
• Angular Fire is a library that helps us use Firebase in Angular Apps

Regards!