Ionic 4 Crash Course for Beginners - Build an App

today I'm gonna show you how to build this snazzy looking app oh and hey I'd like to mention this video is sponsored calm now it's a brand new year here in 2019 and Skillshare will help keep you learning and thriving as they offer twenty five thousand different classes in coding design business and more for instance you're about to watch my eye on a crash course but you could watch all these other ionic courses of skill share to expand your knowledge afterwards skill share is also super affordable with the subscription that only costs ten bucks a month but if you're one of the first 500 of my subscribers to click the link below here in the description you get the first two months free so take advantage all right so you're probably wondering what is this app what was that thing at the beginning of that I showed you well Betsy basically I'm going to teach you ionic ionic four in a crash course sort of way and in doing so show you how to build this app now I built this app out of necessity really or personal preference really and basically I when I go to the gym I wanted to know quickly and easily you know when I should start my next set don't like to go by feel because sometimes I rush it you know so usually before I was using the standard timer stopwatch app that came for Android but that's not very good for my purpose I thought I make something custom that is much better I for my purposes so basically at the top we have restoration and if we click it we'll see we have this cool little I this selector selector down here that allows us to specify the restoration in terms of minutes now usually I'm around a minute and thirty and then as well as the seconds so we'll put thirty right here and then hit done and then it gets reflected up at the top and now what I can do is when I walk into the gym and I'm ready to start my my routine or whatever I can click I play on this and I'll do my set and then when I'm ready to rest I click up here and this gives me a visual sort of very cool looking radial SVG representation of I you know my rest in when it gets to around a hundred percent full circle I then know that I can start my next set I can get done I can keep oppressing this and this overall timer down here is just my overall workout duration I kind of wanted to know that as well so two separate things occurring here and we're going to be learning a lot about ionic in building something like this all right so before we begin make sure to subscribe if you enjoy this and you know you will so make sure you know you do hit subscribe in the little Bell notification icon to get notified when I upload new videos which I'm doing all the time every week and also you should understand first and foremost before you begin I you need to understand JavaScript basic JavaScript also angular we're going to be using ionic with angular you can use ionic with view and react as well but by default I when you use the angular or the ionic CLI it starts with angular so I do have a 100% free course on angular 7 which is what I on ik 4 uses so make sure you watch that if you don't have any clue about angular alright so let's go ahead and get started all right so here I am in my command line I'm using commander CMD ER it's a console emulator for Windows you can still use the regular command line or whatever and hop into your code folder or wherever you store your code projects and the first thing you're gonna make sure you have of course is no js' you download that from nodejs org to see if you have it note - v just hit enter and it'll let you know I have an updated mine in quite a while actually but still just I download it install it reload your console and you can run this command and then we're gonna use the node package manager which comes installed with node to install the ionic command-line interface alright so I the the way you do that is NPM I install or just I - g4 global and then that will install it where you can access it everywhere on your machine and then ionic in this hit enter so I already did this just yesterday so I have the recent version you're going to make sure even if you had it installed before you want to have the latest version so that you working with for in the latest version of angular once that's done and you have that installed then we can use the ionic CLI to start a new project so we can just type in ionic start and by the way always refer to the documentation right here there's a CLI installation page it's going to give you different options of how to get started and you can actually run start with other commands like giving it a name and then a default template starter template but you could just type in what we did which is ionic start and it will give you a couple prompts right here so the first one I'm gonna call this just rest maybe two hours rest ER for like rest between sets I don't know and then now we have the starter template option right here so well we can by default you see it sits on blank you should use your keyboard up and down arrows you could also have one that starts you off with a side menu scaffolding or also a tabs scaffolding all right so it's just it sets up it gets rid of some of the boilerplate for you when you choose those I'm just going to choose blank because we have a very simple project we're not going to have multiple pages and this seems to be just the best place to start all right it's also asking down here near the end of the installation if you want to install the ionic app low SDK and connect your app you can learn more about that here I'm just gonna hit end for no all right and there we go alright so notice it does mention down here get ionic dev app for easy device testing so it's an app that you can install on iOS or Android that makes it easier for you to actually test your project on your mobile device while you're developing developing it so you can try that out and once we're ready to CD and into the project and then I use Visual Studio code so being that we're in the current project here we can launch it with code period Visual Studio codes a free code editor by Microsoft very popular it many people are using these days and also before we hop back into the code editor also run ionic serve and if you are using the dev app you would add a - dev app I like this but we're not going to do that I'm just going to hit Onix serve and momentarily it's going to build out the project and it will launch the project in your browser you do it your default browser so while I wait for it to do that and by the way here it goes it still takes a little bit of time it's waiting for it to bundle and then it will show up here in the browser and it should be here any second and I'd it'll just show you a default template that the starter template with some you know default HTML and all that stuff there it is so as you can see it doesn't look like it's in the context of a mobile app we could hit ctrl shift I and now it's more in and I can iPhone X and this is what our very simple app so far looks like alright so we'll be referring back and forth to this and there is live reloading all not on that that good stuff that's worked in here so let's talk about the projects try structure a little bit first we'll go down to package dot JSON and this lists all of our dependencies and we can see that we have ionic down here and also angular so when you start off by default with the angular or the ionic CLI and you start a new ionic project it works with angular by default now you can't actually use ionic with view and I believe react as well but you would have to i read the documentation about that so we're just gonna be using angular and I should definitely say you need to know angular not need but I really highly advise to actually learn angular first before you hop into ionic because ionic realize heavily ion angular or and/or view or react depending on which route you take so fortunately for you if you check out my channel I can go to a channel search maybe if I can remember I will put it in the description here on YouTube I released a hundred percent free angular 7 course and you as we could see this is based on 7.2 just just a several months ago so definitely check that that it should be get that that would get you far enough just to have a basic understanding so that where you could be a little bit more comfortable working with I'm with anionic alright we're basically always working within this source folder so inside the source folder we have our app this is where our components go and again this is all this is angular specific stuff out routing that's all angular routing I and then we could also see we have a home directory and this is created by the CLI and if we check take a look at home page I got HTML we'll see we have ionic blank and the world is your oyster so if we look back to your browser you'll see the same thing ionic blank the road is your oyster this is where you update all of that good stuff so I for our app oh by the way where's this like you see this is some default styling applied on here if you're interested in you know understanding where this are coming from and what else you can do in terms of custom like not custom but predefined UI components here in ionic and you can see all these interesting HTML tags go to the documentation right here I and this is ionic framework comma four slash Docs and just click on components right here and you'll arrive at this page they have a ton of them and they're all I the type of UI components that you know are made to look like native elements if your fab the floating action buttons you have a ton of stuff so we'll be using some of these but yeah just just understand when you want to use something I the way their documentation set up is very nice sometimes they'll give you a preview of what it looks like and then they have usage showing the HTML I write here that was necessary to create this it will also show you properties and methods and as well as any CSS classes that are you can use to customize them alright so again will refer back to that now for our very simple app I don't need a header I don't need like a navigation at the top I don't need the hamburger menu or of any sort so what I'm gonna do is just delete this entire thing and hit save so now once we save you'll see the live reloading in action it takes a little bit of time you'll see its app updating recompiling it takes like six seven seconds or so any second now this should go away and there it is okay alright so now I let's try to get the like change the background color for instance if we come down to our theme for will see we have a variables dot sass file and this is new and ionic for either using actual variables these aren't sass variables these are native CSS variables D it's applied on a root selector element and there's a primary secondary and tertiary as I used to pronounce that knob stupid success warning danger dark medium light alright so if you look at these these all I they're basically different they provide different shades of like the the primary or secondary or tertiary tertiary colors I and you would think it may be a little bit it's a little bit confusing because how would you change these values and know what these these shade and tint value should be well if you go over to I the ionic Doc's there's a color generator so if you go to guide and then come down here and click color general you'll find this page right here and then you can specify a color and then it automatically provide you with the shade in tints and then along with the code output down here so let me show you how this nuttin I know my color primary color for this app isn't gonna be blue I want it to be kind of like this purplish color so what we'll do is I'm going to go ahead and paste in or not paste in rather but it's going to be a specific eye color code cd0 0ff now it automatically shows us a preview which is really cool i and it sets up our shades and tints and it's also reflects those values down here from which we can copy it because i know the only one that i changed was primary so gonna take those initial declarations copy them and then just override them right here paste and save so now when we save this and going back to the correct window somewhere around here there it is this went from blue to purple or pink or whatever that color is all right so very very cool let's change the background to black as well and this is one of the things there's no variable for the background right so what do you do you go to google just like I did and you type in ionic for background color I and there is a result that just lets us know that there is a variable for it that although it's not in here and that variable happens to be right here so I'm just gonna put it right here in the root ionic or ion - background - color and just set it to black and when we do this this will update momentarily after it's done recompiling in the background will be black all right so now what we'll do is I want to getting in a circular progress bar this is another one of those things or those times when I wanted to you know I didn't know if one existed I didn't know if one existed in terms of like an official ionic opponent as one of those UI components so I just went to Google and I typed in ionic circular progress bar and there are several different options that you can use that are I you can install through NPM the one that I found is relatively recent and it has a lot of options I is this one right here right here's ng circle progress so there's a demo it tells you how to install it I and that's exactly what we're gonna do so we're gonna NPM install circle progress and it also shows you how to get it set up down here as well I'm just going to close it out for now so we're gonna go back to our console editor or console command rather alright I in by the way I'm gonna open up another console here and go back into CD rester no code slash rester alright and then I'm gonna run that command alright so I this initial one I think this is in I'm gonna close this tab this doesn't have anything to do with our project so we just have this I didn't want to have to stop this in order just to install this one so there we go that one's all stalled so now we have to add it to our home module TS file right here alright so first we import it at the top and then we add it here to the imports array and I this is I'm taking this right from that circle documentation that I just closed out I so we add it at the bottom right after this one right here or you could add anywhere in the rate doesn't matter put a comma and right here so ng circle progress module or Rou and this lets lets you specify some defaults and make sure I put this in here correctly there we go and I one thing that I'm setting this is all from again I copied and pasted of this stuff but I did add three properties on my own animation set the false responsive is true and render on click is false so you may be wondering what that stuff is I should bring I should not have closed out that a package or thing right here the documentation if you come down here you'll see that it habit has a ton of different options associated with this circular progress so we have percentage max percent radius you have a bunch of options which is really cool for this I little library and it tells you you know what they do some are obviously you know they're self-evident but those are the options that I set so you can set those as well okay so let's save that and now if we go back here we'll see we have a usage I example just copy it real quick and then we'll go into our home page HTML well got all this and we'll paste it in right here alright so let's go ahead and save that and now with any luck it should update once it's done recompiling there we go how exciting is that all right and you can see it animated and all that cool stuff so next i what we'll do is we're gonna update this and i'm going to update it with a bunch of other options those options that i just showed you on the documentation so instead of me i just kind of describing exactly what's happening i'm just gonna paste this in right here and then if you want to you can pause this and then i go through and specify or you know make make sure you have all the same options and values the ones that are worth paying attention to is percent notice that we're binding it to something called percent and this is a property that we're going to define in the component which is great down here in this typescript file home page a TS also max percent it means it's always going to be based on a zero to 100 value or percentage value and also radius that's the other important one is I set to another property that we're going to define called radius alright so radius will be basically a hundred percent and then percentage is going to be the active percentage that we'll set up in the component so there's other things I'm doing like show titles I've show subtitle Falls I basically didn't want to show anything in the center which it was which is what we currently see right here like the progress for me in my use case for this app I just didn't need I don't care what the percentage is all I care is about having this visual representation that I can just set the phone on the floor when I'm at the gym and I could see roughly you know when I'm ready to do my desk next set all right and then just some some other things like we're you can use a stroke gradient which is really cool and you can set those color codes here notice though when it comes to the color codes you're using a double quote and then a single quote inside otherwise it won't work but just experiment with it so let's save that and when we save it you're gonna see that it will go away and I think we'll just have a tiny sort of circle in the middle with nothing happening we also want to add a click event alright so again this is where it helps to know and to understand basic angular so when somebody clicks on it you're thinking why would you want to click on the graphic or that SVG well it's easy it's big that's what I want to tap every time I'm ready to start resting after a set is none so click equals start to time we're going to create a function called start time all right so let's save that and we're gonna go back to our home page ts file alright I now what I want to do is actually before we get there just go back to our up here I want to show you we basically need a way to I let the user specify the amount of time that they want to rest between their sets at the gym so nobody's resting more than like a minute based value so five minutes two minutes whatever so we're gonna have a way for them to specify the minutes in the seconds for me when I'm at the gym it's usually around a minute and thirty seconds between the sets so I initially I experimented with just adding a text field and then a select menu a drop-down menu they're not that user-friendly one thing after looking at the docs of the UI component section of the ioniq documentation I found that there's a date/time picker all right so this is what that woman looks like all right so it's again it's in the component section of the docs and it's called eye on date/time all right and it gives you an example usages examples here like start time and it has this really cool let me move this over I make sure I'm not on top of it I just think that you can adjust here all right and it's all customizable and so again go through the Doc's to see you know how you can customize it for us we just want a minutes with leading zero and then the seconds as well so it's going to be mm SS and again it shows you all of the codes that you can use for this all right so I'm just gonna copy this one right here we're gonna paste it up top all right so mine the label is not going to be date because we're not choosing a date this is gonna be more like rest duration all right and so then our display format it's just again minutes and seconds all right so all right we're also gonna have a placeholder again this is all in the docs will just say tap here that means if there's not one chosen I for whatever reason then I'll say tap here and you'll see how this works in a second we're also going to have what's called two-way data-binding again this is angular specific stuff so we set up to a data binding and I'll mention what that is in a second through a bracket and then the parentheses and we say ng model and we bind it to a custom property that will set up in the component called we're just going to call it full-time now what this two-way data-binding does is this it allows us to set a value in our component like full-time equals maybe a minute and 30 seconds for a default value and that means the I on date time when you use the UI which I'll show you in a bit it will automatically be set to the minute 30 second or whatever the values that we specified in the component but also I if we use the on date/time that little picker where you drag up and down the the minute in a second it'll also I it's two-way it'll also send the information to the component itself so that's what that does so basically it's just a nice way of setting and retrieving the the value for the date/time picker after that is nothing yeah okay so I let's save that and we'll see when it shows up we're not going to be able to see it very well because we have the background set to black so it says that tap here but it looks ugly what we can do however is set on the eye on item property color equals dark and that's in reference to the variables down here where it says dark so if you want to make customizations to that that's where you would do this so when we go back here after saving we can see now it's a little bit more visible we can see restoration the tax and the top here if we click on tap here sorry I you'll see it looks really ugly right we can't even see anything I and we'll get to that in styling that in a bit but first I want to change just a couple things here I before we get to that point so let's go ahead to our home component file home page TS and i want to define a couple of different things so first when it comes to our circle circular prog as I mentioned before we're binding it to a percent in radius property so we have to define those in the component class again this is all angular stuff so I can't stress enough that you need to know angular so we're gonna do the typescript way of defining these properties so we're going to say percent it's a number and we're going to make it zero i radius as well will be a number and it's we're gonna set it to a hundred there we go alright and then we're also going to add in full time and again that's a property that's set on the date time picker will say any and we'll say zero zero zero one thirty so this will be default value that we set because remember we have two-way data-binding occurring on that day time i component and let's go ahead and save that and let's go and check the result in the browser notice it now says 130 if we were able to see this this text right here it would say 0 1 and 30 also just to show the that this part is dynamic for % let's just change it from 0 to 50 and you will see that it will the progress bar will be at 50 and look how cool that is with the the gradient that we have and again that's based on the properties in the circle progress component all right so let's that set that back to zero now let's get this so that we can actually see the overlay down here now sometimes when it comes to your eye components your your ionic components sometimes it's easy to style them and sometimes it's not and unfortunately with the date/time component in the documentation there wasn't very many CSS variables out of the box that you could so what you do if you need to style something custom because there's obviously problems here is you you use your selecting your element selector here and then just try to figure out what it is that you need to change based on these elements right here so again like for instance so you can see there's a couple of these ugly sort of lines happening right here the borders and so when you click on them it'll let you know all of the CSS properties right here in this section and you need to kind of work your way and trying to find out where you need to edit stuff and so I already did that and I spent the time doing that and so I'm just going to paste in some of the over rights for those here so we can do that we could do that in our home page sass file which would only be specific to just this component or you can also do it in a global sass file down here outside of the theme just underneath the theme folder alright and so we could do that just at the bottom and I'm gonna paste in just a few roll sets to make that thing not look horrendous now notice it says tool bar picker tool bar and another class called ion picker iOS there's also MD for a material design which shows up for Android phones alright so just be aware of that you may have to add you know a second version of this if you wanted to apply to both I believe there's also an attribute that you can add to these components like the date time picker where you can specify if you want to have MD for material design or by default I believe it's at i/o s alright so if we save this in again you could just pause I'm gonna make this available obviously through github so you can just go get cloned that and then just copy it as well so if we save this and now we come back we can now see it's much better the cancel and done probably should be changed to white but I'll let you guys do that but look how cool this is these are all just cust CSS adjustments that I made again there's not many but I it makes definitely makes it look cool here and a lot better than what it was before so again you can see if we change this to like I don't know something random hit done it updates right there automatically okay so another thing I wanted to do is because I love Montserrat that font it's kind of like a joke on my channel we're going to import the Montserrat font here and I'm going to sending ion content which if you remember ion content is basically a parent element of everything that we have we're going to set the font family to Montserrat right here so we'll save that and I will be good to go okay so now let's try to get our timer working so this is where we're going to be working a lot within the component file of our homepage at TS file all right so I one thing that we're gonna want to do here let's move this up we're going to define some initial properties now first I remember we have a start time method on click for circle progress that's what will start it so let's define that right here start timer all right so the first thing is we're going to be using a Java scripts and again this is specific to angular this is just vanilla JavaScript basic JavaScript stuff which is also why you need to understand first basic JavaScript then angular and then you can get to ionic but we're gonna use a set interval to create sort of like our timer that will adjust our percentage value as needed based on the time that the rest time that the user specifies so we're gonna bind the set interval to a property called timer so we're gonna define it up here so we'll say timer it's gonna be tough type any equals false so we want to want to make it a boolean here of true or false just because I I in a bit we're gonna bind the timer to that set interval so so I will say this that timer equals false now why am i doing that twice it's because a user will I will be able to click on that SVG radiographic multiple times and each time I do that I want to reset it to false so hopefully you understand that we're also going to do the same thing to this top percent equals zero and I'm gonna have another one called this dot progress so we're gonna call progress shift alt and down by the way is how I replicated that line real quick progress is going to be zero all right so far so good now we're gonna define just a variable within start timer called I'm just gonna call it time split so we'll say let time split equals this dot full time now full time remember is this element right here and this is the the value that it returns from the date time but we can't really use this so we're gonna have to use JavaScript split method which is done like this so it's going to turn this into an array so time split will be an array where we have three different values we have hours minutes and seconds right here so next we're gonna create two more properties for minutes and seconds so the minutes is going to be a number equal to 1 and then our seconds and I'm sending seconds to any because when I was preparing this project typescript was giving me a bunch of problems some warnings validation warnings so I did not want to deal with that so I just sent it to any and then I for time split underneath there we're gonna say this not minutes equals time split and then 1 so the 0 the the array would 0 would be this position we don't want that then we want for seconds will be to which would be this value right here okay and then we need to get the total amount of seconds I so to do that we're gonna say let total seconds equals math dot floor and we'll say this dot minutes times 60 because I you know there's 60 seconds in a minute hopefully you understand that and then we add that to I we're gonna use parse int this dot seconds and we're adding parse int because if you don't I total seconds in this case if it were like 1 minute it would be 60 seconds plus I whatever the second value is let's say it's 30 it would actually show 60 30 as the result but we need to make sure that this is seen as an integer so it actually changes it to 90 okay after that we're gonna set up our timer so this timer equals set interval oops there we go and that here alright so in the interval itself I we're going to say this dot percent equals math.floor this.top progress divided by total seconds multiplied by a hundred alright so if that's confusing I wasn't exactly sure how did how I wanted to do it where you know right when I started this I created this project yesterday I had to experiment a little bit with the math just to get the correct percentage math was not my strong suit but we're dividing the progress by the total amount of seconds and then to get the actual percentage value we multiply it by a hundred this dot progress then we increment remember this top progress by default is set to zero because we're sir you start that this the start timer it's going to be as easy or 0% then we just do this top progress plus plus which means add one to whatever the value of this top progress is all right right here for this set interval the second parameter is going to be 1000 sec milliseconds which is one second so it's gonna run through this every second adjusting the percentage value which is going to then and because this right here this percentage right here this property binding is bound to that property so that's how it's going to ticket one by one every second all right i one other thing that we need to do we have to have an if statement right here so it's going to be if this dot percent is equal to this dot radius now radius remember is the the hundred percent it equals 100 if the percentage is 100 if it gets itself to 100 then we need to stop this interval and you do that through I the JavaScript clear interval and we pass in this timer so that simply means it's gonna stop this timer once this gets to a hundred percent simple enough all right so I now that should be enough for it to start to work so let's save it we'll let it reload here as you can see it's recompiling now remember we just click on this to make it work uh-oh start time is not a function let's check that out so why was that not work up start timer there we go sorry about that let me got close some of these out by the way all right so now let's click it nothing seems to happen but it's gonna start going right there look how cool that is so I remember not gonna wait for it to get all the way but you can now use this for instance let's make it something high like seven minutes between sets well it done it's not going to update yet until you click this again and yep now we're having ourselves in issue all right so we want to make sure that when this is clicked again that it does not I know that it does it checks to see if there's already a timer like currently being live activated and working through the code right here and if so we have to clear that as well so we what we do at the very top of start time is if this dot timer so that means if it's currently a timer down here then what you can do is just clear interval this timer just like we did below so now if we save this let it reload and we hit we click it will see it starts to go now theoretically if we didn't have this code like we didn't just now and we clicked it a bunch of times you can see it go crazy but I if we click it once maybe four times you would see it right now rapidly going crazy but it's not doing that because it is clearing the interval every single time hopefully this makes sense okay so now I let's go ahead and one of the things I wanted for this app for my own personal use I wanted to also have a timer showing my my entire workout duration I so right when I click the button or the play button that we're gonna have soon I I wanted an overall timer that doesn't get reset until I hit stop in a different button down here I could click this as much many times as I want because I have multiple sets and this is just a kind of visual cue for myself but I always want this time are going down here so we're gonna have to set intervals or interval based timers and to do that let's just do the HTML real quick and I'll say I well you just use paragraph elements and then we'll say in by the way this right here what you're about to see it's just sigh interpolation as it's called and it's just the way to show variable I inside of your template so we're gonna say elapsed dot H so we're gonna create in our component in object with a few properties one of which being H for our I usually don't go to the gym longer than an hour it's like 45 to 55 minutes these days and then elapsed and we're gonna separate them by the colons like you normally would like in a stopwatch elapsed time and elapsed dot s for second now this won't work because these are not yet defined so let's go to our homepage and let's define that in our component so coming down here we're gonna say elapsed we're gonna set this as any as an object so H by default will be double zero so you could just do one zero but then it would just show one zero shift alt in the down arrow key M and s will be the same value by default all right we're also going to have another timer because again we're working with two different timers so I'm going to call this one overall timer actually I'm going to make it overall and then there we go timer like that same thing and he goes false and now I are going to go to start timer and just under there we're gonna just say if this dot overall timer I is not currently a timer essentially we're gonna say we're gonna call another function rather progress timer so this doesn't exist that's why it's given that to us so what we need to do is define it down below so again what's happening here is when somebody clicks on SB Geographic I runs this method right here this function and then I it will say if this overall timer is set to false then we want to run it and the reason this if States statement is important is because you know we're clicking that that ask that SVG graphic multiple times and calling this function multiple times we don't want to keep on resetting this overall progress timer because that's the timer that shouldn't be reset so now we'll come down here and we're gonna say progress timer all right so now the progress timer was a little bit tricky I actually did a little googling on it to try to get this all working correctly so what we can do is let countdown date equals new date then I we're gonna set our overall timer to set it in a roll all right inside of here I we're gonna save our or we could just say let distance equals now minus our countdown date I get time alright so what this does is make sure that's spelled right I so basically Oh before we get to that as well I've we need to put in now I forgot that line we're gonna say let now equals and I'll describe what this is doing a second date get time alright not data cue date there we go alright so now is the current time and this is basically finding the distance between now in the countdown time for distance right here alright so next after that this is where it gets a little bit tricky and I didn't come up with this code myself I googled it to try to figure out the minutes and seconds and hours the the mathematical calculation for that so what I'm gonna do is I'm just gonna paste in three lines control B to get rid of that sidebar there so what we set is our object properties of our minutes and seconds - this right here math dot floor we take our distance and we use some crazy-looking mathematical formulas that will give us I a way to represent the hours in the minutes and the seconds that have elapsed now one thing that's annoying about this is if you were to save it I the progress timer it would show just single values I like single digits like the hour would be a zero just one zero and the minute would be one 0 etc I wanted to have always to have leading zeros at least two of two places so zero zero zero zero zero zero like that so the way we do this is and again this is a function that I found online that lets us do this real easily outside a progress timer we create a function called pad that takes in a number in a size and then up here we can use pad and we can do it like this so we're basically just taking these that were set up here and then we're gonna Pat it with these as zeros and that's what that does at the very end here in the second parameter of set interval again this is just one second so a thousand milliseconds so now we can save this and we're not going to be able to see it because the paragraph tag is black on black all right so it's down here but you can't see it so let's fix that quickly so we're gonna go to our I not global we can go to our homepage that sass and just paste that in and let's check that out in the browser it's recompiling right now there it is so now if we hit play or click that up there there it goes now it's cool is this is going to keep going this timer because it's a separate timer it looks like they're aligned but they're not they're not the same timer if I click this it's going to stop this time and it reset it but this one's gonna keep going and again that makes sense for me because I want to know my overall workout time down here these are two separate things now you'll notice one thing that's annoying is this is kind of long now this SVG graphic is taking up a lot of space and we can see that because it says SVG and it's just weight unnecessary space that's because and this is unfortunate the whoever developed this they have hard-coded in their the height value of this SVG element unfortunately if we try to reset this see we could set height right here in line to 50% and there we go much better right in fact it would probably be a little bit better and maybe around I don't know 60 but the problem is is if we refresh this of course this doesn't I this doesn't stay in the browser but the one problem is if you try to overwrite it like through CSS I couldn't get it to work either even putting the important flag I could not get it to work so what I had to resort to doing I'm is I had to find in the node modules folder I the SUV it's called ng circle let's find that real quick ng circle I believe it's called ng yeah circle progress so finer ends G circle progress we go to index TS and I'm going to type in 100% and I'm gonna find the one that we need to change which is right here height right here okay so I and this only applies if you have it set to responsive which is in the the home module when we set it up I put you can see if we just change this to 50% we save it I will see that it then updates this when it comes goes back to recompile there it goes so now it is actually 50% as shown right there okay so now that we have that annoying quirk out of the way we need to start and stop button I down here it's not obviously that you click this plus there's no way to stop this timer itself so I'm gonna use initially I use this I get a normal button an eye on button which you could find in the UI component docks and here it is just shows you you can I place these things anywhere and style them with a lot of different options down here so just go through this if you wish very very cool so that's the that's the one that made most sense to me also because I did not want it to I don't want a big button in case I accidentally like pressed it so yeah in stopped it by accident so let's go ahead and do that real quick so we're gonna go into also let me close this out we're going to also come up to tour a HTML and we're gonna put this at the bottom alright so we're gonna start off with eye on fab and we're gonna say vertical its bottom so we're gonna position it to the bottom horizontal will be you would think it would be end but it's alright but its end and then slot we're gonna say equals fixed I forget what that does you can check out the docs you know I want a way to conditionally switch between two different buttons so this is a an angular template specific thing template conditionals and so what we do is we put in an NG container and we say ng-if equals if the timer equals false now remember timer is defined right here the timer is what controls where's the timer out there it is it's what controls that radial progress bar so if it equals false else running so one second I'll keep on describing this and you'll you'll see what this means to in a second if it equals false then we know the timer is not running right if that's true then we're going to show what is inside these this ng container so the ng container element doesn't it's not displayed in the Dom or anything it's really just there for this conditional logic and it's just saying whatever's wrapped in or whatever is a child element of this conditional then show it if this is true all right so what we'll say is I I on fab button we're gonna give it an on a click event we're gonna make one eye we're just going to bind it to the one that already exists which is start time all right and then eye on icon and again this is all coming from that eye on fab documentation we'll say name equals I play and that the name is what gives you the eye what do you call the actual icon so where do you find out the names of lows you might be wondering well I'll show you let's I think it's called I'm let's see here ionic icons calm so you can search through icons here or just you know click on is go through these and just try to find which ones that you want you even have logos down here you don't have to use these by the way you can use your own custom graphics but if you want to use theirs you can if you wish so like if you click on the if you wanted one that was like an asterisk for whatever reason you click on it and it shows you down here it the name is medical for that one or podium for this one or play which is what we just use all right so now I we're gonna do the else so what is else running well else running running right here is in reference to a template variable so what we do is to a ng template and this is kind of like ng container but it's just called ng template defining up template called running and you have to add that little hash sign there too so this is a reference to the name define here then we do another button and this time our button will change a little bit in two different ways play will be changed to you would think stop but it's called square and again that's from that website were you looking at the icons and then this as well it's not going to a start time it's gonna stop time right there so now if we save this even though some of these aren't I don't think it's completely ready yet we don't have the these the stop time yet created we'll see right down there I the the play will work and you'll see this starts and this starts as well but stop does not work and we get an error because we have to create that stop time function and it's very simple so we'll go to our home page type script down here come at the bottom and we're gonna say stop time all right and now what we're gonna do when we stop time we're just gonna there's a bunch of variables that we have to basically reset and and stop so I'm just gonna paste those in instead of I and I'll describe them real quick instead of sitting there typing all out by hand but this is all of them right here so we're first we're clearing the interval on this timer we're clearing the interval on the overall timer because to stop down there at the bottom is how we stop everything we set overall timer back to false which is what it is originally if we go up here and look at these I yeah over Alzheimer's falso is timer so we're just kind of going back to the original state of everything by setting these all up like this now this right here I have this uncommented or commented out I because I'm going to describe that in a bit but I wanted it there because I don't want to forget and so we'll come back to that so now let's show that this works in the browser so save it it's still compiling here hit play and I will see things are starting to work now again I can keep on doing that everything's still working up there it's gonna restart after I'm done with my set and I'll just click this and I'll put the phone down probably and I don't know contemplate life and then I'll refer back to this and say up it's almost there it's time to start into the set and then when I'm done at the end of my work it out I just go click on stop and there we go completely works it reverts back to the play button this has stopped that stopped alright so remember that of that line that this this insomnia allows sleep again like what is that alright so what I discovered is I wouldn't want to want to use this app I on my phone my Android phone and this would be the same thing with iOS I the screen would just go to sleep and I didn't want that I wanted to always make sure that this is on the screen even when I'm not using it cuz that's the default behavior of apps if you're not using them the app and you don't touch their interact with the phone then it just this on a non Android the screen first dims after X amount of seconds and then it just shuts off completely so yours III I didn't know it existed I assumed it did but I went to Google on a type of ionic I prevent from-- from sleeping or something and i came across a couple different solutions and there's one called insomnia which is I officially something that's a part of ionic ionic native so let's open that up real quickly so I can show you what's happening all right so it's called insomnia and you can see it's under the native so there are a ton of native plugins that you can use that allow you to tie into native functionality on iOS and Android phones so there's a lot of different things geofence gyroscope I mean you can tie into the native phone functionality with these things and so insomnia of course is to prevent the screen on of the mobile device from falling asleep so here's how you do it and this is all pretty much standard with any of these it's going to show you how to install it and it's usually just two lines ionic cordova plug-in add and then the name of the plug-in so let's run that and it could take a little time to run these by the way I just copy that right-click will paste it in and now it's gonna add those and then once that's done we run this as well right after all right and then we'll run that NPM install command and it's done alright so then it also tells you usage how to use it down here for the usage examples and so what we need to do though in order to to get it installed though we have to add it to our app module file so we come out here control B get that side bar up and we go to app module here and we import insomnia right here at the top and then we take in insomnia and we put it in the provider so we put a comma after that right there alright so now we take that same line right here we want to use it in our homepage file we import it at the top and then what's called through it's called a dependency injection we'll put it after the last divert I've property that's defined here we put constructor again this is in that example that we just showed for the documentation we create an instance of it we'll call it insomnia and we say insomnia which is being imported right up there all right so I we could set it to right here we could set it to never sleep in the constructor in any code that's inside of here gets ran when this component loads or in this case when the app loads I but that doesn't really make sense to me it should only sleep when it's active when display button is clicked all right so again if you go back to that documentation it'll show you it's very simple all you have to run is distance omneya keep awake and then allow sleep again and that's the one that was uncommon it out so or commented out down here so this means I when a user stops it we're gonna allow it to sleep again did I not spell that right I don't think I spelled it right let me see right up here somewhere there we go I didn't spell it right and then we want to make it sleep though right yeah at start time yeah I think it's going to be right underneath this stop progress timer so we say this dot insomnia dot I keep awake like that and that's it all right and the reason I'm putting here and not at the very start at the start time again remember when start time is ran it's its ran multiple times so you don't want to keep on running this I only want to rent run this I once when it's played and this is when overall timer is not set we know that it's a very beginning of the workout and this is where we keep the phone awake or that app rather all right so let's save that in unfortunately because we're not running like an emulator or anything we're just in the browser we're gonna give it we're gonna have another error or it says native tried calling is it's gonna show when we hit play there it goes it shows up right down there I tried calling insomnia keep awake but Cordova is not available this would actually work though if you were on your phone and I tested on my own phone and it does not sleep I when this is playing and then that way I can just sit on the floor I can always look at it all right very cool so that's basically it I I do want to mention a couple of other things so for instance we come down here to our config.xml file this is where we set up the name of our app so a name rester so when it's installed on a phone this is where you know it will show up underneath an icon your description will go here your author email all this stuff right here I'm not going to go over everything here obviously I'm not going to go over how to customize the icons which are kind of all right here and don't worry you don't have to create individual icons like this there's a tool I think that the ionic CLI will allow you to provide an icon an app icon and then it will automatically produce all these for you I you know exactly as you would want it to oh that's a splash yeah this is the splash screen so when you load up the app on ionic actress you will see a splash screen so to customize that that's here then we see the icons are right here and there we go we also have other specific platform or specific elements and properties that you can look at on your own and I yeah also if you want to try this out on your phone you can use that ionic dev app as it's called but you can also run it make sure you save this you can run it I right here with the ionic CLI so if I run and make sure you by the way that you have your phone attached with the USB cable and you're gonna have to make sure that in order for it to the phone to even communicate with the computer that you allow on my phone there's a little prompt that shows up it says allow I forget what it says but allow or deny make sure you hit allow and then you can run ionic cordova run Android and this is a process it takes about five minutes on my computer it bundles everything up and in at the very end I it will launch on your phone the app that you can then use very very cool stuff in one of the about running this this particular command though just be wary you're gonna have to have Java installed along with I believe Android studio but you can also run it for iOS as well so definitely look into that the app the dev app makes it much easier so you don't have to do this stuff I personally could not get it working on my local divide environment but you can still you might have better luck anyhow doing that so check that out for sure alright so very fun building this app I know I'm going to be using it all the time at the gym now I if you were interested in of course make sure you subscribe I'm releasing videos all the time every week and also a live show every Fridays I also make sure to check out the sponsor Skillshare comm to take advantage of that two three months and I'll see you guys real soon good bye [Music] [Music]

Channel: DesignCourse

Views: 170,241

Keywords: ionic framework, ionic 4, ionic 4 tutorial, ionic 4 course, learn ionic, learn ionic 4, angular, ionic angular, ionic 4 angular, angular 7, angular 7 tutorial, angular 7.2, ionic course, ionic guide, fitness app, cross platform, hybrid app, ionic4 full course

Id: qTdwUpQRptc

Length: 67min 9sec (4029 seconds)

Published: Tue Feb 12 2019