Home Web Development Firebase Cookbook

Firebase Cookbook

By Houssem Yahiaoui
books-svg-icon Book
eBook $35.99 $24.99
Print $43.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $35.99 $24.99
Print $43.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    Firebase - Getting Started
About this book
Do you feel tired just thinking or even hearing about backend technologies, authentication or the tedious task of deployment? Firebase is here to change the way you develop and make your app a first-class citizen of the cloud. This books takes a solution based approach by providing you recipes that would help you understand the features of Firebase and implement them in your existing web or mobile applications. We start-off by creating our first Firebase application and integrating its services into different platforms and environments for mobile as well as web applications. Then we deep dive into Real-time Database and Firebase Storage that allows your users to access data across various devices with realtive ease. With each chapter you will gradually create the building blocks of your application from securing your data with Firebase Rules to authenticating your users with O-Auth. Moving along we would explore modern application development techniques such as creating serverless applications with Firebase Cloud Functions or turning your traditional applications into progressive apps with Service workers. Finally you will learn how to create cross-platform mobile apps, integrate Firebase in native platforms, and learn how to monetize your mobile applications using Admob for Android and iOS.
Publication date:
November 2017
Publisher
Packt
Pages
288
ISBN
9781788296335

 

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
 

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.

 

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

  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):
Figure 1: Firebase main screen
  1. 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
  1. 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.

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

 

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:

  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.

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

 

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:

  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.

  1. 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.
  2. 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:

  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.
About the Author
  • Houssem Yahiaoui

    Houssem Yahiaoui is a Telerik Developer Expert, Google Developer Group Lead, Meetup organizer, Conference Speaker, and Technical blogger among a few things. He has been a developer since the age of 14 and Firebase lover since day one. He's also a passionate JavaScript developer and strongly believes that JavaScript should fix the World's hanger problem.

    Browse publications by this author
Latest Reviews (5 reviews total)
delighted with the books i bought from you.
The book is very informative and good for learning firebase...
I have not used it yet but a quick look showed that the necessary subjects are covered
Firebase Cookbook
Unlock this book and the full library FREE for 7 days
Start now