Ionic 4: todo App + firebase

30 Adding New ToDos Building Mobile Apps with Ionic 4 Video

in this lesson we are going to add the functionality to add new to dues using the ionic application so we'll start by creating a new page in our application

that will allow the users to add new to-do items and then we'll save those to dues on cloud file store in a new collection called to dos so here we are back inside Visual Studio code and the

first thing I'll do is create a floating action button inside our to-do start page toward HTML file this floating action button will allow the user to navigate to a new page that will create

next that page will allow the users to add new to dues to their list of traduz so I'll start by using the iron fab component I'll set the horizontal property to end and the vertical

property to bottom and this will give me a floating action button on the bottom right corner along with that I'll also define the slot value as fixed which will prevent the floating action button

from scrolling along with the page inside this iron fab component I'll define an iron fab button which will be the actual button in here I'll use an iron icon and I'd use ad for the name of

the icon this gives me a blue floating action button on the bottom right corner but since I want it to match with the rest of the application I'll also give it a color of danger now that we have a

floating action button of red color on the bottom right corner let's bind the click event of this button to a function let's call this function as go to add to do and this function is what will create

next in our to do dot page dot TS file this function will allow the users to navigate to the ad to do page we'll create that page in just a few moments for now we'll import the nav controller

and then we'll use the nav controller to navigate the user to the ad to do page so I'll use this dot nav controller dot navigate forward function and to that I'll pass in slash ad – to do as the

path for the new page so now that we are ready let's go ahead and create that new page called add to do page so I'll stop the server and I'll use the ionic CLI to create that new

page so I just go ahead and type in ionic generate page add to do this we'll create the new add to do page in our application and we'll also update the app – routing dot module dot TS file now

we'll run the ionic serve command again and if you go to your app – routing dot module or TS file you can see that the path is add – to do which is what we have defined in the navigate forward

function inside our to do dot page dot TS file I change this slash to the forward slash so now that the new page is created we need to write some code in the new page

so I'll open add – to do dot page dot HTML file I'll start by changing the title of the page to add new to do and I'll also change the color of the toolbar to

danger next I'll create a form so I'll use an iron list inside that I'll create an iron item and inside the iron item I'll have an iron label with the position of stag and an iron input and

this input will allow the user to enter the title for their to-do item I'll copy that and for this input field I'll change the label to to do description and you can see that we have

a good-looking form in our application here the user can enter that to do title and the to do description will have one more field for a new to do which is the last date for this to do item so I'll

copy the I on item again and I will remove this I on input I change the iron label – to do last date and here we'll use a new component called iron date/time which will allow the user to

pick a date using a very nice interface I'll also specify a display format and the display format for the date will be month slash date slash here and there you can see that I have a

nice-looking date picker in our application as of now the user can choose any date but since we want the date to be no less than of the current year I'll define a minimum value for the

date here I'll just respess if I – 0 1 9 which is the current year so that the user will not be able to select any date from the previous year's let's save that

and now you can see that 2019 is the only option that they can select finally I'll create a button which will be a block button and the button will have rounded corners I'll define the

color danger for this button and the text on the button will be add to do this button will be used to add the new to do to our cloud forest or collection last but not the least I'll add an back

button to our toolbar that will allow the user to navigate back in case they change their mind and do not want to create the new to do it save everything and now you can see that we have the

form ready so now that the form is ready let's add bindings so I'll start by the first input field I'll use an NG model and I'll set its value equal to to do underscore title similarly for

description we'll have to do underscore description and finally for the date will have the ng model value set to to do underscore last underscore date finally we'll bind the click event of

the button to a function called add to do so now that we are done with the HTML file let's move on to add – to do dot page dot TS file here we'll start by defining the new function the add to do

function and before we write the code inside this function we need to define all the properties that we have defined in a reg tml file and before we proceed we also need to

import firebase and we'll also need a field to add the ID of the owner who has created this to do so we'll also add a to do owner field inside the constructor we'll get the value of the currently

logged in users UID and assign it to the to do owner property so I'll just square it and type in firebase dot earth not current user dot UID and we'll set it equal to this

Todd to do owner this we'll assign the currently logged in users UID to the to do owner property now we are ready to write the code inside the ad to do function so inside the ad to do function

will use the firestore SDK so I'll just squared and type in firebase toward firestore rod collection the name of the collection will be two dues and I'll use the add method to add a new document to

the traduced collection the two roofs collection does not exist as of now but once we try to add a document the collection will be created automatically inside this document will add the values

for title which will come from the to-do title property we'll add the value for description which will come from to do description property we'll add a field called last date and we'll set it equal

to this store to do underscore last underscore date and just like that we'll add a property called owner to which we'll pass in the currently logged in user's UID we'll add one more field

called created which will contain the actual time of creation of this document so we'll use a built in function of file store for that which can be accessed using firebase toward firestore dot

field value dot server timestamp and this saves the actual time in the document when this request will be made to cloud file store finally since the add function returns a promise we can

execute the den and the catch functions the then function in the callback receives a document reference and for now we do not need to use this document reference all we want is display a toast

notification to the user and navigate the user back to the previous page so we'll need the nav controller and the toast controller so I'll import both them but before we do that let's go

ahead and write the catch block in the catch block will only be displaying a toast notification with the error message to the user so now that the then and the catch blocks are ready let's

import the toast controller and the nav controller inject them into the page class and now inside the den block will display the toast notification first to the user the message in the toast will

be to do has been added this will be displayed to the user for two seconds and then finally we'll present it to the user using the present function once the toast has been presented to the user

we'll use the nav controller to navigate the user back to the previous page in the catch block all we need is to display the toast notification to the user so I will copy the code from there

paste it inside the catch block and I'll just remove the line that navigates the user back to the previous page I'll also change the message for the toast to error dot message which will give us the

actual error message let's save everything and test this out so I'll click on the floating action button and I am navigated to the add new to-do page where I will fill out all

these fields I'll select a date and then I'll click on the ad to do button I will get the toast notification and I am navigated back to the previous page as well so

everything looks good let's head back to our firebase console and see if the document is actually created in the collection or not and here you can see that a new collection called – dues has

been created which contains just one document and that document contains all the data that we just stored about the to do however we have a problem here the last date property is not actually a

date it is stored as a string so we need to fix that we need to store the last date just in the same format as we have the created property which is a timestamp and to fix that we need to go

back to visual studio code and here I'll wrap this start to do underscore last underscore date property inside the new date function this will return a date object which is acceptable

by the firebase SDK now let's try to create a new to do again and see if everything works fine let's head back to firebase console and here we have the second document and

this time the last read property contains a timestamp value instead of a strain which is perfect so now that the documents are created perfectly we can go ahead and delete this first document

because it can create inconsistency in our application so now that the users are able to add new to Do's using the add to do page in the next video we'll write the code to display all the users

to use on the troduce page