UIST St.

Paul The Apostle

Final Project
Cloud Computing Technologies

Integrating Web Applications into the

Cloud with Firebase

Students Mentor
Hristijan Stevanoski, CSE, 666 Assoc. Professor
Martin Vrencovski, CSE, 680 Ustijana Rechkoska-Shikoska, Ph.D.

January 2020, Ohrid

Abstract
In this paper we explore the features that firebase offers and do practical
integration of a web app into the cloud. We chose to create a simple note taking web
app that we will integrate into the cloud and connected to firebase. Firebase is a
robust real time database that runs on the cloud. This paper covers the complete
steps required to integrate a web app into the firebase cloud as well as features
offered by the google cloud platform like google analytics that help us track user
behaviour of our app.

Keywords: Firebase, Firestore, Web App, Notes, Google Cloud Platform

2
Table of Contents

1. Introduction 4

2. Related Work 6
2.1 Evernote 6
2.2. Google Keep 7
2.3 OneNote 7
3. Cloud Computing Technologies 9
3.1 Types of access 9
3.2 Types of clouds 10
3.2.1 Single Site Clouds 10
3.2.2 Geographically Distributed Cloud 11
3.3 Service models 11

4. Integration into the cloud 13

4.1 Environment setup 13
4.2 Firebase Cloud Service 15
4.3 Firestore 18
4.4 Storage 21
4.5 Cloud Integration 23
4.5.1 Web Integration 23
4.5.2 Retrieving Notes 27
4.5.3 Real Time Updates 28
4.5.4 Notes and Images Manipulation 32
4.5.5 Search Functionality 35

5. Testing and Results 37

5.1 Quality of Experience (QoE) 37
5.2 Quality of Service (QoS) 41

6. Conclusion 46

7. Future Work 47

8. References 48

3
1. Introduction
Both web and mobile applications have become very complex throughout the
years. This is especially true for the back-end part of an application, which takes
care of many tasks - connecting to a database, providing data validation services,
managing user authentication, integrating user authentication with third-party
services with protocols and frameworks like OAuth2, providing storage facilities,
enabling push notifications, enabling real-time communication facility for users,
monitoring application usage and providing statistics, performing analysis,etc.

One of the benefits of cloud systems is the help they provide developers for
writing applications by offering developer-friendly environments that take care of
certain parts of an application. Thus, by integrating one or multiple cloud
technologies, a developer can now write back-end application logic easier than ever.
Cloud technologies offer great reliability, performance and automatic scalability. For
example, with services like Pusher, a developer can integrate collaboration &
communication features in their web and mobile apps.

Fig 1.1 - Firebase logo

Firebase is a mobile and web application development platform by Google. It

offers a surprising number of features, such as real time database, storage, hosting,
authentication, notifications, cloud functions, cloud messaging, analytics, crash
reporting, remote application configuration and much more. Developers don’t need to
manage servers or write APIs.

4
 Fig 1.2 - Firebase features

Firebase is written generically, so that developers can modify it to suit most of

their needs. Firebase can power an application’s backend, including data storage,
user authentication, static hosting and more. Thus, developers are able to focus on
creating user interfaces.

Firebase offers great experience and ease of use. Because of that, it gets
more and more used in different technologies, such as mobile, desktop and web
applications. Since all these nowadays are built mainly with JavaScript tools and
framework, Firebase is easy to integrate in any of them.

5
2. Related Work
Note-taking apps are the online equivalent of notebooks, and because they're
digital, they can do more for a person than paper ever could. Most can store a
person’s notes in the cloud and sync them across multiple devices. Note-taking apps
also include text search, so in a matter of seconds, one can find whatever notes they
need. The best note-taking apps also let people take pictures, upload files, record
audio, and clip pages from the web. There are many note taking applications out
there. Examples of such applications include Evernote, Google Keep, Microsoft
OneNote, Simplenote, Apple Notes, Notion, Boostnote.

2.1 Evernote
Evernote is one of the oldest and most fully-featured note taking applications.
Evernote lets you create both simple and complex workflows using a combination of
notebooks, notes and tags to keep everything organized.

Fig 2.1.1 - Evernote user interface

One of its best features for gathering research is the Web Clipper extension
(supported in Chrome, Firefox and Safari), which lets you save entire webpages -
including text, images and PDFs - with a single click. Notes can be accessed on
laptops, mobile devices and the web, so you're rarely left with a situation where you

6
can't retrieve what you've saved. Other features include the ability to set reminders,
present notes PowerPoint-style, and merge them together.

2.2. Google Keep

Notes don't live in a silo. Instead, they remind you to send an email to a
long-distance friend or serve as inspiration for your next book. Google understands
this and created Google Keep to help your notes flow seamlessly across scenarios
and apps.

Fig 2.2.1 - Google Keep user interface

Google Keep is a simple note taking application, from both perspectives -

visually and how it operates. Notes can be given labels, pinned to the top, given a
color, paired with reminders and collaborated on in real time. Additionally it also
offers speech-to-text functionality so you can dictate notes on the go rather than
have to write. There's also the ability to set up check boxes for lists to work through.

