[MUSIC] Now that you have had a quick introduction to Cordova and how Cordova explores the JavaScript API, which can be used by your Ionic applications. And the Cordova plugins that enable you to access the native functionality on your mobile devices. And also the Ionic Native, which packages the Cordova plugins and then makes them available to your Ionic application supporting either the promise or the observable based API for us to use within our Ionic application. Let's take a first look at one of our very first Ionic plugins, customizing the splash screen. So this is where we will make use of the splash screen plugin that we will use to customize and control the splash screen that we use within our application. When we scaffolded out our Ionic application, the default Ionic application was already scaffolded out. Including the splash screen support for the application. So the Ionic Native plugin for the splash screen and also the status bar are already included into our Ionic application. And the starter code for controlling the splash screen is already there in our app.component.ts file. So let's pay a visit to the app.module.ts file and the app.component.ts file to understand how the splash screen has been set up and being controlled from our application. So taking a look at the app.module.ts file, you'll see that within the app.module.ts file, you see that the StatusBar plugin has been already imported from the ionic-native/status-bar. And the SplashScreen plugin has already been imported from the ionic-native/splash-screen here. And both of these are already included into the providers section here. And so in the NGModule decorator in the providers section, you see the StatusBar and the SplashScreen already included into the providers. So our application is already set up to use the SplashScreen Ionic Native plugin. And the corresponding NPM modules have already been downloaded and installed. So we don't need to do anything additional in order to make use of the splash screen within our application. Now as you saw, when we deployed our application to the emulator and also to the Android device, you saw the SplashScreen already in action. So in this exercise, we're going to customize the SplashScreen by including our own SplashScreen image. And our own icon for our Ionic application. Now that we have seen how the SplashScreen is already configured in the app.module.ts, let's go and take a look at the app.component.ts file. In the app.component.ts file also, you see at the top the StatusBar and the SplashScreen have already been imported into the app.component.ts file. And going down into the file, you see that in the constructor, the platform, which is an Ionic service, has already been injected. I'll talk about the platform in a little bit detail a few seconds later. Then we also see that the StatusBar and also the SplashScreen have been injected into the constructor. Now, going down into the code, we see this method called the initializeApp method. And inside the initializeApp method, you see a call to this function called the ready from the platform. So what exactly is the platform? The platform is a service that enables you to obtain information about the current device. The platform service supports many different functions there. You can make use of that to obtain lot of information about the current platform on which you are running your Ionic application. And could be used within your application for customizing various things. In particular, I'm looking at how the ready function is being used here. The ready function here will return a promise to us. And the promise will resolve at the point when my underlying platform is ready. And the plugins that we have included within our Ionic application have all been loaded in. And so we can then start using those plugins. So until the platform.ready is fired and the promise is resolved, we won't have access to the various plugins that we include within our application. So you would see that whenever we are making use of the plugins, we will always surround it with this platform.ready call there. So that those functions will be called only at the point when your platform is already in the ready state. And everything is set up for you to be able to use the plugins that you have included in your application. So that is the reason why inside the then method of the ready function, we are calling the various plugins here. The two plugins that we have already included here. So inside this arrow function, as you can see, we are saying this.statusBar.styleDefault. So we are not trying to further customize the status bar. We are just using it as a default. If you want to customize the status bar further, then you can look up the documentation about the StatusBar plugin. And then make use of its functions to customize the status bar. The second call is to the splashScreen.hide function here. So when you call the splashScreen.hide function at this point, the splash screen, which is being displayed on your device's screen, will then be hidden. And thereby revealing the view of your Ionic application. Now, one of the reasons why we would use a splash screen is that before your application gets set up, you may wish to access a server and then obtain data from the server. And until the data is available, you don't want to be able to reveal your view to the user. So you can hide behind the splash screen, so to say, until you have sufficient data available to render the first view to your user. In this case, what we are doing is we are hiding the splash screen as soon as the platform is ready. You can call the splashScreen.hide function at any other location. For example, you can wait until your data for rendering your home screen is all available to you. And then at that point call the splashScreen.hide. And then the splash screen can be hidden at that particular point. Now, in this case, I'm going to leave it as such. So we will simply hide the splash screen as soon as the platform is ready at this moment. So I'm not going to further customize. But should you choose to hide the splash screen at a later date, you can always do that. Now the more important question that might arise in your mind is, how can I customize the splash screen? So this is where we will look at the resources that are available for your Ionic application. And so in your Ionic application's root folder, you will see this folder named resources here. So if you open the resources folder, you will see two files here. The icon.png and the splash.png. Now looking at these two PNG files, you immediately recognize that this is what has been used as the splash screen for the Ionic application when the Ionic application started. And so if we replace these two files with our own custom files. And then make use of Cordova support to customize this splash screen. So what the Cordova resources command will do is to take this default splash screen image that we provide for it. And then prepare images at different sizes. So you can see that if you go into the resources > android > icon, you would see that you have images at different resolutions available there. And similarly, the splash screens at different resolutions. So this is the landscape one, the portrait one for the low density screens, for high density screens, and so on. So all these PNG files are automatically prepared for us by Cordova once you supply the default icon.png and splash.png files. Now, fortunately, in the instructions for this particular exercise, I have provided you with the customized icon.png and the splash.png files. In the next step, you will simply download those icon.png and splash.png files. And then move them into the resources folder to replace this icon.png and splash.png files here. And then after that, we will use the Cordova resources to recompile our splash screen and icon for different resolutions. Now here, when you supply the icon.png and splash.png, you need to supply it at a very high resolution. So something in the range of close to 3,000 pixels by 3,000 pixels in size. And then when you invoke Cordova resources, it will automatically construct the various PNG files at different screen resolutions for you. Taking the main file that we provide first, the main PNG files that we provide first. So let's move on to the next step. We will download the customized icon.png and splash.png files. And then substitute them into this resources folder. So in the next step, go to the Exercise(Instructions). And then here you'll see that I have provided the icon.png and splash.png. Just right-click and then download these files into your computer. And then save them as icon.png and splash.png. And then once you get hold of these two files, then you just copy those files into the resources folder of your Ionic application. So here in my finder window, or if you're using a Windows machine, you can use the Windows Explorer. You navigate down to where your Ionic application is stored. So here, I have my Ionic application in the Ionic conFusion folder here. And then when you move into the Ionic conFusion folder, then move into the resources folder there. And you immediately notice the icon.png and splash.png files. Now replace these two with the two files that you have downloaded. The two customized files that I've provided for you that you have downloaded. Move them into this folder. So that is what I'm going to do in the next step here. So I'm going to replace both of these with that custom icon.png and splash.png files. So once I complete that, then I'm going to invoke the Cordova resources command to prepare the new icons and the splash screens at different screen resolutions on my behalf. So going to the terminal or the command window. And in your project folder, in the conFusion folder, type ionic cordova resources. And wait for the command to take the two files that you have provided. The high resolution files that you have provided to it. And that automatically prepare the resources of the files at different screen resolutions on your behalf. And you may need to sign in for an Ionic account. If you don't happen to have an Ionic account, just sign up for an Ionic account as stated here. And let me type in my Ionic account. So once you do that, the custom resources that you have included there will be uploaded to the Ionic cloud. And then the corresponding files will be prepared and then brought back to your application. Now, let's pay a visit to our folder one more time. If you now go to your project folder, and then let's browse into the android > icon. And then you see that you have the icons prepared at different resolutions here. Same thing with the splash screen. You have the splash screens at different resolutions prepared here for you. Same thing in ios, too. So in ios, you have the icons at different resolutions. And the splash screen also at different resolutions. So now your Ionic application has been customized with a custom splash screen. Now the next step is, of course, to build and deploy your Ionic application to either the emulator or the real device. So just as we learned in the previous exercise, I'm going to go to the terminal and then type ionic cordova platform add android. I'm going to use Android to demonstrate this. Then I will say ionic cordova run android. And wait for it to deploy to my Android device. Once my application deploys to the Android device, you can see that the new customized splash screen is being used by my Ionic application. Not only that, if we go to the Apps folder here, you would see that in the Apps folder, we have the customized icon being used for my application here. So you can see that the customized icon is being used for my application here. And one more time. When I click on my Ionic application, you can see the splash screen before the application is shown to us. So with this, we complete this exercise. Where we have seen how we can customize the splash screen and the icon for our Ionic application. This is a good time for you to do a Git commit with the message splash screen. [MUSIC]
