Ionic Notes App Tutorial (Mobile App Development)

[Music] hey guys Wes here in this video series we're going to be doing some mobile development using ionic so we're going to be building a simple notetaking application that will deploy two ionic view so that we could actually test your application out on stain iPhone for instance or any other mobile device so let's take a look [Music] so here's a look at the application will be building in this series you can see that we have an app called my notes and on the front page of this application we have a list of notes that we've created in the past and you can see that we have the ability to create a new note either by clicking the button at the bottom of the screen here or at the upper right hand corner we have this icon that we can click on to add a new note so on this page we have the ability to supply a date and a title and some note content and we can actually go ahead and save that note and we'll look at using ionic storage to actually persist the data that we saved to our application so once we've created some notes here we can click on them and then we get taken to a sort of detail page if you will where we have a title and the date and the note content displayed and it's here we can actually delete a note which will take us back to the home page we'll also look at how to do some basic styling so for instance having different background images for the different pages that we have as well as using some of my onyx out-of-the-box components like these buttons and these list items and the icons for instance towards the end of this series we'll look at how to deploy this application to ionic view so that we could actually test it on say an iPhone even though I'll be developing on Windows throughout this series so with that let's go ahead and get started so the first thing that I'm going to do is actually install ionic and Cordova and we use NPM for that so if you don't have n PM make sure that you have node installed first of all which should actually install the NPM package manager so we'll go ahead and NPM install - JEE ionic and I'm going to use specifically at the time of this recording the current version which is 3.1 9.0 and we'll also install Cordova at 8.00 so the reason I'm going to install a specific version here is because of course in the future these versions will update and they may make breaking changes so if you'd like to follow along with the video then installing these specific versions should make that a little bit easier okay so once those are installed we can go ahead and create a new project using I onyx so we're gonna say ionic start my notes and this will just be the name of your applications so feel free to name this whatever you like here we're gonna have the option to choose a starter template and for this series I'm just going to use a blank template which will just be a very simple starter project and for now we'll say no to whether or not we'd like to integrate our new app with Cordova and we'll also say no to whether or not we want to install ionic pro SDK okay with that ionic has created a new directory for us so we can go ahead and CD in to my notes and if we just take a look at what's in this directory we can see that we have a new project scaffolded out for us so this is going to look pretty similar to an angular project that might be created with the angular CLI for instance so I'm just going to go ahead and open up visual studio code in this directory and you can see that we have this source directory which contains a number of different directories as well as our index that HTML and a directory called pages where we have this home directory that has a home dot HTML page and assets directory and an app directory so before we dive into some code let's go ahead and just start the application and see what it looks like so for that we can just use ionic serve and so you can see that this is going to start our development server running on port 80 100 in my case and so it should open up a new browser window here and this is our ion occation so throughout this series I'm actually just going to be using Chrome to sort of debug our application and we'll be using the inspector here so if you control shift I to open that and here I will have the device toolbar toggled so just like this icon to toggle between sort of desktop mode and device mode and with the device toolbar note that you can also select a preset device so this is kind of nice we can see how our application would look if we were using any number of different type of built-in devices here ok with that let's go ahead and take a look at our home page so I'm in the pages directory and then under home we're looking at home dot html' here and we'll just make this look a little bit neater okay so right off the bat we can see we have this eye on header tag that contains an eye on nav bar and then eye on title where we have this ionic blank title here let's go ahead and change this to my notes and when we say we can see that our server our development server restarts and we should see my notes in the header bar here likewise we can change what's inside this ion content tag so we'll just remove that for now so now we have a completely blank content area so if you've developed other applications with angular in the past the directory structure here will look pretty familiar so ionic has this pages directory that will contain a directory for any number of different angular components that we might build so any ionic application will consist of any number of different pages and any one of those pages is an angular component so you'll notice that in the home directory if we look at the typescript file here we can see that we have our component directive where we have our selector and our template URL and then the class home page with some default constructor that's been scaffolded out here one thing that we don't have here is an array containing our Styles which you may see if you've used the angular CLI for instance or worked on another angular project instead by default angular is currently using as CSS files and we don't need to include this in our style sheets array here in s CSS we can actually just nest our selectors and so any styles which go into our page home component here will apply to this specific component you could of course use the sort of standard angular style sheet array in your component decorator but for this series I'll just stick with using a CSS as well okay so let's take a look at our app module typescript file in our app directory so here you'll see our declarations where we'll put some the new components that we create notice also that in this application we have an entry components array in our app module file and we're also going to put any of the pages that we'd like to visit in our application here as well and we'll get into this a little bit more detail a little bit later let's look now at our app dot HTML file so you can see that all this contains is an ion nav element and here we have a reference to this root page property which if we take a look in our typescript file simply stores a reference to our home page component and so our root page here in this case our home page will be at the bottom of a stack of pages that we might navigate through when we use our application so ionic is going to use a stack to essentially manage routing in our app so this is different than using like URL routes like you might use in a standard web application in this case ionic is going to use something called the nav controller which will basically manage that stack so the page at the top of the stack will be the current page that we're viewing and then to go to a previous page we would simply pop the top page off of the stack which would cause the page under the previous top page to be at the top and likewise if we'd like to visit somewhere else in our application we can simply push a page onto the stack causing a new page to be at the top so ionic essentially manages all of our navigation using this stack of pages we always view the topmost page of a stack and we navigate by either pushing or popping new pages onto that stack so let's go ahead and generate our first new page so I'm gonna leave the server running and just open up a new console and here we can just use ionic generate page and let's call this page add note ok so we'll head back into the code and notice that in our pages directory we have this new directory add note so with that created let's go ahead and check out the HTML file and we're gonna change add note here to simply add note and we'll go ahead and remove some of this generated stuff from the template generator and then in ion content here I'll simply say add note page so what I'm going to do now is create a button on our home page that we can click and then it will take us over to our add note page to sort of demonstrate that routing concept that we just talked about so let's go into home and in home.html I'm gonna do is go ahead and create a button here so notice that when we use this I on button directive we get some nice default styling for our button so here I'm just gonna add a clip listener and we'll just create a method called add note so now if we go into our home type script file we'll go ahead and create that method and now we're going to use this nav controller that we have access to you that's been injected into our constructor here to actually push the add note page onto the top of our navigation stack if you will so now we just need to make sure to add a reference to add note page and then in our app module file we need to also go ahead and add that to our list of declarations and make sure it's imported here as well and then we'll also need to include it in our entry components so now if we click our button you can see we get taken to our add note page now we're going to go ahead and create a new service that will be used for managing the notes in our application so this service will be responsible for both creating new notes as well as retrieving them for us so that we can see them either in a list or a detailed view and we can just use the ionic CLI to generate that service for us so we will say ionic generate provider note service and this is going to create a new directory called providers and that will contain our new class note service in a subdirectory of the same name so you can see that it's just an angular service we have our injectable decorator here I'm just going to go ahead and remove some of this boilerplate and here we're going to use ionic storage which will essentially allow us to save key value pairs as well as JSON data for our application it uses a variety of different means of storing data including sequel Lite and local storage so I'm going to head back to the command line and here we'll just say ionic cordova plugin add cordova c polite storage okay so let's go ahead and minimize this and now in our notes service what I'm going to do is go ahead and import storage from ionic storage now we need to head into our app module and then in our imports right here just after the ionic module for root we're gonna go ahead and also import ionic storage module for root okay and just make sure that this gets imported as well at the top of the file so let's head back to our add note page so under pages add note HTML and let's create a basic form here so within the ion content tags I'm going to go ahead and create a new form and at first we're going to use a simple template driven form so first of all we'll say on submit here what we'll do is we'll call some method add note in our component and it will store a local reference to the form here which we'll set to ng form and this will give us a reference to the form that we're currently using and then we can pass effed-up value to this method in our component so this be the simple example first so we'll just write it out really quickly here so first we'll create a new Island item using this eye on item attribute likewise we can use eye on label to create a label for our forum which we'll just call title and then we can use eye on text area with the name of title okay now for this simple example here first we'll be using a template driven approach so we use ng model here to get a reference to the title property here in our component that we can then use and then just below the item here we'll have our button ion button and here we'll just say save note so now we'll have access to this object that has a title from our form based on whatever we type into our text area so let's go ahead and select add note and you can see that we have our text field and then save note here so what I'm going to do is head into our add note type script file and again we'll remove some of this boilerplate and you can see that we have a sort of lifecycle hook method that gets called here which currently is just logging something to the console when the ionic view loads so we're gonna go ahead and just remove that as well and we're going to create our add note method in our add note type script file and in fact I think I'd like to call this save note so let's go ahead and rename this to save note and then back in our typescript file here we have our save note function and what we're gonna do is pass it this value which will be an object that has a title property on it which is a of type string and so now we'd like to actually make use of our notes service so we'll go ahead and inject that into this constructor so we'll call it a note service and it will be a type note service and we can go ahead and make that import here as well okay and right and so it looks like it can't resolve our note service saying that it has no exported member note service so let's go take a look here okay so it's calling it note service provider I think I'd like just to call it note service so we'll change the name here and then in our app module we'll also need to make sure that the name that we import here is is also note service we'll head down into our providers and should just have one note service okay so I'm gonna go ahead and close some of these open tabs and then in our add note type script file we now have a valid import of our notes service and we've injected it into our constructor here so now let's go ahead and invoke it so we'll call this notes service and here we'll have a save note method that will pass value which in this case is currently just the title of the note that we're going to create so let's go ahead and create this method in our notes service so I'm just going to f12 on note service and we'll remove what's in our constructor and we'll go ahead and create this method save note it's obviously going to take the value of our note title so we'll make the input parameter note which will be of a type object that has a title on it which is a string and then what we need to do is essentially push this note that we want to save on to an array of these notes and for now let's just do a really simple way of doing that where we'll actually just store a reference to those notes in this service so I'm going to go ahead and above the constructor create a private notes property which will be basically an array of objects that contain a title of type string and we can even initialize that just as an empty array here and then you can see all we need to do now is to actually push on to that array of notes so we have a way to save our notes and now we also need a way to of course retrieve them so let's create a method get all notes and here all we need to do is actually return this notes in fact maybe here we'll just return a copy of this notes which we can do using the spread operator this would also be like if we wanted to use slice instead of the spread operator so in a sense we're just returning a copy of this notes and not returning sort of a pointer to it directly but in any case we can use a spread operator or slice for that okay so then back in our ad note component we've now completed our method to save the note which should call the same note function in our note service adding it to that array of notes that it's collecting and now maybe on our home page age so if we look in the home type script file we'll use the note service to get all the notes and then display them out here so again we'll inject any private note service here type notes for this and we'll go ahead and make that import and so just after our add note method that we created we can create one called get all notes and here we'll return all notes from our notes service so we can call this note service dot get all notes that will return again a copy of that array of notes that is stored in the note service and then we'll have an analogous array of notes in this component so we can have notes which again will be an array of this object that contains a total property which is a type string and we'll initialize it as it into your a and now we can use one of ionics lifecycle hooks here I on view will enter and we can set the stat notes to the stack yet all notes so I on view will enter is just a life cycle event this one runs when a page is about to enter and become the active page there are a number of different life cycle events that we can make use of including on viewdidload and if you did enter among others including when we when we're about to leave a page for instance if you'd like to see a full list of other lifecycle events then be sure to check out the ionic docs and you can find these under life cycle events under nav controller ok and then back in our notes service I'm going to go ahead and just remove what's in our constructor here so we don't actually need anything in our constructor here yet okay so the last thing we need to do here is to actually create the part of our template that will allow us to display the notes that we're saving on the home page here so I'm gonna go to the home dot HTML template page and then here just above our button what I'm gonna do is create a new ion list so you can see the number of different components that addict it's out of the box which are really useful and here will create any button we'll use the eye on item directive here to provide some styling and now we can use a standard ng for star energy for here to loop through our array of notes so we can just say let note of notes and then we can use some interpolation here to just go ahead and grab the title from each of those notes which was the only property that we have on it anyway at the moment okay so this is just pretty standard angular here so this notes in our let note of notes is referring to the notes property that we have in our component and when this view is about to enter we call our get all notes method which invokes our note service to return a copy of all the notes that it's storing let's go ahead and test it out so we'll create a new note caught first note and then we'll go ahead and try to save it okay so we don't get any sort of feedback but if we click back now we can see that we have the first note in our list so we can go ahead and add a second note and we can save that and then we go back and we can see that second note is also in our list okay so what I'm going to do now is inside of our source directory I'm going to create a new subdirectory and we'll just call that models and we're gonna use this directory to store a model for our note objects let's go ahead and create a new file it's gonna be a new type script file and we're just gonna call it note that model that TS it's just gonna contain a simple interface export so we'll go ahead and export interface note and now we can define the different properties that any note in our app will have let's keep it simple we'll have a title which will be a string we'll have some content which will hold the note content which would be a string then we'll have a date so we'll allow the user to select a date and then I'm going to have this property create date which would be a number and we'll take a look at how we're going to use this a little bit later but we're essentially going to use it to be a way to get a sort of unique identifier for any note that gets created and it's going to be represented as an number because when we create a new date we are going to essentially represent that in milliseconds since I believe January 1st 1970 so we'll take a look at how that's used in a little while okay so what I want to do now is to implement ionic storage so let's head back into our providers directory and then into our notes service so if you recall previously we imported storage from annexed orage that we haven't implemented it yet so previously we were simply pushing a new object onto this notes array any time we were saving it using this method we don't really get any data persistence so as soon as we get a new instance of our notes service we get an empty array of our notes and so that essentially has the effect of deleting any of the notes that we've stored there anytime our application restarts so we're gonna use ionic storage to do some basic data persistence now and we're lucky in that with ionic storage it's actually pretty easy to get data persistence setup so let's take a look the first thing that I like to do is to remove these objects that we've used as sort of placeholders for our note object and now we can actually bring in the new note interface that we had defined and so we'll go ahead and import that from our models directory so now our notes property will just be a collection or an array of this note object if you will and likewise when we save a note here we can also make it of type note okay so this should really change the functionality yet we just have this new object type which has several different properties on it so anytime we save a note what I'm going to do is first thing that I'm gonna do is simply set that create date that we talked about just a moment ago as a new date dot now returning a number which as I mentioned will basically just be the number of milliseconds since January 1st 1970 UTC and so we should get a new number at least for our purposes any time we create a new note here we wanted to scale our app and perhaps make this a little bit more robust and we might find a different way to get a unique identifier here but as I mentioned this should serve our purposes so we're still gonna push a note on to our array but now what we'll do is we'll say this that's storage and we need to actually bring in or inject a storage service if you will into our constructor of type storage again this is coming from ionic storage and so this that storage has some methods on it including a set method and so as you can see from a little intellisense I got there this is going to basically set a value for a given key so we're gonna have a sort of like dictionary type structure where we have key value pairs and that we can set an access with storage so we'll make a key notes and we can set any other sort of object here so let's just go ahead and set our notes array to that notes key okay so now how are we going to get all notes well let's look at how we can get notes from storage so if for instance if our app were to refresh and we were to get this that notes then we would just simply get an empty array if nothing had yet been pushed on to that array so what we'll do instead here is we'll return and then we'll use this debt storage and now we'll use a method get that we have here and you can see that this is just to get the value associated with a given key so we have a sort of getter and a setter method here and now we just pass it that key and this is going to return it promise so we can call then on it to pass it a callback function to do something when this promise gets resolved so let's just call that notes and what we want to do here is first of all we want to handle the initial case when notes is null so let's just do it this way we're gonna set this debt notes equal two notes should get returned from our callback function but when that's null then we are going to set it to empty array otherwise return us notes so we have a sort of ternary operator here where we want to check whether or not notes that we're getting back from local storage is null if that's the case then return an empty array otherwise return the notes we should get back from local storage and so we set that to this that notes that is on our class here and then what we can do is once again simply return a copy of them here so use a spread operator inside of square brackets here to return a copy of this as an array so as we saw previously you could also just return this that notes that slice as well to return a copy so that part yeah I'll just leave up to you okay cool so now you can see that that's actually super easy to simply get some data persistence set up using ionic storage and ionic storage is going to be handling all of the you know the storage aspect of keeping this data persisted in the background and so it will be using things like local storage or sequel light or web sequel things like that to provide us with that data persistence also if you missed it in the previous video you will want to double-check your app tap module type script file in the app directory and ensure that you've brought ensure that you've imported ionic storage module from ionic storage and included it among your imports and called for root on it here okay so while we're in here what I'm gonna do is go ahead and make another import for some forms so we can import forms module as well as reactive forms module from angular slash forbs okay and we're going to use the forms module and the reactive forms module to improve the form that we have currently in use in our app so we're going to come down here and in our imports array we need to actually make sure that we bring those in so the forms module and reactive forms module if you don't import these modules then you'll get some kind of strange errors when we update our forms okay so that should take care of our imports for the time being now I'd like to head back to our add note page so you can f12 there if you're using visual studio code and if you haven't removed the scaffolded code here in the placeholder code we can remove that as well okay so what I want to do now is to head back to our add note page that we briefly build up in the previous video and you'll notice now that we should also implement our note object rather than use this sort of in place object that we were calling value before when we are saving a note so I'm going to make this a type note and we'll actually call the brand that we pass it a note and so we'll need to make sure that we bring that in as well so I'll control period here and bring it in from our models directory and we will just go ahead and update the brand here as well okay so far so good the other thing I'm going to do is remove nav params from our constructor here so if you have that in your constructor we can go ahead and remove it and really all that we need in this class anyway is a nav controller and a note service injected so and all we have currently is the save note method which will invoke save note from our injected instance of a note service here and we are going to save some sort of note object so we'll need a way to actually pass that note object from our form to our component here so that it can then be passed to our note service so we'll take a look at what is in the template so let's head over there and so you can see that previously we built this sort of template driven form where when we submit that form we pass the forms value and whatever it contains here to our component and you can see we have this text area with a name title and that was all we were actually passing back with the ng-model binding so we had some property title with an NG model directive on it and so we're going to update our form here from being a very simple to a template based form to a more model based and reactive form so let's take a look at that now so first of all we're going to use two new sort of directives here we're going to use form group the sort of an input which will be an input and we'll set that to form group we're still going to bind to ng submit event here and rather than call add note on the component and passing it the value on our forum in fact we can go ahead and remove the reference to the form itself and we can pass this form group objects value up so this form group is going to contain a number of different form controls in fact just one form control for each of the different fields that we'd like to pass from our forum back up to the component so let's take our title for instance here and I'm going to change this ion text area to an ion input which is what it should have been to begin with so we've got an ion input for our title here now and I'm gonna remove this ng-model directive our ion input will still have a name title I'm also going to give it a type of text but now we're going to use this form control name and we're going to set that to title this is going to allow us to bind to a title property in our component but this title property will be a sort of child if you will of this form group as a whole okay now we can do some sort of reactive stuff here which is pretty cool what we're gonna do is make a div class alert and we're gonna ng-if and say if the form is not valid or if this field is not valid then we're gonna cause this alert div to show so we can say if the form group controls and we can access title here so you can see that our form control is title and so form group has this controls collection on it that we can access using the form control name of title here and then we can simply say dot valid to check if this particular form control is valid something else kind of neat we can do here is we might say if it's not valid and it's been touched so in other words it's not going to be valid when the form first loads because it'll be empty it's required but if it's been touched and it's not valid and I got to pass the phone control name here again oops and we should put this in double quotes so if it's been touched and it's not valid then we'll show some alert and we can just bind that to some property so title alert I'm gonna just put this on two separate lines that's little bit easier to read okay so we've got this div and where you're going to show it using an NG if the title form control is not valid and the form control has been touched and then we're just going to show title alert here which we can define in our component okay so I think that's pretty cool and relatively clean anyway I'm gonna go ahead and just copy the I on item and make a second one here for the note content so it would say maybe note here and the name will be content as will the form control name okay so if the content is not valid and it's been touched and we can show some content alert okay finally we're gonna copy one more ion item and I'm gonna put it above here's the first item in our form and we're just gonna use this to provide a little date selector and so what we'll do here is I'm going to go ahead and actually just remove the alert and the input and we can actually say ion date time and then supply a display format here so do you month oops a and year and then we can also give this a form control name as we should eight so that we can pass that up to our component and this would be really nice we'll see in just a moment that this will provide us with a clean date selector for our app okay so one more thing we can do since we have access to this form Group object now is on our button we can make our button actually disabled if the form group as a whole is not valid so we can say form group dot valid so our save note button will then become enabled when the form group as a whole is valid okay so I think that looks good let's head back into the component now and take care of handling this new form it's not going to be all that difficult to get it wired up first of all will have a reference to our form group which would be of type form group and we'll just need to make sure that we bring form group in from manual forms and while we're at it let's go ahead and bring in validators and form control okay then let's create a property to hold our submitted form will call that note of type note and that will be the same note that we will have a date which will be a new date for its default value and then we'll have a title which would be a string which we can set the empty string and content string again we'll set that to empty string as well so we've got our constructor and what we're going to do inside the constructor when we have a new instance of this class is set the stop form group equal to a new form group and we can just simply define it as an object of these types here so let's go ahead and do that so we have a new form group and the properties on it will be title which is a new form control content which is a new form control and date so we have our three fields that we looked at in the template we have a title content and date and we have our save note method so let's double check back in the template here and resubmit add note yeah we want this to say save note that's okay you can call it post note or add note or save note as I have here just want to make sure that that calls the correct method in the component and then one more thing that we're going to add here is if you recall from the previous video when we saved a note we didn't really get any feedback and we had to click back in our application and go to the home page we're simply going to use the nav controller now to pop the current view off of the stack if you recall from you the first or second video and we talked a little bit about how ionic is specifically the nav controller is managing our navigation to the app it's managing it as a stack so if we pop the current view off of that stack we go to the previous view which in this case should be the home page so we save a note we will invoke our note service to save it to storage and then we'll pop the current view off which should take us back to the home page okay so speaking of the home page we should head back there and take a look at the component and as you can see we need to go ahead and use that new note interface that we built sort of model for our note and go ahead and reference that import here so we can import that from models note down model okay and you can see that it's gonna be upset now because if you recall when we use get all notes this is going to return a promise of a note array because we're using ionic storage now so there's a couple different things we could do here what I'm gonna do is actually make notes a promise of note array type and that's going to satisfy this method but now we're getting a promise of notes back and not a an array of notes and so we need a way to handle that we could call it that then on get all notes within which we could create a call back function and then set notes equal to the return but what I'd like to do instead is head over into our template and when we are using this for loop where we say let note of notes what I'd like to do is to use the async pipe here so we can type async and what this is going to do is simply return the result of that promise as it's available directly in the template here so you can use the async pipe with observables or promises and it's really nice in the case of observables because it will actually handle unsubscribing from that observable to prevent memory leaks which is something that you would consider doing otherwise in the component so it's nice to be able to do this in the template okay so that looks good when we click our ad note button we'll get taken to our ad note page and sorry about this but I see some typos here as well so obviously we don't need to end our double quotes here so just be sure and your ng if your start in G if directives here that they start with double quotes and end with double quotes and they wrap the boolean expression so I think that looks okay and now let's go ahead and fire up the server and take a look so it's not running already we can just ionic serve and if you have been running the server then you may want to consider restarting because we've updated our dot module file okay so you can see we have our application here we can click add note and we have our three fields so we can go ahead and set a date with the date picker that's kind of nice and we can supply some title it's a grocery list and and we can go ahead and save this note so we can see it here go ahead and add a new note and we'll go ahead and save that and so we can see our second note here and in fact if we refresh the application now we can see that these notes are persisting and that is thanks to ionic storage so if you need to clear out your local storage and you're using Chrome that in the inspector you can head over to the application tab at least at the time of this recording I believe this used to be under a separate tab but I don't remember the name if you're using a previous version of Chrome but in any case you can see the various local storage that chrome has here we've got web sequel and under that you can see actually underscore attic storage here so you can see all of our note data here under the notes key again with the value just being an array of these objects which happened to map directly to the note interface that we created in our app so if you want to clear any of this out what you can do is simply click this clear storage you can actually see how much is being used and just be sure that everything in your storage is selected and then clear all site and that's simply going to remove local storage for this particular domain and my case is localhost at port 80 100 so we were if we refresh now then we will lose our data but that was simply because we cleared our storage from local storage you also may get some weird things going on if you don't clear local storage and you make certain changes to your app you may see some unexpected behavior keep in mind that you just have this simple key value pair that's set up under web sequel in the ionic storage sort of database here which is currently empty because we just emptied it but yeah you're going to want to prevent some collisions there if you have the same key and then you all sudden you have brand new data so I just like to go ahead and clear out all of this local storage anytime I makes or major development changes to the app okay so we're almost wrapped up with our ionic app now what I'd like to do is just to make some aesthetic changes as well as the ability to select a note and then get taken to a note detail page if you will so let's go ahead and if the functionality of the note detail page worked out first and then we'll worry about making the app look a little bit nicer so I'm gonna go ahead and stop the server if it's still running for you just go ahead and stop it and what we're gonna do is I on accelerate page view - note so you can see the okay response here and then it generated this new page for us let's go ahead and take a look we can see it under our pages we have this view note directory which contains our template and our component as well as our s CSS file let's go ahead and hammer out the template since it should be pretty straightforward go ahead in as usual remove the boilerplate code and in our ion content I'm going to use an eye on card element here and the eye on card will have card contents this is just a nice component that ionic provides for us to display some data and here we'll have a on Cottard title this is gonna give us a sort of material design type card component to work with and here we'll we're going to have access to a note object in this view so let's go ahead and grab the title property off of that note object and then maybe just below it will have a div with class no date and we will grab the date just using interpolation here again alright then I'm just gonna keep things kind of simple we're gonna have a separator there and then we'll have a div that just contains the note content okay that's all good and then maybe at the bottom of our view here we can have an ion footer this is going to put a sort of div if you will at the very bottom of our view and in here we'll have a button I on button and with Anik we can specify a color and danger we'll make it a sort of red color we'll make it block which will make the button spread across the entire bottom of our view and we'll have a click event here to actually delete a note so we want the ability to delete notes as well as to create them and what we're going to do is pass our unique identifier in the form of create date here to a click event so we'll just go ahead and bind that delete note method to a click event on this button and then we can say delete note okay so that's going to take care of a very simple note detail page if you will that will call view note and so let's head into the component to kind of wire things up again I'm going to remove the boilerplate and we're going to inject a note service instance into our constructor of type note service go ahead and bring that in and we're going to create a new method on the node service to handle that delete but first we're going to need to get a note so let's go ahead and create a property note and whoops I need to bring in our note model as well and we're gonna say this set note is equal to this nav params dot get note and the way this is going to work we'll see here in just a moment we're actually going to pass a note to this view and the way that we access that object is by calling nav prams get and it's going to be a note object so we are going to set the note object in this class to that object that we retrieve using note params okay I'm not going to worry about this lifecycle hook but we will have a delete note method which will take this create date and then we're going to pass it as we saw in our template which is a number type because if you recall from the last video when we create any new note I just knew up a new date and that will be essentially the number of milliseconds since January 1st 1970 UTC so represented as a number and so will invoke our note service here and will write a new method on it call a delete note and we will find that once again using this create date as our unique identifier after that's done we can just simply use the nav control as we've seen previously to pop this view on the stack because the nav controller is managing our routing as a stack so we'll pop this view note page from the top of the stack which should reveal the next view in the stack which would be our home page okay so let's head over into our note service and implement this delete note functionality so we're gonna head there with f12 and then under get all notes I'm gonna create that delete node method and it's going to take our create date which is a number and so let's think about this for a minute because it's not immediately obvious how we're going to delete a single note given the fact that when we're using storage here we're basically updating a single key that contains an array of notes as its values so the key in our local storage is notes and we've got this note array as its value so the way that we're going to delete a specific note given its unique identifier is not of course to delete the notes array but rather to return that notes array as it is except for the note that we want to delete so let's do that so we know we're going to set this that notes and we're going to save this that notes is equal to itself but then we're going to use filter and we'll pass it a callback that will basically say return where the create date on a given note is not equal to a create date that we pass our method and then once that's called then we can once again set that in storage so if we were to have many other methods here than we might refactor since we're using this line repeatedly here where we're just setting this notes key to the stat notes but it's fine here as well but again notice what we're doing is we're not in a sense deleting if you will but rather we're using filter to return that notes array with all of its elements except for the one that contains the create date for the note that we want to remove so I think this is kind of a nice example of using filter when we're working with an array of objects that we want to mutate in some way okay so that's all good but now how are we actually going to get to our view note page well we're going to want to get a note from the home page so that we can display its data all of its data on this view note page so I'm going to add one more method to our notes service here and we'll call that get note and we're gonna pass it a createdate could be a number again recall it this is our unique identifier for a given note so here we're going to use the stat storage again and we're going to get obviously we need to get a note from our collection of notes so we'll start with getting that collection using the key and this is going to return a promise so we'll write a couple right then and then we'll write a callback function here so that when it resolves we can do something with that promise so what we're looking for is a single note so what I'm going to do is create a private note property which is of type noon and so we're getting that collection notes from storage as a promise and so when it resolves we're going to set this dot note equal to all of those notes for getting back or rather a copy of them that we can get using the spread operator again and now we can use that find to find a note by it's created so create a is equal to the create date that we pass this method and then we'll return this note so similar to how we use filter previously to return a collection of notes save for the note that were deleting that we looked up if you will by the it's create date when we use find we can explicitly return a single instance of a note from an array by looking for a create date that matches on any one of those notes and then simply returning it so now we have a way for our service to return a note given its unique identifier to any other component that is requesting it and where might we want to request that well we want to request it on our home page where we have a list of notes so we want to be able to click on a note and when we click on it we want to get taken to our view note page and if you recall our view note page that we were just working with has a way to receive a note object from some params so let's wire this up now so on our home page template what I want to do is just add a simple click event binding so click to some method called get note and of course we have the note so we can just grab its create date okay cool so let's write this method in our component so under add note maybe we'll write a get note method takes a create date just a type number and we'll invoke our note service and specifically use the new get new method that we just wrote passed at the create date that we're passing in from the template and recall this is going to return us a promise so then what we'll do is we'll simply say when that resolves we set this dot note because our promise will return that note object that it's finding from our array and so we can go ahead and create a no property here I'm just gonna explicitly make these private ok so now when this promise resolves we set our note and now that we have the note we can actually use our nav controller again to do something pretty cool which is to actually push the view note page so bring that in so that of course will bring up the view note page but the view note pages constructor is expecting us or you know has the ability to receive some object so as a second parameter to push here we can add any nav params that we want to pass along to the view so we're going to pass this object we're gonna call it note and we're going to set it equal to this dot note so what's neat about this is we're just passing some object to the view we've got a note property on it we set it equal to this note that we've retrieved from our service and then back in our view note component in the constructor we can see that we are going to immediately set this note on this page to some some nav params that we're passing this view specifically the note from that object that we're passing so this is kind of a neat way I think to pass data between pages in ionic simply using Napa Rams and the nav controller so if we've wired this up correctly we should be able to now see it if we start the server back up okay so let's take a look we'll go ahead and add a note and now if we click it we see that no component factory found for view no page did you add it to ng module about entry components and no we did not so let's go ahead and do that now so I forget to do this often as I've been working with ionic because it's not something that we typically do if we're using just a plain angular project using the angular CLI but take a look in at that module about TS and note that we have some entry components in an array here and we need to add any pages that ionic is going to need to render into these entry components which will include all the pages for our application so let's go ahead and include that here so if you note page go ahead and make sure it's imported likewise we'll add it to our declarations so at least at the time of this recording the ionic CLI is not adding view note or it's not adding new pages that we generate to our declarations or entry components array okay so let's see if that has solved our issue I'm going to go ahead and stop the server and restart okay notice that when you restart you should still see what's in your local storage unless there's something kind of wonky going on with your local storage in any case now when we click on our note we get taken to this page and so that's pretty cool we also have our delete note button so if we delete it let's see if this is working it appears to be working because our note no longer exists so let's add a couple of test notes here and we should be able to click on a note and yeah we can see it that's pretty cool we can click on another note and we can see some different data so let's see what happens when we delete a note and we can see that the new net that we had just created disappears okay so now what I want to do with a basic functionality of our app more or less complete yes let's go ahead and just apply some very basic styling to the app and just kind of clean it up a little bit before we deploy it using ionic view so I'm gonna just minimize this and now we can even just stop the server and what I'm gonna do is close out a bunch of these windows and what I'm gonna do now is take a look in our assets directory so we have in our assets directory this images folder which currently just contains an ionic logo in there so what I'm gonna do is drop some background images here into this directory and this website just provides a bunch of free stock photos that are really high-quality so they're kind of nice for use in building sort of test applications or demo applications I'm not affiliated with these guys in any way I just figured I would give you a heads up that this is what I use a lot of times and yeah I find it to be really easy to find some good photos here let's find some background images all right that one looks good and it's gonna download like a medium size this one looks good will download this one and then I don't know maybe eat something like this looks good okay so the grad sent images I'm just going to drop them here into the images directory and I've just renamed them to like BG one BG 2 & BG 3 alright so those look good now what we can do is in any one of our style sheets so let's take a look so like in home we'll go into our home s CSS file and I'm just going to paste in some Styles here so you can see that we can sort of nest our selectors here which is kind of nice so we can see that in this ion content div that we'll have in our home page component I'll just have a background and need to fix that so it's going to be in assets / images and then we'll have this BG want a peg you can provide a relative path in your URL and so that should work likewise on our add note page if we go into the a CSS file there I'm just going to go ahead and paste we'll grab our second background image and then finally in view note I'm going to go ahead and paste and you can see that here we'll use our BG 3 jpg so again just use whatever images that you've collected and named in your assets / images directory this other stuff here is basically just applying a little bit of a gradient overlay to each of the images this is an effect that you may have seen before where we have a sort of semi transparent or semi and that's going to get overlaid on this background image I also have some CSS class selectors here just to do a little bit of styling to some of the other elements on this page okay so let's go take a look I'm gonna go ahead and start the server okay we'll inspect to get more of a device type view and so you can see there's our background it's pretty cool if we add a note we can see another page with another background and if we view a note again we have a third background with a little bit more styling on our page here so this is pretty nifty we might add some more things to sort of like maybe add the date to our collection of notes here and you could do that very easily for instance if we just head back to the home page it's really up to you but maybe you have some span here that contains the note date for instance and so you can see it here and then you could just style it however you like maybe we move it back here and I think the name of our class was just date so there's just a little bit more styling you can do and you can just play around with this and get it to a place where you're happy with it okay so now we've sort of completed a demo version of our application there's certainly other things you could do here maybe you have the ability to edit a note or copy a note or maybe even like text a note or something like that there's lots of things that we could do from here but we have a basic crud application setup or at least create read and destroy so like I said you may want to you create a method to edit a note on a page that shouldn't be too difficult we've looked at ways to access a note directly using the unique identifiers that we've chosen here and so you may want to consider adding a method to your note service to say update a note and you could again get that note just by using this create date that we're using as you fire so I'll leave that up to you to make improvements to the app make updates or add new features for now let's go ahead and see how we can actually deploy this app to a device using ionic view so at the time of this recording if you head over to ionic framework comm / Pro / view you can get some information here about view basically a way to yeah as you can see here share test and click feedback on your apps and this basically allows you to do that without ever going through the App Store's so not sure exactly how it's working but basically you would download view on to your device and it serves as almost like a container for your application so I have an iPhone and I simply downloaded the new view app or the newer view app note that there is a legacy ionic view which I believe has a white icon but the most up-to-date view app again at the time of this recording has an icon with a blue background so if you're following along here go ahead and get the current view app if you're using an iPhone or Android here and then go ahead and sign up and note that this is all free at least just for creating a small app here to test out on your own device so I'm going to go ahead and login to my account here and you can see that I've previously deployed an app so just to start fresh here I'm going to go ahead and delete this app and we'll go ahead and create a new one we'll give it a name I just got caught mine it's again call yours whatever you like we'll go ahead and create it and then it's just going to give you some very straightforward instructions to build and deploy your application so what we want to do is connect an existing app and this is going to be very similar to using other sort of platforms as a service so if you're using like say Heroku or something to deploy an application and this is going to look very similar basically you're gonna push a git repo containing your ionic code to ionic and it's going to take care of building your application and deploying it then on your device you can log into your account and access that application and then launch it directly from ionic for you so let's go ahead and just do that let me go ahead and stop the server and so we're in our project directory we want to make sure that we have the latest ionic CLI okay so at the time of my recording I've got ionic 3.1 9.0 and then we'll go ahead and ionic link and then you pass your pro ID to link the current app to your ionic account and then we can go ahead and get push ionic master here okay and I forgot my password a few times but luckily on the third time we got it ok once that's done we should be able to refresh the page here and you can see the branch that you have here along with the latest commit so if we click here we can actually see the build log which is pretty cool you can even package a build for iOS or Android which will require you to upgrade to a pro account and you can do some versioning here for iOS or Android so it's pretty cool if we click head back to our account here you can see now that we have an app associated with our account called my notes and so if you have the ionic view app on your device you can go ahead and log into your account and then deploy this application for testing to your device

Channel: freeCodeCamp.org

Views: 28,467

Keywords: ionic, ionic tutorial, angular, javascript, ionic framework, cross platform, ionic side menu, ionic tab bar, ionic framework tutorial

Id: fKyf_esYgcA

Length: 66min 46sec (4006 seconds)

Published: Mon Jun 11 2018