Angular application using Firebase as the Database

Written by Simran Sharma | Oct 14, 2023 5:53:09 PM

Key Takeaways

Discover how Angular and Firebase can seamlessly work together to create dynamic web applications.
Understand how Firebase's serverless architecture ensures your app can grow without infrastructure worries.
Explore Firebase's built-in user authentication and security features to protect your application and data.

What Is a Firebase?

Firebase is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as real-time database, cloud storage, authentication, crash reporting, analytics, and so on. It is built on Google's infrastructure and scales automatically.

There are two different ways you can use Firebase in your projects:

Using Firebase JS SDK
Using React Native Firebase

React Native supports both the JS SDK and the native SDK. The following sections will guide you through when to use which SDK and all the configuration steps required to use Firebase in your Expo projects.

INITIAL SETUP:

1. First, we need node.js. Install it from here if it is not already installed.

2. Install angular cli
npm install -g @angular/cli

3. Go to firebase

4. Sign Up or Log in there
5. From the top right corner, click Go To Console
6. Click Add Project and create a new project with the desired name.

7. From the project overview page, create a new web app.

8. On the bottom of the General tab, keep the config data for future use.

9. Go to the Cloud Messaging tab and Keep the Server Key and Sender ID.
10. On the bottom of the Web Push Certification section, click Generate key pair and keep the new generated key.

Methods Used to Send Messages to Firebase:

addDoc()- In order to use the addDoc() method, we need to import three methods from the Firebase Firestore import statement.

getDatabase() → Firestore database where we want to add data as a document.
collection() → Where we want to add collection name and database references.
addDoc() → Where we actually pass our data along with the collection name and db references.

import { getFirestore, collection, addDoc } from "firebase/firestore";

2. updateDoc()- In order to update an existing document using the updateDoc() method, we need three methods:

getDatabase() → where we want to update a document.
doc() → where we’ll be passing references of the database, collection and ID of a document that we want to update one of its fields.
updateDoc() → where we actually pass new data that we want to replace along with the doc() method.

import { getFirestore, doc, updateDoc } from "firebase/firestore";

3. deleteDoc() - First, import Firestore Database and de-structure the three methods we need:

getFirestore()
doc()
deleteDoc()

import { getFirestore, doc, deleteDoc } from "firebase/firestore";

Adding Firebase to the project:

The Firebase team offers the package @angular/fire, which provides integration between the two technologies.

ng add @angular/fire

This command installs the @angular/fire package and asks you a few questions. In your terminal, you should see something like:

2. Next, we need to create a Firestore database! Under "Cloud Firestore" click "Create Database."

3. After that, create a database in test mode:

4. Finally, select a region:

5. When you create a new task in the user interface and open Firestore, you should see something like this:

How Firestore is used in a Project:

When we send a text in a chat, we will text in a list box of a chat, if we share an image, we will see a Photo with a camera icon in a list box and if we share a file (doc, csv, pdf, xlsx, docx, pptx) we will able to see that filename in a list box of that sending and receiving user.

Messages.component.html

<span *ngIf="!message?.imageUrl"

[innerHTML]="message?.text | detectUrls"></span>

<img class="chat-img cursor-pointer"

[title]="message?.fileName"

(click)="open(0, message?.imageUrl)"

*ngIf="message?.messageType === 'Image'"

[src]="message?.imageUrl" />