Gallery
Share
Explore

Lab Workbook: Using Firebase as the Backend Data Store for your Full Stack Node.js Web Application

Peter Sigurdson
Last edited 157 days ago by System Writer

Introduction

The purpose of this lab workbook is to teach students how to use Firebase as the backend data store for their full stack Node.js web application. We will be using HTML and Node.js to build the application and Firebase as the backend.

Prerequisites

Before starting this lab, you should have the following:
Basic understanding of HTML and Node.js
Access to Firebase console
Node.js installed on your computer

Setting up Firebase

To set up Firebase for your project, you need to follow these steps:
Go to the Firebase console and create a new project.
Click on "Add Firebase to your web app" and copy the config object.
Create a new file called firebaseConfig.js in your project directory and paste the config object into it.
Install the Firebase SDK by running the following command in your project directory:
npm install firebase


In your Node.js code, import Firebase and initialize it using your config object:


const firebase = require('firebase');
const config = require('./firebaseConfig');

firebase.initializeApp(config);

Creating the Frontend


For this lab, we will be creating a simple form that allows users to submit a message. The form will consist of an input field for the message and a button to submit it.

HTML

Create a new file called index.html in your project directory and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>My Firebase App</title>
</head>
<body>
<form>
<input type="text" id="message" placeholder="Type your message here">
<button type="submit" id="submit">Submit</button>
</form>
<ul id="messages"></ul>
<script src="app.js"></script>
</body>
</html>

CSS

Create a new file called style.css in your project directory and add the following code:
ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
margin-bottom: 10px;
}

JavaScript

Create a new file called app.js in your project directory and add the following code:
const messagesRef = firebase.database().ref('messages');

document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const message = document.querySelector('#message').value;
messagesRef.push().set({ message });
document.querySelector('#message').value = '';
});

messagesRef.on('child_added', (snapshot) => {
const message = snapshot.val().message;
const li = document.createElement('li');
li.innerText = message;
document.querySelector('#messages').appendChild(li);
});

Testing the Application

To test the application, run the following command in your project directory:
node app.js

Then, open your web browser and navigate to http://localhost:3000. You should see the form with the input field and button. Enter a message and click the button to submit it. The message should appear in the list below the form.

Conclusion

In this lab, we have learned how to use Firebase as the backend data store for our full stack Node.js web application. We created a simple form that allows users to submit a message and used Firebase to store and retrieve the messages. We also learned how to set up Firebase for our project and how to use the Firebase SDK in our Node.js code.

Instruction Sheet: Setting Up a Firebase Account and Creating a Simple Firebase Database

Resources:

Warehouse Data Model in JSON

⁠
Loading
github.com
⁠
⁠

The best editor to make json is

There are several editors that can be used to make JSON, and the best one depends on personal preference and specific needs. Some popular options include:
• Visual Studio Code: a free and open-source code editor with built-in support for JSON editing and validation
• Sublime Text: a lightweight and customizable text editor with plugins for JSON formatting and highlighting
• Atom: a hackable text editor with a JSON linter and syntax highlighting
• Notepad++: a free and open-source text editor with JSON syntax highlighting and formatting
• Online JSON editors: there are also several online editors available, such as JSON Editor Online and JSON Formatter & Validator .

Introduction

Firebase is a cloud-based platform for building mobile and web applications. It provides a variety of tools and services, including a real-time database, authentication, hosting, and more. In this instruction sheet, we will walk you through the process of setting up a Firebase account and creating a simple Firebase database.

Prerequisites

Before starting, you should have the following:
An internet connection
A web browser (Chrome, Firefox, Safari, etc.)
A Google account (Gmail, G Suite, etc.)

Setting Up a Firebase Account: done

