Firebase offers one of the most powerful and popular Database as a Service (DBaaS) solutions available today. It provides a scalable NoSQL cloud database to store and sync data for client and server side development.

Firebase is built on Google infrastructure and scales automatically, for even the largest apps, so you don’t need to worry about scaling your own servers.

Support for Firebase in Ionic and Angular has been growing recently, and in this Ionic and Firebase tutorial, we will show you how to upload data from an Ionic app to a database in Firebase Cloud Firestore.

Firebase Cloud Firestore is a scalable and flexible database for mobile, web, and server development. It keeps your data synchronized across client apps through realtime listeners and also offers offline support for mobile and web so you can build responsive apps that work regardless the Internet connectivity.

At IonicThemes we are big fans of Learning by example, that's why all our Ionic tutorials include a complete and free Ionic code example that you can reuse in your own projects.

We strive to create the best content for Ionic Framework, both tutorials and templates to help the Ionic community succeed. We work towards empowering developers to achieve a free life through coding. That's what motivates us at IonicThemes everyday.

For this Ionic Firebase database tutorial we created a sample app that has a form with three inputs and a submit button. Once the user fills these inputs and submits the data, it gets saved on a Firebase database.

For more information on how to use and validate forms in Ionic framework apps, check out this really complete tutorial Forms and Validations in Ionic.

To interact with the firebase database from our Ionic app, we’re going to use the AngularFire plugin. AngularFire is the official Angular for library for Firebase.

First step, let’s create an Ionic Application. You can either download the Ionic example app we built for this tutorial by clicking in the "GET THE CODE" button from above or you can create your own Ionic app from scratch.

If you’re giving your first steps with Ionic Framework, I suggest you to read Ionic Framework introduction and key components and How to set up your development environment to build Ionic apps.

To install the AngularFire plugin mentioned earlier, we have to run the following command from our console or terminal.

npm install firebase @angular/fire --save

Firebase Configuration

Once you’ve installed AngularFire (the library needed to connect Ionic and Firebase), we have to create a new project in Firebase.

To create your project, log in the Firebase console and follow the steps to create a new project.

Then, enter to your new project dashboard and you will see something like this:

firebase console

Click on "Add Firebase to your web app" to see the credentials of your new Firebase application. We’re going to use these credentials in our Ionic project.

Your credentials will look similar to this:

firebase app setup

The next step is to paste these credentials in our Ionic project. Because we are building an Ionic Angular project, we can use the environment.ts file, located at src/environment/. A project's src/environments/ folder contains the base configuration file, environment.ts, which provides a default environment.

You can add override defaults for additional environments, such as production and staging, in target-specific configuration files.

export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID"
  }
};

Please note that you need to replace the constants from above with your own credentials.

In Ionic 5 Full Starter App - PRO version you will find a ready-made example of how to use Firebase in a real Ionic Framework app. Using a template like this will save you tons of development and design hours and will give your app a proffesional look and feel.

This Ionic Firebase Starter App includes Firebase Authentication and an advanced Firebase CRUD integration with search filters and nested relations.

ionic firebase starter
ionic firebase starter
ionic firebase starter

Well done! We finished with the installation part. Now we’re ready to jump into the implementation of our Ionic app using Firestore Database.

For this tutorial, we created a super simple app that records data with an Angular form using three simple inputs and a submit button that adds the new user to the database.

firebase example app

To perform the operation of saving a new user to the Firebase database, we will create an Ionic service that will contain a method to handle this functionality.

...
import { AngularFirestore } from 'angularfire2/firestore';
...
export class FirebaseService {
  constructor(public afs: AngularFirestore){ }
    addUser(value) {
      return new Promise<any>((resolve, reject) => {
        this.afs.collection('/users').add({
          name: value.name,
          surname: value.surname,
          age: parseInt(value.age)
        })
        .then(
          res => resolve(res),
          err => reject(err)
        )
      })
    }
  }
}

With this method, we’ll save in a "Users" collection the data submitted in the form. The "Users" collection is automatically created in Firestore when the first element is inserted. This means you don’t have to create it manually.

After inserting the new record in the Firestore database, if you go to your Firebase Console, you should see the new User added to the collection like in the following screenshot:

firebase example app

Finally, we are going to explain the function of pressing the "ADD" button to submit the form data to the cloud database.

add(value) {
  this.firebaseService.addUser(value)
  .then(res => {
    let toast = this.toastCtrl.create({
      message: 'User was created successfully',
      duration: 3000
    });
    toast.present();
    this.resetFields();
  }, err => {
    console.log(err)
  })
}

This simple add method receives the values entered in the Ionic Angular form. With these values we invoke the addUser method from the FirebaseService that we saw previously.

So, as you can see it's super easy to build an Ionic Form with Firebase.

In this Ionic firebase database tutorial, we learned how to create and set up a Firebase and an Ionic applications. We went through the steps to save information in a Cloud Firestore databased from an application built with Ionic Framework. Additionally, we learned how to use Forms with Ionic and Firebase.

If you didn’t read the last post where we explained how to use Firebase Storage to upload files, I recommend that you check out How to upload a file to Firebase from an Ionic application,

If you wish to keep learning about Firebase and Ionic, we have been writing about Firebase Authentication and also published a complete Firebase CRUD tutorial.

I hope this tutorial was helpful for you. If you have any questions don’t hesitate to leave a comment on the section below.

Also, you can check out our detailed and professional Ionic Starter App crafted with love and dedication to help you create better apps and supercharge your productivity.