title
Ionic 4 Crash Course for Beginners - Build an App

description
https://skl.sh/designcourse20 - First 500 people to sign up will get their first 2 months free! https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon) -- Today, we're going to step into the world of Ionic 4 and create an app. You're going to need to understand (at minimum) some basic JavaScript as well as Angular 2+. We're going to build an app that I personally use at the gym while lifting. It provides you with a visual cue (an SVG radial progress bar) of when you should start your next set. We'll learn about some of the basics of Ionic 4 while building out this app. As this is a crash course, it's definitely not comprehensive -- so, I suggest using it as a supplemental learning resource! None the less, we'll start from the very beginning to the very end (from installation, to giving it a test on your phone). Let's get started! Github repo for this project: https://github.com/designcourse/ionic-4-crash-course-project-restrr - - - - - - - - - - - - - - - - - - - - - - Join my Patreon! https://www.patreon.com/designcourse Subscribe for NEW VIDEOS! My site: https://designcourse.com My personal FB account: http://fb.com/logodesigner Coursetro FB: http://fb.com/coursetro Coursetro's Twitter: http://twitter.com/designcoursecom Join my Discord! https://discord.gg/a27CKAF ^-Chat with me and others - - - - - - - - - - - - - - - - - - - - - - Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. Now, I focus all of my time and energy on this channel and my website Coursetro.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Ionic 4 Crash Course for Beginners - Build an App', 'heatmap': [{'end': 928.21, 'start': 884.167, 'weight': 0.705}, {'end': 1093.177, 'start': 965.571, 'weight': 0.701}, {'end': 1170.324, 'start': 1121.742, 'weight': 0.826}, {'end': 1576.722, 'start': 1531.05, 'weight': 0.713}], 'summary': "This crash course covers building a custom gym set timer app using ionic 4, creating workout timers, customizing app elements, and ui styling, developing timer functions, and adding start and stop buttons. it demonstrates the use of insomnia plugin and ionic cordova plugins, offering skillshare's 25,000 classes with the first two months free to the first 500 subscribers.", 'chapters': [{'end': 107.509, 'segs': [{'end': 51.054, 'src': 'embed', 'start': 22.595, 'weight': 0, 'content': [{'end': 26.956, 'text': 'but you could watch all these other Ionic courses at Skillshare to expand your knowledge afterwards.', 'start': 22.595, 'duration': 4.361}, {'end': 31.319, 'text': 'Skillshare is also super affordable with a subscription that only costs 10 bucks a month.', 'start': 27.216, 'duration': 4.103}, {'end': 37.544, 'text': "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.", 'start': 31.579, 'duration': 5.965}, {'end': 38.405, 'text': 'So take advantage.', 'start': 37.704, 'duration': 0.701}, {'end': 39.325, 'text': 'All right.', 'start': 38.705, 'duration': 0.62}, {'end': 44.209, 'text': "so you're probably wondering what is this app and what was that thing at the beginning of the video that I showed you?", 'start': 39.325, 'duration': 4.884}, {'end': 51.054, 'text': "Well, basically, I'm going to teach you Ionic Ionic 4 in a crash course sort of way.", 'start': 44.629, 'duration': 6.425}], 'summary': 'Learn ionic 4 with skillshare for $10/month, first 500 subscribers get 2 months free.', 'duration': 28.459, 'max_score': 22.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc22595.jpg'}, {'end': 83.177, 'src': 'embed', 'start': 57.96, 'weight': 1, 'content': [{'end': 65.405, 'text': 'And basically, when I go to the gym, I want to know quickly and easily when I should start my next set.', 'start': 57.96, 'duration': 7.445}, {'end': 69.888, 'text': "I don't like to go by feel because sometimes I rush it.", 'start': 65.425, 'duration': 4.463}, {'end': 79.074, 'text': "So usually before I was using the standard timer or stopwatch app that came for Android, but that's not very good for my purposes.", 'start': 70.288, 'duration': 8.786}, {'end': 83.177, 'text': "I thought I'd make something custom that is much better for my purposes.", 'start': 79.135, 'duration': 4.042}], 'summary': 'A custom gym timer app is needed for tracking workout sets efficiently.', 'duration': 25.217, 'max_score': 57.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc57960.jpg'}], 'start': 0.089, 'title': 'Building a gym set timer app with ionic ionic 4', 'summary': "Focuses on building a custom gym set timer app using ionic ionic 4, demonstrating how to set rest durations and reflect them in the app interface. additionally, it promotes skillshare's 25,000 classes and offers the first two months free to the first 500 subscribers.", 'chapters': [{'end': 107.509, 'start': 0.089, 'title': 'Building a gym set timer app with ionic ionic 4', 'summary': "Demonstrates how to build a custom gym set timer app using ionic ionic 4, with a focus on setting rest durations and reflecting them in the app interface, while promoting skillshare's 25,000 classes and offering the first two months free to the first 500 subscribers.", 'duration': 107.42, 'highlights': ["Skillshare offers 25,000 different classes in coding, design, business and more, with a subscription that costs 10 bucks a month and the first two months free for the first 500 subscribers. Promotion of Skillshare's variety of classes, affordable subscription, and offer of two free months to the first 500 subscribers.", "The app is designed to help with gym workouts by allowing users to specify rest duration in minutes and seconds, with a focus on addressing the creator's personal need for a better timer app. Explanation of the purpose behind building the app and the specific feature of setting rest durations for gym workouts."]}], 'duration': 107.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc89.jpg', 'highlights': ["Promotion of Skillshare's variety of classes, affordable subscription, and offer of two free months to the first 500 subscribers.", 'Explanation of the purpose behind building the app and the specific feature of setting rest durations for gym workouts.']}, {'end': 674.322, 'segs': [{'end': 291.642, 'src': 'embed', 'start': 263.675, 'weight': 0, 'content': [{'end': 268.218, 'text': "you want to have the latest version, so that you're working with Ionic 4 and the latest version of Angular.", 'start': 263.675, 'duration': 4.543}, {'end': 275.484, 'text': "Once that's done and you have that installed, then we can use the Ionic CLI to start a new project.", 'start': 268.919, 'duration': 6.565}, {'end': 278.426, 'text': 'So we can just type in ionic start.', 'start': 275.924, 'duration': 2.502}, {'end': 283.933, 'text': 'And by the way, always refer to the documentation.', 'start': 280.99, 'duration': 2.943}, {'end': 287.277, 'text': "Right here, there's a CLI installation page.", 'start': 284.974, 'duration': 2.303}, {'end': 291.642, 'text': "It's going to give you different options of how to get started.", 'start': 287.357, 'duration': 4.285}], 'summary': 'Use ionic cli to start new project with latest ionic 4 and angular versions.', 'duration': 27.967, 'max_score': 263.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc263675.jpg'}, {'end': 445.875, 'src': 'embed', 'start': 415.267, 'weight': 2, 'content': [{'end': 416.087, 'text': "but we're not going to do that.", 'start': 415.267, 'duration': 0.82}, {'end': 425.81, 'text': "I'm just going to hit ionic serve and momentarily it's going to build out the project and it will launch the project in your browser,", 'start': 416.107, 'duration': 9.703}, {'end': 426.81, 'text': 'your default browser.', 'start': 425.81, 'duration': 1}, {'end': 432.652, 'text': 'So while I wait for it to do that, and by the way, here it goes, it still takes a little bit of time.', 'start': 427.15, 'duration': 5.502}, {'end': 445.875, 'text': "It's waiting for it to bundle and then it will show up here in the browser and It should be here any second.", 'start': 434.232, 'duration': 11.643}], 'summary': "Running 'ionic serve' builds and launches the project in the default browser, taking a little bit of time.", 'duration': 30.608, 'max_score': 415.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc415267.jpg'}, {'end': 602.58, 'src': 'embed', 'start': 570.262, 'weight': 3, 'content': [{'end': 572.324, 'text': 'So inside the source folder, we have our app.', 'start': 570.262, 'duration': 2.062}, {'end': 575.145, 'text': 'this is where our components go.', 'start': 573.024, 'duration': 2.121}, {'end': 576.046, 'text': 'and again, this is all.', 'start': 575.145, 'duration': 0.901}, {'end': 581.769, 'text': "this is angular specific stuff, app routing, that's all angular routing i.", 'start': 576.046, 'duration': 5.723}, {'end': 586.712, 'text': 'and then we can also see we have a home uh directory and this is created by the cli.', 'start': 581.769, 'duration': 4.943}, {'end': 598.139, 'text': "um, and if we check take take a look at home page dot html, we'll see we have ionic blank and the world is your oyster.", 'start': 586.712, 'duration': 11.427}, {'end': 602.58, 'text': "so if you look back to your browser, you'll see the same thing.", 'start': 598.139, 'duration': 4.441}], 'summary': 'The source folder contains the app and home directory, with angular and ionic components.', 'duration': 32.318, 'max_score': 570.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc570262.jpg'}], 'start': 107.989, 'title': 'Creating ionic workout timer', 'summary': 'Discusses creating an ionic workout timer using angular and ionic cli, emphasizing the need for javascript and angular knowledge, installation of node.js and ionic cli, project setup, and launching the project in the browser.', 'chapters': [{'end': 463.411, 'start': 107.989, 'title': 'Creating ionic workout timer', 'summary': 'Discusses creating an ionic workout timer using angular and ionic cli, emphasizing the need for javascript and angular knowledge, installation of node.js and ionic cli, project setup, and launching the project in the browser.', 'duration': 355.422, 'highlights': ['The chapter emphasizes the need for JavaScript and Angular knowledge before beginning the project. The speaker stresses the importance of understanding basic JavaScript and Angular before starting the project, highlighting the prerequisite knowledge required for the audience.', 'The installation process of Node.js and Ionic CLI is explained, with a focus on updating to the latest version for working with Ionic 4 and the latest version of Angular. The speaker provides a step-by-step explanation of installing Node.js and the Ionic CLI, emphasizing the importance of having the latest versions to work with Ionic 4 and the latest Angular version.', 'The process of setting up the project using Ionic CLI is detailed, including prompts for project naming and starter template selection. The speaker explains the process of setting up the project using the Ionic CLI, covering prompts for naming the project and selecting a starter template, providing a comprehensive guide for the audience to follow.', 'The demonstration of launching the project in the browser using Visual Studio Code and Ionic serve is provided, showcasing the initial display of the default template. The speaker demonstrates launching the project in the browser using Visual Studio Code and Ionic serve, highlighting the initial display of the default template, providing a practical aspect of the project setup process.']}, {'end': 674.322, 'start': 465.8, 'title': 'Introduction to ionic and angular', 'summary': 'Provides an introduction to ionic and angular, highlighting the project structure, dependencies, and the importance of learning angular before diving into ionic. the transcript also mentions the availability of free angular 7 course and the usage of ui components in ionic.', 'duration': 208.522, 'highlights': ['The project structure includes the source folder where components go, Angular-specific app routing, and a home directory created by the CLI.', 'It is highly advised to learn Angular before starting with Ionic, and a free Angular 7 course is available on YouTube.', 'Ionic works with Angular by default, but it can also be used with Vue and React, although Angular knowledge is crucial.', 'The availability of a variety of UI components in Ionic, with a reference to the documentation at ionicframework.com/docs for usage and previews.']}], 'duration': 566.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc107989.jpg', 'highlights': ['The installation process of Node.js and Ionic CLI is explained, with a focus on updating to the latest version for working with Ionic 4 and the latest version of Angular.', 'The process of setting up the project using Ionic CLI is detailed, including prompts for project naming and starter template selection.', 'The demonstration of launching the project in the browser using Visual Studio Code and Ionic serve is provided, showcasing the initial display of the default template.', 'The project structure includes the source folder where components go, Angular-specific app routing, and a home directory created by the CLI.']}, {'end': 1273.191, 'segs': [{'end': 752.689, 'src': 'embed', 'start': 675.582, 'weight': 0, 'content': [{'end': 683.648, 'text': 'properties, and methods, and as well as any CSS classes that are you can use to customize them.', 'start': 675.582, 'duration': 8.066}, {'end': 685.089, 'text': 'All right.', 'start': 684.789, 'duration': 0.3}, {'end': 687.511, 'text': "So again, we'll refer back to that.", 'start': 685.75, 'duration': 1.761}, {'end': 694.816, 'text': "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 of any sort.", 'start': 687.571, 'duration': 7.245}, {'end': 697.278, 'text': "So what I'm going to do is just delete this entire thing.", 'start': 694.896, 'duration': 2.382}, {'end': 700.589, 'text': 'and hit save.', 'start': 699.088, 'duration': 1.501}, {'end': 704.051, 'text': "so now, once we save, you'll see the live reloading in action.", 'start': 700.589, 'duration': 3.462}, {'end': 705.112, 'text': 'it takes a little bit of time.', 'start': 704.051, 'duration': 1.061}, {'end': 710.896, 'text': "you'll see its app updating, recompiling, it takes like six, seven seconds or so any second.", 'start': 705.112, 'duration': 5.784}, {'end': 716.919, 'text': 'now this should go away and there it is okay, all right.', 'start': 710.896, 'duration': 6.023}, {'end': 723.103, 'text': "so now i let's try to get the like, a change the background color, for instance.", 'start': 716.919, 'duration': 6.184}, {'end': 734.672, 'text': "um, if we come down to our theme folder, we'll see we have a variables.sas file, and this is new in ionic 4.", 'start': 723.103, 'duration': 11.569}, {'end': 736.634, 'text': "they're using actual variables.", 'start': 734.672, 'duration': 1.962}, {'end': 740.659, 'text': "these aren't sas variables, these are native css variables.", 'start': 736.634, 'duration': 4.025}, {'end': 749.768, 'text': "see, it's applied on a root selector element and there's a primary, secondary and tertiary.", 'start': 740.659, 'duration': 9.109}, {'end': 751.689, 'text': 'is that how you pronounce that??', 'start': 749.768, 'duration': 1.921}, {'end': 752.689, 'text': "I don't know, I'm stupid.", 'start': 751.709, 'duration': 0.98}], 'summary': 'Customizing app features, live reload takes 6-7 seconds, css variables used.', 'duration': 77.107, 'max_score': 675.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc675582.jpg'}, {'end': 935.417, 'src': 'heatmap', 'start': 864.322, 'weight': 4, 'content': [{'end': 868.923, 'text': 'This went from blue to purple or pink or whatever that color is.', 'start': 864.322, 'duration': 4.601}, {'end': 871.384, 'text': 'All right, so very, very cool.', 'start': 869.563, 'duration': 1.821}, {'end': 873.144, 'text': "Let's change the background to black as well.", 'start': 871.404, 'duration': 1.74}, {'end': 876.965, 'text': "And this is one of the things there's no variable for the background, right?", 'start': 873.164, 'duration': 3.801}, {'end': 878.285, 'text': 'So what do you do??', 'start': 877.125, 'duration': 1.16}, {'end': 883.447, 'text': 'You go to Google, just like I did, and you type in Ionic for background color.', 'start': 878.686, 'duration': 4.761}, {'end': 887.788, 'text': 'And there is a result that just lets us know that there is a.', 'start': 884.167, 'duration': 3.621}, {'end': 897.255, 'text': "i a variable for it, although it's not in here and that variable happens to be right here.", 'start': 889.268, 'duration': 7.987}, {'end': 905.601, 'text': "so i'm just going to put it right here in the root ionic or ion hyphen background hyphen color and then just set it to black.", 'start': 897.255, 'duration': 8.346}, {'end': 910.345, 'text': 'and when we do this, this will update momentarily.', 'start': 905.601, 'duration': 4.744}, {'end': 915.439, 'text': "after it's done recompiling in, the background will be black All right.", 'start': 910.345, 'duration': 5.094}, {'end': 922.545, 'text': "so now what we'll do is I want to get in a circular progress bar.", 'start': 915.439, 'duration': 7.106}, {'end': 928.21, 'text': "This is another one of those things or those times when I wanted to, you know, I didn't know if one existed.", 'start': 923.006, 'duration': 5.204}, {'end': 935.417, 'text': "I didn't know if one existed in terms of like an official Ionic component as one of those UI components.", 'start': 928.23, 'duration': 7.187}], 'summary': 'Changing background color to black and adding circular progress bar in ionic.', 'duration': 71.095, 'max_score': 864.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc864322.jpg'}, {'end': 964.891, 'src': 'embed', 'start': 936.258, 'weight': 1, 'content': [{'end': 943.723, 'text': 'So I just went to Google and I typed in Ionic Circular progress bar and there are several different options that you can use.', 'start': 936.258, 'duration': 7.465}, {'end': 947.304, 'text': 'that are I that you can install through npm?', 'start': 943.723, 'duration': 3.581}, {'end': 953.086, 'text': 'The one that I found is relatively recent and it has a lot of options.', 'start': 947.304, 'duration': 5.782}, {'end': 954.607, 'text': 'Is this one right here?', 'start': 953.086, 'duration': 1.521}, {'end': 959.228, 'text': "Right here's ng circle progress.", 'start': 957.108, 'duration': 2.12}, {'end': 964.891, 'text': "So there's a demo it tells you how to install it I and that's exactly what we're gonna do.", 'start': 959.669, 'duration': 5.222}], 'summary': 'Searched for ionic circular progress bar on google, found recent ng circle progress with demo and installation instructions.', 'duration': 28.633, 'max_score': 936.258, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc936258.jpg'}, {'end': 1093.177, 'src': 'heatmap', 'start': 965.571, 'weight': 0.701, 'content': [{'end': 973.394, 'text': "So we're gonna npm install, circle, progress and And it also shows you how to get it set up down here as well.", 'start': 965.571, 'duration': 7.823}, {'end': 974.534, 'text': "but I'm just going to close it out for now.", 'start': 973.394, 'duration': 1.14}, {'end': 978.036, 'text': "So we're going to go back to our console editor or console command rather.", 'start': 974.594, 'duration': 3.442}, {'end': 981.919, 'text': 'All right.', 'start': 981.599, 'duration': 0.32}, {'end': 986.621, 'text': "Uh, in, by the way, I'm going to open up another console here.", 'start': 982.819, 'duration': 3.802}, {'end': 991.785, 'text': "I'm going to go back into CD, uh, Rester.", 'start': 986.642, 'duration': 5.143}, {'end': 993.686, 'text': 'Nope Code slash Rester.', 'start': 992.365, 'duration': 1.321}, {'end': 996.287, 'text': 'All right.', 'start': 995.947, 'duration': 0.34}, {'end': 997.528, 'text': "And then I'm going to run that command.", 'start': 996.427, 'duration': 1.101}, {'end': 1001.095, 'text': 'All right.', 'start': 1000.675, 'duration': 0.42}, {'end': 1006.799, 'text': "So I, this initial one, I think this is in, I'm going to close this tab.", 'start': 1001.235, 'duration': 5.564}, {'end': 1008.76, 'text': "This doesn't have anything to do with our project.", 'start': 1006.839, 'duration': 1.921}, {'end': 1010.06, 'text': 'So we just have this.', 'start': 1009.18, 'duration': 0.88}, {'end': 1013.202, 'text': "I didn't want to have to stop this in order just to install this one.", 'start': 1010.341, 'duration': 2.861}, {'end': 1014.703, 'text': 'So there we go.', 'start': 1013.262, 'duration': 1.441}, {'end': 1016.644, 'text': "That one's all stalled.", 'start': 1014.983, 'duration': 1.661}, {'end': 1022.748, 'text': 'So now we have to add it to our home module TS file right here.', 'start': 1017.325, 'duration': 5.423}, {'end': 1023.989, 'text': 'All right.', 'start': 1023.688, 'duration': 0.301}, {'end': 1026.41, 'text': 'So first we import it at the top.', 'start': 1024.069, 'duration': 2.341}, {'end': 1031.601, 'text': 'and then we add it here to the imports array.', 'start': 1028.532, 'duration': 3.069}, {'end': 1038.951, 'text': "I'm taking this right from that circle documentation that I just closed out.", 'start': 1034.909, 'duration': 4.042}, {'end': 1046.294, 'text': "So we add it at the bottom right after this one right here, or you could add it anywhere in the array, it doesn't matter.", 'start': 1040.031, 'duration': 6.263}, {'end': 1049.776, 'text': 'Put a comma and right here.', 'start': 1047.134, 'duration': 2.642}, {'end': 1056.018, 'text': 'So ng circle progress module for root, and this lets you specify some defaults.', 'start': 1050.016, 'duration': 6.002}, {'end': 1062.761, 'text': 'And let me make sure I put this in here correctly.', 'start': 1057.379, 'duration': 5.382}, {'end': 1073.28, 'text': "we go and i one thing that i'm setting.", 'start': 1068.936, 'duration': 4.344}, {'end': 1074.721, 'text': 'uh, this is all from again.', 'start': 1073.28, 'duration': 1.441}, {'end': 1079.426, 'text': 'i copied and pasted this stuff, but i did add three properties on my own animation.', 'start': 1074.721, 'duration': 4.705}, {'end': 1082.929, 'text': 'set the false responsive is true and render on click is false.', 'start': 1079.426, 'duration': 3.503}, {'end': 1086.432, 'text': 'so you may be wondering what that stuff is i should bring.', 'start': 1082.929, 'duration': 3.503}, {'end': 1087.714, 'text': 'i should not have closed out that.', 'start': 1086.432, 'duration': 1.282}, {'end': 1093.177, 'text': 'uh package or thing right here, the documentation.', 'start': 1087.714, 'duration': 5.463}], 'summary': 'Transcript shows installation and setup of npm package, with additional module configuration.', 'duration': 127.606, 'max_score': 965.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc965571.jpg'}, {'end': 1170.324, 'src': 'heatmap', 'start': 1121.742, 'weight': 0.826, 'content': [{'end': 1129.304, 'text': "And now if we go back here, we'll see, we have a usage, uh, example, just copy it real quick.", 'start': 1121.742, 'duration': 7.562}, {'end': 1133.405, 'text': "And then we'll go into our home page, uh, HTML.", 'start': 1130.284, 'duration': 3.121}, {'end': 1134.185, 'text': "We'll get all this.", 'start': 1133.425, 'duration': 0.76}, {'end': 1152.278, 'text': "and will paste it in right here alright so let's go ahead and save that and now I with any lock It should update once it's done recompiling.", 'start': 1139.588, 'duration': 12.69}, {'end': 1154.078, 'text': 'There we go.', 'start': 1153.318, 'duration': 0.76}, {'end': 1157.199, 'text': 'How exciting is that? All right.', 'start': 1154.259, 'duration': 2.94}, {'end': 1159.54, 'text': 'And you can see it animated and all that cool stuff.', 'start': 1157.219, 'duration': 2.321}, {'end': 1164.482, 'text': "So next, what we'll do is we're going to update this.", 'start': 1159.58, 'duration': 4.902}, {'end': 1170.324, 'text': "And I'm going to update it with a bunch of other options, those options that I just showed you on the documentation.", 'start': 1164.542, 'duration': 5.782}], 'summary': 'Demonstration of updating home page with usage examples and options from documentation.', 'duration': 48.582, 'max_score': 1121.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1121742.jpg'}], 'start': 675.582, 'title': 'Customizing app elements and ionic 4 variables', 'summary': 'Covers removing unnecessary app elements with live reloading taking approximately six to seven seconds and demonstrates the usage of native css variables in ionic 4 for customizing colors, along with integrating and customizing a circular progress bar using ng circle progress.', 'chapters': [{'end': 723.103, 'start': 675.582, 'title': 'Customizing app elements', 'summary': 'Covers removing unnecessary elements from the app and demonstrates live reloading in action, taking approximately six to seven seconds for the app to update, recompile, and display changes, such as background color modification.', 'duration': 47.521, 'highlights': ['The live reloading process takes approximately six to seven seconds for the app to update and recompile.', 'Demonstrating the removal of unnecessary elements from the app, such as the header and navigation, to customize the app.', 'Modifying the background color of the app is showcased as an example of customization.']}, {'end': 1273.191, 'start': 723.103, 'title': 'Ionic 4 variables and color customization', 'summary': 'Explains the usage of native css variables in ionic 4 for customizing colors, as well as the process for integrating and customizing a circular progress bar using ng circle progress, with detailed steps for setting up the module and customizing the progress bar options.', 'duration': 550.088, 'highlights': ['Explanation of native CSS variables in Ionic 4 The chapter discusses the use of native CSS variables in Ionic 4 for customizing colors, such as primary, secondary, and tertiary, along with a color generator tool provided in the Ionic Docs.', 'Integration and customization of circular progress bar using ng circle progress The chapter provides detailed steps for integrating and customizing a circular progress bar using ng circle progress, including the installation process and setting up the module with custom default options.']}], 'duration': 597.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc675582.jpg', 'highlights': ['Demonstrating the removal of unnecessary elements from the app, such as the header and navigation, to customize the app.', 'Integration and customization of circular progress bar using ng circle progress The chapter provides detailed steps for integrating and customizing a circular progress bar using ng circle progress, including the installation process and setting up the module with custom default options.', 'Explanation of native CSS variables in Ionic 4 The chapter discusses the use of native CSS variables in Ionic 4 for customizing colors, such as primary, secondary, and tertiary, along with a color generator tool provided in the Ionic Docs.', 'The live reloading process takes approximately six to seven seconds for the app to update and recompile.', 'Modifying the background color of the app is showcased as an example of customization.']}, {'end': 1872.409, 'segs': [{'end': 1383.079, 'src': 'embed', 'start': 1359.942, 'weight': 0, 'content': [{'end': 1367.245, 'text': "One thing after looking at the docs of the UI component section of the ionic documentation, I found that there's a date time picker.", 'start': 1359.942, 'duration': 7.303}, {'end': 1368.166, 'text': 'All right.', 'start': 1367.845, 'duration': 0.321}, {'end': 1370.608, 'text': 'So this is what that one looks like.', 'start': 1368.226, 'duration': 2.382}, {'end': 1371.889, 'text': 'All right.', 'start': 1371.669, 'duration': 0.22}, {'end': 1376.553, 'text': "So it's, again, it's in the component section of the docs and it's called ion date time.", 'start': 1371.929, 'duration': 4.624}, {'end': 1377.334, 'text': 'All right.', 'start': 1377.054, 'duration': 0.28}, {'end': 1380.757, 'text': 'And it gives you an example, usage examples here, like start time.', 'start': 1377.414, 'duration': 3.343}, {'end': 1383.079, 'text': 'And it has this really cool, let me move this over.', 'start': 1381.237, 'duration': 1.842}], 'summary': 'The ionic documentation includes a date time picker component called ion date time.', 'duration': 23.137, 'max_score': 1359.942, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1359942.jpg'}, {'end': 1491.211, 'src': 'embed', 'start': 1469.201, 'weight': 2, 'content': [{'end': 1479.226, 'text': '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,', 'start': 1469.201, 'duration': 10.025}, {'end': 1480.726, 'text': 'and that means the ion date time.', 'start': 1479.226, 'duration': 1.5}, {'end': 1488.57, 'text': "uh, when you use the ui, which i'll show you in a bit, um, it will automatically be set to uh the minute,", 'start': 1480.726, 'duration': 7.844}, {'end': 1491.211, 'text': '30 second or whatever the value is that we specified in the component.', 'start': 1488.57, 'duration': 2.641}], 'summary': 'Two-way data binding sets default time in ion date time component.', 'duration': 22.01, 'max_score': 1469.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1469201.jpg'}, {'end': 1576.722, 'src': 'heatmap', 'start': 1531.05, 'weight': 0.713, 'content': [{'end': 1536.392, 'text': 'What we can do, however, is set on the ion item property, color equals dark.', 'start': 1531.05, 'duration': 5.342}, {'end': 1542.254, 'text': "And that's in reference to the variables down here where it says dark.", 'start': 1538.55, 'duration': 3.704}, {'end': 1546.199, 'text': "So if you want to make customizations to that, that's where you would do this.", 'start': 1543.316, 'duration': 2.883}, {'end': 1551.105, 'text': "So when we go back here after saving, we could see now it's a little bit more visible.", 'start': 1546.74, 'duration': 4.365}, {'end': 1553.568, 'text': 'We can see restoration, the text and the tap here.', 'start': 1551.145, 'duration': 2.423}, {'end': 1560.133, 'text': 'If we click on tap here, Sorry.', 'start': 1553.948, 'duration': 6.185}, {'end': 1564.295, 'text': "You'll see it looks really ugly, right? We can't even see anything.", 'start': 1560.553, 'duration': 3.742}, {'end': 1569.838, 'text': "And we'll get to that and styling that in a bit.", 'start': 1565.356, 'duration': 4.482}, {'end': 1576.722, 'text': 'But first I want to change just a couple things here before we get to that point.', 'start': 1570.119, 'duration': 6.603}], 'summary': 'Setting ion item property color to dark for improved visibility.', 'duration': 45.672, 'max_score': 1531.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1531050.jpg'}, {'end': 1608.346, 'src': 'embed', 'start': 1577.603, 'weight': 3, 'content': [{'end': 1585.147, 'text': "So let's go ahead to our home component file, home page.ts.", 'start': 1577.603, 'duration': 7.544}, {'end': 1591.205, 'text': 'And I want to define, a couple of different things.', 'start': 1585.868, 'duration': 5.337}, {'end': 1601.417, 'text': "So first, when it comes to our circular progress, as I mentioned before, we're binding it to a percent and radius property.", 'start': 1592.466, 'duration': 8.951}, {'end': 1603.88, 'text': 'So we have to define those in the component class.', 'start': 1601.477, 'duration': 2.403}, {'end': 1608.346, 'text': "Again, this is all Angular stuff, so I can't stress enough that you need to know Angular.", 'start': 1604.301, 'duration': 4.045}], 'summary': 'In the home page.ts component file, circular progress is bound to percent and radius properties.', 'duration': 30.743, 'max_score': 1577.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1577603.jpg'}, {'end': 1730.197, 'src': 'embed', 'start': 1709.74, 'weight': 5, 'content': [{'end': 1719.874, 'text': "Now, sometimes when it comes to your components, your ionic components, sometimes it's easy to style them and sometimes it's not.", 'start': 1709.74, 'duration': 10.134}, {'end': 1730.197, 'text': "And unfortunately with the date time component in the documentation, there wasn't very many CSS variables out of the box that you could use.", 'start': 1719.974, 'duration': 10.223}], 'summary': "Customizing ionic date time component's styling can be challenging due to limited css variables.", 'duration': 20.457, 'max_score': 1709.74, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1709740.jpg'}], 'start': 1273.671, 'title': 'Ionic ui and angular component styling', 'summary': 'Covers adding click events, specifying rest duration using an ion date time picker, and implementing two-way data binding in ionic ui development. it also demonstrates defining properties for circular progress and date time picker components in angular, including setting default values, implementing two-way data binding, and customizing styles using css.', 'chapters': [{'end': 1576.722, 'start': 1273.671, 'title': 'Ionic ui development', 'summary': 'Covers adding click events, specifying rest duration using an ion date time picker, and implementing two-way data binding in ionic ui development.', 'duration': 303.051, 'highlights': ['The chapter covers adding click events, specifying rest duration using an ion date time picker, and implementing two-way data binding in Ionic UI development.', 'The UI component section of the ionic documentation provides a date time picker called ion date time, which allows customization for specifying rest duration.', 'Two-way data binding in Angular allows setting and retrieving default values for the date time picker and enables sending information back to the component when the picker is used.']}, {'end': 1872.409, 'start': 1577.603, 'title': 'Styling ionic components and binding properties in angular', 'summary': 'Demonstrates defining properties for circular progress and date time picker components in angular, including setting default values, implementing two-way data binding, and customizing styles using css.', 'duration': 294.806, 'highlights': ['Defining properties for circular progress and date time picker components in Angular The chapter covers defining properties for circular progress and date time picker components in the Angular framework, such as setting the percent and radius properties for circular progress and specifying default values for the date time picker.', "Implementing two-way data binding for the date time picker component The chapter demonstrates implementing two-way data binding for the date time picker component, showcasing how changing the property value dynamically updates the progress bar and the custom CSS adjustments made to enhance the component's appearance.", 'Customizing styles using CSS for Ionic components The speaker explains the process of customizing styles using CSS for Ionic components, particularly addressing the challenges in styling the date time picker component and providing insights into identifying and modifying CSS properties to achieve the desired appearance.']}], 'duration': 598.738, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1273671.jpg', 'highlights': ['The chapter covers adding click events, specifying rest duration using an ion date time picker, and implementing two-way data binding in Ionic UI development.', 'The UI component section of the ionic documentation provides a date time picker called ion date time, which allows customization for specifying rest duration.', 'Two-way data binding in Angular allows setting and retrieving default values for the date time picker and enables sending information back to the component when the picker is used.', 'Defining properties for circular progress and date time picker components in Angular The chapter covers defining properties for circular progress and date time picker components in the Angular framework, such as setting the percent and radius properties for circular progress and specifying default values for the date time picker.', "Implementing two-way data binding for the date time picker component The chapter demonstrates implementing two-way data binding for the date time picker component, showcasing how changing the property value dynamically updates the progress bar and the custom CSS adjustments made to enhance the component's appearance.", 'Customizing styles using CSS for Ionic components The speaker explains the process of customizing styles using CSS for Ionic components, particularly addressing the challenges in styling the date time picker component and providing insights into identifying and modifying CSS properties to achieve the desired appearance.']}, {'end': 2343.101, 'segs': [{'end': 1924.749, 'src': 'embed', 'start': 1896.017, 'weight': 0, 'content': [{'end': 1899.658, 'text': 'ion content is basically a parent element of everything that we have.', 'start': 1896.017, 'duration': 3.641}, {'end': 1902.779, 'text': "We're gonna set the font family to Montserrat right here.", 'start': 1900.558, 'duration': 2.221}, {'end': 1904.64, 'text': "So we'll save that.", 'start': 1903.86, 'duration': 0.78}, {'end': 1907.623, 'text': "And we'll be good to go.", 'start': 1905.882, 'duration': 1.741}, {'end': 1912.224, 'text': "Okay So now let's try to get our timer working.", 'start': 1907.863, 'duration': 4.361}, {'end': 1918.907, 'text': "So this is where we're going to be working a lot within the component file of our home.page.ts file.", 'start': 1912.604, 'duration': 6.303}, {'end': 1919.947, 'text': 'All right.', 'start': 1919.647, 'duration': 0.3}, {'end': 1924.749, 'text': "So one thing that we're going to want to do here, let's move this up.", 'start': 1920.047, 'duration': 4.702}], 'summary': 'Setting font family to montserrat for ionic content.', 'duration': 28.732, 'max_score': 1896.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1896017.jpg'}, {'end': 1979.366, 'src': 'embed', 'start': 1947.581, 'weight': 1, 'content': [{'end': 1951.484, 'text': "And again, this isn't specific to Angular, it's just vanilla JavaScript, basic JavaScript stuff,", 'start': 1947.581, 'duration': 3.903}, {'end': 1956.128, 'text': 'which is also why you need to understand first basic JavaScript, then Angular.', 'start': 1951.484, 'duration': 4.644}, {'end': 1957.149, 'text': 'then you can get to ionic.', 'start': 1956.128, 'duration': 1.021}, {'end': 1967.398, 'text': "But we're going to use a set interval to create sort of like our timer that will adjust our percentage value as needed,", 'start': 1957.809, 'duration': 9.589}, {'end': 1972.521, 'text': 'based on the rest time that the user specifies.', 'start': 1968.198, 'duration': 4.323}, {'end': 1979.366, 'text': "So we're going to bind the set interval to a property called timer.", 'start': 1973.081, 'duration': 6.285}], 'summary': 'Using vanilla javascript, understand basic javascript, then angular to get to ionic.', 'duration': 31.785, 'max_score': 1947.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1947581.jpg'}, {'end': 2090.426, 'src': 'embed', 'start': 2063.86, 'weight': 3, 'content': [{'end': 2068.141, 'text': "And this is the value that it returns from the date time, but we can't really use this.", 'start': 2063.86, 'duration': 4.281}, {'end': 2074.943, 'text': "So we're going to have to use JavaScript split method, which is done like this.", 'start': 2068.181, 'duration': 6.762}, {'end': 2076.583, 'text': "So it's going to turn this into an array.", 'start': 2074.983, 'duration': 1.6}, {'end': 2081.824, 'text': 'So time split will be an array where we have three different values.', 'start': 2076.643, 'duration': 5.181}, {'end': 2084.844, 'text': 'We have hours, minutes, and seconds right here.', 'start': 2081.864, 'duration': 2.98}, {'end': 2090.426, 'text': "So next we're going to create two more properties for minutes and seconds.", 'start': 2085.645, 'duration': 4.781}], 'summary': 'Using javascript split method to extract hours, minutes, and seconds from returned date time value.', 'duration': 26.566, 'max_score': 2063.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2063860.jpg'}, {'end': 2234.914, 'src': 'embed', 'start': 2193.266, 'weight': 4, 'content': [{'end': 2196.007, 'text': 'So this.timer equals set interval.', 'start': 2193.266, 'duration': 2.741}, {'end': 2201.17, 'text': 'Oops There we go.', 'start': 2199.069, 'duration': 2.101}, {'end': 2204.271, 'text': 'And that here.', 'start': 2203.771, 'duration': 0.5}, {'end': 2228.609, 'text': "All right, so in the interval itself, we're going to say this.percent equals math.floor, this.progress divided by total seconds multiplied by 100.", 'start': 2205.299, 'duration': 23.31}, {'end': 2228.809, 'text': 'All right.', 'start': 2228.609, 'duration': 0.2}, {'end': 2234.914, 'text': "so if that's confusing, I wasn't exactly sure how I wanted to do it right when I started this.", 'start': 2228.809, 'duration': 6.105}], 'summary': 'Using set interval, calculate percent progress based on total seconds.', 'duration': 41.648, 'max_score': 2193.266, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2193266.jpg'}, {'end': 2343.101, 'src': 'embed', 'start': 2309.965, 'weight': 5, 'content': [{'end': 2317.504, 'text': "So it's going to be if this.percent is equal to this.radius.", 'start': 2309.965, 'duration': 7.539}, {'end': 2321.607, 'text': 'Now radius, remember, is the 100%.', 'start': 2317.884, 'duration': 3.723}, {'end': 2323.268, 'text': 'It equals 100.', 'start': 2321.607, 'duration': 1.661}, {'end': 2328.491, 'text': 'If the percentage is 100, if it gets itself to 100, then we need to stop this interval.', 'start': 2323.268, 'duration': 5.223}, {'end': 2332.313, 'text': 'And you do that through the JavaScript clear interval.', 'start': 2328.591, 'duration': 3.722}, {'end': 2335.035, 'text': 'And we pass in this.timer.', 'start': 2333.614, 'duration': 1.421}, {'end': 2341.32, 'text': "So that simply means it's gonna stop this timer once this gets to 100%.", 'start': 2335.395, 'duration': 5.925}, {'end': 2341.76, 'text': 'Simple enough.', 'start': 2341.32, 'duration': 0.44}, {'end': 2343.101, 'text': 'All right.', 'start': 2342.801, 'duration': 0.3}], 'summary': 'If this.percent equals this.radius (100%), stop interval using javascript clearinterval with this.timer.', 'duration': 33.136, 'max_score': 2309.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2309965.jpg'}], 'start': 1872.809, 'title': 'Developing timer functions', 'summary': 'Covers developing an ionic timer app, importing fonts, setting font family, and defining properties, and creating a javascript timer function with set interval to adjust percentage value based on user input.', 'chapters': [{'end': 2028.964, 'start': 1872.809, 'title': 'Developing ionic timer app', 'summary': 'Covers the development of an ionic timer app, including importing fonts, setting the font family, and defining initial properties for a timer, using vanilla javascript for implementing a timer with set interval to adjust percentage value based on user input.', 'duration': 156.155, 'highlights': ['The chapter covers the development of an Ionic timer app, including importing fonts, setting the font family, and defining initial properties for a timer.', 'Using vanilla JavaScript for implementing a timer with set interval to adjust percentage value based on user input.', 'Explaining the concept of ion content as a parent element in the development process.']}, {'end': 2343.101, 'start': 2035.538, 'title': 'Javascript timer function', 'summary': 'Explains the process of creating a timer function in javascript, including defining variables, calculating total seconds, setting up the timer interval, and stopping the interval when the percentage reaches 100%.', 'duration': 307.563, 'highlights': ['Defining the time split array to store hours, minutes, and seconds The time split array is created to store three values: hours, minutes, and seconds, by using the JavaScript split method.', 'Calculating the total amount of seconds and setting up the timer interval Total seconds are calculated as the sum of minutes multiplied by 60 and seconds, and the timer interval is set to run every second to adjust the percentage value.', 'Stopping the interval when the percentage reaches 100% An if statement is used to check if the percentage has reached 100%, and if true, the interval is stopped using the JavaScript clearInterval method.']}], 'duration': 470.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc1872809.jpg', 'highlights': ['Develop an Ionic timer app with imported fonts and defined properties.', 'Implement a JavaScript timer using set interval to adjust percentage value.', 'Explain ion content as a parent element in the development process.', 'Create a time split array to store hours, minutes, and seconds.', 'Calculate total seconds and set up the timer interval to adjust percentage value.', 'Stop the interval when the percentage reaches 100%.']}, {'end': 3070.997, 'segs': [{'end': 2508.886, 'src': 'embed', 'start': 2462.138, 'weight': 0, 'content': [{'end': 2469.022, 'text': "Now, theoretically, if we didn't have this code, like we didn't just now, and we clicked it a bunch of times, you'd see it go crazy.", 'start': 2462.138, 'duration': 6.884}, {'end': 2475.345, 'text': 'But if we click it once, maybe four times, you would see it right now rapidly going crazy.', 'start': 2469.582, 'duration': 5.763}, {'end': 2480.187, 'text': "But it's not doing that because it is clearing the interval every single time.", 'start': 2475.845, 'duration': 4.342}, {'end': 2482.428, 'text': 'Hopefully this makes sense.', 'start': 2481.528, 'duration': 0.9}, {'end': 2492.419, 'text': "Okay, so now let's go ahead and one of the things I wanted for this app for my own personal use.", 'start': 2483.396, 'duration': 9.023}, {'end': 2497.401, 'text': 'I wanted to also have a timer showing my entire workout duration.', 'start': 2492.419, 'duration': 4.982}, {'end': 2503.284, 'text': "So right when I click the button or the play button that we're gonna have soon.", 'start': 2498.402, 'duration': 4.882}, {'end': 2508.886, 'text': "I wanted an overall timer that doesn't get reset until I hit stop in a different button down here.", 'start': 2503.284, 'duration': 5.602}], 'summary': 'Code clears interval, preventing rapid button clicks. adding workout duration timer feature.', 'duration': 46.748, 'max_score': 2462.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2462138.jpg'}, {'end': 2558.491, 'src': 'embed', 'start': 2530.399, 'weight': 2, 'content': [{'end': 2540.785, 'text': "And then we'll say, and by the way, this right here, What you're about to see is just interpolation as it's called.", 'start': 2530.399, 'duration': 10.386}, {'end': 2543.985, 'text': "And it's just a way to show variable inside of your template.", 'start': 2540.825, 'duration': 3.16}, {'end': 2547.106, 'text': "So we're going to say elapsed.h.", 'start': 2544.486, 'duration': 2.62}, {'end': 2555.169, 'text': "So we're going to create in our component an object with a few properties, one of which being h for hour.", 'start': 2547.226, 'duration': 7.943}, {'end': 2558.491, 'text': "I usually don't go to the gym longer than an hour.", 'start': 2556.669, 'duration': 1.822}], 'summary': "Demonstrating interpolation by creating an object with properties, including 'h' for hour.", 'duration': 28.092, 'max_score': 2530.399, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2530399.jpg'}, {'end': 2744.077, 'src': 'embed', 'start': 2699.568, 'weight': 4, 'content': [{'end': 2704.051, 'text': 'I actually did a little Googling on it to try to get this all working correctly.', 'start': 2699.568, 'duration': 4.483}, {'end': 2710.737, 'text': 'So what we can do is let countdown date equals new date.', 'start': 2705.452, 'duration': 5.285}, {'end': 2718.523, 'text': "Then we're going to set our overall timer to set interval.", 'start': 2713.539, 'duration': 4.984}, {'end': 2738.735, 'text': "All right, inside of here, we're going to say var, or we could just say let distance equals now minus our countdown date, get time.", 'start': 2724.332, 'duration': 14.403}, {'end': 2744.077, 'text': "All right, so what this does is, make sure that's spelled right.", 'start': 2738.755, 'duration': 5.322}], 'summary': 'Using javascript to create a countdown timer for a web application.', 'duration': 44.509, 'max_score': 2699.568, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2699568.jpg'}, {'end': 2979.034, 'src': 'embed', 'start': 2952.124, 'weight': 6, 'content': [{'end': 2956.746, 'text': "And we can see that because it says SVG and it's just way unnecessary space.", 'start': 2952.124, 'duration': 4.622}, {'end': 2966.391, 'text': "That's because, and this is unfortunate, whoever developed this, they have hard coded in there the height value of this SVG element.", 'start': 2957.406, 'duration': 8.985}, {'end': 2979.034, 'text': '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.', 'start': 2967.111, 'duration': 11.923}], 'summary': 'Hard-coded svg height causes unnecessary space. reseting to 50% improves it.', 'duration': 26.91, 'max_score': 2952.124, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2952124.jpg'}], 'start': 2343.762, 'title': 'Creating and coding timers', 'summary': 'Demonstrates creating interval-based timers, including clearing intervals and using interpolation to display elapsed time in workout app. it also explains coding a progress timer in javascript, including setting intervals, calculating time differences, and formatting time display.', 'chapters': [{'end': 2585.241, 'start': 2343.762, 'title': 'Creating interval-based timers', 'summary': 'Demonstrates the process of creating interval-based timers, including clearing intervals, and using interpolation to display elapsed time in hours, minutes, and seconds within a workout app.', 'duration': 241.479, 'highlights': ['The chapter demonstrates the process of creating interval-based timers, including clearing intervals, and using interpolation to display elapsed time in hours, minutes, and seconds within a workout app.', "The code for creating an interval-based timer includes checking if there's already a timer activated, clearing the interval if there is, and starting the timer, preventing multiple rapid activations.", "The author emphasizes the need for an overall timer that doesn't reset until the 'stop' button is clicked, providing a visual cue for multiple sets during a workout.", 'The concept of interpolation is explained as a way to display variables within a template, with the example of displaying elapsed time in hours, minutes, and seconds.', 'The author expresses the personal need for a timer showing the entire workout duration, demonstrating practical application within a workout app.']}, {'end': 3070.997, 'start': 2586.122, 'title': 'Javascript progress timer coding', 'summary': 'Explains the process of coding a progress timer in javascript, including setting intervals, calculating time differences, and formatting time display, to ensure that the overall workout time and specific timer function separately and accurately.', 'duration': 484.875, 'highlights': ['The chapter explains the process of coding a progress timer in JavaScript, including setting intervals, calculating time differences, and formatting time display. Coding a progress timer in JavaScript, setting intervals, calculating time differences, formatting time display', 'The chapter details the need for separate overall workout time and specific timer function to run separately and accurately. Separate overall workout time and specific timer function, running separately and accurately', "The chapter discusses the challenges faced in adjusting the SVG graphic's height and the solution found in modifying the code in the node modules folder. Challenges in adjusting SVG graphic's height, solution found in modifying code in the node modules folder"]}], 'duration': 727.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc2343762.jpg', 'highlights': ['The chapter demonstrates the process of creating interval-based timers, including clearing intervals, and using interpolation to display elapsed time in hours, minutes, and seconds within a workout app.', "The code for creating an interval-based timer includes checking if there's already a timer activated, clearing the interval if there is, and starting the timer, preventing multiple rapid activations.", 'The concept of interpolation is explained as a way to display variables within a template, with the example of displaying elapsed time in hours, minutes, and seconds.', "The author emphasizes the need for an overall timer that doesn't reset until the 'stop' button is clicked, providing a visual cue for multiple sets during a workout.", 'The chapter explains the process of coding a progress timer in JavaScript, including setting intervals, calculating time differences, and formatting time display.', 'The chapter details the need for separate overall workout time and specific timer function to run separately and accurately.', "The chapter discusses the challenges faced in adjusting the SVG graphic's height and the solution found in modifying the code in the node modules folder."]}, {'end': 3467.162, 'segs': [{'end': 3179.143, 'src': 'embed', 'start': 3116.548, 'weight': 1, 'content': [{'end': 3119.61, 'text': "So let's go ahead and do that real quick.", 'start': 3116.548, 'duration': 3.062}, {'end': 3122.752, 'text': "So we're going to also, let me close this out.", 'start': 3119.67, 'duration': 3.082}, {'end': 3127.995, 'text': "We're going to also come up to our HTML and we're going to put this at the bottom.", 'start': 3123.692, 'duration': 4.303}, {'end': 3129.556, 'text': 'All right.', 'start': 3129.276, 'duration': 0.28}, {'end': 3137.32, 'text': "So we're going to start off with ion fab and we're going to say vertical is bottom.", 'start': 3129.916, 'duration': 7.404}, {'end': 3138.861, 'text': "So we're going to position it to the bottom.", 'start': 3137.34, 'duration': 1.521}, {'end': 3143.284, 'text': "Horizontal will be, you would think it would be end, but it's right, but it's end.", 'start': 3139.342, 'duration': 3.942}, {'end': 3146.987, 'text': "And then slot, we're going to say equals fixed.", 'start': 3145.106, 'duration': 1.881}, {'end': 3147.888, 'text': 'I forget what that does.', 'start': 3147.027, 'duration': 0.861}, {'end': 3148.809, 'text': 'You can check out the docs.', 'start': 3147.928, 'duration': 0.881}, {'end': 3154.713, 'text': 'Now, I want a way to conditionally switch between two different buttons.', 'start': 3149.969, 'duration': 4.744}, {'end': 3161.037, 'text': 'So this is an Angular template specific thing, template conditionals.', 'start': 3155.893, 'duration': 5.144}, {'end': 3165.34, 'text': 'And so what we do is we put in an ng container.', 'start': 3161.717, 'duration': 3.623}, {'end': 3172.881, 'text': 'and we say ng if equals if the timer equals false.', 'start': 3166.86, 'duration': 6.021}, {'end': 3179.143, 'text': 'Now remember, timer is defined right here.', 'start': 3173.241, 'duration': 5.902}], 'summary': 'Setting up html layout with ion fab positioned at the bottom and using angular template conditionals to switch between two different buttons.', 'duration': 62.595, 'max_score': 3116.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3116548.jpg'}, {'end': 3233.336, 'src': 'embed', 'start': 3206.41, 'weight': 0, 'content': [{'end': 3210.755, 'text': "So the ng-container element, it's not displayed in the DOM or anything.", 'start': 3206.41, 'duration': 4.345}, {'end': 3212.897, 'text': "It's really just there for this conditional logic.", 'start': 3210.815, 'duration': 2.082}, {'end': 3219.683, 'text': "then it's just saying whatever's wrapped in or whatever is a child element of this conditional, then show it.", 'start': 3213.297, 'duration': 6.386}, {'end': 3221.965, 'text': 'if this is true, all right.', 'start': 3219.683, 'duration': 2.282}, {'end': 3227.13, 'text': "so what we'll say is i ion fab button.", 'start': 3221.965, 'duration': 5.165}, {'end': 3232.435, 'text': "we're going to give it an on a click event.", 'start': 3227.13, 'duration': 5.305}, {'end': 3233.336, 'text': "we're going to make one.", 'start': 3232.435, 'duration': 0.901}], 'summary': 'The ng-container element is used for conditional logic in the dom, allowing to show child elements based on a condition.', 'duration': 26.926, 'max_score': 3206.41, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3206410.jpg'}, {'end': 3288.786, 'src': 'embed', 'start': 3260.946, 'weight': 3, 'content': [{'end': 3264.049, 'text': "Let's, I think it's called, let's see here.", 'start': 3260.946, 'duration': 3.103}, {'end': 3275.249, 'text': 'ionic icons.com, so you can search through icons here, um, or just you know, click on,', 'start': 3267.666, 'duration': 7.583}, {'end': 3279.131, 'text': 'go through these and just try to find which ones that you want.', 'start': 3275.249, 'duration': 3.882}, {'end': 3280.452, 'text': 'you even have logos down here.', 'start': 3279.131, 'duration': 1.321}, {'end': 3288.786, 'text': "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.", 'start': 3281.581, 'duration': 7.205}], 'summary': 'Tutorial on accessing icons and logos from ionicicons.com', 'duration': 27.84, 'max_score': 3260.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3260946.jpg'}, {'end': 3416.089, 'src': 'embed', 'start': 3369.466, 'weight': 4, 'content': [{'end': 3370.787, 'text': "we'll see right down there.", 'start': 3369.466, 'duration': 1.321}, {'end': 3378.614, 'text': "uh, the, the play will work And you'll see, this starts and this starts as well, but stop does not work.", 'start': 3370.787, 'duration': 7.827}, {'end': 3382.799, 'text': 'And we get an error because we have to create that stop time function.', 'start': 3378.694, 'duration': 4.105}, {'end': 3384.481, 'text': "And it's very simple.", 'start': 3383.64, 'duration': 0.841}, {'end': 3391.148, 'text': "So we'll go to our homepage, TypeScript down here, come out the bottom, and we're going to say stop time.", 'start': 3384.581, 'duration': 6.567}, {'end': 3402.78, 'text': "Alright, and now what we're going to do when we stop time, we're just going to there's a bunch of variables that we have to basically reset and stop.", 'start': 3393.294, 'duration': 9.486}, {'end': 3411.146, 'text': "So I'm just going to paste those in instead of I, and I'll describe them real quick, instead of sitting here typing all out by hand.", 'start': 3403.261, 'duration': 7.885}, {'end': 3412.587, 'text': 'but this is all of them right here.', 'start': 3411.146, 'duration': 1.441}, {'end': 3416.089, 'text': "So we're first, we're clearing the interval on this dot timer.", 'start': 3413.327, 'duration': 2.762}], 'summary': 'Creating a stop time function to reset variables and stop the interval.', 'duration': 46.623, 'max_score': 3369.466, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3369466.jpg'}], 'start': 3071.597, 'title': 'Adding start and stop buttons', 'summary': 'Discusses adding start and stop buttons to a ui component using ion fab buttons and ng-container for conditional logic, with a focus on positioning and functionality. it also explains the implementation of angular template variables and the creation of a stop time function, highlighting the changes in button functionality and the reset of variables, leading to the successful execution of the play and stop functions.', 'chapters': [{'end': 3288.786, 'start': 3071.597, 'title': 'Adding start and stop buttons', 'summary': 'Discusses adding start and stop buttons to a ui component using ion fab buttons and ng-container for conditional logic, with a focus on positioning and functionality. it also mentions using ion icons for button graphics.', 'duration': 217.189, 'highlights': ["The chapter discusses adding start and stop buttons to a UI component using ion fab buttons and ng-container for conditional logic. It explains the use of ion fab buttons and ng-container for conditional logic to switch between different buttons based on the timer's state.", 'The focus is on positioning and functionality of the buttons, with specific mentions of vertical and horizontal positioning. It emphasizes the use of ion fab buttons to position the buttons at the bottom of the UI and mentions the specific attributes for vertical and horizontal positioning.', 'Mention of using ion icons for button graphics, with reference to finding icon names and options for custom graphics. It mentions the use of ion icons for button graphics and provides guidance on finding icon names from ionic icons.com and using custom graphics.']}, {'end': 3467.162, 'start': 3289.447, 'title': 'Angular template and function implementation', 'summary': 'Explains the implementation of angular template variables and the creation of a stop time function, highlighting the changes in button functionality and the reset of variables, leading to the successful execution of the play and stop functions.', 'duration': 177.715, 'highlights': ['The implementation of Angular template variables and creation of stop time function.', 'Explanation of changes in button functionality and variable reset for successful execution of play and stop functions.']}], 'duration': 395.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3071597.jpg', 'highlights': ['The chapter discusses adding start and stop buttons to a UI component using ion fab buttons and ng-container for conditional logic.', "It explains the use of ion fab buttons and ng-container for conditional logic to switch between different buttons based on the timer's state.", 'The focus is on positioning and functionality of the buttons, with specific mentions of vertical and horizontal positioning.', 'Mention of using ion icons for button graphics, with reference to finding icon names and options for custom graphics.', 'The implementation of Angular template variables and creation of stop time function.', 'Explanation of changes in button functionality and variable reset for successful execution of play and stop functions.']}, {'end': 4008.084, 'segs': [{'end': 3607.771, 'src': 'embed', 'start': 3561.96, 'weight': 0, 'content': [{'end': 3571.507, 'text': '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.', 'start': 3561.96, 'duration': 9.547}, {'end': 3575.53, 'text': "So there's a lot of different things, Geofence, Gyroscope.", 'start': 3572.188, 'duration': 3.342}, {'end': 3580.354, 'text': 'I mean, you can tie into the native phone functionality with these things.', 'start': 3575.69, 'duration': 4.664}, {'end': 3585.978, 'text': 'And so Insomnia, of course, is to prevent the screen of the mobile device from falling asleep.', 'start': 3581.254, 'duration': 4.724}, {'end': 3587.659, 'text': "So here's how you do it.", 'start': 3586.698, 'duration': 0.961}, {'end': 3589.66, 'text': 'And this is all pretty much standard with any of these.', 'start': 3587.719, 'duration': 1.941}, {'end': 3591.121, 'text': "It's going to show you how to install it.", 'start': 3589.72, 'duration': 1.401}, {'end': 3592.422, 'text': "And it's usually just two lines.", 'start': 3591.181, 'duration': 1.241}, {'end': 3596.344, 'text': 'Ionic Cordova, plugin, add, and then the name of the plugin.', 'start': 3592.962, 'duration': 3.382}, {'end': 3597.204, 'text': "So let's run that.", 'start': 3596.384, 'duration': 0.82}, {'end': 3600.626, 'text': 'And it could take a little time to run these, by the way.', 'start': 3598.445, 'duration': 2.181}, {'end': 3605.109, 'text': "I just copy that, right click, we'll paste it in.", 'start': 3601.527, 'duration': 3.582}, {'end': 3607.771, 'text': "And now it's going to add those.", 'start': 3606.35, 'duration': 1.421}], 'summary': 'Using native plugins in ionic cordova to access ios and android functionalities, such as preventing device screen sleep, with simple installation process.', 'duration': 45.811, 'max_score': 3561.96, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3561960.jpg'}, {'end': 3662.948, 'src': 'embed', 'start': 3632.01, 'weight': 3, 'content': [{'end': 3647.963, 'text': 'get that sidebar 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.', 'start': 3632.01, 'duration': 15.953}, {'end': 3652.305, 'text': 'so we put a comma after that right there.', 'start': 3647.963, 'duration': 4.342}, {'end': 3653.125, 'text': 'all right.', 'start': 3652.305, 'duration': 0.82}, {'end': 3662.948, 'text': 'so now we take that same line right here and we want to use it in our home page file.', 'start': 3653.125, 'duration': 9.823}], 'summary': 'Setting up sidebar with insomnia in app module and home page file.', 'duration': 30.938, 'max_score': 3632.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3632010.jpg'}, {'end': 3919.557, 'src': 'embed', 'start': 3890.39, 'weight': 4, 'content': [{'end': 3894.853, 'text': 'then we see the icons are right here and there we go.', 'start': 3890.39, 'duration': 4.463}, {'end': 3905.952, 'text': 'we also have other specific platforms, specific uh elements and properties that you can look at on your own um, and Also,', 'start': 3894.853, 'duration': 11.099}, {'end': 3913.435, 'text': "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.", 'start': 3905.952, 'duration': 7.483}, {'end': 3914.395, 'text': 'Make sure you save this.', 'start': 3913.475, 'duration': 0.92}, {'end': 3919.557, 'text': 'You can run it right here with the Ionic CLI.', 'start': 3914.976, 'duration': 4.581}], 'summary': 'The transcript discusses using ionic dev app and running it with ionic cli.', 'duration': 29.167, 'max_score': 3890.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3890390.jpg'}], 'start': 3467.282, 'title': 'Using insomnia and ionic cordova plugins', 'summary': 'Discusses using the insomnia plugin to prevent mobile screen sleep and accessing it as part of ionic native functionality, as well as the process of installing and using the ionic cordova plugin, including installation commands, code integration, usage instructions, and tips for customization and testing with the ionic dev app.', 'chapters': [{'end': 3587.659, 'start': 3467.282, 'title': 'Using insomnia plugin to prevent screen from sleeping', 'summary': 'Discusses using the insomnia plugin to prevent the screen of a mobile device from falling asleep, enabling continuous display of an app, and how it can be accessed as part of ionic native functionality.', 'duration': 120.377, 'highlights': ['The Insomnia plugin is used to prevent the screen of a mobile device from falling asleep, ensuring continuous display of the app. The chapter discusses using the Insomnia plugin to prevent the screen of a mobile device from falling asleep, ensuring continuous display of the app, which is a crucial functionality for app developers. It is accessed as part of ionic native functionality, providing a solution to the default behavior of apps that causes the screen to dim and shut off after a certain period of inactivity on Android and iOS devices.', 'Ionic native offers a variety of native plugins, including Insomnia, to access native functionality on iOS and Android phones. Ionic native provides a range of native plugins, such as Insomnia, allowing app developers to access native functionality on iOS and Android phones. This enables developers to integrate features like preventing the screen from falling asleep, geofencing, gyroscope functionality, and other native phone functionalities, enhancing the capabilities of their apps.']}, {'end': 4008.084, 'start': 3587.719, 'title': 'Installing and using ionic cordova plugin', 'summary': "Describes the process of installing and using the ionic cordova plugin, including the installation commands, code integration, and usage instructions, as well as tips for customizing the app's appearance and running it on different platforms, with an emphasis on the importance of having java and android studio installed for running it on android, and the availability of the ionic dev app for ease of testing.", 'duration': 420.365, 'highlights': ["Installing the Ionic Cordova plugin involves running two lines of commands, 'ionic cordova plugin add' followed by the plugin name, and then running 'npm install'. The process of installing the Ionic Cordova plugin is described as involving two simple commands and is emphasized as a standard procedure.", 'Integration of the plugin into the app module file and home page file is demonstrated, including importing the plugin and utilizing dependency injection to create an instance of the plugin for specific functionalities. The integration of the plugin into the app module file and home page file is detailed, covering the steps of importing the plugin and utilizing dependency injection for specific functionalities.', "Instructions for customizing the app's appearance, such as setting the app name, description, author email, and customizing icons and splash screen, are provided. Instructions for customizing the app's appearance, including setting the app name, description, author email, and customizing icons and splash screen, are outlined.", 'Guidance for running the app on different platforms, particularly the process for running it on Android using the Ionic CLI, with the requirement of having Java and Android Studio installed, and the mention of the Ionic dev app for testing, is highlighted. The guidance for running the app on different platforms, specifically the process for running it on Android using the Ionic CLI, the requirement of having Java and Android Studio installed, and the availability of the Ionic dev app for testing, is emphasized.']}], 'duration': 540.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/qTdwUpQRptc/pics/qTdwUpQRptc3467282.jpg', 'highlights': ['The Insomnia plugin prevents mobile screen sleep, ensuring continuous app display.', 'Ionic native provides Insomnia and other plugins for accessing native phone functionalities.', "Installing Ionic Cordova plugin involves running 'ionic cordova plugin add' and 'npm install'.", 'Integration of the plugin into app module and home page files is demonstrated.', 'Instructions for customizing app appearance and running it on different platforms are provided.']}], 'highlights': ["Promotion of Skillshare's variety of classes, affordable subscription, and offer of two free months to the first 500 subscribers.", 'The installation process of Node.js and Ionic CLI is explained, with a focus on updating to the latest version for working with Ionic 4 and the latest version of Angular.', 'Demonstrating the removal of unnecessary elements from the app, such as the header and navigation, to customize the app.', 'Develop an Ionic timer app with imported fonts and defined properties.', 'The chapter demonstrates the process of creating interval-based timers, including clearing intervals, and using interpolation to display elapsed time in hours, minutes, and seconds within a workout app.', 'The chapter discusses adding start and stop buttons to a UI component using ion fab buttons and ng-container for conditional logic.', 'The Insomnia plugin prevents mobile screen sleep, ensuring continuous app display.']}