2.3 OneNote
Like Evernote, OneNote lets you sync notes across various devices. Microsoft
OneNote is a fully-featured note-taking app that can do more than just about any
other, save for Evernote. Plus, it's free. The two square up rather equally, though

7
they couldn't be more different in their look and feel. While Evernote looks squarely
like standard business software, Microsoft OneNote mimics paper.

Fig 2.3.1 - OneNote user interface

When you create a new note, you can click anywhere on the page and add
content to that spot, just as if you were working with paper. You can choose a
background for your notes that looks like textured or lined paper or use templates for
meeting notes and more. OneNote also mimics the classic binder, with notebooks,
sections, and tabs for organizing your notes.

8
3. Cloud Computing Technologies
Cloud computing refers to the use of computing resources (hardware and
software) that enable the delivery of cloud computing services such as: SaaS
(software as a service), PaaS (platform as a service) and IaaS (infrastructure as a
service) over a network (usually the Internet). The term ​cloud is generally used to
describe data centers available over the Internet. Cloud computing allows users to
access computer system resources such as storage and computing power on
demand. Clouds support diverse number of applications, from email, web
conferencing and customer relationship management systems to gaming and
database management.

3.1 Types of access

There are four models which describe how the cloud is accessed:
1. Public cloud
A public cloud allows systems and services to be accessible to the general
public. Because of their openness, they are less secure, however, they are
more reliable, location independent and more cost effective than other types
of clouds. Examples of public clouds include: Amazon Elastic Compute Cloud
(EC2), IBM's Blue Cloud, Sun Cloud, Google AppEngine, Windows Azure
Services Platform, etc.
2. Private cloud
Unlike public clouds, private clouds allow systems and services to be
accessible within an organization. A private cloud is more secure and more
customizable than a public cloud. However, it is less cost effective, less
scalable and it is geographically restricted.
3. Hybrid cloud
A hybrid cloud is a mixture of public and private clouds. Critical activities are
performed in the private part of the cloud, while the non-critical activities are

9
 performed in the public part of the cloud. Examples of hybrid cloud include
Amazon Web Services (AWS) and Microsoft Azure.
4. Community cloud
A community cloud refers to a cloud infrastructure shared by a community of
multiple organizations that generally have a common purpose. An example of
a community cloud is OpenCirrus.

3.2 Types of clouds

Depending on how the clouds are located, there are two types of cloud
systems - a single site cloud and geographically distributed clouds.

3.2.1 Single Site Clouds

A single site cloud refers to a cloud infrastructure located in a data center - a
building which houses a lot of running computer servers and provides fast network
connections between servers to communicate and process a lot of data, and some
for talking to the outside world. Computer nodes are usually grouped into racks, for
the sake of space economics. The data center usually has its own network topology.
Back-end nodes are concerned with data processing, while front-end are concerned
with submitting and receiving client requests.

Fig 3.2.1 - Computing nodes grouped into racks in a data center

10
3.2.2 Geographically Distributed Cloud
Cloud infrastructures are often dispersed into multiple geographical locations.
Such is the case of distributed clouds, where data centers are located in multiple
parts of the world. In such a case, the applications and data are served from multiple
geographical locations. Geographically distributed clouds are complex systems
which face crucial problems such as offering reliability, location independence,
scalability and security.

Fig 3.2.2 - Geographically distributed data centers

3.3 Service models

Service models are reference models on which the cloud computing is based.
There are three basic service models:
1. Infrastructure as a Service (IaaS)
IaaS s a cloud-computing model in which a vendor provides users access to
computing resources such as servers, storage and networking. Organizations
use their own platforms and applications within a service provider’s
infrastructure. In IaaS, typically virtual machines are used using hypervisors
such as Xen, Oracle VirtualBox, Oracle VM, Hyper-V etc. For virtual machine
management and creation, IaaS involves the use of a cloud orchestration
technology like OpenStack, Apache Cloudstack, OpenNebula etc. Examples
of IaaS include: AWS EC2, Rackspace, Google Compute Engine (GCE),
Digital Ocean and Magento 1 Enterprise Edition.

11
2. Platform as a Service (PaaS)
PaaS is a cloud computing model that provides users with a cloud
environment in which they can develop, manage and deliver applications. In
addition to storage and other computing resources, users are able to use a
suite of prebuilt tools to develop, customize and test their own applications.
Examples of PaaS include: AWS Elastic Beanstalk, Heroku, Windows Azure
(mostly used as PaaS), Force.com, OpenShift, Apache Stratos and Magento
Commerce Cloud.
3. Software as a Service (SaaS)
SaaS is a cloud computing model that provides users with access to a
vendor’s cloud-based software. Users do not install applications on their local
devices. Instead, the applications reside on a remote cloud network accessed
through the web or an API. Through the application, users can store and
analyze data and collaborate on projects. Examples of SaaS include:
BigCommerce, Google Apps, Salesforce, Dropbox, MailChimp, ZenDesk,
DocuSign, Slack and Hubspot.

