title
Ionic Framework 4 - Full Tutorial - iOS / Android App Development

description
Learn how to use Ionic 4 in this full tutorial course for beginners. Ionic Framework is the free, open source mobile UI toolkit for developing high-quality cross-platform apps for native iOS, Android, and the web—all from a single JavaScript codebase. In this tutorial you will learn how to build a mobile app with Ionic and Angular from scratch. You will learn the basic concepts of Ionic and the Ionic CLI. Course from Awais Mirza. Check out his YouTube channel: https://www.youtube.com/channel/UCIKbbV7ae7LAWa8cGnvjSPA Awais has a full stack JavaScript tutorial on Udemy: https://www.udemy.com/javascript-master-class/?couponCode=AWAIS80 ⭐️ Course Contents ⭐️ ⌨️ (00:00:00) Introduction to Ionic ⌨️ (00:12:20) Project Structure ⌨️ (00:23:44) Platform and Emulating ⌨️ (00:33:10) Emulating iOS ⌨️ (00:36:23) Emulating Android ⌨️ (00:39:34) Routing and Lazy Loading ⌨️ (00:51:17) Action Sheet ⌨️ (01:02:37) Components ⌨️ (01:15:55) ION Alert and Documentation ⌨️ (01:32:08) More Components ⌨️ (01:54:36) Side Menu and Tabs ⌨️ (02:16:37) Cordonva Not Available - fixed ⌨️ (02:26:26) Ionic Native ⌨️ (02:32:49) Debugging in Emulator using Safari ⌨️ (02:39:14) Debugging Using Webstorm ⌨️ (02:44:26) Native HTTP Plugins ⌨️ (02:53:20) Native SMS Plugins ⌨️ (02:56:55) Native Storage -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'Ionic Framework 4 - Full Tutorial - iOS / Android App Development', 'heatmap': [{'end': 650.103, 'start': 318.197, 'weight': 0.847}], 'summary': 'This tutorial covers mobile app development with ionic framework, including installation, emulation for ios and android, project structure, ui components, tab bar, sidebar ui, debugging, and implementing http requests in ionic 4, focusing on efficient module loading, navigation, and customization of ui components.', 'chapters': [{'end': 1375.424, 'segs': [{'end': 224.266, 'src': 'embed', 'start': 193.154, 'weight': 3, 'content': [{'end': 196.477, 'text': 'Next, you want to go and start your application.', 'start': 193.154, 'duration': 3.323}, {'end': 200.24, 'text': 'So if you want to use the Ionic 4 application, you have to type this flag.', 'start': 196.877, 'duration': 3.363}, {'end': 203.022, 'text': 'Dash dash type is equal to Angular.', 'start': 200.62, 'duration': 2.402}, {'end': 208.595, 'text': 'So there is a lot of things that has been changed from Ionic 3 to Ionic 4.', 'start': 203.463, 'duration': 5.132}, {'end': 212.398, 'text': 'Next, we have a command to run application.', 'start': 208.595, 'duration': 3.803}, {'end': 224.266, 'text': 'Once you type this command in CLI, it will create Angular project using Angular 6 and Ionic 4, and you can run this same.', 'start': 212.538, 'duration': 11.728}], 'summary': 'To start an ionic 4 application, use the command to create an angular project with angular 6 and ionic 4, and run it in the cli.', 'duration': 31.112, 'max_score': 193.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg193154.jpg'}, {'end': 281.034, 'src': 'embed', 'start': 249.68, 'weight': 2, 'content': [{'end': 256.103, 'text': "So let's go back to the terminal and here I'll type sudo NPN install dash G Cordova.", 'start': 249.68, 'duration': 6.423}, {'end': 263.922, 'text': "And I'm gonna have to type password to install that in my Mac.", 'start': 258.084, 'duration': 5.838}, {'end': 269.146, 'text': "the reason for that is because I'm installing this globally.", 'start': 263.922, 'duration': 5.224}, {'end': 271.548, 'text': "that's why it required the password.", 'start': 269.146, 'duration': 2.402}, {'end': 274.61, 'text': 'so, as you can see, Cordova is installed as well.', 'start': 271.548, 'duration': 3.062}, {'end': 279.353, 'text': 'so now we want to check the version of ionic CLI and Cordova.', 'start': 274.61, 'duration': 4.743}, {'end': 281.034, 'text': "so I'll type ionic-v.", 'start': 279.353, 'duration': 1.681}], 'summary': 'Installed cordova globally, checked versions of ionic cli and cordova.', 'duration': 31.354, 'max_score': 249.68, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg249680.jpg'}, {'end': 457.883, 'src': 'embed', 'start': 426.113, 'weight': 5, 'content': [{'end': 436.983, 'text': 'which will take your Angular code and convert that to Objective C so that can be run on iOS or iPhone or iPad devices.', 'start': 426.113, 'duration': 10.87}, {'end': 441.968, 'text': 'And on the other side, Angular understands Java or Kotlin.', 'start': 437.603, 'duration': 4.365}, {'end': 444.25, 'text': 'So Cordova supports Java.', 'start': 442.468, 'duration': 1.782}, {'end': 453.56, 'text': 'It will take your Angular-based code and it will convert that code into Java so you can run the same application on Android as well.', 'start': 444.611, 'duration': 8.949}, {'end': 457.883, 'text': 'and it goes similar to Windows platform as well.', 'start': 453.96, 'duration': 3.923}], 'summary': 'Cordova converts angular code to objective c for ios and to java for android, also supports windows platform.', 'duration': 31.77, 'max_score': 426.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg426113.jpg'}, {'end': 657.569, 'src': 'heatmap', 'start': 318.197, 'weight': 8, 'content': [{'end': 325.903, 'text': "So I'll do CD document and I'll say, let me just say that's going to be hybrid mobile apps.", 'start': 318.197, 'duration': 7.706}, {'end': 329.285, 'text': "And here I've got one project.", 'start': 326.363, 'duration': 2.922}, {'end': 330.887, 'text': "So I'm going to create another one.", 'start': 329.485, 'duration': 1.402}, {'end': 333.849, 'text': "So I'll simply type Ionic start.", 'start': 330.947, 'duration': 2.902}, {'end': 344.674, 'text': 'and now, if I want to check what kind of project or what kind of template I want to use, then I will to check how many projects are available.', 'start': 334.509, 'duration': 10.165}, {'end': 352.597, 'text': 'so type space, dash, dash list, and that gives me all the templates available which I can use.', 'start': 344.674, 'duration': 7.923}, {'end': 363.584, 'text': 'so I have an angular blank template, angular side menu, Angular tabs menu Ionic Angular Ionic Angular, which used the older version of Ionic,', 'start': 352.597, 'duration': 10.987}, {'end': 364.825, 'text': 'which was 3..', 'start': 363.584, 'duration': 1.241}, {'end': 366.447, 'text': 'So we want to use Ionic 4.', 'start': 364.825, 'duration': 1.622}, {'end': 378.577, 'text': "So I'll type Ionic start, and I'll say I want to use a tabs template, and I'll flag it with type is equal to Angular.", 'start': 366.447, 'duration': 12.13}, {'end': 384.321, 'text': "So I'll press enter, and it's going to start asking me what kind of template.", 'start': 378.897, 'duration': 5.424}, {'end': 386.063, 'text': "So I'll just say tabs.", 'start': 384.361, 'duration': 1.702}, {'end': 398.089, 'text': "and then i'm going to say okay, it's asking me that integrate your new app with cordova to target native ios and android.", 'start': 387.701, 'duration': 10.388}, {'end': 402.793, 'text': 'so first we remember that we installed cordova successfully.', 'start': 398.089, 'duration': 4.704}, {'end': 413.981, 'text': "now i want to type y and press enter, and it's going to integrate cordova with my project, so i can build those app for iOS and Android.", 'start': 402.793, 'duration': 11.188}, {'end': 418.766, 'text': "So iOS basically don't understand JavaScript or let's say Angular.", 'start': 414.542, 'duration': 4.224}, {'end': 422.069, 'text': 'iOS only understand Objective C or Swift.', 'start': 419.286, 'duration': 2.783}, {'end': 426.113, 'text': "So Cordova is the guy, let's say,", 'start': 422.449, 'duration': 3.664}, {'end': 436.983, 'text': 'which will take your Angular code and convert that to Objective C so that can be run on iOS or iPhone or iPad devices.', 'start': 426.113, 'duration': 10.87}, {'end': 441.968, 'text': 'And on the other side, Angular understands Java or Kotlin.', 'start': 437.603, 'duration': 4.365}, {'end': 444.25, 'text': 'So Cordova supports Java.', 'start': 442.468, 'duration': 1.782}, {'end': 453.56, 'text': 'It will take your Angular-based code and it will convert that code into Java so you can run the same application on Android as well.', 'start': 444.611, 'duration': 8.949}, {'end': 457.883, 'text': 'and it goes similar to Windows platform as well.', 'start': 453.96, 'duration': 3.923}, {'end': 466.409, 'text': "So now it says, okay, dependencies installed, and it's asking me, install the free Ionic Pro SDK and Connector app.", 'start': 458.303, 'duration': 8.106}, {'end': 472.113, 'text': "So I don't have a paid Ionic Pro account, so I will press N and press Enter.", 'start': 466.469, 'duration': 5.644}, {'end': 475.435, 'text': 'And there you go, our project has been created.', 'start': 472.613, 'duration': 2.822}, {'end': 480.179, 'text': "So I'm gonna type ls, and I can see I have another project called Tabs.", 'start': 475.515, 'duration': 4.664}, {'end': 485.082, 'text': 'So to start the application, I want to have to go inside that folder.', 'start': 480.839, 'duration': 4.243}, {'end': 487.184, 'text': "So I'll say CD tabs.", 'start': 485.102, 'duration': 2.082}, {'end': 493.349, 'text': 'And one thing I want to mention here that everything is possible in Windows and Linux as well.', 'start': 488.045, 'duration': 5.304}, {'end': 497.692, 'text': "It's just basically I'm using terminal because I am on a Mac.", 'start': 493.849, 'duration': 3.843}, {'end': 501.576, 'text': "And if you're using Windows, you use command prompt or PowerShell.", 'start': 498.013, 'duration': 3.563}, {'end': 504.498, 'text': 'So we are in the tabs folder.', 'start': 502.556, 'duration': 1.942}, {'end': 511.345, 'text': "So I'm going to type ls-l, which can be list of the files in folder that I have in this folder.", 'start': 504.558, 'duration': 6.787}, {'end': 513.986, 'text': 'So I can see I have a source folder.', 'start': 511.405, 'duration': 2.581}, {'end': 515.429, 'text': 'I have a config.xml.', 'start': 514.006, 'duration': 1.423}, {'end': 520.472, 'text': 'We will go through all of these files in the next video.', 'start': 515.448, 'duration': 5.024}, {'end': 523.917, 'text': "Of course, let's start our application.", 'start': 520.633, 'duration': 3.284}, {'end': 527.34, 'text': "So I'm going to type a command called inix serve.", 'start': 523.977, 'duration': 3.363}, {'end': 543.256, 'text': "Press enter and now it's going to open a browser which will bring us a new app and we can actually take this to this virtual desktop,", 'start': 529.07, 'duration': 14.186}, {'end': 544.216, 'text': 'so we could see that.', 'start': 543.256, 'duration': 0.96}, {'end': 550.538, 'text': "So now it looks like it's a web page but actually it's not a web page it's a mobile app.", 'start': 544.656, 'duration': 5.882}, {'end': 557.081, 'text': "So I'm going to click on these three dots and I want to change this to developer tools.", 'start': 550.558, 'duration': 6.523}, {'end': 567.067, 'text': "and then we will change from here to, let's say, ipad pro or we can use this for ionic iphone 678.", 'start': 557.942, 'duration': 9.125}, {'end': 570.148, 'text': "so now i'm going to close these.", 'start': 567.067, 'duration': 3.081}, {'end': 572.229, 'text': "oops, i'll have to go back.", 'start': 570.148, 'duration': 2.081}, {'end': 577.254, 'text': 'guys, sorry, my bad, and I want to put this on the side.', 'start': 572.229, 'duration': 5.025}, {'end': 581.275, 'text': 'So now you can see our app is running.', 'start': 577.754, 'duration': 3.521}, {'end': 587.797, 'text': 'So we have a contact tab, about, home tab, and so far we have this application.', 'start': 581.595, 'duration': 6.202}, {'end': 598.385, 'text': "Now, as I've shown you, that you have to go to developer mode and then you will basically make your app look like a mobile app.", 'start': 587.857, 'duration': 10.528}, {'end': 600.667, 'text': "but there's another way that is possible.", 'start': 598.385, 'duration': 2.282}, {'end': 612.961, 'text': "so we're going to go to terminal and i'm going to press ctrl c to stop the server which run our application, which was localhost 8100.", 'start': 600.667, 'duration': 12.294}, {'end': 620.883, 'text': "so first let me clear the console and i'm going to type ionic serve, dash l, press enter.", 'start': 612.961, 'duration': 7.922}, {'end': 630.645, 'text': "now it's going to start the server, but dash l is basically is going to start our application in a lab mode.", 'start': 620.883, 'duration': 9.762}, {'end': 638.227, 'text': "so type yes, it's going to install ionic lab and then it will open up our server.", 'start': 630.645, 'duration': 7.582}, {'end': 644.118, 'text': "so right now it basically didn't open up properly because it hasn't installed.", 'start': 638.227, 'duration': 5.891}, {'end': 647.18, 'text': "Okay, so next page, it's opening now, 8200.", 'start': 644.138, 'duration': 3.042}, {'end': 650.103, 'text': 'Now there you go.', 'start': 647.18, 'duration': 2.923}, {'end': 657.569, 'text': 'So now when you type a lab, which is basically a flag that make your app look like a mobile app.', 'start': 650.503, 'duration': 7.066}], 'summary': 'Creating a hybrid mobile app using ionic with angular templates, integrating cordova for ios and android, and testing in lab mode.', 'duration': 26.924, 'max_score': 318.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg318197.jpg'}, {'end': 909.842, 'src': 'embed', 'start': 860.987, 'weight': 0, 'content': [{'end': 869.333, 'text': 'Now we have older Ionic framework as well, which was Ionic 3, which has the type set as Ionic Angular.', 'start': 860.987, 'duration': 8.346}, {'end': 879.86, 'text': 'So if you select your project and you want to select template from Ionic 3 and use the same structure which was in Ionic 3,', 'start': 870.013, 'duration': 9.847}, {'end': 884.043, 'text': 'then you will use a type is equal to Ionic Angular.', 'start': 879.86, 'duration': 4.183}, {'end': 889.447, 'text': 'Now this is the latest Ionic framework tutorial series, which is Ionic 4.', 'start': 884.583, 'duration': 4.864}, {'end': 892.729, 'text': "So we're going to be using a type as Angular.", 'start': 889.447, 'duration': 3.282}, {'end': 894.47, 'text': "So let's go and create a new project.", 'start': 892.749, 'duration': 1.721}, {'end': 901.595, 'text': "Alright, so now let's go and create a new Ionic 4 project using Angular 6.", 'start': 895.111, 'duration': 6.484}, {'end': 907.68, 'text': "So let's go to the terminal and I'm going to type ionic start dash dash list.", 'start': 901.595, 'duration': 6.085}, {'end': 909.842, 'text': "It's going to give me the list of all the projects.", 'start': 907.84, 'duration': 2.002}], 'summary': 'Tutorial on creating ionic 4 project using angular 6.', 'duration': 48.855, 'max_score': 860.987, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg860987.jpg'}, {'end': 1194.86, 'src': 'embed', 'start': 1158.312, 'weight': 4, 'content': [{'end': 1165.217, 'text': "Alright guys, so now let's go over to the folder structure and the file structure of our Ionic 4 project.", 'start': 1158.312, 'duration': 6.905}, {'end': 1169.659, 'text': "So first of all, let's take a look at this resources folder.", 'start': 1166.057, 'duration': 3.602}, {'end': 1178.565, 'text': "Basically all your assets, your icon, your splash screen images or whatever image that you're going to be using in your application.", 'start': 1170.18, 'duration': 8.385}, {'end': 1180.787, 'text': 'that will go into your resources folder.', 'start': 1178.565, 'duration': 2.222}, {'end': 1194.86, 'text': 'The reason why Ionic has this setup separately is because the Android require different kind of resolution for your assets.', 'start': 1181.588, 'duration': 13.272}], 'summary': 'Review ionic 4 project folder structure. resources folder for assets. android requires specific resolutions.', 'duration': 36.548, 'max_score': 1158.312, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg1158312.jpg'}], 'start': 2.711, 'title': 'Mobile app development with ionic framework', 'summary': 'Discusses using ionic framework for cross-platform mobile app development, including installation of node.js, npn, ionic cli, and apache cordova, and creating an ionic 4 project with angular template for ios, android, and windows platforms. it also explains creating, viewing, and navigating ionic apps, setting up hybrid mobile apps with ionic and cordova, and integrating cordova with an overview of ionic pro, emphasizing ionic 4 and angular 6.', 'chapters': [{'end': 457.883, 'start': 2.711, 'title': 'Mobile app development with ionic framework', 'summary': 'Discusses using ionic framework for cross-platform mobile app development, including installation of node.js, npn, ionic cli, and apache cordova, and creating an ionic 4 project with angular template for ios, android, and windows platforms.', 'duration': 455.172, 'highlights': ['The chapter introduces using Ionic framework for cross-platform mobile app development, emphasizing that one code base can be used to build apps for iOS, Android, and Windows platforms. Ionic framework enables building mobile applications for multiple platforms from a single code base, such as iOS, Android, and Windows.', 'The chapter explains the installation of Node.js and NPN for package management, highlighting the LTS version preference and successful installation verification. Node.js and NPN are installed for package management, emphasizing the preference for LTS version and successful installation verification.', 'The chapter details the installation of Ionic CLI and Cordova, including global installation and successful verification of versions. Ionic CLI and Cordova are installed globally, and their versions are successfully verified, ensuring the tools are ready for use.', 'The chapter provides guidance on creating an Ionic 4 project with Angular template for cross-platform development, including integrating Cordova for targeting native iOS and Android. Guidance is provided for creating an Ionic 4 project with Angular template and integrating Cordova to target native iOS and Android platforms.']}, {'end': 713.669, 'start': 458.303, 'title': 'Creating and viewing ionic apps', 'summary': 'Explains how to create an ionic project, navigate the project folder, start the application, and view it in various device modes, including ios and android, using terminal commands and the ionic lab, while also highlighting the diminishing support for windows mobile.', 'duration': 255.366, 'highlights': ["The chapter demonstrates creating an Ionic project, navigating the project folder, and starting the application using terminal commands such as 'ls', 'cd', 'ionic serve', and 'ionic serve -l'.", 'It explains how to view the app in different device modes, including iOS and Android, using terminal commands and the Ionic lab, emphasizing the capability to check apps side-by-side for iOS and Android.', 'It mentions the diminishing support for Windows Mobile and the lack of a nice display, ultimately suggesting that targeting iOS and Android platforms is more practical.', 'The chapter also highlights the use of terminal commands and the Ionic lab to view how the app will look like in different platforms such as iOS, Android, and Windows Mobile.']}, {'end': 1028.622, 'start': 713.709, 'title': 'Setting up hybrid mobile apps with ionic and cordova', 'summary': 'Covers setting up the environment for building hybrid mobile apps using ionic and cordova, creating a project, exploring file structure, and choosing templates, with emphasis on ionic 4 and angular 6.', 'duration': 314.913, 'highlights': ['Creating a new Ionic 4 project using Angular 6 and exploring available templates. Exploring the options available for Ionic 4 project templates, including blank, side menu, and tabs, based on Angular 6 framework.', 'Distinguishing between Ionic 4 and Ionic 3 project templates and the impact on available options. Differentiating the available template options for Ionic 4 and Ionic 3 projects, with Ionic 4 offering limited template choices.', 'Integration of Cordova for targeting native iOS and Android platforms in the project. Emphasizing the necessity of integrating Cordova when targeting native iOS and Android platforms for app publishing.']}, {'end': 1375.424, 'start': 1029.202, 'title': 'Integrating cordova and overview of ionic pro', 'summary': 'Covers the integration of cordova into the application, provides an overview of ionic pro, including its features such as live deploy and app monitoring, and discusses the file and folder structure of the ionic 4 project.', 'duration': 346.222, 'highlights': ['Overview of Ionic Pro Ionic Pro offers extra features like live deploy and app monitoring, and can generate native packages in the cloud, without needing to go to App Store or Play Store.', 'Integration of Cordova Cordova is integrated into the application, taking a few seconds, and the project is created.', 'File and Folder Structure The file and folder structure of the Ionic 4 project is discussed, including the resources folder for assets, the configuration files like angular.json and config.xml, the package.json file for dependencies, and the content of the app and assets folders.']}], 'duration': 1372.713, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg2711.jpg', 'highlights': ['Ionic framework enables building mobile applications for multiple platforms from a single code base, such as iOS, Android, and Windows.', 'Guidance is provided for creating an Ionic 4 project with Angular template and integrating Cordova to target native iOS and Android platforms.', 'Node.js and NPN are installed for package management, emphasizing the preference for LTS version and successful installation verification.', 'Ionic CLI and Cordova are installed globally, and their versions are successfully verified, ensuring the tools are ready for use.', "The chapter demonstrates creating an Ionic project, navigating the project folder, and starting the application using terminal commands such as 'ls', 'cd', 'ionic serve', and 'ionic serve -l'.", 'Overview of Ionic Pro offering extra features like live deploy and app monitoring, and can generate native packages in the cloud, without needing to go to App Store or Play Store.', 'Exploring the options available for Ionic 4 project templates, including blank, side menu, and tabs, based on Angular 6 framework.', 'Differentiating the available template options for Ionic 4 and Ionic 3 projects, with Ionic 4 offering limited template choices.', 'Emphasizing the necessity of integrating Cordova when targeting native iOS and Android platforms for app publishing.', 'The file and folder structure of the Ionic 4 project is discussed, including the resources folder for assets, the configuration files like angular.json and config.xml, the package.json file for dependencies, and the content of the app and assets folders.']}, {'end': 2352.081, 'segs': [{'end': 1708.691, 'src': 'embed', 'start': 1673.345, 'weight': 4, 'content': [{'end': 1677.327, 'text': 'And to test our application, we can use actual device.', 'start': 1673.345, 'duration': 3.982}, {'end': 1680.797, 'text': "So I'm just waiting for this platform to add.", 'start': 1678.268, 'duration': 2.529}, {'end': 1691.345, 'text': "All right, so right now you can see it's generating resources, 18 resources generated.", 'start': 1686.744, 'duration': 4.601}, {'end': 1693.086, 'text': 'Now platform is added.', 'start': 1691.806, 'duration': 1.28}, {'end': 1700.388, 'text': 'There we can see platform iOS and Android is listed in package.json file.', 'start': 1694.086, 'duration': 6.302}, {'end': 1703.229, 'text': 'Also, we can take a look at config.', 'start': 1701.068, 'duration': 2.161}, {'end': 1708.691, 'text': 'In config, we have a platform iOS with a platform Android.', 'start': 1703.869, 'duration': 4.822}], 'summary': 'Application tested on actual device, 18 resources generated, platform ios and android listed in package.json file', 'duration': 35.346, 'max_score': 1673.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg1673345.jpg'}, {'end': 1825.432, 'src': 'embed', 'start': 1760.977, 'weight': 1, 'content': [{'end': 1772.721, 'text': 'we can like a look at a platform folder and we can look at our package.json file, which should have browser as a platform as well.', 'start': 1760.977, 'duration': 11.744}, {'end': 1781.063, 'text': "i'm going to take my terminal back to the bottom so we could look at the project and the files.", 'start': 1772.721, 'duration': 8.342}, {'end': 1784.104, 'text': "i'm going to clear the terminal and the next.", 'start': 1781.063, 'duration': 3.041}, {'end': 1788.228, 'text': 'what we want to do is we want to run our application onto a browser.', 'start': 1784.104, 'duration': 4.124}, {'end': 1797.024, 'text': "so let's say ionic cordova, emulate browser.", 'start': 1788.228, 'duration': 8.796}, {'end': 1803.214, 'text': "Okay, now it's going to go and build our project.", 'start': 1798.911, 'duration': 4.303}, {'end': 1807.458, 'text': 'And right now we can see www folder is empty.', 'start': 1803.795, 'duration': 3.663}, {'end': 1813.863, 'text': 'But when the first time we build our project, it will not be empty anymore.', 'start': 1808.138, 'duration': 5.725}, {'end': 1821.469, 'text': 'It will have all the JSON and a production version of our code listed into www folder.', 'start': 1814.063, 'duration': 7.406}, {'end': 1825.432, 'text': "So the first time we're building this project, that's why it's taking a bit longer.", 'start': 1821.949, 'duration': 3.483}], 'summary': 'Using ionic cordova, emulate browser to build project in www folder.', 'duration': 64.455, 'max_score': 1760.977, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg1760977.jpg'}, {'end': 2352.081, 'src': 'embed', 'start': 2324.163, 'weight': 0, 'content': [{'end': 2335.588, 'text': "And now it's going to run on an emulator using Nexus 6 device and the Android version that you would see in Android studio when we open that.", 'start': 2324.163, 'duration': 11.425}, {'end': 2340.11, 'text': "So I'm not sure what version it's running right now, but it's some, something's running.", 'start': 2336.028, 'duration': 4.082}, {'end': 2345.432, 'text': "So let's take a look at how and how long it takes to run the emulator.", 'start': 2340.79, 'duration': 4.642}, {'end': 2346.913, 'text': "It's building the project.", 'start': 2345.732, 'duration': 1.181}, {'end': 2352.081, 'text': 'Okay It says build successful in six seconds.', 'start': 2349.099, 'duration': 2.982}], 'summary': 'Emulator running nexus 6 device on android studio, project built in 6 seconds.', 'duration': 27.918, 'max_score': 2324.163, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg2324163.jpg'}], 'start': 1375.424, 'title': 'Emulating ionic projects', 'summary': "Covers emulating ionic projects for ios, android, and browser, detailing the process of adding/removing platforms, using ionic cli commands, emulating to browser and ios simulator with 'ionic serve' and xcode, and emulating to ios and android devices using dash dash list command and specifying device targets.", 'chapters': [{'end': 1825.432, 'start': 1375.424, 'title': 'Ionic cli project management', 'summary': 'Discusses the process of adding and removing platforms (ios, android, browser) using ionic cli, emphasizing the commands, file structure, and the generation of resources.', 'duration': 450.008, 'highlights': ['The chapter discusses the process of adding and removing platforms (iOS, Android, browser) using Ionic CLI. The transcript covers the addition of iOS and Android platforms to the project using the Ionic CLI commands. It also mentions the addition of a browser platform for testing and development purposes.', "The commands for adding and removing platforms are demonstrated, such as 'ionic-cordova-platform-add-ios' and 'ionic Cordova platform remove android'. Specific commands like 'ionic-cordova-platform-add-ios' and 'ionic Cordova platform remove android' are used to illustrate the process of adding and removing platforms, providing clarity on the CLI commands.", "The file structure, including the presence of source, resources, E2C, and node modules folders, is mentioned. The file structure is described with specific folders highlighted, such as source, resources, E2C, and node modules folders, providing an overview of the project's directory layout.", 'The generation of resources for the added platforms, with 18 resources being generated, is highlighted. It mentions the generation of resources, particularly 18 resources, for the added platforms, showcasing the process of resource generation in the context of platform addition.']}, {'end': 2066, 'start': 1828.01, 'title': 'Emulating ionic application to browser and ios simulator', 'summary': "Explains how to emulate an ionic application to a browser using 'ionic serve' and to an ios simulator by installing xcode, highlighting the use of 'ionic serve' to build the project, the availability of ionic lab to view the app as it would appear on a mobile device, and the requirement of a mac to develop applications for the ios platform.", 'duration': 237.99, 'highlights': ["The chapter explains how to use 'ionic serve' to build the project, eliminating the need to emulate it to a browser using 'ionic cordova emulate browser'. Using 'ionic serve' eliminates the need to emulate the project to a browser using 'ionic cordova emulate browser', simplifying the process and saving time.", 'Ionic Lab is available to view the app as it would appear on a mobile device, providing iOS and Android versions for UI comparison. Ionic Lab allows viewing the app as it would appear on a mobile device, offering iOS and Android versions for UI comparison, enhancing the development experience.', 'A Mac is required to develop applications for the iOS platform, as Xcode, an IDE developed by Apple, is necessary for native iOS application development. Developing applications for the iOS platform requires a Mac and the installation of Xcode, an IDE developed by Apple, essential for native iOS application development.']}, {'end': 2352.081, 'start': 2066.3, 'title': 'Emulating ionic projects for ios and android', 'summary': 'Explains how to emulate an ionic project to ios and android devices, including using the dash dash list command to check available devices, installing android studio to emulate android devices, and specifying device targets like iphone 8 and nexus 6 with dash dash target flag.', 'duration': 285.781, 'highlights': ["Using dash dash list command to check available devices The chapter mentions using the 'dash dash list' command to check the available devices for emulation, providing insights into the available iOS versions and device options.", 'Installing Android Studio to emulate Android devices It explains the need to install Android Studio, a 923-megabyte software, to emulate Ionic projects to Android devices, detailing the process of creating a new project and using the AVD Manager to list virtual devices.', "Specifying device targets like iPhone 8 and Nexus 6 with dash dash target flag The chapter emphasizes the use of the 'dash dash target' flag to specify device targets, illustrating the process of specifying devices like iPhone 8 and Nexus 6 for emulation, with a note on the case sensitivity of the device names."]}], 'duration': 976.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg1375424.jpg', 'highlights': ['The chapter covers the process of adding and removing platforms (iOS, Android, browser) using Ionic CLI commands.', "Using 'ionic serve' eliminates the need to emulate the project to a browser using 'ionic cordova emulate browser', simplifying the process and saving time.", 'Ionic Lab allows viewing the app as it would appear on a mobile device, offering iOS and Android versions for UI comparison, enhancing the development experience.', "The chapter mentions using the 'dash dash list' command to check the available devices for emulation, providing insights into the available iOS versions and device options.", 'Installing Android Studio, a 923-megabyte software, is necessary to emulate Ionic projects to Android devices, detailing the process of creating a new project and using the AVD Manager to list virtual devices.', "The chapter emphasizes the use of the 'dash dash target' flag to specify device targets, illustrating the process of specifying devices like iPhone 8 and Nexus 6 for emulation, with a note on the case sensitivity of the device names."]}, {'end': 3120.141, 'segs': [{'end': 2386.788, 'src': 'embed', 'start': 2352.622, 'weight': 0, 'content': [{'end': 2356.665, 'text': 'And as you can see our emulator is getting online.', 'start': 2352.622, 'duration': 4.043}, {'end': 2361.649, 'text': 'Now this is an application that it actually rain.', 'start': 2357.706, 'duration': 3.943}, {'end': 2366.573, 'text': "So yeah, that that's pretty much it is guys for this video.", 'start': 2362.309, 'duration': 4.264}, {'end': 2375.52, 'text': 'And this is how you use and emulate your project into Ionic using Ionic CLI to iOS and Android.', 'start': 2366.633, 'duration': 8.887}, {'end': 2381.424, 'text': "We're going to take a look at the code itself.", 'start': 2379.343, 'duration': 2.081}, {'end': 2386.788, 'text': "We've learned so far how to emulate projects to Android devices and iOS devices.", 'start': 2381.865, 'duration': 4.923}], 'summary': 'Emulator online, emulating project into ionic using ionic cli to ios and android.', 'duration': 34.166, 'max_score': 2352.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg2352622.jpg'}, {'end': 2485.034, 'src': 'embed', 'start': 2434.645, 'weight': 1, 'content': [{'end': 2439.609, 'text': "the source code is going to be available on my github account, so I'll link to that as well.", 'start': 2434.645, 'duration': 4.964}, {'end': 2442.471, 'text': "so I'll do ionic serve dash L.", 'start': 2439.609, 'duration': 2.862}, {'end': 2447.034, 'text': 'so dash L flag basically will help us to reload our application.', 'start': 2442.471, 'duration': 4.563}, {'end': 2451.396, 'text': 'it will show our application and into native looking devices.', 'start': 2447.034, 'duration': 4.362}, {'end': 2457.059, 'text': "But at the end of the day, you still want to test on the actual simulator, whether it's iOS or Android.", 'start': 2451.456, 'duration': 5.603}, {'end': 2459.781, 'text': 'Now this is our application is running.', 'start': 2457.4, 'duration': 2.381}, {'end': 2467.285, 'text': "I'm just going to make this a little bit like this, and then we don't need to keep the terminal up and running.", 'start': 2459.801, 'duration': 7.484}, {'end': 2468.706, 'text': "Now, that's it.", 'start': 2467.845, 'duration': 0.861}, {'end': 2472.848, 'text': "So, first of all, let's go through the project structure.", 'start': 2469.346, 'duration': 3.502}, {'end': 2479.031, 'text': "So, we have seen some of the project structure in the previous video, but let's go into details.", 'start': 2472.888, 'duration': 6.143}, {'end': 2485.034, 'text': 'Now, the first thing you will see is a source folder, which will have everything related to your app.', 'start': 2480.091, 'duration': 4.943}], 'summary': "Demonstrates using 'ionic serve' with 'dash l' flag to reload application for native-looking devices before testing on actual simulator.", 'duration': 50.389, 'max_score': 2434.645, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg2434645.jpg'}, {'end': 2810.767, 'src': 'embed', 'start': 2752.219, 'weight': 3, 'content': [{'end': 2758.604, 'text': "press enter now it's going to create a page of contact.", 'start': 2752.219, 'duration': 6.385}, {'end': 2760.145, 'text': "also, it's going to create a module.", 'start': 2758.604, 'duration': 1.541}, {'end': 2768.811, 'text': 'so basically, when you go inside a module, you see it has a route part set to empty and it defines the component.', 'start': 2760.145, 'duration': 8.666}, {'end': 2771.653, 'text': 'it imports the component as well.', 'start': 2768.811, 'duration': 2.842}, {'end': 2773.154, 'text': "so let's close this as well.", 'start': 2771.653, 'duration': 1.501}, {'end': 2778.719, 'text': "now let's say that we don't see these automatically loaded, But we want to write our own.", 'start': 2773.154, 'duration': 5.565}, {'end': 2789.309, 'text': 'So, basically, you simply go and define a path, you type it in the path you want to match according to the URL in your browser,', 'start': 2778.759, 'duration': 10.55}, {'end': 2791.632, 'text': 'and then you type a key load children.', 'start': 2789.309, 'duration': 2.323}, {'end': 2798.277, 'text': 'And then you specify a path to the folder, which is basically here about us.', 'start': 2792.152, 'duration': 6.125}, {'end': 2808.005, 'text': 'And then next you say, go inside this folder, look for this file about us.module.ts file, which is defined here.', 'start': 2798.757, 'duration': 9.248}, {'end': 2810.767, 'text': 'And then you define a hash.', 'start': 2808.685, 'duration': 2.082}], 'summary': 'Demonstrating how to create a contact page and module, with manual route configuration and key load children.', 'duration': 58.548, 'max_score': 2752.219, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg2752219.jpg'}], 'start': 2352.622, 'title': 'Emulating ionic projects for ios and android and ionic 4 project structure', 'summary': 'Covers emulating ionic projects for ios and android, basics of ionic, adding platforms, creating a blank project, and discusses the project structure in ionic 4, including lazy loading concept for efficient module loading and navigation between pages.', 'chapters': [{'end': 2434.645, 'start': 2352.622, 'title': 'Emulating ionic projects for ios and android', 'summary': 'Discusses emulating ionic projects for ios and android, covering the basics of ionic, how to add platforms like android, ios, and browser, and how to create a blank project using ionic cli.', 'duration': 82.023, 'highlights': ['The chapter discusses emulating Ionic projects for iOS and Android. Emulating Ionic projects for iOS and Android.', 'Covering the basics of Ionic, how to add platforms like Android, iOS, and browser. Covering the basics of Ionic and adding platforms like Android, iOS, and browser.', 'How to create a blank project using Ionic CLI. Creating a blank project using Ionic CLI.']}, {'end': 3120.141, 'start': 2434.645, 'title': 'Ionic 4 project structure and lazy loading', 'summary': 'Discusses the project structure in ionic 4, including the source folder, main.ts file as the entry point, app module, lazy loading concept for efficient loading of modules, and navigation between pages using lazy loading.', 'duration': 685.496, 'highlights': ['The main.ts file serves as the entry point for the whole application, importing necessary modules like platform, browser, dynamic bootstrap module, and app module.', 'The app module in Ionic 4 functions as the main entry module, initiating the application and processing Angular-related functionalities.', 'Explains the concept of lazy loading in Ionic 4, allowing efficient loading of modules based on the browser URL or requested pages, reducing the application loading time.', 'Demonstrates the process of creating separate modules and pages for About Us and Contact, automatically generating modules and linking them to the app routing module for navigation.', 'Discusses the implementation of lazy loading by defining paths and using loadChildren to specify the module and component, enabling navigation between different pages with efficient loading.']}], 'duration': 767.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg2352622.jpg', 'highlights': ['Covers emulating Ionic projects for iOS and Android.', 'Covering the basics of Ionic and adding platforms like Android, iOS, and browser.', 'Creating a blank project using Ionic CLI.', 'Explains the concept of lazy loading in Ionic 4, allowing efficient loading of modules based on the browser URL or requested pages, reducing the application loading time.', 'Discusses the implementation of lazy loading by defining paths and using loadChildren to specify the module and component, enabling navigation between different pages with efficient loading.', 'The main.ts file serves as the entry point for the whole application, importing necessary modules like platform, browser, dynamic bootstrap module, and app module.', 'The app module in Ionic 4 functions as the main entry module, initiating the application and processing Angular-related functionalities.', 'Demonstrates the process of creating separate modules and pages for About Us and Contact, automatically generating modules and linking them to the app routing module for navigation.']}, {'end': 4457.845, 'segs': [{'end': 3145.929, 'src': 'embed', 'start': 3120.141, 'weight': 3, 'content': [{'end': 3126.545, 'text': "so for that i'm actually going to create a new project and then in that project.", 'start': 3120.141, 'duration': 6.404}, {'end': 3135.511, 'text': "so let me just open the terminal first and then here in the terminal, let me just make it bigger for you guys, and let's do this now in the terminal.", 'start': 3126.545, 'duration': 8.966}, {'end': 3141.76, 'text': "i'm going to create a new ionic form project and then we'll add action sheets to it.", 'start': 3135.511, 'duration': 6.249}, {'end': 3144.766, 'text': "Type, and I'm gonna make that to Angular.", 'start': 3141.96, 'duration': 2.806}, {'end': 3145.929, 'text': "We'll press enter.", 'start': 3145.207, 'duration': 0.722}], 'summary': 'Creating a new ionic form project with angular.', 'duration': 25.788, 'max_score': 3120.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg3120141.jpg'}, {'end': 3247.917, 'src': 'embed', 'start': 3224.501, 'weight': 0, 'content': [{'end': 3231.629, 'text': "Well, I don't have an account as of yet now for Ionic Pro, so that's why I'm going to say N and press Enter.", 'start': 3224.501, 'duration': 7.128}, {'end': 3235.225, 'text': 'right. so our project is created.', 'start': 3232.262, 'duration': 2.963}, {'end': 3237.807, 'text': "now i'm going to open that project in webstrom.", 'start': 3235.225, 'duration': 2.582}, {'end': 3244.033, 'text': "so let's be open webstrom and here let's uh, let's take it to that window there.", 'start': 3237.807, 'duration': 6.226}, {'end': 3247.917, 'text': "okay, so now i'm gonna go and click on open.", 'start': 3244.033, 'duration': 3.884}], 'summary': 'Creating an ionic pro account, project setup in webstorm', 'duration': 23.416, 'max_score': 3224.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg3224501.jpg'}, {'end': 3584.006, 'src': 'embed', 'start': 3562.452, 'weight': 2, 'content': [{'end': 3571.143, 'text': 'any buttons available in action sheet, so we can define as many buttons as we want and then after that we have this await, action sheet,', 'start': 3562.452, 'duration': 8.691}, {'end': 3578.258, 'text': 'dot present method, which will basically create an action sheet and then make it appear Right.', 'start': 3571.143, 'duration': 7.115}, {'end': 3579.941, 'text': 'so now we have this function.', 'start': 3578.258, 'duration': 1.683}, {'end': 3584.006, 'text': "I'm going to put this function and call it when I click on this button.", 'start': 3580.201, 'duration': 3.805}], 'summary': 'Creating an action sheet with multiple buttons for user interaction.', 'duration': 21.554, 'max_score': 3562.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg3562452.jpg'}, {'end': 3743.122, 'src': 'embed', 'start': 3715.231, 'weight': 4, 'content': [{'end': 3717.593, 'text': 'So we can have like a multiple buttons here.', 'start': 3715.231, 'duration': 2.362}, {'end': 3719.955, 'text': 'with a destructive role.', 'start': 3717.953, 'duration': 2.002}, {'end': 3726.582, 'text': "so i'll just go make another one comma, make another one and i save the project.", 'start': 3719.955, 'duration': 6.627}, {'end': 3731.828, 'text': "and this time, when i click on that hello action sheet, you'll see multiple buttons appearing.", 'start': 3726.582, 'duration': 5.246}, {'end': 3734.791, 'text': 'so click on this, and here we have multiple buttons.', 'start': 3731.828, 'duration': 2.963}, {'end': 3738.415, 'text': "i'm going to go to console and just clear this thing out.", 'start': 3734.791, 'duration': 3.624}, {'end': 3742.001, 'text': "Now we're going to go to Actionsheet.", 'start': 3739.98, 'duration': 2.021}, {'end': 3743.122, 'text': "I'm going to click on one of the buttons.", 'start': 3742.021, 'duration': 1.101}], 'summary': 'Demonstrating multiple buttons in action sheet feature.', 'duration': 27.891, 'max_score': 3715.231, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg3715231.jpg'}, {'end': 4122.029, 'src': 'embed', 'start': 4092.247, 'weight': 1, 'content': [{'end': 4094.749, 'text': 'so what happens is, if you wanna like,', 'start': 4092.247, 'duration': 2.502}, {'end': 4103.417, 'text': "if you're working on an application where you have a lot of data sets and it's not you're not able to fit those data set in just a small screen.", 'start': 4094.749, 'duration': 8.668}, {'end': 4112.383, 'text': 'so what you can do is you can use this infinite scroll and basically the amount of data you can load, and in that screen that will only be loaded.', 'start': 4103.417, 'duration': 8.966}, {'end': 4118.227, 'text': 'but when you go scroll down, it will load the next data into an array or an object.', 'start': 4112.383, 'duration': 5.844}, {'end': 4122.029, 'text': "I'll show you how you can use it later, but let's go through quickly what are available.", 'start': 4118.227, 'duration': 3.802}], 'summary': 'Infinite scroll loads data incrementally for large datasets in applications.', 'duration': 29.782, 'max_score': 4092.247, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg4092247.jpg'}], 'start': 3120.141, 'title': 'Ionic project development and ui components', 'summary': 'Covers creating an ionic form project, integrating with cordova, implementing an action sheet component, and introducing various ionic ui components. it discusses the process of project development, highlights the benefits of using ionic components, and showcases a wide range of ui components available for implementation in an application.', 'chapters': [{'end': 3199.405, 'start': 3120.141, 'title': 'Creating ionic form project with action sheets', 'summary': 'Discusses creating a new ionic form project, selecting a template, and focusing on implementing components and creating a ui with tabs in the side menu.', 'duration': 79.264, 'highlights': ["Creating a new Ionic form project and adding action sheets to it, choosing Angular as the type, and specifying 'Ionic tutorial' as the project name.", 'Selecting a template for the project, opting for the side menu template to generate a side menu with pre-existing code, and focusing on implementing components and creating a UI with tabs in the side menu.']}, {'end': 3479.809, 'start': 3199.405, 'title': 'Ionic project development', 'summary': 'Covers the development process of an ionic project, including integrating with cordova, opening the project in webstorm, and creating an action sheet in the app component.', 'duration': 280.404, 'highlights': ['Integrating Cordova with the application to target native iOS and Android platforms.', 'Opening the project in WebStorm and navigating through the project structure, including the app module and app component.', 'Creating an action sheet in the app component to display setup options with the ability to confirm or cancel actions.']}, {'end': 4037.072, 'start': 3480.549, 'title': 'Ionic action sheet component', 'summary': "Introduces the implementation of an action sheet component in an ionic application, explaining the constructor function, async function 'present action sheet', and the process of adding and customizing buttons, highlighting the benefits of using ionic components for cross-platform ui, and showcasing the documentation of ionic components including action sheets, alerts, badges, buttons, cards, date and time pickers.", 'duration': 556.523, 'highlights': ['Ionic components allow for quickly constructing interfaces for apps, such as the action sheet component. Ionic apps are made of high-level building blocks called components, including models, pop-ups, and cards.', "Explanation of the constructor function and the async function 'present action sheet' for implementing the action sheet component in the Ionic application. The function 'present action sheet' is an async function that creates an action sheet with customizable properties like header, mode, and buttons.", 'Demonstration of adding and customizing buttons within the action sheet component, showcasing the ability to define multiple buttons with different roles. The demonstration includes adding multiple buttons, defining roles for the buttons, and showcasing the appearance of multiple buttons within the action sheet.', "Showcasing the benefits of using Ionic components for cross-platform UI, where one HTML code with CSS classes can adapt to the specific platform's native look. Ionic components take the responsibility of making the app look native to the specific platform, such as iOS or Android, by using a single HTML code with CSS classes.", 'Introduction to the documentation of Ionic components, including action sheets, alerts, badges, buttons, cards, date and time pickers, and the showcase of a date picker implementation. The documentation provides code snippets for various components, such as action sheets, buttons, and date pickers, to be used in Ionic applications for native-look UI elements.']}, {'end': 4457.845, 'start': 4037.892, 'title': 'Ionic ui components overview', 'summary': 'Introduces various ionic ui components including fab, grid, infinite scroll, loading, menu, model, nav, popover, range, refresher, search bar, selection, slides, spinners, tabs, toast, and virtual scroll, highlighting their functionalities and ease of implementation in an application.', 'duration': 419.953, 'highlights': ['Introduction of various Ionic UI components The chapter covers the introduction of various Ionic UI components including FAB, grid, infinite scroll, loading, menu, model, nav, popover, range, refresher, search bar, selection, slides, spinners, tabs, toast, and virtual scroll, emphasizing their functionalities and ease of implementation in an application.', 'Ease of implementation and functionalities of UI components The transcript emphasizes the ease of implementation and functionalities of UI components such as FAB, grid, infinite scroll, loading, menu, model, nav, popover, range, refresher, search bar, selection, slides, spinners, tabs, toast, and virtual scroll within an application.', 'Use of UI components in enhancing user experience The use of UI components like loading, refresher, toast, and virtual scroll is highlighted as a means to enhance user experience by providing feedback during data loading, refreshing, displaying messages, and efficiently handling large datasets.']}], 'duration': 1337.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg3120141.jpg', 'highlights': ['Introduction of various Ionic UI components with emphasis on their functionalities and ease of implementation.', 'Use of UI components like loading, refresher, toast, and virtual scroll to enhance user experience.', 'Demonstration of adding and customizing buttons within the action sheet component.', 'Ionic components take the responsibility of making the app look native to the specific platform.', 'Ionic components allow for quickly constructing interfaces for apps, such as the action sheet component.']}, {'end': 6030.83, 'segs': [{'end': 5266.744, 'src': 'embed', 'start': 5233.584, 'weight': 3, 'content': [{'end': 5235.347, 'text': 'we can see we have a properties.', 'start': 5233.584, 'duration': 1.763}, {'end': 5243.937, 'text': 'Now the properties are basically a value that you can use to do some stuff.', 'start': 5236.052, 'duration': 7.885}, {'end': 5246.098, 'text': 'For example, here it says animated.', 'start': 5243.997, 'duration': 2.101}, {'end': 5252.742, 'text': "So it says if true alert will animate and it's default to true.", 'start': 5246.118, 'duration': 6.624}, {'end': 5257.721, 'text': 'So if I click on this, then you see the animation happening.', 'start': 5253.242, 'duration': 4.479}, {'end': 5259.781, 'text': 'so click here, you see that animation.', 'start': 5257.721, 'duration': 2.06}, {'end': 5266.744, 'text': "so if i go and right on the top, i can say i don't want to.", 'start': 5259.781, 'duration': 6.963}], 'summary': "The properties allow values for various functions, e.g. 'animated' - default to true.", 'duration': 33.16, 'max_score': 5233.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg5233584.jpg'}, {'end': 5436.239, 'src': 'embed', 'start': 5406.898, 'weight': 1, 'content': [{'end': 5408.579, 'text': "Right now, this button doesn't do anything.", 'start': 5406.898, 'duration': 1.681}, {'end': 5412.162, 'text': "Let's take a look how we can improve this.", 'start': 5410.32, 'duration': 1.842}, {'end': 5413.883, 'text': 'Here we have a button type.', 'start': 5412.682, 'duration': 1.201}, {'end': 5415.344, 'text': 'We can define that as a button.', 'start': 5413.903, 'duration': 1.441}, {'end': 5421.213, 'text': "about the color property we've already used here and then we define its value success.", 'start': 5415.911, 'duration': 5.302}, {'end': 5425.995, 'text': 'this is how we can see this color success there all the way down.', 'start': 5421.213, 'duration': 4.782}, {'end': 5427.695, 'text': 'we have all the options.', 'start': 5425.995, 'duration': 1.7}, {'end': 5429.956, 'text': 'for example, we have the size.', 'start': 5427.695, 'duration': 2.261}, {'end': 5436.239, 'text': 'if you want to make a button larger or small, then you can define that.', 'start': 5429.956, 'duration': 6.283}], 'summary': 'Improving button functionality with color, type, and size customization.', 'duration': 29.341, 'max_score': 5406.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg5406898.jpg'}, {'end': 5667.237, 'src': 'embed', 'start': 5642.865, 'weight': 0, 'content': [{'end': 5650.968, 'text': "So here we have a time picker, nicely done, and it will automatically adjust its UI according to the platform you're using.", 'start': 5642.865, 'duration': 8.103}, {'end': 5653.75, 'text': 'So we have a and FAB 2019-90.', 'start': 5651.409, 'duration': 2.341}, {'end': 5657.852, 'text': 'So this is how you can use date and time picker.', 'start': 5655.451, 'duration': 2.401}, {'end': 5659.533, 'text': 'Now let me take you to the API.', 'start': 5657.972, 'duration': 1.561}, {'end': 5667.237, 'text': "We'll take a look at some of the properties for date and time picker available, which is actually an important one,", 'start': 5659.893, 'duration': 7.344}], 'summary': 'Time picker adjusts ui, fab 2019-90, properties for date and time picker available', 'duration': 24.372, 'max_score': 5642.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg5642865.jpg'}], 'start': 4458.446, 'title': 'Overview and usage of ionic 4 components', 'summary': 'Provides an overview of ionic 4 components, highlighting availability, documentation, comparison with ionic 3, and upcoming improvements. it also covers creating and presenting alerts in ionic, including the usage of action sheets, with examples and customization options.', 'chapters': [{'end': 4632.372, 'start': 4458.446, 'title': 'Ionic 4 components overview', 'summary': 'Provides an overview of ionic 4, including its components, documentation status, and comparison with ionic 3, highlighting the availability of ui components and the upcoming improvements.', 'duration': 173.926, 'highlights': ['Ionic 4 documentation is in beta with a focus on adding more components and information. The documentation for Ionic 4 is not stable and is in beta, with a focus on adding more components and information.', 'Ionic 4 has the core technology and structure in place with upcoming improvements. Ionic 4 already has the core technology and structure in place, with upcoming improvements expected.', 'Comparison of UI components between Ionic 3 and Ionic 4, with Ionic 4 having more options. Ionic 4 offers more UI components compared to Ionic 3, with examples such as the toolbar.', "Overview of the 'alert' component in Ionic 4, its features, and recommended usage scenarios. Provides an overview of the 'alert' component in Ionic 4, including its features, recommended usage scenarios, and comparison with the 'model' component."]}, {'end': 4967.847, 'start': 4632.372, 'title': 'Creating and presenting alerts in ionic', 'summary': 'Demonstrates the process of creating and presenting alerts in ionic, including importing the alert controller, defining async functions, creating and presenting a simple alert, and exploring additional functionalities such as subheadings, messages, buttons, and action sheets.', 'duration': 335.475, 'highlights': ['Creating and presenting a simple alert The speaker demonstrates the process of creating and presenting a simple alert using the alert controller, including defining an async function, specifying the header, subheader, message, and buttons for the alert, and presenting the alert.', 'Exploring Ionic documentation for alert functionalities The speaker refers to Ionic documentation to explore available functionalities for alerts, including buttons, inputs, usage, and code snippets for creating different types of alerts.', 'Creating an action sheet alongside the alert The speaker demonstrates the process of creating an action sheet alongside the alert by importing the action sheet controller, defining buttons with handlers, and handling multiple buttons with different functionalities.']}, {'end': 5491.325, 'start': 4968.688, 'title': 'Ionic action sheet documentation', 'summary': 'Demonstrates the usage of action sheets and alerts in ionic, highlighting the process of creating and customizing action sheets and alerts, with examples of code snippets and properties, to improve knowledge and productivity in ionic development.', 'duration': 522.637, 'highlights': ['The chapter demonstrates the process of creating and customizing action sheets and alerts in Ionic, providing examples of code snippets and properties to enhance knowledge and productivity in Ionic development.', 'The transcript outlines the usage of properties such as animated, backdrop, dismiss, overlay, and shape to customize alerts and action sheets.', 'It also provides examples of code snippets for using ion button with color properties, defining button type, size, and shape to improve the knowledge of Ionic development.']}, {'end': 6030.83, 'start': 5491.325, 'title': 'Ui component overview', 'summary': 'Discusses the ui components available in the api, including methods for alert, checkbox, date and time picker, and handling date-time values, with a focus on customization and usage examples.', 'duration': 539.505, 'highlights': ['The chapter discusses the UI components available in the API, including methods for alert, checkbox, date and time picker, and handling date-time values, with a focus on customization and usage examples. It covers a range of UI components such as alert, checkbox, date and time picker, and handling date-time values, emphasizing their methods, properties, and usage examples.', 'The chapter provides examples of dynamically created components, such as ion checkbox, and explains how to define and utilize their properties. It provides examples of dynamically created components like ion checkbox, explaining the definition and usage of their properties.', 'The chapter demonstrates the customization of date and time format using properties like display-format, picker-format, min, and max, with practical code snippets and visual outcomes. It demonstrates the customization of date and time format using properties like display-format, picker-format, min, and max, using practical code snippets and visual outcomes.', 'The chapter mentions the availability of sample codes and explains how to use properties like cancel-text and day names for customization. It mentions the availability of sample codes and explains the usage of properties like cancel-text and day names for customization purposes.']}], 'duration': 1572.384, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg4458446.jpg', 'highlights': ['Ionic 4 offers more UI components compared to Ionic 3, with examples such as the toolbar.', 'The chapter discusses the UI components available in the API, including methods for alert, checkbox, date and time picker, and handling date-time values, with a focus on customization and usage examples.', 'The chapter demonstrates the process of creating and customizing action sheets and alerts in Ionic, providing examples of code snippets and properties to enhance knowledge and productivity in Ionic development.', 'Creating and presenting a simple alert The speaker demonstrates the process of creating and presenting a simple alert using the alert controller, including defining an async function, specifying the header, subheader, message, and buttons for the alert, and presenting the alert.']}, {'end': 6857.804, 'segs': [{'end': 6397.587, 'src': 'embed', 'start': 6362.403, 'weight': 4, 'content': [{'end': 6364.263, 'text': 'Oops, no, we need to go back.', 'start': 6362.403, 'duration': 1.86}, {'end': 6370.805, 'text': "I'm just going to copy this, go back here and paste it here.", 'start': 6364.283, 'duration': 6.522}, {'end': 6373.646, 'text': "Let's save the project and let's call this function.", 'start': 6371.365, 'duration': 2.281}, {'end': 6376.087, 'text': "And then let's see if we see the loading or not.", 'start': 6374.146, 'duration': 1.941}, {'end': 6379.671, 'text': 'If I click on loading, that should give me this loading here.', 'start': 6376.687, 'duration': 2.984}, {'end': 6384.758, 'text': 'It says uh, loading, we have a spinner.', 'start': 6379.691, 'duration': 5.067}, {'end': 6388.201, 'text': 'hide direction, five seconds message.', 'start': 6384.758, 'duration': 3.443}, {'end': 6389.281, 'text': 'please wait.', 'start': 6388.201, 'duration': 1.08}, {'end': 6390.222, 'text': 'is it transparent?', 'start': 6389.281, 'duration': 0.941}, {'end': 6397.587, 'text': "true, if there's any css custom class, i'm just going to remove the css custom class and i'm going to remove this as well.", 'start': 6390.222, 'duration': 7.365}], 'summary': 'Implementing a function to display loading spinner for 5 seconds.', 'duration': 35.184, 'max_score': 6362.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg6362403.jpg'}, {'end': 6535.214, 'src': 'embed', 'start': 6505.04, 'weight': 6, 'content': [{'end': 6509.603, 'text': 'now we are we seeing a rectangular, a loading box, which is good.', 'start': 6505.04, 'duration': 4.563}, {'end': 6511.064, 'text': "now it's not transparent.", 'start': 6509.603, 'duration': 1.461}, {'end': 6518.609, 'text': 'so we do something like translate and then we do to true.', 'start': 6511.064, 'duration': 7.545}, {'end': 6521.511, 'text': "true, let's just do comma here.", 'start': 6518.609, 'duration': 2.902}, {'end': 6524.513, 'text': "let's save it and then we should see a reload.", 'start': 6521.511, 'duration': 3.002}, {'end': 6531.492, 'text': "Let's just click on that and now we have some sort of transluscent.", 'start': 6526.448, 'duration': 5.044}, {'end': 6533.573, 'text': "So let's go back.", 'start': 6532.632, 'duration': 0.941}, {'end': 6535.214, 'text': "I'm going to close loading.", 'start': 6533.593, 'duration': 1.621}], 'summary': 'Rectangular loading box is now non-transparent, with translucency added.', 'duration': 30.174, 'max_score': 6505.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg6505040.jpg'}, {'end': 6613.067, 'src': 'embed', 'start': 6560.726, 'weight': 2, 'content': [{'end': 6565.948, 'text': 'sometimes you want to increase or decrease the brightness of your iphone or application.', 'start': 6560.726, 'duration': 5.222}, {'end': 6570.349, 'text': 'you can do this range as well and change the values dynamically.', 'start': 6565.948, 'duration': 4.401}, {'end': 6575.838, 'text': 'Refresher, as I said, with loader you can do a refresher.', 'start': 6571.917, 'duration': 3.921}, {'end': 6581.88, 'text': 'So we tap and slide down and then it will load more data to it, so you can call an event.', 'start': 6575.838, 'duration': 6.042}, {'end': 6583.081, 'text': "So let's go to the API.", 'start': 6581.88, 'duration': 1.201}, {'end': 6585.101, 'text': "Let's take a look at what we can do.", 'start': 6583.101, 'duration': 2}, {'end': 6593.384, 'text': 'So in the refresher, Refresher provides pull to free, fresh functionality on a content, a component,', 'start': 6585.862, 'duration': 7.522}, {'end': 6602.104, 'text': 'pull to refresh pattern lets the user pull down on the list of data, using touch in other in order to retrieve more data.', 'start': 6594.062, 'duration': 8.042}, {'end': 6604.565, 'text': 'so we have this complete.', 'start': 6602.104, 'duration': 2.461}, {'end': 6607.326, 'text': "so let's take a look at the usage now.", 'start': 6604.565, 'duration': 2.761}, {'end': 6613.067, 'text': 'so we will do uh all copy and paste this and definitely you can tell that this is going to work.', 'start': 6607.326, 'duration': 5.741}], 'summary': 'The transcript discusses adjusting iphone brightness, using a refresher to load more data, and implementing pull to refresh functionality.', 'duration': 52.341, 'max_score': 6560.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg6560726.jpg'}, {'end': 6693.921, 'src': 'embed', 'start': 6665.347, 'weight': 1, 'content': [{'end': 6667.809, 'text': 'So you can call this function as well.', 'start': 6665.347, 'duration': 2.462}, {'end': 6671.793, 'text': 'Get process makes really sense, straightforward sense.', 'start': 6668.13, 'duration': 3.663}, {'end': 6674.075, 'text': "So let's cancel out.", 'start': 6672.434, 'duration': 1.641}, {'end': 6675.837, 'text': 'And then we go to search bar.', 'start': 6674.456, 'duration': 1.381}, {'end': 6677.259, 'text': 'Pretty simple, guys.', 'start': 6675.997, 'duration': 1.262}, {'end': 6685.814, 'text': 'Search bar is just, you know, search bar which can do some filtering as well, and ionic basically provide an API for that as well.', 'start': 6677.659, 'duration': 8.155}, {'end': 6692.58, 'text': 'a select a select is something that you click and then you have an option to select right.', 'start': 6685.814, 'duration': 6.766}, {'end': 6693.921, 'text': 'so we have December.', 'start': 6692.58, 'duration': 1.341}], 'summary': 'Demonstrating function usage and discussing search bar and select functionality in ionic framework.', 'duration': 28.574, 'max_score': 6665.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg6665347.jpg'}, {'end': 6872.956, 'src': 'embed', 'start': 6844.539, 'weight': 0, 'content': [{'end': 6847.819, 'text': 'It returns a promise that resolves and the toast will dismiss.', 'start': 6844.539, 'duration': 3.28}, {'end': 6849.9, 'text': 'Dismiss actually dismisses the toast.', 'start': 6848.22, 'duration': 1.68}, {'end': 6857.804, 'text': 'And we have some custom properties as well, which we can use to customize the layout or look of that toast.', 'start': 6850.7, 'duration': 7.104}, {'end': 6872.956, 'text': 'So we pretty much covered all the basic UI components and you understand how to use them by going and reading about the documentation in API page that can help you how you can customize those components.', 'start': 6858.806, 'duration': 14.15}], 'summary': 'The promise resolves, dismissing the toast and allowing for customization of layout and appearance. it covers basic ui components and how to use them through documentation.', 'duration': 28.417, 'max_score': 6844.539, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg6844539.jpg'}], 'start': 6031.571, 'title': 'Ionic framework components', 'summary': 'Covers the usage of infinite scroll for data processing, and the implementation of various input fields, such as text, password, number, and tel, along with an overview of ui components including loading, refresher, toast, and spinner.', 'chapters': [{'end': 6194.532, 'start': 6031.571, 'title': 'Infinite scroll and ionic input fields', 'summary': 'Discusses the use of infinite scroll for data processing and demonstrates the implementation of various types of input fields in ionic, including text, password, number, and tel, with examples and their respective functionalities.', 'duration': 162.961, 'highlights': ['Infinite scroll is a useful component for handling large data sets, allowing for efficient data loading as users scroll, enabling a better user experience. Infinite scroll can be used to handle large data sets, providing a better user experience by loading more data as the user scrolls.', 'Demonstrates the implementation and usage of various types of input fields in Ionic, including text, password, number, and tel, showcasing their respective functionalities and examples. The chapter demonstrates the implementation and usage of various types of input fields in Ionic, such as text, password, number, and tel, showcasing their respective functionalities and examples.', 'The demonstration of input fields includes features such as floating labels and the ability to specify input types like number and tel, showcasing their interactive behavior and functionality. The demonstration of input fields includes features such as floating labels and the ability to specify input types like number and tel, showcasing their interactive behavior and functionality.']}, {'end': 6857.804, 'start': 6195.213, 'title': 'Ionic ui components overview', 'summary': 'Covers the usage of different ui components in ionic framework, including loading, refresher, toast, and spinner, demonstrating their functionality and customization options.', 'duration': 662.591, 'highlights': ['The chapter covers the usage of different UI components in Ionic framework The transcript discusses various UI components such as loading, refresher, toast, spinner, search bar, select, slides, and scroll, providing an overview of their usage within the Ionic framework.', 'Demonstrates the functionality of loading component and its customization options The speaker demonstrates the usage of loading component to indicate data loading, including defining properties like duration, message, and spinner type, while showcasing different animations and UI modifications.', 'Explains the usage and behavior of refresher component The transcript explains how the refresher component provides pull-to-refresh functionality, including the event handling, asynchronous operations, and available properties like cancel, complete, and get process function.', 'Details the properties and customization options of toast component The discussion elaborates on the properties and customization options of the toast component, such as position, duration, show close button, and usage of custom properties to customize the layout and appearance of the toast message.', 'Mentions the functionality of spinner and its types The transcript briefly mentions the existence of spinner component and its types without delving into detailed demonstration or customization.']}], 'duration': 826.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg6031571.jpg', 'highlights': ['Infinite scroll is a useful component for handling large data sets, allowing for efficient data loading as users scroll, enabling a better user experience.', 'Demonstrates the implementation and usage of various types of input fields in Ionic, including text, password, number, and tel, showcasing their respective functionalities and examples.', 'The chapter covers the usage of different UI components in Ionic framework, providing an overview of their usage within the Ionic framework.', 'Demonstrates the functionality of loading component and its customization options, including defining properties like duration, message, and spinner type, while showcasing different animations and UI modifications.', 'Explains the usage and behavior of refresher component, including the event handling, asynchronous operations, and available properties like cancel, complete, and get process function.', 'Details the properties and customization options of toast component, such as position, duration, show close button, and usage of custom properties to customize the layout and appearance of the toast message.', 'The demonstration of input fields includes features such as floating labels and the ability to specify input types like number and tel, showcasing their interactive behavior and functionality.']}, {'end': 8160.746, 'segs': [{'end': 7544.873, 'src': 'embed', 'start': 7515.91, 'weight': 1, 'content': [{'end': 7517.511, 'text': "Let's work on a tab bar.", 'start': 7515.91, 'duration': 1.601}, {'end': 7522.886, 'text': "So for that I'm going to generate new module.", 'start': 7518.312, 'duration': 4.574}, {'end': 7534.51, 'text': "so to ionic generate and I'll use this as let's just say a module should be fine, okay, and then we'll name as tabs.", 'start': 7522.886, 'duration': 11.624}, {'end': 7537.871, 'text': "it's gonna go and generate a module in the tab.", 'start': 7534.51, 'duration': 3.361}, {'end': 7540.051, 'text': 'there you go, we have a module there.', 'start': 7537.871, 'duration': 2.18}, {'end': 7544.873, 'text': "now inside this we're gonna create another routing module.", 'start': 7540.051, 'duration': 4.822}], 'summary': 'Creating a new tab bar module using ionic generate command.', 'duration': 28.963, 'max_score': 7515.91, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg7515910.jpg'}, {'end': 7884.525, 'src': 'embed', 'start': 7848.02, 'weight': 0, 'content': [{'end': 7852.483, 'text': 'And now here we are going to define some more path here.', 'start': 7848.02, 'duration': 4.463}, {'end': 7855.665, 'text': "So let's just take a look at a couple more things.", 'start': 7853.063, 'duration': 2.602}, {'end': 7860.307, 'text': 'So home page is basically coming from this path.', 'start': 7855.685, 'duration': 4.622}, {'end': 7866.051, 'text': "Let's go to app module and then first of all let's import those module here.", 'start': 7860.828, 'duration': 5.223}, {'end': 7879.762, 'text': 'So we do about to say about us module, and then we have a contact page module.', 'start': 7866.071, 'duration': 13.691}, {'end': 7882.204, 'text': 'so we got two modules there.', 'start': 7879.762, 'duration': 2.442}, {'end': 7884.525, 'text': 'now we go app routing.', 'start': 7882.204, 'duration': 2.321}], 'summary': 'Defining paths for the home page, about us module, and contact page module in the app routing.', 'duration': 36.505, 'max_score': 7848.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg7848020.jpg'}, {'end': 8096.01, 'src': 'embed', 'start': 8056.628, 'weight': 3, 'content': [{'end': 8075.22, 'text': 'so we go to about page and in the toolbar we do ion dash buttons and then we do ion dash menu button.', 'start': 8056.628, 'duration': 18.592}, {'end': 8077.681, 'text': 'okay, let me just make it bigger.', 'start': 8075.22, 'duration': 2.461}, {'end': 8082.643, 'text': 'so see, we have an iron menu button and inside iron button.', 'start': 8077.681, 'duration': 4.962}, {'end': 8090.127, 'text': "so save it and now let's go to about page and we should see this sidebar there as well.", 'start': 8082.643, 'duration': 7.484}, {'end': 8091.968, 'text': 'so you have this sidebar there.', 'start': 8090.127, 'duration': 1.841}, {'end': 8094.549, 'text': 'we should be able to see the same sidebar here.', 'start': 8091.968, 'duration': 2.581}, {'end': 8096.01, 'text': 'now the same thing.', 'start': 8094.549, 'duration': 1.461}], 'summary': 'Creating ion-buttons and ion-menu-button in about page toolbar.', 'duration': 39.382, 'max_score': 8056.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg8056628.jpg'}], 'start': 6858.806, 'title': 'Creating tab bar and sidebar ui in ionic 4', 'summary': "Introduces creating a ui with a tab bar and sidebar in ionic 4, covering basic ui components, implementing a tab bar with a sidebar, promoting a javascript course on udemy with a 70% discount, demonstrating implementing a sidebar menu in an ionic application using ionic split pane, ion menu, ion header, ion toolbar, ion content, ion list, and ngfor loop to generate a dynamic side menu with router links, icons, and menu customization, focusing on generating a new module and routing module for a tab bar in an ionic project, including creating files and defining routing for the tab component, and discussing the generation of modules for 'about us' and 'contact' pages, the configuration of routing modules to include these pages, and the implementation of sidebar menus for the respective pages, allowing navigation between them.", 'chapters': [{'end': 7024.394, 'start': 6858.806, 'title': 'Creating tab bar and sidebar ui in ionic 4', 'summary': 'Introduces creating a ui with a tab bar and sidebar in ionic 4, covering basic ui components, implementing a tab bar with a sidebar, and promoting a javascript course on udemy with a 70% discount.', 'duration': 165.588, 'highlights': ['The chapter covers creating a UI with a tab bar and sidebar, demonstrating the use of basic UI components and implementing a tab bar UI with a sidebar, and also promoting a JavaScript course on Udemy with a 70% discount.', "The video tutorial series on Ionic 4 has covered approximately nine videos, providing an overview of the progress and indicating the readiness to apply the accumulated knowledge to the project's UI development.", 'The instructor emphasizes the complexity of having a tab bar and a side menu side by side in Ionic 4 and recommends a JavaScript course available on Udemy with a 70% discount, providing a link in the video description.', "The instructor demonstrates creating the UI by starting a new project with the 'ionic start' command, specifying Angular as the type, using the 'blank' template, and integrating Cordova, showing the process of project generation and opening it in WebStorm."]}, {'end': 7515.77, 'start': 7025.055, 'title': 'Implementing sidebar menu in ionic', 'summary': 'Demonstrates implementing a sidebar menu in an ionic application using ionic split pane, ion menu, ion header, ion toolbar, ion content, ion list, and ngfor loop to generate a dynamic side menu with router links, icons, and menu customization.', 'duration': 490.715, 'highlights': ['Implemented dynamic sidebar menu using ngFor loop to generate a list of items with router links and labels. The chapter demonstrates the implementation of a dynamic sidebar menu using ngFor loop to generate a list of items with router links and labels, allowing for dynamic menu generation and navigation.', 'Configured sidebar menu to include icon customization and overlay effect. The chapter highlights the configuration of the sidebar menu to include icon customization and overlay effect, providing a visually appealing and customizable menu interface.', 'Utilized Ionic split pane, ion menu, ion header, ion toolbar, and ion content to structure the sidebar menu layout. The chapter showcases the utilization of Ionic split pane, ion menu, ion header, ion toolbar, and ion content to structure the layout of the sidebar menu, demonstrating the foundational components used in implementing the menu.']}, {'end': 7778.009, 'start': 7515.91, 'title': 'Creating ionic tab bar', 'summary': 'Focuses on generating a new module and routing module for a tab bar in an ionic project, including creating files and defining routing for the tab component.', 'duration': 262.099, 'highlights': ["Generated a new module for the tab bar using ionic generate module command. The speaker used the 'ionic generate module' command to create a new module for the tab bar.", "Attempted to generate a routing module for the tab, encountering a 'module already exists' error. Encountered an error when attempting to generate a routing module for the tab due to an existing module.", "Created a component file for the tab bar using the generate component command. A component file for the tab bar was created using the 'generate component' command.", 'Defined routing and component injection for the tab bar in the routing module. Defined routing and component injection for the tab bar in the routing module to set up the tab bar functionality.', 'Outlined the structure and properties of the Ion tabs and Ion.tab for the tab bar. Outlined the structure and properties of the Ion tabs and Ion.tab for the tab bar, including labels, icons, and href attributes.']}, {'end': 8160.746, 'start': 7778.589, 'title': 'Module generation and routing configuration', 'summary': "Discusses the generation of modules for 'about us' and 'contact' pages, the configuration of routing modules to include these pages, and the implementation of sidebar menus for the respective pages, allowing navigation between them.", 'duration': 382.157, 'highlights': ["Modules 'About Us' and 'Contact' generated for page configuration. The speaker demonstrates the generation of 'About Us' and 'Contact' modules for page configuration, indicating the action taken to create these specific modules.", "Routing module configuration for 'About Us' and 'Contact' pages. The speaker explains the process of configuring the routing module to include the 'About Us' and 'Contact' pages, specifying the steps taken to achieve this configuration.", "Implementation of sidebar menus for 'About Us' and 'Contact' pages. The speaker demonstrates the implementation of sidebar menus for the 'About Us' and 'Contact' pages, showcasing the functionality and navigation options provided by these menus."]}], 'duration': 1301.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg6858806.jpg', 'highlights': ['Demonstrated creating a UI with a tab bar and sidebar using basic UI components and implementing a tab bar UI with a sidebar', 'Implemented dynamic sidebar menu using ngFor loop to generate a list of items with router links and labels', 'Generated a new module for the tab bar using ionic generate module command', "Modules 'About Us' and 'Contact' generated for page configuration"]}, {'end': 9177.988, 'segs': [{'end': 8287.95, 'src': 'embed', 'start': 8260.156, 'weight': 1, 'content': [{'end': 8270.746, 'text': 'So if I will go and start this app with Ionic Serve, that will open my browser, which you can see on the right, and it will start the application.', 'start': 8260.156, 'duration': 10.59}, {'end': 8274.157, 'text': 'So new application instance has been started.', 'start': 8272.276, 'duration': 1.881}, {'end': 8280.624, 'text': "So I'm going to log in with one of the email address that I signed up with before.", 'start': 8274.237, 'duration': 6.387}, {'end': 8285.589, 'text': "And I'm going to say the password would be whatever the password type it in.", 'start': 8281.184, 'duration': 4.405}, {'end': 8287.95, 'text': "If I click on login, it's not logging in.", 'start': 8285.629, 'duration': 2.321}], 'summary': 'Launching app with ionic serve, logging in with email, but login fails.', 'duration': 27.794, 'max_score': 8260.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg8260156.jpg'}, {'end': 8553.754, 'src': 'embed', 'start': 8518.064, 'weight': 2, 'content': [{'end': 8520.344, 'text': 'and here you can see i have abc now.', 'start': 8518.064, 'duration': 2.28}, {'end': 8530.226, 'text': "so if i go change this back to login and i hit command s on a mac and i can see it's building and it's reloading.", 'start': 8520.344, 'duration': 9.882}, {'end': 8531.626, 'text': 'uh, the application.', 'start': 8530.226, 'duration': 1.4}, {'end': 8533.767, 'text': 'now i want to have a kudo enabled here.', 'start': 8531.626, 'duration': 2.141}, {'end': 8538.068, 'text': 'so how do we do that is, uh, is applying this trick.', 'start': 8533.767, 'duration': 4.301}, {'end': 8538.888, 'text': "so what i'll do?", 'start': 8538.068, 'duration': 0.82}, {'end': 8542.308, 'text': "i'll go to this platform where i actually build.", 'start': 8538.888, 'duration': 3.42}, {'end': 8553.754, 'text': "uh, if you do ionic cordova platform add browser and also you do Ionic Cordova build browser, you'll get this folder in the platform.", 'start': 8542.308, 'duration': 11.446}], 'summary': 'Demonstrating enabling kudo using ionic cordova commands for browser platform.', 'duration': 35.69, 'max_score': 8518.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg8518064.jpg'}, {'end': 9126.709, 'src': 'embed', 'start': 9094.007, 'weight': 0, 'content': [{'end': 9099.711, 'text': "Also, the app won't work because you have to inject this native storage into your module.", 'start': 9094.007, 'duration': 5.704}, {'end': 9107.216, 'text': "So we're going to go to app.module.ts file and in the providers, I'm just going to type a native storage file.", 'start': 9099.731, 'duration': 7.485}, {'end': 9114.581, 'text': "So we'll just do native storage and add a comma here.", 'start': 9107.956, 'duration': 6.625}, {'end': 9115.421, 'text': "Let's save it.", 'start': 9114.621, 'duration': 0.8}, {'end': 9121.125, 'text': "Now here it's causing an issue because it's coming from native storage.", 'start': 9116.362, 'duration': 4.763}, {'end': 9124.668, 'text': 'We have an NGX as well.', 'start': 9121.466, 'duration': 3.202}, {'end': 9126.709, 'text': 'And I want to type NGX.', 'start': 9125.388, 'duration': 1.321}], 'summary': 'App needs native storage injected into app.module.ts providers for ngx.', 'duration': 32.702, 'max_score': 9094.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg9094007.jpg'}], 'start': 8160.766, 'title': 'Creating ui and debugging in ionic 4', 'summary': 'Covers creating an application with tabs and a sidebar menu using ionic 4, debugging and enabling cordova for faster app development, enabling cordova and live reload in an ionic app, and using native storage in an ionic app.', 'chapters': [{'end': 8217.056, 'start': 8160.766, 'title': 'Creating tab plus sidebar menu', 'summary': 'Explains how to create an application with tabs and a sidebar menu using ionic 4, with the option to download the layout from github, eliminating the need to add boilerplate code.', 'duration': 56.29, 'highlights': ['You can create a tab plus a sidebar menu using Ionic 4 by downloading the layout from GitHub, thus eliminating the need to worry about adding boilerplate code.', 'The speaker will share the GitHub link where the layout can be downloaded for creating a tab plus a sidebar menu using Ionic 4.', 'The speaker started building an application using Ionic framework recently and found it to be a favorable platform.']}, {'end': 8400.233, 'start': 8217.056, 'title': 'Debugging and enabling cordova for faster app development', 'summary': 'Discusses enabling debugging in ides like webstrom and vs code, fixing cordova not enabled error by emulating browser, and the limitation of live reload while emulating browser in ionic for faster app development.', 'duration': 183.177, 'highlights': ['Enabling debugging in IDEs like WebStrom and VS Code to speed up app development', "Fixing Cordova not enabled error by emulating the browser, enabling access to device hardware using Ionic's native API", 'Limitation of live reload when emulating browser in Ionic for faster app development']}, {'end': 8973.961, 'start': 8400.474, 'title': 'Enabling cordova and live reload in ionic app', 'summary': 'Discusses the process of enabling cordova and live reload in an ionic app, including debugging configuration, live reload limitations, enabling cordova using a workaround, and utilizing ionic native for adding native functionality.', 'duration': 573.487, 'highlights': ['Enabling live reload and debugging configuration Debugging configuration allows live reload with enabled breakpoint, providing a seamless debugging experience.', 'Limitations of live reload in application Live reloading does not automatically update the application when changes are made, leading to manual reloading and potential application breakage.', "Workaround for enabling Cordova and live reload Copying the 'www' folder from the browser project to the parent folder enables Cordova and live reload, providing a workaround for enabling Cordova in the application.", 'Utilizing Ionic Native for native functionality Ionic Native serves as a wrapper for Cordova plugins, facilitating the addition of native functionality to Ionic apps, such as accessing the camera and using native storage for storing information in Android and iOS.']}, {'end': 9177.988, 'start': 8973.961, 'title': 'Using native storage in ionic app', 'summary': 'Explains the process of using native storage in an ionic app, including how to save and retrieve data using native storage, importing and implementing native storage in the app, and injecting native storage into the app module.', 'duration': 204.027, 'highlights': ["The process of saving and retrieving data using native storage is explained, including the use of 'Save to native' and 'get from native' functions. The chapter discusses the use of 'Save to native' and 'get from native' functions to store and retrieve data using native storage.", 'Importing and implementing native storage in the app, including adding the constructor function and using native storage in the home.ts file is detailed. The process of importing and implementing native storage in the app, such as adding the constructor function and utilizing native storage in the home.ts file, is elaborated.', 'The importance of injecting native storage into the app module is emphasized, and the process of doing so in the app.module.ts file is explained. The significance of injecting native storage into the app module is highlighted, along with the process of doing so in the app.module.ts file.']}], 'duration': 1017.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg8160766.jpg', 'highlights': ['Utilizing Ionic Native for native functionality, such as accessing the camera and using native storage for storing information in Android and iOS.', 'Enabling live reload and debugging configuration for a seamless debugging experience.', "The process of saving and retrieving data using native storage is explained, including the use of 'Save to native' and 'get from native' functions."]}, {'end': 10738.835, 'segs': [{'end': 9233.851, 'src': 'embed', 'start': 9205.319, 'weight': 6, 'content': [{'end': 9208.66, 'text': "it's a little bit different than ionic 3 debugging.", 'start': 9205.319, 'duration': 3.341}, {'end': 9211.601, 'text': 'so first thing you want to do is you want to start your emulator.', 'start': 9208.66, 'duration': 2.941}, {'end': 9221.444, 'text': 'you can do that by going to the terminal and going to your folder where your app is and type a command ionic cordova, emulate ios and dash.', 'start': 9211.601, 'duration': 9.843}, {'end': 9222.624, 'text': 'dash, live reload.', 'start': 9221.444, 'duration': 1.18}, {'end': 9224.305, 'text': 'if you want to live, reload the server.', 'start': 9222.624, 'duration': 1.681}, {'end': 9233.851, 'text': "so, for example, if i here say hey, i'm going to command s and it will reload the emulator and it will have things applied.", 'start': 9224.305, 'duration': 9.546}], 'summary': 'Debugging in ionic 3 involves starting the emulator and using live reload for real-time updates.', 'duration': 28.532, 'max_score': 9205.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg9205319.jpg'}, {'end': 9278.699, 'src': 'embed', 'start': 9248.759, 'weight': 7, 'content': [{'end': 9253.242, 'text': "So if you don't see that, what you want to do is go to Safari, go to Preference,", 'start': 9248.759, 'duration': 4.483}, {'end': 9258.705, 'text': 'go to Advanced and then here make sure you have enabled Show Develop Menu in the menu bar.', 'start': 9253.242, 'duration': 5.463}, {'end': 9265.997, 'text': 'once you have that, you close this out and then click on this develop tool and then click on this simulator,', 'start': 9259.452, 'duration': 6.545}, {'end': 9269.879, 'text': 'and here you will see if you have any emulator running currently.', 'start': 9265.997, 'duration': 3.882}, {'end': 9271.16, 'text': "so you'll go to.", 'start': 9269.879, 'duration': 1.281}, {'end': 9278.699, 'text': "uh, you'll go to develop and go to simulator and then click on this 192.168..", 'start': 9271.16, 'duration': 7.539}], 'summary': 'Enable show develop menu in safari preferences to access emulator in simulator.', 'duration': 29.94, 'max_score': 9248.759, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg9248759.jpg'}, {'end': 9327.376, 'src': 'embed', 'start': 9301.139, 'weight': 1, 'content': [{'end': 9307.805, 'text': "then I will find in the source tab there's something called tabs-tabs-module.js.", 'start': 9301.139, 'duration': 6.666}, {'end': 9318.193, 'text': "now in the code, if you take a look at, I have this app folder and I have this tab modules and here I'm lazy loading in the tab module.", 'start': 9307.805, 'duration': 10.388}, {'end': 9319.314, 'text': 'similar to that.', 'start': 9318.193, 'duration': 1.121}, {'end': 9327.376, 'text': "if I look at here, I'll go inside the tab and then inside the tab I have all the pages related to tabs module.", 'start': 9319.314, 'duration': 8.062}], 'summary': "The source tab contains 'tabs-tabs-module.js', which includes lazy loading in the tab module and related pages.", 'duration': 26.237, 'max_score': 9301.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg9301139.jpg'}, {'end': 9543.922, 'src': 'embed', 'start': 9512.565, 'weight': 4, 'content': [{'end': 9515.307, 'text': 'WebStorm has great debugging tools.', 'start': 9512.565, 'duration': 2.742}, {'end': 9517.609, 'text': "This is what I'm going to show you in this video.", 'start': 9515.827, 'duration': 1.782}, {'end': 9520.631, 'text': "It's basically a simple JavaScript debugging tool.", 'start': 9517.709, 'duration': 2.922}, {'end': 9524.353, 'text': "Okay, so I'm in the project and I have my app running here.", 'start': 9521.211, 'duration': 3.142}, {'end': 9525.654, 'text': 'Let me go and start the server.', 'start': 9524.373, 'duration': 1.281}, {'end': 9529.777, 'text': "I'm going to go to Terminal and I'll say Ionic Server.", 'start': 9525.734, 'duration': 4.043}, {'end': 9532.959, 'text': "And it's going to start the server on port 8100 on localhost.", 'start': 9530.737, 'duration': 2.222}, {'end': 9538.961, 'text': 'And I can see, there you go, I have app starting localhost 8100.', 'start': 9534.78, 'duration': 4.181}, {'end': 9543.922, 'text': 'Now once that starts, I want to go and configure my debugger in Ionic.', 'start': 9538.961, 'duration': 4.961}], 'summary': 'Webstorm offers great debugging tools for javascript, demonstrated in the video with ionic server starting on port 8100.', 'duration': 31.357, 'max_score': 9512.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg9512565.jpg'}, {'end': 9942.592, 'src': 'embed', 'start': 9917.213, 'weight': 0, 'content': [{'end': 9923.278, 'text': "Let's take you to WebStrom and here I have the application Ionic 2 which we were using in the last video.", 'start': 9917.213, 'duration': 6.065}, {'end': 9929.842, 'text': 'So first thing we want to do is we want to import this plugin to our module.', 'start': 9923.958, 'duration': 5.884}, {'end': 9933.945, 'text': 'So we can do that by importing that plugin.', 'start': 9930.643, 'duration': 3.302}, {'end': 9936.988, 'text': 'But remember to install it as well.', 'start': 9934.306, 'duration': 2.682}, {'end': 9938.769, 'text': 'So here we have two commands.', 'start': 9937.088, 'duration': 1.681}, {'end': 9941.531, 'text': 'You have to just copy this line of code.', 'start': 9939.309, 'duration': 2.222}, {'end': 9942.592, 'text': "I'm just going to copy this.", 'start': 9941.551, 'duration': 1.041}], 'summary': 'Import ionic 2 plugin to webstorm and install it using provided commands.', 'duration': 25.379, 'max_score': 9917.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg9917213.jpg'}, {'end': 10052.928, 'src': 'embed', 'start': 10028.298, 'weight': 3, 'content': [{'end': 10036.745, 'text': 'So we can directly inject that into home.module.ts or you could add that into app.module as well.', 'start': 10028.298, 'duration': 8.447}, {'end': 10037.785, 'text': "so it's.", 'start': 10037.225, 'duration': 0.56}, {'end': 10045.167, 'text': "it's okay to you know, add in home.module.ts, and if you want to use this http throughout your application,", 'start': 10037.785, 'duration': 7.382}, {'end': 10052.928, 'text': "you're better off adding that app.module.ts, because you can use this into any module later on, because that's the parent module.", 'start': 10045.167, 'duration': 7.761}], 'summary': 'Inject http into home.module.ts or app.module.ts for wider application usage.', 'duration': 24.63, 'max_score': 10028.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg10028298.jpg'}, {'end': 10445.766, 'src': 'embed', 'start': 10419.814, 'weight': 2, 'content': [{'end': 10434.278, 'text': "So let's say in your application sometimes you want to send an SMS message to a particular number and you don't want a user to go and open their SMS application and then type their number and then type the message there.", 'start': 10419.814, 'duration': 14.464}, {'end': 10442.003, 'text': 'So instead, what you want to do is you want to create a button which will take them to SMS application,', 'start': 10434.958, 'duration': 7.045}, {'end': 10445.766, 'text': 'also type the message there and also add the number there as well.', 'start': 10442.003, 'duration': 3.763}], 'summary': 'Users can be directed to sms app to send messages with pre-filled number and message.', 'duration': 25.952, 'max_score': 10419.814, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg10419814.jpg'}, {'end': 10738.835, 'src': 'embed', 'start': 10713.425, 'weight': 5, 'content': [{'end': 10716.487, 'text': 'and then you can call all of these instance members.', 'start': 10713.425, 'duration': 3.062}, {'end': 10722.392, 'text': 'So you want to use model platform, serial UID, a version whatever you want to get from it.', 'start': 10716.507, 'duration': 5.885}, {'end': 10725.075, 'text': 'you can use this device plugin to do that.', 'start': 10722.392, 'duration': 2.683}, {'end': 10727.379, 'text': "so that's it for ionic 4 tutorial series.", 'start': 10725.075, 'duration': 2.304}, {'end': 10735.73, 'text': "guys, this is the last video for ionic 4 and i hope you liked the tutorial series and yeah, i'll talk to you guys in the next series.", 'start': 10727.379, 'duration': 8.351}, {'end': 10736.431, 'text': 'thanks for watching.', 'start': 10735.73, 'duration': 0.701}, {'end': 10738.835, 'text': "subscribe to the channel and i'll talk to you guys later.", 'start': 10736.431, 'duration': 2.404}], 'summary': 'The tutorial series for ionic 4 has concluded with a call to action for viewers to subscribe to the channel.', 'duration': 25.41, 'max_score': 10713.425, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg10713425.jpg'}], 'start': 9181.795, 'title': 'Debugging and implementing in ionic 4', 'summary': 'Discusses debugging ios emulator and ionic 4 with webstorm, implementing http get request, and using ionic for emulator interaction, http requests, and sms plugin, resulting in efficient debugging and successful implementation.', 'chapters': [{'end': 9485.682, 'start': 9181.795, 'title': 'Debugging ios emulator in ionic 4', 'summary': 'Discusses how to debug an ios emulator running an ionic 4 application, including starting the emulator, using safari develop menu to inspect the emulator, and understanding the file structure in ionic 4 debugging.', 'duration': 303.887, 'highlights': ['The chapter discusses how to debug an iOS emulator running an Ionic 4 application, including starting the emulator, using Safari Develop menu to inspect the emulator, and understanding the file structure in Ionic 4 debugging. Debugging an iOS emulator in Ionic 4, starting the emulator with live reload, using Safari Develop menu to inspect the emulator, understanding the file structure in Ionic 4 debugging.', "The process of starting the emulator and using live reload is explained, involving using the command 'ionic cordova emulate ios --live-reload' to start the emulator with live reload functionality. Explanation of starting the emulator and using live reload, using the command 'ionic cordova emulate ios --live-reload'.", 'The usage of Safari Develop menu to inspect the running emulator is demonstrated, including enabling the Develop menu in Safari Preferences and accessing the emulator through the Develop menu. Demonstration of using Safari Develop menu, enabling the Develop menu in Safari Preferences, accessing the emulator through the Develop menu.', 'The difference in file structure and lazy loading between Ionic 3 and Ionic 4 is described, highlighting the need to load the module before it can be viewed in the sources tab in Ionic 4. Description of the difference in file structure and lazy loading between Ionic 3 and Ionic 4, need to load the module before it can be viewed in the sources tab in Ionic 4.']}, {'end': 9966.242, 'start': 9485.682, 'title': 'Debugging ionic 4 with webstorm', 'summary': 'Covers debugging an ionic 4 application using webstorm, including setting up the debugger, using breakpoints, and utilizing the jetbrains ide support extension in chrome, which results in a time-saving and efficient debugging process.', 'duration': 480.56, 'highlights': ['The chapter emphasizes the process of debugging an Ionic 4 application using WebStorm, focusing on setting up the debugger, utilizing breakpoints, and leveraging the JetBrains IDE support extension in Chrome to streamline the debugging process.', 'Demonstrates the steps to configure the debugger in Ionic, including naming the target URL as localhost:8100, enabling the JetBrains IDE support extension in Chrome, and utilizing debugger tools for breakpoints and console monitoring.', 'Highlights the benefits of using the native HTTP plugin from Ionic 4 library, such as SSL pinning and background threading for HTTP calls, as an alternative to the Angular HTTP client module, showcasing the advantages of the native plugin.', 'Provides a walkthrough of importing and installing the native HTTP plugin in an Ionic 2 application, illustrating the installation process and commands required to incorporate the plugin into the project.']}, {'end': 10226.862, 'start': 9967.402, 'title': 'Implementing http get request in ionic', 'summary': 'Outlines the process of implementing an http get request in an ionic application, including importing the necessary modules, configuring the http module, and utilizing the http.get method to retrieve data from a fake online rest api, json placeholder.', 'duration': 259.46, 'highlights': ['The process of implementing an HTTP GET request in an Ionic application is explained, involving importing the necessary modules, configuring the HTTP module, and utilizing the HTTP.get method to retrieve data from a fake online REST API, JSON placeholder. The chapter discusses the steps involved in implementing an HTTP GET request in an Ionic application, including importing the necessary modules, configuring the HTTP module, and utilizing the HTTP.get method to retrieve data from a fake online REST API, JSON placeholder.', 'The usage of the HTTP module and NGX in an Ionic application is demonstrated, emphasizing the importance of adding the HTTP module to the parent module for broader usage throughout the application. The usage of the HTTP module and NGX in an Ionic application is demonstrated, emphasizing the importance of adding the HTTP module to the parent module for broader usage throughout the application.', 'The utilization of a fake online REST API, JSON placeholder, for testing and prototyping HTTP methods such as POST, GET, PUT, and DELETE is explained. The chapter explains the utilization of a fake online REST API, JSON placeholder, for testing and prototyping HTTP methods such as POST, GET, PUT, and DELETE.']}, {'end': 10738.835, 'start': 10227.362, 'title': 'Using ionic for emulator and sms plugin', 'summary': 'Demonstrates using ionic to interact with an emulator, make http requests, and implement an sms plugin, showcasing the usage and installation process, with examples of get, post, delete, and put requests, and instructions for using native apis from ionic 4.', 'duration': 511.473, 'highlights': ['Demonstrating Usage of HTTP Requests and Emulator in Ionic The speaker demonstrates using Ionic to interact with an emulator, make HTTP requests, and get data from a JSON placeholder, showcasing the process of making GET, POST, DELETE, and PUT requests.', 'Implementing SMS Plugin in Ionic The tutorial explains the process of installing and using an SMS plugin in Ionic, with a demonstration of creating a button to send an SMS message and showcasing the installation steps and code implementation.', 'Utilizing Native APIs from Ionic 4 Library The tutorial provides guidance on using native APIs from the Ionic 4 library, such as 3D Touch, and encourages further exploration of the available APIs by referring to the respective documentation and using the device plugin for various functionalities.']}], 'duration': 1557.04, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/AvbuIRg8_Jg/pics/AvbuIRg8_Jg9181795.jpg', 'highlights': ['Demonstrates the steps to configure the debugger in Ionic, including naming the target URL as localhost:8100, enabling the JetBrains IDE support extension in Chrome, and utilizing debugger tools for breakpoints and console monitoring.', 'The chapter discusses the steps involved in implementing an HTTP GET request in an Ionic application, including importing the necessary modules, configuring the HTTP module, and utilizing the HTTP.get method to retrieve data from a fake online REST API, JSON placeholder.', 'The chapter emphasizes the process of debugging an Ionic 4 application using WebStorm, focusing on setting up the debugger, utilizing breakpoints, and leveraging the JetBrains IDE support extension in Chrome to streamline the debugging process.', "The process of starting the emulator and using live reload is explained, involving using the command 'ionic cordova emulate ios --live-reload' to start the emulator with live reload functionality.", 'The chapter discusses how to debug an iOS emulator running an Ionic 4 application, including starting the emulator, using Safari Develop menu to inspect the emulator, and understanding the file structure in Ionic 4 debugging.', 'The usage of the HTTP module and NGX in an Ionic application is demonstrated, emphasizing the importance of adding the HTTP module to the parent module for broader usage throughout the application.', 'The tutorial explains the process of installing and using an SMS plugin in Ionic, with a demonstration of creating a button to send an SMS message and showcasing the installation steps and code implementation.', 'The tutorial provides guidance on using native APIs from the Ionic 4 library, such as 3D Touch, and encourages further exploration of the available APIs by referring to the respective documentation and using the device plugin for various functionalities.']}], 'highlights': ['Ionic framework enables building mobile applications for multiple platforms from a single code base, such as iOS, Android, and Windows.', 'Guidance is provided for creating an Ionic 4 project with Angular template and integrating Cordova to target native iOS and Android platforms.', 'Node.js and NPN are installed for package management, emphasizing the preference for LTS version and successful installation verification.', 'Ionic CLI and Cordova are installed globally, and their versions are successfully verified, ensuring the tools are ready for use.', 'Overview of Ionic Pro offering extra features like live deploy and app monitoring, and can generate native packages in the cloud, without needing to go to App Store or Play Store.', 'Differentiating the available template options for Ionic 4 and Ionic 3 projects, with Ionic 4 offering limited template choices.', 'Covers emulating Ionic projects for iOS and Android.', 'Explains the concept of lazy loading in Ionic 4, allowing efficient loading of modules based on the browser URL or requested pages, reducing the application loading time.', 'Introduction of various Ionic UI components with emphasis on their functionalities and ease of implementation.', 'Ionic 4 offers more UI components compared to Ionic 3, with examples such as the toolbar.', 'Infinite scroll is a useful component for handling large data sets, allowing for efficient data loading as users scroll, enabling a better user experience.', 'Utilizing Ionic Native for native functionality, such as accessing the camera and using native storage for storing information in Android and iOS.', 'Demonstrates the steps to configure the debugger in Ionic, including naming the target URL as localhost:8100, enabling the JetBrains IDE support extension in Chrome, and utilizing debugger tools for breakpoints and console monitoring.', 'The chapter discusses the steps involved in implementing an HTTP GET request in an Ionic application, including importing the necessary modules, configuring the HTTP module, and utilizing the HTTP.get method to retrieve data from a fake online REST API, JSON placeholder.']}