Firebase services overview - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to initialize Firebase in a web app.

Firebase

const app = initializeApp({ apiKey: [1] });

Drag options to blanks, or click blank then click option'

A"your-api-key"

BapiKey

CfirebaseConfig

Dconfig

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name instead of the string value

Leaving the key empty

You need to provide your actual API key as a string to initialize Firebase.

2fill in blank

medium

Complete the code to get a Firestore database instance.

Firebase

const db = get[1]();

Drag options to blanks, or click blank then click option'

AAuth

BFirestore

CStorage

DFunctions

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStorage() or getAuth() instead

Firestore is the Firebase service for databases, so getFirestore() returns the database instance.

3fill in blank

hard

Fix the error in this Firebase Authentication code snippet.

Firebase

const user = [1].currentUser;

Drag options to blanks, or click blank then click option'

Aauth

Bfirebase.auth().currentUser

Cfirebase.auth

Dfirebase.auth()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling firebase.auth() multiple times

Using firebase.auth without parentheses

You should use the auth instance directly, not call firebase.auth() again if you already have auth.

4fill in blank

hard

Fill both blanks to correctly upload a file to Firebase Storage.

Firebase

const storage = get[1]();
const storageRef = ref(storage, [2]);

Drag options to blanks, or click blank then click option'

AStorage

B"images/photo.jpg"

C"/images/photo.jpg"

DFirestore

Attempts:

3 left

💡 Hint

Common Mistakes

Using Firestore instead of Storage

Including a leading slash in the path

Use getStorage() to get the storage service, and the file path as a string without a leading slash.

5fill in blank

hard

Fill all three blanks to query Firestore documents where age is greater than 18.

Firebase

const q = query(collection(db, [1]), where([2], [3], 18));

Drag options to blanks, or click blank then click option'

A"users"

B"age"

C">"

D"18"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong collection name

Using "18" as a string instead of number

Using wrong comparison operator

Query the "users" collection where the field "age" is greater than (">") 18.

Practice

1. Which Firebase service helps you manage user sign-in and identity verification easily?

easy

A. Analytics

B. Firestore

C. Authentication

D. Hosting

Solution

1. Step 1: Understand Firebase services purpose

   Authentication is designed to handle user sign-in and identity verification.

2. Step 2: Match service to function

   Firestore is for database, Hosting is for web hosting, Analytics is for tracking usage.

3. Final Answer:

   Authentication -> Option C

4. Quick Check:

   User sign-in = Authentication [OK]

Hint: User sign-in? Think Authentication service [OK]

Common Mistakes:

• Confusing Firestore with Authentication
• Thinking Hosting manages users
• Mixing Analytics with sign-in

2. Which of the following is the correct way to initialize Firebase Hosting in your project?

easy

A. firebase init hosting

B. firebase start hosting

C. firebase deploy hosting

D. firebase create hosting

Solution

1. Step 1: Recall Firebase CLI commands

   To set up Hosting, you first initialize it with firebase init hosting.

2. Step 2: Differentiate commands

   firebase deploy hosting deploys but does not initialize; others are invalid commands.

3. Final Answer:

   firebase init hosting -> Option A

4. Quick Check:

   Initialize Hosting = firebase init hosting [OK]

Hint: Init means setup, so use 'firebase init hosting' [OK]

Common Mistakes:

• Using deploy before init
• Using non-existent commands
• Confusing start with init

3. What will the following Firebase code snippet do?

const db = firebase.firestore();
db.collection('users').add({name: 'Anna', age: 25});

medium

A. Update existing user document named Anna with age 25

B. Add a new user document with name Anna and age 25 to Firestore

C. Delete user document named Anna from Firestore

D. Retrieve all users named Anna from Firestore

Solution

1. Step 1: Understand Firestore collection and add method

   The add method creates a new document in the 'users' collection with given data.

2. Step 2: Analyze code effect

   The code adds a new user with name 'Anna' and age 25; it does not update, delete, or retrieve.

3. Final Answer:

   Add a new user document with name Anna and age 25 to Firestore -> Option B

4. Quick Check:

   add() creates new document = Add a new user document with name Anna and age 25 to Firestore [OK]

Hint: add() means create new document in Firestore [OK]

Common Mistakes:

• Thinking add updates existing data
• Confusing add with get or delete
• Assuming it retrieves data

4. You tried to deploy your Firebase Hosting but got an error saying "No public directory found." What is the most likely cause?

medium

A. You did not install Firebase CLI

B. You did not create a Firestore database

C. Your internet connection is down

D. You forgot to specify the public directory during firebase init hosting

Solution

1. Step 1: Understand the error message context

   The error "No public directory found" means Firebase cannot find the folder with website files to deploy.

2. Step 2: Identify cause related to initialization

   This usually happens if you did not set or create the public directory path during firebase init hosting.

3. Final Answer:

   You forgot to specify the public directory during firebase init hosting -> Option D

4. Quick Check:

   Missing public directory = You forgot to specify the public directory during firebase init hosting [OK]

Hint: Set public directory when initializing Hosting [OK]

Common Mistakes:

• Blaming internet connection
• Confusing Firestore with Hosting
• Not installing Firebase CLI

5. You want to track how users interact with your app and also store user profiles. Which two Firebase services should you combine?

hard

A. Firestore and Analytics

B. Hosting and Cloud Functions

C. Authentication and Hosting

D. Realtime Database and Storage

Solution

1. Step 1: Identify service for storing user profiles

   Firestore is a database service suitable for storing structured user profile data.

2. Step 2: Identify service for tracking user interactions

   Analytics tracks user behavior and app usage statistics.

3. Final Answer:

   Firestore and Analytics -> Option A

4. Quick Check:

   Store profiles + track usage = Firestore + Analytics [OK]

Hint: Store data with Firestore, track with Analytics [OK]

Common Mistakes:

• Choosing Hosting for data storage
• Confusing Realtime Database with Analytics
• Mixing Storage with tracking