Fig 3.3 - Cloud service models

12
4. Integration into the cloud
In this section, each step of both creation of the application and its integration
into the cloud will be discussed.

4.1 Environment setup

First, we are going to start with creating a project locally. The directory name
will be “firebase” and the application is going to initially consist of three files:
1. index.html -​ will contain all the HTML code of the application
2. style.css -​ all the CSS of the application is going to contain
3. app.js -​ the application’s JavaScript code

Then, we are going to implement the initial Bootstrap code which will help us
define the initial look of the application. Because the project files are too long, the
irrelevant code will be replaced with comments.

Fig 4.1.1 - The application design

Next, we are going to set up our project in Firebase. To do so, we are going to
navigate to ​https://firebase.google.com and login with a Google account. When the
“Create a project” button is clicked, the following page is opened:

13
 Fig 4.1.2 - The first step of the project creation

It consists of three steps - the name of the project, choosing whether to enable
Google Analytics for the project and Google Analytics configuration. The application
we are going to build is going to be named “firenotes”.

When the project is created, by clicking on the “Continue” button, we are

redirected to the dashboard of the project. On the sidebar, we are offered various
features that Firebase offers, grouped into categories.

14
 Fig 4.1.3 - The project dashboard

4.2 Firebase Cloud Service

Firebase is a mobile platform from Google offering a number of different
features which revolve around cloud services, allowing users to save and retrieve
data to be accessed from any device or browser. This can be useful for things such
as cloud messaging, hosting, crash reporting, notifications, analytics and even
integrating advertisements in applications using AdMob.

Firebase handles the backend online element for applications, allowing

developers to focus on the front-end UI and functionality parts. All this is done
through a single SDK with easy-to-use APIs. This removes the need to create your
own server-side script using PHP and MySQL, or a similar set-up like Node.js and
MongoDB.

One downside of Firebase is that developers rely on a third-party solution. If

Google should ever abandon Firebase, then developers would be forced to migrate
their data and rebuild their application, which could require a lot of time. Another
potential concern is that this is that Firebase uses a real-time database and all data

15
is automatically synchronised across all users – rather than being stored on the
phone first and then ‘sent’. While this certainly has advantages, it means that an
internet connection is necessary at all times for your app to work.

Fig 4.2.1 - Firebase features and their categories

Firebase tools work together so that mobile teams can improve app
performance while gaining valuable user insights. Firebase APIs are packaged into a
single SDK so we can expand to more platforms and languages with Firebase as
your unified backend. Firebase projects are backed by Google Cloud Platform,
making them scaleable up to millions of users.

Integrating Firebase in cross platform, native or hybrid mobile and web

applications is done by using the Firebase SDKs. By offering various SDKs, firebase

16
lets developers integrate it into an immense number of platforms, such as Android,
iOS, web through the JavaScript, the Unity3D engine and C++ projects. One can
also connect Firebase to their existing backend using server-side libraries or REST
APIs, e.g., a Node.js back-end API.

Fig 4.2.2 - Companies using Firebase

Firebase offers three pricing plans - free, $25/month and a plan that works on
the “pay as you go” principle. “Pay as you go” means dynamic usage of resources.
Developers pay depending on their application usage of resources. Each feature of
firebase has its limits. The “pay as you go” plan offers all the features available from
Firebase, as well as the ability to use other Google Cloud Platform services into the
application.

Fig 4.2.3 - Firebase pricing plans (an excerpt)

17
4.3 Firestore
Cloud Firestore is a NoSQL document database that lets you easily store,
sync, and query data for your mobile and web apps  at a global scale. Firestore
keeps its data inside objects called documents. These documents consist of
key-value pairs and can contain any kind of data, from strings to binary data to even
objects that resemble JSON trees (Firestore calls it as maps). The documents, in
turn, are grouped into collections.

Firestore database can consist of multiple collections that can contain

documents pointing towards sub-collections. These sub-collections can again
contain documents that point to other sub-collections, and so on. One can build
hierarchies to store related data and easily retrieve any data that they need using
queries. Firestore offers writing queries, which are a powerful feature of Firestore.

Our application is going to need Firestore. To set up the Firestore feature, we

have to go to the “Database” section in the dashboard. Upon clicking the “Create
database” button, we are shown a dialog. In this dialog, we have two options -
production mode and testing mode. This has to do with read/write access to the
application. Because the application is in development mode and we are not going to
implement authentication, we will go with the ​test mode option. In a real application,
we'd want to set much more fine-grained rules to prevent undesirable data access or
modification. The second step of the set up is the location of the Cloud Firestore,
which has to do with where (at which location) the Firestore data will be stored.

18
 Fig 4.3.1 - Creating the Firestore database, step 1/2

When the setup is finished, we are left with the following screen:

Fig 4.3.2 - Firestore Database dashboard

19
 We can now create our first collection - ​notes​, where we are going to store all
