In this chapter, we will cover the following recipes:

• Creating your first Firebase app
• Adding Firebase to an existing frontend project
• Integrating Firebase in the backend
• Integrating Firebase in Android applications
• Integrating Firebase in iOS applications

With the changing web and mobile scene, finding a suitable solution and technology that suits these climbing, fast needs is a must. From web development to mobile, the way we treat APIs, data, and security, and how we make users feel as engaged as we possibly can, is an urgent matter.

Going from a traditional setup to the cloud leads to many new patterns and architectures. Backend-as-a-service (BaaS), saves us from tons of useless setup and configuration and makes us think of nothing but our application logic.

Here we are introducing Firebase, a feature-heavy BaaS that will make creating your next awesome project a breeze. It will eliminate many tedious tasks and even manpower and will create your server-side code and give you a more secure, well-built platform that will completely change your thoughts about simplicity and scalability.

So, hold on tight and let's start our journey together by creating our first ever Firebase application.

The process of creating a Firebase application is straightforward and mainly visual. This recipe will demonstrate the process of creating a Firebase application from scratch.

1. As mentioned previously, we will use nothing but our clicking superpower and our favorite browser. First, head directly to the Firebase official website: https://firebase.google.com/. A screenshot of the website page is as follows (Figure 1):

2. Now, go to the top navigation bar and click on the SIGN IN button. This will lead to another page where you will be introduced to the Google authentication page showcased in the following figure, where you can select the most suitable account for your development work (Figure 2):

3. Now, after you select the most suitable Google account, you will find yourself redirected to this link: https://console.firebase.google.com/. You will find all of your Firebase projects here, and you can introduce new projects as well (Figure 3):

Now, we do have two options: whether to import a Google project or simply start a fresh one. Let us learn how to start a new project.

4. After clicking on the Add project plus button, you will be introduced to a model where you can add the Project name and Country/region. Keep in mind that the Project name and Country are variables, so you can change their values to the values that suit you best. You can see the page for creating the project in the following screenshot (Figure 4):

5. After finishing the previous step, you will be redirected to your Firebase dashboard (Figure 5):

Congratulations! You've successfully created your first Firebase project. You have seen that the steps are really simple and are applicable to any Firebase project that you may create now or in the future.

Since Firebase is indeed a backend platform which typically acts as a service, it's not strange to see today's developer ditch the idea of creating a backend in general. They just focus on their frontend, which is actually the main idea behind serverless architecture nowadays.

In order to fully integrate Firebase into our frontend project, which is typically composed of nothing but .html, .css, and .js files, we will need to follow the given steps:

1. Open your favorite code editor and write down the following:

      <script 
        src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js>
      </script>       
      <script> 
          // Initialize Firebase 
          // TODO: Replace with your project's customized 
           code snippet 
          var config = { 
              apiKey: "<API_KEY>", 
              authDomain: "<PROJECT_ID>.firebaseapp.com", 
              databaseURL: "https://<DATABASE_NAME>.firebaseio.com", 
              storageBucket: "<BUCKET>.appspot.com", 
              messagingSenderId: "<SENDER_ID>", 
          };       
          firebase.initializeApp(config); 
      </script>

So, what we've just done is simply imported the Firebase core library from its CDN and initialized it with a configuration object that Firebase gave us out of the box.

2. Now, let's grab our pre-filled configuration form our Firebase project dashboard. The steps are actually easy--login to your Firebase project. (Figure 6):

3. Now, simply click on the magenta-colored button--Add Firebase to your web app--and a new model will appear holding all the required metadata (Figure 7):

4. Now simply copy and paste the code snippet on the screen into your index.html page and you're good to go.

Congratulations, you've successfully integrated Firebase within your Firebase project. Do keep in mind that Firebase services are very modular, so you won't have that heavyweight large dependency that you could simply exploit one--or at most four--resources from.

For the next module, we will see how we can integrate Firebase with our backend application.

In the previous steps, we integrated the Firebase JavaScript client over our web page, and we also created the basic backbone configuration. Following the documentation guidelines, we copied/pasted the configuration script that would hold all the required tokens and API keys that Firebase was going to need in order to support our functionalities.

Firebase is already a complete solution that can simply replace our backend, but sometimes, due to some requirements, you will find yourself integrating Firebase into the already present backend.

In this integration process, we will integrate Firebase services in a NodeJS backend application.

Since we're using NodeJS, integrating Firebase is one module setup away:

1. Head directly to your terminal (cmd on Windows) and write down the following command:

     ~ cd project-directory
     ~/project-directory ~> npm install firebase --save

Now, the preceding command will go and download Firebase locally so you can access it directly using your normal commonJS workflow.

2. Now, you will need to grab yourself a copy of your Firebase project configuration. This step is relatively easy as you can find the required configuration metadata by following the steps mentioned in the previous section, Adding Firebase to an existing frontend project, where we introduced how we can add Firebase to a frontend project.
3. Head directly to your favorite code editor and write down the following:

      // [*] 1: requiring/importing Firebase in our 
         workflow
         const firebase =  require('firebase'); 

      // [*] 2:Initialising our application with our 
          credentials
            var config = { 
            apiKey: "<API_KEY>", 
            authDomain: "<PROJECT_ID>.firebaseapp.com", 
            databaseURL:   
             "https://<DATABASE_NAME>.firebaseio.com", 
            storageBucket: "<BUCKET>.appspot.com", 
          }; 
        firebase.initializeApp(config);