To set up a Firebase account, follow these steps:
Go to the Firebase website (https://firebase.google.com/) and click on the "Get started for free" button.
Sign in with your Google account.
If you don't have a Google account, click on the "Create account" button and follow the prompts to create a new account.
Once you are signed in, click on the "Go to console" button to access the Firebase console.

Creating a Simple Firebase Database

To create a simple Firebase database, follow these steps:
In the Firebase console, click on the "Create project" button and give your project a name.
Once your project is created, click on the "Database" option in the left sidebar.
Click on the "Create database" button and choose "Start in test mode" to create a database in test mode.
Choose a location for your database and click on the "Enable" button to create the database.
Once your database is created, click on the "Realtime Database" option in the left sidebar to access your database.
Click on the "Rules" tab and change the rules to the following:
{
"rules": {
".read": true,
".write": true
}
}
Click on the "Data" tab and click on the "+" button to add a new node to your database.
Enter a name for your node and add some data to it. For example:
{
"name": "John",
"age": 30,
"email": "john@example.com"
}
Click on the "Add" button to save your data.

Checkpoint: Accomplishments so far:

In this instruction sheet, we have walked you through the process of setting up a Firebase account and creating a simple Firebase database. You can now use Firebase to store and retrieve data for your mobile and web applications. Firebase provides a powerful and flexible platform for building modern applications, and we encourage you to explore its many features and capabilities.

Instruction sheet for creating a simple Firebase database with collections for students, classes, and enrollments:

Creating a Firebase Project

Go to the Firebase website (https://firebase.google.com/) and sign in with your Google account.
Click on the "Go to console" button to access the Firebase console.
Click on the "Create project" button and give your project a name. Click "Continue" to create the project.

Creating Collections

In the Firebase console, click on the "Firestore Database" option in the left sidebar.
Click the "Create database" button and choose "Start in test mode" to create a database in test mode.
Choose a location for your database and click on the "Enable" button to create the database.
Click on the "Collections" tab and click the "+ Start collection" button to create a new collection.
Name the collection "students" and click "Next".
Set the Document ID to "001" and add the following fields:
Name: "John Doe"
Age: 21
Gender: "Male"
Country: "India"
Click "Save" to create the document and add it to the "students" collection.
Repeat steps 4-7 to create collections for "classes" and "enrollments".
Add the following sample data to the "students" collection:
Document ID: "002"
Name: "Priya Patel"
Age: 20
Gender: "Female"
Country: "India"
Document ID: "003"
Name: "Raj Singh"
Age: 22
Gender: "Male"
Country: "India"
Document ID: "004"
Name: "Aarti Sharma"
Age: 19
Gender: "Female"
Country: "India"
Add the following sample data to the "classes" collection:
Document ID: "001"
Name: "Mathematics"
Credits: 3
Document ID: "002"
Name: "Science"
Credits: 4
Document ID: "003"
Name: "English"
Credits: 3
Add the following enrollment data to the "enrollments" collection:
Document ID: "001"
Student ID: "001"
Class ID: "001"
Document ID: "002"
Student ID: "001"
Class ID: "002"
Document ID: "003"
Student ID: "002"
Class ID: "003"
Document ID: "004"
Student ID: "003"
Class ID: "002"
Document ID: "005"
Student ID: "004"
Class ID: "001"

Conclusion

In this instruction sheet, we have shown you how to create a simple Firebase database with collections for students, classes, and enrollments. We have also provided some sample data of Indian student names to make it more relatable to your students. With Firebase, you can easily store and retrieve data for your mobile and web applications. We encourage you to explore Firebase's many features and capabilities to build powerful and modern applications.
Introduction
Prerequisites
Setting up Firebase
Creating the Frontend
HTML
CSS
JavaScript
Testing the Application
Conclusion
Instruction Sheet: Setting Up a Firebase Account and Creating a Simple Firebase Database
Resources:
Warehouse Data Model in JSON
The best editor to make json is
Introduction
Prerequisites
Setting Up a Firebase Account: done
Creating a Simple Firebase Database
Checkpoint: Accomplishments so far:
Instruction sheet for creating a simple Firebase database with collections for students, classes, and enrollments:
Creating a Firebase Project
Creating Collections
Conclusion
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.