Firebase

Set Up Firebase Database

To create a Firebase project and register your app, follow these steps:

Step 1: Create a Firebase Project

  1. Go to the Firebase Console.

  2. Click on the "Add project" button.

  1. Enter a name for your project and select your country/region.

  2. Optionally, you can enable Google Analytics for your project.

  1. Click on the "Create project" button.

Step 2: Register Your App

  1. After creating the project, you will landing on your firebase project page.

  1. Choose the platform for your app. For a web app, select the "</>" (Web) icon.

  2. Register your app:

    • Enter a nickname for your app (e.g., "MyWebApp").

    • Optionally, you can set up Firebase Hosting for your app.

  3. Click on the "Register app" button.

Step 3: Get Firebase Configuration

  1. After registering your app, you'll be presented with a Firebase configuration object that looks like this:

    const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

  2. Copy this configuration object as you'll use it in your JavaScript app to connect with Firebase.

Step 4: Integrate Firebase Configuration into Your App

In your JavaScript app (e.g., Vue.js), you'll need to integrate the Firebase configuration. This typically involves creating a file (e.g., firebase.js) and initializing Firebase with the configuration:

// firebase.js

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

const app = initializeApp(firebaseConfig);

export default app;

Replace the placeholder values with the actual values from your Firebase configuration.

Now, your app is connected to your Firebase project, and you can start using Firebase services such as Authentication, Firestore, Realtime Database, and more in your JavaScript app.

Vue JS Firebase CRUD Examples

In this Vue.js component, we had to implement CRUD (Create, Read, Update, Delete) functionalities using Firebase to manage our data.

This documentation covers the primary CRUD operations and additional functionalities implemented in Vue.js component using Firebase.

Examples below are using users and menus database

Add User

Function Signature

async addUser()

Description

This function adds a new user to the Firebase Firestore database.

Input Parameters

None

Usage

<form @submit.prevent="addUser">
  <!-- Form inputs for Company ID, Username, and Password -->
  <button type="submit">Add</button>
</form>

Delete User

Function Signature

async deleteUser(cpid, username)

Description

This function deletes a user from the Firebase Firestore database based on the provided Company ID (cpid) and Username.

Input Parameters

  • cpid (String): Company ID of the user to be deleted.

  • username (String): Username of the user to be deleted.

Usage

<tr v-for="(user, index) in users" :key="index">
  <!-- Display user information -->
  <td>{{ user.cpid }}</td>
  <td>{{ user.username }}</td>
  <td>{{ user.password }}</td>
  <td>
    <!-- Delete button triggers deleteUser function -->
    <button @click="deleteUser(user.cpid, user.username)" class="deleteButton">Delete</button>
  </td>
</tr>

Add Menu

Function Signature

async addMenu()

Description

This function adds a new menu item to the Firebase Firestore database.

Input Parameters

None

Usage

<form @submit.prevent="addMenu">
  <!-- Form inputs for Menu Item, Price, and Availability -->
  <button type="submit">Add</button>
</form>

Delete Menu

Function Signature

async deleteMenu(item)

Description

This function deletes a menu item from the Firebase Firestore database based on the provided item name.

Input Parameters

  • item (String): Name of the menu item to be deleted.

Usage

<tr v-for="(menu, index) in menus" :key="index">
  <!-- Display menu information -->
  <td>{{ menu.item }}</td>
  <td>RM {{ menu.price }}</td>
  <td>{{ menu.available }}</td>
  <td>
    <!-- Delete button triggers deleteMenu function -->
    <button @click="deleteMenu(menu.item)" class="deleteButton">Delete</button>
  </td>
</tr>

Update Menu Availability

Function Signature

async updateAvailable(menu)

Description

This function updates the availability of a menu item in the Firebase Firestore database.

Input Parameters

  • menu (Object): Menu object containing item details.

Usage

<tr v-for="(menu, index) in menus" :key="index">
  <!-- Display menu information -->
  <td>{{ menu.item }}</td>
  <td>RM {{ menu.price }}</td>
  <td>{{ menu.available }}</td>
  <td>
    <!-- Button triggers updateAvailable function -->
    <button @click="updateAvailable(menu)" class="changeButton">Update Availability</button>
  </td>
</tr>

Modify User

Function Signature

async modifyUser()

Description

This function modifies user information in the Firebase Firestore database.

Input Parameters

None

Usage

<form @submit.prevent="modifyUser">
  <!-- Form inputs for Company ID, New Username, and New Password -->
  <button type="submit">Modify</button>
</form>

Update User Password and Username

Function Signature

async modifyUser()

Description

This function updates the password and username of a user in the Firebase Firestore database.

Input Parameters

None

Usage

<tr v-for="(user, index) in users" :key="index">
  <!-- Display user information -->
  <td>{{ user.cpid }}</td>
  <td>{{ user.username }}</td>
  <td>{{ user.password }}</td>
  <td>
    <!-- Button triggers modifyUser function -->
    <button @click="modifyUser" class="changeButton">Modify</button>
  </td>
</tr>

Update Menu Price

Function Signature

async updatePrice(menu, index)

Description

This function updates the price of a menu item in the Firebase Firestore database.

Input Parameters

  • menu (Object): Menu object containing item details.

  • index (Number): Index of the menu item in the array.

Usage

<tr v-for="(menu, index) in menus" :key="index">
  <!-- Display menu information -->
  <td>{{ menu.item }}</td>
  <td>RM {{ menu.price }}</td>
  <td>{{ menu.available }}</td>
  <td>
    <!-- Button triggers updatePrice function -->
    <button @click="showPriceInput[index] = true" class="changeButton">Update Price</button>
    <div v-if="showPriceInput[index]" class="box">
      <input v-model="newPrice[index]" type="text" placeholder="Enter new price" class="form-input">
      <button @click="updatePrice(menu, index)" class="form-button">Confirm</button>
    </div>
  </td>
</tr>

Sort Data

Function Signature

sortBy(key, table)

Description

This function sorts the data in ascending or descending order based on the specified column key.

Input Parameters

  • key (String): Column key by which the data should be sorted.

  • table (String): Indicates whether the data belongs to the 'users' or 'menus' table.

Usage

<!-- Table header with sortable columns -->
<th @click="sortBy('cpid', 'users')">Company ID<button :class="{ 'active': sortKeyUsers === 'cpid' }">{{ sortSymbol('cpid', 'users') }}</button></th>
<th @click="sortBy('item', 'menus')">Item<button :class="{ 'active': sortKeyMenus === 'item' }">{{ sortSymbol('item', 'menus') }}</button></th>
<!-- ... Additional columns ... -->
PreviousVUE JS + DATABASENextPostgreSQL

Last updated