Congratulations, you've successfully integrated Firebase within your backend workflow. I also want to point out that we can extend the workflow we have now using something called Firebase Admin SDK. We will cover how we integrate it and work with it in Chapter 7, Firebase Admin SDK.

Similar to the frontend integration, in our backend we are doing the following:

1. Using a node package manager or npm to install the Firebase commonJS library, where we will find all the necessary APIs.
2. We're requiring/importing Firebase to be part our application, passing it to the configuration object that will hold all our API keys, links, and more.
3. Lastly, we're initializing our application with the configuration object we just created.

With Android Studio 2.0 and up, the Android Studio IDE becomes more Firebase friendly and the process of integrating Firebase's different components is nothing but a pleasing experience.

In order to create a Firebase Android-ready application, you need to make sure that Android Studio is present on your development machine. You can download the suitable version that suits your development machine operating system at https://developer.android.com/studio/index.html.

After successfully downloading the Android Studio, launch it and you will be greeted with the following screen (Figure 8):

Now, let's create a new application. The process is straightforward, and is as follows:

1. When you fill in the application name, application type, and suitable used SDK, your Android application development workflow will look something like this (Figure 9):

2. Now the fun can begin. Head directly to the Android Studio menu bar. Click on the Tools menu option and you will see a menu item that includes many options including Firebase (Figure 10):

3. After clicking on it, go to the right side, to the Assistant section. There you will find the Firebase section, with all the goods that it can offer (Figure 11):

In this section, you will see all that Firebase has to offer--there are different sections and areas as we talked about previously. Firebase is a set of services, which means that each part is a service in itself. This also means that you're free to select whatever service you want to include. For the sake of this chapter, we're taking the Realtime Database as the option to finalize the integration process.

4. After clicking on the Realtime Database option you will get a submenu with a simple explanation or description as to what the service actually does (Figure 12):

5. Now, simply click on the Save and retrieve data link option and you will start a new process that will combine both authenticating as well as download and install the Firebase component in your application (Figure 13):

You will need to configure your project by following the previous instructions. Next, you will need to authenticate and use the Gmail account related to your Firebase project.

6. Once you have clicked on the link, you will need to select the Google account linked to your project. In doing so, you will need to authorize Android Studio to use your Google account. Then, whenever you approve those authorization rules, you will be redirected to the following page (Figure 14):

Congratulations! Android Studio is now fully connected to your Google account. By now, you will see a new model popping up in your Android Studio. As mentioned previously, you will need to either select or create a new Firebase project. In our case, we have already created our awesome project, so we will only need to select it and hit the Connect to Firebase button (Figure 15).

Now, Android Studio will take some seconds to connect to your project and configure your awesome application. Then you will get the following lovely green button from heaven, indicating that everything went smoothly (Figure 16).

Congratulations! Your application is now fully connected and well prepared to host your Firebase logic; all you need to do next is to integrate the service you want the most and simply work with it. We will see all that and more starting from Chapter 11, Integrating Firebase with Android/iOS Natively.

Integrating Firebase our iOS application involves adding the Firebase package similar to any other package you have probably worked with in the past.

In order to create and integrate Firebase within your application, you will need to have a MacBook Pro or one of Apple's computer variants so that you can follow the upcoming steps; you will also need to install Xcode.

In order to create an iOS application, open Xcode and follow the given steps:

1. Create a new project or open your already created project (Figure 17):

2. In our case, we're about to start a new project called firebasecookbook. It's going to be based on the Xcode single-view application project template.

Don't forget to copy that Bundle Identifier, because we will need it in the next step. In this case, our Bundle Identifier is hcodex.firebasecookbook.

3. Go to your Firebase dashboard and click on the Add Firebase to your iOS app button. After clicking on it, you will get a configuration model with some steps that will guide you in your Firebase iOS integration (Figure 19).

4. Remember that bundle id or Bundle Identifier? Copy and paste that ID in its designated place and add a nickname for your application if you wish. Click on the REGISTER APP button.
5. Next, we will need to download a special plist file called the GoogleService-info.plist file. This file will have all the necessary metadata that will be included in your project (Figure 20).

6. Now simply copy and paste that file into your project (Figure 21):

7. After we have finished the file download and file integration, let's just install some dependencies. In this process, we will use CocoaPods as our package manager. Head directly to your project using your terminal:

      ~ cd project-directory
      ~/project-directory ~> pod init

After you initialize your project with CocoaPods, you will find a newly created file named Podfile.

8. Now, you will need to edit the Podfile using your favorite code or text editor and add the following line:

      pod 'Firebase/Core'

9. Now, save the file, go back to your terminal, and write down the following command:

       ~/project-directory ~> pod install 

This command will download and install all the required libraries and modules that Firebase needs to fire up within your application.

10. Now, instead of your regular project, open another special project extension, as the following command shows:

       ~/project-directory ~> open project-name.xcworkspace

11. We're one step behind. Now, in your application, go directly to your AppDelegate and simply import Firebase using the following code snippet:

      import Firebase

12. Now, in the didFinishLaunchingWithOptions method, add the following code:

      FIRApp.configure()

Congratulations! You've successfully integrated Firebase with your iOS application.