the notes in the application. As in any NoSQL database, all fields in a document are
dynamic. To do so, we can click on the “Create collection” button, which will open the
dialog for creating a collection and inserting its first document.

Fig 4.3.3 - Creating the notes collection

20
 Fig 4.3.4 - Several data types are available for each field

Fig 4.3.5 - The first document in the notes collection

4.4 Storage
Cloud Storage for Firebase is a powerful, simple, and cost-effective object
storage service. The Firebase SDKs for Cloud Storage add Google security to file

21
uploads and downloads for Firebase applications. Developers can use Google SDKs
to store images, audio, video, or other user-generated content. The Firebase SDKs
for Cloud Storage integrate seamlessly with Firebase Authentication.

Mainly, developers use the Firebase SDKs for Cloud Storage to upload and
download files directly from clients. If the network connection is poor, the client is
able to retry the operation right where it left off, saving your users time and
bandwidth.

Our application is going to enable users to upload an image inside their notes.
Therefore, we are going to have to set up Cloud Storage from the “Storage” section.
Upon clicking the “Get started” button, we are offered the following dialog:

Fig 4.4,1 - Setting up Cloud Storage, step 1/2

In the first step, the default rules are given, which doesn’t permit file upload
and download from unauthenticated users. Because our application won’t integrate
the authentication feature, we are going to have to enable uploading and
downloading files from unauthenticated users by changing the Cloud Storage rules:

22
 Fig 4.4.2 - Allowing uploading and downloading files from unauthenticated users

4.5 Cloud Integration

Firebase is easy to integrate on iOS, Android, and the Web. Firebase helps us
ship cross-platform apps with ease. Firebase APIs are packaged into a single SDK
so we can expand to more platforms and languages with Firebase as a unified
backend.

4.5.1 Web Integration

To integrate our application into Firebase, we have to first click on the “Web”
button in the “Project Overview” section in the dashboard:

23
 Fig 4.5.1 - The first document in the notes collection

We are now redirected to the following page:

Fig 4.5.2 - Firebase integration, step 1/2

24
 Fig 4.5.3 - Firebase integration, step 2/2

We are now given code to the main Firebase SDK script which we can
integrate into our application HTML code. This also includes Firebase Analytics,
which is discussed in the testing and results section. After integrating the SDKs for
firestore and storage, our HTML code now looks like this:

<!​DOCTYPE​ ​html​>
<​html​ ​lang​=​"en"​>
​<​head​>
​<​meta​ ​charset​=​"UTF-8"​ />
​<​meta​ ​name​=​"viewport"​ ​content​=​"width=device-width,
initial-scale=1.0"​ />
​<​meta​ ​http-equiv​=​"X-UA-Compatible"​ ​content​=​"ie=edge"​ />
​<!-- Bootstrap CSS file -->
​<​link​ ​rel​=​"stylesheet"​ ​href​=​"style.css"​ />
​<​title​>​Fire Notes​</​title​>
​</​head​>
​<​body​>
​<!-- Navigation -->
​<!-- Search form -->
​<!-- Modal for showing and editing a note -->
​<!-- Modal for creating a note -->

25
 ​<!-- Other Scripts -->
​<!-- Bootstrap Scripts -->

​<!-- The core Firebase JS SDK is always required and must be listed
first -->
​<​script
src​=​"https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"​></​script
>
​<​script
src​=​"https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"​></
script​>
​<​script
src​=​"https://www.gstatic.com/firebasejs/7.5.0/firebase-storage.js"​></​sc
ript​>

​<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
​<​script
src​=​"https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"​></
script​>

​<​script​>
​// Your web app's Firebase configuration
​var​ ​firebaseConfig​ ​=​ ​{
apiKey​:​ ​"AIzaSyCFcUfrR2Cnv7hfV3UqyyPqNdMWpiiKKAM"​,
authDomain​:​ ​"firenotes-70a89.firebaseapp.com"​,
databaseURL​:​ ​"https://firenotes-70a89.firebaseio.com"​,
projectId​:​ ​"firenotes-70a89"​,
storageBucket​:​ ​"firenotes-70a89.appspot.com"​,
messagingSenderId​:​ ​"972354931156"​,
appId​:​ ​"1:972354931156:web:de2ea0856e1595ef7bee41"​,
measurementId​:​ ​"G-QEMDHLFFD0"
​};
​// Initialize Firebase
​firebase​.​initializeApp​(firebaseConfig);
​firebase​.​analytics​();

​const​ ​db​ ​=​ ​firebase​.​firestore​();

​const​ ​storageRef​ ​=​ ​firebase​.​storage​().​ref​();

26
 ​</​script​>

​<​script​ ​src​=​"app.js"​></​script​>
​</​body​>
</​html​>
index.html

4.5.2 Retrieving Notes

We can now access the db and storageRef constants in the ​app.js file and
any other file which is included in the ​index.html file. Interacting with the database
and storage reference constants is quite simple when one follows the
documentation. In the following code, we are getting all elements from the notes
collection and outputting them to the console:

