How to: Storing Feedback Data in “Firebase Real-Time Database”

Sam Joseph
Feb 21, 2019 · 4 min read

Firebase is a mobile and web application development platform. Firebase provides a real-time database and backend as a service. The service provides application developers an API that allows application data to be synchronized across clients and stored on Firebase’s cloud.

In this, we use angular 7 to create the feedback form and store the data in the Firebase database which makes the project to run smoothly.

Getting Started:

1. Create an Angular Feedback Form Project

Install the angular cli in your computer by using the following link — https://angular.io/guide/quickstart

Install the Bootstrap which is a framework to help you design websites faster and easier. Run this command npm install bootstrap in your project directory using your terminal.

Install the Firebase in your angular project, which will support all the features in the Firebase. Run the following command in your project terminal, npm install firebase @angular/fire --save

To store the data in Firebase database you must import the libraries of angular fire2 in the app.module.ts file.

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule} from 'angularfire2/auth';
import { environment } from '../environments/environment';
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule
],

In app.component.ts we also must import the angularfire2 libraries which will make the Firebase Database to get integrated.

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

The complete project is available in GitHub. Please clone or download the code from the following link— https://github.com/slamtrade/feedbackform_firebase.git

2. Firebase Console

In the above steps, you have created the Angular project and now you have to configure the Firebase Console. Before that, we must study about Firebase. Firebase builds apps fast, without managing infrastructure. It is backed by Google, trusted by top apps. Firebase products work great individually, share data and insights, so they work even better together.

Sign-in to your Firebase account by using your Gmail. After login, you have to create a project as shown in the image below.

After creating the project you get the Firebase config file for your angular project by clicking the </> button in your Project Overview page.

After copying the config file you need to paste it in the angular environment.ts file which is inside the environment folder. Even though this code is written in Javascript we can use in Angular project file app.component.tsby using the library given below.

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';constructor(db: AngularFireDatabase) {
this.data = db.list('/data');
Paste the firebase config data

Then create the Real-time Database in Firebase Console by clicking the Create Database button.

In creating the Real-time Database you should select a security rule which will set permission to read and write. We should select ‘Start in test mode’ as a security rule which will allow the data to store in the database.

A database is created after enabling the Start in test mode.

3. Run the Angular Project

After configuring the Firebase in the Console you can run your project in the terminal by running ng serve --open. The running project will get open in your default browser in the localhost:4200. Give the details in the following feedback form fields and click Submit.

Feedback Form

The submitted data are stored in the Firebase database which is shown in the below image.

Feedback data in firebase database

In this way, any Angular project can be stored in the Firebase Real-Time Database easily.

Slamtrade

A Blockchain & Crypto Financial Technology Firm

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store