[MUSIC] In the previous module, I introduced you briefly to Cordova. And we saw how Cordova forms the core foundation on which Ionic is built. And Cordova enables us to access the underlying native platforms capabilities. And exports the JavaScript API that our Ionic application can leverage. Now in the process of doing so, we need to take the help of Cordova plugins. I'll talk about the Cordova plugins a little more in the next slide. And correspondingly, Ionic provides wrappers around the Cordova plugins using the Ionic Native. So let's talk about the role of these two in a little more detail. The way I visualize the need for the plugins and the role that they play in the overall scheme of things is that you have Cordova library, which basically ramps the underlying native platform and exports the JavaScript API. Of course, the Cordova library provides the core library. But then, the Cordova library takes advantage of the various Cordova plugins that are developed independent of the core library. These plugins give you access to individual native capabilities. So, for example, you have a plugin that enables you to access the camera. You have a plugin that enables you to access the local notifications. You have another plugin that enables you to access the image gallery. You have a different plugin that enables you to access the storage, and so on. So each of these plugins basically fill in whatever is required to wrap the native functionality. And make it available through Cordova for applications that are built on top of Cordova. So these plugins, as you see in this picture here, represented by the plus signs that are residing between the Cordova and the native platform. Enable the bridge between Cordova and the native platform. Now, as we have learned, Ionic is built on top of Cordova. So Cordova wraps Ionic and then enables that to run on the native platform. And Ionic leverages the features and facilities that are provided by the Cordova library in order to be able to run on the native platform. Now, as we have learned, Ionic leverages Angular for its development. And so when you have the Cordova plugins available for us, so we want to be able to leverage the JavaScript API that the Cordova plugins export within our Ionic application. Since Ionic uses Angular, and within Angular, you often use promises and observables as the way for providing the interfaces. So the role that Ionic plays in the scheme of things is that the Ionic provides wrappers around the Cordova plugins. And then on the other side exports a callback interface that supports promises or observables. And that makes it easy for us to use these plugins within our Ionic application. To summarize, what Ionic Native does is it provides a TypeScript wrapper around the Cordova or the Phonegap plugins. And this way, it eases adding the native functionality to your Ionic application. And provides an interface that is more easier to use within your Angular application. It wraps the plugin callbacks in a promise or an observable. So that when you make use of them within your Ionic application in your Angular code, it becomes more easier. Because Angular is already built to use promises and observables. Now, recall that when you need to access the underlying native platform that it's going to take some time for you to be able to obtain the results. And so waiting for the results means that you need to add a callback based interface. And this is where the promise and observable based callbacks enable us to easily handle the waiting for the native functionality to be able to return whatever is required for our Ionic application. So, also, the Ionic Native wrappers ensures that any native events that take place will trigger the change detection in Angular. Which will in turn detect the changes and then cause any updates that are required within your Angular application, and consequently, your Ionic application. Hence, the reason for using Ionic Native in our Ionic applications. How do we use the Cordova plugins and Ionic Native plugins within our application? There are a set of steps that you will often see me doing in the exercises. First and foremost, we will, of course, acquire the Cordova plugin or the Phonegap plugin that we want to make use of. Because we are trying to access some native functionality. And then we will install that Cordova or Phonegap plugin by calling ionic cordova plugin add, and then specifying the plugin name. And then once the Cordova plugin is installed, then we'll install the corresponding Ionic Native plugin for that Cordova plugin. The Ionic Native plugin is an NPM module. So we'll say, npm install and the specific Ionic Native plugin. And once that is done, then you will import the plugin into your AppModule. And then also make sure that the plugin is added in into the providers of your ng decorator of your AppModule. And once that is done, then the last step, of course, is to identify where you want to make use of the plugin. The respective page or component or the service or the provider where you want to make use of plugin. Within that code, you will then also import the Ionic Native plugin. And then inject it into the constructor. And thereafter, make use of the plugin API within your code in your page, component, service, or the provider. So as you go through the exercises, look at the four steps that I'm going to follow in each case. In order to leverage the Ionic Native plugin and the corresponding Cordova plugin for providing access to the native functionality of our device. [MUSIC]
