Ionic 4: todo App + firebase

23 Saving Data to Cloud Firestore Building Mobile Apps with I

in this lesson we are going to learn about saving data to cloud file store we'll start by understanding how cloud file store works and how the data is

stored on cloud file store and then we'll use the firebase SDK to save some data on cloud file store using our ionic application so let's head back to Visual Studio code inside this application

we'll create a new page where we can perform various operations on cloud forest or so I'll use the ionic CLI to create a new page let's call this page as fire store but you are free to choose

your own name now that a new page called fire store is created I'll rerun the ionic surf command I'll also change this URL to point to the file store page which is the page on which we'll be

implementing all the fire store functionality and there we have the firestore page for now I'll close all the other files in this application and just open file

stored or page or TS file in this file we'll write the code to add some data to cloud file store and save it there but before we get started with writing the code let's have a look at cloud file

store and understand how it works so head back to your firebase console and select the database section from the left because this is a new account we will have to create a database first so

click on create database and select start in test mode click on enable and this will take awhile and create a new file store database for you once the database has been created you can start

saving information in that database the way file store works is that it organizes your data into collections so all the data that is similar goes into a collection and each entry in a

collection is called as a document if you are coming from the background of a relational database you can think of collections as tables and documents as rows in those tables in a relational

database inside each row you store data as columns however in a no sequel database like cloud file store you store data as a map of key value pairs this is very similar to how you store JSON

documents so let's go ahead and click on add collection button right here to add a new collection to cloud forest or let's call this collection as products and

inside this collection will store information about some products each document inside a collection is identified by a unique ID and you can allow firestore to define these IDs for

you so I'm just gonna click on Auto ID and this will generate a unique ID for this document inside my first document in this collection I'll define a field called

product name and the value of this product is going to be iPhone X I'll also define another field let's call it product price and this will be a number and I'll set the value to 1000

that's all the information I want to save for now click on save and you can see that a new collection is created called products and inside this products collection

you only have one document and inside the document you have two fields product name with the value iPhone X and a field called product price with a value 1000 you can add more documents inside this

collection and that's how data is organized in cloud file store so now that we know how cloud forest or works let's quickly go back to our eye on ik application and add a new document

inside the products collection using some code so here we are back inside Visual Studio code and the first thing I'll do is import firebase once firebase has been imported inside

my constructor I'll go ahead and write the code to create a new document inside the products collection and I can do that using firebase dot file store and here we have a number of functions the

first function that I want to use is a collection which takes in the name of a collection that we want to perform some operation on so in this case the name of the collection is products and on this

you can execute a function called add the add function allows you to add a new document to a collection and this add function takes in a JSON object the ID for this new document will be assigned

by a firebase and firebase will ensure that this ID is unique across all your other documents so let's go ahead and add two properties called product name and product price the add function also

returns a promise like all other firebase functions so you can use the den function on this and if the den function is executed it means that the document has been

successfully added to your collection and in case an error occurs you can handle that using the catch block for now I'll just log the error message to the console let's say that and as the

application loads up we should get a log in the console with either the success message or an error message so you can see that I have this long error string and after that I have a message

successfully added new document if we go back to cloud firestore you can see that a new document is added inside the products collection with the same values that we defined in our code so if

everything works fine why do we get this long error message in our console and this is because the changes that file store is going through firebase is updating a few things about cloud file

store so you need to make sure that your application is compatible with those new changes and when those changes are rolled out by firebase your application will not break

and that's what this error message is about this is more of a warning that firebase is giving us because we have not added a setting in our firebase code so let's go ahead and do that as well so

inside are AB dot module dot TS file right after the code with firebase dot initialize app function we can go ahead and type in firebase dot file store dot settings and inside the settings

function you can pass in a JSON object and the only property that you need to pass in is timestamps in snapshots and you need to set it to true that's it that's all the change that you need to

make and now as your application refreshes in the browser you can see that you do not get that read error message anymore and you directly get the successfully added new document message

in your console if you go back to firebase console you can see that a new document is added so now you have a total of three documents and because the first and the second

documents are exactly the same let's go ahead and delete one so now that we know how we can save new information on cloud file store let's have a look at how we can get this data

from fire store and display it in our application