How to: Storing Feedback Data in “Firebase Real-Time Database”
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');
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.
The submitted data are stored in the Firebase database which is shown in the below image.
In this way, any Angular project can be stored in the Firebase Real-Time Database easily.
