Using Google Admob In Your NativeScript Angular 2 Mobile App

I recently received a request from one of my followers for a tutorial on using Google Admob in a NativeScript Angular 2 application.  Not too long ago I had demonstrated Google Admob in a vanilla NativeScript project, but I hadn’t yet given it a shot with Angular 2.

In case you’re unfamiliar with Admob, it is an excellent way to monetize your mobile applications with advertisements.  You’ll earn revenue not only from people clicking your in-app advertisements, but also from the advertisements appearing on the screen.

We’re going to see how to use Admob in a NativeScript Android and iOS application that was built with Angular 2.


NativeScript 101

NativeScript For The Angular 2 Developer

After months of receiving requests, I am finally pleased to announce that my course, NativeScript for the Angular 2 Developer, is now available on Udemy.  This Angular 2 and NativeScript course is similar to the previous course I released titled, NativeScript 101, with the exception that this time we’re using Angular 2 instead of vanilla JavaScript.  If you’re unfamiliar with NativeScript, it is a cross platform framework for developing native mobile applications.  There needs to be emphasis on the native part because you’re not building hybrid web applications, you’re building native mobile applications.

So what can you hope to accomplish in this particular course?


Send Emails With Rackspace Mailgun Using NativeScript And Angular 2

Sending emails from your mobile application is often a critical aspect.  For example, what if you want to be able to collect user feedback, wouldn’t email be one of the better solutions?  Now let’s add to this scenario and say that the user doesn’t have email configured on their mobile device.  How does the user send emails to you from your application?  This is where the Rackspace Mailgun API comes into play.

The Rackspace Mailgun API is a service, which includes a free tier, for sending emails via a RESTful API.  No need for users to configure their email client and no need to maintain an email inbox.  It is great for getting the job done.

Not too long ago I wrote about using the Mailgun API in a vanilla NativeScript application.  One of my subscribers recently requested information on how to accomplish this task using Angular 2 in a NativeScript application and I thought it would make a perfect tutorial.


Working With Shared Providers In A NativeScript Angular 2 App

When building a NativeScript application with Angular 2, there are certain scenarios where you might want to share functions and variables across the pages of the application.  There are other scenarios where you might want to pull similar functions into a class for code cleanliness.  Both of these scenarios would find value in using Angular 2 shared providers.

Shared providers can be injected into the constructor methods of each page that you wish to use them.  The providers can act as a singleton where the data and functions are global to the application rather than local to any specific page.

We’re going to see how to create a provider for managing interactions with a database in an Angular 2 NativeScript application.


Use A Pre-Populated SQLite Database With NativeScript And Angular 2

I recently wrote about how to use a SQLite database within a NativeScript Android and iOS application that was built with Angular 2.  This was more or less a revisit to the vanilla NativeScript tutorial on the same subject I had written earlier in the year.  What happens when you have a massive amount of data that you’d like to save your user from needing to download before using your application?  Can a SQLite database be pre-populated and included within an application?

To keep the flow going, I figured it would be a good idea to demonstrate how to ship a NativeScript Angular 2 application with a pre-filled SQLite database rather than populating it on-the-fly.


Using SQLite In A NativeScript Angular 2 Mobile App

Quite a bit of time ago when I first started using NativeScript, I wrote a tutorial around using a SQLite database with it.  Now just to be clear, this was with vanilla NativeScript, before Angular 2 was available.  Heck, the previous article was using JavaScript and not even TypeScript.

Well, times have changed and I figured it would be a good idea to revisit this NativeScript SQLite tutorial, but this time give it some TypeScript and Angular 2 flair.


Passing Complex Data Through The Angular 2 Router With NativeScript

I recently wrote a tutorial for navigating a NativeScript Angular 2 application using the Angular 2 Router.  In this tutorial I demonstrated how to create a multiple page application, navigate between pages, and even pass simple string parameters between the pages during navigation.  However, what happens when the data you need to pass isn’t so simple?

We’re going to take a look at some of the ways to pass data between routes in a NativeScript application that makes use of Angular 2.


Navigating A NativeScript App With The Angular 2 Router

Unless you want a very boring single page application, you’re going to want some form of page navigation with multiple pages available.  Previously I wrote a tutorial for navigating between routes in a vanilla JavaScript NativeScript application, but with Angular 2 in full force, it probably makes sense to demonstrate navigation with the very different Angular 2 Router component.

Anyone who has been following Angular 2 since beta knows that the navigation components have changed drastically in pretty much every release.  Anyone who has been following NativeScript and Angular 2 knows that Telerik likes to use any and all Angular 2 in its vanilla state.  This means that navigation in NativeScript Angular 2 applications has changed quite a bit over the past year.  However, with Angular 2 now in general availability (GA), the Angular 2 Router is no longer beta and should no longer be changing.

We’re going to take a look at simple navigation between two Angular 2 components in a NativeScript Android and iOS mobile application using the now stable Angular 2 Router.


Upgrading Your Hybrid Apps To Native With NativeScript

As someone who has developed both hybrid web applications and native applications, I understand the differences and advantages each brings to the table.  While I agree that you can do some pretty neat things with a hybrid web application built with frameworks like Ionic, I no longer think it is as great of a solution as it once was.

With hybrid web frameworks like Ionic 2 and native mobile frameworks like NativeScript both using Angular 2, you have to step back and ask yourself what you’re truly getting as an advantage as of now in hybrid.  Performance is one of many reasons why native still makes more sense, and being able to use Angular 2, why wouldn’t you?

This is why I spent a lot of time creating an upgrade guide to demonstrate how to take your hybrid mobile application built with Ionic 2 and Angular 2 to native with NativeScript and Angular 2.


Build A Time-Based One-Time Password Manager With NativeScript

Not too long ago I released a time-based one-time password manager called OTP Safe to Google Play and iTunes.  That particular application was built with Ionic Framework and I even wrote a tutorial explaining how to make a similar 2FA manager with Ionic 2.  Being a hybrid mobile application, there were some performance limitations that came with the Ionic 2 application.  This inspired me to convert the application to something native and NativeScript seemed like a solid solution.

Let's take time-based one-time password management to the next level and create a native mobile application with NativeScript and Angular.