Introduction To Firebase

-

 Introduction :

In this article we are going to see how to set up a real time database in firebase.

Firebase is a platform provided by google for building the backend for web and mobile app 

It’s categorized as a backend-as-a-service (BaaS) which gives developers the opportunity to create applications without the hassle of setting up the backend.

It also Provides multiple platforms in iOS, android and JavaScript.
 
What is a Firebase?

Firebase is a technology that allows you to create web applications without server-side programming, making development faster and easier. It can control data without thinking about how data is stored and synchronized across different instances of the application in real-time.

It is a mobile platform from Google offering a number of different features. These features allowing users to save and retrieve data to be accessed from any device or browser.Firebase is categorized as a NOSQL database program, which stores data in JSON documents.

 

Firebase provides a feature like

It is Fast, scalable and real time database in the cloud

User Authentication

Cloud Messaging

Storage

Analytics

Firebase Database are real-time as soon as we modify the data in the firebase database it will reflect in the client app immediately without refreshing the page.It works with Android app OS apps and web apps

How to set up a Firebase project?

To set up a firebase project you just need to go to firebase.google.com.

Step 1: To start with Firebase you must have a Google Account. You should sign in with your google account.

Step 2: After logged in successfully click on Firebase Console

Step 3: Here you can see all the projects that you have created, Click on Add new Project

 

Step 4: Give your project a name I am giving “AngularCRUD” so that I can use this one later on. Click on continue

 
 
Step 5: Choose Default account for firebase or if you want to create a separate account then you can create it. 
 
 
 
Step 6:After selecting click on Create Project. 
 
 
Step 7:After Finishing the set up click on Continue  
 
 
 
Step 8:After Finishing you can see project overview page of firebase over there click on "</>"  to add firebase in our web ,you can choose iOS or android . 
 
 
 
Step 8:Now add Firebase to the web app for that we want to give a name here I will use "Angular_crud" click on the ckeck box and register it .
 
 
 
Step 9:Now add Firebase to the web app for that we want to give a name here I will use "Angular_crud" click on the ckeck box and register it .
 
 
 
Step 10:You can see our angular crud is showing in our angularCRUD project and also you can see the features provides by firebase
Authentication,Database,Storage,Hosting ect .For this article we will see its database creation so click on the Database menu on the left side of it. 
 
 
 
Step 11:Go to Real Database and click on it.
 
 
 
 
 
Step 12:Below Image shows some security rules which I will select to start in test mode so that it will allow all read and write to our database.
 
 
 
Step 13:Now we have successfully created the realtime database as you can see it in the below image.
 
 
 
Step 14:We can add in the collection as a name value pair as per shown in the below image.
 
 
 
Summary
 
In this article, we have seen some basic information in firebase and how to set up its real time database,and in my next article we will see CRUD(Create Read Updae Delete) operation using Angular 9 with Firebase.

Comments

Post a Comment

Popular posts from this blog

Create Dynamic Row with Custom Multi Dropdown Checkbox with only two values checked.

-
Image
Create dynamic row and custom multiselect dropdowns using angular 7 Introduction In this article we will learn how we create dynamic row and custom multiselect dropdowns using angular 8.  How it will work ? Angular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.Multi dropdown checkbox is already available in angular called ng-multiselect-dropdown but here we are not using that one but we are creating our own plus we will give the functionality to select only two values in checkbox it means when we try to select more than two values it will remove first value and select third like this we are going to create in this article. Prerequisite Basic knowledge of Angular Visual Studio Code must be installed Angular CLI must be installed Node JS must be installed Step 1   Lets create a angular project using following npm command 1.    ng  new  multiSelectCheckbox
Read more

Sharing Data from child to parent in angular 8 using @viewChild

-
Introduction In this article, we are going to learn how to share data from child to parent component in angular 8 using @ViewChild.   What is a @ViewChild ?   A  ViewChild  is a component if we want to access a child component, directive, DOM element inside the parent component, we use the decorator @ ViewChild () in  Angular .   Prerequisites Basic knowledge of Angular Visual Studio Code must be installed Angular CLI must be installed Node JS must be installed Step 1 Let's create a new Angular project using the following NPM command, ng  new  sharingData     Step 2 Now, let's create a parent component by using the following command, ng g c parent    Step 3 Now, open the parent.component.html file and add the following code in the file,   < div   class = "card" >         < div   class = "card-body pb-0" >             < h4   style = "text-ali
Read more