db​.​collection​(​"notes"​)
​.​get​()
​.​then​(querySnapshot​ ​=>​ ​{
​querySnapshot​.​forEach​(doc​ ​=>​ ​{
​console​.​log​(​doc​.​data​());
​});
​});
app.js

Each element has other properties and methods. For example, ​doc.id would give us
the ID of the document in the collection, while ​doc.data() gives us the element’s
JSON tree. By adding notes through the Firebase dashboard and then refreshing the
page, we can see the following result:

Fig 4.5.4 - console.log result of the two notes added through the Firebase dashboard

27
4.5.3 Real Time Updates
The Firestore database reference defined in the ​index.html file offers a
feature of real time updates whenever something changes. We can make use of that
with the following code.

db​.​collection​(​"notes"​)
​.​orderBy​(​"created_at"​,​ ​"asc"​)
​.​onSnapshot​(​function​(querySnapshot)​ ​{
​// re-getting all notes on any change
​querySnapshot​.​forEach​(
​function​(doc)​ ​{
​console​.​log​(
​doc​.​data​()
​);
​}
​);
​});
app.js
The ​onSnapshot method fires the callback function provided as its parameter
every time there is a change in a document in the collection. In this example, we are
re-getting all note whenever there is a change in a document.

Fig 4.5.5 - The second note got updated through the Firebase dashboard

This approach is quite impractical. If we were to have quite a large number of

notes and only one of them updates, re-rendering HTML elements will undoubtedly
have a performance impact on the application. For this reason, Firebase offers a

28
docChanges function which returns an array of changes. A change happens when a
document gets added, modified and deleted from a collection. By iterating through
the array, using the type field in an ​if or a ​switch statement, we can check what
change occured.

db​.​collection​(​"notes"​)
​.​orderBy​(​"created_at"​,​ ​"asc"​)
​.​onSnapshot​(​function​(querySnapshot)​ ​{
​// only getting the changed note and the type of change
​querySnapshot​.​docChanges​().​forEach​(​function​(change)​ ​{
​if​ ​(​change​.​type​ ​===​ ​"added"​)​ ​{
​console​.​log​(​"New note: "​,​ ​change​.​doc​.​data​());
​}
​if​ ​(​change​.​type​ ​===​ ​"modified"​)​ ​{
​console​.​log​(​"Modified note: "​,​ ​change​.​doc​.​data​());
​}
​if​ ​(​change​.​type​ ​===​ ​"removed"​)​ ​{
​console​.​log​(​"Removed note: "​,​ ​change​.​doc​.​data​());
​}
​});
​});
app.js

This code now would yield the following result:

Fig 4.5.6 - The second note got updated through the Firebase dashboard

When we refresh the page, all the notes are considered as new notes. That’s
logical, since we have not loaded them before. When a note gets updated or deleted,
we only get a change about that note alone. This is a more practical approach. Our
code can now be changed accordingly to (re) render the notes on any change:

29
db​.​collection​(​"notes"​)
​.​orderBy​(​"created_at"​,​ ​"asc"​)
​.​onSnapshot​(​function​(querySnapshot)​ ​{
​querySnapshot​.​docChanges​().​forEach​(​function​(change)​ ​{
​if​ ​(​change​.​type​ ​===​ ​"added"​)​ ​{
​appendNote​(​change​.​doc​.​id​,​ ​change​.​doc​.​data​());
​}
​if​ ​(​change​.​type​ ​===​ ​"modified"​)​ ​{
​modifyNote​(​change​.​doc​.​id​,​ ​change​.​doc​.​data​());
​}
​if​ ​(​change​.​type​ ​===​ ​"removed"​)​ ​{
​deleteNote​(​change​.​doc​.​id​);
​}
​});
​});
app.js

We are now going to write the functions which will help with appending,
modifying and removing a note when a respective change occurs. Because the file is
too long, only relevant parts will be shown. Interacting with Bootstrap card elements
will not be shown.

...
let​ ​notes​ ​=​ ​[];
...
function​ ​appendNote​(id,​ ​note)​ ​{
​notes​.​push​({
id​:​ ​id,
​...​note
​});

​renderSingleDOMNote​(id,​ ​note);
}
...
app.js - appendNote function

30
 We are keeping a notes array for keeping all the notes received from
Firebase. We need this array for certain interactions with DOM elements. In the case
of receiving a new note, we are inserting it into the notes array and rendering to the
DOM.

