Native Device Features with Ionic Native & Cordova

ionic-4-crash-course-day-4
Welcome to the 4. lesson of the Ionic Crash Course!

Today we will learn how to work with the underlying device features. As our Ionic apps only run inside a webview, we need somehow access to the device features like camera or gyroscope. This lesson is shorter than the previous ones but perhaps even more important to understand!

1. What are Cordova Plugins

If you are coming from web development or anything else, chances are high you have not heard of Cordova.

To keep it simple: Cordova wraps native Code (Swift, Objective-C, Java) into a Javascript interface which acts as a bridge to our code.

Through this bridge we can then call native plugins directly from our Javascript code without every seeing our touching the native languages (unless we need to write our own Cordova plugins).

I explained the concept more detailed in one of the courses inside the Ionic Academy, but I made this one free for you so you can get a bit deeper knowledge on Cordova!

With Ionic we could either use the Cordova plugins directly or, what is recommended, use a package called Ionic Native.

This package allows us to use the plugins more easily and comfortable with Angular, so here we go!

2. Adding Cordova Plugins with Ionic Native

Whenever we need a specific plugin we can lookup inside the library of Ionic Native to see if there is already something for us.

In our case, we want to share a film with other people by opening the native Email client of a device. Sounds simple, but we still need a plugin for this!

There are 2 things here we need to add/install: First the general Cordova plugin, which will then be added to our native iOS or Android project once we build them.

Second we need to install the acccording sub package of Ionic Native. So go ahead and run from your project:

To make the plugin available to our app we need to include it in our module, so open your app/app.module.ts and change it to:

We are now prepared to call the native email dialog inside our app!

3. Using Native Functionalities

We start by adding a button to the details page of a film which will call the function where we prepare to load the email client.


Go ahead and simply put a button below our card inside the pages/film-details/film-details.page.html:

Inside our class we again need to import the correct package for the email client and also add it to our constructor.

We can then use it inside the shareFilm() function where we create a new email object with a few properties like where we want to send it, the title or even the body (that could be HTML markup)!

This object is then simply passed to our emailComposer which will take car of the rest.

Open your pages/film-details/film-details.page.ts and change it to:

If you don’t know which properties and functions exist for a plugin, these are always listed on the Ionic Native page for a plugin. It’s not like I know them all like an Albus Dumbledore of Ionic!

If you now refresh your app and try to use the button inside the browser you will very likely see a) nothing and b) a warning in the console like this:

ionic-crash-course-cordova-warning

Although the warning makes it already clear, once again:

Cordova plugins are not working in your browser preview!

Whenever you want to test these functions you have to deploy your app to the simulator or physical device.

The Cordova bridge is only injected once you call the build command for your app, and the file is not available when you test it inside your browser.

You have already learned how to build and deploy your app in the very first lesson, so go ahead and build and run it now.

Once you deploy it and use the share function, you will now get to the native email client (in this image for example iOS)!

ionic-4-cordova-email

4. Next Steps

Congratulations on finishing the 4. lesson!

You are now well aware of another big part of the ecosystem of hybrid apps named Cordova.

The world is open to you and you can add all kind of plugins – and they always follow more or less the same installation and usage pattern!

In the next lesson we will learn to store data local in our own app by using another great Ionic package.