Storage (Firebase)

Hard disk drives and solid-state drives are common types of persistent storage. This can be in a form of file, block or object storage. On the other hand, RAM and cache are normally non-persistent, and data is lost once the power is turned off. However, non-volatile RAM are persistent. Persistence is useful in the event of a crash or reboot, data will not be lost [3].

What is a file?

A file is a series of bytes that contains numbers between 0 and 255. A file would be spread out to different areas on a storage device. There are two types of files. A text file and a binary file [4].

Text file is human-readable file, meaning when we open a text file with Notepad or other text editors. The file contains several lines of numbers one after the other that can be translated into a visual representation. If the file encounters the number 97, it will display a letter a, so called ASCII code.

Binary file is a file that can be read by humans since the file is not “line-oriented”. The file contains the combination of numbers, letters and symbols. Storing important data in a binary file is way more secured compared to a text file as the binary file cannot be read to understand by humans.

What is a directory?

In computer or mobile file systems, a directory is a named group of related files that are divided by naming convention from other groups of files [5]. Data can be stored in different locations or directories of mobile devices.

Data Serialization vs. Data Encoding

Data serialization is a process of converting data which includes arrays, object or related structures into a single string that can be stored or transmitted easily [6].

Coding

Encoding is a very general term, referring to any format in which data can be represented, or the process of converting data into a particular representation.

For example, a sequence of English letters can be encoded as written symbols or bit patterns in a text encoding including ASCII or UTF8.

CSV Format

CSV (Comma Separated Values) is a file format for storing data which looks like a text file. The information is organized with a record on each line and each field is separated by a comma [7].

CSV Advantages

CSV file is human readable and easy to edit

CSV file is simple to implement and parse

CSV file is considered to be standard format

CSV file is smaller in size

CSV file is compact. For XML you start tag and end tag for each column in each row. In

CSV file you write the column headers only once.

CSV file is processed by almost all existing applications

CSV file provides a straightforward information schema

CSV file is faster to handle

CSV is easy to create

CSV vs. TSV

TSV is a very efficient for JavaScript to process without losing any typing information, and also it is easy for humans to read while CSV is generally loading data into spreadsheets [8].

Escape Character

An escape character is a character which invokes an alternative interpretation on subsequent characters in a character sequence.

JavaScript uses the \ (backslash) as an escape character as follows [9].

\’ single quote

\” double quote

\\ backslash

\n new line

\r carriage return

\t tab

\b backspace

\f form feed

JSON vs. CSV

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for computers to parse and generate. Also, it is easy for humans to read and write.

JSON is better at showing hierarchical and relational data than CSV file.

CSV will lose data. For example, many products have dozens or even hundreds of prices and reviews. This means you end up losing a lot of valuable data by using the CSV view.

The standard CSV reader application (Excel) is terrible at loading files that may have 10,000 rows, 100+ columns with some of these columns generated by unstructured text like reviews.

JSON is easier to work with at scale since most modern APIs are RESTful, and that is a reason why it natively support JSON input and output. Several database technologies including most NoSQL variations also support it. It’s significantly easier to work with within most programming languages too [10].

Encode an array of string to CSV

Array to CSV [11]

Encode an array of string to JSON

Array to JSON [12]

Client vs. Server

A client machine is a small computer with a basic hardware configuration. On the other hand, a server is a high-end computer with an advanced hardware configuration [13].

A client is a simple and less powerful machine while a server is a powerful expensive machine.

A client is used for simple tasks. However, a server is used for storing huge data files and applications.

A server delivers high performance when it is compared to a client machine.

Finally, a server supports simultaneous, multiple user log-ins whereas a client supports one single user log-in at a time. For this reason, we can see that server is way more powerful compared to client machine. Server is categorized into different types, including file server, backup server, web server, database server and so on [14].

Store data on server vs store data locally

Data stored on server [15]:

Pros

Maintenance and upgrades

Data stored remotely

Easy adjustment of storage space

Accessible wherever there is internet access

Cons

Cannot access data without the internet

Transferring data out of the cloud

Data stored on local machine:

Pros

Security

System set-up control

Cons

Installation of expensive hardware

Will need maintenance

Now, let’s get back to data storage. Storage is an easy way to store key/value pairs and JSON objects. Storage uses a variety of storage engines underneath, picking the best one available depending on the platform.

Storage is a simple method to store key or value pairs as well as JSON objects. Storage uses different types of storage engines underneath it [1]. When running in a native application, storage will prioritize using SQLite which is one of the stable and widely used file-based databases. Also, it avoids some pitfalls such as local storage and IndexedDB.

However, I would use Firebase plugin to demonstrate how data is stored rather than using SQLite. This plugin brings push notifications, analytics, event tracking, crash reporting and more from Google Firebase to Ionic application. Both Android and iOS platforms are supported [2].