...
function​ ​modifyNote​(id,​ ​modifiedNote)​ ​{
​let​ ​modifiedNoteIndex​ ​=​ ​notes​.​findIndex​(n​ ​=>​ ​n​.​id​ ​==​ ​id);
​notes[modifiedNoteIndex]​ ​=​ ​{
id​:​ ​id,
​...​modifiedNote
​};

​let​ ​noteDOMElement​ ​=
notesContainer​.​querySelector​(​`[data-id="​${​id​}​"]`​);
​let​ ​noteImageDOMElement​ ​=
noteDOMElement​.​querySelector​(​"img.note-img"​);
​let​ ​noteTitleDOMElement​ ​=​ ​noteDOMElement​.​querySelector​(​".card-header
h5"​);
​let​ ​noteContentDOMElement​ ​=​ ​noteDOMElement​.​querySelector​(​".card-body
p"​);

​noteTitleDOMElement​.​textContent​ ​=​ ​modifiedNote​.​title​;

​noteContentDOMElement​.​textContent​ ​=​ ​modifiedNote​.​content​;

​if​ ​(​!​modifiedNote​.​image​ ​&&​ ​noteImageDOMElement)​ ​{

​noteImageDOMElement​.​remove​();
​}​ ​else​ ​{
​if​ ​(noteImageDOMElement)​ ​{
​updateDOMNoteImage​(id,​ ​modifiedNote​.​image​);
​}​ ​else​ ​{
​insertDOMNoteImage​(id,​ ​modifiedNote​.​image​);
​}
​}
}
...
app.js - modifyNote function

31
 The ​modifyNote function takes care of updating both the notes array and the
DOM element associated to the note with the updated content. IDs don’t change in
documents and are unique identifiers. Therefore, notes are filtered by the document
ID in the notes collection. In case the note has an image, the image gets deleted as
well.

function​ ​deleteNote​(id)​ ​{
​let​ ​deletedNoteIndex​ ​=​ ​notes​.​findIndex​(n​ ​=>​ ​n​.​id​ ​==​ ​id);
​notes​.​splice​(deletedNoteIndex,​ ​1​);

​let​ ​noteDOMElement​ ​=
notesContainer​.​querySelector​(​`[data-id="​${​id​}​"]`​);

​noteDOMElement​.​parentElement​.​remove​();
}
app.js - deleteNote function

The ​deleteNote function takes care of deleting a note both from the array of
notes and its associated DOM element in the DOM tree.

4.5.4 Notes and Images Manipulation

Our application offers users to not just write text notes, but upload images as
well. Because the Firebase Cloud Storage facility doesn’t offer unique filenames for
uploaded files, the generation of unique filenames is up to the developer. We are
achieving that through the ​generateRandomString function, which is not displayed
here.

Whenever a user clicks the “Create a Note” button in the header, a Bootstrap
modal opens up, which contains a form. The form also lets the user upload images.
When the modal form is submitted, the following code is executed:

...
function​ ​handleNoteCreation​()​ ​{

32
 ​let​ ​now​ ​=​ ​new​ ​Date​();
​let​ ​noteObj​ ​=​ ​{
title​:​ ​createNoteForm​.​title​.​value​,
content​:​ ​createNoteForm​.​content​.​value​,
created_at​:​ ​now,
updated_at​:​ ​now
​};
​let​ ​isFileSelected​ ​=​ ​createNoteForm​.​image​.​files​.​length​ ​>​ ​0​;

​if​ ​(isFileSelected)​ ​{
​let​ ​randomString​ ​=​ ​generateRandomString​();
​let​ ​imageRef​ ​=​ ​storageRef​.​child​(​`images/​${​randomString​}​`​);

​noteObj​.​image​ ​=​ ​randomString;

​imageRef​.​put​(​createNoteForm​.​image​.​files​[​0​]).​then​(()​ ​=>​ ​{
​db​.​collection​(​"notes"​).​add​(noteObj);
​});
​}​ ​else​ ​{
​db​.​collection​(​"notes"​).​add​(noteObj);
​}

​createNoteForm​.​title​.​value​ ​=​ ​""​;

​createNoteForm​.​content​.​value​ ​=​ ​""​;
}
...
app.js - handleNoteCreation gets executed on form submission

Whenever a user clicks on a note, another Bootstrap modal, similar to the

create note modal, opens to the user. The modal offers the functionality for changing
a note’s title, content and image. It also offers note deletion. The function for
updating is written as the following:

...
function​ ​handleNoteUpdate​()​ ​{
​let​ ​updateData​ ​=​ ​{
title​:​ ​showEditNoteForm​.​title​.​value​,
content​:​ ​showEditNoteForm​.​content​.​value​,
updated_at​:​ ​new​ ​Date​()

33
 ​};

​let​ ​noteToUpdateRef​ ​=​ ​db

​.​collection​(​"notes"​)
​.​doc​(​showEditNoteModal​.​dataset​.​id​);

​let​ ​isFileSelected​ ​=​ ​showEditNoteForm​.​image​.​files​.​length​ ​>​ ​0​;

​if​ ​(isFileSelected)​ ​{
​let​ ​randomString​ ​=​ ​generateRandomString​();
​let​ ​imageRef​ ​=​ ​storageRef​.​child​(​`images/​${​randomString​}​`​);

​updateData​.​image​ ​=​ ​randomString;

​deleteNoteImage​(​showEditNoteModal​.​dataset​.​id​);

​imageRef​.​put​(​showEditNoteForm​.​image​.​files​[​0​]).​then​(()​ ​=>​ ​{
​noteToUpdateRef​.​update​(updateData);
​});
​}​ ​else​ ​{
​if​ ​(​showEditNoteForm​.​removeImage​.​checked​)​ ​{
​deleteNoteImage​(​showEditNoteModal​.​dataset​.​id​);
​updateData​.​image​ ​=​ ​""​;
​}

​noteToUpdateRef​.​update​(updateData);
​}
}
...
app.js - handleNoteUpdate gets executed whenever the modify modal form is submitted

As one can notice from the code above, we are updating the image with new
content without changing the name of the file. This is achieved through getting a
reference to the uploaded file and then calling the ​put function, which returns a
JavaScript promise. After the image is uploaded, we are issuing an update function
to the note reference, which in turn notifies the code for watching changes in
real-time and the ​modifyNote function gets executed, updating both the notes array
and the DOM elements related to the note that got updated.

34
4.5.5 Search Functionality
Our notes application offers a functionality for filtering the notes by title. As
discussed before, firebase offers the functionality of writing queries. Thus, we can
update the part for retrieving real time updates to match the following code:

...
db​.​collection​(​"notes"​)
​.​where​(​"title"​,​ ​">="​,​ ​searchNoteInputValue)
​.​orderBy​(​"title"​,​ ​"asc"​)
​.​orderBy​(​"created_at"​,​ ​"asc"​)
​.​onSnapshot​(​function​(querySnapshot)​ ​{
​...
​});
...
app.js - implementing Firebase queries

However, this is an impractical approach, because it would require a lot of

unnecessary database and network transactions. It would be better if the notes are
filtered in the front-end, since the notes array can be considered as a source of truth
for the notes. If a note is added while the user is typing into the search field, it gets
immediately inserted into the array of notes. Thus, it will too get filtered with other
notes. The same stands for modification and deletion of the notes. Therefore, we can
implement the following approach for filtering the array:

const​ ​searchNotesForm​ ​=​ ​document​.​getElementById​(​"search-notes-form"​);

const​ ​searchNotesInput​ ​=​ ​document​.​getElementById​(​"search-notes-input"​);
searchNotesForm​.​addEventListener​(​"submit"​,​ ​e​ ​=>​ ​e​.​preventDefault​());
searchNotesInput​.​addEventListener​(​"keyup"​,​ ​e​ ​=>
handleSeachInputChange​(e));
...
function​ ​handleSeachInputChange​(e)​ ​{
​let​ ​searchText​ ​=​ ​e​.​target​.​value​;
​let​ ​searchRegex​ ​=​ ​new​ ​RegExp​(​`​${​searchText​}​`​,​ ​"i"​);
​let​ ​searchResults​ ​=​ ​notes​.​filter​(n​ ​=>​ ​searchRegex​.​test​(​n​.​title​));

35
 ​deleteAllDOMNotes​();
​renderDOMNotes​(searchResults);
}
app.js - implementing the search functionality

As we can see, we are filtering by note title using regular expressions and we
are using the case-insensitive feature of regular expressions.

36
5. Testing and Results
We have built a web app and integrated it to the cloud using firebase. Note
data is filled in by the user through the web app and the data is stored in the cloud.
The application was tested on Windows and Linux operating systems, on different
system configurations and in different browsers. Everywhere, the application shows
excellent performance.

5.1 Quality of Experience (QoE)

Quality of Experience (QoE) is a subjective measure of the delight or
annoyance of a customer's experiences with a service. QoE relies on human opinion
and differs from quality of service (QoS), which can be precisely measured. QoE
focuses on the entire service experience; it is a holistic concept, similar to the field of
user experience. In other words, QoE is user-centric, directly measuring the
acceptability, satisfaction, happiness or enjoyment of the end-user

The following images represent screenshots of our web app performing tasks
like creating notes, editing notes, and searching for notes.

37
Fig 5.1.1 - The modal for creating a new note

Fig 5.1.2 - The page after creating five notes

38
Fig 5.1.3 - The modal for viewing and editing a note

Fig 5.1.4 - The page with the updated fifth note

39
 Fig 5.1.5 - Removing an image from a note

Fig 5.1.6 - The result after removing the image from the second note

40
 Fig 5.1.7 - Filtering by note title

Fig 5.1.8 - The images folder in the Cloud Storage facility

5.2 Quality of Service (QoS)

Quality of service (QoS) is the description or measurement of the overall
performance of a service. The web app has google analytics integrated as do all

41
firebase apps. Google analytics allows us to keep track of user data and user
behaviour, we can get valuable insights like, user experience, user acquisition,
bounce rate and page views.

The following images represent screenshots of the graphs that can be

generated from the firebase analytics section, as well as from the Google Analytics
service.

Fig 5.2.1 - A graph depicting active users

Fig 5.2.2 - A graph depicting user engagement with the application (left), A graph depicting
application how much users experienced application crashes (right)

42
 The insights that can be generated from the analytics can be useful in
determining user behaviour and creating a better user experience. We can also
check users location, platform, demographics and interests.

Fig 5.2.3 - A graph depicting audience location (left), A pie chart depicting on which
platforms the application is used (right)

Fig 5.2.4 - The events table depicting the events done by users

One can use Google Analytics to monitor Firebase activity. Although most of
the basic features are integrated into the Firebase Analytics section, there are
features that exist only on the Google Analytics platform. One attractive feature of
Google Analytics is the monitoring of User Behaviour in which we can see how much
users have visited which pages.

43
 Fig 5.2.5 - User behaviour analytics

The performance of the app is displayed in the figures below. First, we ran a
lighthouse audit for performance using the Chrome DevTools browser feature. This
shows that the application performance is excellent, even though the JavaScript
code is not minified and not optimized.

Fig. 5.2.6 - Lighthouse Performance Audit

44
 We then made another comparison. This time, with Google Keep. We tested
page loading on the same number of notes in both applications using the Google
Chrome DevTools browser feature, which enables one to take performance
measurements of a web application. The notes in FireNotes (our application) also
contained images. Our application took less than one second to fully load, while
Google Keep took around 7 seconds. This shows that the application’s performance
is excellent and this application can grow to become a competitive application in the
note taking application market.

Fig. 5.2.7 - Our application performance measured with Chrome DevTools

Fig. 5.2.8 - Google Keep performance measured with Chrome DevTools

45
6. Conclusion
In conclusion integrating a web app to firebase is a task that can be done with
ease by any tech person that has a basic understanding of cloud technologies. The
integration process is well documented making the job of the developers ten times
easier than implementing other tools that have poor documentation. Firebase is a
viable option as a cloud solution for both small and medium size businesses as well
as big corporations, all thanks to the scalable plans that the platform offers. Firebase
is a considerable alternative that lets developers focus on the front-end. Firebase
offers both basic and advanced tools like databases, storage, analytics, performance
analysis, crash reporting, testing, message notifications, push notifications,
functions, machine learning kit and other features. All in all, Firebase offers great
experience and because of that, it gets more and more used in different
technologies, such as mobile, desktop and web applications. Since all these
nowadays are built mainly with JavaScript tools and framework, Firebase is easy to
integrate in any of them.

46
7. Future Work
We have created a web app that allows users to take notes and edit notes as
well as search through notes, filter notes. And we integrated this app into the cloud
using the cloud services offered by firebase. There is always room for improvement
when it comes to web apps. The purpose of this project was to show the process of
integrating cloud services into a web app, not to build a complex feature packed
application that will wow its users. Features that we can add in the future would be
user authentication so that every user could take private notes along with the public
ones already created, firebase does offer authentication services that we haven’t
used in this project but can be added in the future. Manually creating HTML
elements instead of giving a string for the browser to parse would be a good idea,
since browser take additional time and computing resources to parse HTML and
modify the DOM tree accordingly. Another performance improvement could be done
if the application JavaScript code is minified and transpiled with a JavaScript
transpiler like Babel, which would transpile the EcmaScript 6+ code to EcmaScript 5
and thus maximize the browser compatibility. Migrating to a framework like Angular,
Vue or React is a very advisable, because this would enable the application
complexity to grow faster and it would offer more security and performance to the
application.

47
8. References
- Moroney L. (2010). ​The Definitive Guide to Firebase: Build Android Apps on
Google's Mobile Platform.​ Apress
- Singh H. (2018).​ Serverless Web Applications with React and Firebase:
Develop real-time applications for web and mobile platforms.​ Packt Publishing
- Domes S. (2017).​ Progressive Web Apps with React: Create lightning fast
web apps with native power using React and Firebase.​ Packt Publishing
- Agarwal U. (2018). ​Hands-on Full Stack Development with Angular 5 and
Firebase: Build real-time, serverless, and progressive web applications with
Angular and Firebase. ​Packt Publishing
- Yahiaoui H. (2017). Firebase Cookbook: ​Over 70 recipes to help you create
real-time web and mobile applications with Firebase.​ Packt Publishing
- Sati S. & Kumar A. (2019) ​Basics Of Google Firebase For Web: Firebase
​ mazon Digital Services LLC
2019. A
- Khawas C. (June 2018). ​Application of Firebase in Android App
Development-A Study.​ Retrieved from
https://www.researchgate.net/publication/325791990_Application_of_Firebase
_in_Android_App_Development-A_Study
- IBM. (Accessed Jan 2020). ​IaaS, PaaS and SaaS – IBM Cloud service
​ etrieved from ​https://www.ibm.com/cloud/learn/iaas-paas-saas
models. R
- Cloudflare. (Accessed Jan 2020). ​What Is Platform-as-a-Service (PaaS)?.​
Retrieved from
https://www.cloudflare.com/learning/serverless/glossary/platform-as-a-service-
paas/
- Stevenson D. (Accessed Jan 2020). ​What is Firebase? The complete story,
abridged.​ Retrieved from
https://medium.com/firebase-developers/what-is-firebase-the-complete-story-a
bridged-bcc730c5f2c0

48