/

How to Use Firebase Firestore as Your Database

How to Use Firebase Firestore as Your Database

A Step-by-Step Guide to Setting up Firestore for Efficient Data Storage

Are you struggling with storing data for your membership club or any other application? Look no further! In this tutorial, we will discuss how to set up Firebase Firestore as your database. Firestore is a convenient solution that offers generous storage space and network transfer capabilities.

To get started, visit the Firebase website at firebase.google.com. Since Firebase is a Google product, you will automatically be logged in using your Google account credentials.

Once logged in, create a new Firebase project by clicking on “Create a project”. Give your project a name and proceed with the setup.

After creating the project, click on the “Web” icon next to iOS and Android. Enter the app name, and Firebase will provide you with the necessary API keys and sample code.

Next, you need to set up security rules for the database. By default, Firebase provides two options: open to everyone or closed to everyone. Choose the appropriate option based on your requirements. It’s recommended to watch the YouTube playlist on this topic to understand the concepts better.

Now that Firebase is set up, let’s create a collection within Firestore. Collections are containers that hold documents, and each document can contain fields or other collections. Think of collections as similar to tables in SQL databases.

In the Firestore terminology, let’s create a collection called “users” to store data for each user. You can give each user a unique identifier called “id” for easy identification.

Now, let’s move on to the JavaScript part. In the footer of your HTML file, include the Firebase scripts:

1
2
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.1/firebase-firestore.js"></script>

Add the following event listener to ensure the DOM is ready before executing the code:

1
2
3
4
5
<script>
document.addEventListener('DOMContentLoaded', event => {
  // Firebase code will go here
})
</script>

Inside this event listener, add the Firebase configuration object:

1
2
3
4
5
6
7
8
const firebaseConfig = {
  apiKey: "MY-API-KEY",
  authDomain: "MY-AUTH-DOMAIN",
  projectId: "MY-PROJECT-ID"
}

firebase.initializeApp(firebaseConfig)
const db = firebase.firestore()

Next, we need to populate the user IDs in the database. Suppose you have a list of user IDs stored on the backend. You can use a loop to create documents for each user in the “users” collection:

1
2
3
4
5
const list = [/*...my list...*/]

list.forEach(item => {
  db.collection('users').doc(item).set({})
})

Once the documents are created, you can associate different fields or values with each user. For example, you can associate course completion statuses by setting a field to true when a user completes a course. Here’s an example of how to update a document when a button is clicked:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const id = /* the user ID */
const course = /* the course ID */
const docRef = db.doc(`users/${id}`)

docRef.get().then(function (doc) {
  if (doc.exists) {
    const data = doc.data()
    document.querySelector('button')
      .addEventListener('click', () => {
        data[course] = true
        docRef.update(data)
      })
  } else {
    // user does not exist
  }
})

To handle permissions, you can use Firebase’s security rules. By default, Firebase allows read and write access to all documents in the database. To restrict access, modify the security rules as needed.

However, using Firestore directly in the browser exposes your Firebase API keys, allowing anyone to access your database. To overcome this security risk, consider using a custom API on your own server to interact with Firestore.

To implement this, create endpoints on your server, such as /course to set a course as completed and /data to retrieve data associated with a user. Instead of using the Firebase API directly from the browser, make HTTP requests to these endpoints using the Fetch API.

On your server-side code, initialize Firebase using the Firebase package and set up Express to handle CORS. Then, you can retrieve and update data in Firestore based on the HTTP requests received.

We hope this guide helps you in setting up Firebase Firestore as your database. Remember to handle permissions carefully to ensure data security. Happy coding!

Tags: Firestore, Firebase, Database, NoSQL, JavaScript