I started working on a Vanilla JavaScript bug tracking app with the guidance of this sweet tutorial by CodingTheSmartWay.com. Simple and easy to follow, this was a great starting point for me.
What you get is a web app with a form to input a bug/issue description, its priority level (low, medium or high), and assign it to someone to handle. Upon submission of the form, the bug ticket will append to the DOM below the form (I incorporated the use of Bootstrap Card to make the issues easier to differentiate from one another) showing the description, ID number, priority level, name of the person it has been assigned to, as well as the issue status (which will initially always be set to "Open"). In addition, each new issue ticket also comes with two buttons - one for "Close" to update the issue status as "Closed", and another one for "Delete" to get rid of that ticket entirely.
The tutorial I went through uses pure JavaScript, and it utilized the localStorage to store data. This worked great, but I quickly noticed something that bugged me whenever clicking the "Close" or "Delete" button....
The page would reload every time!
So if I'm looking at a long list of issue tickets and I just want to mark one "Closed", instead of simply seeing the status portion of that ticket update from "Open" to "Close", the page would reload and have me start back at the very top of the page with the updated list of issue tickets (same problem when clicking the "Delete" button).
After doing some research on this issue, what I learned is that all localStorage calls are synchronous, so that explained my issue with the page reloads.
At this point, I decided I wanted to use a different way to store data so that I could handle that end separately from any immediate changes I want made to the DOM, and that is how I stumbled upon Firebase.
What is Firebase?
Firebase is a Google platform for creating web and mobile applications. It comes with a variety of products, including one for storing data in the cloud called Firebase Realtime Database, where you can store and sync data in real time.
I had never worked with anything cloud-related, so I figured I'd start learning here!
Getting started with Firebase
It was pretty simple getting set up by following along the documentation. A Google account is needed in order to get started.
Let's first navigate to https://console.firebase.google.com and click on "Create a project". We will then be prompted to name the project and accept the Firebase terms before moving on.
The next part asks whether we want to enable Google Analytics (I chose not to as I didn't see any usage for my app), and then we can create your new project. We should now be redirected to the project page that looks something like this:
There are now various developing tools we have access to. For our purposes, we'll focus on the database setup for our web application. Click on the circular "</>" button to the left of the iOs and Android buttons so that we can register our new app. We should now see something like this:
In order to be able to use Firebase development tools in our app, we will need to copy-paste the above scripts into the index.html file, inside and at the bottom of the <body> tag.
Implement Realtime Database
There is a list of various developer tools on the left side of the main screen. Realtime Database can be found under "Develop".
We should now see a button "Create Database" that can be clicked to do so. Before moving forward, we need to decide if we're going to work in "locked mode", which will keep the database private, or "test mode", which will make the database public. Since this is a small app, I went forward in "test mode". After clicking "Enable", we should see a screen with a big empty box. This is where our data will end up being stored.
In order to test out whether data entered in our HTML page will actually update the database, we'll need a form. Here is the one I'm using:
index.html
<h3>Report New Bug:</h3>
<form id="issueInputForm">
<div class="form-group">
<label for="issueDescInput">Description</label>
<input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue">
</div>
<div class="form-group">
<label for="priorityLevelInput">Priority Level</label>
<select id="priorityLevelInput" class="form-control">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
</select>
</div>
<div class="form-group">
<label for="issueAssignedToInput">Assigned To</label>
<input type="text" class="form-control" id="issueAssignedTo" placeholder="Person responsible">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
This is the function I'm using to enter a new issue to track:
main.js
document.getElementById("issueInputForm").addEventListener("submit", saveIssue);
function saveIssue(e) {
e.preventDefault();
const desc = document.getElementById("issueDescInput").value;
const id = chance.guid();
const status = "Open";
const priority = document.getElementById("priorityLevelInput").value;
const assignedTo = document.getElementById("issueAssignedTo").value;
firebase.database().ref('issues/' + id).set({
desc: desc,
id: id,
status: status,
priority: priority,
assignedTo: assignedTo
});
}
The key here is the call to the Firebase database function at the bottom, where we are setting the input values to save the data. This will overwrite any data at this location, as well as all child locations.
If we now go back to the HTML page and try submitting a new issue, we will see that our we no longer have an empty box in Firebase, as the database has been updated:
That's it for now! The next step will be to retrieve the data and append it to the DOM, so I'll be writing about that next.
Happy Coding! :)
Top comments (0)