[{"id":"ch01lvl1sec01","contentType":"text","title":"Firebase - Getting Started","content":"

Firebase - Getting Started

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

","url":"https://subscription.packtpub.com/book/web-development/9781788296335/1","metaDescription":"","titleSlug":"firebase-getting-started"},{"id":"ch01lvl1sec02","contentType":"text","title":"Introduction","content":"

Introduction

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.

","url":"https://subscription.packtpub.com/book/web-development/9781788296335/1/ch01lvl1sec02/introduction","metaDescription":"","titleSlug":"introduction"},{"id":"ch01lvl1sec03","contentType":"text","title":"Creating your first Firebase application","content":"

Creating your first 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.

How to do it...

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):

Figure 1: Firebase main screen

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):

Figure 2: Firebase - Google authentication

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):

Figure 3: Firebase console

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.

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):

Figure 4: Firebase project creation

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

Figure 5: Firebase project dashboard

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.

","url":"https://subscription.packtpub.com/book/web-development/9781788296335/1/ch01lvl1sec03/creating-your-first-firebase-application","metaDescription":"","titleSlug":"creating-your-first-firebase-application"},{"id":"ch01lvl1sec04","contentType":"text","title":"Adding Firebase to an existing frontend project","content":"

Adding Firebase to an existing frontend project

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.

How to do it...

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:

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.

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):

Figure 6: Firebase Application Overview/Management section.

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):

Figure 7: Firebase project credentials

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.

How it works...

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.

","url":"https://subscription.packtpub.com/book/web-development/9781788296335/1/ch01lvl1sec04/adding-firebase-to-an-existing-frontend-project","metaDescription":"","titleSlug":"adding-firebase-to-an-existing-frontend-project"},{"id":"ch01lvl1sec05","contentType":"text","title":"Integrating Firebase into the backend","content":"

Integrating Firebase into the backend

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.

How to do it...

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

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.

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.
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.

How it works...

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

Using a node package manager or npm to install the Firebase commonJS library, where we will find all the necessary APIs.
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.
Lastly, we're initializing our application with the configuration object we just created.

","url":"https://subscription.packtpub.com/book/web-development/9781788296335/1/ch01lvl1sec05/integrating-firebase-into-the-backend","metaDescription":"","titleSlug":"integrating-firebase-into-the-backend"},{"id":"ch01lvl1sec06","contentType":"text","title":"Integrating Firebase in Android applications","content":"

Integrating Firebase in Android applications

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.

Getting ready

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.

How to do it...

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

Figure 8: Android Studio welcome screen

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

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):

Figure 9: Android Studio after application launch

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):

Figure 10: Integrating Firebase in our Android application

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):

Figure 11: Android Firebase integration - part one

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.

The integration process used in this example is applicable to all sorts of Firebase services in the exact same way.

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):

Figure 12: Android Firebase integration - part two

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):

Figure 13: Firebase project integration - part three

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.

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):

Figure 14: Firebase project integration - part four

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).

Figure 15: Firebase project integration - part five

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).

Figure 16: Firebase project integration - part six

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.

","url":"https://subscription.packtpub.com/book/web-development/9781788296335/1/ch01lvl1sec06/integrating-firebase-in-android-applications","metaDescription":"","titleSlug":"integrating-firebase-in-android-applications"},{"id":"ch01lvl1sec07","contentType":"text","title":"Integrating Firebase in iOS applications","content":"

Integrating Firebase in iOS applications

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

Getting ready

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.

How to do it...

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

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

Figure 17: Xcode project opening/creation

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.

In our application--or when it comes to an example provided in this book regarding Firebase and iOS--we will work with Swift instead. It's just a personal preference, but you can use the one that suits you best.

Figure 18: Xcode project creation

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.

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).

Figure 19: Xcode project creation

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.
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).

Figure 20: Firebase GoogleService-info.plist download

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

Figure 21: Firebase GoogleService-info.plist in our application.

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

To download and install CocoaPods on your macOS development machine, please follow the steps mentioned on the official website: https://guides.cocoapods.org/using/getting-started.html.

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

The Podfile is a specification that describes the dependencies of the targets of one or more Xcode projects.

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

      pod 'Firebase/Core'

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.

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

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

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

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

      FIRApp.configure()

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

","url":"https://subscription.packtpub.com/book/web-development/9781788296335/1/ch01lvl1sec07/integrating-firebase-in-ios-applications","metaDescription":"","titleSlug":"integrating-firebase-in-ios-applications"}]

Firebase Cookbook

By : Houssem Yahiaoui

Firebase Cookbook

By: Houssem Yahiaoui

Overview of this book

Related Content you might be interested in

Current Title:

Firebase Cookbook

Mastering Firebase for Android Development

Serverless Web Applications with React and Firebase

Vue.js 2 and Bootstrap 4 Web Development