First, I go to https://firebase.google.com/ then click on Pricing tab of the website. I selected the Spark plan which is a free version for me to test and deploy as shown below. After that, I signed in using my existing Google account.

Now, click on Go To Console.

Next, I press on Add Project to add a new project file to link to my Ionic application. Now, give the project a name and select country/region then click Create Project.

Click on the project that was just created.

Click on Add Firebase to your web app as shown.

Copy the two lines including apiKey and authDomain in order to have the Ionic app linked to Firebase.

Now, click on Authentication.

Go to Sign-In Method then enable Email/Password to create a sign up process.

Currently, there is no user yet in Users tab. Users will appear once data is created via Ionic app.

Install Firebase plugin with this command line

npm install — save firebase

In app.component.ts, I will need to add the following codes to initialize firebase with authentication.

I need to create a services folder to work with the server with the file name of auth.ts along with the following codes with explanation.

In order to use this service, I will need to provide access in app.module.ts

Now, in the signup.ts page, I will have some codes below to write to the console when the signup process is either it is successful or there is an error.

Adding Spinner (Loading Controller), Alert Controller and Error Handling

Now, run the application in the browser.

Spinner appears while signing user up
Error message shows when signup process fails with Ionic error handler
Handling exception when email is not in correct format
Password must be at least 6 characters long
A user is created and stored on Firebase server

Console.log, Debug, Error vs. Alert

console.log() is a useful tool for outputting debug without the need of using alerts; however, there are some other methods that you can use to output information to display in the console. It works similar to printf is c programming.

Debug is described in Week 09 — Debugging

Error is used to output error messages.

Alert is a function that is mostly used to check the values of the variables.

References

[1] “Ionic Framework”, Ionic Framework, 2017. [Online]. Available: https://ionicframework.com/docs/storage/. [Accessed: 10- Aug- 2017].

[2] “Ionic Framework”, Ionic Framework, 2017. [Online]. Available: https://ionicframework.com/docs/native/firebase/. [Accessed: 11- Aug- 2017].

[3] SearchStorage. (2017). What is persistent storage? — Definition from WhatIs.com. [online] Available at: http://searchstorage.techtarget.com/definition/Persistent-storage [Accessed 8 Sep. 2017].

[4] Perl Maven. (2017). What is a text file and what is a binary file?. [online] Available at: https://perlmaven.com/what-is-a-text-file [Accessed 8 Sep. 2017].

[5] SearchWindowsServer. (2017). What is directory? — Definition from WhatIs.com. [online] Available at: http://searchwindowsserver.techtarget.com/definition/directory [Accessed 8 Sep. 2017].

[6] “serializer.ts”, npm, 2017. [Online]. Available: https://www.npmjs.com/package/serializer.ts. [Accessed: 11- Sep- 2017].

[7] “CSV — What, Why and How”, Cart2Cart, 2017. [Online]. Available: https://www.shopping-cart-migration.com/blog/61-must-know-tips/5985-csv-what-why-and-how. [Accessed: 16- Sep- 2017].

[8] C. csv, “Choosing between tsv and csv”, Stackoverflow.com, 2017. [Online]. Available: https://stackoverflow.com/questions/11130120/choosing-between-tsv-and-csv. [Accessed: 15- Sep- 2017].

[9] “Escape character”, En.wikipedia.org, 2017. [Online]. Available: https://en.wikipedia.org/wiki/Escape_character. [Accessed: 15- Sep- 2017].

[10] “4 Reasons You Should Use JSON Instead of CSV — Knowledge from Data: The Datafiniti Blog”, Knowledge from Data: The Datafiniti Blog, 2017. [Online]. Available: https://blog.datafiniti.co/4-reasons-you-should-use-json-instead-of-csv-2cac362f1943. [Accessed: 16- Sep- 2017].

[11] “array-to-csv”, npm, 2017. [Online]. Available: https://www.npmjs.com/package/array-to-csv. [Accessed: 16- Sep- 2017].

[12] “standard-json”, npm, 2017. [Online]. Available: https://www.npmjs.com/package/standard-json. [Accessed: 18- Sep- 2017].

[13] “Difference Between Client and Server | Difference Between”, Differencebetween.net, 2017. [Online]. Available: http://www.differencebetween.net/technology/difference-between-client-and-server-2/. [Accessed: 13- Sep- 2017].

[14] A. McLean, “Business IT 101: Why Have A Server?”, McLean IT Consulting, 2017. [Online]. Available: http://www.mcleanit.ca/blog/why-have-a-server/. [Accessed: 15- Sep- 2017].

[15] “Cloud vs local Server — Where should you store your data? — labfolder”, labfolder, 2017. [Online]. Available: https://www.labfolder.com/blog/cloud-vs-local-server/. [Accessed: 15- Sep- 2017].

Content Creator & Software Engineer