↓Skip to main content
  1. Blogs/

FireBase

·872 words·5 mins· loading · loading · · ·
Ojasvi Mittal
Author
Ojasvi Mittal
I Develop for Humans
Table of Contents

Everything You Need to Know About Firebase
#

Firebase is a platform developed by Google for creating mobile and web applications. It provides a variety of tools and services to help developers build high-quality apps, gain insights, and grow their user base. In this blog, we’ll cover what Firebase is, its key features, and how to get started with some coding examples.

Table of Contents
#

  1. What is Firebase?
  2. Key Features of Firebase
  3. Getting Started with Firebase
  4. Firebase Coding Samples
  5. Conclusion

What is Firebase?
#

Firebase is a Backend-as-a-Service (BaaS) platform that provides developers with a suite of cloud services to build, improve, and grow their applications. It was initially developed by Firebase Inc. and later acquired by Google in 2014. Firebase integrates with various Google products, making it a powerful tool for app development.

Key Features of Firebase
#

  1. Authentication: Simplifies user authentication with ready-to-use UI libraries and backend services for various authentication methods like email/password, phone number, Google, Facebook, Twitter, and more.

  2. Firestore and Realtime Database: Two types of NoSQL cloud databases that store and sync data in real-time across clients.

  3. Cloud Storage: Allows you to store and serve user-generated content such as photos and videos.

  4. Cloud Functions: Lets you run backend code in response to events triggered by Firebase features and HTTPS requests.

  5. Cloud Messaging: Enables you to send notifications and messages to users across different platforms.

  6. Analytics: Provides insights into user behavior and helps you make informed decisions to improve your app.

  7. Crashlytics: A powerful crash reporting tool that helps you track, prioritize, and fix stability issues in real-time.

Getting Started with Firebase
#

To get started with Firebase, follow these steps:

  1. Create a Firebase Project:

    • Go to the Firebase Console.
    • Click on “Add project” and follow the prompts to create a new project.

  2. Add Firebase to Your App:

    • Select the platform (iOS, Android, or Web) you want to add Firebase to.
    • Follow the setup instructions provided in the Firebase console to integrate Firebase with your app.

  3. Install Firebase SDK:

    • For web applications, you can install Firebase using npm:
      npm install firebase

Firebase Coding Samples
#

Firebase Authentication
#

Sign Up with Email and Password
#

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    console.log('User signed up:', user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error('Error signing up:', errorCode, errorMessage);
  });

Sign In with Email and Password
#

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    console.log('User signed in:', user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    console.error('Error signing in:', errorCode, errorMessage);
  });

Firebase Firestore
#

Add Data to Firestore
#

import { getFirestore, doc, setDoc } from "firebase/firestore";

const db = getFirestore();
const userRef = doc(db, 'users', 'user_id');
setDoc(userRef, {
  firstName: 'John',
  lastName: 'Doe',
  email: 'john.doe@example.com'
})
.then(() => {
  console.log('User added to Firestore');
})
.catch((error) => {
  console.error('Error adding user:', error);
});

Read Data from Firestore
#

import { getFirestore, doc, getDoc } from "firebase/firestore";

const db = getFirestore();
const userRef = doc(db, 'users', 'user_id');
getDoc(userRef)
  .then((docSnap) => {
    if (docSnap.exists()) {
      console.log('User data:', docSnap.data());
    } else {
      console.log('No such document!');
    }
  })
  .catch((error) => {
    console.error('Error getting document:', error);
  });

Firebase Realtime Database
#

Write Data to Realtime Database
#

import { getDatabase, ref, set } from "firebase/database";

const db = getDatabase();
set(ref(db, 'users/user_id'), {
  username: 'JohnDoe',
  email: 'john.doe@example.com',
  profile_picture : 'profile_picture_url'
})
.then(() => {
  console.log('User data saved to Realtime Database');
})
.catch((error) => {
  console.error('Error saving data:', error);
});

Read Data from Realtime Database
#

import { getDatabase, ref, get } from "firebase/database";

const db = getDatabase();
const userRef = ref(db, 'users/user_id');
get(userRef)
  .then((snapshot) => {
    if (snapshot.exists()) {
      console.log('User data:', snapshot.val());
    } else {
      console.log('No data available');
    }
  })
  .catch((error) => {
    console.error('Error getting data:', error);
  });

Firebase Storage
#

Upload File to Firebase Storage
#

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'uploads/file_name');

const file = // ... obtain the file from input element or other source
uploadBytes(storageRef, file)
  .then((snapshot) => {
    console.log('Uploaded a blob or file!', snapshot);
  })
  .catch((error) => {
    console.error('Error uploading file:', error);
  });

Download File from Firebase Storage
#

import { getStorage, ref, getDownloadURL } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'uploads/file_name');

getDownloadURL(storageRef)
  .then((url) => {
    // Insert url into an <img> tag to display the image
    const img = document.getElementById('myimg');
    img.src = url;
  })
  .catch((error) => {
    console.error('Error downloading file:', error);
  });

Conclusion
#

Firebase is a versatile and powerful platform for developing mobile and web applications. With its comprehensive suite of tools and services, developers can focus more on building features and less on managing infrastructure. Whether you’re looking to authenticate users, store data, send notifications, or analyze user behavior, Firebase has got you covered.

By integrating Firebase into your project, you can take advantage of its real-time capabilities, scalability, and seamless integration with other Google services. Start using Firebase today and see how it can accelerate your app development process!